/* Clínica Novofisio · Murcia. El azul marino es el de su logo (#010160); la madera, la de la pared de su recepción,
   donde cuelgan las dos manos de acero. Libre Franklin (la Franklin Gothic de 1902, del mismo tronco que las letras de
   NOVOFISIO) para todo. */
@font-face{ font-family:"Libre Franklin"; src:url("../fonts/franklin.woff2") format("woff2"); font-weight:100 900; font-display:swap; }

:root{
  --fondo:#f7f5f1; --niebla:#eceef4; --tinta:#14142b; --gris:#55566a; --linea:rgba(20,20,43,.13);
  --azul:#010160; --azul-2:#1b1b7e; --azul-claro:#c9cbe6; --madera:#9a4a22; --madera-claro:#f1e3d8;
  --letra:"Libre Franklin", system-ui, sans-serif;
  --nav-h:72px; --gutter:clamp(18px, 4vw, 56px); --seccion:clamp(72px, 10vw, 136px); --radio:26px;
}
*{ box-sizing:border-box; }
html{ background:var(--fondo); -webkit-text-size-adjust:100%; }
html, body{ overflow-x:clip; }
body{ margin:0; background:var(--fondo); color:var(--tinta); font:400 1.03rem/1.6 var(--letra); }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1, h2, h3{ margin:0; text-wrap:balance; }
h2{ font-weight:800; font-size:clamp(2.1rem, 4.6vw, 3.8rem); line-height:1.02; letter-spacing:-.025em; color:var(--azul); }
h3{ font-weight:700; font-size:1.18rem; line-height:1.2; letter-spacing:-.01em; }
p{ margin:0; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }

/* ---------- botones: los de Almo (relleno, filete fino, mayúsculas pequeñas), pero redondeados */
.boton{ display:inline-flex; align-items:center; justify-content:center; padding:1.05em 2.1em; border:1px solid var(--azul); border-radius:999px; background:var(--azul); color:#fff;
  font-family:var(--letra); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  transition:background .5s ease, color .5s ease, border-color .5s ease; }
.boton:hover{ background:transparent; color:var(--azul); }
.boton--linea{ background:transparent; color:var(--azul); }
.boton--linea:hover{ background:var(--azul); color:#fff; }
.boton--blanco{ background:#fff; border-color:#fff; color:var(--azul); }
.boton--blanco:hover{ background:transparent; color:#fff; }
.boton--nav{ padding:.85em 1.5em; font-size:.72rem; }

/* ---------- las manos del logo: trazos de punta redonda (vector/manos.json) */
.manos{ display:block; width:100%; height:auto; overflow:visible; }
.manos path{ stroke:var(--azul); }
.marca__manos{ width:100%; }

/* ---------- precarga: velo claro; el logo de la portada se dibuja a pluma en el centro y viaja a su sitio */
.velo{ position:fixed; inset:0; z-index:60; background:var(--fondo); pointer-events:none; display:none; }
html.anima .velo{ display:block; }
html.anima:not(.lista) .marca{ position:relative; z-index:61; }
html.anima .marca path{ stroke-dasharray:1 2; stroke-dashoffset:1; }
html.anima .marca .marca__clinica, html.anima .marca .marca__nombre, html.anima .portada__ficha, html.anima .nav{ opacity:0; }
.saltar{ position:fixed; z-index:62; right:var(--gutter); bottom:22px; border:0; background:none; color:var(--gris); font:500 .85rem var(--letra); cursor:pointer; padding:10px; display:none; }
html.anima:not(.lista) .saltar{ display:block; }

/* ---------- cabecera fina, siempre visible */
.nav{ position:fixed; top:0; left:0; right:0; z-index:40; height:var(--nav-h); display:flex; align-items:center; gap:clamp(14px, 2.4vw, 34px); padding:0 var(--gutter);
  background:rgba(247,245,241,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--linea); }
.nav__logo{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:1.06rem; letter-spacing:.02em; color:var(--azul); margin-right:auto; }
.nav__manos{ width:46px; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(16px, 2.4vw, 34px); }
.nav__enlaces a{ text-decoration:none; font-size:.93rem; font-weight:500; }
.nav__enlaces a:hover{ color:var(--azul-2); }
.nav__enlaces .nav__llamar{ font-weight:700; color:var(--azul); font-variant-numeric:tabular-nums; }
.nav__abrir{ display:none; }

/* ---------- portada: el logo grande y, al lado, sus fotos fundiéndose */
.portada{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); align-items:center; gap:clamp(28px, 4.5vw, 72px); min-height:100svh;
  padding:calc(var(--nav-h) + 28px) var(--gutter) 40px; }
.portada__marca{ display:flex; flex-direction:column; align-items:center; gap:clamp(30px, 5vh, 52px); }
.marca{ width:min(100%, 470px); display:flex; flex-direction:column; align-items:center; color:var(--azul); }
.marca__texto{ display:flex; flex-direction:column; align-items:center; margin-top:4%; }
.marca__clinica{ font-weight:300; font-size:clamp(1.6rem, 3.2vw, 2.6rem); line-height:1; letter-spacing:-.01em; }
.marca__nombre{ font-weight:800; font-size:clamp(2.9rem, 6.6vw, 5.4rem); line-height:1; letter-spacing:-.01em; }
.portada__ficha{ display:grid; justify-items:center; gap:6px; text-align:center; color:var(--gris); }
.portada__lema{ font-weight:600; font-size:clamp(1.15rem, 1.7vw, 1.4rem); color:var(--tinta); }
.hoy{ color:var(--tinta); }
.portada__botones{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:18px; }
.portada__fotos{ position:relative; aspect-ratio:3/2; max-height:calc(100svh - var(--nav-h) - 80px); width:100%; border-radius:var(--radio); overflow:hidden; background:var(--niebla); justify-self:end; }
.portada__fotos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease; }
.portada__fotos img:first-child, .portada__fotos img[data-activa]{ opacity:1; }
.portada__fotos[data-pasa] img:first-child:not([data-activa]){ opacity:0; }

/* ---------- tratamientos: seis fotos de su sesión; al entrar en pantalla se abren en cascada, una vez, y se quedan */
.tratamientos{ padding:var(--seccion) var(--gutter) calc(var(--seccion) * .8); display:grid; gap:clamp(28px, 4vw, 48px); }
.trats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 28px); }
.trat figure{ margin:0; display:grid; gap:14px; }
.trat__foto{ border-radius:var(--radio); overflow:hidden; aspect-ratio:4/5; background:var(--niebla); }
.trat__foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.7,.2,1); }
.trat figcaption{ display:grid; gap:4px; padding:0 4px; }
.trat h3{ color:var(--azul); }
.trat p{ color:var(--gris); font-size:.98rem; }
html.anima .trats .trat__foto{ clip-path:inset(100% 0 0 0 round var(--radio)); transition:clip-path 1s cubic-bezier(.65,0,.35,1) calc(var(--i) * .12s); }
html.anima .trats .trat__foto img{ transform:scale(1.12); transition:transform 1.6s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .12s); }
html.anima .trats .trat figcaption{ opacity:0; transform:translateY(14px); transition:opacity .7s ease calc(.35s + var(--i) * .12s), transform .7s ease calc(.35s + var(--i) * .12s); }
html.anima .trats.visto .trat__foto{ clip-path:inset(0 0 0 0 round var(--radio)); }
html.anima .trats.visto .trat__foto img{ transform:none; }
html.anima .trats.visto .trat figcaption{ opacity:1; transform:none; }
.otros{ display:flex; flex-wrap:wrap; gap:10px 0; color:var(--tinta); font-weight:600; font-size:1.02rem; border-top:1px solid var(--linea); padding-top:22px; }
.otros li:not(:last-child)::after{ content:"·"; margin:0 .8em; color:var(--azul-claro); }

/* ---------- accidentes de tráfico: banda azul entera */
.trafico{ background:var(--azul); color:#fff; padding:clamp(56px, 8vw, 104px) var(--gutter); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 48px; }
.trafico__texto{ display:grid; gap:14px; max-width:46rem; }
.trafico h2{ color:#fff; font-size:clamp(1.9rem, 3.8vw, 3.1rem); }
.trafico p{ color:rgba(255,255,255,.82); font-size:1.08rem; }

/* ---------- la clínica: datos de su página y la tira de fotos (fijada y de lado en escritorio, deslizable en móvil) */
.clinica{ padding:var(--seccion) 0; }
.clinica__fija{ display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(28px, 4vw, 48px); }
.clinica{ overflow:clip; }
.clinica__cabeza{ padding:0 var(--gutter); display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 48px; }
.datos{ display:flex; flex-wrap:wrap; gap:18px clamp(24px, 3.5vw, 52px); }
.datos li{ display:grid; align-content:start; gap:2px; max-width:11rem; }
.datos strong{ font-weight:800; font-size:clamp(1.7rem, 2.6vw, 2.3rem); line-height:1; color:var(--azul); letter-spacing:-.02em; }
.datos span{ color:var(--gris); font-size:.92rem; line-height:1.3; }
.tira{ display:flex; gap:clamp(12px, 1.6vw, 22px); padding:0 var(--gutter); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tira::-webkit-scrollbar{ display:none; }
.tira li{ flex:0 0 min(84vw, 760px); scroll-snap-align:center; border-radius:var(--radio); overflow:hidden; aspect-ratio:3/2; background:var(--niebla); }
.tira li:first-child{ scroll-snap-align:start; }
.tira img{ width:100%; height:100%; object-fit:cover; }
html.fijada .tira{ overflow:visible; width:max-content; }
html.fijada .clinica__fija{ min-height:100svh; align-content:center; padding:calc(var(--nav-h) + 12px) 0 24px; }
html.fijada .clinica{ padding:0; }
html.fijada .tira li{ flex-basis:min(42vw, 640px); max-height:calc(100svh - var(--nav-h) - 230px); width:auto; }

/* ---------- equipo: Carmen con las manos abiertas delante de las manos del logo, y las especialistas */
.equipo{ background:var(--niebla); padding:var(--seccion) var(--gutter); display:grid; gap:clamp(48px, 7vw, 96px); }
.carmen{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:clamp(28px, 5vw, 80px); }
.carmen__foto{ position:relative; display:grid; place-items:end center; aspect-ratio:1/1; max-width:620px; width:100%; justify-self:center; background:#fff; border-radius:var(--radio); overflow:hidden; }
.equipo__manos{ position:absolute; left:6%; top:8%; width:88%; }
.equipo__manos path{ stroke:var(--azul-claro); }
.carmen__foto img{ position:relative; width:68%; height:auto; }
.carmen__texto{ display:grid; gap:18px; max-width:34rem; }
.carmen__nombre{ display:grid; gap:2px; color:var(--gris); }
.carmen__nombre strong{ color:var(--tinta); font-size:1.25rem; font-weight:700; }
.carmen__texto p:not(.carmen__nombre){ color:var(--gris); }
.carmen__texto .carmen__frase{ color:var(--azul); font-weight:600; font-size:1.2rem; }
html.anima .equipo__manos path{ stroke-dasharray:1 2; stroke-dashoffset:1; transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1); }
html.anima .equipo__manos .mano__dedo{ transition-delay:.9s; }
html.anima .carmen.visto .equipo__manos path{ stroke-dashoffset:0; }
.especialistas{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(14px, 2vw, 28px); }
.esp{ display:grid; gap:12px; }
.esp img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; border-radius:var(--radio); background:#fff; }
.esp p{ display:grid; gap:1px; color:var(--gris); font-size:.97rem; padding:0 4px; }
.esp strong{ color:var(--tinta); font-weight:700; font-size:1.05rem; }
.esp small{ font-size:.85rem; }

/* ---------- contacto: la fachada y la ficha */
.contacto{ padding:var(--seccion) var(--gutter); display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); align-items:center; gap:clamp(28px, 5vw, 80px); }
.contacto__foto{ border-radius:var(--radio); overflow:hidden; aspect-ratio:3/2; }
.contacto__foto img{ width:100%; height:100%; object-fit:cover; }
.contacto__texto{ display:grid; gap:28px; }
.ficha{ margin:0; display:grid; gap:14px; }
.ficha div{ display:grid; grid-template-columns:7.5rem minmax(0, 1fr); gap:12px; border-top:1px solid var(--linea); padding-top:14px; }
.ficha dt{ color:var(--gris); font-size:.95rem; }
.ficha dd{ margin:0; font-weight:500; overflow-wrap:anywhere; }
.ficha a{ text-decoration:none; border-bottom:1px solid var(--azul-claro); }
.ficha a:hover{ color:var(--azul-2); }
.contacto__botones{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- pie */
.pie{ background:var(--azul); color:rgba(255,255,255,.8); padding:clamp(48px, 7vw, 80px) var(--gutter) 36px; display:grid; grid-template-columns:auto 1fr auto; gap:32px 56px; align-items:end; font-size:.93rem; }
.pie a{ text-decoration:none; color:#fff; }
.pie a:hover{ text-decoration:underline; }
.pie__marca{ display:flex; flex-direction:column; align-items:center; color:#fff; width:170px; }
.pie__manos path{ stroke:#fff; }
.pie__marca .marca__clinica{ font-size:1.1rem; margin-top:6px; }
.pie__marca .marca__nombre{ font-size:1.9rem; }
.pie__datos, .pie__legal{ display:grid; gap:6px; }
.pie__legal{ text-align:right; color:rgba(255,255,255,.62); }

/* ---------- volver arriba */
.subir{ position:fixed; right:18px; bottom:18px; z-index:30; width:46px; height:46px; border-radius:50%; border:1px solid var(--linea); background:rgba(247,245,241,.92); color:var(--azul);
  display:grid; place-items:center; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .4s; }
.subir svg{ width:20px; }
.subir.is-visible{ opacity:1; pointer-events:auto; }

/* ---------- tablet y móvil */
@media (max-width:1080px){
  .trats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .especialistas{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px){
  :root{ --nav-h:64px; }
  .nav__abrir{ display:grid; place-items:center; gap:6px; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:0; }
  .nav__abrir span{ display:block; width:22px; height:2px; background:var(--azul); transition:transform .3s; }
  .nav--abierta .nav__abrir span:first-child{ transform:translateY(4px) rotate(45deg); }
  .nav--abierta .nav__abrir span:last-child{ transform:translateY(-4px) rotate(-45deg); }
  .nav__enlaces{ position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; padding:8px var(--gutter) 22px; background:var(--fondo);
    border-bottom:1px solid var(--linea); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; }
  .nav__enlaces a{ padding:13px 0; font-size:1.1rem; width:100%; border-bottom:1px solid var(--linea); }
  .nav__enlaces a:last-child{ border-bottom:0; }
  .nav--abierta .nav__enlaces{ opacity:1; transform:none; pointer-events:auto; }
  .nav__logo span{ display:none; }
  .portada{ grid-template-columns:1fr; min-height:auto; padding-top:calc(var(--nav-h) + 40px); gap:36px; }
  .marca{ width:min(78vw, 400px); }
  .portada__fotos{ max-height:none; aspect-ratio:4/3; }
  .carmen, .contacto{ grid-template-columns:1fr; }
  .carmen__foto{ max-width:480px; }
  .pie{ grid-template-columns:1fr; align-items:start; }
  .pie__legal{ text-align:left; }
}
@media (max-width:560px){
  .trats{ grid-template-columns:1fr 1fr; gap:14px 12px; }
  .trat h3{ font-size:1.02rem; }
  .trat p{ font-size:.9rem; line-height:1.45; }
  .boton--nav{ padding:.8em 1.2em; }
  .ficha div{ grid-template-columns:1fr; gap:2px; }
  .especialistas{ gap:18px 12px; }
  .datos{ gap:16px 28px; }
  .datos li{ max-width:9.5rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}