@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap;font-style:normal}

:root{
  --azul-900:#0C2E5C; --azul-800:#123F79; --azul-700:#1B5299; --azul:#2A6FC4;
  --azul-400:#74A8E3; --azul-200:#C6DDF6; --azul-100:#E6F0FC; --azul-50:#F4F8FE;
  --rojo:#C0504A; --rojo-50:#FBF1F0; --ambar:#E0A03C; --urgencia:#C4443A;
  --tinta:#12212F; --gris:#56687C; --gris-claro:#8798A8; --linea:#E4EAF0;
  --nieve:#FFFFFF; --hueso:#F7F9FB;
  --sombra-s:0 1px 2px rgba(18,33,47,.06),0 2px 8px rgba(18,33,47,.05);
  --sombra-m:0 2px 6px rgba(18,33,47,.06),0 12px 28px rgba(18,33,47,.08);
  --sombra-l:0 4px 12px rgba(18,33,47,.07),0 24px 60px rgba(18,33,47,.12);
  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px;
  --ancho:1180px; --paso:clamp(3.5rem,7vw,7rem);
  --serif:'Fraunces',Georgia,serif; --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--sans);color:var(--tinta);background:var(--nieve);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0;
  font-variation-settings:'SOFT' 40,'WONK' 0}
p{margin:0}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:4px}

.env{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.seccion{padding-block:var(--paso)}
.pila{display:flex;flex-direction:column}
/* doble clase a propósito: gana a los margin:0 de listas y tarjetas declarados más abajo */
.pila.pila>*+*{margin-top:var(--e,1rem)}

/* ---------- tipos ---------- */
.display{font-size:clamp(2.4rem,1.5rem + 4.2vw,4.4rem)}
.titulo{font-size:clamp(1.9rem,1.35rem + 2.4vw,3rem)}
.subtitulo{font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem)}
.entradilla{font-size:clamp(1.075rem,1rem + .45vw,1.3rem);color:var(--gris);line-height:1.6}
.antetitulo{font-family:var(--sans);font-size:.775rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin:0}
.apunte{font-size:.875rem;color:var(--gris-claro);line-height:1.55}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--sans);
  font-weight:700;font-size:1rem;padding:.95rem 1.6rem;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s,color .18s;
  white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--principal{background:var(--azul);color:#fff;box-shadow:0 4px 14px rgba(42,111,196,.32)}
.btn--principal:hover{background:var(--azul-700);box-shadow:0 8px 26px rgba(42,111,196,.4)}
.btn--fantasma{background:#fff;color:var(--azul-800);border-color:var(--linea);box-shadow:var(--sombra-s)}
.btn--fantasma:hover{border-color:var(--azul-400);color:var(--azul)}
.btn--urgencia{background:var(--urgencia);color:#fff;box-shadow:0 4px 14px rgba(196,68,58,.3)}
.btn--urgencia:hover{background:#A93A31}
.btn--claro{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--claro:hover{background:rgba(255,255,255,.26)}
.btn--grande{font-size:1.075rem;padding:1.15rem 2.1rem}
.btn svg{flex:none}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.cabecera[data-fija="si"]{border-bottom-color:var(--linea);box-shadow:0 2px 14px rgba(18,33,47,.05)}
.cabecera__caja{display:flex;align-items:center;gap:1.25rem;padding-block:.85rem}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.marca img{width:74px}
.marca__txt{display:flex;flex-direction:column;line-height:1.15}
.marca__nom{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--azul-900);letter-spacing:-.01em}
.marca__sub{font-size:.7rem;color:var(--gris-claro);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.nav{display:flex;gap:.35rem;margin-left:auto}
.nav a{text-decoration:none;font-size:.94rem;font-weight:600;color:var(--gris);padding:.55rem .8rem;border-radius:99px;transition:color .18s,background .18s}
.nav a:hover{color:var(--azul);background:var(--azul-50)}
.cabecera__acc{display:flex;align-items:center;gap:.6rem;flex:none}
.tel-cab{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--azul-800);text-decoration:none;font-size:.95rem;padding:.5rem .7rem;border-radius:99px}
.tel-cab:hover{background:var(--azul-50)}
.hamburguesa{display:none;background:#fff;border:1.5px solid var(--linea);border-radius:12px;width:44px;height:44px;
  align-items:center;justify-content:center;cursor:pointer;color:var(--azul-800)}
@media (max-width:1000px){
  .nav{display:none}.hamburguesa{display:inline-flex}.tel-cab span{display:none}
  .nav[data-abierto="si"]{display:flex;position:absolute;inset-inline:1rem;top:calc(100% + .5rem);flex-direction:column;
    background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);padding:.6rem;box-shadow:var(--sombra-l);gap:.15rem}
  .nav[data-abierto="si"] a{padding:.85rem 1rem}
}
@media (max-width:620px){
  /* en el móvil el botón de cita ya lo da la barra flotante de abajo */
  .cabecera__acc .btn--principal{display:none}
  .marca__sub{display:none}.marca img{width:60px}
  .marca__nom{font-size:.95rem}
  .cabecera__caja{gap:.6rem}
}

/* ---------- aviso de demo ---------- */
.demo-cinta{background:linear-gradient(90deg,var(--azul-900),var(--azul-700));color:#fff;font-size:.8rem;
  padding:.5rem 1rem;text-align:center;font-weight:600;letter-spacing:.01em}
.demo-cinta strong{font-weight:800}
.demo-cinta a{color:#fff;text-underline-offset:3px}

/* ---------- portada ---------- */
.portada{position:relative;overflow:hidden;background:var(--azul-900);isolation:isolate}
.portada__fondo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.portada__fondo img,.portada__fondo video{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 58%}
.portada::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,32,64,.86) 0%,rgba(10,38,74,.78) 45%,rgba(12,46,92,.92) 100%)}
.portada__caja{padding-block:clamp(4rem,9vw,7.5rem) clamp(3.5rem,7vw,6rem);color:#fff;max-width:47rem}
.portada h1{color:#fff;text-wrap:balance}
.portada .entradilla{color:rgba(255,255,255,.86);max-width:36rem}
.portada__acc{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.medalla{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);color:#fff;padding:.45rem 1rem;border-radius:999px;
  font-size:.85rem;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:fit-content}
.medalla__pto{width:7px;height:7px;border-radius:50%;background:#6EE7A8;box-shadow:0 0 0 4px rgba(110,231,168,.22)}
.portada__pie{display:flex;flex-wrap:wrap;gap:1.75rem;margin-top:2.75rem;padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.18)}
.dato{color:#fff}
.dato__n{font-family:var(--serif);font-size:1.85rem;font-weight:600;line-height:1;display:block}
.dato__t{font-size:.8rem;color:rgba(255,255,255,.7);letter-spacing:.04em;margin-top:.3rem;display:block}
.estrellas{color:#F5C451;letter-spacing:.06em}

/* ---------- barra urgencias ---------- */
.urg-barra{background:var(--urgencia);color:#fff}
.urg-barra__caja{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;padding-block:.85rem;font-weight:600;font-size:.95rem}
.urg-barra a{color:#fff;font-weight:800;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.5)}
.urg-barra a:hover{border-color:#fff}

/* ---------- rejillas ---------- */
.rejilla{display:grid;gap:1.5rem}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.duo{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:920px){.duo{grid-template-columns:1fr 1fr}.duo--ancho-izq{grid-template-columns:1.15fr .85fr}}

/* ---------- tarjetas ---------- */
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:1.75rem;
  box-shadow:var(--sombra-s);transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s;position:relative}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-m);border-color:var(--azul-200)}
.tarjeta__icono{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:var(--azul-100);color:var(--azul-700);margin-bottom:1.1rem}
.tarjeta h3{font-size:1.22rem;margin-bottom:.5rem}
.tarjeta p{color:var(--gris);font-size:.96rem}
.tarjeta--porconfirmar{background:repeating-linear-gradient(135deg,#FCFDFE,#FCFDFE 12px,#F6F8FB 12px,#F6F8FB 24px);
  border-style:dashed;border-color:#D5DEE8}
.tarjeta--porconfirmar:hover{transform:none;box-shadow:var(--sombra-s);border-color:#C3D0DE}
.tarjeta--porconfirmar .tarjeta__icono{background:#EDF1F6;color:var(--gris-claro)}
.etiqueta{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:.28rem .6rem;border-radius:99px;background:var(--azul-100);color:var(--azul-700);
  width:fit-content;align-self:flex-start}
.etiqueta--gris{background:#EDF1F6;color:var(--gris)}
.etiqueta--verde{background:#E3F6EC;color:#1B7A4B}
.tarjeta__et{position:absolute;top:1.1rem;right:1.1rem}

/* ---------- confianza ---------- */
.confianza{background:var(--azul-50);border-block:1px solid var(--linea)}
.confianza__rejilla{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));text-align:center}
.confianza__it{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);padding:1.5rem 1rem;box-shadow:var(--sombra-s)}
.confianza__n{font-family:var(--serif);font-size:2.1rem;font-weight:600;color:var(--azul-800);line-height:1;display:block}
.confianza__t{font-size:.86rem;color:var(--gris);margin-top:.45rem;display:block}

/* ---------- peluquería / medios ---------- */
.medio{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sombra-l);background:var(--azul-100);position:relative}
.medio video,.medio img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.medio__pie{position:absolute;left:0;right:0;bottom:0;padding:1.5rem;color:#fff;font-size:.85rem;
  background:linear-gradient(180deg,transparent,rgba(9,28,54,.82))}
.marco-foto{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sombra-l);position:relative}
.marco-foto img{width:100%;object-fit:cover}
.lista-check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.9rem}
.lista-check li{display:flex;gap:.8rem;align-items:flex-start;color:var(--gris)}
.lista-check svg{flex:none;margin-top:.2rem;color:var(--azul)}
.lista-check b{color:var(--tinta);font-weight:700}

/* ---------- cita ---------- */
.cita{background:linear-gradient(165deg,var(--azul-900) 0%,var(--azul-700) 55%,var(--azul) 100%);color:#fff;position:relative;overflow:hidden}
.cita::before{content:'';position:absolute;width:44rem;height:44rem;border-radius:50%;right:-16rem;top:-18rem;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 62%)}
.cita h2{color:#fff}
.cita .entradilla{color:rgba(255,255,255,.82)}
.reserva{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sombra-l);padding:clamp(1.5rem,3.5vw,2.5rem);color:var(--tinta);position:relative}
.pasos{display:flex;gap:.5rem;margin-bottom:1.75rem}
.paso-punto{flex:1;height:5px;border-radius:99px;background:var(--linea);transition:background .3s}
.paso-punto[data-hecho="si"]{background:var(--azul)}
.paso{display:none}
.paso[data-activo="si"]{display:block;animation:entra .32s cubic-bezier(.2,.7,.3,1)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.paso__t{font-size:1.3rem;margin-bottom:.35rem}
.paso__d{color:var(--gris);font-size:.93rem;margin-bottom:1.4rem}
.opciones{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.opcion{position:relative}
.opcion input{position:absolute;opacity:0;width:0;height:0}
.opcion label{display:flex;align-items:center;gap:.75rem;border:1.5px solid var(--linea);border-radius:14px;
  padding:.95rem 1.1rem;cursor:pointer;font-weight:600;font-size:.95rem;transition:border-color .18s,background .18s,transform .18s;background:#fff}
.opcion label:hover{border-color:var(--azul-400);transform:translateY(-1px)}
.opcion input:checked+label{border-color:var(--azul);background:var(--azul-50);box-shadow:0 0 0 3px rgba(42,111,196,.12)}
.opcion input:focus-visible+label{outline:3px solid var(--azul);outline-offset:2px}
.opcion__ic{width:34px;height:34px;border-radius:10px;background:var(--azul-100);color:var(--azul-700);display:grid;place-items:center;flex:none}
.franjas{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr))}
.franja label{justify-content:center;padding:.8rem .6rem}
.campo{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.campo label{font-size:.86rem;font-weight:700;color:var(--tinta)}
.campo input,.campo textarea,.campo select{font-family:inherit;font-size:1rem;padding:.85rem 1rem;border:1.5px solid var(--linea);
  border-radius:12px;background:#fff;color:var(--tinta);transition:border-color .18s,box-shadow .18s;width:100%}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(42,111,196,.14)}
.dos-campos{display:grid;gap:0 1rem;grid-template-columns:1fr}
@media(min-width:560px){.dos-campos{grid-template-columns:1fr 1fr}}
.acciones-paso{display:flex;gap:.75rem;justify-content:space-between;margin-top:1.5rem;flex-wrap:wrap}
.resumen{background:var(--azul-50);border:1px solid var(--azul-200);border-radius:14px;padding:1.1rem 1.25rem;margin-bottom:1.25rem}
.resumen dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;font-size:.92rem}
.resumen dt{color:var(--gris);font-weight:600}
.resumen dd{margin:0;font-weight:700;text-align:right}
.privacidad{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--gris);
  background:var(--hueso);border:1px solid var(--linea);border-radius:12px;padding:.9rem 1rem}
.privacidad input{margin-top:.2rem;flex:none;width:18px;height:18px;accent-color:var(--azul)}
.exito{text-align:center;padding:1rem 0}
.exito__ic{width:72px;height:72px;border-radius:50%;background:#E3F6EC;color:#1B7A4B;display:grid;place-items:center;margin:0 auto 1.25rem;
  animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- opiniones ---------- */
.op-nota{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;background:#fff;border:1px solid var(--linea);
  border-radius:var(--r-l);padding:1.75rem;box-shadow:var(--sombra-s)}
.op-nota__n{font-family:var(--serif);font-size:3.6rem;font-weight:600;color:var(--azul-800);line-height:1}
.barras{display:flex;flex-direction:column;gap:.45rem;flex:1;min-width:14rem}
.barra{display:flex;align-items:center;gap:.7rem;font-size:.82rem;color:var(--gris)}
.barra__pista{display:block;flex:1;height:8px;border-radius:99px;background:var(--azul-100);overflow:hidden}
.barra__val{display:block;height:100%;border-radius:99px;background:var(--azul);width:var(--w,0)}
/* crece desde cero con animación pura: si no corre, el ancho real ya es el bueno */
/* SIN ANIMACIÓN, a propósito. Animar el ancho de estas barras rompió el dato
   tres veces (se quedaban a 0 %, dando a entender 0 opiniones de cinco
   estrellas). En una página cuyo argumento es la reputación, el número
   correcto vale más que el efecto. */
.tema{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);padding:1.35rem;box-shadow:var(--sombra-s)}
.tema h4{font-size:1.05rem;margin-bottom:.4rem;color:var(--azul-900)}
.tema p{font-size:.92rem;color:var(--gris)}

/* ---------- horario / contacto ---------- */
.horario{list-style:none;padding:0;margin:0;border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;background:#fff}
.horario li{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;font-size:.95rem}
.horario li+li{border-top:1px solid var(--linea)}
.horario li[data-hoy="si"]{background:var(--azul-50);font-weight:700;color:var(--azul-800)}
.horario span:first-child{color:var(--gris)}
.horario li[data-hoy="si"] span{color:var(--azul-800)}
.mapa{border:0;width:100%;aspect-ratio:4/3;border-radius:var(--r-l);box-shadow:var(--sombra-m);display:block}
.contacto-lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.contacto-lista li{display:flex;gap:.9rem;align-items:flex-start}
.contacto-lista svg{flex:none;color:var(--azul);margin-top:.15rem}
.contacto-lista a{font-weight:700;text-decoration:none;color:var(--azul-800)}
.contacto-lista a:hover{text-decoration:underline}

/* ---------- pie ---------- */
.pie{background:var(--azul-900);color:rgba(255,255,255,.7);padding-block:clamp(3rem,6vw,4.5rem) 2rem;margin-top:0}
.pie__rejilla{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.pie h4{color:#fff;font-family:var(--sans);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1rem;font-weight:800}
.pie a{color:rgba(255,255,255,.72);text-decoration:none}
.pie a:hover{color:#fff}
.pie ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;font-size:.94rem}
.pie__marca{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.pie__marca img{width:80px}
.pie__legal{margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-size:.82rem}

/* ---------- animación de entrada ---------- */
@media (prefers-reduced-motion:no-preference){
  .revela{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
  .revela[data-visto="si"]{opacity:1;transform:none}
}

/* ---------- botón flotante ---------- */
.fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:70;display:none}
@media(max-width:760px){.fab{display:flex;gap:.6rem}}
.fab .btn{box-shadow:var(--sombra-l)}

/* ---------- propuesta ---------- */
.planes{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));align-items:start}
.plan{background:#fff;border:1.5px solid var(--linea);border-radius:var(--r-l);padding:1.9rem;box-shadow:var(--sombra-s);
  display:flex;flex-direction:column;gap:1.1rem;position:relative;transition:transform .22s,box-shadow .22s,border-color .22s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sombra-m)}
.plan--destacado{border-color:var(--azul);box-shadow:var(--sombra-m);border-width:2px}
.plan__cinta{position:absolute;top:-.8rem;left:1.9rem;background:var(--azul);color:#fff;font-size:.7rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:.35rem .8rem;border-radius:99px;box-shadow:0 4px 12px rgba(42,111,196,.3)}
.plan h3{font-size:1.35rem}
.plan__precio{display:flex;align-items:baseline;gap:.4rem}
.plan__n{font-family:var(--serif);font-size:2.9rem;font-weight:600;color:var(--azul-800);line-height:1}
.plan__iva{font-size:.85rem;color:var(--gris-claro)}
.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem;font-size:.94rem;color:var(--gris)}
.plan li{display:flex;gap:.6rem;align-items:flex-start}
.plan li svg{flex:none;margin-top:.2rem;color:var(--azul)}
.plan li[data-no] svg{color:var(--gris-claro);opacity:.5}
.plan li[data-no]{color:var(--gris-claro)}
.plan .btn{margin-top:auto}
.suma{display:grid;gap:.6rem;border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;background:#fff}
.suma__f{display:flex;justify-content:space-between;gap:1rem;padding:.95rem 1.25rem;font-size:.95rem}
.suma__f+.suma__f{border-top:1px solid var(--linea)}
.suma__f b{color:var(--azul-800)}
.suma__f--base{background:var(--azul-50);font-weight:700}

/* ============================================================
   EL TRAZO — la idea que sostiene el diseño.
   Su rótulo es un gato y un perro dibujados de un solo trazo.
   La página entera se dibuja igual: líneas que aparecen trazándose.
   ============================================================ */

/* --- marca que se dibuja sola ---
   Sólo se oculta si el JS ha marcado <html class="anim">.
   Sin JS, o si algo falla, todo queda visible: nunca desaparece contenido. */
.anim .trazo path,.anim .trazo ellipse,.anim .trazo circle{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:dibujar 1.5s cubic-bezier(.55,.1,.25,1) forwards;
}
.anim .trazo [data-relleno]{animation:aparecer .5s ease forwards;opacity:0}
@keyframes dibujar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1}}

/* filigrana de portada: el gato y el perro trazándose en grande */
.filigrana{position:absolute;right:-1.5rem;top:46%;transform:translateY(-50%);
  width:min(38rem,44vw);opacity:.3;pointer-events:none;z-index:-1}
.filigrana .lin{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.filigrana .sol{fill:#fff}
@media (max-width:1100px){.filigrana{display:none}}

/* --- secuencia de entrada de la portada --- */
@media (prefers-reduced-motion:no-preference){
  .anim .portada__caja>*{opacity:0;transform:translateY(18px);
    animation:subir .85s cubic-bezier(.16,.84,.32,1) forwards}
  .anim .portada__caja>*:nth-child(1){animation-delay:.1s}
  .anim .portada__caja>*:nth-child(2){animation-delay:.22s}
  .anim .portada__caja>*:nth-child(3){animation-delay:.34s}
  .anim .portada__caja>*:nth-child(4){animation-delay:.46s}
  .anim .portada__caja>*:nth-child(5){animation-delay:.58s}
}
@keyframes subir{to{opacity:1;transform:none}}

/* --- el hilo conductor: una línea que se dibuja al bajar --- */
.hilo{display:block;width:250px;max-width:70%;height:62px;overflow:visible;margin-inline:auto}
.hilo path{fill:none;stroke:var(--azul-200);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.4,.1,.2,1)}
.hilo[data-visto="si"] path{stroke-dashoffset:0}
.hilo circle{fill:var(--azul);opacity:0;transition:opacity .5s ease .9s}
.hilo[data-visto="si"] circle{opacity:1}

/* --- cifras que suben --- */
.cuenta{font-variant-numeric:tabular-nums}

/* --- navegación: subrayado trazado --- */
.nav a{position:relative}
.nav a::after{content:'';position:absolute;left:.8rem;right:.8rem;bottom:.35rem;height:1.5px;
  background:var(--azul);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.16,.84,.32,1)}
.nav a:hover::after{transform:scaleX(1)}

/* --- iconos de la marca en el formulario --- */
.opcion__ic svg{width:20px;height:20px}
.opcion__ic--animal{background:var(--rojo-50);color:var(--rojo)}

/* --- portada con parallax suave --- */
.portada__fondo{will-change:transform}

/* --- tarjetas: el borde se ilumina desde el cursor --- */
.tarjeta{--x:50%;--y:0%}
.tarjeta::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(24rem 24rem at var(--x) var(--y),rgba(42,111,196,.07),transparent 62%);
  opacity:0;transition:opacity .35s}
.tarjeta:hover::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .trazo path,.trazo ellipse,.trazo circle,.trazo [data-relleno],.portada__caja>*{animation:none;opacity:1;
    stroke-dashoffset:0;transform:none}
  .hilo path{stroke-dashoffset:0}.hilo circle{opacity:1}
}

/* ============================================================
   CAPA DE MOVIMIENTO (técnicas de la librería MotionSites,
   adaptadas a esta clínica: cortina de persiana, titular por
   palabras, foco que "abre" la clínica y vídeo sin fotograma negro)
   ============================================================ */

/* --- cortina de entrada: como subir la persiana del local --- */
.persiana{position:fixed;inset:0;z-index:9999;pointer-events:none;display:grid;
  grid-template-rows:1fr 1fr;overflow:hidden;visibility:hidden}
.anim .persiana{visibility:visible;animation:persianaFin .3s ease forwards;animation-delay:1.15s}
.persiana__fila{display:flex;width:100%;height:100%}
.persiana__hoja{flex:1;background:var(--azul-900)}
.anim .persiana__fila--arriba .persiana__hoja{animation:persianaSube .95s cubic-bezier(.86,0,.34,1) forwards}
.anim .persiana__fila--abajo .persiana__hoja{animation:persianaBaja .95s cubic-bezier(.86,0,.34,1) forwards}
.persiana__hoja:nth-child(2){animation-delay:.05s}
.persiana__hoja:nth-child(3){animation-delay:.1s}
.persiana__hoja:nth-child(4){animation-delay:.15s}
.persiana__hoja:nth-child(5){animation-delay:.2s}
@keyframes persianaSube{to{transform:translateY(-101%)}}
@keyframes persianaBaja{to{transform:translateY(101%)}}
@keyframes persianaFin{to{opacity:0;visibility:hidden}}

/* --- titular palabra a palabra --- */
.palabra{display:inline-block;margin-right:.26em}
.anim .palabra{opacity:0;filter:blur(9px);transform:translateY(12px);
  animation:palabraEntra .55s cubic-bezier(.16,.84,.32,1) forwards}
@keyframes palabraEntra{to{opacity:1;filter:blur(0);transform:none}}

/* --- medida por contenedor: el tipo escala con el bloque, no con la ventana --- */
.portada__caja{container-type:inline-size}
.portada h1{font-size:max(2.2rem,6.4cqw)}

/* --- vídeo que entra sin fotograma negro --- */
.portada__fondo video{opacity:0;transition:opacity .9s ease}
.portada__fondo video.listo{opacity:1}

/* --- el foco que abre la clínica --- */
.foco{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sombra-l);
  cursor:crosshair;isolation:isolate}
.foco img{width:100%;display:block}
.foco__abierta{position:absolute;inset:0;z-index:2;
  -webkit-mask-image:radial-gradient(circle 0px at 50% 50%,#000 60%,transparent 100%);
  mask-image:radial-gradient(circle 0px at 50% 50%,#000 60%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.foco__abierta img{height:100%;object-fit:cover}
.foco__pista{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:3;
  background:rgba(9,28,54,.72);color:#fff;font-size:.8rem;font-weight:600;padding:.5rem 1rem;
  border-radius:99px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .35s;white-space:nowrap}
.foco[data-tocado="si"] .foco__pista{opacity:0}

/* --- reseñas reales de Google --- */
.resenas{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.resena{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:1.5rem;
  box-shadow:var(--sombra-s);display:flex;flex-direction:column;gap:.9rem;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.resena:hover{transform:translateY(-4px);box-shadow:var(--sombra-m)}
.resena__cab{display:flex;align-items:center;gap:.8rem}
.resena__ini{width:42px;height:42px;border-radius:50%;background:var(--azul-100);color:var(--azul-700);
  display:grid;place-items:center;font-weight:800;font-size:1rem;flex:none}
.resena__quien{display:flex;flex-direction:column;line-height:1.25}
.resena__nom{font-weight:700;font-size:.95rem}
.resena__meta{font-size:.78rem;color:var(--gris-claro)}
.resena p{font-size:.95rem;color:var(--gris);line-height:1.6}
.resena__g{margin-top:auto;display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--gris-claro);
  padding-top:.6rem;border-top:1px solid var(--linea)}

/* --- panel de comparación en cristal (propuesta) --- */
.comparativa{position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,var(--azul-900),var(--azul-700));padding:clamp(1.5rem,3.5vw,2.75rem);color:#fff}
.comparativa h3{color:#fff}
.tabla-c{display:grid;grid-template-columns:1fr repeat(4,minmax(4.5rem,1fr));gap:0;position:relative;
  margin-top:1.5rem;font-size:.9rem;min-width:34rem}
.tabla-c__envoltorio{overflow-x:auto;margin-inline:-.5rem;padding-inline:.5rem}
.tabla-c span{display:flex;align-items:center;justify-content:center;padding:.85rem .5rem;text-align:center;
  border-bottom:1px solid rgba(255,255,255,.14)}
.tabla-c span:nth-child(5n+1){justify-content:flex-start;text-align:left;color:rgba(255,255,255,.88);font-weight:600}
.tabla-c .cab{font-weight:700;font-size:.82rem;letter-spacing:.02em;border-bottom-color:rgba(255,255,255,.3)}
.tabla-c .ellos{position:relative;z-index:2;color:var(--azul-900);font-weight:800}
.tabla-c__foco{position:absolute;top:-1.1rem;bottom:-.3rem;left:calc(100%/9*2 + 0px);width:calc((100% - 100%/9*2)/4);
  background:#fff;border-radius:var(--r-m);box-shadow:0 12px 34px -14px rgba(0,0,0,.5);z-index:1;pointer-events:none}
.si{color:#6EE7A8;font-weight:800}
.no{color:#FF9E93;font-weight:800}

@media (prefers-reduced-motion:reduce){
  .persiana{display:none}
  .anim .palabra{animation:none;opacity:1;filter:none;transform:none}
  .portada__fondo video{opacity:1}
}
.sin-persiana .persiana{display:none}

/* comparativa: la columna de ellos flota en blanco sobre el cristal */
.tabla-c__foco{display:none}
.tabla-c .ellos{background:#fff;color:var(--azul-900)}
.tabla-c .ellos--cab{background:#fff;border-radius:var(--r-m) var(--r-m) 0 0;padding-top:1.1rem;
  color:var(--azul-900);border-bottom-color:var(--azul-100)}
.tabla-c .ellos--pie{border-radius:0 0 var(--r-m) var(--r-m);border-bottom:0}
.tabla-c .otros{background:rgba(255,255,255,.09)}
.tabla-c__envoltorio{overflow-x:auto}

/* ============================================================
   TRES PRÉSTAMOS MÁS (ReactBits), elegidos por encajar con una
   clínica de barrio: nada de glitch, plasma ni neón.
   1) ScrollReveal  2) Magnet  3) transición entre páginas
   ============================================================ */

/* --- 1) frase que se revela con el scroll, palabra a palabra --- */
.rev-scroll{display:block}
.rev-scroll .p{display:inline-block;margin-right:.24em}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .rev-scroll .p{
      opacity:.16;filter:blur(3px);
      animation:revelaPalabra linear both;
      animation-timeline:view();
      animation-range:entry calc(14% + var(--i) * 2.4%) entry calc(46% + var(--i) * 2.4%);
    }
  }
}
@keyframes revelaPalabra{to{opacity:1;filter:blur(0)}}

/* --- 2) imán en la llamada principal --- */
.iman{will-change:transform}

/* --- 3) transición entre la maqueta y la propuesta --- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtSale .28s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vtEntra .42s cubic-bezier(0,0,.2,1) both}
}
@keyframes vtSale{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtEntra{from{opacity:0;transform:translateY(12px)}}
.marca{view-transition-name:marca-clinica}
.cabecera{view-transition-name:cabecera-clinica}

/* ============================================================
   MÓVIL — iPhone y navegadores con barra (Safari)
   Notch, indicador inferior, barra de URL que aparece y
   desaparece, y todo pensado para el pulgar.
   ============================================================ */

html{-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:none}
.tabla-c__envoltorio,.horario{-webkit-overflow-scrolling:touch}

/* la cabecera respeta el notch cuando el móvil va en horizontal */
.cabecera__caja{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

@media (max-width:760px){
  /* --- barra de acciones fija abajo, como una app --- */
  .fab{display:none}
  .barra-movil{
    position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:.5rem;align-items:center;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px) saturate(1.5);
    backdrop-filter:blur(18px) saturate(1.5);border-top:1px solid var(--linea);
    box-shadow:0 -4px 24px rgba(18,33,47,.09)}
  .barra-movil .btn{padding:.85rem 1rem;font-size:.95rem}
  .barra-movil__cita{flex:1}
  .barra-movil__icono{width:48px;height:48px;padding:0;flex:none;border-radius:50%}
  /* que la barra no tape el final de la página (sólo donde hay barra) */
  body.con-barra{padding-bottom:calc(5.2rem + env(safe-area-inset-bottom))}

  /* --- portada más compacta y a pantalla completa real --- */
  .portada__caja{padding-block:clamp(2.5rem,10vw,4rem) clamp(2.5rem,8vw,3.5rem)}
  .portada h1{font-size:clamp(2rem,8.6vw,2.9rem)}
  .portada .entradilla{font-size:1.02rem}
  .portada__acc{margin-top:1.6rem;gap:.65rem}
  .portada__acc .btn{width:100%}
  .portada__pie{margin-top:2rem;padding-top:1.4rem;gap:1.1rem 1.6rem}
  .dato__n{font-size:1.55rem}
  .dato__t{font-size:.72rem}

  /* --- menos aire entre secciones: en el móvil sobra --- */
  :root{--paso:clamp(2.75rem,9vw,4rem)}
  .seccion{padding-block:var(--paso)}
  .hilo{height:46px;width:180px}

  /* --- tarjetas más compactas --- */
  .tarjeta{padding:1.35rem;border-radius:var(--r-m)}
  .tarjeta__icono{width:44px;height:44px;margin-bottom:.85rem}
  .tarjeta h3{font-size:1.1rem}
  .rejilla{gap:1rem}

  /* --- el formulario, a pantalla ancha --- */
  .reserva{border-radius:var(--r-l);padding:1.25rem}
  .opciones{grid-template-columns:1fr 1fr;gap:.55rem}
  .opcion label{padding:.8rem .7rem;font-size:.88rem;flex-direction:column;align-items:flex-start;gap:.5rem}
  .franjas{grid-template-columns:1fr 1fr 1fr;gap:.45rem}
  .franja label{padding:.7rem .35rem;font-size:.82rem}

  /* --- opiniones y reseñas --- */
  .op-nota{padding:1.35rem;gap:1.1rem}
  .op-nota__n{font-size:2.8rem}
  .resena{padding:1.25rem}

  /* --- el mapa, más bajo --- */
  .mapa{aspect-ratio:1/1}
}

@media (max-width:420px){
  .portada h1{font-size:clamp(1.85rem,8.2vw,2.4rem)}
  .opciones{grid-template-columns:1fr}
  .opcion label{flex-direction:row;align-items:center}
  .barra-movil .btn{font-size:.9rem;padding:.8rem .7rem}
}

/* en el escritorio la barra de móvil no existe */
@media (min-width:761px){.barra-movil{display:none}}

/* Safari: la barra de URL cambia de alto. svh usa la altura pequeña,
   así nada queda escondido bajo la barra al abrir la página. */
@supports (height: 100svh){
  @media (max-width:760px){
    .portada{min-height:auto}
  }
}

/* La foto va SIEMPRE debajo del vídeo. Así, mientras el vídeo carga (o si el
   móvil está en ahorro de batería y no autorreproduce), se ve la imagen y
   nunca un rectángulo azul vacío. */
.portada__quieta{position:absolute;inset:0;z-index:0}
.portada__fondo video{position:absolute;inset:0;z-index:1}