/* Respaldos dimensionados: mientras baja la fuente real, el texto ocupa lo mismo. */
@font-face{font-family:'Fredoka respaldo';src:local('Arial');size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Nunito respaldo';src:local('Arial');size-adjust:101%;ascent-override:101%;descent-override:35%;line-gap-override:0%}
/* ===========================================================
   Azul Piscina — hoja de estilo única
   Paleta tomada del logo y del flyer del cliente (azul cobalto + celeste)
   =========================================================== */
:root{
  /* Tipografías redondeadas, del mismo aire que el logo. Auto-hospedadas.
     `size-adjust` en el respaldo evita el salto de maqueta (CLS) mientras carga:
     sin eso la fuente del sistema mide distinto y el texto se reacomoda. */
  --titulo:'Fredoka','Fredoka respaldo',system-ui,sans-serif;
  --texto:'Nunito','Nunito respaldo',system-ui,sans-serif;

  --profundo:#062A5E;      /* azul profundo, fondos oscuros */
  --azul:#0E56C8;          /* azul de marca (logo) */
  --celeste:#2FAEEF;       /* celeste del logo (la ola) */
  --agua:#8FE3F5;          /* agua clara, acentos sobre oscuro */
  --hielo:#F2F7FD;         /* fondo claro */
  --papel:#FFFFFF;
  --tinta:#0B1B33;         /* texto principal */
  --tinta-suave:#4A5B72;   /* texto secundario */
  --linea:#DCE7F5;
  --wa:#0B7A3B;            /* verde WhatsApp oscurecido: 5,44:1 con texto blanco (el oficial da 1,98) */
  --wa-hover:#096330;
  --radio:18px;
  --radio-l:28px;
  --sombra:0 18px 50px -22px rgba(6,42,94,.45);
  --ancho:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.env{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
@media (max-width:640px){ .env{width:min(100% - 1.75rem,var(--ancho))} }

/* ---------- Tipografía ---------- */
h1,h2,h3{margin:0;font-family:var(--titulo);line-height:1.04;letter-spacing:-.018em;font-weight:600}
h1{font-size:clamp(2.6rem,7.4vw,5.1rem)}
h2{font-size:clamp(2rem,4.6vw,3.35rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.02em}
p{margin:0 0 1rem}
.ojo{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--azul)}
.bajada{font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--tinta-suave);max-width:60ch}
h2 + .bajada, h1 + .bajada{margin-top:1.15rem}
.sobre-oscuro .bajada,.sobre-oscuro p{color:rgba(255,255,255,.82)}
.sobre-oscuro .ojo{color:var(--agua)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:1rem;text-decoration:none;
  transition:transform .3s ease-out,box-shadow .3s var(--ease),background .25s;
  will-change:transform;
}
.btn:active{transform:scale(.97)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 14px 30px -14px rgba(11,122,59,.85)}
.btn-wa:hover{background:var(--wa-hover)}
.btn-azul{background:var(--azul);color:#fff;box-shadow:0 14px 30px -14px rgba(14,86,200,.9)}
.btn-azul:hover{background:#0a45a3}
.btn-vidrio{
  background:rgba(255,255,255,.10);color:#fff;backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.38);
}
.btn-vidrio:hover{background:rgba(255,255,255,.2)}
.btn svg{width:20px;height:20px;flex:none}

/* ---------- Cabecera ---------- */
.cab{position:fixed;inset:0 0 auto;z-index:60;padding:.9rem 0;transition:background .35s,box-shadow .35s,padding .35s}
/* Velo superior: el menú es blanco sobre la FOTO del hero, y ahí hay zonas claras.
   Medido: sin este velo el enlace daba 3,89:1 contra el peor píxel (AA pide 4,5). */
.cab::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(4,26,58,.78) 0%,rgba(4,26,58,.42) 55%,transparent 100%);
  transition:opacity .35s
}
.cab.pegada::before{opacity:0}
.cab.pegada{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linea);padding:.55rem 0}
.cab .env{display:flex;align-items:center;gap:1rem}
.marca{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:800;letter-spacing:-.02em;color:#fff;transition:color .35s}
.cab.pegada .marca{color:var(--tinta)}
.marca .gota{width:38px;height:38px;flex:none}
.marca span small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.72;line-height:1.4}
.menu{
  margin-left:auto;display:flex;align-items:center;gap:.35rem;padding:.3rem;border-radius:999px;
  /* Píldora oscura propia: el menú va sobre una FOTO y el contraste no puede
     depender de qué zona de la foto quede detrás. Medido, sin esto dos enlaces
     caían a 3,7:1 contra el peor píxel. */
  border:1px solid rgba(255,255,255,.10)
}
/* 🔴 El nav lleva TAMBIÉN la clase .vidrio, declarada más abajo con la misma
   especificidad (0,1,0), así que le ganaba por orden y dejaba el fondo en
   rgba(255,255,255,.08) — casi transparente sobre la foto. .cab .menu es (0,2,0). */
.cab .menu{background:rgba(4,26,58,.58);backdrop-filter:blur(10px)}
.cab.pegada .menu{background:transparent;backdrop-filter:none}
.cab.pegada .menu{background:transparent;backdrop-filter:none;border-color:transparent}
.menu a{
  padding:.5rem .95rem;border-radius:999px;text-decoration:none;font-size:.93rem;font-weight:600;
  color:#fff;transition:background .25s,color .35s;
}
.cab.pegada .menu a{color:var(--tinta)}
.menu a:hover{background:rgba(255,255,255,.18)}
.cab.pegada .menu a:hover{background:var(--hielo)}
.vidrio{
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);position:relative;overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14);
}
.vidrio::before{
  content:"";position:absolute;inset:0;padding:1.4px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.14) 22%,transparent 45%,transparent 58%,rgba(255,255,255,.14) 80%,rgba(255,255,255,.45));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.cab.pegada .vidrio{background:var(--hielo);box-shadow:none}
.cab.pegada .vidrio::before{opacity:0}
.cab .btn{padding:.7rem 1.25rem;font-size:.93rem}
@media (max-width:900px){
  .menu{display:none}
  .cab .marca span small{display:none}
  .cab .btn-wa span{display:none}          /* sólo el ícono, no revienta la línea */
  .cab .btn-wa{margin-left:auto;padding:.7rem;border-radius:999px}
  .cab .btn-wa svg{width:24px;height:24px}
}
.solo-movil{display:none}
@media (max-width:900px){ .solo-movil{display:inline-flex;margin-left:auto} }

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(100svh,880px);display:flex;align-items:flex-end;padding:9rem 0 3.2rem;overflow:hidden;background:var(--profundo)}
.hero-foto{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}}
.hero::after{
  content:"";position:absolute;inset:0;
  /* dos capas: una vertical que asienta el pie y una lateral que protege el texto.
     El peor píxel del hero es la nieve de la cordillera y cae justo detrás del titular. */
  background:
    linear-gradient(180deg,rgba(6,42,94,.66) 0%,rgba(6,42,94,.52) 24%,rgba(4,26,58,.88) 60%,rgba(4,26,58,.96) 100%),
    linear-gradient(92deg,rgba(3,20,44,.80) 0%,rgba(3,20,44,.62) 38%,rgba(3,20,44,.18) 68%,transparent 88%);
}
@media (max-width:900px){
  .hero::after{background:linear-gradient(180deg,rgba(6,42,94,.72) 0%,rgba(4,26,58,.74) 30%,rgba(4,26,58,.92) 70%,rgba(4,26,58,.97) 100%)}
}
.hero .env{position:relative;z-index:2;color:#fff}
.hero .ojo{color:var(--agua)}
.hero h1{max-width:16ch;text-shadow:0 2px 30px rgba(3,20,45,.45)}
.hero h1 em{font-style:normal;color:var(--agua)}
.hero .bajada{margin-top:1.35rem;color:rgba(255,255,255,.9);max-width:46ch;font-weight:500}
.hero-acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.2)}
@media (max-width:900px){ .hero{padding-bottom:8.2rem} .chips{margin-top:2rem} }
.chip{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.9);padding:.35rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.28)}
.chip b{color:var(--agua)}

/* Titular con máscara pull-up */
.wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.js-on .wm > .w{display:inline-block;transform:translateY(110%) rotate(3deg)}
.js-on .wm.listo > .w{transform:none;transition:transform 1.05s var(--ease)}

/* ---------- Revelado ---------- */
.js-on .rev{opacity:0;transform:translateY(22px)}
.js-on .rev.dentro{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}

/* ---------- Secciones ---------- */
section{padding:clamp(4.2rem,9vw,7.5rem) 0}
.enc{max-width:62ch;margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.enc h2{margin:.7rem 0 1rem}

/* Barra de confianza */
.confianza{background:var(--hielo);padding:0}
.confianza-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea)}
.confianza-grid div{background:var(--hielo);padding:2rem 1.5rem}
.confianza-grid strong{display:block;font-size:1.02rem;letter-spacing:-.02em;margin-bottom:.25rem}
.confianza-grid span{font-size:.9rem;color:var(--tinta-suave)}
@media (max-width:860px){ .confianza-grid{grid-template-columns:repeat(2,1fr)} }

/* Servicios */
.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:980px){ .servicios{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .servicios{grid-template-columns:1fr} }
.tarjeta{
  position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-l);
  padding:2rem 1.75rem 1.9rem;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.tarjeta:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:transparent}
/* Diamond Brite es el diferenciador: se marca sin gritar */
.tarjeta-destacada{background:linear-gradient(165deg,#F6FAFF,#EAF3FE);border-color:#C9DEF7}
.tarjeta-destacada .ico{background:linear-gradient(140deg,#062A5E,var(--azul))}
.tarjeta-destacada li{background:#fff}
.tarjeta h3 sup{font-size:.55em;top:-.6em;position:relative;opacity:.75}
.tarjeta .num{
  position:absolute;top:1.3rem;right:1.5rem;font-size:.8rem;font-weight:800;letter-spacing:.08em;
  color:#1668B8;
}
.tarjeta .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(140deg,var(--azul),var(--celeste));margin-bottom:1.35rem}
.tarjeta .ico svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tarjeta h3{margin-bottom:.55rem}
.tarjeta p{color:var(--tinta-suave);font-size:.97rem;margin:0}
.tarjeta ul{margin:.85rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.tarjeta li{font-size:.8rem;font-weight:600;color:var(--azul);background:var(--hielo);padding:.28rem .7rem;border-radius:999px}

/* Banda full-bleed con foto */
.banda{position:relative;overflow:hidden;background:var(--profundo);color:#fff}
.banda .fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;animation:kenburns 30s ease-in-out infinite alternate}
.banda::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,26,58,.94),rgba(4,26,58,.66) 55%,rgba(6,42,94,.5))}
.banda .env{position:relative;z-index:2}
.banda h2{max-width:18ch}
.banda .btn{margin-top:1.9rem}

/* Proceso */
.proceso{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media (max-width:980px){ .proceso{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .proceso{grid-template-columns:1fr} }
.paso{border-radius:var(--radio-l);overflow:hidden;background:var(--papel);border:1px solid var(--linea)}
.paso .marco{aspect-ratio:4/5;overflow:hidden;background:var(--hielo)}
.paso .marco img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.paso:hover .marco img{transform:scale(1.06)}
.paso .txt{padding:1.35rem 1.4rem 1.6rem}
.paso .n{font-size:.75rem;font-weight:800;letter-spacing:.14em;color:#1668B8}
.paso h3{font-size:1.08rem;margin:.4rem 0 .4rem}
.paso p{font-size:.92rem;color:var(--tinta-suave);margin:0}

/* ---------- Sección dividida (Diamond Brite) ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(1.8rem,5vw,4.5rem)}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.split .foto{border-radius:var(--radio-l);overflow:hidden;box-shadow:var(--sombra);aspect-ratio:16/11}
.split .foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.split .foto:hover img{transform:scale(1.05)}
.marca-producto{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);background:var(--hielo);border:1px solid var(--linea);padding:.45rem .95rem;border-radius:999px;margin-bottom:1.1rem}
.marca-producto sup{font-size:.7em;letter-spacing:0;margin-right:.15em}
.split h2{margin-bottom:1rem}
.beneficios{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1.05rem}
.beneficios li{display:grid;grid-template-columns:26px 1fr;gap:.85rem;align-items:start;font-size:1rem}
.beneficios svg{width:26px;height:26px;stroke:var(--azul);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:.15rem}
.beneficios b{display:block;letter-spacing:-.01em;margin-bottom:.1rem}
.beneficios span{color:var(--tinta-suave);font-size:.94rem;line-height:1.55}

/* ---------- Oferta de temporada ---------- */
.oferta{background:var(--hielo)}
.oferta-caja{background:var(--papel);border-radius:var(--radio-l);border:1px solid var(--linea);box-shadow:var(--sombra);overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr}
@media (max-width:860px){ .oferta-caja{grid-template-columns:1fr} }
.oferta-txt{padding:clamp(2rem,4vw,3.2rem)}
.oferta-sello{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--azul);padding:.42rem .95rem;border-radius:999px;margin-bottom:1.2rem}
.oferta-txt h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:.9rem}
.incluye{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:.75rem}
.incluye li{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem}
.incluye li::before{content:"";flex:none;width:22px;height:22px;margin-top:.2rem;border-radius:999px;background:var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7l3.5 4L12 3'/%3E%3C/svg%3E") center/14px no-repeat}
.oferta-lado{background:linear-gradient(165deg,var(--azul),var(--profundo));color:#fff;padding:clamp(2rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center}
.oferta-lado h3{color:#fff}
.oferta-lado p{color:rgba(255,255,255,.86)}
.oferta-lado .btn{margin-top:1.4rem;justify-content:center}
.oferta-lado .nota{font-size:.82rem;color:rgba(255,255,255,.66);margin:1rem 0 0}

/* ---------- Flota rotulada ---------- */
.flota{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center;margin-top:2.2rem;padding:1rem;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio)}
.flota img{width:132px;height:88px;object-fit:cover;border-radius:12px}
.flota p{margin:0;font-size:.94rem;color:var(--tinta-suave)}
.flota b{color:var(--tinta)}
@media (max-width:520px){ .flota{grid-template-columns:1fr} .flota img{width:100%;height:120px} }

/* Cobertura + local */
.dos > div > h2{margin:.7rem 0 1.1rem}
.dos{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:900px){ .dos{grid-template-columns:1fr} }
.comunas{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0;list-style:none}
.comunas li{font-weight:600;font-size:.95rem;padding:.45rem 1rem;border-radius:999px;background:var(--hielo);border:1px solid var(--linea)}
.ficha{background:var(--profundo);color:#fff;border-radius:var(--radio-l);padding:clamp(1.8rem,3.5vw,2.6rem);position:relative;overflow:hidden}
.ficha::before{content:"";position:absolute;width:320px;height:320px;right:-120px;top:-140px;border-radius:999px;background:radial-gradient(circle,rgba(47,174,239,.5),transparent 68%)}
.ficha > *{position:relative}
.ficha dl{margin:0;display:grid;gap:1.15rem}
.ficha dt{font-size:.73rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--agua);margin-bottom:.15rem}
.ficha dd{margin:0;font-size:1.05rem;font-weight:600}
.ficha dd a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.ficha dd small{display:block;font-weight:400;font-size:.87rem;color:rgba(255,255,255,.7);margin-top:.2rem}
.ficha .btn{margin-top:1.9rem;width:100%;justify-content:center}

/* FAQ */
.faq{max-width:80ch;margin-inline:auto}
.faq details{border-bottom:1px solid var(--linea);padding:1.35rem 0}
.faq summary{
  cursor:pointer;font-weight:700;font-size:1.05rem;letter-spacing:-.01em;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;font-weight:400;color:var(--azul);line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.9rem 0 0;color:var(--tinta-suave);max-width:70ch}

/* Cierre */
.cierre{background:linear-gradient(160deg,#0b47a8,var(--profundo) 68%);color:#fff;text-align:center;position:relative;overflow:hidden}
.fondo-cierre{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.07;mix-blend-mode:soft-light}
.cierre .env{position:relative;z-index:2}
.cierre h2{max-width:20ch;margin:0 auto 1.1rem}
.cierre .bajada{margin:0 auto;color:rgba(255,255,255,.85)}
.cierre .hero-acciones{justify-content:center}

/* Pie */
footer{background:#04182F;color:rgba(255,255,255,.68);padding:3.5rem 0 2.5rem;font-size:.9rem}
footer .env{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
@media (max-width:760px){ footer .env{grid-template-columns:1fr;gap:1.75rem} }
footer h4{margin:0 0 .8rem;color:#fff;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase}
footer a{color:rgba(255,255,255,.78);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:rgba(255,255,255,.5)}

/* WhatsApp flotante — a la IZQUIERDA a propósito: el lanzador del chat
   (.azc-lanzador) vive en right:1.1rem/bottom:1.1rem, y con los dos a la
   derecha el de WhatsApp quedaba montado encima del botón de cotizar. */
.flotante{
  position:fixed;left:1.1rem;bottom:1.1rem;z-index:70;width:58px;height:58px;border-radius:999px;
  background:var(--wa);display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(11,122,59,.7);
  transition:transform .3s var(--ease);
}
.flotante:hover{transform:scale(1.08)}
/* En el hero ya hay dos botones grandes: el flotante entra al empezar a bajar.
   Si el JS no carga, nunca se esconde (queda visible siempre). */
.js-on .flotante{opacity:0;transform:scale(.8);pointer-events:none}
.js-on body.desplazado .flotante{opacity:1;transform:none;pointer-events:auto}
.flotante svg{width:30px;height:30px;fill:#fff}
@media (max-width:900px){ .flotante{width:54px;height:54px;bottom:1rem} }

/* Foco visible (accesibilidad) */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--celeste);outline-offset:3px;border-radius:6px}

/* Sin movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hero-foto,.banda .fondo{animation:none;transform:none}
}

/* ===========================================================
   TIPOS DE PISCINA — la sección que explica y vende
   =========================================================== */
.tipos{background:var(--papel)}
.tipos-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:2.2rem}
.tipo{
  position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-l);
  padding:1.9rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:.85rem;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s
}
.tipo:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:#B7D4F6}
.tipo .duracion{
  align-self:flex-start;font-family:var(--titulo);font-size:.76rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--azul);padding:.4rem .9rem;border-radius:999px
}
.tipo .duracion.destaca{background:var(--profundo)}
.tipo h3{font-size:1.32rem}
.tipo p{margin:0;color:var(--tinta-suave);font-size:.97rem;line-height:1.62}
.tipo ul{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.55rem}
.tipo ul li{position:relative;padding-left:1.55rem;font-size:.94rem;line-height:1.5}
.tipo ul li::before{
  content:"";position:absolute;left:0;top:.46em;width:.62rem;height:.62rem;border-radius:50%;
  background:var(--celeste);box-shadow:0 0 0 3px rgba(47,174,239,.22)
}
.tipo .pie-tipo{margin-top:auto;padding-top:1rem;border-top:1px solid var(--linea);font-size:.9rem}
.tipo .pie-tipo b{color:var(--azul);font-family:var(--titulo);font-weight:600}

/* ===========================================================
   COTIZADOR EN LÍNEA (sección de la página)
   =========================================================== */
.cotizador{background:linear-gradient(180deg,var(--hielo) 0%,#E4EFFB 100%)}
.cot-caja{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-l);
  box-shadow:var(--sombra);padding:clamp(1.6rem,3.5vw,2.9rem);margin-top:2rem;max-width:920px
}
.cot-paso{display:none}
.cot-paso.activo{display:block;animation:cotEntra .45s var(--ease) both}
@keyframes cotEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cot-barra{display:flex;gap:.4rem;margin-bottom:1.8rem}
.cot-barra span{flex:1;height:5px;border-radius:99px;background:var(--linea);transition:background .4s}
.cot-barra span.on{background:var(--azul)}
.cot-titulo{font-family:var(--titulo);font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:600;letter-spacing:-.018em;margin:0 0 .5rem}
.cot-ayuda{color:var(--tinta-suave);margin:0 0 1.5rem;font-size:.98rem}
.cot-ops{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cot-op{
  text-align:left;background:var(--papel);border:2px solid var(--linea);border-radius:var(--radio);
  padding:1rem 1.15rem;cursor:pointer;font:inherit;color:var(--tinta);
  transition:border-color .25s,background .25s,transform .25s var(--ease)
}
.cot-op:hover{border-color:var(--celeste);transform:translateY(-2px)}
.cot-op[aria-pressed="true"],.cot-op.sel{border-color:var(--azul);background:#EAF2FE}
.cot-op b{display:block;font-family:var(--titulo);font-weight:600;font-size:1.02rem;margin-bottom:.15rem}
.cot-op small{color:var(--tinta-suave);font-size:.85rem;line-height:1.45;display:block}
.cot-campos{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cot-campo label{display:block;font-size:.82rem;font-weight:700;color:var(--tinta-suave);margin-bottom:.4rem}
.cot-campo input,.cot-campo select,.cot-campo textarea{
  width:100%;box-sizing:border-box;font:inherit;color:var(--tinta);
  background:var(--papel);border:2px solid var(--linea);border-radius:12px;padding:.75rem .9rem;
  transition:border-color .25s,box-shadow .25s
}
.cot-campo input:focus,.cot-campo select:focus,.cot-campo textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(14,86,200,.16)
}
.cot-nav{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem;align-items:center}
.cot-nav .btn{margin:0}
.cot-atras{background:none;border:none;font:inherit;color:var(--tinta-suave);cursor:pointer;text-decoration:underline;padding:.5rem}
.cot-atras:hover{color:var(--azul)}
.cot-error{color:#B3261E;font-weight:700;font-size:.92rem;margin:.9rem 0 0}

/* Resultado */
.cot-res{background:var(--profundo);color:#fff;border-radius:var(--radio-l);padding:clamp(1.5rem,3vw,2.2rem)}
.cot-res h3{color:#fff;font-size:1.45rem;margin-bottom:1.1rem}
.cot-cifras{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:1.4rem}
.cot-cifra{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:.95rem 1rem}
.cot-cifra dt{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--agua);margin-bottom:.3rem}
.cot-cifra dd{margin:0;font-family:var(--titulo);font-size:1.4rem;font-weight:600;line-height:1.1}
.cot-monto{background:rgba(143,227,245,.14);border:1px solid rgba(143,227,245,.4);border-radius:16px;padding:1.2rem 1.3rem;margin-bottom:1.3rem}
.cot-monto .valor{font-family:var(--titulo);font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:600;color:var(--agua);line-height:1.15}
.cot-monto small{display:block;margin-top:.5rem;color:#D6E9F8;font-size:.87rem;line-height:1.55}
.cot-consent{display:flex;gap:.7rem;align-items:flex-start;margin:1.3rem 0;font-size:.9rem;line-height:1.55;color:#D6E9F8}
.cot-consent input{margin-top:.25rem;width:1.1rem;height:1.1rem;flex-shrink:0;accent-color:var(--celeste)}
.cot-consent a{color:var(--agua)}
.cot-aviso{margin-top:1.1rem;padding:1rem 1.15rem;border-radius:14px;font-size:.93rem;line-height:1.6}
.cot-aviso.bien{background:rgba(143,227,245,.14);border:1px solid rgba(143,227,245,.4);color:#EAF7FD}
.cot-aviso.falla{background:rgba(255,214,160,.14);border:1px solid rgba(255,196,110,.5);color:#FFE9C9}

/* ===========================================================
   CHATBOT
   =========================================================== */
.azc-lanzador{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:70;display:inline-flex;align-items:center;gap:.55rem;
  background:var(--azul);color:#fff;border:none;border-radius:999px;cursor:pointer;
  font-family:var(--titulo);font-weight:600;font-size:1rem;padding:.85rem 1.35rem;
  box-shadow:0 14px 34px -10px rgba(6,42,94,.62);
  transition:transform .35s var(--ease),background .3s
}
.azc-lanzador:hover{background:var(--profundo);transform:translateY(-3px)}
.azc-lanzador:focus-visible{outline:3px solid var(--agua);outline-offset:3px}
.azc-lz-ico{font-size:1.15rem;line-height:1}
body.azc-abierto .azc-lanzador{opacity:0;pointer-events:none}

.azc-caja{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:71;width:min(410px,calc(100vw - 2.2rem));
  max-height:min(640px,calc(100dvh - 2.2rem));display:flex;flex-direction:column;
  background:var(--papel);border-radius:22px;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(6,42,94,.55);border:1px solid var(--linea);
  animation:azcEntra .4s var(--ease) both
}
@keyframes azcEntra{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
/* 🔴 display:flex le GANA al atributo hidden del HTML: sin esta línea el panel
   del chat se ve desde que carga la página. El atributo por sí solo NO basta
   cuando la regla propia declara un display. */
.azc-caja[hidden]{display:none}
.azc-cab{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.2rem;background:var(--profundo);color:#fff}
.azc-tit strong{display:block;font-family:var(--titulo);font-weight:600;font-size:1.05rem}
.azc-sub{display:block;font-size:.78rem;color:#C7DEF5;margin-top:.1rem}
.azc-x{background:rgba(255,255,255,.14);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer}
.azc-x:hover{background:rgba(255,255,255,.26)}
.azc-hilo{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--hielo)}
.azc-msg{max-width:88%;padding:.75rem .95rem;border-radius:16px;font-size:.94rem;line-height:1.55;animation:azcMsg .3s var(--ease) both}
@keyframes azcMsg{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.azc-bot{align-self:flex-start;background:var(--papel);border:1px solid var(--linea);color:var(--tinta);border-bottom-left-radius:5px}
.azc-yo{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:5px}
.azc-cot{
  align-self:stretch;background:var(--profundo);color:#EAF7FD;border-radius:16px;padding:1rem 1.1rem;
  font-size:.87rem;line-height:1.65;white-space:pre-wrap
}
.azc-ops{display:flex;flex-wrap:wrap;gap:.5rem;align-self:stretch}
.azc-op{
  font:inherit;font-size:.89rem;background:var(--papel);color:var(--azul);border:2px solid #B7D4F6;
  border-radius:999px;padding:.55rem 1rem;cursor:pointer;text-decoration:none;display:inline-block;
  transition:background .22s,border-color .22s,color .22s
}
.azc-op:hover:not(:disabled){background:#EAF2FE;border-color:var(--azul)}
.azc-op:disabled{opacity:.45;cursor:default}
.azc-op.sel{background:var(--azul);color:#fff;border-color:var(--azul);opacity:1}
.azc-listo{background:var(--azul);color:#fff;border-color:var(--azul);font-weight:700}
.azc-wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.azc-wa:hover{background:var(--wa-hover);border-color:var(--wa-hover);color:#fff}
.azc-urg{box-shadow:0 0 0 4px rgba(11,122,59,.22)}
.azc-consent{align-self:stretch;background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:1rem}
.azc-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;line-height:1.55;color:var(--tinta-suave);cursor:pointer}
.azc-check input{margin-top:.2rem;width:1.05rem;height:1.05rem;flex-shrink:0;accent-color:var(--azul)}
.azc-check a{color:var(--azul)}
.azc-enviar{width:100%;margin-top:.9rem}
.azc-pie{padding:.85rem 1rem;background:var(--papel);border-top:1px solid var(--linea)}
.azc-form{display:flex;gap:.5rem}
.azc-in{flex:1;font:inherit;border:2px solid var(--linea);border-radius:999px;padding:.65rem 1rem;color:var(--tinta);background:var(--papel)}
.azc-in:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(14,86,200,.14)}
.azc-send{font:inherit;font-weight:700;background:var(--azul);color:#fff;border:none;border-radius:999px;padding:.65rem 1.25rem;cursor:pointer}
.azc-send:hover:not(:disabled){background:var(--profundo)}
.azc-send:disabled{opacity:.45;cursor:not-allowed}

@media (max-width:520px){
  .azc-caja{right:.6rem;left:.6rem;bottom:.6rem;width:auto;max-height:calc(100dvh - 1.2rem)}
  .azc-lanzador{right:.7rem;bottom:.7rem}
  .azc-lz-txt{display:none}
  .azc-lanzador{padding:.95rem;font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .azc-caja,.azc-msg,.cot-paso.activo{animation:none}
  .tipo:hover,.cot-op:hover,.azc-lanzador:hover{transform:none}
}

/* ===========================================================
   PÁGINAS DE SERVICIO
   =========================================================== */
.art{padding:clamp(6.5rem,12vw,9rem) 0 clamp(3rem,6vw,5rem);background:var(--papel)}
.miga{
  font-family:inherit;font-size:.82rem;color:var(--tinta-suave);margin:0 0 1.6rem;
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center
}
.miga a{color:var(--azul);text-decoration:none;font-weight:700}
.miga a:hover{text-decoration:underline}
.miga span[aria-hidden]{opacity:.45}
.art h1{font-size:clamp(2.1rem,5vw,3.3rem);margin-bottom:1rem}
.art .entrada{
  font-size:clamp(1.06rem,1.9vw,1.24rem);color:var(--tinta-suave);max-width:62ch;
  line-height:1.65;margin:0 0 2.4rem
}
.art-cuerpo{max-width:70ch}
.art-cuerpo h2{font-size:clamp(1.4rem,2.9vw,1.95rem);margin:2.8rem 0 .9rem}
.art-cuerpo h3{font-size:1.1rem;margin:2rem 0 .6rem}
.art-cuerpo p{margin:0 0 1.05rem;line-height:1.72;color:var(--tinta-suave)}
.art-cuerpo p strong{color:var(--tinta)}
.art-cuerpo>ul{list-style:none;margin:1.1rem 0 1.6rem;padding:0;display:grid;gap:.6rem}
.art-cuerpo>ul li{
  position:relative;padding-left:1.6rem;line-height:1.65;color:var(--tinta-suave)
}
.art-cuerpo>ul li::before{
  content:"";position:absolute;left:.1rem;top:.62em;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--celeste);box-shadow:0 0 0 3px rgba(47,174,239,.2)
}
.art-cuerpo>ul li b{color:var(--tinta)}

/* Pasos del trabajo: es una secuencia real, por eso van numerados */
.pasos{list-style:none;counter-reset:pz;margin:1.3rem 0 1.8rem;padding:0;display:grid;gap:.2rem}
.pasos li{
  counter-increment:pz;position:relative;padding:.85rem 0 .85rem 3rem;
  border-bottom:1px solid var(--linea);line-height:1.6
}
.pasos li:first-child{border-top:1px solid var(--linea)}
.pasos li::before{
  content:counter(pz,decimal-leading-zero);position:absolute;left:0;top:.95rem;
  font-family:ui-monospace,Menlo,monospace;font-size:.76rem;font-weight:700;color:var(--azul)
}
.pasos li b{display:block;font-family:var(--titulo);font-weight:600;font-size:1.02rem;color:var(--tinta)}
.pasos li span{color:var(--tinta-suave);font-size:.94rem}

/* Ficha de datos duros */
.ficha-serv{
  margin:2rem 0;border:1px solid var(--linea);border-radius:var(--radio-l);overflow:hidden;
  display:grid;gap:1px;background:var(--linea);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))
}
.ficha-serv div{background:var(--papel);padding:1.15rem 1.25rem}
.ficha-serv dt{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);margin-bottom:.35rem
}
.ficha-serv dd{
  margin:0;font-family:var(--titulo);font-weight:600;font-size:1.22rem;line-height:1.2;color:var(--azul)
}
.ficha-serv dd small{display:block;font-family:var(--texto);font-weight:400;font-size:.82rem;color:var(--tinta-suave);margin-top:.3rem;line-height:1.5}

.materiales{
  margin:1.4rem 0 2rem;padding:1.3rem 1.4rem;background:var(--hielo);
  border-radius:var(--radio);border:1px solid var(--linea)
}
.materiales h3{margin:0 0 .7rem;font-size:.95rem}
.materiales ul{
  list-style:none;margin:0;padding:0;columns:2;column-gap:1.8rem;font-size:.9rem;
  color:var(--tinta-suave);line-height:1.85
}
@media (max-width:560px){.materiales ul{columns:1}}

.cta-serv{
  margin:2.6rem 0 0;padding:1.7rem 1.8rem;border-radius:var(--radio-l);
  background:var(--profundo);color:#fff
}
.cta-serv h2{color:#fff;margin:0 0 .6rem;font-size:1.4rem}
.cta-serv p{color:#D6E9F8;margin:0 0 1.3rem;max-width:52ch}
.cta-serv .acciones{display:flex;flex-wrap:wrap;gap:.7rem}

.otros-serv{margin-top:3.2rem;padding-top:2rem;border-top:1px solid var(--linea)}
.otros-serv h2{font-size:1.15rem;margin:0 0 1.1rem}
.otros-serv ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.otros-serv a{
  display:block;padding:1rem 1.15rem;border:1px solid var(--linea);border-radius:var(--radio);
  text-decoration:none;color:var(--tinta);transition:border-color .25s,transform .25s var(--ease)
}
.otros-serv a:hover{border-color:var(--azul);transform:translateY(-2px)}
.otros-serv a b{display:block;font-family:var(--titulo);font-weight:600;margin-bottom:.15rem}
.otros-serv a span{font-size:.88rem;color:var(--tinta-suave);line-height:1.5}

/* Enlace de las tarjetas a su página de servicio */
.mas{
  display:inline-block;margin-top:.9rem;font-family:var(--titulo);font-weight:600;font-size:.92rem;
  color:var(--azul);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .25s
}
.mas:hover{border-bottom-color:var(--azul)}
.pie-tipo .mas{margin-top:0;font-size:.88rem}