/* ==========================================================================
   Graduaciones Vázquez 2026 — Secciones
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   HERO PANORÁMICO 3D

   Seis trampas ya conocidas, resueltas de entrada (ver docs/06-NOTAS-TECNICAS):

   1. `max-width: none` explícito en la foto. La regla base
      `img { max-width:100% }` anula el ancho panorámico del 148 % y el
      translateZ negativo deja ver una franja del fondo al costado.
   2. Los velos van FUERA del contenedor `preserve-3d`. Dentro, el navegador
      los ordena por profundidad junto a la foto y puede pintarlos detrás.
   3. Sin `will-change` en la foto: fuerza una capa que altera la ordenación 3D.
   4. `top: 0` en los paneles inactivos. Sin él toman su posición estática
      (debajo del activo) y durante el cruce aparecen sobre los controles.
   5. RELEVO del texto, no cruce: el saliente se va en .26 s y el entrante
      llega en .5 s con .26 s de retraso. Cruzarlos deja dos textos legibles
      encima uno del otro.
   6. `overflow: clip`, no `hidden`: hidden crea contexto de scroll.
   ══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: min(92vh, 58rem);
  display: flex; align-items: flex-end;
  overflow: clip;
  background: var(--tinta);
  isolation: isolate;

  /* BUG ENCONTRADO EN EL NAVEGADOR: el hero es una superficie oscura pero no
     declaraba color propio, así que `currentColor` heredaba el texto del tema
     claro (#1A1A1E). El botón fantasma —que toma texto y borde de
     currentColor— salía negro sobre negro: 1.24:1, invisible.
     Una superficie oscura SIEMPRE tiene que declarar su color, aunque todos
     sus textos ya lo lleven explícito: los componentes que heredan, no. */
  color: #fff;
}
.hero--corto { min-height: min(62vh, 36rem); }

/* ---------- escena 3D ---------- */
.hero__escena {
  position: absolute; inset: 0;
  z-index: 0;
  perspective: 1400px;
  perspective-origin: 50% 44%;
  transform-style: preserve-3d;
}

.hero__panel {
  position: absolute;
  inset: 0;
  top: 0;            /* (4) sin esto el panel inactivo cae bajo el activo */
  opacity: 0;
  transform-style: preserve-3d;
  transition: opacity var(--ms-lento) var(--curva-salida);
  pointer-events: none;
}
.hero__panel.esta-activo { opacity: 1; pointer-events: auto; }

.hero__foto {
  position: absolute;
  top: 50%; left: 50%;
  width: 148%;
  max-width: none;   /* (1) */
  height: 118%;
  object-fit: cover;
  object-position: center 42%;
  transform: translate3d(-50%, -50%, -150px) scale(1.02);
  /* sin will-change (3) */
  transition: transform 9s linear;
}
/* Deriva lenta mientras el panel está activo: da vida a una foto fija
   sin recurrir a vídeo. */
.hero__panel.esta-activo .hero__foto {
  transform: translate3d(-50%, -50%, -150px) scale(1.09);
}

/* Capa de profundidad: una franja de color que vive MÁS cerca que la foto
   dentro de la escena 3D. Es lo que hace que se lea como panorama y no
   como una imagen plana. */
.hero__bruma {
  position: absolute; inset: -10%;
  transform: translateZ(-60px);
  background:
    radial-gradient(80% 60% at 18% 78%, rgba(183,22,72,.34), transparent 62%),
    radial-gradient(70% 55% at 84% 22%, rgba(201,162,39,.16), transparent 60%);
  opacity: 0;
  transition: opacity var(--ms-lento) var(--curva);
}
.hero__panel.esta-activo .hero__bruma { opacity: 1; }

/* ---------- velos: FUERA de la escena (2) ---------- */
.hero__velo {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__velo--degradado {
  background: linear-gradient(to top,
    rgba(12,12,13,.94) 0%,
    rgba(12,12,13,.80) 26%,
    rgba(12,12,13,.46) 52%,
    rgba(12,12,13,.18) 78%,
    rgba(12,12,13,.28) 100%);
}
.hero__velo--vineta {
  background: radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(12,12,13,.6) 100%);
}
/* Trama de puntos sutil, marca de agua textural */
.hero__velo--trama {
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: .5;
}

/* ---------- contenido ---------- */
.hero__contenido {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
}
.hero__texto { position: relative; max-width: 46rem; min-height: 20rem; }

.hero__slide {
  position: absolute; inset: 0; top: 0;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .26s var(--curva-salida), transform .26s var(--curva-salida);
  pointer-events: none;
}
/* (5) relevo: entra más lento y después de que el saliente terminó */
.hero__slide.esta-activo {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s var(--curva-suave) .26s, transform .5s var(--curva-suave) .26s;
  pointer-events: auto;
}

.hero__gorro {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .42em 1.05em;
  font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: var(--peso-semi);
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
  margin-bottom: var(--e-5);
}
.hero__gorro::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--oro); flex: none;
}

.hero__titulo {
  font-size: var(--t-4xl);
  line-height: .98;
  letter-spacing: -.038em;
  color: #fff;
  margin-bottom: var(--e-5);
  text-shadow: 0 2px 30px rgba(0,0,0,.42);
}
.hero__titulo em {
  font-style: normal;
  color: var(--oro);       /* 8.09:1 sobre el velo oscuro */
  white-space: nowrap;     /* el destello no se parte entre renglones */
}
.hero__titulo em::after { display: none; }

.hero__entrada {
  font-size: var(--t-md);
  color: rgba(255,255,255,.90);
  max-width: 34rem;
  line-height: 1.6;
  margin-bottom: var(--e-6);
  text-shadow: 0 1px 16px rgba(0,0,0,.5);
}
.hero__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---------- controles ---------- */
.hero__controles {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: var(--e-5);
  flex-wrap: wrap;
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255,255,255,.16);
}

.hero__puntos { display: flex; gap: var(--e-2); flex: none; }
.hero__punto {
  width: 44px; height: 4px; padding: 0;
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.24);
  border: 0; border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color var(--ms-medio) var(--curva);
}
.hero__punto:hover { background: rgba(255,255,255,.45); }
.hero__punto::after {
  content: ''; position: absolute; inset: 0;
  background: var(--oro); border-radius: inherit;
  transform: scaleX(0); transform-origin: left;
}
.hero__punto[aria-selected="true"]::after {
  animation: hero-avance var(--hero-duracion, 7s) linear forwards;
}
.hero.esta-pausado .hero__punto[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes hero-avance { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero__punto[aria-selected="true"]::after { animation: none; transform: scaleX(1); }
  .hero__panel.esta-activo .hero__foto { transform: translate3d(-50%,-50%,-150px) scale(1.02); }
}

.hero__indice {
  font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: var(--peso-semi);
  color: rgba(255,255,255,.72); flex: none;
  font-variant-numeric: tabular-nums;
}
.hero__indice b { color: #fff; font-size: var(--t-md); }

.hero__flechas { display: flex; gap: var(--e-2); margin-left: auto; flex: none; }
.hero__flecha {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background-color var(--ms-rapido), transform var(--ms-rapido) var(--curva);
}
.hero__flecha:hover { background: rgba(255,255,255,.22); transform: scale(1.07); }
.hero__flecha svg { width: 18px; height: 18px; }

/* (6) En columna, `flex: 1 1 20rem` se convierte en ALTURA de 20 rem
   y el bloque atraviesa los botones. Por eso aquí no se usa flex-basis. */
@media (max-width: 640px) {
  /* El botón flotante de WhatsApp es `fixed` abajo a la derecha y en móvil
     los puntos del carrusel llegan hasta ese borde: medido, quedaban a 6 px
     de tocarse. Se reserva la altura del botón para que nunca coincidan. */
  .hero__contenido { padding-bottom: calc(clamp(3rem, 2rem + 6vw, 6.5rem) + 3.5rem); }
  .hero__controles { gap: var(--e-4); }
  .hero__puntos { order: 2; width: 100%; }
  .hero__punto { flex: 1 1 auto; width: auto; }
  .hero__flechas { margin-left: 0; order: 1; }
  .hero__indice { order: 1; }
  .hero__texto { min-height: 24rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CINTA DE SERVICIOS bajo el hero
   ══════════════════════════════════════════════════════════════════════════ */
.tira-servicios {
  background: var(--tinta-2);
  border-top: 1px solid var(--tinta-3);
  padding-block: var(--e-5);
}
.tira-servicios ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--e-4) var(--e-7);
  list-style: none; margin: 0; padding: 0;
}
.tira-servicios li { margin: 0; }
.tira-servicios a {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: var(--peso-medio);
  color: rgba(255,255,255,.78); text-decoration: none;
  transition: color var(--ms-rapido);
}
.tira-servicios a:hover { color: #fff; }
.tira-servicios img { width: 26px; height: 26px; opacity: .72; transition: opacity var(--ms-rapido); }
.tira-servicios a:hover img { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   Bloques de contenido
   ══════════════════════════════════════════════════════════════════════════ */

/* dos columnas con foto */
.duo {
  display: grid; gap: clamp(2rem, 1rem + 5vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--invertido .duo__medio { order: 2; }
}
.duo__medio { position: relative; }
.duo__medio img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--s-3); }
.duo__medio::after {
  content: ''; position: absolute;
  inset: auto -1.2rem -1.2rem auto; width: 62%; height: 62%;
  border: 2px solid var(--vino); border-radius: var(--r-xl);
  z-index: -1;
}

/* cifras */
.cifras { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.cifra__valor {
  font-family: var(--f-titulo); font-size: var(--t-3xl); font-weight: var(--peso-negro);
  line-height: 1; letter-spacing: -.04em; color: var(--acento);
  display: block; margin-bottom: var(--e-2);
}
.cifra__etiqueta { font-size: var(--t-sm); color: var(--texto-2); }

/* línea del tiempo */
.linea { position: relative; padding-left: var(--e-6); }
.linea::before {
  content: ''; position: absolute; left: 5px; top: .6rem; bottom: .6rem;
  width: 2px; background: linear-gradient(var(--vino), transparent);
}
.linea__paso { position: relative; padding-bottom: var(--e-6); }
.linea__paso:last-child { padding-bottom: 0; }
.linea__paso::before {
  content: ''; position: absolute; left: calc(-1 * var(--e-6) + 1px);
  top: .55rem; width: 12px; height: 12px;
  background: var(--vino); border-radius: 50%;
  box-shadow: 0 0 0 4px var(--fondo);
}
.linea__anio {
  font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: var(--peso-negro);
  letter-spacing: .08em; color: var(--acento); display: block; margin-bottom: var(--e-1);
}

/* paquetes */
.paquete { position: relative; display: flex; flex-direction: column; }
.paquete--destacado {
  border-color: var(--vino);
  box-shadow: var(--s-vino);
}
.paquete--destacado::before {
  content: attr(data-gancho);
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: .35em 1.1em; white-space: nowrap;
  font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: var(--peso-semi);
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--vino); border-radius: var(--r-full);
}
.paquete ul { list-style: none; padding: 0; margin: var(--e-5) 0; flex: 1; }
.paquete li {
  display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: var(--t-sm); color: var(--texto-2);
  padding-block: var(--e-2);
  border-bottom: 1px solid var(--linea);
}
.paquete li:last-child { border-bottom: 0; }
.paquete li::before {
  content: ''; flex: none; width: 18px; height: 18px; margin-top: .28em;
  background: var(--vino-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23B71648' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
  border-radius: 50%;
}

/* testimonios */
.testimonio {
  display: flex; flex-direction: column;
  padding: var(--e-6);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg);
}
.testimonio__comilla {
  font-family: var(--f-acento); font-size: 3.4rem; line-height: .6; color: var(--acento);
  margin-bottom: var(--e-3); opacity: .35;
}
.testimonio p { font-size: var(--t-md); color: var(--texto); line-height: 1.58; flex: 1; }
.testimonio footer { margin-top: var(--e-5); font-size: var(--t-sm); }
.testimonio cite { font-style: normal; font-weight: var(--peso-semi); font-family: var(--f-titulo); display: block; }
.testimonio small { color: var(--texto-3); }

/* frase destacada */
.frase { text-align: center; max-width: 50rem; margin-inline: auto; }
.frase blockquote {
  border: 0; padding: 0; margin: 0 0 var(--e-5);
  font-family: var(--f-acento); font-style: italic;
  font-size: var(--t-2xl); line-height: 1.28; color: var(--texto);
  text-wrap: balance;
}
.frase cite { font-style: normal; font-family: var(--f-titulo); font-weight: var(--peso-semi); font-size: var(--t-sm); color: var(--acento); letter-spacing: .06em; text-transform: uppercase; }

/* pensamientos */
.pensamiento {
  display: flex; flex-direction: column;
  padding: var(--e-6);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg);
  transition: box-shadow var(--ms-medio) var(--curva), transform var(--ms-medio) var(--curva);
}
.pensamiento:hover { transform: translateY(-3px); box-shadow: var(--s-3); }
.pensamiento__cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-4);
  padding-bottom: var(--e-3); border-bottom: 1px solid var(--linea);
}
.pensamiento__clave {
  font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: var(--peso-negro);
  letter-spacing: .1em; color: var(--acento); flex: none;
}
.pensamiento__para { font-family: var(--f-titulo); font-weight: var(--peso-semi); font-size: var(--t-base); }
.pensamiento__texto {
  font-family: var(--f-acento); font-size: 1.16rem; line-height: 1.62;
  color: var(--texto-2); font-style: italic;
}
.pensamiento__texto p { margin-bottom: .8em; }

/* galería */
.galeria { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.galeria__pieza {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  aspect-ratio: 1; background: var(--nube);
}
.galeria__pieza--ancha { grid-column: span 2; aspect-ratio: 2; }
@media (max-width: 620px) { .galeria__pieza--ancha { grid-column: span 1; aspect-ratio: 1.6; } }
.galeria__pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ms-lento) var(--curva-suave); }
.galeria__pieza:hover img { transform: scale(1.06); }

/* preguntas frecuentes */
.faq { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__boton {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); padding: var(--e-5) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-titulo); font-size: var(--t-md); font-weight: var(--peso-semi);
  color: var(--texto);
  transition: color var(--ms-rapido);
}
.faq__boton:hover { color: var(--acento); }
.faq__mas { flex: none; width: 26px; height: 26px; position: relative; }
.faq__mas::before, .faq__mas::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px; background: var(--vino); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--ms-medio) var(--curva), opacity var(--ms-rapido);
}
.faq__mas::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__boton[aria-expanded="true"] .faq__mas::after { transform: translate(-50%,-50%) rotate(0); opacity: 0; }
.faq__cuerpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--ms-medio) var(--curva);
}
.faq__cuerpo > div { overflow: hidden; }
.faq__item.esta-abierto .faq__cuerpo { grid-template-rows: 1fr; }
.faq__cuerpo p { padding-bottom: var(--e-5); color: var(--texto-2); max-width: var(--medida); }

/* llamada final */
.llamada { position: relative; overflow: clip; }
.llamada__fondo { position: absolute; inset: 0; z-index: 0; }
.llamada__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.llamada .contenedor { position: relative; z-index: 1; }
.llamada__marca {
  position: absolute; right: -3%; bottom: -12%; width: min(40%, 22rem);
  opacity: .05; z-index: 0; pointer-events: none;
}

/* datos de contacto */
.datos { display: grid; gap: var(--e-5); }
.dato { display: flex; gap: var(--e-4); }
.dato__icono {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--vino-suave); border-radius: var(--r-md);
  color: var(--acento);
}
.tono-oscuro .dato__icono { background: rgba(232,87,127,.14); }
.dato__icono svg { width: 20px; height: 20px; }
.dato h4 { margin-bottom: var(--e-1); font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.dato p, .dato a { font-size: var(--t-base); color: var(--texto); text-decoration: none; margin: 0; }
.dato a:hover { color: var(--acento); text-decoration: underline; }

/* mapa */
.mapa {
  border: 0; width: 100%; aspect-ratio: 16/10;
  border-radius: var(--r-lg); box-shadow: var(--s-2);
  filter: grayscale(.3) contrast(1.05);
}

/* ══════════════════════════════════════════════════════════════════════════
   Aparición al hacer scroll
   ══════════════════════════════════════════════════════════════════════════ */
.aparece {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .68s var(--curva-suave), transform .68s var(--curva-suave);
}
.aparece.es-visible { opacity: 1; transform: none; }
.aparece:nth-child(2) { transition-delay: .07s; }
.aparece:nth-child(3) { transition-delay: .14s; }
.aparece:nth-child(4) { transition-delay: .21s; }
.aparece:nth-child(5) { transition-delay: .28s; }
.aparece:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .aparece { opacity: 1; transform: none; transition: none; }
}

/* Si el JS no corre, nada queda invisible */
.sin-js .aparece { opacity: 1; transform: none; }
.sin-js .hero__slide { position: relative; opacity: 1; transform: none; }
.sin-js .hero__slide:not(:first-child) { display: none; }
.sin-js .hero__panel:not(:first-child) { display: none; }
.sin-js .hero__panel:first-child { opacity: 1; }