/* ============================================================
   HERO PANORÁMICO 3D
   Reglas aprendidas en proyectos anteriores y aplicadas aquí:
   1. La foto necesita `max-width:none` (base.css la limita al 100%).
   2. Los velos viven FUERA del contenedor preserve-3d.
   3. Nada de `will-change` en la foto: rompe el orden 3D.
   4. Los paneles inactivos llevan `top:0`.
   5. El texto hace RELEVO (no cruce): sale en .26s, entra en .5s con .26s
      de retraso. Las fotos sí se cruzan.
   6. `overflow:clip`, nunca `hidden` (no rompe position:sticky).
   7. Sin translateZ sobre el texto: la perspectiva agranda la caja y la recorta.
   ============================================================ */
.hero{
  /* Los componentes genéricos (.btn--fantasma, enlaces) leen estos tokens.
     Sin esto el botón fantasma sale con texto tinta sobre fondo tinta. */
  --texto:var(--hueso);
  --texto-suave:rgba(247,244,242,.76);
  --fondo:var(--tinta);
  --fondo-alt:var(--grafito);
  --borde:rgba(247,244,242,.28);
  --borde-sutil:rgba(247,244,242,.14);
  --acento:var(--carmin-luz);

  position:relative;
  min-height:min(100svh,940px);
  display:flex;align-items:flex-end;
  overflow:clip;
  background:var(--tinta);color:var(--hueso);
  isolation:isolate;
}
@supports not (overflow:clip){.hero{overflow:hidden}}

/* --- Escena 3D --- */
.hero__escena{
  position:absolute;inset:0;z-index:1;
  perspective:1600px;
  perspective-origin:calc(50% + var(--px,0) * 6%) calc(50% + var(--py,0) * 6%);
}
.hero__slide{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  opacity:0;visibility:hidden;
  transform:rotateY(-13deg) translateX(7%) scale(1.07);
  transition:opacity .95s var(--ease),transform 1.25s var(--ease),visibility 0s linear .95s;
}
.hero__slide.es-activo{
  opacity:1;visibility:visible;
  transform:rotateY(calc(var(--px,0) * -2.2deg)) rotateX(calc(var(--py,0) * 1.4deg)) translateX(0) scale(1);
  transition:opacity .95s var(--ease),transform 1.25s var(--ease),visibility 0s;
  z-index:2;
}
.hero__slide.es-saliente{
  opacity:0;visibility:visible;
  transform:rotateY(13deg) translateX(-7%) scale(1.04);
  transition:opacity .95s var(--ease),transform 1.25s var(--ease),visibility 0s linear .95s;
  z-index:1;
}
/* Regla 1: la foto tiene que poder pasarse del 100% */
.hero__foto{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:var(--foco,center);
  transform:scale(1.035);
  transition:transform 9s linear;
}
.hero__slide.es-activo .hero__foto{transform:scale(1.13)}

/* --- Velos: FUERA de la escena (regla 2) --- */
.hero__velo{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero__velo--tinte{
  background:
    linear-gradient(180deg,rgba(18,16,15,.82) 0%,rgba(18,16,15,.34) 32%,rgba(18,16,15,.62) 68%,rgba(18,16,15,.95) 100%),
    linear-gradient(100deg,rgba(18,16,15,.92) 0%,rgba(18,16,15,.55) 42%,rgba(18,16,15,.12) 74%);
}
.hero__velo--carmin{
  background:radial-gradient(75% 120% at 8% 88%,rgba(158,31,61,.42) 0%,transparent 62%);
  mix-blend-mode:screen;opacity:.85;
}
.hero__velo--rejilla{
  opacity:.14;
  background-image:linear-gradient(rgba(247,244,242,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(247,244,242,.5) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(70% 70% at 70% 40%,#000 0%,transparent 72%);
}
.hero__velo--grano{
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Anillo de marca flotando en la escena */
.hero__anillo{
  position:absolute;z-index:3;pointer-events:none;
  width:min(52vw,620px);aspect-ratio:1;border-radius:50%;
  right:-10%;top:8%;
  border:1px solid rgba(232,93,124,.26);
  transform:translate3d(calc(var(--px,0)*-16px),calc(var(--py,0)*-14px),0);
  transition:transform .5s var(--ease-suave);
}
.hero__anillo::after{
  content:"";position:absolute;inset:16px;border-radius:50%;
  border:1px solid rgba(232,93,124,.16);
}

/* --- Contenido --- */
.hero__contenido{
  position:relative;z-index:4;width:100%;
  padding-block:clamp(6.2rem,11vh,8rem) clamp(1.2rem,2.5vh,2rem);
}
.hero__paneles{position:relative}
.hero__panel{
  /* Regla 4: los inactivos anclados arriba, si no caen bajo el activo */
  position:absolute;top:0;left:0;width:100%;
  max-width:min(720px,92%);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(18px);
  /* Regla 5: RELEVO — el saliente se va rápido */
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s linear .26s;
}
.hero__panel.es-activo{
  position:relative;
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
  /* el entrante espera a que el saliente termine */
  transition:opacity .5s var(--ease) .26s,transform .6s var(--ease) .26s,visibility 0s;
}
.hero__ojillo{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.5rem 1.1rem .5rem .7rem;
  border:1px solid rgba(232,93,124,.4);border-radius:var(--r-full);
  background:rgba(18,16,15,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:1.4rem;
}
.hero__ojillo b{
  display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--carmin);font-size:.72rem;
}
.hero__titulo{
  font-size:var(--t-4xl);line-height:.98;letter-spacing:-.032em;
  margin:0 0 1.1rem;color:#fff;font-weight:500;
}
.hero__titulo em{
  font-style:italic;font-weight:600;
  background:linear-gradient(96deg,var(--carmin-luz),#F6A8B9 52%,var(--carmin-luz));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* el degradado se parte entre palabras si no se fuerza el bloque */
  display:inline-block;padding-right:.08em;
}
.hero__bajada{
  font-size:var(--t-md);color:rgba(247,244,242,.8);
  max-width:54ch;margin-bottom:1.9rem;line-height:1.6;
}
.hero__datos{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:0 0 1.9rem;padding:0;list-style:none;
}
.hero__datos li{
  display:flex;align-items:center;gap:.55rem;margin:0;
  font-size:var(--t-sm);color:rgba(247,244,242,.9);
}
.hero__datos svg{width:16px;height:16px;color:var(--carmin-luz);flex:none}
.hero__datos a:hover{color:var(--carmin-luz)}

/* --- Controles --- */
.hero__ui{
  position:relative;z-index:5;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;
  margin-top:clamp(1.6rem,4vh,2.8rem);
  padding-top:1.3rem;border-top:1px solid rgba(247,244,242,.14);
}
.hero__pestanas{
  display:flex;gap:.4rem;flex-wrap:wrap;
  /* Regla 11: nada de `flex:1 1 20rem`, en columna se vuelve ALTURA */
  flex:1 1 auto;min-width:0;
}
.hero__pestana{
  position:relative;flex:0 1 auto;
  padding:.7rem 0 .95rem;min-width:56px;max-width:190px;
  background:none;border:0;cursor:pointer;text-align:left;
  color:rgba(247,244,242,.5);
  font-family:var(--texto-fuente);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  transition:color var(--v-rapido) var(--ease);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hero__pestana + .hero__pestana{margin-left:1.4rem}
.hero__pestana::before{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:rgba(247,244,242,.18);
}
.hero__pestana::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--carmin-luz);transform:scaleX(0);transform-origin:left;
}
.hero__pestana:hover{color:rgba(247,244,242,.85)}
.hero__pestana[aria-selected="true"]{color:#fff}
.hero__pestana[aria-selected="true"]::after{
  animation:heroAvance var(--hero-duracion,7s) linear forwards;
}
.hero.esta-pausado .hero__pestana[aria-selected="true"]::after{animation-play-state:paused}
@keyframes heroAvance{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero__flechas{display:flex;gap:.5rem;flex:none}
.hero__flecha{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid rgba(247,244,242,.22);border-radius:50%;
  background:rgba(18,16,15,.35);color:#fff;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background-color var(--v-rapido) var(--ease),border-color var(--v-rapido) var(--ease),transform var(--v-rapido) var(--ease);
}
.hero__flecha:hover{background:var(--carmin);border-color:var(--carmin);transform:scale(1.06)}
.hero__flecha svg{width:17px;height:17px}
.hero__contador{
  font-family:var(--display);font-size:var(--t-lg);color:rgba(247,244,242,.55);flex:none;
}
.hero__contador b{color:#fff;font-weight:600}

/* Retrato flotante del abogado (slide 2) */
.hero__retrato{
  position:absolute;z-index:4;bottom:0;
  /* Los botones flotantes (WhatsApp y teléfono) viven pegados a la derecha con
     `position:fixed`. Sin este margen extra se posan encima del retrato. */
  right:calc(var(--marco) + 76px);
  width:min(30vw,420px);
  opacity:0;transform:translateY(40px) scale(.97);
  transition:opacity .6s var(--ease) .3s,transform .9s var(--ease) .3s;
  pointer-events:none;
}
.hero__retrato img{
  width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;
  mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.6));
}
.hero__retrato.es-activo{opacity:1;transform:translateY(0) scale(1)}
@media(max-width:1180px){.hero__retrato{display:none}}

@media(max-width:760px){
  .hero{min-height:auto;padding-bottom:1rem}
  .hero__contenido{padding-block:clamp(6rem,18vh,8rem) 1.5rem}
  .hero__panel{max-width:100%}
  .hero__ui{flex-direction:column;align-items:stretch;gap:1.1rem}
  .hero__pestanas{order:2}
  .hero__pestana{flex:1 1 0;min-width:0;max-width:none;font-size:0;padding:.5rem 0 .8rem}
  .hero__pestana + .hero__pestana{margin-left:.5rem}
  .hero__flechas{order:1;justify-content:space-between}
  .hero__contador{order:0}
  .hero__anillo{width:80vw;right:-30%;top:14%}
}