/* 2clinic · estilos compartidos (marca + landings de especialidad)
   Identidad oscura como el logotipo. Degradado de marca cian, menta y lima.
   Código de color por especialidad: cada una redefine --s-1/--s-2 (su degradado) y --sobre-s (texto encima).
   Radios: botones en píldora, paneles 32px, tarjetas y fotos 24px, campos 12px. */

:root {
  --fondo: #0a0b0d;
  --superficie: #131519;
  --superficie-2: #1a1d22;
  --tinte: #0f1114;
  --tinta: #f3f5f4;
  --tinta-suave: #aab1ae;
  --tinta-tenue: #7f8784;
  --linea: #24282e;

  /* Marca (logotipo principal) */
  --m-1: #00d4ff;
  --m-2: #25e4b2;
  --m-3: #a3f22c;
  --marca: linear-gradient(120deg, var(--m-1) 0%, var(--m-2) 52%, var(--m-3) 100%);

  /* Especialidades: código de color */
  --c-fisio-1: #ffc03d; --c-fisio-2: #ff6a2b;
  --c-psico-1: #f052ff; --c-psico-2: #8a14ff;
  --c-podo-1: #45c8ff;  --c-podo-2: #2f5bff;
  --c-nutri-1: #ffe95c; --c-nutri-2: #f5ae0a;
  --c-logo-1: #ff8fc4;  --c-logo-2: #ff3d86;

  /* Degradado activo de la página (en la marca, el de la marca) */
  --s-1: var(--m-1);
  --s-2: var(--m-3);
  --grad: linear-gradient(120deg, var(--s-1), var(--s-2));
  --sobre-s: #04130f;
  --acento: #3ee9b8;

  --sombra: 0 30px 70px -30px rgb(0 0 0 / 0.8);
  --r-panel: 32px;
  --r-foto: 24px;
  --r-campo: 12px;
  --ancho: 1260px;
  --gutter: 28px;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Outfit", system-ui, sans-serif;
  color-scheme: dark;
}

body.seg-fisio { --s-1: var(--c-fisio-1); --s-2: var(--c-fisio-2); --sobre-s: #1c0b02; --acento: #ff9a4d; }
body.seg-psico { --s-1: var(--c-psico-1); --s-2: var(--c-psico-2); --sobre-s: #ffffff; --acento: #d58bff; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--fondo); }
body {
  --grad: linear-gradient(120deg, var(--s-1), var(--s-2));
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--m-2); color: #04130f; }

.saltar { position: absolute; left: -9999px; top: 8px; background: var(--tinta); color: var(--fondo); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.saltar:focus { left: 16px; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.grad-texto { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-texto { background: var(--marca); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Grano fino (fijo, sin animar) */
.grano { position: relative; isolation: isolate; }
.grano::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Logotipo (réplica tipográfica del original) ---------- */
.logo { display: inline-flex; align-items: baseline; text-decoration: none; font-family: "Fredoka", var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.01em; color: #fff; line-height: 1; }
.logo__2 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 1px; }
.logo__app { background: linear-gradient(120deg, var(--m-2), var(--m-1)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: .78em; margin-left: 2px; }
.logo__seg { font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0; margin-left: 12px; padding: 5px 11px; border-radius: 999px; color: var(--sobre-s); background: var(--grad); align-self: center; }
.logo-dc {
  display: inline-block; width: 30px; height: 18px; vertical-align: -3px; background: currentColor;
  -webkit-mask: url("/logo-dc.svg") center / contain no-repeat; mask: url("/logo-dc.svg") center / contain no-repeat;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 16px;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s var(--curva), border-color .25s var(--curva), box-shadow .3s var(--curva), background-color .25s var(--curva);
}
.boton:active { transform: scale(0.98); }
.boton .ph { transition: transform .3s var(--curva); }
.boton:hover .ph-arrow-right { transform: translateX(3px); }
.boton--grad { background: var(--grad); color: var(--sobre-s); box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--s-2) 75%, transparent); }
.boton--grad:hover { box-shadow: 0 18px 44px -12px color-mix(in srgb, var(--s-2) 95%, transparent); }
.boton--linea { border-color: #3a3f47; color: var(--tinta); background: rgb(255 255 255 / 0.02); }
.boton--linea:hover { border-color: #6c737c; background: rgb(255 255 255 / 0.05); }
.boton--ancho { width: 100%; }
.boton-circular {
  width: 50px; height: 50px; border-radius: 999px; border: 1px solid #3a3f47; background: var(--superficie);
  color: var(--tinta); display: grid; place-items: center; font-size: 20px; cursor: pointer;
  transition: border-color .2s, transform .2s var(--curva);
}
.boton-circular:hover { border-color: #6c737c; }
.boton-circular:active { transform: scale(0.95); }
.boton-circular:disabled { opacity: .3; cursor: default; }

/* ---------- Navegación ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color .35s var(--curva), box-shadow .35s; }
.nav.con-fondo { background: rgb(10 11 13 / 0.78); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 1px 0 var(--linea); }
.nav__fila { display: flex; align-items: center; gap: 32px; height: 76px; }
.nav.con-fondo .nav__fila { height: 68px; }
.nav__enlaces { display: flex; gap: 30px; margin-left: auto; }
.nav__enlaces a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--tinta-suave); transition: color .2s; }
.nav__enlaces a:hover { color: var(--tinta); }
.nav .boton--nav { padding: 10px 20px; font-size: 15px; }
.nav__menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; color: var(--tinta); font-size: 28px; cursor: pointer; }
.menu-movil { display: grid; gap: 4px; padding: 8px var(--gutter) 22px; background: var(--fondo); box-shadow: 0 1px 0 var(--linea); }
.menu-movil[hidden] { display: none; }
.menu-movil a:not(.boton) { padding: 12px 0; text-decoration: none; font-weight: 500; font-size: 18px; border-bottom: 1px solid var(--linea); }
.menu-movil .boton { margin-top: 14px; }
.nav.menu-abierto { background: var(--fondo); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 132px 0 44px; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); }
.aurora::before { width: 62vw; height: 62vw; right: -18vw; top: -24vw; background: radial-gradient(circle, color-mix(in srgb, var(--s-1) 55%, transparent), transparent 65%); }
.aurora::after { width: 50vw; height: 50vw; left: -16vw; bottom: -26vw; background: radial-gradient(circle, color-mix(in srgb, var(--s-2) 42%, transparent), transparent 65%); }
.hero__rejilla { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; flex: 1; }
.etiqueta { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; padding: 7px 16px 7px 8px; border-radius: 999px; background: rgb(255 255 255 / 0.05); border: 1px solid #2c3037; margin-bottom: 28px; color: var(--tinta-suave); }
.etiqueta .ph { font-size: 16px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: var(--grad); color: var(--sobre-s); }
.hero h1 { font-size: clamp(2.9rem, 1.4rem + 4.2vw, 5.4rem); line-height: .96; letter-spacing: -0.05em; font-weight: 700; }
.hero h1 .grad-texto { display: block; padding-bottom: .08em; }
.hero__sub { margin-top: 26px; font-size: 19px; line-height: 1.55; max-width: 42ch; color: var(--tinta-suave); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Leyenda de especialidades (enlaces reales con su color) */
.leyenda { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 64px; }
.pastilla {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 11px; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 15px; color: var(--tinta);
  background: rgb(255 255 255 / 0.04); border: 1px solid #2a2e35;
  transition: border-color .25s var(--curva), transform .25s var(--curva), background-color .25s;
}
a.pastilla:hover { border-color: var(--p2, var(--s-2)); transform: translateY(-2px); background: rgb(255 255 255 / 0.07); }
.pastilla__color { width: 20px; height: 20px; border-radius: 999px; background: linear-gradient(135deg, var(--p1, var(--s-1)), var(--p2, var(--s-2))); }
.pastilla small { color: var(--tinta-tenue); font-weight: 500; font-size: 13px; }
.pastilla .ph { font-size: 16px; color: var(--tinta-tenue); }
.c-fisio { --p1: var(--c-fisio-1); --p2: var(--c-fisio-2); }
.c-psico { --p1: var(--c-psico-1); --p2: var(--c-psico-2); }
.c-podo  { --p1: var(--c-podo-1);  --p2: var(--c-podo-2); }
.c-nutri { --p1: var(--c-nutri-1); --p2: var(--c-nutri-2); }
.c-logo  { --p1: var(--c-logo-1);  --p2: var(--c-logo-2); }

/* Collage del hero: cada foto con el borde de su especialidad */
.collage { position: relative; aspect-ratio: 1 / 1.04; }
.collage figure { position: absolute; border-radius: var(--r-foto); padding: 3px; background: linear-gradient(135deg, var(--p1, var(--s-1)), var(--p2, var(--s-2))); box-shadow: 0 34px 70px -30px rgb(0 0 0 / 0.9); }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-foto) - 3px); }
.collage__a { left: 0; top: 5%; width: 58%; height: 78%; }
.collage__b { right: 0; top: 0; width: 38%; height: 45%; }
.collage__c { right: 5%; bottom: 0; width: 44%; height: 43%; }
.collage__a img { object-position: 60% center; }

.aviso {
  position: absolute; left: 26%; bottom: 2%; width: 285px; padding: 15px 17px; z-index: 2;
  background: rgb(22 25 30 / 0.88); color: var(--tinta); border-radius: 18px; border: 1px solid #2f343c;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.9); font-size: 14.5px; line-height: 1.45;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.aviso__cabeza { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 7px; }
.aviso__icono { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--grad); color: var(--sobre-s); font-size: 15px; }
.aviso__hora { margin-left: auto; font-weight: 500; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.aviso__estado { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #2f343c; font-weight: 700; font-size: 14px; color: var(--acento); }
.aviso__estado .ph { font-size: 18px; }
.aviso__barra { height: 6px; border-radius: 999px; background: #262a30; margin-top: 10px; overflow: hidden; }
.aviso__barra span { display: block; height: 100%; border-radius: inherit; background: var(--grad); }

/* ---------- Secciones ---------- */
.seccion { padding: 128px 0; position: relative; }
.seccion--tinte { background: var(--tinte); }
.cabecera { max-width: 800px; margin-bottom: 60px; }
.cabecera--estrecha { max-width: 680px; }
.cabecera h2, .h2 { font-size: clamp(2.3rem, 1.3rem + 2.8vw, 3.9rem); line-height: 1; letter-spacing: -0.045em; }
.cabecera__texto { margin-top: 22px; color: var(--tinta-suave); font-size: 19px; max-width: 56ch; }
.cabecera--fila { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.cabecera--fila h2 { max-width: 700px; }
.antetitulo { display: inline-block; font-size: 14px; font-weight: 700; margin-bottom: 18px; letter-spacing: 0.01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Especialidades con código de color */
.sectores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.sector {
  --sobre: #04130f;
  position: relative; border-radius: var(--r-panel); overflow: hidden; text-decoration: none; color: var(--sobre);
  grid-column: span 2; min-height: 320px; display: flex; flex-direction: column; padding: 30px;
  background: linear-gradient(140deg, var(--p1, var(--s-1)), var(--p2, var(--s-2)));
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.sector.c-fisio { --sobre: #1c0b02; }
.sector.c-psico { --sobre: #ffffff; }
.sector.c-podo  { --sobre: #ffffff; }
.sector.c-nutri { --sobre: #1a1302; }
.sector.c-logo  { --sobre: #230411; }
.sector--grande { grid-column: span 3; min-height: 600px; padding: 36px; }
a.sector:hover { transform: translateY(-5px); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--p2, var(--s-2)) 80%, transparent); }
.sector__ruta { font-size: 15px; font-weight: 600; opacity: .8; }
.sector h3 { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.8rem); line-height: 1; margin-top: 8px; letter-spacing: -0.045em; }
.sector--grande h3 { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); }
.sector p { margin-top: 12px; max-width: 36ch; font-size: 17px; opacity: .9; }
.sector__foto { margin-top: auto; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9.5; box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.6); }
.sector__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
a.sector:hover .sector__foto img { transform: scale(1.05); }
.sector__ir { position: absolute; top: 28px; right: 28px; width: 54px; height: 54px; border-radius: 999px; background: #0a0b0d; color: #fff; display: grid; place-items: center; font-size: 22px; transition: transform .4s var(--curva); }
a.sector:hover .sector__ir { transform: rotate(-45deg); }
.sector__pronto { margin-top: auto; align-self: flex-start; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / 0.18); }
.sector.c-psico .sector__pronto, .sector.c-podo .sector__pronto { background: rgb(255 255 255 / 0.18); }

/* Rasgos de una clínica de referencia */
.rasgos { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 80px; align-items: start; }
.rasgos__titulo { position: sticky; top: 120px; }
.rasgos__titulo p { margin-top: 22px; color: var(--tinta-suave); font-size: 19px; max-width: 42ch; }
.rasgos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rasgo { display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 28px; border-radius: var(--r-foto); background: var(--superficie); border: 1px solid var(--linea); transition: transform .4s var(--curva), border-color .4s var(--curva); }
.rasgo:hover { transform: translateX(6px); border-color: #3a3f47; }
.rasgo__icono { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; color: var(--sobre-s); background: var(--grad); }
.rasgo h3 { font-size: 23px; line-height: 1.15; letter-spacing: -0.03em; }
.rasgo p { margin-top: 8px; color: var(--tinta-suave); font-size: 16.5px; }

/* Cinta (una sola por página) */
.cinta { overflow: hidden; padding: 30px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cinta__pista { display: flex; align-items: center; gap: 40px; width: max-content; font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 2.8vw, 4.2rem); letter-spacing: -0.045em; line-height: 1.1; white-space: nowrap; }
.cinta__pista span { background: linear-gradient(120deg, var(--p1, var(--s-1)), var(--p2, var(--s-2))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cinta__pista i { width: 14px; height: 14px; border-radius: 999px; background: #2e333a; flex-shrink: 0; }

/* Manifiesto con foto */
.manifiesto { position: relative; min-height: 90vh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: #070809; margin: 0 10px; border-radius: var(--r-panel); }
.manifiesto__foto { position: absolute; top: 0; bottom: 0; right: 0; left: 28%; width: 72%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; }
.manifiesto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #070809 0%, #070809 28%, rgb(7 8 9 / 0.5) 42%, rgb(7 8 9 / 0) 60%), linear-gradient(0deg, rgb(7 8 9 / 0.6) 0%, transparent 40%);
}
.manifiesto__texto { padding-top: 140px; padding-bottom: 96px; }
.manifiesto h2 { font-size: clamp(2.4rem, 1.2rem + 3.8vw, 4.8rem); line-height: .98; max-width: 12ch; letter-spacing: -0.05em; }
.manifiesto p { margin-top: 26px; font-size: 19px; max-width: 44ch; color: rgb(243 245 244 / 0.82); }

/* Recorrido de fidelización */
.recorrido { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; }
.recorrido__fotos { position: sticky; top: 110px; height: min(72vh, 640px); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--sombra); }
.recorrido__fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .7s var(--curva), transform 1.2s var(--curva); }
.recorrido__fotos img.activa { opacity: 1; transform: scale(1); }
.recorrido__pasos { list-style: none; margin: 0; padding: 0; }
.paso { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s var(--curva); position: relative; padding-left: 32px; }
.paso::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 0; border-radius: 999px; background: var(--grad); transform: translateY(-50%); transition: height .6s var(--curva); }
.paso.activo { opacity: 1; }
.paso.activo::before { height: 160px; }
.paso__foto { display: none; }
.paso__momento { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--acento); }
.paso__momento .ph { font-size: 20px; }
.paso h3 { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem); line-height: 1.05; margin-top: 14px; letter-spacing: -0.04em; }
.paso p { margin-top: 16px; color: var(--tinta-suave); font-size: 18px; max-width: 46ch; }

/* Carril de herramientas */
.carril__controles { display: flex; gap: 10px; flex-shrink: 0; }
.carril {
  display: grid; grid-auto-flow: column; grid-auto-columns: 350px; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))) 8px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
}
.carril::-webkit-scrollbar { display: none; }
.herr { scroll-snap-align: start; border-radius: var(--r-foto); background: var(--superficie); padding: 30px; min-height: 430px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--linea); }
.herr__icono { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; color: var(--sobre-s); background: var(--grad); margin-bottom: auto; }
.herr h3 { font-size: 25px; line-height: 1.1; letter-spacing: -0.035em; }
.herr p { margin-top: 10px; color: var(--tinta-suave); font-size: 16px; }
.herr--foto { position: relative; overflow: hidden; isolation: isolate; padding: 0; border: 0; }
.herr--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.herr--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(7 8 9 / 0) 30%, rgb(7 8 9 / 0.9) 100%); }
.herr__texto { padding: 30px; }
.herr__texto p { color: rgb(243 245 244 / 0.84); }

/* Rejilla de funciones (landings de especialidad) */
.funciones { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.func { border-radius: var(--r-foto); background: var(--superficie); border: 1px solid var(--linea); padding: 30px; display: flex; flex-direction: column; min-height: 300px; grid-column: span 2; }
.func--ancha { grid-column: span 4; }
.func--mitad { grid-column: span 3; }
.func__icono { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; color: var(--sobre-s); background: var(--grad); margin-bottom: auto; }
.func h3 { font-size: 25px; line-height: 1.1; letter-spacing: -0.035em; margin-top: 28px; }
.func p { margin-top: 10px; color: var(--tinta-suave); font-size: 16.5px; max-width: 48ch; }
.func--foto { position: relative; overflow: hidden; isolation: isolate; border: 0; justify-content: flex-end; }
.func--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.func--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(7 8 9 / 0) 25%, rgb(7 8 9 / 0.9) 100%); }
.func--foto p { color: rgb(243 245 244 / 0.86); }
.func--foto .func__icono { position: absolute; top: 28px; left: 28px; }
.func--grad { background: var(--grad); color: var(--sobre-s); border: 0; }
.func--grad p { color: inherit; opacity: .88; }
.func--grad .func__icono { background: rgb(0 0 0 / 0.16); color: inherit; }
body.seg-psico .func--grad .func__icono { background: rgb(255 255 255 / 0.18); }

/* Momentos (landings de especialidad) */
.momentos { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; align-items: stretch; }
.momento { border-radius: var(--r-foto); overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); display: flex; flex-direction: column; }
.momento img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.momento:first-child img { aspect-ratio: 4 / 3.4; }
.momento__texto { padding: 26px 28px 30px; }
.momento__cuando { font-size: 14px; font-weight: 700; color: var(--acento); }
.momento h3 { font-size: 24px; line-height: 1.12; margin-top: 8px; letter-spacing: -0.035em; }
.momento p { margin-top: 10px; color: var(--tinta-suave); font-size: 16.5px; }

/* Frase de especialidad sobre foto */
.frase { position: relative; margin: 0 10px; border-radius: var(--r-panel); overflow: hidden; isolation: isolate; min-height: 72vh; display: flex; align-items: center; }
.frase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.frase::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(7 8 9 / 0.94) 0%, rgb(7 8 9 / 0.7) 42%, rgb(7 8 9 / 0.05) 78%); }
.frase h2 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1; letter-spacing: -0.05em; max-width: 14ch; }
.frase p { margin-top: 24px; font-size: 19px; max-width: 42ch; color: rgb(243 245 244 / 0.86); }

/* Otras especialidades */
.otras { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.otras .sector { grid-column: auto; min-height: 260px; }

/* Confianza */
.confianza { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }
.confianza__foto { border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 4 / 5; position: sticky; top: 110px; }
.confianza__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
.dc { position: relative; margin-top: 34px; padding: 30px; border-radius: var(--r-foto); background: var(--superficie); }
.dc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--marca); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.dc__cifra { font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 1; letter-spacing: -0.05em; display: block; margin-bottom: 12px; }
.dc p { font-size: 18px; color: var(--tinta-suave); }
.dc p strong { color: var(--tinta); font-weight: 700; }
.dc__firma { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; font-size: 15px; }
.garantias { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 32px; }
.garantias li { display: flex; gap: 16px; }
.garantias .ph { font-size: 28px; color: var(--acento); flex-shrink: 0; margin-top: 2px; }
.garantias h3 { font-family: "Instrument Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.garantias p { margin-top: 6px; color: var(--tinta-suave); font-size: 16px; }

/* Preguntas */
.preguntas { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; 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; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary .ph { font-size: 20px; color: var(--acento); transition: transform .35s var(--curva); flex-shrink: 0; }
.acordeon details[open] summary .ph { transform: rotate(45deg); }
.acordeon details p { padding: 0 48px 26px 0; color: var(--tinta-suave); }

/* Cierre con formulario */
.cierre { position: relative; margin: 0 10px; border-radius: var(--r-panel); background: var(--superficie); padding: 110px 0; overflow: hidden; isolation: isolate; border: 1px solid var(--linea); }
.cierre .aurora::before { top: auto; bottom: -30vw; right: -10vw; }
.cierre .aurora::after { bottom: auto; top: -30vw; }
.cierre__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.cierre h2 { font-size: clamp(2.4rem, 1.3rem + 3.2vw, 4.4rem); line-height: .98; letter-spacing: -0.05em; }
.cierre__texto p { margin-top: 22px; font-size: 19px; max-width: 40ch; color: var(--tinta-suave); }
.cierre__lista { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.cierre__lista li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.cierre__lista .ph { font-size: 20px; color: var(--acento); }
.caja-form { background: #0d0f12; border: 1px solid #2a2e35; border-radius: var(--r-foto); padding: 40px; box-shadow: var(--sombra); }
.caja-form h3 { font-size: 26px; letter-spacing: -0.035em; }
.formulario { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.campo { display: grid; gap: 8px; align-content: start; }
.campo label { font-size: 14px; font-weight: 600; color: var(--tinta); }
.campo input, .campo select {
  font: inherit; font-size: 16px; color: var(--tinta); background: #16191d;
  border: 1px solid #30353c; border-radius: var(--r-campo); padding: 12px 14px; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }
.campo__error { display: none; font-size: 13px; color: #ffb4ab; }
.campo.con-error input { border-color: #ffb4ab; }
.campo.con-error .campo__error, .error-privacidad.visible { display: block; }
.error-privacidad { grid-column: 1 / -1; margin-top: -10px; }
.casilla { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--tinta-suave); }
.casilla input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--acento); }
.formulario .boton { grid-column: 1 / -1; margin-top: 6px; }
.enviado { margin-top: 24px; padding: 28px; border-radius: var(--r-foto); background: var(--superficie-2); }
.enviado .ph { font-size: 34px; color: var(--acento); }
.enviado h3 { margin-top: 10px; font-size: 22px; }
.enviado p { margin-top: 8px; color: var(--tinta-suave); }

/* Pie */
.pie { padding: 110px 0 40px; }
.pie__rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.pie__lema { margin-top: 16px; color: var(--tinta-suave); max-width: 32ch; }
.pie nav { display: grid; gap: 10px; align-content: start; }
.pie nav h3 { font-family: "Instrument Sans", sans-serif; font-size: 14px; font-weight: 600; color: var(--tinta-tenue); margin-bottom: 4px; letter-spacing: 0; }
.pie nav a { text-decoration: none; color: var(--tinta-suave); font-size: 15px; display: inline-flex; align-items: center; gap: 9px; }
.pie nav a:hover { color: var(--tinta); }
.pie nav .pastilla__color { width: 10px; height: 10px; }
.pie__gigante { font-family: "Fredoka", var(--display); font-weight: 600; letter-spacing: -0.03em; line-height: .85; font-size: clamp(4.6rem, 1.5rem + 15vw, 15rem); margin-top: 80px; color: #16181c; user-select: none; white-space: nowrap; }
.pie__gigante b { font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pie__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tinta-tenue); }
.pie__base .dc__firma { margin-top: 0; font-size: 14px; color: var(--tinta-suave); }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .entrada { opacity: 0; transform: translateY(20px); animation: subir .9s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
  .entrada-foto { opacity: 0; transform: translateY(26px) scale(.97); animation: subir 1.1s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 120ms + 200ms); }
  .aviso { opacity: 0; transform: translateY(16px); animation: subir .8s var(--curva) forwards; animation-delay: 1s; }
  .aviso__estado { opacity: 0; animation: fundido .5s var(--curva) forwards; animation-delay: 2s; }
  .aviso__barra span { transform-origin: left; transform: scaleX(0); animation: llenar 1.2s var(--curva) forwards; animation-delay: 1.4s; }
  .revelar { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--curva), transform .8s var(--curva); transition-delay: calc(var(--d, 0) * 80ms); }
  .revelar.visto { opacity: 1; transform: none; }
  .cinta__pista { animation: cinta 40s linear infinite; }
}
@keyframes subir { to { opacity: 1; transform: none; } }
@keyframes fundido { to { opacity: 1; } }
@keyframes llenar { to { transform: scaleX(1); } }
@keyframes cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .recorrido__fotos img, .sector__foto img { transition: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .nav__enlaces { gap: 20px; }
  .hero__rejilla { gap: 36px; }
  .funciones { grid-template-columns: repeat(2, 1fr); }
  .func, .func--mitad { grid-column: span 1; }
  .func--ancha { grid-column: span 2; }
  .sectores { grid-template-columns: repeat(2, 1fr); }
  .sector, .sector--grande { grid-column: span 1; }
  .sector:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 900px) {
  :root { --gutter: 18px; --r-panel: 24px; }
  body { font-size: 16px; }
  .nav__enlaces, .nav .boton--nav { display: none; }
  .nav__menu { display: grid; place-items: center; }
  .nav__fila, .nav.con-fondo .nav__fila { height: 64px; }
  .logo { font-size: 24px; }
  .logo__seg { font-size: 13px; margin-left: 8px; padding: 4px 9px; }

  .hero { padding: 100px 0 28px; min-height: 0; }
  .hero__rejilla { grid-template-columns: 1fr; gap: 44px; }
  .hero__sub { font-size: 17px; }
  .leyenda { margin-top: 44px; }
  .collage { aspect-ratio: 1 / 0.92; }
  .aviso { left: auto; right: 3%; bottom: -3%; width: min(250px, 68vw); font-size: 13.5px; }
  .aurora::before { width: 120vw; height: 120vw; right: -50vw; top: -40vw; }
  .aurora::after { width: 110vw; height: 110vw; left: -50vw; bottom: -50vw; }

  .seccion { padding: 84px 0; }
  .cabecera { margin-bottom: 40px; }
  .cabecera--fila { flex-direction: column; align-items: flex-start; }
  .cabecera__texto { font-size: 17px; }

  .sectores, .otras { grid-template-columns: 1fr; }
  .sector, .sector--grande, .sector:last-child:nth-child(odd) { grid-column: auto; }
  .sector--grande { min-height: 500px; padding: 28px; }
  .sector { min-height: 240px; padding: 26px; }
  .sector__ir { top: 22px; right: 22px; width: 46px; height: 46px; }

  .rasgos { grid-template-columns: 1fr; gap: 40px; }
  .rasgos__titulo { position: static; }
  .rasgo { grid-template-columns: 1fr; gap: 16px; padding: 24px; }

  .manifiesto { min-height: 82vh; margin: 0 8px; }
  .manifiesto__foto { left: 0; width: 100%; object-position: 48% center; }
  .manifiesto::after { background: linear-gradient(0deg, #070809 0%, rgb(7 8 9 / 0.55) 55%, rgb(7 8 9 / 0.1) 100%); }
  .manifiesto__texto { padding-bottom: 60px; }
  .manifiesto p { font-size: 17px; }

  .recorrido { grid-template-columns: 1fr; gap: 0; }
  .recorrido__fotos { display: none; }
  .paso { min-height: 0; opacity: 1; padding: 0 0 56px; }
  .paso::before { display: none; }
  .paso__foto { display: block; border-radius: var(--r-foto); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; margin-bottom: 24px; }
  .paso p { font-size: 17px; }

  .carril { grid-auto-columns: 82vw; }
  .herr { min-height: 380px; }

  .funciones { grid-template-columns: 1fr; }
  .func, .func--ancha, .func--mitad { grid-column: auto; min-height: 250px; }
  .func--foto { min-height: 360px; }

  .momentos { grid-template-columns: 1fr; }

  .frase { margin: 0 8px; min-height: 70vh; align-items: flex-end; padding-bottom: 48px; }
  .frase::after { background: linear-gradient(0deg, rgb(7 8 9 / 0.95) 0%, rgb(7 8 9 / 0.6) 55%, rgb(7 8 9 / 0.05) 100%); }
  .frase p { font-size: 17px; }

  .confianza { grid-template-columns: 1fr; gap: 40px; }
  .confianza__foto { position: static; aspect-ratio: 16 / 11; }
  .garantias { grid-template-columns: 1fr; gap: 26px; }

  .preguntas { grid-template-columns: 1fr; gap: 32px; }
  .acordeon summary { font-size: 17px; }
  .acordeon details p { padding-right: 0; }

  .cierre { margin: 0 8px; padding: 72px 0; }
  .cierre__rejilla { grid-template-columns: 1fr; gap: 40px; }
  .caja-form { padding: 28px 20px; }
  .formulario { grid-template-columns: 1fr; }

  .pie { padding-top: 72px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__rejilla > div:first-child { grid-column: 1 / -1; }
  .pie__gigante { margin-top: 56px; }
}

/* Tarjeta de marca (vuelta a 2Clinic desde una especialidad) */
.c-marca { --p1: var(--m-1); --p2: var(--m-3); }
.sector.c-marca { --sobre: #04130f; }

/* Especialidades añadidas (26-sep): mismo sistema, su color */
body.seg-podo  { --s-1: var(--c-podo-1);  --s-2: var(--c-podo-2);  --sobre-s: #ffffff; --acento: #7fb6ff; }
body.seg-nutri { --s-1: var(--c-nutri-1); --s-2: var(--c-nutri-2); --sobre-s: #1a1302; --acento: #ffd24d; }
body.seg-logo  { --s-1: var(--c-logo-1);  --s-2: var(--c-logo-2);  --sobre-s: #230411; --acento: #ff8fc4; }
body.seg-podo .func--grad .func__icono { background: rgb(255 255 255 / 0.18); }
.error-envio.visible { display: block; grid-column: 1 / -1; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.boton:disabled { opacity: .7; cursor: progress; }

/* Páginas legales */
.legal { padding: 150px 0 60px; }
.legal__cuerpo { max-width: 800px; }
.legal h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.8rem); line-height: 1; letter-spacing: -0.045em; }
.legal__fecha { margin-top: 16px; color: var(--tinta-tenue); font-size: 15px; }
.legal section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--linea); }
.legal h2 { font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem); letter-spacing: -0.03em; }
.legal p, .legal li { color: var(--tinta-suave); font-size: 17px; }
.legal p { margin-top: 14px; }
.legal ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.legal strong { color: var(--tinta); font-weight: 600; }
.legal a { color: var(--acento); }
.legal table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linea); color: var(--tinta-suave); vertical-align: top; }
.legal th { color: var(--tinta); font-weight: 600; background: var(--superficie); }
.legal__otras { margin-top: 56px !important; padding-top: 24px; border-top: 1px solid var(--linea); }
@media (max-width: 900px) {
  .legal { padding-top: 110px; }
  .legal table { font-size: 14px; }
  .legal th, .legal td { padding: 10px 8px; }
}