/* ==========================================================================
   Los Médanos Salud — hoja de estilos
   1. Fuentes          5. Encabezado y menú     9. Páginas internas
   2. Tokens           6. Portada               10. Preguntas y contacto
   3. Base             7. Secciones del inicio  11. Formulario de turnos
   4. Componentes      8. Llamado y pie         12. Utilidades
   ========================================================================== */

/* 1. Fuentes (archivos locales, sin servicios externos) ------------------- */
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/93232c.woff2) format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/62d571.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/5a54cb.woff2) format("woff2");unicode-range:U+0000-00FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces Fallback";src:local("Times New Roman");ascent-override:84.71%;descent-override:22.09%;line-gap-override:0%;size-adjust:115.45%}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/cc6c75.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/ed5f1f.woff2) format("woff2");unicode-range:U+0000-00FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/574e5b.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/89ea96.woff2) format("woff2");unicode-range:U+0000-00FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Fallback";src:local("Arial");ascent-override:95.6%;descent-override:29.18%;line-gap-override:0%;size-adjust:99.37%}

/* 2. Tokens --------------------------------------------------------------- */
/* Paleta cálida tomada del logo (marrón médano + gris del aro), con neutros arena. */
:root{
  --fuente-titulos:"Fraunces","Fraunces Fallback",Georgia,serif;
  --fuente-texto:"Atkinson Hyperlegible","Atkinson Hyperlegible Fallback",system-ui,sans-serif;

  --arena-50:#faf7f3;   /* fondo general */
  --arena-100:#f3ede6;  /* paneles */
  --arena-200:#ebe2d8;
  --arena-300:#e3d3c4;  /* acento claro sobre oscuro */
  --arena-500:#9b948e;  /* gris del aro del logo */
  --marca-50:#f7efe9;
  --marca-100:#ecdcd0;
  --marca-600:#8a4f31;
  --marca-700:#6b3a22;  /* color principal de la marca */
  --marca-800:#52301e;
  --marca-900:#3a2116;
  --pie:#2c1910;

  --tinta:#2b2522;
  --tinta-suave:#5f5751;
  --borde:#e7ded4;
  --borde-fuerte:#d6c9bb;
  --blanco:#fff;
  --foco:#1f6feb;
  --sobre-oscuro:#f6efe9;
  --sobre-oscuro-suave:#e3d3c4;

  --radio:18px;
  --radio-chico:12px;
  --sombra-suave:0 1px 2px rgb(58 33 22 / 5%),0 1px 1px rgb(58 33 22 / 3%);
  --sombra:0 2px 4px rgb(58 33 22 / 4%),0 16px 36px -16px rgb(58 33 22 / 22%);

  --ancho:1180px;
  --seccion:clamp(64px,9vw,120px);
  --transicion:.2s ease;
}

/* 3. Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;font-family:var(--fuente-texto);font-size:1.0625rem;line-height:1.7;color:var(--tinta);background:var(--arena-50);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
::selection{background:var(--marca-100);color:var(--marca-900)}

h1,h2,h3{font-family:var(--fuente-titulos);font-weight:600;color:var(--marca-900);margin:0 0 .55em;text-wrap:balance}
h1{font-size:clamp(2.3rem,1.55rem + 3vw,3.6rem);line-height:1.08;letter-spacing:-.022em}
h2{font-size:clamp(1.8rem,1.3rem + 1.9vw,2.55rem);line-height:1.13;letter-spacing:-.018em}
h3{font-size:1.25rem;line-height:1.28;letter-spacing:-.008em}
p{margin:0 0 1em;text-wrap:pretty}

a{color:var(--marca-700);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--transicion)}
a:hover{color:var(--marca-900);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:6px}

.contenedor{width:min(var(--ancho),100% - 40px);margin-inline:auto}
.seccion{padding:var(--seccion) 0}
.seccion-blanca{background:var(--blanco)}
.seccion-agua{background:var(--marca-700);color:var(--sobre-oscuro)}
.seccion-agua h2,.seccion-agua h3{color:#fff}

/* Bloque de títulos: antetítulo + título + bajada */
.antetitulo{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--marca-600)}
.antetitulo::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.seccion-agua .antetitulo{color:var(--arena-300)}
.bajada{max-width:60ch;font-size:clamp(1.08rem,1rem + .3vw,1.2rem);line-height:1.65;color:var(--tinta-suave)}
.seccion-agua .bajada{color:var(--sobre-oscuro-suave)}

/* 4. Componentes ---------------------------------------------------------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:13px 26px;border:1.5px solid transparent;border-radius:999px;font:inherit;font-size:1rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color var(--transicion),color var(--transicion),border-color var(--transicion),box-shadow var(--transicion),transform var(--transicion)}
.boton:hover{text-decoration:none}
.boton:active{transform:translateY(1px)}
.boton-principal{background:var(--marca-700);color:#fff;box-shadow:0 6px 16px -8px rgb(107 58 34 / 60%)}
.boton-principal:hover{background:var(--marca-900);color:#fff}
.boton-secundario{background:transparent;border-color:var(--borde-fuerte);color:var(--marca-800)}
.boton-secundario:hover{border-color:var(--marca-700);background:var(--blanco);color:var(--marca-900)}
.boton-arena{background:var(--arena-300);color:var(--marca-900)}
.boton-arena:hover{background:var(--arena-100);color:var(--marca-900)}
.boton-whatsapp{background:#1a7f45;color:#fff}
.boton-whatsapp:hover{background:#136536;color:#fff}
.boton svg{width:20px;height:20px;flex:none}
.botones{display:flex;flex-wrap:wrap;gap:12px}

.lista-check{display:grid;gap:14px;margin:0 0 1.2em;padding:0;list-style:none}
.lista-check li{display:grid;grid-template-columns:24px 1fr;gap:12px}
.lista-check li::before{content:"";width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--marca-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b3a22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat}
.seccion-agua .lista-check li::before{background-color:var(--arena-300)}

.etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.2em;padding:0;list-style:none}
.etiquetas li{padding:7px 15px;border:1px solid var(--borde);border-radius:999px;background:var(--arena-50);font-size:.94rem;line-height:1.35;color:var(--marca-900)}

.caja{padding:26px;border:1px solid var(--borde);border-radius:var(--radio);background:var(--arena-50)}
.caja h2{margin-bottom:10px;font-size:1.15rem;letter-spacing:-.005em}
.caja p{color:var(--tinta-suave)}
.caja p:last-child{margin-bottom:0}
.caja ul{display:grid;margin:0;padding:0;list-style:none}
.caja li+li{border-top:1px solid var(--borde)}
.caja li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;font-weight:700;text-decoration:none}
.caja li a::after{content:"→";color:var(--marca-600);transition:transform var(--transicion)}
.caja li a:hover::after{transform:translateX(3px)}

.pendiente{color:var(--tinta-suave);font-style:italic}

/* 5. Encabezado y menú ---------------------------------------------------- */
.saltar{position:absolute;top:-80px;left:16px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--marca-900);color:#fff}
.saltar:focus{top:12px;color:#fff}

.encabezado{position:sticky;top:0;z-index:50;background:rgb(250 247 243 / 96%);border-bottom:1px solid var(--borde)}
.encabezado-fila{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px}
.marca{display:inline-flex;align-items:center;gap:12px;color:var(--tinta);text-decoration:none}
.marca:hover{color:var(--tinta)}
.marca img{flex:none;width:44px;height:44px}
.marca-texto{font-family:var(--fuente-texto);font-size:1.08rem;font-weight:400;line-height:1.1;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.marca-salud{color:var(--marca-700);font-weight:700}

.menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.menu a{display:block;padding:9px 14px;border-radius:999px;font-size:.96rem;font-weight:700;color:var(--tinta);text-decoration:none;transition:background-color var(--transicion),color var(--transicion)}
.menu a:hover{background:var(--arena-100);color:var(--marca-900)}
.menu a[aria-current]{background:var(--marca-50);color:var(--marca-700)}

.boton-menu{display:none;align-items:center;gap:10px;min-height:44px;padding:8px 16px;border:1px solid var(--borde-fuerte);border-radius:999px;background:var(--blanco);font:inherit;font-weight:700;color:var(--marca-900);cursor:pointer}
.boton-menu::before{content:"";width:16px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;transition:transform var(--transicion),box-shadow var(--transicion)}
.boton-menu[aria-expanded=true]::before{content:"✕";width:16px;height:auto;background:none;box-shadow:none;font-size:.95rem;line-height:1;text-align:center}

@media (max-width:1020px){
  .boton-menu{display:inline-flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--arena-50);border-bottom:1px solid var(--borde);box-shadow:0 18px 30px -18px rgb(58 33 22 / 30%)}
  .nav[data-abierto=true]{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0;width:min(var(--ancho),100% - 40px);margin-inline:auto;padding:8px 0 20px}
  .menu li+li{border-top:1px solid var(--borde)}
  .menu a{padding:15px 12px;border-radius:10px;font-size:1.05rem}
  .menu a[aria-current]{background:var(--marca-50)}
}
@media (max-width:420px){.marca-texto{font-size:.92rem;letter-spacing:.08em}.marca img{width:38px;height:38px}}
@media (max-width:480px){.marca{gap:10px}.marca-texto{white-space:normal;max-width:9em;line-height:1.2}.boton-menu{padding:8px 13px}}

/* 6. Portada -------------------------------------------------------------- */
.portada{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px)}
.portada-grilla{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:clamp(40px,6vw,88px)}
.portada h1{max-width:16ch;margin-bottom:22px}
.portada .bajada{margin-bottom:34px}
.portada-logo{position:relative;display:grid;place-items:center;isolation:isolate}
/* Halo de médanos detrás del logo */
.portada-logo::before{content:"";position:absolute;z-index:-1;width:min(118%,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--arena-100) 62%,transparent 63%),radial-gradient(closest-side,transparent 78%,var(--borde) 78.4%,transparent 79%)}
.portada-logo img{width:100%;max-width:400px;filter:drop-shadow(0 18px 30px rgb(58 33 22 / 14%))}

.datos-rapidos{display:flex;flex-wrap:wrap;gap:12px 22px;margin:40px 0 0;padding:24px 0 0;border-top:1px solid var(--borde);list-style:none;font-size:.97rem;font-weight:700;color:var(--tinta-suave)}
.datos-rapidos li{position:relative;display:flex;align-items:center;gap:10px}
/* Círculo (::before) y tilde (::after) van en capas separadas para poder animar el tilde */
.datos-rapidos li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--marca-100)}
.datos-rapidos li::after{content:"";position:absolute;left:0;top:50%;width:20px;height:20px;margin-top:-10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b3a22' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}

/* Foto de portada: arco suave como un médano, con un bloque arena detrás */
.portada-foto{position:relative;isolation:isolate}
.portada-foto::before{content:"";position:absolute;z-index:-1;right:-22px;bottom:-22px;width:72%;height:62%;border-radius:var(--radio);background:var(--arena-200)}
.portada-foto img{width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:50% 45%;border-radius:220px 220px var(--radio) var(--radio);box-shadow:var(--sombra);background:var(--arena-100)}
.dunas{display:block;width:100%;height:64px;margin-top:-1px;color:var(--blanco)}

@media (max-width:860px){
  .portada-grilla{grid-template-columns:1fr}
  .portada-foto{order:-1;margin-right:14px}
  .portada-foto img{aspect-ratio:16/11;border-radius:160px 160px var(--radio) var(--radio)}
  .portada-foto::before{right:-14px;bottom:-14px}
  .portada-logo{order:-1;justify-self:start}
  .portada-logo img{max-width:168px}
  .portada-logo::before{width:124%}
  .portada h1{max-width:none}
}
@media (max-width:520px){
  .portada .botones .boton{flex:1 1 100%}
  .datos-rapidos{flex-direction:column;gap:10px}
}

/* 7. Secciones del inicio ------------------------------------------------- */
/* Tarjetas de áreas */
.grilla-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:48px 0 0;padding:0;list-style:none}
.tarjeta-area{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:28px 28px 26px;border:1px solid var(--borde);border-radius:var(--radio);background:var(--blanco);box-shadow:var(--sombra-suave);transition:border-color var(--transicion),box-shadow var(--transicion),transform var(--transicion)}
.tarjeta-area:hover{border-color:var(--marca-100);box-shadow:var(--sombra);transform:translateY(-2px)}
.tarjeta-area h2,.tarjeta-area h3{margin:8px 0 0;font-size:1.3rem;line-height:1.25}
.tarjeta-area h2 a,.tarjeta-area h3 a{color:var(--marca-900);text-decoration:none}
.tarjeta-area h2 a::after,.tarjeta-area h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radio)}
.tarjeta-area:focus-within{outline:3px solid var(--foco);outline-offset:3px}
.tarjeta-area a:focus-visible{outline:none}
.tarjeta-area p{margin:0;color:var(--tinta-suave)}
.tarjeta-area .ver{display:inline-block;margin-top:auto;padding-top:12px;font-size:.96rem;font-weight:700;color:var(--marca-700);transition:transform var(--transicion)}
.tarjeta-area:hover .ver{transform:translateX(4px)}
.inicial{display:grid;place-items:center;width:54px;height:54px;border-radius:16px 16px 16px 5px;background:var(--marca-50);color:var(--marca-700)}
.inicial svg{width:28px;height:28px;stroke-width:1.8}
@media (max-width:960px){.grilla-areas{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .grilla-areas{grid-template-columns:1fr;gap:12px;margin-top:32px}
  /* En celular: ícono al lado del título para acortar la página */
  .tarjeta-area{display:grid;grid-template-columns:48px 1fr;align-items:center;column-gap:16px;row-gap:8px;padding:22px}
  .tarjeta-area .inicial{width:48px;height:48px}
  .tarjeta-area h2,.tarjeta-area h3{margin:0;font-size:1.2rem}
  .tarjeta-area p,.tarjeta-area .ver{grid-column:1/-1}
  .tarjeta-area .ver{padding-top:4px}
}

/* Dos columnas: texto + panel */
.dividido{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,6vw,96px)}
.dividido .bajada{margin-bottom:30px}
.panel{padding:clamp(26px,4vw,44px);border:1px solid var(--borde);border-radius:var(--radio);background:var(--blanco);box-shadow:var(--sombra)}
.panel .lista-check{gap:20px;margin:0}
.panel .lista-check li{font-size:1.04rem}
@media (max-width:860px){.dividido{grid-template-columns:1fr}}

/* Dos columnas: texto + foto */
.dos-col{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,6vw,96px)}
.dos-col > img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--radio);box-shadow:var(--sombra);background:var(--arena-100)}
.dos-col > img[height="1600"]{aspect-ratio:1/1}
/* Encuadre de cada foto vertical según dónde está la persona */
img[src*="acompanamiento-en-el-gimnasio"]{object-position:50% 14%}
img[src*="juego-con-pelota-en-el-gimnasio"]{object-position:50% 72%}
img[src*="aire-libre-a-caballo"]{object-position:50% 35%}
.dos-col .texto{max-width:none}
.dos-col .lista-check{margin-bottom:30px}
@media (max-width:860px){.dos-col{grid-template-columns:1fr}.dos-col > img{order:-1;aspect-ratio:16/11}}

/* Mosaico de fotos del inicio */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:44px 0 0;padding:0;list-style:none}
.mosaico li{overflow:hidden;border-radius:var(--radio-chico);background:var(--arena-100)}
.mosaico img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s ease}
.mosaico li:hover img{transform:scale(1.03)}
.mosaico-accion{margin:32px 0 0}
@media (max-width:860px){.mosaico{grid-template-columns:1fr 1fr;gap:10px}}

/* Galería de "Vida en el centro" */
/* Grilla de 12 columnas: cada foto ocupa un tercio; si la cantidad no es múltiplo de 3,
   las primeras dos van a media columna o las últimas cuatro a un cuarto, para no dejar huecos. */
.galeria{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:36px}
.galeria > figure{grid-column:span 4}
@media (min-width:960.02px){
  .galeria:has(> figure:nth-child(3n+2):last-child) > figure:nth-child(-n+2){grid-column:span 6}
  .galeria:has(> figure:nth-child(3n+4):last-child) > figure:nth-last-child(-n+4){grid-column:span 3}
}
.galeria figure{margin:0;overflow:hidden;border-radius:var(--radio-chico);background:var(--arena-100)}
.galeria img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.galeria figure:hover img{transform:scale(1.03)}
@media (min-width:600.02px) and (max-width:960px){
  .galeria > figure{grid-column:span 6}
  .galeria:has(> figure:nth-child(odd):last-child) > figure:first-child{grid-column:1/-1}
}
@media (max-width:600px){.galeria{gap:10px}.galeria > figure{grid-column:1/-1}}

/* Pasos del ingreso */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0 0;padding:0;list-style:none;counter-reset:paso}
.pasos li{counter-increment:paso;padding:28px;border:1px solid rgb(255 255 255 / 16%);border-radius:var(--radio);background:rgb(255 255 255 / 6%)}
.pasos li::before{content:counter(paso);display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border-radius:50%;background:var(--arena-300);font-family:var(--fuente-titulos);font-size:1.15rem;color:var(--marca-900)}
.pasos h3{margin-bottom:8px;font-size:1.2rem}
.pasos p{margin:0;color:var(--sobre-oscuro-suave)}
.pasos-accion{margin:40px 0 0}
@media (max-width:860px){.pasos{grid-template-columns:1fr;gap:12px}}
@media (max-width:600px){
  .pasos li{display:grid;grid-template-columns:40px 1fr;column-gap:16px;padding:22px}
  .pasos li::before{width:40px;height:40px;margin:0;grid-row:span 2}
  .pasos h3{margin:6px 0 4px}
}

/* Tarjeta destacada (neurología en el inicio) */
.destacado{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(24px,4vw,48px);padding:clamp(28px,4.5vw,52px);border:1px solid var(--borde);border-radius:var(--radio);background:var(--arena-50)}
.destacado h2{margin-bottom:.35em}
.destacado p{max-width:58ch;margin:0;color:var(--tinta-suave)}
.destacado-icono{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--blanco);border:1px solid var(--borde);color:var(--marca-700)}
.destacado-icono svg{width:44px;height:44px;stroke-width:1.6}
@media (max-width:960px){.destacado{grid-template-columns:auto 1fr}.destacado-accion{grid-column:1/-1}}
@media (max-width:600px){.destacado{grid-template-columns:1fr}.destacado-icono{width:64px;height:64px}.destacado-icono svg{width:32px;height:32px}.destacado-accion .boton{width:100%}}

/* 8. Llamado y pie -------------------------------------------------------- */
.llamado{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;padding:clamp(34px,5vw,64px);border-radius:var(--radio);background:var(--marca-800);color:var(--sobre-oscuro)}
/* Líneas de médano muy sutiles */
.llamado::after{content:"";position:absolute;right:-40px;bottom:-30px;width:460px;height:200px;opacity:.12;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 200' fill='none' stroke='%23e3d3c4' stroke-width='2'%3E%3Cpath d='M0 150C90 95 170 90 260 125s140 40 200 5'/%3E%3Cpath d='M30 185C120 130 200 125 290 160s120 30 170 0'/%3E%3Cpath d='M60 115C140 70 210 65 290 95s110 30 170 0'/%3E%3C/svg%3E") no-repeat}
.llamado > *{position:relative;z-index:1}
/* La sección que solo contiene el llamado lleva menos aire arriba */
.seccion:has(> .contenedor > .llamado){padding-top:clamp(40px,6vw,80px)}
.seccion-blanca + .seccion:has(> .contenedor > .llamado){padding-top:clamp(48px,6vw,88px)}
.llamado h2{margin-bottom:10px;color:#fff}
.llamado p{max-width:52ch;margin:0;color:var(--sobre-oscuro-suave)}
@media (max-width:760px){.llamado{grid-template-columns:1fr}.llamado .boton{flex:1 1 100%}}

.pie{padding:64px 0 32px;background:var(--pie);color:var(--sobre-oscuro-suave);font-size:.98rem}
main > .seccion:last-child:not(.seccion-blanca):not(.seccion-agua){padding-bottom:clamp(64px,8vw,104px)}
.pie a{color:var(--sobre-oscuro);text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie-grilla{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:40px}
.pie-grilla > div:first-child p{max-width:34ch;margin:0}
.pie h2{margin-bottom:16px;font-family:var(--fuente-texto);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--arena-300)}
.pie ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pie-logo{display:inline-block;margin-bottom:18px}
.pie-logo img{width:108px;height:108px}
.pie-contacto li{overflow-wrap:anywhere}
.pie-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:48px;padding-top:22px;border-top:1px solid rgb(255 255 255 / 12%);font-size:.88rem}
@media (max-width:1020px){.pie-grilla{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pie-grilla{grid-template-columns:1fr;gap:32px}.pie{padding-bottom:104px}}

.whatsapp-flotante{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:12px 20px;border-radius:999px;background:#1a7f45;color:#fff;font-weight:700;text-decoration:none;box-shadow:0 12px 26px -10px rgb(0 0 0 / 40%);transition:background-color var(--transicion),transform var(--transicion)}
.whatsapp-flotante:hover{background:#136536;color:#fff;transform:translateY(-1px)}
.whatsapp-flotante svg{width:22px;height:22px}
.whatsapp-flotante:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--foco)}
@media (max-width:600px){.whatsapp-flotante{width:56px;height:56px;padding:0;justify-content:center}.whatsapp-flotante .whatsapp-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* 9. Páginas internas ----------------------------------------------------- */
.cabecera-pagina{padding:clamp(36px,5.5vw,76px) 0 clamp(36px,4.5vw,60px)}
.cabecera-pagina h1{max-width:22ch;margin-bottom:18px}
.cabecera-pagina .bajada{margin:0}
.cabecera-acciones{margin-top:28px}
.alternativa{margin:28px 0 12px;font-weight:700;color:var(--marca-900)}
.migas{margin-bottom:24px;font-size:.92rem;color:var(--tinta-suave)}
.migas ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.migas li+li::before{content:"/";margin-right:6px;color:var(--arena-500)}
.migas a{color:var(--tinta-suave);text-decoration:none}
.migas a:hover{color:var(--marca-700);text-decoration:underline}
.migas [aria-current]{color:var(--tinta)}

.texto{max-width:70ch}
.texto > :first-child{margin-top:0}
.texto h2{margin-top:1.7em;font-size:clamp(1.45rem,1.2rem + 1vw,1.85rem)}
.texto h3{margin-top:1.6em;font-size:1.2rem}
.texto ul:not([class]){margin:0 0 1.2em;padding:0;list-style:none}
.texto ul:not([class]) li{position:relative;margin-bottom:.5em;padding-left:22px}
.texto ul:not([class]) li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--marca-600);opacity:.75}
.texto ol:not([class]){margin:0 0 1.2em;padding-left:1.3em}
.texto ol:not([class]) li{margin-bottom:.5em;padding-left:4px}
.texto ol:not([class]) li::marker{font-weight:700;color:var(--marca-700)}

.contenido-area{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:clamp(40px,6vw,88px)}
.lateral{position:sticky;top:104px;display:grid;gap:16px}
@media (max-width:960px){.contenido-area{grid-template-columns:1fr}.lateral{position:static}}

/* 10. Preguntas y contacto ------------------------------------------------ */
.preguntas{display:grid;gap:12px}
.preguntas details{max-width:840px}
.preguntas details{border:1px solid var(--borde);border-radius:14px;background:var(--blanco);transition:border-color var(--transicion),box-shadow var(--transicion)}
.preguntas details:hover{border-color:var(--borde-fuerte)}
.preguntas details[open]{border-color:var(--marca-100);box-shadow:var(--sombra-suave)}
.preguntas summary{position:relative;padding:22px 72px 22px 24px;font-size:1.06rem;font-weight:700;line-height:1.45;color:var(--marca-900);list-style:none;cursor:pointer}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";position:absolute;top:50%;right:20px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--marca-50);font-size:1.3rem;font-weight:400;line-height:1;color:var(--marca-700);transform:translateY(-50%);transition:background-color var(--transicion),color var(--transicion)}
.preguntas details[open] summary::after{content:"–";background:var(--marca-700);color:#fff}
.preguntas details p{margin:0;padding:0 24px 24px;color:var(--tinta-suave)}

.contacto-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.dato-contacto{display:flex;flex-direction:column;gap:6px;padding:26px;border:1px solid var(--borde);border-radius:var(--radio);background:var(--blanco);box-shadow:var(--sombra-suave)}
.dato-contacto h2{margin:0;font-size:1.1rem}
.dato-contacto p{margin:0}
.dato-contacto a{font-weight:700;overflow-wrap:anywhere}
.dato-contacto .icono{display:grid;place-items:center;width:46px;height:46px;margin-bottom:8px;border-radius:14px 14px 14px 4px;background:var(--marca-50);color:var(--marca-700)}
.dato-contacto .icono svg{width:22px;height:22px}
.dato-contacto .accion{margin-top:auto;padding-top:10px;font-size:.95rem}
.horarios{display:grid;gap:2px;margin:0;padding:0;list-style:none}

/* 11. Formulario de turnos ------------------------------------------------ */
.formulario{display:grid;gap:22px;margin-top:24px;padding:clamp(22px,4vw,36px);border:1px solid var(--borde);border-radius:var(--radio);background:var(--arena-50)}
.formulario h3{margin:0;font-size:1.3rem}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:640px){.campos-2{grid-template-columns:1fr}}
.campo{display:grid;gap:7px;min-width:0}
.campo label,.campo legend{font-weight:700;color:var(--marca-900)}
.campo .ayuda{margin:0;font-size:.92rem;color:var(--tinta-suave)}
.opcional{font-size:.9rem;font-weight:400;color:var(--tinta-suave)}
.formulario input[type=text],.formulario input[type=tel],.formulario input[type=date],.formulario textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--borde-fuerte);border-radius:var(--radio-chico);background:var(--blanco);font:inherit;color:var(--tinta);transition:border-color var(--transicion),box-shadow var(--transicion)}
.formulario input:hover,.formulario textarea:hover{border-color:var(--arena-500)}
.formulario input::placeholder,.formulario textarea::placeholder{color:#716861}
.formulario textarea{min-height:112px;resize:vertical}
.formulario input:focus-visible,.formulario textarea:focus-visible{outline:none;border-color:var(--foco);box-shadow:0 0 0 3px rgb(31 111 235 / 22%)}
.formulario [aria-invalid=true]{border-color:#b3261e;background:#fdf6f5}
.error-campo{margin:0;font-size:.92rem;font-weight:700;color:#b3261e}
.error-campo:empty{display:none}
fieldset.campo{margin:0;padding:0;border:0}
.opciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.opcion{position:relative}
.opcion input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opcion span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1.5px solid var(--borde-fuerte);border-radius:999px;background:var(--blanco);font-weight:700;transition:background-color var(--transicion),border-color var(--transicion),color var(--transicion)}
.opcion input:hover+span{border-color:var(--marca-600)}
.opcion input:checked+span{border-color:var(--marca-700);background:var(--marca-700);color:#fff}
.opcion input:focus-visible+span{outline:3px solid var(--foco);outline-offset:2px}
.consentimiento{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:.97rem}
.consentimiento input{width:22px;height:22px;margin:3px 0 0;accent-color:var(--marca-700)}
.aviso{margin:0;padding:14px 18px;border-radius:var(--radio-chico);font-size:.97rem}
.aviso:empty{display:none}
@media (max-width:600px){.formulario .botones .boton{flex:1 1 100%}}
.aviso-info{border:1px solid var(--marca-100);background:var(--marca-50);color:var(--marca-900)}
.aviso-error{border:1px solid #f2c4c0;background:#fdf3f2;color:#8c1d18}
.aviso-ok{border:1px solid #bfe0cb;background:#eef7f1;color:#14532d}

/* 11b. Animación de entrada ------------------------------------------------
   La clase .intro la agrega un script en <head> solo en la primera página de cada visita.
   Secuencia total ≈ 1,6 s: logo → foto de portada → textos y botones escalonados. */
@keyframes intro-logo{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes intro-subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes intro-aparecer{from{opacity:0}to{opacity:1}}
@keyframes intro-foto{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes intro-fondo{from{opacity:0;transform:translate(-14px,-14px)}to{opacity:1;transform:none}}
.intro{--intro-curva:cubic-bezier(.22,1,.36,1)}
.intro .marca img{animation:intro-logo .9s var(--intro-curva) both}
.intro .marca-texto{animation:intro-aparecer .8s ease-out .15s both}
.intro .boton-menu{animation:intro-aparecer .7s ease-out .3s both}
/* En celular el menú está oculto hasta tocar "Menú": no se anima para que no aparezca con demora al abrirlo */
@media (min-width:1020.02px){.intro .nav{animation:intro-aparecer .7s ease-out .3s both}}
.intro .portada-foto img{animation:intro-foto 1.2s var(--intro-curva) .1s both}
.intro .portada-foto::before{animation:intro-fondo 1s var(--intro-curva) .45s both}
.intro:not(.intro-foto) .portada-foto img,.intro:not(.intro-foto) .portada-foto::before{animation-play-state:paused}
.intro .portada .antetitulo{animation:intro-subir .8s var(--intro-curva) .2s both}
.intro .portada h1{animation:intro-subir .9s var(--intro-curva) .3s both}
.intro .portada .bajada{animation:intro-subir .8s var(--intro-curva) .48s both}
.intro .portada .botones{animation:intro-subir .8s var(--intro-curva) .62s both}
.intro .portada .datos-rapidos{animation:intro-aparecer .6s ease-out .7s both}
/* El botón flotante de WhatsApp aparece al final, para no adelantarse al resto */
.intro .whatsapp-flotante{animation:intro-aparecer .6s ease-out 1s both}

/* 11c. Datos destacados de la portada: aparecen uno por uno con su tilde ----
   .anim-datos la agrega el script de <head> (si hay IntersectionObserver y no se pidió
   reducir el movimiento); .visible se agrega cuando la lista entra en pantalla. */
@keyframes dato-texto{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dato-circulo{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes dato-tilde{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.datos-rapidos li:nth-child(2){--orden:1}
.datos-rapidos li:nth-child(3){--orden:2}
.datos-rapidos li:nth-child(4){--orden:3}
.anim-datos .datos-rapidos{--inicio:.15s;--paso:.65s;--curva:cubic-bezier(.22,1,.36,1)}
.intro.anim-datos .datos-rapidos{--inicio:1s} /* en la primera visita, después de la entrada de la portada */
.anim-datos .datos-rapidos li,.anim-datos .datos-rapidos li::before,.anim-datos .datos-rapidos li::after{opacity:0}
.anim-datos .datos-rapidos.visible li{--t:calc(var(--inicio) + var(--orden,0) * var(--paso));animation:dato-texto .6s var(--curva) var(--t) both}
.anim-datos .datos-rapidos.visible li::before{animation:dato-circulo .45s var(--curva) calc(var(--t) + .22s) both}
.anim-datos .datos-rapidos.visible li::after{animation:dato-tilde .38s cubic-bezier(.65,0,.35,1) calc(var(--t) + .42s) both}

/* 12. Utilidades ---------------------------------------------------------- */
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){:root{--seccion:56px}body{font-size:1.03rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}