/* ═══════════════════════════════════════════════════════════════════════
   ESTERO GARAGE DOOR N MORE · Estilos del sitio
   369 Creative Agency · septiembre 2026

   Mundo visual: el agua del logo. Marino casi negro, la ola turquesa y el
   marfil del "ESTERO" cromado. El dibujo que se repite es la ola del logo
   (bordes de sección, apertura, carta de mareas) y los servicios se leen
   como una tabla de mareas. Sin amarillo: eso es de 561 Palm Beach.

   Secciones:
    0 Variables        7 Hero              14 Reseñas, pasos, zonas
    1 Base             8 Tide Planner      15 FAQ
    2 Utilidades       9 Tabla de mareas   16 Páginas internas
    3 Botones         10 Fotos             17 Formulario
    4 Cabecera        11 Checks y avisos   18 Pie y barra móvil
    5 Menú móvil      12 Comunidades       19 Apertura "La Ola"
    6 Ola (bordes)    13 Cierre            20 Responsive, movimiento, impresión
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 0 · VARIABLES ═══
   Contraste medido (WCAG 2.2):
   marfil #F3ECDD sobre noche ........ 15.6:1
   ola #2BC0D6 sobre noche ........... 8.4:1   (botón principal: texto noche sobre ola)
   ola-clara #8EE0EC sobre noche ..... 12.2:1  (enlaces sobre fondo oscuro)
   blanco sobre teal #0A6B7C ......... 6.2:1
   teal sobre espuma / papel ......... 5.5:1 / 5.9:1 (enlaces sobre fondo claro)
   tinta-2 #3D4F66 sobre papel ....... 8.0:1
   niebla #C8D3DF sobre noche ........ 12.1:1  (texto secundario sobre oscuro)
   Nota sobre la regla 3 de la casa (texto blanco sobre acento): el turquesa
   del logo es claro; con blanco no llega a 2:1. El botón turquesa lleva texto
   noche (8.4:1). Está hecho a propósito: no "corregirlo" a blanco. */
:root {
  --noche: #061528;          /* fondo oscuro principal: el contorno del logo */
  --marino: #0C2B4B;         /* cierre, cajas sobre noche */
  --marino-2: #143A62;       /* hover sobre marino */
  --ola: #2BC0D6;            /* la ola del logo: botón principal, agua de la carta */
  --ola-clara: #8EE0EC;      /* enlaces y detalles sobre noche */
  --ola-honda: #0E8FA3;      /* estrellas, viñetas sobre claro (decorativo) */
  --teal: #0A6B7C;           /* enlaces y acentos de texto sobre claro */
  --papel: #F7FAF9;          /* fondo de lectura: blanco frío, no crema */
  --espuma: #EAF3F3;         /* bandas claras alternas */
  --marfil: #F3ECDD;         /* el marfil del logo: texto sobre oscuro, el plan impreso */
  --niebla: #C8D3DF;         /* texto secundario sobre oscuro */
  --tinta: #0B1B2E;          /* texto principal */
  --tinta-2: #3D4F66;        /* texto secundario */
  --abierto: #3FD39A;        /* punto de "open now" */
  --error: #B3261E;
  --linea: rgba(12, 43, 75, .16);
  --linea-osc: rgba(142, 224, 236, .22);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --cuerpo: "Archivo", "Segoe UI", system-ui, sans-serif;

  --t-base: 1.125rem;        /* 18 px: la regla de la casa es letra grande */
  --t-chico: 1rem;
  --t-h1: clamp(2.5rem, 1.5rem + 3.6vw, 4.6rem);
  --t-h1-int: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem);
  --t-h2: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  --t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);

  --margen: clamp(1rem, 4vw, 2.5rem);
  --ancho: 1240px;
  --radio: 14px;
  --sombra: 0 22px 44px -22px rgba(6, 21, 40, .55);
  --banda: clamp(4rem, 3rem + 4vw, 7rem);
  --cabecera: 84px;
}

/* ═══ 1 · BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 12px); }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--cuerpo); font-size: var(--t-base); line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--teal); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.08; margin: 0 0 .6em; text-wrap: balance; letter-spacing: -.012em; font-optical-sizing: auto; }
h1 { font-size: var(--t-h1); font-weight: 900; }
h2 { font-size: var(--t-h2); max-width: 24ch; }
h3 { font-size: var(--t-h3); font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--ola); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ola); color: var(--noche); }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ 2 · UTILIDADES ═══ */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.angosto { max-width: 900px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--ola); color: var(--noche); padding: .7rem 1rem; font-weight: 700; border-radius: 8px; }
.saltar:focus { top: 1rem; }
.lead { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.3rem); line-height: 1.55; max-width: 62ch; }
.mt-4 { margin-top: 1.5rem; }
.banda { padding-block: var(--banda); position: relative; }
.banda--espuma { background: var(--espuma); }
.banda--noche { background: var(--noche); color: var(--marfil); }
.banda--noche a:not(.boton) { color: var(--ola-clara); }
.banda--noche .lead, .banda--noche p { color: var(--niebla); }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dos-col--arriba { align-items: start; }

/* ═══ 3 · BOTONES ═══ */
.botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.botones--columna { flex-direction: column; }
.botones--columna .boton { justify-content: center; }
.boton {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 52px;
  padding: .85rem 1.45rem; border-radius: 10px; border: 2px solid transparent;
  font: 700 1.05rem/1.1 var(--cuerpo); font-variation-settings: "wdth" 112;
  text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton .ico { width: 1.2em; height: 1.2em; }
.boton--ola { background: var(--ola); color: var(--noche); }
.boton--ola:hover { background: var(--ola-clara); }
.boton--noche { background: var(--noche); color: #fff; }
.boton--noche:hover { background: var(--marino-2); }
.boton--linea { background: transparent; color: var(--noche); border-color: currentColor; }
.boton--linea:hover { background: rgba(12, 43, 75, .07); }
.banda--noche .boton--linea, .hero .boton--linea, .caja--noche .boton--linea, .cierre .boton--linea, .menu-movil .boton--linea, .barra-movil .boton--linea { color: var(--marfil); }
.banda--noche .boton--linea:hover, .hero .boton--linea:hover, .caja--noche .boton--linea:hover, .cierre .boton--linea:hover { background: rgba(243, 236, 221, .1); }
.boton--chico { min-height: 44px; padding: .55rem 1rem; font-size: 1rem; }
.boton[disabled] { opacity: .6; cursor: progress; }

/* ═══ 4 · CABECERA ═══ */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--noche); color: var(--marfil); border-bottom: 1px solid var(--linea-osc); }
.cabecera__fila { display: flex; align-items: center; gap: 1.5rem; min-height: var(--cabecera); }
.marca { display: flex; align-items: center; gap: .75rem; color: var(--marfil); text-decoration: none; flex: none; }
.marca img { width: 64px; height: 64px; }
.marca__nombre { font-family: var(--display); font-weight: 800; font-size: 1.2rem; line-height: 1.05; }
.marca__nombre small { display: block; font-family: var(--cuerpo); font-weight: 600; font-size: .82rem; color: var(--ola-clara); margin-top: .2rem; font-variation-settings: "wdth" 110; }
.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav > a, .nav__grupo > button {
  color: #fff; font: 650 1.02rem var(--cuerpo); font-variation-settings: "wdth" 108; text-decoration: none;
  padding: .6rem .8rem; border-radius: 8px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
  white-space: nowrap;
}
.nav > a:hover, .nav__grupo > button:hover { background: rgba(142, 224, 236, .12); }
.nav > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ola); border-radius: 0; }
.nav__grupo { position: relative; }
.nav__grupo button[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav__grupo .ico { width: 1em; height: 1em; transition: transform .2s; }
.desplegable {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-42%);
  width: min(880px, 90vw); background: #fff; color: var(--tinta); border-radius: var(--radio); box-shadow: 0 30px 60px -20px rgba(6, 21, 40, .5);
  padding: 1.6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.desplegable[hidden] { display: none; }
.desplegable h3 { font-size: 1.05rem; color: var(--teal); margin-bottom: .6rem; }
.desplegable ul { list-style: none; }
.desplegable li a { display: block; padding: .45rem .5rem; border-radius: 8px; color: var(--tinta); text-decoration: none; font-weight: 650; line-height: 1.25; }
.desplegable li a:hover { background: var(--espuma); }
.desplegable small { display: block; font-weight: 400; color: var(--tinta-2); font-size: .88rem; margin-top: .1rem; }
.desplegable__pie { grid-column: 1 / -1; display: flex; gap: 1.5rem; border-top: 1px solid var(--linea); padding-top: 1rem; }
.desplegable__pie a { font-weight: 650; }
.cabecera__tel { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }
.estado { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .88rem; font-weight: 600; color: var(--niebla); }
.estado__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--niebla); }
.estado--abierto .estado__punto { background: var(--abierto); box-shadow: 0 0 0 0 rgba(63, 211, 154, .6); animation: latido 2.4s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 8px rgba(63, 211, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 211, 154, 0); } }
.hamburguesa { display: none; margin-left: auto; background: none; border: 2px solid var(--linea-osc); color: #fff; border-radius: 10px; width: 50px; height: 50px; align-items: center; justify-content: center; cursor: pointer; }
.hamburguesa .ico { width: 26px; height: 26px; }

/* ═══ 5 · MENÚ MÓVIL ═══ */
.menu-movil {
  position: fixed; inset: var(--cabecera) 0 0 0; z-index: 49; background: var(--noche); color: var(--marfil);
  overflow-y: auto; padding: 1.5rem var(--margen) 7rem; visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s, transform .25s, visibility 0s .25s;
}
.menu-movil[data-abierto="true"] { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
.menu-movil ul { list-style: none; }
.menu-movil a { color: #fff; text-decoration: none; }
.menu-movil__principal a { display: block; padding: .75rem 0; font-family: var(--display); font-weight: 800; font-size: 1.45rem; border-bottom: 1px solid var(--linea-osc); }
.menu-movil h3 { font-family: var(--cuerpo); font-size: .95rem; font-weight: 700; color: var(--ola-clara); margin: 1.6rem 0 .3rem; }
.menu-movil h3 + ul a { display: block; padding: .5rem 0; font-weight: 600; font-size: 1.1rem; }

/* ═══ 6 · OLA (bordes de sección) ═══
   La ola del logo, con sus dos cintas (marfil y turquesa). El relleno toma
   el color de la sección que sigue, así la foto "se moja" en ella. */
.ola-borde { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(44px, 6vw, 92px); z-index: 2; pointer-events: none; }
.ola-borde__agua { fill: var(--papel); }
.ola-borde__cinta { fill: none; stroke: var(--marfil); stroke-width: 3; vector-effect: non-scaling-stroke; }
.ola-borde__cinta2 { fill: none; stroke: var(--ola); stroke-width: 3; vector-effect: non-scaling-stroke; }
.ola-borde--noche .ola-borde__agua { fill: var(--noche); }
.ola-borde--pie { top: 1px; bottom: auto; transform: translateY(-100%); }
.ola-borde--pie .ola-borde__agua { fill: var(--noche); }

/* ═══ 7 · HERO ═══
   Foto a pantalla completa con velo marino más denso del lado del texto
   (regla de la casa). En móvil, foto vertical y velo desde abajo. */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: var(--noche); }
.hero--home { min-height: min(90vh, 860px); display: flex; align-items: center; }
.hero--interno { min-height: clamp(460px, 64vh, 640px); display: flex; align-items: center; }
.hero__fondo, .hero__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__fondo img { object-fit: cover; object-position: 72% 40%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 21, 40, .94) 0%, rgba(6, 21, 40, .82) 34%, rgba(6, 21, 40, .38) 64%, rgba(6, 21, 40, .12) 100%),
    linear-gradient(0deg, rgba(6, 21, 40, .55) 0%, rgba(6, 21, 40, 0) 38%);
}
/* En las páginas internas la foto trae a la persona en el centro: velo más denso detrás del texto */
.hero--interno::before {
  background:
    linear-gradient(90deg, rgba(6, 21, 40, .95) 0%, rgba(6, 21, 40, .88) 42%, rgba(6, 21, 40, .5) 68%, rgba(6, 21, 40, .18) 100%),
    linear-gradient(0deg, rgba(6, 21, 40, .55) 0%, rgba(6, 21, 40, 0) 38%);
}
.hero__contenido { padding-block: clamp(4rem, 8vw, 7rem) clamp(6rem, 11vw, 9.5rem); }
.hero__contenido > * { max-width: 650px; }
.hero h1 { color: #fff; }
.hero--interno h1 { font-size: var(--t-h1-int); }
.hero .lead { color: var(--marfil); }
.hero a:not(.boton) { color: var(--ola-clara); }
.pruebas { list-style: none; display: grid; grid-template-columns: repeat(3, auto); gap: 1.2rem 2rem; margin-top: 2.4rem; max-width: 820px !important; }
.pruebas li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--niebla); line-height: 1.35; }
.pruebas .ico { color: var(--ola); width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
.pruebas strong { display: block; color: #fff; font-size: 1.02rem; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .92rem; margin-bottom: 1.2rem; color: var(--niebla); }
.migas li + li::before { content: "/"; margin-right: .4rem; color: var(--ola); }
.migas a { color: var(--ola-clara); }
.ficha { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: .4rem; color: var(--marfil); }
.ficha li { display: flex; align-items: center; gap: .5rem; }
.ficha .ico { color: var(--ola); }
.ficha-zips { font-weight: 700; color: var(--ola-clara); font-variation-settings: "wdth" 112; letter-spacing: .02em; }

/* ═══ 8 · TIDE PLANNER (elemento firma) ═══ */
.banda--marea { background:
  radial-gradient(120% 60% at 85% 0%, rgba(43, 192, 214, .14), transparent 60%),
  var(--noche); }
.marea__cabeza { max-width: 900px; margin-bottom: 2.4rem; }
.marea__cabeza h2 { color: #fff; max-width: 20ch; }
.marea__forma { display: grid; gap: 1.6rem; }
.opciones { border: 0; margin: 0; padding: 0; min-width: 0; }
.opciones legend { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: #fff; margin-bottom: .7rem; padding: 0; }
.opciones__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opciones label {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .5rem 1rem;
  border: 1.5px solid rgba(142, 224, 236, .4); border-radius: 10px; color: var(--marfil); cursor: pointer;
  font-weight: 650; font-variation-settings: "wdth" 106; transition: background-color .15s, color .15s, border-color .15s;
}
.opciones label:hover { border-color: var(--ola); background: rgba(43, 192, 214, .1); }
.opciones input:checked + label { background: var(--ola); color: var(--noche); border-color: var(--ola); }
.opciones input:focus-visible + label { outline: 3px solid var(--ola-clara); outline-offset: 2px; }
.opciones input:disabled + label { opacity: .32; cursor: not-allowed; }
/* Los meses alineados con las columnas de la carta de abajo */
.opciones--meses .opciones__lista { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; }
.opciones--meses label { padding: .5rem 0; font-size: 1rem; }
.opciones--meses input[value="0"] + label { grid-column: 1 / -1; justify-self: start; padding-inline: 1.1rem; margin-top: .3rem; }

.carta { margin: .4rem 0 0; }
.carta__lienzo { position: relative; height: clamp(170px, 18vw, 230px); border-bottom: 2px solid rgba(243, 236, 221, .45); }
.carta__lienzo svg { width: 100%; height: 100%; }
.carta__temporada { fill: rgba(243, 236, 221, .05); }
.carta__raya { stroke: rgba(243, 236, 221, .16); stroke-width: 2; }
.carta__pico { fill: rgba(243, 236, 221, .05); }
.carta__agua { fill: rgba(142, 224, 236, .5); transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
.carta__agua.lleno { transform: scaleY(1); }
.carta__agua.tormenta { fill: var(--ola); }
.carta--viva .carta__agua { transition: transform .65s cubic-bezier(.2, .8, .2, 1); }
.carta--viva .carta__agua:nth-child(2) { transition-delay: 25ms; } .carta--viva .carta__agua:nth-child(3) { transition-delay: 50ms; }
.carta--viva .carta__agua:nth-child(4) { transition-delay: 75ms; } .carta--viva .carta__agua:nth-child(5) { transition-delay: 100ms; }
.carta--viva .carta__agua:nth-child(6) { transition-delay: 125ms; } .carta--viva .carta__agua:nth-child(7) { transition-delay: 150ms; }
.carta--viva .carta__agua:nth-child(8) { transition-delay: 175ms; } .carta--viva .carta__agua:nth-child(9) { transition-delay: 200ms; }
.carta--viva .carta__agua:nth-child(10) { transition-delay: 225ms; } .carta--viva .carta__agua:nth-child(11) { transition-delay: 250ms; }
.carta--viva .carta__agua:nth-child(12) { transition-delay: 275ms; }
.carta__linea { fill: none; stroke: var(--marfil); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.carta__sep { stroke: rgba(243, 236, 221, .09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.carta__rotulo { position: absolute; left: calc(500 / 1200 * 100%); top: .5rem; padding-left: .6rem; font-size: .92rem; font-weight: 700; color: var(--ola-clara); z-index: 1; font-variation-settings: "wdth" 108; }
.carta__rotulo--pico { left: calc(700 / 1200 * 100%); top: 2rem; width: 25%; text-align: center; padding: 0; color: var(--marfil); font-weight: 600; }
.carta__meses { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: .45rem; }
.carta__meses > span { text-align: center; font-size: .92rem; font-weight: 650; color: var(--niebla); }
.carta__meses > span.fuera { color: var(--ola); }
.carta__mes-corto { display: none; }

.marea__extras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.4rem; margin-top: 1rem; }
.marea__extras .opciones legend { font-size: 1.08rem; font-family: var(--cuerpo); font-weight: 700; }
.marea__forma--todo-el-anio .opciones--meses:nth-of-type(2) { opacity: .6; }

/* El plan: una hoja marfil, lista para imprimir y pegar en la nevera */
.plan {
  margin-top: 2.6rem; background: var(--marfil); color: var(--tinta); border-radius: var(--radio);
  padding: clamp(1.4rem, 3vw, 2.6rem); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); position: relative;
}
.plan::before { /* el borde superior de la hoja, en ola */
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px;
  background: radial-gradient(12px 10px at 12px 12px, var(--marfil) 98%, transparent) 0 0 / 24px 12px repeat-x;
}
/* dentro de la banda oscura, la hoja manda: texto tinta y botones de línea en noche */
.banda--noche .plan p { color: var(--tinta); }
.banda--noche .plan .plan__resumen { color: var(--teal); }
.banda--noche .plan .plan__nota { color: var(--tinta-2); }
.banda--noche .plan .boton--linea { color: var(--noche); }
.banda--noche .plan .boton--linea:hover { background: rgba(12, 43, 75, .07); }
.plan__titulo { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: .4rem; }
.plan__resumen { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); color: var(--teal); max-width: 60ch; }
.plan__solo { font-size: 1.2rem; max-width: 62ch; }
.plan__columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1.4rem; }
.plan__col h4 { display: flex; align-items: center; gap: .55rem; font-size: 1.2rem; font-weight: 700; padding-bottom: .6rem; border-bottom: 2px solid var(--noche); margin-bottom: .9rem; }
.plan__col h4 .ico { color: var(--teal); width: 1.4em; height: 1.4em; }
.plan__col ul { list-style: none; display: grid; gap: .8rem; }
.plan__col li { position: relative; padding-left: 1.4rem; font-size: 1.02rem; line-height: 1.5; }
.plan__col li::before { content: ""; position: absolute; left: 0; top: .72em; width: .8rem; height: 3px; border-radius: 2px; background: var(--ola-honda); }
.plan__botones { margin-top: 2rem; }
.plan__nota { margin: 1.2rem 0 0; font-size: .95rem; color: var(--tinta-2); }

/* Banda corta de la home que lleva a Season Ready (la herramienta vive en su página) */
.banda--temporada { padding-block: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); }
.temporada { display: grid; grid-template-columns: 1fr auto; gap: 2rem 4rem; align-items: center; }
.temporada h2 { color: #fff; max-width: 26ch; font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); }
.temporada .lead { margin: 0; }
@media (max-width: 760px) { .temporada { grid-template-columns: 1fr; } .temporada .boton { justify-content: center; } }

/* ═══ 9 · TABLA DE MAREAS (servicios) ═══ */
.servicios__cabeza { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-bottom: 3rem; }
.mareas__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.mareas__grupo h3 { padding-bottom: .7rem; border-bottom: 3px solid var(--noche); margin-bottom: 0; }
.mareas { list-style: none; }
.mareas li { border-bottom: 1.5px dotted rgba(12, 43, 75, .35); }
.mareas a { display: grid; gap: .15rem; padding: 1rem .4rem; color: var(--tinta); text-decoration: none; border-radius: 6px; transition: background-color .15s; }
.mareas a:hover { background: var(--espuma); }
.mareas__nombre { font-weight: 750; font-size: 1.12rem; font-variation-settings: "wdth" 104; }
.mareas a:hover .mareas__nombre { text-decoration: underline; text-decoration-color: var(--ola); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.mareas__que { color: var(--tinta-2); font-size: 1rem; line-height: 1.4; }
.mareas__tiempo { display: inline-flex; align-items: center; gap: .4rem; color: var(--teal); font-weight: 700; font-size: .96rem; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.mareas__tiempo .ico { width: 1.05em; height: 1.05em; }

/* ═══ 10 · FOTOS ═══ */
.foto { margin: 0; }
.foto img { width: 100%; border-radius: var(--radio); box-shadow: var(--sombra); }
.foto--inclinada img { border: 10px solid #fff; border-radius: 6px; transform: rotate(1.6deg); }
.fotos-par { display: grid; gap: 1.4rem; }
.js [data-reveal].por-entrar { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].por-entrar.en-vista { opacity: 1; transform: none; }

/* ═══ 11 · CHECKS Y AVISOS ═══ */
.checks { list-style: none; display: grid; gap: 1.1rem; margin: 1.6rem 0; }
.checks li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: start; }
.checks .ico { width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 50%; background: var(--noche); color: var(--ola); }
.aviso { background: #fff; border: 1.5px solid rgba(10, 107, 124, .45); border-radius: 12px; padding: 1.1rem 1.3rem; margin: 0; }
.lista-check { list-style: none; display: grid; gap: .6rem; margin: 0 0 1.4em; }
.lista-check li { position: relative; padding-left: 2rem; }
.lista-check li::before { content: ""; position: absolute; left: .35rem; top: .28em; width: .5rem; height: .95rem; border: solid var(--ola-honda); border-width: 0 3px 3px 0; transform: rotate(42deg); }
.nota-honesta { background: var(--marfil); border-radius: var(--radio); padding: 1.5rem 1.7rem; margin: 2rem 0; }
.nota-honesta h3 { margin-bottom: .4rem; }
.nota-honesta p { margin: 0; }

/* ═══ 12 · COMUNIDADES ═══ */
.comunidades { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 2rem; }
.comunidades li { padding: .4rem .9rem; border: 1.5px solid rgba(12, 43, 75, .28); border-radius: 999px; font-weight: 600; font-size: .98rem; background: #fff; }

/* ═══ 13 · CIERRE ═══ */
.cierre { background: var(--marino); color: var(--marfil); padding-bottom: calc(var(--banda) + 3rem); }
.cierre__rejilla { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.cierre img { width: 220px; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.cierre h2 { color: #fff; }
.cierre .lead { color: var(--niebla); }

/* ═══ 14 · RESEÑAS, PASOS, ZONAS, ZIP ═══ */
.resenas { columns: 3 300px; column-gap: 1.5rem; margin-top: 2rem; }
.resena { break-inside: avoid; margin: 0 0 1.5rem; background: #fff; border-radius: var(--radio); padding: 1.6rem 1.7rem; box-shadow: 0 14px 34px -24px rgba(6, 21, 40, .45); border: 1px solid var(--linea); }
.resena p { font-size: 1.06rem; line-height: 1.55; margin: .8rem 0 1rem; }
.resena footer { display: flex; flex-direction: column; font-size: .95rem; }
.resena footer span { color: var(--tinta-2); }
.estrellas { display: inline-flex; gap: 2px; }
.estrella { width: 19px; height: 19px; fill: var(--ola-honda); stroke: none; }
.estrella--vacia { fill: rgba(12, 43, 75, .18); }
.pasos { list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.4rem; }
.pasos li { counter-increment: paso; border-top: 3px solid var(--noche); padding-top: 1.2rem; }
.pasos li::before { content: counter(paso); display: block; font-family: var(--display); font-weight: 900; font-size: 3rem; line-height: 1; color: var(--ola-honda); margin-bottom: .6rem; }
.pasos p { color: var(--tinta-2); margin: 0; }
.zonas { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
.zonas a { display: flex; flex-direction: column; padding: 1rem 0; border-bottom: 1.5px dotted rgba(12, 43, 75, .35); color: var(--tinta); text-decoration: none; }
.zonas a strong { font-size: 1.12rem; }
.zonas a span { color: var(--tinta-2); font-size: .95rem; font-variant-numeric: tabular-nums; }
.zonas a:hover strong { color: var(--teal); text-decoration: underline; }
.zip-forma { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.zip-forma input { flex: 1 1 160px; min-height: 54px; font: 700 1.35rem var(--cuerpo); letter-spacing: .08em; padding: .5rem 1rem; border: 2px solid rgba(12, 43, 75, .4); border-radius: 10px; background: #fff; color: var(--tinta); }
.zip-forma input:focus { border-color: var(--teal); outline: 3px solid rgba(43, 192, 214, .45); outline-offset: 1px; }
.zip-respuesta { margin-top: 1rem; }
.zip-respuesta.visible { background: #fff; border: 1.5px solid var(--teal); border-radius: 12px; padding: 1rem 1.2rem; }
.zip-respuesta.fuera { border-color: rgba(12, 43, 75, .35); }
.zip-respuesta p { margin: 0; }

/* ═══ 15 · FAQ ═══ */
.faq { margin-top: 1.6rem; border-top: 1.5px solid var(--linea); }
.faq__item { border-bottom: 1.5px solid var(--linea); }
.faq__item h3 { margin: 0; font-size: inherit; }
.faq__boton {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left;
  background: none; border: 0; padding: 1.2rem 0; cursor: pointer; color: var(--tinta);
  font: 700 clamp(1.1rem, 1rem + .35vw, 1.28rem)/1.3 var(--display);
}
.faq__signo { position: relative; width: 22px; height: 22px; flex: none; }
.faq__signo::before, .faq__signo::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--teal); border-radius: 2px; transition: transform .25s; }
.faq__signo::after { transform: rotate(90deg); }
.faq__boton[aria-expanded="true"] .faq__signo::after { transform: rotate(0deg); }
.faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.faq__panel[data-abierto="false"] { grid-template-rows: 0fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { margin: 0 0 1.3rem; max-width: 68ch; color: var(--tinta-2); }
.faq__panel[data-abierto="false"] > div { visibility: hidden; transition: visibility 0s .3s; }

/* ═══ 16 · PÁGINAS INTERNAS ═══ */
.articulo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.prosa { max-width: 70ch; }
.prosa h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); margin-top: 2.2rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa .foto { margin: 2rem 0; }
.lateral { position: sticky; top: calc(var(--cabecera) + 1.5rem); display: grid; gap: 1.2rem; }
.caja { background: var(--espuma); border-radius: var(--radio); padding: 1.5rem 1.6rem; }
.caja h2 { font-size: 1.35rem; margin-bottom: .5rem; }
.caja p { font-size: 1rem; }
.caja .botones { margin-top: 1rem; }
.caja--noche { background: var(--noche); color: var(--marfil); }
.caja--noche h2 { color: #fff; }
.caja--noche p { color: var(--niebla); }
.caja--marea { background: var(--marfil); }
.relacionados { list-style: none; display: grid; gap: .1rem; }
.relacionados a { display: block; padding: .5rem 0; font-weight: 650; border-bottom: 1px dotted rgba(12, 43, 75, .3); text-decoration: none; }
.relacionados a:hover { text-decoration: underline; }
.relacionados--linea { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.relacionados--linea a { border: 0; }
.contacto__tel a { font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); color: var(--noche); text-decoration: none; }
.contacto__datos .foto { margin-top: 2rem; max-width: 420px; }
.contacto__datos .estado { color: var(--tinta-2); }
.contacto__datos .estado__punto { background: var(--tinta-2); }
.contacto__datos .estado--abierto .estado__punto { background: #1E9C6C; }

/* ═══ 17 · FORMULARIO ═══ */
.formulario { display: grid; gap: 1.1rem; max-width: 560px; margin-top: 1rem; }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 700; }
.campo input, .campo textarea { font: inherit; padding: .8rem 1rem; border: 2px solid rgba(12, 43, 75, .35); border-radius: 10px; background: #fff; color: var(--tinta); }
.campo input:focus, .campo textarea:focus { border-color: var(--teal); outline: 3px solid rgba(43, 192, 214, .45); outline-offset: 1px; }
.campo--error input, .campo--error textarea { border-color: var(--error); }
.campo__error, .formulario__falla { color: var(--error); font-weight: 600; font-size: .95rem; margin: 0; }
.trampa { position: absolute; left: -9999px; }
.formulario__exito { background: var(--espuma); border-radius: var(--radio); padding: 1.6rem; }

/* ═══ 18 · PIE Y BARRA MÓVIL ═══ */
.pie { position: relative; background: var(--noche); color: var(--niebla); padding: 3.5rem 0 2rem; font-size: 1rem; }
.pie a { color: var(--marfil); text-decoration: none; }
.pie a:hover { text-decoration: underline; color: #fff; }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; }
.pie h2 { font-size: 1.15rem; color: var(--ola-clara); margin-bottom: .8rem; }
.pie ul { list-style: none; display: grid; gap: .45rem; }
.pie__marca img { width: 150px; height: auto; margin-bottom: 1rem; }
.pie__tel { font-family: var(--display); font-weight: 900; font-size: 1.9rem; color: #fff !important; }
.horario { border-collapse: collapse; width: 100%; font-size: .95rem; }
.horario th, .horario td { text-align: left; padding: .3rem 0; font-weight: 500; }
.horario td { text-align: right; color: var(--marfil); }
.horario tr[data-hoy] th, .horario tr[data-hoy] td { color: #fff; font-weight: 700; }
.horario__hoy { margin-left: .5rem; font-size: .78rem; background: var(--ola); color: var(--noche); padding: .05rem .4rem; border-radius: 4px; font-weight: 700; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; border-top: 1px solid var(--linea-osc); margin-top: 3rem; padding-top: 1.4rem; font-size: .92rem; }
.pie__legal p { margin: 0; }
.pie__credito { font-size: .85rem; margin: 1rem 0 0; opacity: .85; }
.barra-movil { display: none; }

/* ═══ 19 · APERTURA "LA OLA" ═══
   Solo en la home, una vez por sesión, ~2,4 s. Sin JS no existe (se quita
   con .sin-apertura en el <head> o la borra el JS). Tiempos en iniciarApertura(). */
.apertura { position: fixed; inset: 0; z-index: 1000; cursor: pointer; overflow: hidden; }
.sin-apertura .apertura, html:not(.js) .apertura { display: none; }
.apertura__cortina {
  position: absolute; inset: 0; background: var(--noche); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  transition: transform .78s cubic-bezier(.7, 0, .25, 1);
}
.apertura__borde { position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: 120px; fill: var(--noche); }
.apertura__logo { position: relative; width: min(60vmin, 430px); aspect-ratio: 1; opacity: 0; transform: scale(.94); transition: opacity .4s ease-out, transform .6s cubic-bezier(.2, .8, .2, 1); }
.apertura__logo img, .apertura__hueco { position: absolute; inset: 0; width: 100%; height: 100%; }
.apertura__luz {
  position: absolute; left: 38.75%; top: 29.66%; width: 39.23%; height: 18.33%; opacity: 0; transition: opacity .6s .15s;
  background: radial-gradient(ellipse at 50% 100%, #FFE9BE 0%, #F4B266 42%, #8A4A22 100%);
}
.apertura__hueco { clip-path: inset(29.66% 22.02% 52.01% 38.75%); }
.apertura__puerta { transition: transform .8s cubic-bezier(.55, 0, .2, 1); }
.apertura__lema { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); color: var(--marfil); opacity: 0; transition: opacity .5s .25s; }
.apertura__barrido { position: absolute; left: 0; bottom: 14%; width: 170vw; height: 38vh; transform: translateX(-102%); transition: transform 1s cubic-bezier(.45, 0, .25, 1), opacity .3s; pointer-events: none; }
.apertura__barrido-agua { fill: var(--ola); opacity: .92; }
.apertura__barrido-cinta { fill: none; stroke: var(--marfil); stroke-width: 7; }
.apertura__saltar { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); color: rgba(243, 236, 221, .7); font-size: .9rem; }
.apertura.lista .apertura__logo { opacity: 1; transform: none; }
.apertura.lista .apertura__lema { opacity: 1; }
.apertura.barre .apertura__barrido { transform: translateX(100vw); }
.apertura.abre .apertura__luz { opacity: 1; }
.apertura.abre .apertura__puerta { transform: translateY(-18.6%); }
.apertura.sube .apertura__cortina { transform: translateY(calc(-100% - 130px)); }
.apertura.sube .apertura__barrido, .apertura.sube .apertura__saltar { opacity: 0; }

/* ═══ 20 · RESPONSIVE, MOVIMIENTO, IMPRESIÓN ═══ */
@media (max-width: 1180px) {
  .nav { display: none; }
  .hamburguesa { display: inline-flex; margin-left: 0; }
  .cabecera__tel { margin-left: auto; }
}
@media (max-width: 1000px) {
  .mareas__rejilla { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: 1fr 1fr; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .articulo { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .plan__columnas { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 900px) {
  .dos-col, .servicios__cabeza { grid-template-columns: 1fr; }
  .dos-col--invertida > .foto { order: -1; }
  .pruebas { grid-template-columns: 1fr; }
  .marea__extras { grid-template-columns: 1fr; }
  .cierre__rejilla { grid-template-columns: 1fr; }
  .cierre img { width: 150px; }
}
@media (max-width: 760px) {
  :root { --cabecera: 72px; }
  body { padding-bottom: 76px; }
  .marca img { width: 52px; height: 52px; }
  .marca__nombre { font-size: 1.05rem; }
  .cabecera__tel .boton { display: none; }
  .cabecera__fila { gap: .8rem; }
  .hero--home { min-height: 92vh; align-items: flex-end; }
  .hero__fondo img { object-position: 50% 20%; }
  .hero::before { background: linear-gradient(180deg, rgba(6, 21, 40, .35) 0%, rgba(6, 21, 40, .6) 38%, rgba(6, 21, 40, .95) 72%); }
  .hero__contenido { padding-top: 10rem; }
  .mareas__rejilla, .pasos, .zonas, .pie__rejilla { grid-template-columns: 1fr; }
  .opciones--meses .opciones__lista { grid-template-columns: repeat(6, 1fr); }
  .carta__mes-largo { display: none; }
  .carta__mes-corto { display: inline; }
  .carta__rotulo { font-size: .78rem; top: .3rem; }
  .carta__rotulo-fechas { display: none; }
  .carta__rotulo--pico { top: 1.5rem; }
  .botones .boton { flex: 1 1 100%; justify-content: center; }
  .barra-movil { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--noche); padding: .6rem var(--margen) calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea-osc); }
  .barra-movil .boton { justify-content: center; min-height: 50px; }
  .resenas { columns: 1; }
}
@media (max-width: 480px) {
  /* A 375 px no entran logo, nombre, estado y hamburguesa: el estado se queda
     en el pie y en contacto; llamar está siempre en la barra de abajo. */
  .cabecera__tel { display: none; }
  .hamburguesa { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
@media print {
  /* Solo se imprime el plan del Tide Planner (botón "Print it for the fridge") */
  body * { visibility: hidden; }
  .plan, .plan * { visibility: visible; }
  .plan { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; background: #fff; }
  .plan::before, .plan__botones { display: none; }
}