@font-face{font-family:'Epilogue';font-style:normal;font-weight:300 800;font-display:swap;src:url('fonts/epilogue-300800-latin-1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

*{box-sizing:border-box;margin:0}

:root{
  /* Paleta del brief. Los tonos de texto se oscurecieron lo justo para pasar AA
     4.5:1 sobre el fondo claro; el matiz es el mismo teal/coral del cliente. */
  --fondo:#FAF9F6;
  --blanco:#FFFFFF;
  --tinta:#111827;          /* 16.85:1 sobre el fondo */
  --tinta-suave:#45505F;    /*  7.77:1 */
  --acento:#0D9488;         /* teal de marca: rellenos, trazos, títulos grandes */
  --teal-texto:#0A6E66;     /*  5.81:1 sobre fondo · 4.85:1 sobre menta */
  --teal-hondo:#08554F;     /*  8.67:1 con texto blanco encima */
  --teal-noche:#0B2E2B;     /* velo del video */
  --menta:#99F6E4;
  --menta-clara:#CFFAF1;
  --menta-tenue:#E9FBF6;
  --coral:#E11D48;
  --coral-texto:#C2123F;    /*  5.77:1 sobre fondo */
  --borde:#E3E0D8;
  --borde-teal:rgba(13,148,136,0.32);

  --fuente:'Epilogue',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --canal:clamp(20px,5vw,40px);
  --radio:14px;
  --sombra:0 10px 30px -18px rgba(17,24,39,0.35);
  --sombra-alta:0 18px 44px -20px rgba(8,85,79,0.45);
  --salida:cubic-bezier(0.25, 1, 0.5, 1);
  --salida-larga:cubic-bezier(0.16, 1, 0.3, 1);
  --z-barra:10;
  --z-fija:20;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:var(--fuente);
  background:var(--fondo);
  color:var(--tinta);
  font-size:clamp(1rem,1.15vw,1.0625rem);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  padding-bottom:84px;
}

h1,h2{font-weight:300;line-height:1.05;letter-spacing:-0.025em;text-wrap:balance;color:var(--tinta)}
h1{font-size:clamp(2.2rem,5.9vw,4rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.0625rem,1.7vw,1.3rem);font-weight:600;letter-spacing:-0.008em;line-height:1.25;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
img{max-width:100%;display:block}
ul{list-style:none;padding:0}

.envoltura{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--canal)}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

:focus-visible{outline:2px solid var(--teal-texto);outline-offset:3px;border-radius:4px}

.saltar{position:absolute;left:-9999px;top:0;background:var(--teal-hondo);color:#fff;padding:12px 18px;z-index:30}
.saltar:focus{left:8px;top:8px}

/* ── Barra superior ─────────────────────────────────────────────────────── */
.barra{
  position:sticky;top:0;z-index:var(--z-barra);
  background:rgba(250,249,246,0.94);
  border-bottom:1px solid var(--borde);
}
.barra__fila{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px}
.marca{text-decoration:none;display:flex;flex-direction:column;line-height:1.15}
.marca__nombre{font-weight:700;font-size:1.0625rem;letter-spacing:0.14em}
.marca__bajada{font-size:0.75rem;color:var(--tinta-suave);letter-spacing:0.02em}
.barra__nav{display:none;gap:26px;font-size:0.9375rem;color:var(--tinta-suave)}
.barra__nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color 160ms var(--salida),border-color 160ms var(--salida)}
.barra__acciones{display:none;gap:10px}

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 20px;border-radius:999px;
  font-family:inherit;font-size:0.9375rem;font-weight:600;letter-spacing:-0.005em;
  text-decoration:none;text-align:center;cursor:pointer;
  border:1px solid transparent;
  transition:transform 150ms var(--salida),background-color 190ms var(--salida),border-color 190ms var(--salida),color 190ms var(--salida),box-shadow 190ms var(--salida);
}
.btn--grande{min-height:54px;padding:0 26px;font-size:1rem}
.btn svg{flex:none}
.btn--solido{background:var(--teal-texto);color:#fff}
.btn--linea{background:transparent;color:var(--teal-texto);border-color:var(--borde-teal)}
.btn--fantasma{background:transparent;color:var(--tinta-suave);border-color:var(--borde);min-height:42px;font-size:0.875rem}
.btn--claro{background:var(--fondo);color:var(--teal-hondo)}
.btn--linea-clara{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45)}
.btn:active{transform:scale(0.97)}

@media (hover:hover) and (pointer:fine){
  .btn--solido:hover{background:var(--teal-hondo);box-shadow:var(--sombra-alta)}
  .btn--linea:hover{background:var(--menta-tenue);border-color:var(--teal-texto)}
  .btn--fantasma:hover{color:var(--teal-texto);border-color:var(--borde-teal)}
  .btn--claro:hover{background:var(--menta-clara)}
  .btn--linea-clara:hover{background:rgba(255,255,255,0.12);border-color:#fff}
  .barra__nav a:hover{color:var(--teal-texto);border-bottom-color:var(--acento)}
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(38px,7vw,84px) clamp(30px,5vw,56px)}
.hero__rejilla{display:grid;gap:clamp(30px,5vw,56px)}
.hero__lema{
  margin-top:clamp(18px,2.4vw,26px);
  font-size:clamp(1.0625rem,1.9vw,1.375rem);
  font-weight:300;font-style:italic;color:var(--teal-texto);
  line-height:1.45;max-width:26ch;letter-spacing:-0.008em;
}
.hero__dato{margin-top:16px;color:var(--tinta-suave);max-width:46ch}
.hero__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,32px)}

/* ── Momento firma: el abanico de tonos ─────────────────────────────────────
   La guía de tonos de porcelana: siete pestañas colgando de un mismo eje, como
   el instrumento con el que se elige el color de una carilla. Todo gira sobre
   ese punto — pestañas y marcador comparten `transform-origin`. */
.guia{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,24px)}
.guia__abanico{
  --paso:11deg;
  --ancho:clamp(32px,8.4vw,46px);
  --alto:clamp(112px,30vw,150px);
  --radio:15px;   /* del borde superior de la pestaña al eje: casi se tocan */
  --tope:34px;    /* del borde del bloque al borde superior de la pestaña */
  --sep:16px;     /* aire entre las pestañas y el marcador */
  position:relative;
  width:100%;
  height:calc(var(--tope) + var(--alto) + var(--sep) + 42px);
}
.guia__tab{
  position:absolute;left:50%;top:var(--tope);z-index:1;
  width:var(--ancho);height:var(--alto);
  margin-left:calc(var(--ancho) / -2);
  border-radius:5px 5px 13px 13px;
  background:var(--tono);
  background:linear-gradient(168deg,color-mix(in oklab,var(--tono) 58%,#fff),var(--tono));
  box-shadow:0 10px 22px -14px rgba(8,85,79,0.6),inset 0 0 0 1px rgba(255,255,255,0.6);
  transform-origin:50% calc(-1 * var(--radio));
  transform:rotate(calc((3 - var(--i)) * var(--paso)));
  transition:transform 240ms var(--salida),box-shadow 240ms var(--salida);
}
.guia__tab--elegido{z-index:2;box-shadow:0 14px 28px -14px rgba(8,85,79,0.65),inset 0 0 0 1px rgba(255,255,255,0.8),0 0 0 1.5px var(--borde-teal)}
/* El eje: el remache del que cuelgan las pestañas. */
.guia__eje{
  position:absolute;left:50%;top:calc(var(--tope) - var(--radio));z-index:3;
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:var(--fondo);
  box-shadow:inset 0 0 0 2px var(--acento);
}
.guia__marca{
  position:absolute;left:50%;top:calc(var(--tope) + var(--alto) + var(--sep));
  width:14px;margin-left:-7px;
  display:flex;justify-content:center;
  color:var(--coral);
  transform-origin:50% calc(-1 * (var(--radio) + var(--alto) + var(--sep)));
  /* En reposo apunta a la pestaña elegida (índice 5: dos pasos del centro). */
  transform:rotate(calc(2 * var(--paso)));
  transition:transform 280ms var(--salida-larga);
}
.guia figcaption{
  max-width:32ch;text-align:center;
  font-size:0.9375rem;color:var(--tinta-suave);line-height:1.5;
}

@media (hover:hover) and (pointer:fine){
  /* La pestaña sale del abanico por su propio radio, no hacia abajo en la pantalla. */
  .guia__tab:hover{z-index:4;transform:rotate(calc((var(--i) - 3) * var(--paso))) translateY(14px);box-shadow:0 20px 34px -16px rgba(8,85,79,0.65),inset 0 0 0 1px rgba(255,255,255,0.85)}
  .guia__abanico:has(.guia__tab:nth-child(1):hover) .guia__marca{transform:rotate(calc(-3 * var(--paso)))}
  .guia__abanico:has(.guia__tab:nth-child(2):hover) .guia__marca{transform:rotate(calc(-2 * var(--paso)))}
  .guia__abanico:has(.guia__tab:nth-child(3):hover) .guia__marca{transform:rotate(calc(-1 * var(--paso)))}
  .guia__abanico:has(.guia__tab:nth-child(4):hover) .guia__marca{transform:rotate(0deg)}
  .guia__abanico:has(.guia__tab:nth-child(5):hover) .guia__marca{transform:rotate(var(--paso))}
  .guia__abanico:has(.guia__tab:nth-child(6):hover) .guia__marca{transform:rotate(calc(2 * var(--paso)))}
  .guia__abanico:has(.guia__tab:nth-child(7):hover) .guia__marca{transform:rotate(calc(3 * var(--paso)))}
}

/* ── Franja de estado ───────────────────────────────────────────────────── */
.estado{background:var(--menta-tenue);border-block:1px solid var(--borde)}
.estado__fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:16px}
.estado__horario{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:0.9375rem;color:var(--tinta-suave)}
.estado__horario strong{color:var(--tinta);font-weight:600}
.estado__sep{color:var(--borde-teal)}
.estado__lugar{font-size:0.9375rem;color:var(--tinta-suave);margin-left:auto}
.pastilla{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:999px;
  font-size:0.8125rem;font-weight:600;letter-spacing:0.01em;
}
.pastilla::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pastilla--abierto{background:var(--menta);color:var(--teal-hondo)}
.pastilla--cerrado{background:#FDE7EC;color:var(--coral-texto)}

/* ── Tratamientos ───────────────────────────────────────────────────────── */
.tratamientos{padding-block:clamp(52px,9vw,104px);scroll-margin-top:72px}
.tratamientos__intro{max-width:52ch}
.tratamientos__intro p{margin-top:14px;color:var(--tinta-suave)}

.destacado{
  margin-top:clamp(30px,4.5vw,52px);
  display:grid;gap:clamp(22px,3vw,40px);align-items:center;
  padding:clamp(24px,3.4vw,38px);
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.destacado__texto h3{font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:400;letter-spacing:-0.018em}
.destacado__texto p{margin-top:12px;color:var(--tinta-suave);max-width:44ch}
.destacado__foto{width:100%;height:clamp(200px,34vw,280px);object-fit:cover;border-radius:10px}

.enlace{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-weight:600;font-size:0.9375rem;color:var(--teal-texto);text-decoration:none;
  padding-bottom:3px;position:relative;
}
.enlace::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--acento);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 260ms var(--salida-larga);
}
.enlace__flecha{transition:transform 200ms var(--salida)}
.enlace:active{transform:scale(0.98)}
@media (hover:hover) and (pointer:fine){
  .enlace:hover::after{clip-path:inset(0 0 0 0)}
  .enlace:hover .enlace__flecha{transform:translateX(5px)}
}

.lista{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--borde)}
.lista li{
  display:grid;gap:6px;
  padding-block:clamp(20px,2.6vw,26px);
  border-bottom:1px solid var(--borde);
}
.lista p{color:var(--tinta-suave);max-width:52ch}

/* ── Cinta de video ─────────────────────────────────────────────────────── */
.cinta{position:relative;isolation:isolate;min-height:clamp(300px,48vh,440px);display:flex;align-items:flex-end;overflow:hidden}
.cinta__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cinta__velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,46,43,0.92) 0%,rgba(11,46,43,0.86) 45%,rgba(11,46,43,0.7) 100%);
}
.cinta__texto{padding-block:clamp(40px,7vw,72px)}
.cinta__linea{
  font-size:clamp(1.75rem,5vw,3.25rem);font-weight:300;line-height:1.08;
  letter-spacing:-0.028em;color:#fff;max-width:16ch;text-wrap:balance;
}
.cinta__pie{margin-top:16px;font-size:0.8125rem;color:var(--menta-clara);letter-spacing:0.01em}

/* ── Cómo te atendemos ──────────────────────────────────────────────────── */
.trabajamos{padding-block:clamp(52px,9vw,104px);scroll-margin-top:72px}
.trabajamos__rejilla{display:grid;gap:clamp(30px,4vw,52px);align-items:start}
.puntos{display:grid;gap:clamp(22px,3vw,30px);margin-top:clamp(26px,3.4vw,38px)}
.punto{border-top:1px solid var(--borde);padding-top:18px;position:relative}
.punto::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--coral)}
.punto p{margin-top:8px;color:var(--tinta-suave);max-width:46ch}
.trabajamos__foto{width:100%;height:clamp(220px,40vw,340px);object-fit:cover;border-radius:var(--radio)}

/* ── Ubicación ──────────────────────────────────────────────────────────── */
.ubicacion{padding-block:clamp(52px,9vw,104px);background:var(--menta-tenue);border-block:1px solid var(--borde);scroll-margin-top:72px}
.ubicacion__rejilla{display:grid;gap:clamp(30px,4vw,56px);align-items:start}
.ubicacion__dir{margin-top:20px;font-size:1.125rem;line-height:1.5}
.ubicacion__datos .btn{margin-top:22px}
.ubicacion__nota{margin-top:22px;font-size:0.875rem;color:var(--tinta-suave);max-width:38ch}
.horario{width:100%;border-collapse:collapse;font-size:0.9375rem;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden}
.horario tr{border-bottom:1px solid var(--borde)}
.horario tr:last-child{border-bottom:0}
.horario th,.horario td{padding:13px clamp(14px,2.4vw,20px);text-align:left;font-weight:400}
.horario th{color:var(--tinta);font-weight:600;width:44%}
.horario td{color:var(--tinta-suave);text-align:right}
.horario__cerrado{color:var(--coral-texto)}
.horario__hoy{background:var(--menta-tenue)}
.horario__hoy th{color:var(--teal-hondo)}
.horario__hoy td{color:var(--teal-hondo);font-weight:600}

/* ── Cierre ─────────────────────────────────────────────────────────────── */
.cierre{background:var(--teal-hondo);color:#fff;padding-block:clamp(52px,9vw,96px)}
.cierre__rejilla{display:grid;gap:clamp(30px,4vw,52px);align-items:center}
.cierre h2{color:#fff;max-width:16ch}
.cierre p{margin-top:16px;color:var(--menta-clara);max-width:44ch}
.cierre__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,32px)}
.cierre__foto{width:100%;height:clamp(200px,32vw,300px);object-fit:cover;border-radius:var(--radio)}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie{background:var(--teal-noche);color:#D7E6E3;padding-block:clamp(34px,5vw,52px);font-size:0.9375rem}
.pie__rejilla{display:grid;gap:22px}
.pie__nombre{font-weight:700;letter-spacing:0.14em;color:#fff;font-size:1rem;margin-bottom:6px}
.pie__enlaces{display:flex;flex-direction:column;gap:8px}
.pie__enlaces a{color:var(--menta);text-decoration:none;width:fit-content;border-bottom:1px solid transparent;transition:border-color 170ms var(--salida)}
.pie__credito{color:#9FB6B2;font-size:0.8125rem}
.pie__credito a{color:var(--menta-clara)}
@media (hover:hover) and (pointer:fine){
  .pie__enlaces a:hover{border-bottom-color:var(--menta)}
}

/* ── Barra fija de móvil ────────────────────────────────────────────────── */
.fija{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-fija);
  display:flex;gap:10px;
  padding:10px var(--canal) calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,249,246,0.96);
  border-top:1px solid var(--borde);
}
.fija .btn{flex:1;min-width:0;padding-inline:12px;font-size:0.875rem}
.fija .btn--solido{flex:1.35}

/* ── Escritorio ─────────────────────────────────────────────────────────── */
@media (min-width:760px){
  .estado__horario{font-size:1rem}
  .lista li{grid-template-columns:minmax(0,10fr) minmax(0,13fr);gap:28px;align-items:baseline}
  .puntos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cinta__pie{max-width:none}
}

@media (min-width:900px){
  body{padding-bottom:0}
  .fija{display:none}
  .barra__nav,.barra__acciones{display:flex}
  .guia__abanico{--paso:13deg}
  .hero__rejilla{grid-template-columns:minmax(0,1.22fr) minmax(0,0.78fr);align-items:center}
  .destacado{grid-template-columns:minmax(0,1fr) minmax(0,0.86fr)}
  .trabajamos__rejilla{grid-template-columns:minmax(0,1fr) minmax(0,0.42fr)}
  .ubicacion__rejilla{grid-template-columns:minmax(0,1fr) minmax(0,0.85fr)}
  .cierre__rejilla{grid-template-columns:minmax(0,1fr) minmax(0,0.62fr)}
  .pie__rejilla{grid-template-columns:1.4fr 1fr 1fr;align-items:start}
  .pie__credito{text-align:right}
}

/* ── Movimiento reducido ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .guia__tab:hover{transform:rotate(calc((var(--i) - 3) * var(--paso)))}
  .enlace:hover .enlace__flecha{transform:none}
}