/* 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 */
nav div[style*="position: relative"]:not(:hover):not(:focus-within) > .nav-panel { display: none !important; }
.nav-logo { text-decoration: none; color: inherit; }
nav a, .mnav-panel a, a[style*="display: inline-flex"] { text-decoration: none; }

/* ── 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; } }