/* Albura Estudio Dental · Concepto WEBO · minimalista luminoso
   Paleta: porcelana, blanco, niebla, grafito y un único acento verde azulado; una banda honda del mismo verde.
   Tipografía: Satoshi 300 para titulares grandes y ligeros, 400 y 500 para el resto.
   Forma: radios pequeños (4px) en superficies, píldora solo en lo pulsable. Filetes finos que se dibujan.
   Movimiento (4/10, sereno y preciso): claridad, de lo borroso a lo nítido. La foto de la portada enfoca una vez
   mientras el titular sube palabra a palabra; al bajar, una línea une los pasos de la primera visita y se llena con
   la lectura; titulares por líneas y filetes que se dibujan. El explorador cambia de panel con fundido corto. */

@font-face { font-family: "Satoshi"; src: url("/assets/fonts/conceptos/satoshi-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/conceptos/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/conceptos/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --porcelana: #F7F7F4;
  --blanco: #FFFFFF;
  --niebla: #E7ECEC;
  --grafito: #1B2328;
  --gris: #56616A;
  --acento: #0E6E6C;
  --acento-hondo: #0A5755;
  --hondo: #0F2E2D;
  --sobre-hondo: #F7F7F4;
  --sobre-hondo-2: rgb(247 247 244 / .74);
  --filete: rgb(27 35 40 / .12);
  --filete-fuerte: rgb(27 35 40 / .26);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --cajon: cubic-bezier(.32, .72, 0, 1);
  --ancho: 1312px;
  --margen: clamp(20px, 4.4vw, 64px);
  --hueco: clamp(16px, 1.7vw, 24px);
  --radio: 4px;
  --cab: 76px;
}

html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--porcelana);
  color: var(--grafito);
  font: 400 1.0625rem/1.62 "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-kerning: normal;
}

::selection { background: #CFE2E1; color: var(--grafito); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }

.saltar {
  position: absolute; left: 16px; top: -64px; z-index: 60;
  padding: 10px 16px; border-radius: 999px;
  background: var(--grafito); color: var(--porcelana); text-decoration: none; font-size: .9375rem;
}
.saltar:focus-visible { top: 12px; }

/* Contenedores con retícula de 12 columnas */
.cabecera__in, .portada__in, .motivo__in, .visita__in, .estudio__in, .cita__in, .pie__in {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Botones y enlaces */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--acento); color: var(--porcelana);
  font-size: 1rem; font-weight: 500; line-height: 1; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--cabecera {
  min-height: 42px; padding: 0 20px; font-size: .9375rem;
  background: transparent; color: var(--acento);
  box-shadow: inset 0 0 0 1px rgb(14 110 108 / .5);
}
.enlace {
  color: var(--acento); font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .34em;
  text-decoration-color: rgb(14 110 108 / .35);
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--acento-hondo); }
  .boton--cabecera:hover { background: var(--acento); color: var(--porcelana); box-shadow: inset 0 0 0 1px var(--acento); }
  .enlace:hover { text-decoration-color: currentColor; }
  .cabecera__nav a:hover, .pie a:hover { color: var(--acento); }
}

/* Cabecera: transparente sobre la foto, porcelana translúcida al bajar */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 40;
  transition: background-color 320ms ease, box-shadow 320ms ease;
}
.cabecera.es-solida {
  background: rgb(247 247 244 / .88);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--filete);
}
@media (prefers-reduced-transparency: reduce) { .cabecera.es-solida { background: var(--porcelana); } }
.cabecera__in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: var(--cab); gap: 24px;
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; }
.marca__signo { width: 24px; height: 24px; flex: none; }
.marca__nombre { font-weight: 500; font-size: 1.1875rem; letter-spacing: -.02em; }
.marca__sub { color: var(--gris); font-size: .9375rem; padding-left: 12px; border-left: 1px solid var(--filete-fuerte); line-height: 1.1; }
.cabecera__nav ul { display: flex; gap: clamp(20px, 2.4vw, 36px); }
.cabecera__nav a { text-decoration: none; font-size: .9375rem; color: var(--grafito); transition: color 200ms ease; }
.boton--cabecera { justify-self: end; }

/* Portada a sangre con velo de luz */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; min-height: 100dvh;
  display: grid; align-items: end;
  background: var(--niebla);
}
.foto { position: relative; overflow: hidden; margin: 0; background: var(--niebla); }
.foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--niebla); }
.portada__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.portada__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(247 247 244 / .95) 0%, rgb(247 247 244 / .86) 26%, rgb(247 247 244 / .32) 48%, rgb(247 247 244 / 0) 64%),
    linear-gradient(180deg, rgb(247 247 244 / .55) 0%, rgb(247 247 244 / 0) 18%, rgb(247 247 244 / 0) 82%, rgb(247 247 244 / .6) 100%);
}
.portada__in { width: 100%; padding-top: calc(var(--cab) + 40px); padding-bottom: clamp(56px, 11vh, 120px); }
.portada__titulo {
  font-weight: 300; font-size: clamp(3.4rem, 7.4vw, 6rem); line-height: .98; letter-spacing: -.04em;
  max-width: 8.4ch;
}
.portada__titulo .p { display: inline-block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: top; }
.portada__titulo .p > span { display: inline-block; }
.portada__sub { margin-top: clamp(20px, 3vh, 30px); font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; color: #3F4A50; max-width: 36ch; }
.portada__acciones { margin-top: clamp(28px, 4.4vh, 40px); }

/* Explorador de motivos */
.motivo { background: var(--blanco); }
.motivo__in { padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px); }
.motivo__cab { max-width: 640px; }
.motivo h2, .visita h2, .cita h2 { font-weight: 300; letter-spacing: -.035em; }
.motivo h2 { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.02; }
.motivo__cab p { margin-top: 20px; color: var(--gris); max-width: 50ch; font-size: 1.125rem; }

.explorador {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: start;
}
.explorador__lista { grid-column: 1 / 5; position: relative; border-bottom: 1px solid var(--filete); }
.explorador__lista[hidden] { display: none; }
.explorador__lista [role=tab] {
  display: flex; align-items: center; width: 100%; min-height: 66px; padding: 0 8px 0 0;
  border: 0; border-top: 1px solid var(--filete); background: none; cursor: pointer;
  font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; text-align: left; color: var(--gris);
  transition: color 220ms ease;
}
.explorador__lista [role=tab] > * { pointer-events: none; }
.explorador__lista [role=tab][aria-selected=true] { color: var(--grafito); font-weight: 500; }
.explorador__lista [role=tab]:focus-visible { outline-offset: -2px; }
.explorador__marca {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; margin-top: -.5px;
  background: var(--acento); pointer-events: none;
  transition: transform 480ms var(--cajon);
}
@media (hover: hover) and (pointer: fine) { .explorador__lista [role=tab]:hover { color: var(--grafito); } }

.explorador__paneles { grid-column: 6 / 13; display: grid; }
.panel {
  position: relative; overflow: hidden;
  padding: clamp(28px, 3.6vw, 52px);
  border-radius: var(--radio);
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgb(255 255 255 / .95), rgb(255 255 255 / 0) 70%),
    var(--porcelana);
  box-shadow: inset 0 0 0 1px var(--filete);
}
.panel + .panel { margin-top: 16px; }
.panel:focus-visible { outline-offset: 2px; }
.panel__motivo { color: var(--gris); font-size: .9375rem; }
.panel__motivo::before { content: "«"; } .panel__motivo::after { content: "»"; }
.panel h3 { margin-top: 10px; font-weight: 300; font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.05; letter-spacing: -.03em; color: var(--acento); }
.panel__texto { margin-top: 18px; font-size: 1.125rem; line-height: 1.55; max-width: 46ch; }
.panel__datos {
  margin-top: clamp(28px, 3.4vw, 44px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px);
}
.panel__datos div { border-top: 1px solid var(--filete-fuerte); padding-top: 14px; }
.panel__datos dt { font-size: .875rem; color: var(--gris); }
.panel__datos dd { margin: 4px 0 0; font-size: 1rem; line-height: 1.45; }
.explorador__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.explorador__pie p { color: var(--gris); font-size: .9375rem; max-width: 34ch; }

/* Con JS: los paneles se apilan en la misma celda y solo se ve el elegido (altura estable, sin saltos) */
.explorador.es-activo .panel { grid-area: 1 / 1; margin-top: 0; }
.explorador.es-activo .panel[hidden] { display: block; visibility: hidden; }
.explorador.es-activo .explorador__pie { grid-area: 2 / 1; }

/* Primera visita */
.visita { background: var(--niebla); }
.visita__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: start;
  padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px);
}
.foto--sala {
  grid-column: 1 / 7; width: 100%; max-width: 762px; aspect-ratio: 3 / 2; border-radius: var(--radio); background: var(--porcelana);
  position: sticky; top: calc(var(--cab) + 24px);
}
.foto--sala > img { object-position: 60% 50%; }
.visita__texto { grid-column: 8 / 13; }
.visita h2 { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.02; }
.visita__entrada { margin-top: 20px; font-size: 1.125rem; color: var(--gris); max-width: 40ch; }
.pasos { --avance: 0; position: relative; margin-top: clamp(48px, 6vw, 80px); display: grid; gap: clamp(36px, 4vw, 56px); }
/* La línea de la visita: une los tres números (albura.js mide dónde empieza y acaba) y se llena con el scroll */
.con-js .pasos::before, .con-js .pasos::after {
  content: ""; position: absolute; left: 16px; top: var(--linea-ini, 44px); height: var(--linea-alto, 0px);
  width: 1px; margin-left: -.5px; background: var(--filete-fuerte); pointer-events: none;
}
.con-js .pasos::after { width: 2px; margin-left: -1px; background: var(--acento); transform-origin: 50% 0; transform: scaleY(var(--avance)); }
.paso { position: relative; display: grid; grid-template-columns: 56px 1fr; padding-top: 28px; }
.paso::before {
  content: ""; position: absolute; left: 56px; right: 0; top: 0; height: 1px; background: var(--filete-fuerte);
  transform-origin: 0 50%;
}
.paso__n {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--niebla); box-shadow: inset 0 0 0 1px var(--filete-fuerte);
  font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--acento);
  transition: background-color 320ms ease, color 320ms ease, box-shadow 320ms ease;
}
.paso.es-alcanzado .paso__n { background: var(--acento); color: var(--porcelana); box-shadow: inset 0 0 0 1px var(--acento); }
.paso h3 { font-size: 1.375rem; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; padding-top: 2px; }
.paso p { margin-top: 8px; color: var(--gris); max-width: 42ch; }

/* El estudio: banda honda */
.estudio { background: var(--hondo); color: var(--sobre-hondo); }
.estudio ::selection { background: #2D6B69; color: var(--sobre-hondo); }
.estudio :focus-visible { outline-color: var(--sobre-hondo); }
.estudio__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: center;
  padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px);
}
.estudio__texto { grid-column: 1 / 7; grid-row: 1; }
.foto--retrato { grid-column: 8 / 13; grid-row: 1; justify-self: end; width: 100%; max-width: 406px; aspect-ratio: 406 / 508; border-radius: var(--radio); background: #1A3B3A; }
.estudio h2 { font-weight: 300; font-size: clamp(2.3rem, 4.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.035em; max-width: 15ch; }
.estudio__entrada { margin-top: 22px; color: var(--sobre-hondo-2); font-size: 1.125rem; max-width: 44ch; }
.compromisos {
  margin-top: clamp(44px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(24px, 3vw, 48px);
}
.compromisos li { position: relative; padding-top: 18px; }
.compromisos li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(247 247 244 / .22); transform-origin: 0 50%; }
.compromisos h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }
.compromisos p { margin-top: 6px; color: var(--sobre-hondo-2); font-size: 1rem; max-width: 34ch; }

/* Cita, horario y dónde estamos */
.cita__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: end;
  padding-top: clamp(104px, 12vw, 176px); padding-bottom: clamp(88px, 10vw, 144px);
}
.cita__llamada { grid-column: 1 / 8; }
.cita h2 { font-size: clamp(2.8rem, 6vw, 5.25rem); line-height: .98; letter-spacing: -.04em; max-width: 10ch; }
.cita__llamada p { margin-top: 24px; color: var(--gris); font-size: 1.125rem; max-width: 40ch; }
.cita__llamada .acciones { margin-top: 36px; }
.enlace--tel { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cita__datos { grid-column: 9 / 13; display: grid; gap: 40px; }
.dato { position: relative; padding-top: 18px; }
.dato::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--filete-fuerte); transform-origin: 0 50%; }
.dato h3 { font-size: 1rem; font-weight: 500; }
.dato p { margin-top: 10px; color: var(--gris); }
.horario { margin-top: 12px; display: grid; gap: 8px; }
.horario div { display: flex; justify-content: space-between; gap: 16px; }
.horario dt { color: var(--gris); }
.horario dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Pie */
.pie { border-top: 1px solid var(--filete); }
.pie__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  padding-top: 32px; padding-bottom: 88px; font-size: .9375rem;
}
.pie__marca { font-weight: 500; }
.pie__lugar { color: var(--gris); }
.pie nav { margin-left: auto; }
.pie ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pie a { color: var(--grafito); text-decoration: none; transition: color 200ms ease; }

/* Movimiento. Solo con html.mov (lo pone concepto.js si no hay reducción de movimiento ni es miniatura):
   sin JS o con movimiento reducido, todo se ve en su sitio desde el principio.
   La portada se anima con CSS desde el primer pintado; lo de más abajo lo mueve albura.js con GSAP. */
html.mov .cabecera__in { animation: albura-aparecer 900ms ease 150ms both; }
html.mov .portada__foto > img { animation: albura-enfocar 2000ms cubic-bezier(.33, 1, .68, 1) both; }
html.mov .portada__titulo .p > span { animation: albura-palabra 1100ms var(--ease) calc(260ms + var(--i) * 90ms) both; }
html.mov .portada__sub { animation: albura-fundir 1000ms var(--ease) 620ms both; }
html.mov .portada__acciones { animation: albura-fundir 1000ms var(--ease) 720ms both; }
@keyframes albura-enfocar { from { filter: blur(14px); transform: scale(1.05); } }
@keyframes albura-palabra { from { transform: translateY(105%); } }
@keyframes albura-fundir { from { opacity: 0; transform: translateY(12px); } }
@keyframes albura-aparecer { from { opacity: 0; } }

/* Filetes que se dibujan al entrar (albura.js pone .es-visto). El estado sin dibujar solo existe con mov-listo. */
html.mov-listo :is(.paso, .compromisos li, .dato):not(.es-visto)::before { transform: scaleX(0); }
html.mov-listo :is(.paso, .compromisos li, .dato).es-visto::before { transition: transform 1100ms var(--cajon) var(--retraso, 0ms); }
/* Titulares que suben por líneas: la máscara deja sitio a los trazos que bajan (p, q) */
.linea-mask { padding-bottom: .14em; margin-bottom: -.14em; }

@media (prefers-reduced-motion: reduce) {
  .explorador__marca, .cabecera, .paso__n { transition: none; }
}

/* Tableta */
@media (max-width: 1080px) {
  .cabecera__nav { display: none; }
  .cabecera__in { grid-template-columns: 1fr auto; }
  .explorador__lista { grid-column: 1 / 6; }
  .explorador__paneles { grid-column: 6 / 13; }
  .panel__datos { grid-template-columns: 1fr; row-gap: 14px; }
}
@media (max-width: 860px) {
  .explorador__lista, .explorador__paneles { grid-column: 1 / 13; }
  /* El motivo pasa a una fila de chips que se desplaza en horizontal */
  .explorador__lista {
    display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margen)); padding: 2px var(--margen) 4px; border-bottom: 0;
    scroll-padding-inline: var(--margen);
  }
  .explorador__lista::-webkit-scrollbar { display: none; }
  .explorador__lista [role=tab] {
    flex: none; width: auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--filete-fuerte); font-size: 1rem; white-space: nowrap;
    transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  }
  .explorador__lista [role=tab][aria-selected=true] { background: var(--acento); color: var(--porcelana); box-shadow: none; font-weight: 500; }
  .explorador__lista [role=tab]:focus-visible { outline-offset: 2px; }
  .explorador__marca { display: none; }
  .explorador__paneles { margin-top: 20px; }
  .panel__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foto--sala { grid-column: 1 / 13; position: relative; top: auto; }
  .visita__texto { grid-column: 1 / 13; margin-top: clamp(40px, 7vw, 64px); }
  .estudio__texto { grid-column: 1 / 13; grid-row: 2; margin-top: 48px; }
  .foto--retrato { grid-column: 1 / 13; grid-row: 1; justify-self: start; }
  .cita__llamada { grid-column: 1 / 13; }
  .cita__datos { grid-column: 1 / 13; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
}

/* Móvil */
@media (max-width: 600px) {
  :root { --cab: 64px; }
  body { font-size: 1rem; }
  .cabecera__in { gap: 12px; }
  .marca__sub { display: none; }
  .boton--cabecera { min-height: 40px; padding: 0 16px; font-size: .875rem; }
  .portada { align-items: end; }
  .portada__foto > img { object-position: 64% 50%; }
  .portada__foto::after {
    background: linear-gradient(0deg, rgb(247 247 244 / .97) 0%, rgb(247 247 244 / .86) 34%, rgb(247 247 244 / .3) 50%, rgb(247 247 244 / 0) 62%),
                linear-gradient(180deg, rgb(247 247 244 / .55) 0%, rgb(247 247 244 / 0) 14%);
  }
  .portada__in { padding-bottom: 72px; }
  .portada__titulo { font-size: clamp(3rem, 15vw, 4rem); }
  .portada__sub { font-size: 1.0625rem; }
  .portada__acciones { gap: 14px 22px; }
  .motivo__cab p { font-size: 1.0625rem; }
  .panel { padding: 26px 22px 28px; }
  .panel__texto { font-size: 1.0625rem; }
  .panel__datos { grid-template-columns: 1fr; row-gap: 14px; }
  .foto--retrato { aspect-ratio: 1 / 1; }
  .foto--retrato > img { object-position: 50% 20%; }
  .paso { grid-template-columns: 48px 1fr; padding-top: 22px; }
  .paso::before { left: 48px; }
  .compromisos { grid-template-columns: 1fr; gap: 28px; }
  .cita__datos { grid-template-columns: 1fr; gap: 32px; margin-top: 56px; }
  .pie nav { margin-left: 0; width: 100%; }
}