/* Ready 4 Roads · capa estática del generador (lo que en la app hacía el estado de React).
   Los estilos visuales de cada sección vienen del marcado migrado (inline) + app.css (bloques <style> globales de la app). */

/* ── nav: desplegables por hover/foco (antes: estado hoverId) ── */
/* los paneles traen display en línea: se ocultan con !important salvo en hover/foco, donde manda su estilo propio */
/* desplegables del menú (Randy 2026-09-30: «desaparece muy rápido»): el panel está 10 px por debajo del ítem y el ratón
   perdía el :hover al cruzar el hueco. Puente invisible sobre el hueco + cierre con retardo; teclado por :focus-within */
nav div[style*="position: relative"]:has(> .nav-panel)::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 18px; }
nav div[style*="position: relative"] > .nav-panel { visibility: visible; opacity: 1; transition: opacity .15s ease, visibility 0s; }
nav div[style*="position: relative"]:not(:hover):not(:focus-within) > .nav-panel { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
  transition: opacity .15s ease .3s, visibility 0s .45s; }
.nav-logo { text-decoration: none; color: inherit; }
nav a, .mnav-panel a, a[style*="display: inline-flex"] { text-decoration: none; }
/* 2026-10-01: sin «Instructors» el ítem Service Area queda más a la derecha y su panel (480 px, anclado al 50 %) salía 5-11 px a 1024
   → se ancla al borde derecho de su ítem (medido con qa/h1_over.mjs, que ahora falla con cualquier desborde) */
@media (max-width: 1199px) { nav div[style*="position: relative"]:has(> a[href$="/service-area/"]) > .nav-panel { left: auto !important; right: 0 !important; } }

/* ── menú móvil: <details> (antes: estado mobileOpen) ── */
details.mnav { position: static; }
details.mnav > summary { list-style: none; cursor: pointer; }
/* el <summary> hereda el display:none en línea del botón original de la app: en móvil se muestra (en ≥901px se oculta el <details> entero) */
@media (max-width: 900px) { details.mnav:not(.mnav-home) > summary { display: inline-flex !important; } }
details.mnav > summary::-webkit-details-marker { display: none; }
details.mnav:not([open]) > .mnav-panel { display: none !important; }
details.mnav[open] > .mnav-panel { display: flex !important; }
@media (min-width: 901px) { details.mnav { display: none !important; } }

/* ── FAQ: <details> con TODAS las respuestas en el HTML (norma 30) ── */
details.faq-item > summary { list-style: none; cursor: pointer; }
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary svg { transition: transform .2s ease; }
details.faq-item[open] > summary svg { transform: rotate(45deg); }
.faq-a { padding: 0 0 16px 28px; font-family: "Archivo", system-ui, sans-serif; font-size: 13px; line-height: 1.6; font-weight: 500; opacity: .85; }

/* ── vídeo del hero: fachada con póster; site.js carga el iframe tras la carga de la página ── */
.yt-facade { display: block; }

/* ── H1 de la home: visible como cintillo del hero (antes oculto con clip) ── */
.hero-h1-kicker { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: #FF6A1F; margin: 0 0 10px; line-height: 1.4; }

/* ── formulario de leads v2: la marca entra SOLO por variables --lf-* (ley de la plantilla) · tarjeta del diseño aprobado ── */
.r4r-lf { --lf-accent: #FF6A1F; --lf-accent-ink: #000000; --lf-surface: rgba(14, 14, 14, .78); --lf-field-bg: rgba(255, 255, 255, .06);
  --lf-ink: #FFFFFF; --lf-muted: rgba(255, 255, 255, .62); --lf-border: rgba(255, 255, 255, .1); --lf-radius: 0px; --lf-field-radius: 2px;
  --lf-font: "Archivo", system-ui, sans-serif; --lf-display: "Archivo Black", "Archivo", sans-serif;
  --lf-shadow: rgba(0, 0, 0, .5) 0px 30px 80px; --lf-eyebrow-font: "JetBrains Mono", monospace; --lf-pad: 28px; }
/* envoltorio (fuera de .lf): filo naranja superior y línea de WhatsApp del diseño */
.r4r-lf-card { border-top: 4px solid #FF6A1F; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 560px; margin: 0 auto; }
.r4r-lf-card .lf { border-top: 0; }
.r4r-lf-accent { color: #FF6A1F; }
.r4r-lf-talk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 28px; background: rgba(14, 14, 14, .78);
  border: 1px solid rgba(255, 255, 255, .1); border-top: 1px dashed rgba(255, 255, 255, .15); font-family: "Archivo", system-ui, sans-serif; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .6); }
.r4r-lf-talk a { color: #FFFFFF; font-weight: 700; text-decoration: none; }

/* ── anclas de ciudad en Service Area: margen para que el nav fijo no tape el título ── */
[id^="city-"], .city-anchor { scroll-margin-top: 90px; }

/* ── movimiento: solo si el usuario lo acepta; sin JS todo es visible ── */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── área de servicio: tarjetas de ciudad (enlace o ancla) ── */
.area-card { cursor: default; }
a.area-card { cursor: pointer; }
.area-blurb { font-family: "Archivo", system-ui, sans-serif; font-size: 13px; line-height: 1.5; margin: 10px 0 0; opacity: .75; }
.city-anchor:target { outline: 3px solid #FF6A1F; outline-offset: 2px; }

/* ── home: carrusel de reseñas · las 8 están en el HTML, se ven 3 (site.js rota el orden) ── */
.r4r-review-grid > article:nth-child(n+4) { display: none; }

/* ── home: tarjetas «qué necesitas» y pasos · 2 columnas del diseño sin desbordar a 320–420 px ── */
@media (max-width: 560px) {
  .r4r-page .r4r-grid-4 > * { min-width: 0; }
  .r4r-page .r4r-help-card div[style*="font-size: 26px"], .r4r-page .r4r-step div[style*="font-size: 26px"] { overflow-wrap: anywhere; hyphens: auto; }
}
@media (max-width: 360px) {
  .r4r-page .r4r-help-card div[style*="font-size: 26px"], .r4r-page .r4r-step div[style*="font-size: 26px"] { font-size: 19px !important; }
  .r4r-page .r4r-help-card span[style*="font-size: 32px"] { font-size: 24px !important; }
  .r4r-page .r4r-step div[style*="font-size: 88px"] { font-size: 56px !important; }
}
/* español: palabras más largas («PRINCIPIANTE», «ASIGNAMOS») → el ajuste empieza antes */
@media (max-width: 440px) {
  html[lang="es"] .r4r-page .r4r-help-card div[style*="font-size: 26px"], html[lang="es"] .r4r-page .r4r-step div[style*="font-size: 26px"] { font-size: 20px !important; }
  html[lang="es"] .r4r-page .r4r-step div[style*="font-size: 88px"] { font-size: 60px !important; }
}

/* ── nav: a 360 px o menos el lema bajo el logo no cabe (sobre todo en español) → se oculta; nombre y botón quedan ── */
@media (max-width: 360px) {
  .nav-logo div[style*="JetBrains Mono"] { display: none; }
  nav.hide-mobile + div { gap: 6px !important; }
  nav.hide-mobile + div > a { padding: 9px 10px !important; font-size: 11px !important; letter-spacing: 0.04em !important; gap: 6px !important; }
  nav.hide-mobile + div summary { padding: 8px 9px !important; }
}
/* ── instructores: las dos cifras de cada tarjeta no fuerzan ancho mínimo en móvil ── */
.inst-content div[style*="grid-template-columns: 1fr 1fr"] > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) { .inst-content div[style*="font-size: 28px"] { font-size: 22px !important; } }

/* ── P0 SEO+CRO v2 (brief 2026-09-29 + Randy: menos texto, premium, vender paquetes) ── */
.r4r-page h1.hero-h1-main { font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 68px; line-height: .94; letter-spacing: -.035em;
  margin: 18px 0 0; text-transform: uppercase; max-width: 720px; font-weight: 900; color: #FFFFFF; text-shadow: rgba(0, 0, 0, .45) 0 4px 24px; }
.hero-proof { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 9px 18px 9px 9px; background: #FFFFFF;
  border: 0; border-radius: 999px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); color: #0E0E0E; text-decoration: none; font-family: Archivo, system-ui, sans-serif; font-size: 16px;
  font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-proof strong { font-weight: 800; }
.hero-proof:hover, .hero-proof:focus-visible { box-shadow: 0 0 0 3px #FF6A1F, 0 12px 30px rgba(0, 0, 0, .3); }
.hero-g { width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); display: grid; place-items: center; flex: none; }
.hero-stars { color: #F5A300; letter-spacing: 2px; font-size: 16px; line-height: 1; }
.hero-short { font-family: Archivo, system-ui, sans-serif; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .86); margin: 18px 0 0; font-weight: 500; max-width: 560px; }
@media (max-width: 1100px) { .r4r-page h1.hero-h1-main { font-size: 56px; } }
@media (max-width: 900px) {
  .r4r-page h1.hero-h1-main { font-size: 44px; max-width: 100%; }
  .hero-overlay { background: linear-gradient(180deg, rgba(14, 14, 14, .88) 0%, rgba(14, 14, 14, .82) 55%, rgba(14, 14, 14, .94) 100%) !important; }
  .r4r-page .r4r-stats { display: none !important; }            /* el sello Google del hero ya da esa prueba en móvil */
  .hero-ctas a { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 480px) { .r4r-page h1.hero-h1-main { font-size: 38px; line-height: .98; } .hero-proof { font-size: 15px; padding: 10px 13px; }
  .hero-short { font-size: 16px; } }
@media (max-width: 900px) { .r4r-page .r4r-hero-grid { gap: 48px !important; } }
@media (max-width: 360px) { .r4r-page h1.hero-h1-main { font-size: 32px; }
  .hero-proof { font-size: 13px; gap: 6px; padding: 9px 10px; white-space: nowrap; } .hero-stars { font-size: 12px; letter-spacing: 1px; } }

/* franja de confianza: 4 sellos con icono, compacta */
.r4r-trust { background: #0E0E0E; border-top: 1px solid rgba(255, 255, 255, .08); }
.r4r-trust ul { list-style: none; margin: 0 auto; max-width: 1280px; padding: 20px 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 28px; }
.r4r-trust li { display: flex; align-items: center; gap: 12px; font-family: Archivo, system-ui, sans-serif; font-size: 15px; font-weight: 700; color: #FFFFFF; line-height: 1.25; }
.r4r-trust svg { flex: none; }
@media (max-width: 900px) { .r4r-trust ul { grid-template-columns: 1fr 1fr; padding: 18px 16px; gap: 14px 16px; } .r4r-trust li { font-size: 14px; gap: 10px; } }

/* clases: etiquetas visuales · carros · visita */
.lesson-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lesson-tags li { font-family: Archivo, system-ui, sans-serif; font-size: 14px; font-weight: 700; color: #FFFFFF; padding: 8px 12px;
  border: 1px solid rgba(255, 106, 31, .55); background: rgba(255, 106, 31, .1); }
.car-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.car-points li { position: relative; padding-left: 22px; font-family: Archivo, system-ui, sans-serif; font-size: 16px; line-height: 1.4; color: #FFFFFF; font-weight: 700; }
.car-points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: #FF6A1F; }
.car-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.loc-directions { display: inline-flex; align-items: center; margin: 0 0 12px; font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; color: #0E0E0E; text-decoration: underline; text-decoration-color: #FF6A1F; text-underline-offset: 4px; }
@media (max-width: 900px) { #training-cars { padding: 56px 0 !important; } #training-cars .r4r-container { padding: 0 16px !important; }
  #training-cars .r4r-h-md { font-size: 34px !important; } }

/* /packages/: ayuda para elegir (brief §8) */
.pkg-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto 40px;
  padding: 18px 22px; background: #0E0E0E; border-left: 4px solid #FF6A1F; color: #FFFFFF; }
.pkg-help p { margin: 0; font-family: Archivo, system-ui, sans-serif; font-size: 16px; line-height: 1.4; font-weight: 500; }
.pkg-help strong { font-weight: 800; }
.pkg-help a { font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #0E0E0E;
  background: #FF6A1F; padding: 12px 16px; text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) { .pkg-help { margin: 0 16px 32px; } .pkg-help a { width: 100%; text-align: center; } }

/* móvil premium en páginas interiores (Randy 2026-09-29): cabecera en una línea, hero más corto */
@media (max-width: 640px) {
  a.nav-logo > div > div > div + div { display: none; }
  a.nav-logo > div > div > div:first-child { white-space: nowrap; font-size: 16px !important; }
  .hdr-cta { padding: 12px !important; gap: 0 !important; }
  .hdr-cta .hdr-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-chips { display: none !important; }
  .hero-cta-row a { flex: 1 1 100%; justify-content: center; }
  h1.hero-h1 { font-size: 34px !important; line-height: 1 !important; }
}
@media (max-width: 360px) { h1.hero-h1 { font-size: 30px !important; } }

/* hero interior en móvil: la frase grande cabe siempre (palabras largas en ES) y los botones van en una línea a ancho completo */
@media (max-width: 640px) {
  .grid-hero > * { min-width: 0; }
  div.hero-h1 { font-size: 34px !important; }
  div.hero-h1 > h1 { font-size: max(.42em, 13px) !important; }
  .hero-h1 p, h1.hero-h1 { overflow-wrap: break-word; hyphens: manual; }
  .grid-hero a[style*="padding: 20px 28px"] { flex: 1 1 100%; width: 100%; box-sizing: border-box; justify-content: center; font-size: 14px !important; padding: 17px 14px !important; white-space: nowrap; }
}
@media (max-width: 380px) { div.hero-h1 { font-size: 28px !important; } .grid-hero a[style*="padding: 20px 28px"] { font-size: 13px !important; letter-spacing: .02em !important; } }

/* foto del hero: versión ligera en móvil (el preload del <head> usa las mismas URLs y media) */
@media (max-width: 900px) { .hero-bg, .yt-facade { background-image: url(/img/r4r-car-hero-800.webp) !important; } }

/* sello en la tarjeta de los paquetes que incluyen el carro para el examen */
.pkg-car { display: inline-block; align-self: flex-start; margin: 0 0 10px; padding: 4px 8px; background: #0E0E0E; color: #FF6A1F; font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid #FF6A1F; }

/* ── «Book your lesson» (Randy 2026-09-29): tarjeta de compra en el hero · compra 1.º, llamada 2.º · formulario solo en /contact/ ── */
.r4r-book { background: rgba(14, 14, 14, .88); border-top: 4px solid #FF6A1F; padding: 24px; color: #FFFFFF; max-width: 560px; margin: 0 auto;
  box-shadow: rgba(0, 0, 0, .5) 0 30px 80px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scroll-margin-top: 90px; }
.rb-title { margin: 0; font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 24px; line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; }
.rb-opts { border: 0; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.rb-legend { padding: 0; margin: 0 0 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #FF6A1F; }
.rb-opt { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "meta price"; column-gap: 12px; align-items: center;
  padding: 12px 14px; border: 1.5px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); cursor: pointer; transition: border-color .15s, background .15s; }
.rb-opt:hover { border-color: rgba(255, 106, 31, .6); }
.rb-opt:has(.rb-radio:checked), .rb-opt.is-sel { border-color: #FF6A1F; background: rgba(255, 106, 31, .14); }
.rb-opt:has(.rb-radio:focus-visible) { outline: 2px solid #FF6A1F; outline-offset: 2px; }
.rb-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rb-name { grid-area: name; font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: .01em; }
.rb-meta { grid-area: meta; font-family: Archivo, system-ui, sans-serif; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .72); font-weight: 500; }
.rb-price { grid-area: price; font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 22px; color: #FF6A1F; }
.rb-note { margin: 14px 0 10px; font-family: Archivo, system-ui, sans-serif; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .78); font-weight: 500; }
.rb-cta .rb-buy { display: none; justify-content: center; align-items: center; padding: 17px 16px; background: #FF6A1F; color: #000000; text-decoration: none;
  font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.rb-empty { display: flex; justify-content: center; padding: 16px; border: 1.5px dashed rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .62);
  font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.r4r-book:has(.rb-radio:checked) .rb-empty, .r4r-book[data-sel] .rb-empty { display: none; }
.r4r-book:has(.rb-radio[value="bronze"]:checked) .rb-buy[data-for="bronze"], .r4r-book[data-sel="bronze"] .rb-buy[data-for="bronze"],
.r4r-book:has(.rb-radio[value="silver"]:checked) .rb-buy[data-for="silver"], .r4r-book[data-sel="silver"] .rb-buy[data-for="silver"],
.r4r-book:has(.rb-radio[value="gold"]:checked) .rb-buy[data-for="gold"], .r4r-book[data-sel="gold"] .rb-buy[data-for="gold"],
.r4r-book:has(.rb-radio[value="platinum"]:checked) .rb-buy[data-for="platinum"], .r4r-book[data-sel="platinum"] .rb-buy[data-for="platinum"],
.r4r-book:has(.rb-radio[value="premium-plus"]:checked) .rb-buy[data-for="premium-plus"], .r4r-book[data-sel="premium-plus"] .rb-buy[data-for="premium-plus"],
.r4r-book:has(.rb-radio[value="premium-ultra"]:checked) .rb-buy[data-for="premium-ultra"], .r4r-book[data-sel="premium-ultra"] .rb-buy[data-for="premium-ultra"],
.r4r-book:has(.rb-radio[value="bronze-manual"]:checked) .rb-buy[data-for="bronze-manual"], .r4r-book[data-sel="bronze-manual"] .rb-buy[data-for="bronze-manual"],
.r4r-book:has(.rb-radio[value="silver-manual"]:checked) .rb-buy[data-for="silver-manual"], .r4r-book[data-sel="silver-manual"] .rb-buy[data-for="silver-manual"],
.r4r-book:has(.rb-radio[value="gold-manual"]:checked) .rb-buy[data-for="gold-manual"], .r4r-book[data-sel="gold-manual"] .rb-buy[data-for="gold-manual"],
.r4r-book:has(.rb-radio[value="b69kv"]:checked) .rb-buy[data-for="b69kv"], .r4r-book[data-sel="b69kv"] .rb-buy[data-for="b69kv"],
.r4r-book:has(.rb-radio[value="ej86l"]:checked) .rb-buy[data-for="ej86l"], .r4r-book[data-sel="ej86l"] .rb-buy[data-for="ej86l"],
.r4r-book:has(.rb-radio[value="boyxb"]:checked) .rb-buy[data-for="boyxb"], .r4r-book[data-sel="boyxb"] .rb-buy[data-for="boyxb"],
.r4r-book:has(.rb-radio[value="avzl0"]:checked) .rb-buy[data-for="avzl0"], .r4r-book[data-sel="avzl0"] .rb-buy[data-for="avzl0"] { display: flex; }
.rb-foot { margin: 12px 0 0; font-family: Archivo, system-ui, sans-serif; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .66); }
.rb-foot a { color: #FFFFFF; text-underline-offset: 3px; }
.rb-more { display: inline-block; margin-top: 10px; color: #FF6A1F; font-family: Archivo, system-ui, sans-serif; font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
@media (max-width: 480px) { .r4r-book { padding: 20px 16px; } .rb-title { font-size: 21px; } .rb-price { font-size: 20px; } }

/* barra fija móvil común: compra con más peso que la llamada; el contenido no queda tapado */
.r4r-sticky-book { display: none; }
@media (max-width: 900px) {
  .r4r-sticky-book { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: #0E0E0E; box-shadow: rgba(0, 0, 0, .45) 0 -8px 24px; }
  .r4r-sticky-book a { display: flex; align-items: center; justify-content: center; padding: 14px 10px; text-decoration: none; text-transform: uppercase;
    font-family: "Archivo Black", Archivo, system-ui, sans-serif; letter-spacing: .04em; }
  .sb-call { flex: 0 0 30%; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, .35); font-size: 12px; }
  .sb-book { flex: 1 1 auto; background: #FF6A1F; color: #000000; font-size: 14px; }
  body:has(.r4r-sticky-book) { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }   /* auditoría 3-oct: la barra nunca tapa el pie */
  .hero-ctas, .hero-cta-row { display: none !important; }   /* en móvil la tarjeta de compra va justo debajo; la llamada vive en la barra */
}

/* cabecera: «Choose package» principal en escritorio; el teléfono pasa a secundario */
.hdr-book { display: inline-flex; align-items: center; padding: 14px 20px; background: #FF6A1F; color: #000000; text-decoration: none; text-transform: uppercase;
  font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
@media (min-width: 641px) { .hdr-cta { background: transparent !important; color: #0E0E0E !important; border: 1.5px solid #0E0E0E !important; box-shadow: none !important; } }
@media (max-width: 640px) { .hdr-book { display: none; } }

/* /packages/: enlaces a las tres categorías en el hero */
.pkg-cats { gap: 10px !important; }
.pkg-cats a { display: inline-flex; align-items: center; padding: 12px 16px; border: 1.5px solid rgba(255, 255, 255, .35); color: #FFFFFF; text-decoration: none;
  font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.pkg-cats a:first-child { background: #FF6A1F; border-color: #FF6A1F; color: #000000; }
.pkg-cats .pc-s { display: none; }
@media (max-width: 640px) {
  .pkg-cats { gap: 8px !important; margin-top: 20px !important; flex-wrap: nowrap !important; }
  .pkg-cats a { flex: 1 1 0; justify-content: center; padding: 13px 6px; font-size: 12px; white-space: nowrap; }
  .pkg-cats .pc-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pkg-cats .pc-s { display: inline; }
}
/* cabecera de escritorio: con «Choose package» delante, el teléfono pasa a botón de icono cuando no cabe en una línea
   (medido: 3 líneas a 1024 px y 2 líneas en ES a 1280-1440 px) */
.hdr-cta, .hdr-book { white-space: nowrap; }
@media (min-width: 641px) and (max-width: 1299px) {
  .hdr-cta { padding: 12px !important; gap: 0 !important; }
  .hdr-cta .hdr-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 641px) and (max-width: 1599px) {
  html[lang="es"] .hdr-cta { padding: 12px !important; gap: 0 !important; }
  html[lang="es"] .hdr-cta .hdr-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* «Book your lesson» con formulario v2 (nombre, teléfono, paquete): respaldo de pago si el envío falla · sin JS */
.r4r-pay-fallback { display: flex; justify-content: center; align-items: center; margin-top: 12px; padding: 16px 14px; background: #FF6A1F; color: #000000;
  text-decoration: none; text-align: center; font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.r4r-pay-fallback[hidden] { display: none !important; }
.r4r-noscript { margin: 12px 0 0; font-family: Archivo, system-ui, sans-serif; font-size: 14px; }
.r4r-noscript a { color: #FF6A1F; font-weight: 700; }
.r4r-bookform .r4r-lf-talk a { color: #FFFFFF; }

/* opción B aprobada (Randy 2026-09-29): los paquetes principales con su precio a la vista; un toque elige el paquete del desplegable */
.r4r-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 6px; border: 0; padding: 0; min-width: 0; }
.r4r-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
.r4r-tile-in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.r4r-tile { position: relative; }
.r4r-tiles--3 { grid-template-columns: repeat(3, 1fr); }
.r4r-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 12px 11px; border: 1.5px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04); color: #FFFFFF; cursor: pointer; text-align: left; font: inherit; border-radius: 0; transition: border-color .15s, background .15s; min-width: 0; }
.r4r-tile:hover { border-color: rgba(255, 106, 31, .6); }
.r4r-tile:has(.r4r-tile-in:focus-visible) { outline: 2px solid #FF6A1F; outline-offset: 2px; }
.r4r-tile:has(.r4r-tile-in:checked) { border-color: #FF6A1F; background: rgba(255, 106, 31, .14); }
.r4r-tile b { font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 400; }
.r4r-tile span { font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-size: 22px; line-height: 1.1; color: #FF6A1F; }
.r4r-tile small { font-family: Archivo, system-ui, sans-serif; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .72); font-weight: 500; }
.r4r-tiles-note { margin: 0 0 14px; font-family: Archivo, system-ui, sans-serif; font-size: 12.5px; color: rgba(255, 255, 255, .66); font-weight: 500; }
@media (max-width: 380px) { .r4r-tiles--3 { grid-template-columns: 1fr 1fr; } .r4r-tile span { font-size: 20px; } }

/* H1 interior: la línea «IN/EN KISSIMMEE, FL» va entera (medido: «EN» quedaba solo en ES a 1024-1440 px y «FL» solo en móvil).
   Se escala con el ancho disponible en vez de partirse; el texto del H1 no cambia */
h1.hero-h1 > span:last-child { display: block; white-space: nowrap; font-size: min(1em, 4.3vw); }
@media (max-width: 900px) { h1.hero-h1 > span:last-child { font-size: min(1em, calc((100vw - 64px) / 11.2)); } }
/* con la tarjeta de reserva al lado, la llamada del hero es la acción secundaria (contorno, no naranja) */
.r4r-hero-pad:has(.r4r-bookform) .hero-cta-row a[href^="tel:"], .pad-hero:has(.r4r-bookform) .hero-cta-row a[href^="tel:"], .grid-hero:has(.r4r-bookform) .hero-cta-row a[href^="tel:"], a.hero-call {
  background: #FFFFFF !important; color: #0E0E0E !important; border: 0 !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .35) !important;
  padding: 9px 26px 9px 9px !important; gap: 14px !important; border-radius: 999px !important; min-height: 58px; }
.r4r-hero-pad:has(.r4r-bookform) .hero-cta-row a[href^="tel:"] svg, .pad-hero:has(.r4r-bookform) .hero-cta-row a[href^="tel:"] svg, .grid-hero:has(.r4r-bookform) .hero-cta-row a[href^="tel:"] svg, a.hero-call svg {
  order: -1; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: #FF6A1F; stroke: #0E0E0E; flex: none; }

/* Randy 2026-09-29: el texto de un botón va SIEMPRE en una sola línea. Botón del formulario (plantilla v2): el tamaño se
   ajusta al ancho del formulario (cqi) para que «Comprar Premium Ultra $255 →» quepa a 320 px; llamadas sin partir el número */
.r4r-lf .lf-form { container-type: inline-size; }
.r4r-lf .lf-submit { white-space: nowrap; font-size: min(16px, 5.9cqi); }
a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 400px) {
  a[href^="tel:"][style*="padding: 20px 28px"] { padding: 18px 14px !important; font-size: 14px !important; letter-spacing: .02em !important; justify-content: center; }
}

/* botones grandes de la plantilla (20px 28px · 15px): en pantallas estrechas, una línea con menos relleno */
a[style*="padding: 20px 28px"], .pkg-help a, a[data-evt="choose_package_click"], .hdr-book, .sb-book, .sb-call { white-space: nowrap; }
@media (max-width: 430px) {
  a[style*="padding: 20px 28px"] { padding: 18px 14px !important; font-size: 13.5px !important; letter-spacing: .02em !important; justify-content: center; max-width: 100%; }
  .pkg-help a { font-size: 13px; padding: 12px 10px; }
}
a[style*="14px 22px"] { white-space: nowrap; }
@media (max-width: 360px) { .pkg-help a { font-size: 12px; letter-spacing: .01em; padding: 12px 8px; } }
@media (max-width: 640px) { .pkg-help { flex-direction: column; align-items: stretch; } .pkg-help a { justify-content: center; display: flex; } }

/* home móvil: «What do you need to solve?» y los 4 pasos en UNA columna (en 2 columnas partía «BEGINNE-R», medido 2026-09-30) */
@media (max-width: 640px) {
  .r4r-page .r4r-grid-4 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .r4r-page .r4r-help-card, .r4r-page .r4r-step { border-right: none !important; }
  .r4r-page .r4r-help-card *, .r4r-page .r4r-step * { hyphens: none !important; -webkit-hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; }
}
/* sello de Google en una línea en móvil */
@media (max-width: 480px) { .hero-proof { font-size: 14px !important; gap: 8px !important; padding: 7px 14px 7px 7px !important; white-space: nowrap; }
  .hero-proof .hero-stars { font-size: 13px !important; letter-spacing: 1px !important; } .hero-g { width: 28px; height: 28px; } }
@media (max-width: 360px) { .hero-proof { font-size: 12.5px !important; } .hero-proof .hero-stars { display: none; } }

/* fecha del conteo de reseñas en el sello de Google (norma de marca: «as of» obligatorio) */
.hero-asof { font-size: 12px; font-weight: 600; color: #6B6B6B; margin-left: 2px; }
@media (max-width: 380px) { .hero-asof { display: none; } }

/* ── placas de marca del hero (Randy 2026-09-30: «no son premium, no combinan»): esquinas rectas, vidrio oscuro,
   bloque de color a la izquierda, Archivo Black + mono como el resto del sitio. Sustituyen a las píldoras blancas ── */
.hero-proof { display: inline-flex !important; align-items: stretch !important; gap: 0 !important; margin-top: 26px; padding: 0 !important; border-radius: 0 !important;
  background: rgba(14, 14, 14, .62) !important; border: 1px solid rgba(255, 255, 255, .2) !important; box-shadow: none !important; color: #FFFFFF !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; transition: border-color .2s ease; }
.hero-proof:hover, .hero-proof:focus-visible { border-color: #FF6A1F !important; box-shadow: none !important; }
.hero-proof .hero-g { width: 54px !important; height: auto !important; min-height: 54px; border-radius: 0 !important; background: #FFFFFF; box-shadow: none !important; display: grid; place-items: center; }
.hero-proof .hero-g svg { width: 22px; height: 22px; }
.hero-proof .hp-txt { display: flex; flex-direction: column; justify-content: center; padding: 8px 20px 8px 16px; }
.hero-proof .hp-txt strong { font: 400 18px/1.05 "Archivo Black", Archivo, system-ui, sans-serif; letter-spacing: .01em; }
.hero-proof .hp-txt em { font: 500 12px/1.2 "JetBrains Mono", monospace; font-style: normal; letter-spacing: .06em; color: rgba(255, 255, 255, .72); margin-top: 6px; display: flex; align-items: center; white-space: nowrap; }
a.hero-call { display: inline-flex !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; min-height: 62px; border-radius: 0 !important;
  background: rgba(14, 14, 14, .62) !important; border: 1.5px solid #FF6A1F !important; box-shadow: none !important; color: #FFFFFF !important; text-decoration: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease; }
a.hero-call:hover { background: rgba(255, 106, 31, .14) !important; }
a.hero-call svg { order: 0; width: 60px !important; height: auto !important; padding: 19px !important; border-radius: 0 !important; background: #FF6A1F; stroke: #0E0E0E; flex: none; }
a.hero-call span { display: flex; flex-direction: column; justify-content: center; padding: 8px 24px 8px 18px; white-space: nowrap; }
a.hero-call small { font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #FF6A1F; }
a.hero-call b { font: 400 21px/1.1 "Archivo Black", Archivo, system-ui, sans-serif; letter-spacing: .02em; margin-top: 6px; }
/* héroes interiores: misma placa (el texto va en una línea) */
.r4r-hero-pad:has(.r4r-bookform) .hero-cta-row a[href^="tel:"], .pad-hero:has(.r4r-bookform) .hero-cta-row a[href^="tel:"], .grid-hero:has(.r4r-bookform) .hero-cta-row a[href^="tel:"] {
  background: rgba(14, 14, 14, .62) !important; border: 1.5px solid #FF6A1F !important; border-radius: 0 !important; box-shadow: none !important; color: #FFFFFF !important;
  padding: 0 24px 0 0 !important; gap: 18px !important; min-height: 60px; }
.r4r-hero-pad:has(.r4r-bookform) .hero-cta-row a[href^="tel:"] svg, .pad-hero:has(.r4r-bookform) .hero-cta-row a[href^="tel:"] svg, .grid-hero:has(.r4r-bookform) .hero-cta-row a[href^="tel:"] svg {
  order: -1; width: 58px !important; height: 58px !important; padding: 18px !important; border-radius: 0 !important; background: #FF6A1F; stroke: #0E0E0E; }
@media (max-width: 480px) { .hero-proof .hero-g { width: 46px !important; min-height: 46px; } .hero-proof .hp-txt strong { font-size: 15px; } .hero-proof .hp-txt em { font-size: 10px; } }
.hero-proof .hp-stars { font-style: normal; color: #FFB400; letter-spacing: 2px; font-size: 13px; margin: 0 8px; }
@media (max-width: 480px) { .hero-proof .hp-stars { font-size: 12px; letter-spacing: 1px; margin: 0 6px; } }

/* ── Página de ciudad PREMIUM (WEB-023 · 2026-10-02 · city_premium.py) · todo bajo .cp: no toca otras plantillas ── */
:root{--o:#FF6A1F;--ink:#0E0E0E;--d2:#1A1A1A;--cr:#F5F1EA;--mut:#666}   /* tokens globales: las guías del blog también viven en páginas de servicio */
.bp-silo *,.bp-silo *::before{box-sizing:border-box}
.cp *,.cp *::before,.cp *::after{box-sizing:border-box}
.cp-w{max-width:1280px;margin:0 auto;padding:0 32px}
.cp-k{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--o);text-transform:uppercase}
.cp-h{font-family:"Archivo Black",Archivo,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin:8px 0 0;font-size:44px;color:inherit}
.cp-h em{font-style:normal;color:var(--o)}
.cp-h--s{font-size:28px}
.cp-lead{font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.55;color:#3a3a3a;max-width:620px;margin:14px 0 0}
.cp-sec{padding:96px 0;background:#fff;color:var(--ink);font-family:Archivo,system-ui,sans-serif}
.cp-dark{background:var(--ink);color:#fff}.cp-dark .cp-lead{color:#cfcfcf}
.cp-cream{background:var(--cr)}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:13px;letter-spacing:.04em;padding:15px 22px;text-decoration:none;border:2px solid var(--o);background:var(--o);color:#000;line-height:1;transition:background .2s,color .2s}
.cp-btn:hover{background:#000;color:var(--o)}
.cp-btn--ghost{background:transparent;color:#fff;border-color:#fff}.cp-btn--ghost:hover{background:#fff;color:#000}
.cp-btn--dark{background:var(--ink);border-color:var(--ink);color:#fff}.cp-btn--dark:hover{background:var(--o);border-color:var(--o);color:#000}
.cp-ico{flex:none}
.cp-chip{display:inline-flex;align-items:center;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;white-space:nowrap}
/* hero: foto real a sangre + tarjeta de reserva */
.cpa-hero{position:relative;background:#000;color:#fff;overflow:hidden;border-bottom:4px solid var(--o)}
.cpa-hero picture{position:absolute;inset:0;display:block}
.cpa-hero-img{width:100%;height:100%;object-fit:cover;object-position:var(--pos-d);display:block}
.cpa-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.8) 36%,rgba(0,0,0,.3) 64%,rgba(0,0,0,.6) 100%);pointer-events:none}
.cpa-hero .cp-w{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:120px;padding-bottom:72px;min-height:760px}
.cp-h1{font-family:"Archivo Black",Archivo,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.035em;line-height:.9;font-size:76px;margin:14px 0 0;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.cp-h1 span{color:var(--o);display:block}
.cpa-copy,.cpa-book{min-width:0}   /* una palabra larga del H1 no puede ensanchar la columna (Buenaventura · 320 px) */
.cp-h1--long{font-size:62px}
.cp-sub{font-family:Archivo,system-ui,sans-serif;font-size:19px;line-height:1.45;color:#ececec;max-width:520px;margin:18px 0 0}
.cp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cp-ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.cp-proof{display:flex;align-items:center;gap:12px;margin-top:24px;font-family:Archivo,system-ui,sans-serif;font-size:14px;color:#ddd}
.cp-proof b{color:var(--o);letter-spacing:2px}
/* recogida */
.cp-pick{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cp-pick figure{margin:0;position:relative}
.cp-pick figure img{width:100%;height:560px;object-fit:cover;display:block}
.cp-pick figcaption{position:absolute;left:16px;bottom:16px;background:var(--o);color:#000;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;padding:8px 12px;text-transform:uppercase}
.cp-facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:2px solid var(--ink)}
.cp-fact{padding:20px 16px 4px 0}
.cp-fact b{display:block;font-family:"Archivo Black",Archivo,sans-serif;font-size:40px;letter-spacing:-.03em;line-height:1}
.cp-fact span{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.12em;color:var(--mut);text-transform:uppercase;margin-top:8px;line-height:1.4}
.cp-route{margin-top:30px;background:var(--ink);color:#fff;padding:22px 24px}
.cp-route svg{width:100%;height:auto;display:block}
/* paquetes */
.cp-railhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cp-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;margin-top:34px;scrollbar-width:thin}
.cp-pk{scroll-snap-align:start;background:#fff;border:2px solid var(--ink);display:flex;flex-direction:column;position:relative;min-width:0}
.cp-pk--pop{border-color:var(--o);box-shadow:0 0 0 2px var(--o)}
.cp-pk img{width:100%;height:150px;object-fit:cover;background:var(--d2);display:block}
.cp-pk-b{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.cp-pk-n{font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:17px}
.cp-pk-p{font-family:"Archivo Black",Archivo,sans-serif;font-size:34px;letter-spacing:-.03em;line-height:1}
.cp-pk-s{font-size:13.5px;color:#444;min-height:38px;line-height:1.4}
.cp-pk .cp-btn{margin-top:auto;font-size:12px;padding:13px 10px}
.cp-tag{position:absolute;top:10px;left:10px;background:var(--o);color:#000;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;padding:5px 8px;text-transform:uppercase;z-index:2}
.cp-tag--car{left:auto;right:10px;background:#000;color:var(--o)}
/* muro */
.cp-wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:10px;margin-top:34px}
.cp-wall img{width:100%;height:100%;object-fit:cover;display:block}
.cp-wall .t{grid-row:span 2}
.cp-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.cp-rev{background:var(--d2);border-top:3px solid var(--o);padding:22px}
.cp-rev p{font-size:15px;line-height:1.5;margin:10px 0 14px;color:#eee}
.cp-rev b{color:var(--o);letter-spacing:2px;font-size:14px}
.cp-rev small{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;color:#aaa;text-transform:uppercase}
.cp-more{margin-top:22px}
/* examen */
.cp-test{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.cp-offices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.cp-off{background:#fff;border:1px solid #e3ddd2;padding:16px;display:flex;gap:12px}
.cp-pin{color:var(--o);flex:none;margin-top:2px}
.cp-off b{display:block;font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:14px}
.cp-off span{display:block;font-size:13px;color:#555;margin-top:3px;line-height:1.4}
.cp-steps{list-style:none;margin:16px 0 0;padding:0;counter-reset:s}
.cp-steps li{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid #e3ddd2}
.cp-steps li::before{counter-increment:s;content:"0" counter(s);font-family:"Archivo Black",Archivo,sans-serif;font-size:26px;color:var(--o);line-height:1}
.cp-steps b{font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:15px}
.cp-steps span{display:block;font-size:14px;color:#555;margin-top:4px;line-height:1.45}
.cp-note{font-size:12px;color:#777;margin-top:14px;line-height:1.5}
/* servicios */
.cp-svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.cp-svc{position:relative;display:block;height:300px;overflow:hidden;color:#fff;text-decoration:none;background:#000}
.cp-svc img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform .5s,opacity .3s;display:block}
.cp-svc:hover img{transform:scale(1.05);opacity:.65}
.cp-svc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.88) 100%)}
.cp-svc div{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.cp-svc b{font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:20px;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;gap:10px}
.cp-svc span{font-size:13.5px;color:#ddd;display:block;margin-top:4px}
/* acordeones (guía + FAQ) · el texto largo vive aquí: la primera vista es visual */
.cp-acc{margin-top:30px;border-top:2px solid var(--ink)}
.cp-acc .faq-item{border-bottom:1px solid #d9d2c5}
.cp-acc .faq-q{display:grid;grid-template-columns:40px 1fr 22px;gap:10px;align-items:center;padding:19px 0;font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:15px;line-height:1.25}
.cp-acc-n{font-family:"JetBrains Mono",monospace;color:var(--o);font-size:12px}
.cp-acc-ico{color:var(--o)}
.cp-acc details.faq-item[open] > summary svg{transform:none}
.cp-acc details.faq-item[open] .cp-plus{display:none}
.cp-acc .faq-a{padding:0 0 22px 50px;font-size:15.5px;line-height:1.65;color:#333;opacity:1;font-weight:400;max-width:820px}
.cp-acc .faq-a p{margin:0 0 10px}.cp-acc .faq-a ul{margin:0;padding-left:18px}.cp-acc .faq-a li{margin:0 0 6px}
.cp-two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
/* mapa + cercanas */
.cp-mapgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.cp-map{background:var(--d2);border:2px solid var(--ink);aspect-ratio:10/7}
.cp-map iframe{width:100%;height:100%;border:0;display:block}
.cp-areas{margin:18px 0 0;font-size:16px;line-height:1.55;color:var(--ink)}.cp-areas b{font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:13px;letter-spacing:.02em;margin-right:4px}
.cp-near{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cp-near a{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:2px solid var(--ink);text-decoration:none;color:var(--ink);font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:13px;white-space:nowrap}
.cp-near a:hover{background:var(--o);border-color:var(--o)}
@media (max-width:1100px){.cp-h1{font-size:60px}.cp-svcs{grid-template-columns:1fr 1fr}.cpa-hero .cp-w{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:900px){
 .cp-w{padding:0 20px}.cp-sec{padding:64px 0}.cp-h{font-size:30px}.cp-h--s{font-size:24px}.cp-lead{font-size:16px}
 .cpa-hero picture{position:relative;height:430px}
 .cpa-hero-img{object-position:var(--pos-m)}
 .cpa-hero::after{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 190px,rgba(0,0,0,.88) 360px,#000 430px,#000 100%)}
 .cpa-hero .cp-w{grid-template-columns:1fr;margin-top:-118px;padding-top:0;padding-bottom:40px;gap:28px;min-height:0}
 .cp-h1{font-size:42px}.cp-h1--long{font-size:34px}.cp-sub{font-size:16.5px}
 .cp-chips .cp-chip:nth-child(n+4){display:none}
 .cp-ctas .cp-btn{flex:1 1 0;padding:15px 10px;font-size:12.5px}
 .cp-ctas .cp-btn--ghost{display:none}   /* la barra fija móvil ya trae «Call»: una sola llamada a la vista */
 .cp-pick,.cp-test,.cp-two,.cp-mapgrid{grid-template-columns:1fr;gap:28px}
 .cp-pick figure img{height:340px}
 .cp-fact b{font-size:28px}.cp-fact span{font-size:9.5px}
 .cp-rail{grid-auto-columns:78%;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
 .cp-wall{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
 .cp-revs{grid-template-columns:1fr}.cp-revs .cp-rev:nth-child(n+2){display:none}
 .cp-offices{grid-template-columns:1fr}
 .cp-svcs{grid-template-columns:1fr 1fr;gap:10px}.cp-svc{height:200px}.cp-svc b{font-size:14px}.cp-svc span{display:none}
 .cp-acc .faq-q{font-size:13.5px;grid-template-columns:32px 1fr 20px}.cp-acc .faq-a{padding-left:0;font-size:15px}
 .cp-near a{padding:11px 13px;font-size:12px}
}
@media (max-width:390px){.cp-h1--long{font-size:30px}}
@media (max-width:360px){.cp-h1{font-size:36px}.cp-h1.cp-h1--long{font-size:27px}.cp-ctas .cp-btn{font-size:11.5px;padding:14px 8px}}

/* ── Blog (WEB-025 · blog_render.py) ── */
.bp-head{background:var(--ink);color:#fff;border-bottom:4px solid var(--o);padding:150px 0 72px}
.bp-head--post{padding:132px 0 64px}
.bp-h1{font-size:60px}
.bp-headgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:end}
.bp-fig{margin:0}.bp-fig img{width:100%;height:420px;object-fit:cover;display:block;border:2px solid #222}
.bp-meta{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;color:#aaa;margin:20px 0 0;text-transform:uppercase}
.bp-crumbs{display:flex;gap:8px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;color:#888}
.bp-crumbs a{color:#ccc;text-decoration:none}.bp-crumbs a:hover{color:var(--o)}
.bp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bp-grid--3{grid-template-columns:repeat(3,1fr);margin-top:24px}
.bp-card{display:grid;grid-template-columns:200px 1fr;background:#fff;border:2px solid var(--ink);text-decoration:none;color:var(--ink);min-height:250px;transition:box-shadow .2s}
.bp-card:hover{box-shadow:6px 6px 0 var(--o)}
.bp-card img{width:100%;height:100%;object-fit:cover;display:block}
.bp-card>div{padding:20px;display:flex;flex-direction:column;gap:8px}
.bp-card b{font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:19px;line-height:1.1;letter-spacing:-.02em}
.bp-card p{margin:0;font-size:14.5px;line-height:1.5;color:#444}
.bp-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:12px;color:var(--o);white-space:nowrap}
.bp-grid--3 .bp-card{grid-template-columns:1fr;grid-template-rows:200px 1fr}
.bp-art{max-width:760px;margin:0 auto;font-size:18px;line-height:1.7;color:#222}
.bp-art h2{font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;letter-spacing:-.02em;font-size:28px;line-height:1.1;margin:48px 0 14px;color:var(--ink)}
.bp-art p{margin:0 0 16px}.bp-art ul,.bp-art ol{margin:0 0 18px;padding-left:22px}.bp-art li{margin:0 0 8px}
.bp-art a{color:#c2410c;text-decoration:underline;text-underline-offset:3px}
.bp-art strong{color:var(--ink)}
.bp-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--ink);color:#fff;padding:28px;margin:40px 0;border-left:6px solid var(--o)}
.bp-cta-t{font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;font-size:24px;margin:6px 0 4px;line-height:1.05}
.bp-cta-p{margin:0;font-size:15px;color:#ccc;max-width:420px;line-height:1.5}
.bp-cta-b{display:flex;gap:10px;flex-wrap:wrap}
.bp-art .bp-cta a{color:inherit;text-decoration:none}
.bp-faq{margin-top:56px}.bp-src{margin-top:40px;font-size:14px}.bp-src ul{margin-top:12px}
@media (max-width:900px){
 .bp-head{padding:110px 0 48px}.bp-h1{font-size:38px}.bp-headgrid{grid-template-columns:1fr;gap:28px}.bp-fig img{height:300px}
 .bp-grid,.bp-grid--3{grid-template-columns:1fr}.bp-card{grid-template-columns:120px 1fr;min-height:0}.bp-card b{font-size:16px}.bp-card p{display:none}
 .bp-grid--3 .bp-card{grid-template-columns:120px 1fr;grid-template-rows:auto}
 .bp-art{font-size:17px}.bp-art h2{font-size:23px;margin-top:36px}.bp-cta{padding:22px}.bp-cta-b .cp-btn{flex:1 1 0}
}
.bp-tk{background:var(--cr);border-left:6px solid var(--o);padding:22px 26px;margin:0 0 36px}
.bp-tk ul{margin:10px 0 0;padding-left:20px}.bp-tk li{margin:0 0 6px;font-size:16.5px;line-height:1.5}
.bp-silo .bp-card{min-height:0}
.bp-grid>*,.bp-card>div{min-width:0}.bp-card b{overflow-wrap:break-word}   /* 320 px: una palabra larga del título ensanchaba la tarjeta 0,7 px */
/* móvil: «1fr» = minmax(auto,1fr) no baja del ancho mínimo de su contenido y empujaba /es/about/ y /es/reviews/ fuera de
   pantalla a 320 px (auditoría 3-oct · QA móvil P1 · preexistente en producción) */
@media (max-width:900px){.grid-2{grid-template-columns:minmax(0,1fr)!important}.grid-2>*{min-width:0}}

/* auditoría SEO+CRO 3-oct · §13: toques de ≥44 px y cuerpo ≥16 px en móvil (las notas de 12 px siguen siendo secundarias) */
.cp-btn,.cp-near a{min-height:44px}
@media (max-width:900px){
  .faq-a,.cp-acc .faq-a,.cp-steps span,.cp-rev p{font-size:16px!important;line-height:1.6}
  p[style*="font-size: 13px"],p[style*="font-size: 14px"],p[style*="font-size: 15px"]{font-size:16px!important}
}
.r4r-related .cp-near{margin-top:14px}.r4r-related .cp-near a{font-family:"Archivo Black",Archivo,sans-serif}
.r4r-sources{font-family:Archivo,system-ui,sans-serif;font-size:14px;line-height:1.6;color:#444;margin:18px 0 0}.r4r-sources a{color:#c2410c}
@media (max-width:360px){.cp-near a{font-size:11px;padding:10px 12px}}   /* 320 px: los chips largos en español se salían 3 px */

/* Randy 2026-10-11 («como Soto», para que llamen más): en móvil el botón de llamar del menú muestra el número completo,
   a la izquierda del menú, y la barra fija de abajo es SOLO el teléfono en grande */
.hdr-cta-home { display: none; }
@media (max-width: 640px) {
  .hdr-cta, .hdr-cta-home { display: inline-flex !important; order: -1; flex-direction: row-reverse; align-items: center; gap: 7px !important;
    padding: 11px 13px !important; font-size: 13px !important; white-space: nowrap; }
  .hdr-cta-home { background: #FF6A1F; color: #000000; text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
    font-family: "Archivo Black", Archivo, system-ui, sans-serif; }
  .hdr-cta .hdr-cta-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hdr-cta svg { width: 15px; height: 15px; flex: none; }
  a.nav-logo > div > div > div:first-child, .hdr-logo-home > div > div:first-child { white-space: normal !important; width: 5.9em; max-width: none; line-height: 1.02; font-size: 14px !important; }
  a.nav-logo, .hdr-logo-home { flex-shrink: 0; }
  .hdr-logo-home { gap: 8px !important; }
  .hdr-logo-home > svg, a.nav-logo svg { flex: none; }
}
@media (max-width: 389px) {   /* medido: a 375 px las interiores desbordaban 6 px con el botón a 13 px */
  .hdr-cta, .hdr-cta-home { padding: 10px 11px !important; font-size: 12px !important; gap: 6px !important; }
}
@media (max-width: 369px) {
  a.nav-logo > div > div > div:first-child, .hdr-logo-home > div > div:first-child { display: none; }
}
.r4r-sticky-tel .sb-call { flex: 1 1 auto; gap: 10px; background: #FF6A1F; color: #000000; border: 0; font-size: 18px; padding: 15px 10px; white-space: nowrap; }
.r4r-sticky-tel .sb-call svg { flex: none; }
@media (max-width: 374px) { .r4r-sticky-tel .sb-call { font-size: 15px; gap: 8px; } }