/* Kinesiomed, demo no oficial. Azul de su vidriera, celeste del sello, blanco. La ventosa redonda como idea. */
:root{
  --azul:#1d4f9b; --azul-o:#143a75; --celeste:#4fb3d9; --celeste-c:#e3f2f9; --tinta:#0f1b2d; --papel:#f3f6f9; --gris:#566377; --linea:rgba(15,27,45,.12);
  --serif:"Literata", Georgia, serif; --sans:"Figtree", system-ui, sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{ margin:0; font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--tinta); background:var(--papel); -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,p,figure,blockquote{ margin:0; }
.envase{ width:min(1240px, 100% - 48px); margin-inline:auto; }

.t-xl,.t-l,.donde__dir,.pie__grande,.ventosa__t,.carga__nombre{ font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.05; }
.t-xl{ font-size:clamp(42px, 5.2vw, 80px); }
.t-l{ font-size:clamp(36px, 4.2vw, 62px); }
.linea-caja{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }

.boton{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px; border:0; border-radius:999px; background:var(--azul); color:#fff; font-weight:600; font-size:16px; text-decoration:none; white-space:nowrap; transition:color .35s; }
.boton::before{ content:""; position:absolute; left:50%; top:50%; width:0; height:0; z-index:-1; border-radius:50%; background:var(--azul-o); transform:translate(-50%, -50%); transition:width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1); }
.boton:hover::before{ width:120%; height:300%; }
.boton--chico{ min-height:44px; padding:0 22px; font-size:15px; }
.boton--ancho{ width:100%; }
.boton--linea{ background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--tinta); }
.boton--linea::before{ background:var(--tinta); }
.boton--linea:hover{ color:#fff; }
.boton--claro{ background:#fff; color:var(--azul); }
.boton--claro::before{ background:var(--celeste-c); }
.flecha{ display:inline-block; transition:transform .35s; }
.boton:hover .flecha,.enlace:hover .flecha{ transform:translateX(4px); }
.enlace{ display:inline-flex; gap:8px; align-items:center; font-weight:600; color:var(--azul); text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px; }
.boton:focus-visible,.ops button:focus-visible,.chips button:focus-visible,summary:focus-visible,.enlace:focus-visible{ outline:2px solid var(--celeste); outline-offset:3px; }
.estrellas{ color:#f2b200; letter-spacing:1px; }

/* Carga */
#carga{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:var(--azul); color:#fff; clip-path:circle(150% at 50% 50%); animation:fueraCarga 0s 5s forwards; }
.sin-carga #carga{ display:none; }
html:not(.js-listo) #carga{ display:none; }
@keyframes fueraCarga{ to{ visibility:hidden; opacity:0; pointer-events:none; } }
.carga__aro{ position:absolute; width:min(220px, 50vw); }
.carga__aro circle{ fill:none; stroke:var(--celeste); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; transform:rotate(-90deg); transform-origin:center; }
.carga__nombre{ font-size:clamp(26px, 4vw, 38px); }

/* Barra */
.barra{ position:fixed; z-index:50; top:14px; left:50%; transform:translateX(-50%); width:min(1240px, 100% - 28px); display:flex; align-items:center; gap:28px; padding:8px 8px 8px 16px; border-radius:999px; background:rgba(255,255,255,.8); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 0 0 1px var(--linea); transition:box-shadow .3s; }
.barra--baja{ box-shadow:0 0 0 1px var(--linea), 0 10px 30px -18px rgba(15,27,45,.4); }
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; font-family:var(--serif); font-size:21px; line-height:1; }
.marca small{ display:block; font-family:var(--sans); font-size:12.5px; color:var(--gris); margin-top:3px; }
.marca__aro{ width:30px; height:30px; border-radius:50%; background:var(--azul); box-shadow:inset 0 0 0 7px var(--azul), inset 0 0 0 9px #fff; flex:none; }
.barra__nav{ display:flex; gap:26px; font-size:15px; font-weight:500; }
.barra__nav a{ text-decoration:none; opacity:.85; }
.barra__nav a:hover{ opacity:1; color:var(--azul); }
.barra__menu{ display:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--azul); position:relative; }
.barra__menu i{ position:absolute; left:14px; right:14px; height:1.5px; background:#fff; transition:transform .3s; }
.barra__menu i:first-child{ top:18px; } .barra__menu i:last-child{ top:25px; }
.menu-abierto .barra__menu i:first-child{ transform:translateY(3.5px) rotate(45deg); }
.menu-abierto .barra__menu i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
.menu-cel{ position:fixed; z-index:45; inset:0; padding:100px 24px 30px; background:#fff; display:flex; flex-direction:column; }
.menu-cel[hidden]{ display:none; }
.menu-cel a:not(.boton){ font-family:var(--serif); font-size:36px; text-decoration:none; padding:12px 0; border-bottom:1px solid var(--linea); }
.menu-cel .boton{ margin-top:26px; }

[data-revela]{ opacity:0; transform:translateY(24px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
[data-revela].visto{ opacity:1; transform:none; }
html:not(.js-listo) [data-revela]{ opacity:1; transform:none; }

/* Portada */
.portada{ padding-top:clamp(120px, 16vh, 170px); background:linear-gradient(180deg, #fff 0%, var(--papel) 100%); }
.portada__caja{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:40px 70px; align-items:center; }
.portada__texto{ display:grid; gap:28px; }
.portada__bajada{ font-size:clamp(17px, 1.3vw, 19.5px); color:var(--gris); max-width:52ch; }
.portada__botones{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; }
.google{ display:inline-flex; align-items:center; gap:12px; font-size:14.5px; line-height:1.3; text-decoration:none; color:var(--gris); }
.google b{ font-family:var(--serif); font-weight:500; font-size:40px; line-height:1; color:var(--tinta); }
.portada__foto{ position:relative; justify-self:center; width:min(500px, 100%); aspect-ratio:1; }
.circulo{ position:absolute; inset:13%; border-radius:50%; overflow:hidden; background:var(--celeste-c); clip-path:circle(50% at 50% 50%); }
.circulo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.sello{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sello text{ font-family:var(--sans); font-size:11.6px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; fill:var(--azul); }

.numeros{ list-style:none; padding:clamp(50px, 6vw, 90px) 0 clamp(70px, 8vw, 110px); margin-top:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.numeros li{ display:grid; gap:6px; padding-top:20px; border-top:1px solid var(--linea); }
.numeros b{ font-family:var(--serif); font-weight:400; font-size:clamp(40px, 4.2vw, 64px); line-height:1; color:var(--azul); }
.numeros span{ color:var(--gris); font-size:15.5px; }

/* La ventosa */
.ventosa{ position:relative; height:320vh; background:var(--tinta); color:#fff; }
.ventosa__fijo{ position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); align-items:center; gap:40px; width:min(1240px, 100% - 48px); margin-inline:auto; }
.ventosa__circulo{ --r:22; grid-column:2; justify-self:center; width:min(84vh, 100%); aspect-ratio:1; border-radius:50%; overflow:hidden; clip-path:circle(calc(var(--r) * 1%) at 50% 50%); box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.ventosa__circulo img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.ventosa__textos{ grid-column:1; grid-row:1; position:relative; min-height:3.6em; font-size:clamp(30px, 3.4vw, 50px); }
.ventosa__t{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); font-size:inherit; }
html:not(.js-listo) .ventosa{ height:auto; }
html:not(.js-listo) .ventosa__fijo{ position:relative; }

/* Dónde te duele */
.dolor{ padding:clamp(90px, 10vw, 150px) 0; background:#fff; }
.dolor__cab{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px 60px; align-items:end; margin-bottom:40px; }
.dolor__cab p{ color:var(--gris); max-width:44ch; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips button{ min-height:56px; padding:0 26px; border-radius:999px; border:1.5px solid var(--linea); background:var(--papel); font-size:clamp(17px, 1.4vw, 20px); font-weight:500; transition:background .3s, color .3s, border-color .3s, transform .3s; }
.chips button:hover{ border-color:var(--azul); color:var(--azul); transform:translateY(-2px); }
.chips button.elegido{ background:var(--azul); color:#fff; border-color:var(--azul); }
.nota-salud{ margin-top:30px; max-width:70ch; font-size:15px; color:var(--gris); padding-left:16px; border-left:2px solid var(--celeste); }

/* Lic. Fann */
.fann{ padding:clamp(90px, 10vw, 150px) 0; }
.fann__caja{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(30px, 6vw, 90px); align-items:center; }
.fann__foto{ border-radius:240px 240px 24px 24px; overflow:hidden; background:var(--celeste-c); }
.fann__foto img{ width:100%; aspect-ratio:4 / 5; object-fit:cover; }
.fann__texto{ display:grid; gap:22px; justify-items:start; }
.fann__mat{ font-weight:600; color:var(--azul); }
.cita{ font-family:var(--serif); font-size:clamp(21px, 1.9vw, 27px); line-height:1.4; padding-left:22px; border-left:2px solid var(--celeste); }
.fann__lista{ margin:0; padding:0; list-style:none; display:grid; gap:10px; color:var(--gris); }
.fann__lista li{ display:flex; gap:12px; align-items:baseline; }
.fann__lista li::before{ content:""; flex:none; width:10px; height:10px; border-radius:50%; border:2px solid var(--azul); transform:translateY(1px); }

/* Prensa */
.prensa{ padding:clamp(80px, 9vw, 130px) 0; background:var(--azul); color:#fff; }
.prensa__caja{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .9fr) minmax(0, .7fr); gap:30px 50px; align-items:center; }
.prensa__tele{ display:grid; gap:10px; }
.prensa__tele img{ width:100%; border-radius:18px; }
.prensa__tele figcaption{ font-size:14.5px; color:rgba(255,255,255,.75); }
.prensa__diario{ display:grid; gap:10px; padding:26px; border-radius:18px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.prensa__medio{ font-family:var(--serif); font-size:34px; line-height:1; }
.prensa__diario p:last-child{ color:rgba(255,255,255,.8); font-size:15.5px; }

/* Parches */
.parches{ padding:clamp(90px, 10vw, 150px) 0; background:#fff; }
.parches__caja{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(30px, 6vw, 90px); align-items:center; }
.parches__texto{ display:grid; gap:22px; justify-items:start; }
.parches__texto p{ color:var(--gris); max-width:50ch; }
.parches__foto{ border-radius:50%; overflow:hidden; aspect-ratio:1; max-width:460px; justify-self:center; width:100%; }
.parches__foto img{ width:100%; height:100%; object-fit:cover; }

/* Turno */
.turno{ padding:clamp(90px, 10vw, 150px) 0; background:var(--celeste-c); }
.turno__caja{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(30px, 5vw, 80px); align-items:start; }
.turno__texto{ display:grid; gap:20px; }
.turno__texto p{ color:var(--gris); max-width:46ch; }
.turno__horario{ padding-left:16px; border-left:2px solid var(--azul); }
.turno__sport{ font-size:15px; }
.pasos{ padding:clamp(24px, 3vw, 40px); background:#fff; border-radius:28px; box-shadow:0 30px 60px -36px rgba(15,27,45,.45); }
.pasos__arriba{ display:flex; align-items:center; gap:14px; font-size:14px; color:var(--gris); margin-bottom:24px; }
.pasos__barra{ flex:1; height:4px; border-radius:4px; background:var(--papel); overflow:hidden; }
.pasos__barra i{ display:block; height:100%; background:var(--azul); transform-origin:left; transform:scaleX(.25); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.paso[hidden]{ display:none; }
.paso--activo{ animation:entraPaso .45s cubic-bezier(.2,.8,.2,1); }
@keyframes entraPaso{ from{ opacity:0; transform:translateX(14px); } }
.paso__preg{ font-family:var(--serif); font-size:clamp(28px, 2.6vw, 36px); line-height:1.1; margin-bottom:20px; }
.ops{ display:grid; gap:8px; }
.ops--dos{ grid-template-columns:1fr 1fr; }
.ops__ancho{ grid-column:1 / -1; }
.ops button{ min-height:56px; padding:12px 18px; text-align:left; border:1.5px solid var(--linea); border-radius:16px; background:#fff; font-size:16px; font-weight:500; transition:border-color .25s, background .25s, color .25s; }
.ops button:hover{ border-color:var(--azul); }
.ops button.elegido{ background:var(--azul); color:#fff; border-color:var(--azul); }
.paso__atras{ margin-top:14px; border:0; background:none; padding:6px 0; color:var(--gris); font-size:15px; }
.campo{ display:grid; gap:6px; font-size:14px; color:var(--gris); margin-bottom:14px; }
.campo input{ min-height:54px; padding:0 16px; border:1.5px solid var(--linea); border-radius:16px; font:inherit; font-size:17px; color:var(--tinta); }
.campo input:focus{ outline:none; border-color:var(--azul); }
.pasos__mensaje{ padding:16px 18px; border-radius:16px; background:var(--papel); margin-bottom:16px; }
.pasos__mensaje span{ font-size:13px; color:var(--gris); }
.pasos__mensaje p{ margin-top:6px; font-size:15.5px; }

/* Preguntas */
.preguntas{ padding:clamp(90px, 10vw, 150px) 0; background:#fff; }
.preguntas__caja{ display:grid; grid-template-columns:minmax(0, .7fr) minmax(0, 1.3fr); gap:30px 60px; align-items:start; }
.acordeon details{ border-bottom:1px solid var(--linea); }
.acordeon details:first-child{ border-top:1px solid var(--linea); }
.acordeon summary{ list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:22px 0; font-weight:600; font-size:clamp(18px, 1.4vw, 20px); cursor:pointer; }
.acordeon summary::-webkit-details-marker{ display:none; }
.acordeon summary::after{ content:""; flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--azul); background:radial-gradient(circle, var(--azul) 0 3px, transparent 3.5px); transition:background .3s; }
.acordeon details[open] summary::after{ background:var(--azul); box-shadow:inset 0 0 0 4px #fff; }
.acordeon p{ padding:0 40px 24px 0; color:var(--gris); }

/* Dónde */
.donde{ padding:clamp(90px, 10vw, 150px) 0; }
.donde__caja{ display:grid; grid-template-columns:minmax(0, .5fr) minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(24px, 3vw, 44px); align-items:center; }
.donde__frente{ border-radius:50%; overflow:hidden; aspect-ratio:1; }
.donde__frente img{ width:100%; height:100%; object-fit:cover; }
.donde__texto{ display:grid; gap:18px; }
.donde__dir{ font-size:clamp(40px, 4.6vw, 70px); }
.donde__texto p{ color:var(--gris); }
.donde__botones{ display:flex; flex-wrap:wrap; gap:10px; }
.donde__mapa{ display:block; border-radius:24px; overflow:hidden; filter:saturate(.3); transition:filter .5s; }
.donde__mapa:hover{ filter:none; }

/* Pie */
.pie{ background:var(--azul-o); color:#fff; padding:clamp(70px, 8vw, 110px) 0 30px; }
.pie__arriba{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.16); }
.pie__grande{ font-size:clamp(40px, 5vw, 76px); max-width:14ch; }
.pie__caja{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; padding:40px 0; font-size:15.5px; color:rgba(255,255,255,.75); }
.pie__caja a{ text-decoration:none; }
.pie__caja a:hover{ color:#fff; }
.pie__t{ color:#fff; font-weight:600; margin-bottom:8px; }
.pie__caja nav{ display:grid; gap:4px; }
.pie__demo{ font-size:13.5px; color:rgba(255,255,255,.55); }
.barra-cel{ display:none; }

/* Modo demo */
.demo{ position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:20px; background:rgba(15,27,45,.55); backdrop-filter:blur(4px); }
.demo[hidden]{ display:none; }
.demo__caja{ width:min(460px, 100%); padding:32px; border-radius:28px; background:#fff; display:grid; gap:14px; }
.demo__t{ font-family:var(--serif); font-size:34px; line-height:1; }
.demo__msg{ padding:16px 18px; border-radius:16px 16px 16px 4px; background:#dcf8c6; color:#111; font-size:15.5px; }

@media (max-width:1100px){
  .barra__nav{ display:none; }
  .prensa__caja{ grid-template-columns:1fr 1fr; }
  .prensa__caja h2{ grid-column:1 / -1; }
  .donde__caja{ grid-template-columns:minmax(0, .6fr) minmax(0, 1fr); }
  .donde__mapa{ grid-column:1 / -1; }
}
@media (max-width:899px){
  .portada__caja,.dolor__cab,.fann__caja,.parches__caja,.turno__caja,.preguntas__caja{ grid-template-columns:1fr; }
  .numeros{ grid-template-columns:1fr 1fr; }
  .portada__foto{ width:min(380px, 88%); }
  .ventosa__fijo{ grid-template-columns:1fr; grid-template-rows:auto auto; align-content:center; gap:24px; }
  .ventosa__circulo{ grid-column:1; grid-row:1; width:min(56vh, 100%); }
  .ventosa__textos{ grid-column:1; grid-row:2; min-height:4.2em; text-align:center; font-size:clamp(26px, 6.4vw, 38px); }
  .fann__foto{ max-width:420px; }
}
@media (max-width:640px){
  body{ font-size:16.5px; }
  .envase{ width:calc(100% - 36px); }
  .barra{ top:10px; width:calc(100% - 20px); gap:10px; padding:6px 6px 6px 12px; }
  .barra > .boton{ display:none; }
  .barra__menu{ display:block; }
  .t-xl{ font-size:clamp(36px, 10.4vw, 48px); }
  .t-l{ font-size:clamp(32px, 9vw, 42px); }
  .portada{ padding-top:100px; }
  .portada__botones{ flex-direction:column; align-items:stretch; }
  .google{ justify-content:center; }
  .chips button{ min-height:50px; padding:0 18px; }
  .prensa__caja{ grid-template-columns:1fr; }
  .donde__caja{ grid-template-columns:1fr; }
  .donde__frente{ width:62%; justify-self:center; }
  .acordeon p{ padding-right:0; }
  .pie{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .pie__caja{ grid-template-columns:1fr; gap:22px; }
  .barra-cel{ position:fixed; z-index:40; left:0; right:0; bottom:0; display:grid; grid-template-columns:1.4fr 1fr; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-top:1px solid var(--linea); }
  .barra-cel .boton{ min-height:50px; padding:0 12px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media (max-width:640px){ .barra-cel{ box-sizing:border-box; } .barra-cel .boton{ min-width:0; white-space:normal; text-align:center; line-height:1.2; font-size:15px; } }
@media (max-width:640px){ main, section, header, footer{ overflow-x:clip; } }