/* ============================================================
   INLSOUND — Portada nueva (versión de prueba)
   Solo la usa index-nuevo.html. No toca nada de styles.css,
   así que la portada actual sigue exactamente igual.

   La idea: lo que antes era UNA IMAGEN con el texto pegado
   dentro, ahora es texto de verdad. Se puede traducir, Google
   lo lee, se ve nítido en cualquier pantalla y se recoloca
   solo en el móvil. La foto se queda como lo que es: la foto.
   ============================================================ */

.pv2{
  position:relative;
  padding:clamp(28px,5vw,64px) 0 clamp(30px,5vw,56px);
  overflow:hidden;
}

/* Luz dorada ambiental detrás de todo, muy tenue */
.pv2::before{
  content:"";
  position:absolute; inset:-20% -10% auto -30%;
  height:120%;
  background:
    radial-gradient(58% 52% at 22% 34%, rgba(201,162,75,.16), transparent 68%),
    radial-gradient(46% 46% at 78% 12%, rgba(201,162,75,.09), transparent 70%);
  pointer-events:none;
}

.pv2__grid{
  position:relative;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4.4vw,64px);
  align-items:stretch;   /* la foto acompaña al texto de arriba abajo */
}

/* ---------- Columna de texto ---------- */
.pv2__marca{
  display:flex; align-items:center; gap:14px;
  margin:0 0 clamp(18px,2.4vw,26px);
}
.pv2__marca img{ height:clamp(58px,6.4vw,84px); width:auto; display:block; }
.pv2__marca span{
  font-size:11px; letter-spacing:3.4px; text-transform:uppercase;
  color:var(--gold); border-left:1px solid rgba(201,162,75,.35);
  padding-left:14px; line-height:1.5;
}

.pv2__titulo{
  font-family:"Playfair Display",Georgia,serif;
  text-wrap:balance;
  font-weight:500;
  font-size:clamp(34px,5.1vw,60px);
  line-height:1.06;
  letter-spacing:-.5px;
  margin:0 0 clamp(16px,2vw,22px);
  color:var(--tx);
}
.pv2__titulo > span{ display:block; }
/* Segunda línea en dorado: da el golpe de vista sin gritar */
.pv2__titulo em{
  display:block;
  font-style:normal;
  background:linear-gradient(96deg,#E9CE8C 6%,#C9A24B 46%,#9E7B33 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#C9A24B;
}

.pv2__entrada{
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.68;
  color:var(--mut);
  max-width:46ch;
  margin:0 0 clamp(24px,3vw,32px);
}

.pv2__botones{
  display:flex; flex-wrap:wrap; gap:14px;
  margin:0 0 clamp(20px,2.4vw,26px);
}
.pv2__botones .btn{ padding:14px 26px; font-size:14.5px; }

/* Sello de confianza: dato concreto, no adorno */
.pv2__sello{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--mut);
  border:1px solid rgba(201,162,75,.26);
  background:rgba(201,162,75,.05);
  border-radius:999px; padding:9px 16px;
}
.pv2__sello i{ color:var(--gold); font-size:16px; }

/* ---------- Columna de la foto ---------- */
.pv2__foto{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(201,162,75,.28);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  min-height:100%;
  /* Se encuadra por la cara: al estirarse, lo que se recorta es
     cielo y catedral, nunca ella. */
}
.pv2__foto img{ object-position:right 30%; }  /* anclada a la derecha: la firma nunca se corta */
.pv2__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* Acercamiento lentísimo: da vida sin marear */
  animation:pv2Zoom 26s ease-in-out infinite alternate;
}
@keyframes pv2Zoom{ from{ transform:scale(1); } to{ transform:scale(1.06); } }

/* Velo inferior para que el borde no corte en seco */
.pv2__foto::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:32%;
  background:linear-gradient(to top, rgba(11,11,12,.55), transparent);
  pointer-events:none;
}

/* ---------- Los tres pilares ----------
   Como en el banner original: iconos dorados en fila, separados por
   filetes finos. Ahora son texto de verdad, no dibujo. */
.pv2-pilares{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:0 0 clamp(26px,3.2vw,34px);
  padding:clamp(18px,2.2vw,24px) 0 0;
  border-top:1px solid rgba(201,162,75,.18);
}
.pv2-pilar{
  padding:0 clamp(12px,1.6vw,20px);
  border-left:1px solid rgba(201,162,75,.18);
}
.pv2-pilar:first-child{ border-left:none; padding-left:0; }

.pv2-pilar__ico{
  width:clamp(30px,3.1vw,38px);
  height:clamp(30px,3.1vw,38px);
  color:var(--gold);
  display:block;
  margin:0 0 clamp(9px,1.1vw,12px);
  filter:drop-shadow(0 0 9px rgba(201,162,75,.34));
  transition:filter .25s ease, transform .25s ease;
}
.pv2-pilar:hover .pv2-pilar__ico{
  filter:drop-shadow(0 0 15px rgba(201,162,75,.6));
  transform:translateY(-2px);
}
.pv2-pilar h2{
  font-family:inherit;
  font-size:clamp(11px,1.05vw,12.5px);
  letter-spacing:2.6px; text-transform:uppercase; font-weight:600;
  color:var(--tx); margin:0 0 6px;
}
.pv2-pilar p{
  margin:0; font-size:clamp(12.5px,1.05vw,13.5px);
  line-height:1.55; color:var(--mut);
}

/* ---------- Aparición escalonada ---------- */
.pv2 [data-sube]{
  opacity:0; transform:translateY(14px);
  animation:pv2Sube .62s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes pv2Sube{ to{ opacity:1; transform:none; } }
.pv2 [data-sube="1"]{ animation-delay:.05s }
.pv2 [data-sube="2"]{ animation-delay:.13s }
.pv2 [data-sube="3"]{ animation-delay:.21s }
.pv2 [data-sube="4"]{ animation-delay:.29s }
.pv2 [data-sube="5"]{ animation-delay:.37s }
.pv2 [data-sube="6"]{ animation-delay:.45s }

/* ---------- Móvil y tablet ---------- */
@media (max-width:980px){
  .pv2__grid{ grid-template-columns:1fr; gap:26px; }
  /* La foto primero: entra por los ojos antes que el texto */
  .pv2__foto{ order:-1; aspect-ratio:16/11; }
  .pv2__foto img{ object-position:72% center; }
  .pv2__entrada{ max-width:none; }
  .pv2-pilares{ gap:0; }
  .pv2-pilar{ padding:0 10px; }
  .pv2-pilar p{ font-size:12px; line-height:1.45; }
}
@media (max-width:560px){
  .pv2__foto{ aspect-ratio:4/3.4; }
  /* En pantalla estrecha, los tres en columna con el icono al lado */
  .pv2-pilares{ grid-template-columns:1fr; }
  .pv2-pilar{
    display:flex; align-items:center; gap:14px;
    border-left:none; padding:11px 0;
    border-top:1px solid rgba(201,162,75,.12);
  }
  .pv2-pilar:first-child{ border-top:none; padding-top:2px; }
  .pv2-pilar__ico{ margin:0; flex:0 0 auto; width:30px; height:30px; }
  .pv2-pilar h2{ margin:0 0 2px; }
  .pv2__botones .btn{ flex:1 1 100%; }
  .pv2__marca span{ font-size:10px; letter-spacing:2.6px; }
}

/* Quien pide menos movimiento, no lo tiene */
@media (prefers-reduced-motion:reduce){
  .pv2__foto img{ animation:none; }
  .pv2 [data-sube]{ animation:none; opacity:1; transform:none; }
}


/* ============================================================
   Solo en la portada nueva: la barra de arriba lleva el nombre
   en letras en vez del escudo, para no repetir logo dos veces
   casi pegados. En el resto de páginas la barra no cambia.
   ============================================================ */
body[data-page="home-v2"] .brand-logo{ display:none; }
body[data-page="home-v2"] .brand::after{
  content:"INLSOUND";
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(19px,2vw,23px);
  letter-spacing:5px;
  font-weight:500;
  background:linear-gradient(100deg,#E9CE8C,#C9A24B 55%,#A2802F);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#C9A24B;
  white-space:nowrap;
}
@media (max-width:480px){
  body[data-page="home-v2"] .brand::after{ font-size:16px; letter-spacing:3.4px; }
}