.hero-section {
  min-height: 100vh;
  height: 100vh;       /* opcional */
  position: relative;
  overflow: hidden;
}
.hero-video-wrap {
  /*z-index: 1;
  position: relative;
  overflow: hidden;*/
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-content-text {
  color: var(--color--dark);
  font-size: var(--_typography---body--body-xs);
  letter-spacing: var(--_typography---body--letter-spacing);
  margin-bottom: .625rem;
}


.hero-description {
  margin-bottom: 1.875rem;
}

.hero-button {
  line-height: var(--_typography---body--line-height-0);
}

.hero-bottom-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.hero-bottom-text {
  color: var(--color--dark);
  font-size: var(--_typography---body--body-xs);
}

.hero-bottom-link {
  color: var(--color--gray-2);
  font-size: var(--_typography---body--body-xs);
}

.hero-bottom-link:hover {
  color: var(--color--primary-1);
}

.hero-background-video {
  width: 100%;
  height: 1000px;
}







.hero-video-wrap video{
  object-fit: cover;
}



.hero-bottom-wrap {
    grid-column-gap: var(--gap--gap-4);
    grid-row-gap: var(--gap--gap-4);
    flex-flow: wrap;
    display: flex;
  }

  .hero-quote-wrap {
    padding-bottom: 4rem;
  }

/* 6) Quita el alto fijo que rompe el layout */
.hero-background-video{
  height: 100% !important;
}
.hero-background-video,
.hero-video-wrap .w-background-video,
.hero-video-wrap .w-background-video-atom,
.hero-video-wrap video{
  width: 100%;
  height: 100%;
}

.hero-quote-wrap {
  background-color: #151515b3;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 6.25rem;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.hero-quote-info {
  z-index: 3;
  grid-column-gap: var(--gap--gap-6);
  grid-row-gap: var(--gap--gap-6);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: auto;
  display: flex;
}
.hero-quote-card {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
  border-radius: var(--border-radius--sm);
  background-color: #15151533;
  border: 1px solid #ffffff1a;
  flex-flow: column;
  width: 240px;
  padding: .625rem;
  display: flex;
}
.hero-quote-image {
  border-radius: var(--border-radius--sm);
  width: 100%;
  height: 100%;
}



.hero-title-wrap {
  margin-top: .938rem;
}


.hero-title-wrap {
  margin-top: .938rem;
}

.hero-title {
  font-weight: var(--_typography---h1--font-weight-700);
  margin-bottom: 0;
}

.quote-founder-info {
  grid-column-gap: var(--gap--gap-2);
  grid-row-gap: var(--gap--gap-2);
  text-align: center;
  flex-flow: column;
  display: flex;
}
.quote-founder-name {
  color: var(--color--white);
  font-size: var(--_typography---body--body-sm);
}

.quote-founder-job {
  color: var(--color--gray-3);
  font-size: var(--base-font-size--base-small);
}

.quote-description {
  color: var(--color--white);
  text-align: center;
  width: 385px;
  margin-bottom: 0;
}


.hero-wrap {
  /*z-index: 1;
  margin-bottom: 2.5rem;
  position: relative;*/
   position: relative;
  z-index: 2;
  margin-bottom: 0; /* esto evitó que baje el bloque */
}
.grid-hero {
  grid-column-gap: var(--gap--gap-10);
  grid-row-gap: var(--gap--gap-10);
  grid-template-rows: auto;
  grid-template-columns: 1.8fr 1fr;
  margin-bottom: 8.125rem;
}

.hero-left-wrap {
  position: relative;
}

.hero-left-inner {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
}
.hero-inner-section{
  padding-top: 0;
}

/* =========================
   HERO - MOBILE FIX
   ========================= */
@media (max-width: 767px) {

  /* Evita el “corte” por barras del navegador móvil */
  .hero-section{
    height: auto;              /* en tu CSS está en 100vh :contentReference[oaicite:2]{index=2} */
    min-height: 100svh;        /* mejor que 100vh en mobile */
  }

  /* El hero en 1 columna */
  .grid-hero{
    grid-template-columns: 1fr;  /* antes 1.8fr 1fr :contentReference[oaicite:3]{index=3} */
    grid-row-gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  /* Alineación del contenido derecho */
  .hero-right-wrap{
    align-items: flex-start;
    text-align: left;
  }

  /* Card/quote sin anchos fijos */
  .hero-quote-card{
    width: min(260px, 92vw);
  }

  .quote-description{
    width: auto;               /* antes 385px :contentReference[oaicite:4]{index=4} */
    max-width: 92vw;
    padding: 0 1rem;
    font-size: 0.95rem;
  }

  /* Ajuste del título para que no se “coma” el layout */
  .hero-title{
    font-size: clamp(34px, 9vw, 56px);
    line-height: 1.05;
  }

  /* Menos “aire” abajo para que no se vea aplastado */
  .hero-quote-wrap{
    padding-bottom: 2.25rem;   /* antes 6.25rem :contentReference[oaicite:5]{index=5} */
  }

  /* El video siempre cubriendo */
  .hero-video-wrap video,
  .hero-background-video{
    object-fit: cover;
  }
}
/* 5) Si quieres una capa oscura para leer mejor el texto */
.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: rgba(0,0,0,0.35);
}

.section-spacing-top {
  padding-top: var(--_layout---spacing--section-spacing);
}

@media screen and (min-width: 1920px) {
 

  .hero-background-video {
    height: 1100px;
  }
}
@media screen and (max-width: 991px) {



  .hero-background-video {
    height: 700px;
  }}

  @media screen and (max-width: 767px) {
  


  .hero-background-video {
    height: 550px;
  }
  }
  .video-button {
  z-index: 2;
}

.play-state {
  border-radius: var(--border-radius--xl);
  background-color: var(--color--grey-1);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.play-state {
  background-color: var(--color--primary-2);
}

@media screen and (min-width: 1920px) {
 


  .hero-quote-wrap {
    background-color: #1515154d;
  }
}
@media screen and (max-width: 991px) {


 
  .hero-quote-wrap {
    padding-bottom: 5rem;
  }}

  
@media screen and (max-width: 479px) {
 


  
  .quote-description {
    width: auto;
    padding-left: .9375rem;
    padding-right: .9375rem;
  }}
  
  
@media screen and (min-width: 1920px) {
 

  .grid-hero {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
    grid-template-columns: 3fr 1fr;
    align-items: center;
  }}

  @media screen and (min-width: 1920px) {
 

  

  .hero-left-inner {
    padding-right: 35rem;
  }
  }