/* ═══════════════════════════════════════════════════════════
   TEMA — Odontología Vértice
   Clínico, frío, mucho aire. Acá se vende higiene y confianza,
   no lujo: por eso blanco casi puro, celeste médico y esquinas
   redondeadas. Cero sombras de color.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:          #F7FAFC;
  --bg-2:        #EDF3F8;
  --surface:     #FFFFFF;
  --surface-2:   #F1F6FA;
  --line:        rgba(16,42,67,.10);
  --line-strong: rgba(16,42,67,.20);

  --text:        #0E2438;
  --text-2:      #3D5871;
  --muted:       #6E8398;

  --accent:      #0E86D4;
  --accent-2:    #0A6AAA;
  --accent-deep: #084C7C;
  --on-accent:   #FFFFFF;
  --glow:        rgba(14,134,212,.26);
  --glow-soft:   rgba(14,134,212,.09);

  --vidrio:        linear-gradient(165deg,rgba(255,255,255,.92),rgba(255,255,255,.62));
  --vidrio-fuerte: linear-gradient(165deg,#fff,rgba(255,255,255,.78));
  --campo-bg:      #fff;

  --tracking-h:  -.03em;
  --radius:      16px;
  --radius-pill: 100px;

  /* Tema claro: las sombras de acento no se ven y ensucian. */
  --sh-depth: none;
  --sh-lit:   none;
  --sh-hover: none;
  --sh-suave: none;
  --sombra-panel: 0 30px 70px -50px rgba(14,52,84,.45);

  /* Tema claro: la viñeta oscura ensucia. Apenas un cierre frío en los
     bordes y el grano a la mitad, o el blanco deja de leerse limpio. */
  --grano-op: .03;
  --vineta: radial-gradient(135% 100% at 50% 40%, transparent 58%, rgba(16,42,67,.09) 100%);
}

/* En claro el fondo de manchas tiene que ser casi invisible: si se nota,
   el sitio deja de leerse como clínica. La cuadrícula la sacamos del
   todo — acá el aire lo dan las partículas, no las líneas. */
.bg-static{ opacity:.5 }
.hero__grid{ display:none }

/* ── Hero con la foto a todo el ancho ──
   La foto no compite con el titular: primero se lee la frase, y abajo
   la imagen ocupa la pantalla entera. Es lo que hace que el consultorio
   se vea antes de que nadie tenga que scrollear a buscarlo.
   El alto lo pone .banda; acá sólo cambia el reparto del hero. */
.hero{
  min-height:auto; justify-content:flex-start;
  padding-top:calc(var(--header-h) + clamp(2rem, 7vh, 5.5rem));
  padding-bottom:0;
}
.hero__inner{ padding-bottom:clamp(2.4rem, 5vw, 4rem) }
.hero__title{ max-width:17ch }
.hero__lead{ max-width:58ch }
/* Un poco más alta que la banda por defecto: es la primera imagen del
   sitio y tiene que quedar claro que es la protagonista. */
.hero__banda{ height:clamp(320px, 66vh, 720px) }
/* En vertical, 66 vh se come la pantalla entera y hay que scrollear dos
   veces para llegar a los tratamientos. */
@media (max-width:760px){ .hero__banda{ height:clamp(300px, 52vh, 460px) } }

/* ── El retrato del equipo ──
   La foto original es 2:3. Forzarla a 4:5 le cortaba la cabeza, así que
   va a 3:4 y con el encuadre corrido hacia arriba: en un retrato lo que
   no se puede perder es la cara. */
.retrato{ position:relative }
.retrato__marco{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--sombra-panel);
}
.retrato__marco img{
  display:block; width:100%;
  aspect-ratio:4/5; object-fit:cover; object-position:50% 25%;
  border-radius:0; box-shadow:none;
}
/* El texto es más corto que la foto: centrado, la diferencia se lee como
   una decisión y no como que sobró espacio abajo. */
#quienes .contacto__grid{ align-items:center }
/* El mismo halo celeste del hero: profundidad sin peso. */
.retrato::before{
  content:''; position:absolute; inset:-7% -9%; z-index:-1;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(14,134,212,.22), transparent 72%);
}
/* Esta chapita va del otro lado que la del hero, para que las dos no se
   lean como la misma pieza repetida. */
.chapa--retrato{ left:auto; right:-.5rem; bottom:1.7rem }
@media (max-width:900px){ .chapa--retrato{ display:none } }
/* Halo celeste detrás de la foto: profundidad sin peso. */
.hero__media::before{
  content:''; position:absolute; inset:-8%; z-index:-1;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(14,134,212,.20), transparent 72%);
}

/* ── Tira de datos duros ── */
.datos{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
@media (max-width:700px){ .datos{ grid-template-columns:1fr 1fr } }
.datos div{ background:var(--surface); padding:clamp(1.1rem,2.4vw,1.7rem); text-align:center }
.datos b{ display:block; font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:600; letter-spacing:-.04em; color:var(--accent) }
.datos span{ font-size:.78rem; color:var(--muted) }

/* Chapita flotante sobre la foto: el dato que más apura a pedir turno.
   Se alinea con el contenedor aunque la banda sea más ancha que él. */
.chapa{
  position:absolute; left:var(--pad); bottom:clamp(1.2rem,3vw,2.2rem); z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1rem; border-radius:var(--radius-pill);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 18px 40px -26px rgba(14,52,84,.7);
  font-size:.8rem; color:var(--text-2); white-space:nowrap;
}
.chapa b{ color:var(--accent); font-weight:600 }
@media (max-width:900px){ .chapa{ display:none } }

/* ── Primera visita: título a la izquierda, pasos a la derecha ── */
.visita__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
@media (max-width:900px){ .visita__grid{ grid-template-columns:1fr } }
.paso__punto{ box-shadow:0 0 0 6px var(--bg) }

/* ── Galería con profundidad ──
   La perspectiva vive en la grilla, no en cada figura: así todas las
   fotos se inclinan como si estuvieran en el mismo plano. */
.galeria{ perspective:1200px }
.galeria figure{
  transform-style:preserve-3d;
  transition:box-shadow .5s var(--ease);
}
.galeria figure:hover{ box-shadow:0 40px 60px -40px rgba(14,52,84,.55) }
/* El pie sube al pasar el mouse en vez de estar siempre encima. */
.galeria figcaption{
  transform:translateY(105%); opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.galeria figure:hover figcaption,
.galeria figure:focus-within figcaption{ transform:none; opacity:1 }
@media (hover:none){
  .galeria figcaption{ transform:none; opacity:1 }
}

/* ── El mapa de tu boca ──
   El dibujo es SVG con la profundidad ya dibujada (las piezas del fondo
   más chicas y más chatas). Lo único en tres dimensiones de verdad es la
   inclinación que le agrega el puntero. */
.arcada{
  position:relative;
  max-width:920px; margin:clamp(2rem,4vw,3.4rem) auto 0;
}
.arcada svg{ width:100%; height:auto; overflow:visible }
.arcada__guia{ fill:none; stroke:var(--line-strong); stroke-dasharray:2 9; stroke-width:1.5 }
/* Una sola sombra para las treinta y dos piezas: va en el grupo, no en
   cada diente. Es lo que las despega del fondo y las hace parecer
   objetos en vez de contornos. */
.arcada__arco{ filter:drop-shadow(0 4px 7px rgba(14,52,84,.16)) }

.pieza{ cursor:pointer; outline:none }
.pieza__corona{
  fill:var(--surface); stroke:var(--accent); stroke-width:2.6;
  transition:fill .3s var(--ease), stroke .3s var(--ease);
}
.pieza__cuspide{ fill:var(--accent); opacity:.34; transition:opacity .3s var(--ease), fill .3s var(--ease) }
.pieza__filo{ fill:none; stroke:var(--accent); stroke-width:2.2; opacity:.4 }
.pieza.is-on .pieza__corona,
.pieza:focus-visible .pieza__corona{ fill:var(--accent); stroke:var(--accent-deep) }
.pieza.is-on .pieza__cuspide{ fill:var(--on-accent); opacity:.7 }
.pieza.is-on .pieza__filo{ stroke:var(--on-accent); opacity:.75 }

.etiqueta__linea{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.55 }
.etiqueta__punto{ fill:var(--accent) }
.etiqueta__texto{
  font-family:var(--font); font-size:15px; font-weight:600;
  fill:var(--text); letter-spacing:-.01em;
}
.etiqueta__detalle{ font-family:var(--font); font-size:12.5px; fill:var(--muted) }
/* En vertical las cinco etiquetas se pisan entre sí: se van y manda el
   listado de abajo, que dice lo mismo con más detalle. */
@media (max-width:900px){ .arcada__etiquetas{ display:none } }

.arcada__rotulo{
  position:absolute; left:50%; bottom:2%; transform:translateX(-50%);
  display:flex; align-items:baseline; gap:.5rem; white-space:nowrap;
  padding:.5rem 1.1rem; border-radius:var(--radius-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:.84rem; color:var(--muted);
  box-shadow:0 16px 34px -26px rgba(14,52,84,.6);
  transition:border-color .3s var(--ease);
}
.arcada__rotulo b{ color:var(--text); font-weight:600 }
.arcada__rotulo.is-on{ border-color:var(--accent) }
@media (hover:none){ .arcada__rotulo{ display:none } }

/* ⚠ LAS COLUMNAS SON FIJAS POR TRAMO Y LA ÚLTIMA CELDA SE ESTIRA.
   Antes iban con auto-fit y minmax(230px,1fr), que reparte solo. Eso
   servía cuando el hueco sobrante era del color del fondo y no se
   veía; con la tira en azul pleno, son CINCO piezas en una grilla que
   casi nunca da múltiplo de cinco, así que el sobrante quedaba como un
   rectángulo azul vacío del tamaño de una celda. A 1280 px se veía
   media tira sin nada.

   Con tramos fijos sé cuántas columnas hay, y entonces puedo mandar a
   la última celda a ocupar lo que sobra. La regla es siempre la misma:
   si cinco no entra justo, la quinta se estira. */
.mapa__lista{
  display:grid; grid-template-columns:1fr;
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:560px){
  .mapa__lista{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .mapa__lista li:last-child{ grid-column:span 2 }
}
@media (min-width:900px){
  .mapa__lista{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .mapa__lista li:last-child{ grid-column:span 2 }
}
@media (min-width:1240px){
  .mapa__lista{ grid-template-columns:repeat(5,minmax(0,1fr)) }
  .mapa__lista li:last-child{ grid-column:span 1 }
}
/* ⚠ ESTA TIRA ES EL ÚNICO BLOQUE AZUL PLENO DE TODA LA PÁGINA, Y ESO
   ES EL EFECTO. Vértice es un tema claro: blanco, gris muy claro y el
   azul reservado para filetes finos y para el acento. Cinco celdas del
   color del fondo de la página, con el título en azul y el texto en
   gris, eran cinco casilleros de una tabla — información correcta y
   cero impacto.

   Dadas vuelta —fondo azul profundo, título blanco, texto celeste— la
   tira pasa a ser una barra que corta la página al medio. No hay que
   agregarle nada más: el impacto no lo da un efecto, lo da que sea lo
   único de ese color en toda la pantalla.

   Y como es un plano grande y liso, admite algo que en una página
   blanca sería ridículo: una luz que lo cruza cada tanto, como el
   reflejo sobre una superficie esmaltada. */
.mapa__lista{
  position:relative; isolation:isolate;
  border-color:transparent;
  background:#0A5C97;                       /* la juntura entre celdas */
  box-shadow:0 30px 60px -46px rgba(8,52,92,.85);
}
.mapa__lista li{
  position:relative; z-index:1;
  background:linear-gradient(165deg,#1290DE 0%, #0C6FB0 52%, #095A92 100%);
  padding:clamp(1.3rem,2.4vw,1.8rem);
  transition:background-color .5s var(--ease), transform .5s var(--ease);
}
.mapa__lista b{
  display:block; color:#FFFFFF; font-size:1.05rem; font-weight:600;
  letter-spacing:-.02em; margin-bottom:.5rem;
}
.mapa__lista span{
  font-size:.88rem; color:#CFE9FA; line-height:1.55;
}

/* La luz que cruza la tira. Es una sola banda diagonal que se mueve con
   transform —no repinta nada— y pasa cada nueve segundos.

   ⚠ Va en un ::after de la LISTA y no de cada celda. Con una luz por
   celda serían cinco destellos sueltos disparándose a la vez; con una
   sola que cruza las cinco, se lee como lo que es: una superficie
   esmaltada larga con un reflejo pasando por encima. */
.mapa__lista::after{
  content:''; position:absolute; inset:-20% -40%; z-index:2;
  pointer-events:none;
  background:linear-gradient(104deg,
    transparent 40%,
    rgba(255,255,255,.16) 47%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.16) 53%,
    transparent 60%);
  transform:translateX(-62%);
  animation:mapaLuz 9s cubic-bezier(.5,.06,.42,.96) infinite;
}
@keyframes mapaLuz{
  0%, 62%, 100%{ transform:translateX(-62%) }
  28%, 34%     { transform:translateX(62%) }
}
@media (hover:hover){
  .mapa__lista li:hover{
    background:linear-gradient(165deg,#2AA6F0 0%, #1183CB 52%, #0C6FB0 100%);
    transform:translateY(-3px);
  }
}
@media (prefers-reduced-motion:reduce){
  .mapa__lista::after{ animation:none; opacity:0 }
}

/* ── Obras sociales ── */
.obras{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem }
.obras span{
  padding:.45rem .9rem; border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:.82rem; color:var(--text-2); background:var(--surface);
}

/* ── El reflejo de los títulos de sección ──
   El mismo azul que cruza el titular del hero, ahora en cada <h2>.
   Va más lento que arriba (7 s contra 6): el hero se mira una vez y
   tiene que pasar algo mientras lo mirás; un <h2> queda a la vista
   todo lo que dura la sección, y a esa escala lo rápido cansa. */
.reflejo{
  --rf-1: var(--text);
  --rf-2: var(--accent);
  --rf-3: var(--text);
  --rf-luz: 7s;
}