/* Etrusca Biz V11 · Hero actualizado y Conócenos con fondo a altura de pantalla. */

/* No cambiamos las imágenes ni los botones que ya fueron aprobados. */
.hero-v11 h1 {
  font-size: clamp(48px, 5.1vw, 78px);
  max-width: 710px;
  line-height: 1.08;
  text-wrap: balance;
}
.hero-v11 h1 em {
  display: block;
  color: #b58330;
}
.hero-v11 .hero-lead {
  font-size: 17px;
  max-width: 560px;
  line-height: 1.74;
  text-wrap: pretty;
}
.hero-v11 .hero-copy { padding-bottom: 24px; }
.hero-v11 .hero-grid { min-height: 640px; }

/* Fondo continuo que ocupa todo el viewport; contenido centrado sin salirse de la retícula. */
.experience-v11 {
  width: 100%;
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(42px, 5.2vh, 76px) 0;
  background: linear-gradient(115deg, #f6eee2 0%, #faf4eb 64%, #f2e9de 100%);
  overflow: hidden;
}
.experience-v11 .experience-layout {
  width: min(calc(100% - 72px), 1240px);
  margin-inline: auto;
  min-width: 0;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(28px, 5.5vw, 82px);
}
.experience-v11 .experience-copy {
  min-width: 0;
  max-width: 590px;
}
.experience-v11 .experience-copy h2 {
  max-width: 580px;
}
.experience-v11 .experience-visual {
  min-width: 0;
  width: 100%;
  min-height: min(69vh, 670px);
  margin-inline: auto;
}
.experience-v11 .experience-photo--one { left: 0; }
.experience-v11 .experience-photo--two { right: 0; }

@media (max-width: 1100px) {
  .hero-v11 h1 {font-size: clamp(42px, 4.9vw, 67px);}
  .hero-v11 .hero-grid {min-height: 580px;}
  .experience-v11 .experience-layout {width: min(calc(100% - 64px), 1240px); gap: 26px;}
  .experience-v11 .experience-visual {min-height: 560px;}
}
@media (max-width: 760px) {
  .hero-v11 h1 {font-size: clamp(38px, 8.6vw, 58px);}
  .hero-v11 .hero-lead {font-size: 15px; max-width: 620px;}
  .hero-v11 .hero-grid {min-height: 0;}
  .hero-v11 .hero-copy {padding-bottom: 14px;}
  .experience-v11 {
    min-height: 100svh;
    padding: 66px 0 55px;
  }
  .experience-v11 .experience-layout {
    width: calc(100% - 36px);
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .experience-v11 .experience-copy {max-width: 640px;}
  .experience-v11 .experience-visual {width: 100%; min-height: 520px;}
}
@media (max-width: 430px) {
  .hero-v11 h1 {font-size: clamp(37px, 9.35vw, 43px);}
  .experience-v11 .experience-visual {min-height: 485px;}
}