/* ============================================================
   COOPERS GARAGE DOORS — hoja de estilo principal
   Coral Springs · South Florida

   Mundo visual: taller técnico con energía deportiva. Navy profundo
   como base, blanco garage para el texto, naranja Florida para la
   acción, azul Coopers como acento. Todo se inclina hacia adelante
   igual que el wordmark del logo: la marca corre.

   Elemento firma: COOPERS WAVE, la curva que separa cada banda.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — salidos del brand board, sin inventar nada
   ------------------------------------------------------------ */
:root {
  --navy:        #052B53;   /* Coopers Navy — institucional */
  --navy-hondo:  #021A35;   /* Deep Navy — fondos, uniformes */
  --azul:        #009FE3;   /* Coopers Blue — acento, nunca protagonista */
  --azul-claro:  #5FC8F0;
  --naranja:     #FF7A00;   /* Florida Orange — CTA */
  --oro:         #FFB21A;   /* Sun Gold — degradados */
  --blanco:      #F7F9FB;   /* Garage White */
  --acero:       #AAB4BF;   /* Steel Gray — secundario */

  /* Derivados con contraste comprobado */
  --acero-tinta: #5A6672;   /* Steel Gray es 1.9:1 sobre blanco; este es su tinta legible */
  --naranja-tinta: #C25100;  /* naranja legible sobre fondo claro */
  --azul-tinta:  #00618B;   /* azul legible sobre fondo claro */
  --navy-suave:  #33475F;

  /* Tipografía del brand board */
  --titular: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --texto:   "Inter", system-ui, -apple-system, sans-serif;

  /* Escala — condensada, así que puede ir más grande */
  --t-xs:   0.8rem;
  --t-sm:   0.94rem;
  --t-base: 1.06rem;
  --t-md:   1.22rem;
  --t-lg:   clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  --t-xl:   clamp(2.4rem, 1.5rem + 3.8vw, 4rem);
  --t-2xl:  clamp(3rem, 1.6rem + 6vw, 6rem);

  --sec:     clamp(4rem, 8vw, 7rem);
  --ancho:   1220px;
  --lectura: 68ch;

  --sombra:      0 2px 4px rgba(2,26,53,.12), 0 12px 30px -10px rgba(2,26,53,.30);
  --sombra-alta: 0 6px 10px rgba(2,26,53,.16), 0 30px 60px -18px rgba(2,26,53,.40);

  --sale: cubic-bezier(.16,.84,.32,1);
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--navy-hondo);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--titular);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-weight: 900; }

p { margin: 0 0 1.15em; max-width: var(--lectura); }

a { color: var(--azul-tinta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--naranja-tinta); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.envoltura--texto { width: min(100% - 2.5rem, 780px); margin-inline: auto; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   3. LA ONDA — elemento firma de la marca
   ------------------------------------------------------------ */
.onda {
  display: block; width: 100%; height: clamp(48px, 6vw, 90px);
  margin: 0; line-height: 0;
}
.onda svg { display: block; width: 100%; height: 100%; }
.onda--invertida svg { transform: scaleY(-1); }

/* Onda fina como subrayado de titular */
.onda-linea {
  display: block; width: 128px; height: 10px; margin: .1rem 0 1.2rem;
  background:
    linear-gradient(90deg, var(--azul) 0 62%, transparent 62%) 0 0/100% 3px no-repeat,
    linear-gradient(90deg, var(--naranja) 0 38%, transparent 38%) 0 6px/100% 3px no-repeat;
}

/* ------------------------------------------------------------
   4. BOTONES — inclinados hacia adelante, como el wordmark
   ------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--titular);
  font-weight: 800; font-size: var(--t-md);
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer;
  padding: .85rem 1.9rem;
  min-height: 52px;
  transform: skewX(-8deg);           /* la inclinación del logo */
  transition: transform .25s var(--sale), background-color .2s, box-shadow .25s var(--sale);
}
.boton > * { transform: skewX(8deg); }   /* el texto vuelve a la vertical */

/* Tinta navy sobre el naranja, no blanca.
   El blanco sobre #FF7A00 da 2.61:1 y no pasa AA; el navy da 6.7:1.
   Ademas es exactamente lo que hace el logo en la barra GARAGE DOORS. */
.boton--naranja {
  background: var(--naranja); color: var(--navy-hondo);
  box-shadow: var(--sombra);
}
.boton--naranja:hover {
  background: var(--oro); color: var(--navy-hondo);
  transform: skewX(-8deg) translateY(-2px);
  box-shadow: var(--sombra-alta);
}

.boton--navy {
  background: var(--navy); color: var(--blanco);
  box-shadow: var(--sombra);
}
.boton--navy:hover { background: var(--navy-hondo); color: var(--blanco); transform: skewX(-8deg) translateY(-2px); }

.boton--linea {
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}
.boton--linea:hover { background: var(--navy); color: var(--blanco); box-shadow: inset 0 0 0 2px var(--navy); }

/* Sobre fondo oscuro el contorno invierte */
.seccion--navy .boton--linea,
.seccion--hondo .boton--linea,
.hero .boton--linea {
  color: var(--blanco); box-shadow: inset 0 0 0 2px rgba(247,249,251,.6);
}
.seccion--navy .boton--linea:hover,
.seccion--hondo .boton--linea:hover,
.hero .boton--linea:hover {
  background: var(--blanco); color: var(--navy); box-shadow: inset 0 0 0 2px var(--blanco);
}

/* ------------------------------------------------------------
   5. BARRA + CABECERA
   ------------------------------------------------------------ */
.barra {
  background: var(--navy-hondo); color: var(--blanco);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.barra .envoltura {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  align-items: center; justify-content: center; text-align: center;
  padding: .5rem 0;
}
.barra strong { color: var(--oro); }
.barra a {
  color: var(--blanco); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.barra a:hover { color: var(--oro); }

.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy);
  box-shadow: 0 2px 0 var(--azul), var(--sombra);
}
.cabecera .envoltura {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; padding: .6rem 0;
}
.marca { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.marca img { width: 210px; }
.marca img.marca--mini { display: none; width: 62px; }

/* ------------------------------------------------------------
   6. NAVEGACIÓN
   ------------------------------------------------------------ */
.nav-lista {
  display: flex; align-items: center; gap: 1.3rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-item { position: relative; display: flex; align-items: center; gap: .1rem; }
/* Los que abren panel sueltan su contexto: el panel se ancla al
   contenedor de la cabecera, no a la pestaña, y asi nunca se sale
   de pantalla ni queda estrangulado al ancho del item. */
.nav-item--menu { position: static; }
.nav-item > a {
  font-family: var(--titular); font-weight: 700; font-size: var(--t-md);
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--blanco); text-decoration: none;
  padding: .3rem 0; border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav-item > a:hover, .nav-item > a[aria-current="page"] {
  color: var(--oro); border-bottom-color: var(--naranja);
}

.nav-abrir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: rgba(247,249,251,.72); border-radius: 999px;
}
.nav-abrir svg { width: 16px; height: 16px; transition: transform .25s var(--sale); }
.nav-abrir:hover { color: var(--oro); }
.nav-item--menu[data-abierto="true"] .nav-abrir svg { transform: rotate(180deg); }
.nav-item--menu[data-abierto="true"] > a { color: var(--oro); border-bottom-color: var(--naranja); }

.submenu { position: absolute; top: calc(100% + .6rem); left: 0; right: 0; z-index: 80; }
.submenu[hidden] { display: none; }
/* puente sobre el hueco: si no, el menú se cierra al bajar el mouse */
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }

/* La caja mide lo que necesita, no todo el ancho del contenedor: con dos
   columnas quedaba medio panel vacío. Las columnas van en su propia fila
   para que el enlace de abajo no fuerce el ancho completo. */
/* El ancho sale del numero de columnas, no del contenido: un flex que
   envuelve tiene ancho intrinseco ambiguo y el panel terminaba a dos
   filas o con medio panel vacio. --cols lo pone el generador. */
.submenu__caja {
  display: block;
  width: min(100%, calc(var(--cols, 2) * 250px + (var(--cols, 2) - 1) * 2.4rem + 3.4rem));
  padding: 1.5rem 1.7rem 1.2rem;
  background: var(--navy-hondo);
  border-top: 3px solid var(--naranja);
  box-shadow: var(--sombra-alta);
}
.submenu__cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 1.3rem 2.4rem;
}
.submenu__titulo {
  margin: 0 0 .6rem;
  font-family: var(--titular); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .1em; text-transform: uppercase; color: var(--oro);
}
.submenu__titulo a { color: var(--oro); text-decoration: none; }
.submenu__col { min-width: 0; }
.submenu__col ul { list-style: none; margin: 0; padding: 0; }
.submenu__col li + li { border-top: 1px solid rgba(247,249,251,.12); }
.submenu__col a {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  min-height: 42px; padding: .2rem 0;
  color: var(--blanco); text-decoration: none;
  font-weight: 500; font-size: var(--t-sm);
}
.submenu__col a:hover { color: var(--oro); }
.submenu__col a em {
  font-style: normal; font-size: var(--t-xs);
  color: rgba(247,249,251,.6); white-space: nowrap;
}
.submenu__todo {
  display: flex; align-items: center; min-height: 44px;
  margin-top: 1.1rem;
  padding-top: .8rem; border-top: 1px solid rgba(247,249,251,.16);
  font-family: var(--titular); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--naranja); text-decoration: none;
}
.submenu__todo:hover { color: var(--oro); }

.acciones { display: flex; align-items: center; gap: .8rem; }
.tel {
  font-family: var(--titular); font-weight: 800; font-size: var(--t-lg);
  color: var(--blanco); text-decoration: none; white-space: nowrap; letter-spacing: .01em;
}
.tel:hover { color: var(--oro); }

.abrir-menu {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 2px solid rgba(247,249,251,.5); background: transparent;
  cursor: pointer; color: var(--blanco);
  transform: skewX(-8deg);
}
.abrir-menu svg { width: 22px; height: 22px; transform: skewX(8deg); }

/* ------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--navy-hondo);
  color: var(--blanco);
  padding: clamp(3rem, 7vw, 6rem) 0 0;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1000px 460px at 78% -8%, rgba(0,159,227,.30), transparent 62%),
    radial-gradient(700px 340px at 8% 104%, rgba(255,122,0,.16), transparent 68%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1, .hero h2, .hero h3 { color: var(--blanco); }

.hero__titular { font-size: var(--t-2xl); max-width: 15ch; margin-bottom: .3em; }
.hero__titular em { font-style: normal; color: var(--oro); display: block; }
.hero__bajada {
  font-size: var(--t-md); color: rgba(247,249,251,.86);
  max-width: 56ch; margin-bottom: 2rem;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: clamp(2rem,5vw,3.5rem); }

.hero--interior { padding-top: clamp(2rem, 4vw, 3.4rem); }
.hero--interior .hero__titular { font-size: var(--t-xl); max-width: 20ch; }

/* Sellos de confianza bajo el hero */
.sellos {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  list-style: none; margin: 0; padding: 0;
  background: rgba(247,249,251,.14);
  border-top: 1px solid rgba(247,249,251,.14);
}
.sello { background: var(--navy-hondo); padding: 1.2rem 1.2rem 1.4rem; }
.sello strong {
  display: block; font-family: var(--titular); font-weight: 800;
  font-size: var(--t-md); letter-spacing: .02em; text-transform: uppercase;
  color: var(--oro); margin-bottom: .15rem;
}
.sello span { font-size: var(--t-sm); color: rgba(247,249,251,.78); }

/* ------------------------------------------------------------
   8. SECCIONES
   ------------------------------------------------------------ */
.seccion { padding: var(--sec) 0; }
.seccion--navy  { background: var(--navy); color: var(--blanco); }
.seccion--hondo { background: var(--navy-hondo); color: var(--blanco); }
.seccion--gris  { background: #EBEFF4; }
.seccion--navy h2, .seccion--navy h3,
.seccion--hondo h2, .seccion--hondo h3 { color: var(--blanco); }

.seccion__titulo { font-size: var(--t-xl); max-width: 20ch; }
.seccion__intro {
  font-size: var(--t-md); color: var(--navy-suave);
  max-width: 58ch; margin-bottom: 2.6rem;
}
.seccion--navy .seccion__intro,
.seccion--hondo .seccion__intro { color: rgba(247,249,251,.82); }

/* ------------------------------------------------------------
   9. SERVICIOS — placas inclinadas
   ------------------------------------------------------------ */
.servicios {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.servicio {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 1.6rem 1.4rem 1.4rem;
  background: #fff;
  border-bottom: 4px solid var(--azul);
  text-decoration: none; color: inherit;
  box-shadow: var(--sombra);
  transition: transform .28s var(--sale), box-shadow .28s var(--sale), border-color .2s;
}
.servicio:hover {
  transform: translateY(-5px); box-shadow: var(--sombra-alta);
  border-bottom-color: var(--naranja); color: inherit;
}
.servicio__icono { width: 38px; height: 38px; color: var(--azul); margin-bottom: .9rem; }
.servicio:hover .servicio__icono { color: var(--naranja); }
.servicio h3 { font-size: var(--t-lg); margin-bottom: .25em; }
.servicio p { font-size: var(--t-sm); color: var(--navy-suave); margin: 0 0 1rem; max-width: none; }
.servicio__ir {
  margin-top: auto;
  font-family: var(--titular); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .07em; text-transform: uppercase; color: var(--naranja-tinta);
}
.servicio:hover .servicio__ir { color: var(--naranja-tinta); }

/* ------------------------------------------------------------
   10. FICHA DE DATOS
   ------------------------------------------------------------ */
.ficha {
  display: grid; gap: 1.3rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  position: relative;
  margin-top: 2.2rem; padding: clamp(1.3rem, 2.5vw, 1.9rem) clamp(1.3rem, 2.5vw, 1.9rem)
                              clamp(1.3rem, 2.5vw, 1.9rem) clamp(1.9rem, 3vw, 2.6rem);
  background: rgba(247,249,251,.07);
  backdrop-filter: blur(2px);
}
/* El acento es una cuña inclinada, no una barra lateral de color:
   repite el mismo lean de -8deg que llevan los botones y el wordmark. */
.ficha::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px;
  background: var(--naranja);
  clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%);
}
.dato__etiqueta {
  margin: 0 0 .25rem;
  font-family: var(--titular); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .1em; text-transform: uppercase; color: var(--oro);
}
.dato__valor {
  margin: 0; font-family: var(--titular); font-weight: 800;
  font-size: var(--t-lg); color: var(--blanco); line-height: 1.05;
}
.ficha__nota { margin: .3rem 0 0; font-size: var(--t-sm); color: rgba(247,249,251,.78); max-width: none; }
.ficha a:not(.boton) { color: var(--oro); }
.ficha a:not(.boton):hover { color: var(--naranja); }

/* ------------------------------------------------------------
   11. PROSA
   ------------------------------------------------------------ */
.prosa h2 { font-size: var(--t-lg); margin-top: 2.2rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa p { color: var(--navy-suave); }
.seccion--navy .prosa p, .seccion--hondo .prosa p { color: rgba(247,249,251,.86); }
.seccion--navy .prosa strong, .seccion--hondo .prosa strong { color: var(--blanco); }
.seccion--navy .prosa a, .seccion--hondo .prosa a { color: var(--oro); }
.seccion--navy .prosa a:hover, .seccion--hondo .prosa a:hover { color: var(--naranja); }

/* ------------------------------------------------------------
   12. TABLA DE PRECIOS
   ------------------------------------------------------------ */
.envoltura-tabla { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla caption {
  text-align: left; padding-bottom: .8rem;
  font-family: var(--titular); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase; color: var(--acero-tinta);
}
.tabla th, .tabla td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid #D6DEE7; }
.tabla thead th {
  font-family: var(--titular); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); border-bottom: 3px solid var(--navy);
}
.tabla tbody th { font-family: var(--texto); font-weight: 600; }
.tabla .precio { font-family: var(--titular); font-weight: 800; font-size: var(--t-md); color: var(--naranja-tinta); white-space: nowrap; }

/* ------------------------------------------------------------
   13. DUO, BANDA Y GALERÍA
   ------------------------------------------------------------ */
.duo {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.duo__foto { margin: 0; box-shadow: var(--sombra-alta); }
.duo__foto img { width: 100%; }

.banda { padding: 0 0 clamp(1rem, 3vw, 2rem); }
.banda__foto { margin: 0; box-shadow: var(--sombra-alta); }
.banda__foto img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; object-position: center 45%; }

.galeria {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.galeria figure { margin: 0; background: #fff; box-shadow: var(--sombra); }
.galeria img { width: 100%; height: 215px; object-fit: cover; }
.galeria figcaption { padding: .9rem 1.1rem 1.1rem; font-size: var(--t-sm); color: var(--navy-suave); }
.galeria figcaption strong {
  display: block; font-family: var(--titular); font-weight: 800;
  font-size: var(--t-md); text-transform: uppercase; color: var(--navy); margin-bottom: .15rem;
}

/* ------------------------------------------------------------
   14. ZONAS
   ------------------------------------------------------------ */
.zonas {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.zona {
  display: block; padding: 1.4rem;
  background: rgba(247,249,251,.07);
  border-top: 3px solid var(--azul);
  text-decoration: none; color: var(--blanco);
  transition: background-color .22s, transform .28s var(--sale), border-color .2s;
}
.zona:hover {
  background: rgba(247,249,251,.14); transform: translateY(-4px);
  border-top-color: var(--naranja); color: var(--blanco);
}
.zona__nota {
  display: block; margin-bottom: .4rem;
  font-family: var(--titular); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .09em; text-transform: uppercase; color: var(--oro);
}
.zona h3 { font-size: var(--t-lg); margin-bottom: .2em; }
.zona p { font-size: var(--t-sm); color: rgba(247,249,251,.8); margin: 0; max-width: none; }

/* ------------------------------------------------------------
   15. RESEÑAS
   ------------------------------------------------------------ */
.resenas {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.resena {
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem; background: #fff;
  border-bottom: 4px solid var(--oro);
  box-shadow: var(--sombra);
}
.resena__estrellas { color: var(--naranja-tinta); letter-spacing: .12em; margin-bottom: .6rem; }
.resena blockquote { margin: 0 0 1.1rem; font-size: var(--t-sm); }
.resena blockquote p { margin: 0; max-width: none; }
.resena figcaption { margin-top: auto; padding-top: .9rem; border-top: 1px solid #D6DEE7; font-size: var(--t-xs); }
.resena figcaption strong { display: block; font-size: var(--t-sm); font-family: var(--titular); text-transform: uppercase; }
.resena figcaption span { color: var(--acero-tinta); }

/* ------------------------------------------------------------
   16. PREGUNTAS
   ------------------------------------------------------------ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid #D6DEE7; }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.15rem 2.6rem 1.15rem 0;
  font-family: var(--titular); font-weight: 700; font-size: var(--t-lg);
  text-transform: uppercase; line-height: 1.15;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 12px; height: 12px; margin-top: -9px;
  border-right: 3px solid var(--naranja); border-bottom: 3px solid var(--naranja);
  transform: rotate(45deg); transition: transform .28s var(--sale);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -4px; }
.faq details p { padding-bottom: 1.1rem; color: var(--navy-suave); }
.seccion--navy .faq details, .seccion--hondo .faq details { border-bottom-color: rgba(247,249,251,.18); }
.seccion--navy .faq details p, .seccion--hondo .faq details p { color: rgba(247,249,251,.84); }

/* ------------------------------------------------------------
   17. MIGAS, CIERRE Y PIE
   ------------------------------------------------------------ */
.migas {
  padding: 1.3rem 0 0;
  font-family: var(--titular); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: .07em; text-transform: uppercase; color: var(--acero-tinta);
}
.migas a { color: var(--acero-tinta); text-decoration: none; }
.migas a:hover { color: var(--naranja-tinta); text-decoration: underline; }
.migas [aria-current] { color: var(--navy); }

.cierre { text-align: center; }
.cierre .seccion__titulo { margin-inline: auto; max-width: 22ch; }
.cierre .seccion__intro { margin-inline: auto; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.pie { background: var(--navy-hondo); color: rgba(247,249,251,.82); padding: var(--sec) 0 2.4rem; }
.pie__logo { margin-bottom: 1.6rem; }
.pie__logo img { width: 240px; }
.pie__rejilla {
  display: grid; gap: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin-bottom: 2.6rem;
}
.pie h2, .pie h3 {
  color: var(--oro); font-size: var(--t-sm);
  letter-spacing: .1em; font-family: var(--titular); font-weight: 700; margin-bottom: 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .55rem; }
.pie a { color: rgba(247,249,251,.82); text-decoration: none; font-size: var(--t-sm); }
.pie a:hover { color: var(--oro); }
.pie p { font-size: var(--t-sm); }
.pie__legal {
  border-top: 1px solid rgba(247,249,251,.16); padding-top: 1.5rem;
  font-size: var(--t-xs); color: rgba(247,249,251,.6);
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: space-between;
}
.pie__licencia { color: var(--oro); letter-spacing: .05em; }

.llamar-fijo { display: none; }

/* Marcador de dato inventado */
.provisorio { border-bottom: 2px dotted var(--naranja); cursor: help; }

/* ------------------------------------------------------------
   18. RESPONSIVE
   ------------------------------------------------------------ */
/* 1200px: con seis pestanas, telefono y CTA el menu de escritorio
   necesita ese ancho. Debajo va el cajon. */
@media (max-width: 1200px) {
  .nav-principal {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px);
    background: var(--navy-hondo); padding: 5.5rem 1.6rem 3rem;
    transform: translateX(100%); transition: transform .34s var(--sale);
    z-index: 70; overflow-y: auto;
  }
  .nav-principal[data-abierto="true"] { transform: translateX(0); }
  .nav-lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid rgba(247,249,251,.16); }
  .nav-item > a { flex: 1; display: block; padding: 1rem 0; font-size: var(--t-lg); border-bottom: 0; }
  .nav-abrir { width: 48px; height: 48px; color: var(--blanco); }
  .nav-abrir svg { width: 20px; height: 20px; }
  .submenu { position: static; width: 100%; order: 3; }
  .submenu__cols { grid-template-columns: 1fr; gap: 1.3rem; }
  .submenu__caja {
    width: 100%; display: flex; flex-direction: column; gap: 1.3rem;
    padding: .2rem 0 1.3rem .9rem; background: transparent;
    box-shadow: none; min-width: 0; border-top: 0;
    border-left: 2px solid rgba(255,122,0,.5);
  }
  .submenu__col { min-width: 0; max-width: none; }
  .submenu__col a { min-height: 46px; }
  .submenu__todo { border-top: 0; }
  .abrir-menu { display: inline-flex; position: relative; z-index: 80; }
  .tel { display: none; }
  .cabecera .boton { display: none; }
}

@media (max-width: 560px) {
  .marca img { display: none; }
  .marca img.marca--mini { display: block; }
  .pie li { margin-bottom: 0; }
  .pie li a { display: flex; align-items: center; min-height: 44px; }
  .llamar-fijo {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    background: var(--naranja); color: var(--navy-hondo); text-decoration: none;
    align-items: center; justify-content: center; gap: .5rem;
    padding: .95rem; font-family: var(--titular); font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; font-size: var(--t-md);
    box-shadow: 0 -6px 20px rgba(2,26,53,.35);
  }
  .llamar-fijo:hover { color: var(--navy-hondo); background: var(--oro); }
  body { padding-bottom: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}