:root{
      --bg-outer:#4b4b4b;
      --white:#edeeef;
      --text:#1d1d1f;
      --nav:#0f1540;
      --brand:#b31318;
      --green:#0f6a4a;
      --shadow: 0 18px 40px rgba(0,0,0,.35);

      --top-strip-h: 16px;      /* barra azul fina */
      --header-pad-x: 26px;
      --header-pad-y: 14px;

      /* ✅ blanco (izquierda) un poco más de la mitad */
      --hero-left: 60%;
      --hero-right: 40%;

      /* altura del header para separar contenido en hero-left */
      --header-h: 78px;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: Myriad Pro, sans-serif;
      background:var(--bg-outer);
      color:var(--text);
      width:100%;
    }

    .frame{
      min-height:100vh;
      display:flex;
      justify-content:center;
    }

    .page{
      background:var(--white);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
      border-radius: 2px;
      width: 100%;
    }

    /* barra azul superior */
    .page::before{
      content:"";
      position:absolute;
      left:0; right:0; top:0;
      height: var(--top-strip-h);
      background: var(--nav);
      z-index: 999;
      pointer-events:none;
      width: 85%;
      margin: 0 auto;
    }

    /* ================= HEADER (SOLO IZQUIERDA, NO SOBRE SLIDER) ================= */
    .topbar{
      position:absolute;
      top:0;
      left:0;
      width: var(--hero-left);
      background:#fff;
      padding: calc(var(--top-strip-h) + var(--header-pad-y) + 20px)
               var(--header-pad-x)
               var(--header-pad-y);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      z-index: 50;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }
    .logo{ width:160px; height:34px; display:block; }

    /* ================= MENÚ DESKTOP (PILL DESLIZABLE) ================= */
    .menu{
      position:relative;
      display:flex;
      align-items:center;
      flex:1;
      justify-content:flex-start;
      flex-wrap:wrap;
      padding: 6px 0;
    }

    /* el “pill” que se mueve */
    .menu-indicator{
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      height: 38px;                 /* ✅ más alto */
      background: var(--nav);
      border-radius: 18px;
      z-index:0;
      transition: left .22s ease, width .22s ease, opacity .18s ease;
      opacity: 1;
      pointer-events:none;
    }

    .menu a{
      position:relative;
      z-index:1;
      display:inline-flex;
      align-items:center;
      height: 38px;                
      padding: 0 14px;             
      border-radius: 18px;
      text-decoration:none;
      color:#2b2b2b;
      font-size:15px;
      font-weight:700;
      background: transparent;  
      white-space: nowrap;
      line-height: 1.1;
      color:#000 !important;
    }

    nav.menu a{ color:#000 !important; }
nav.menu a.active,
nav.menu a:hover{ color:#ebebeb !important; }

    /* ================= HERO ================= */
    .hero{
      display:grid;
      grid-template-columns: var(--hero-left) var(--hero-right);
      min-height: 520px;
      position:relative;
    }

    .hero-left{
      position:relative;
      padding: calc(var(--header-h) + 52px) 64px 56px 100px;
      background:#edeeef;
    }

    .stripe-box{
      position:absolute;
      left:44px;
      top: calc(var(--header-h) + 36px);
      width: 330px;
      height: 80px;
      background:repeating-linear-gradient( -45deg, #ffffff 0px, #ffffff 10px, #f2f2f2 10px, #f2f2f2 20px );
      border-radius:2px;
      z-index:0;
    }

    .kicker{
      position:relative;
      z-index:1;
      font-size:16px;
      letter-spacing:6px;
      color:#2b2b2b;
      font-weight:700;
    }

    .headline{
      position:relative;
      z-index:1;
      margin:0;
      font-size:54px;
      line-height:0.95;
      font-weight:900;
      color:var(--brand);
      letter-spacing:2px;
    }
    .headline .line{ display:block; }

    .desc{
      position:relative;
      z-index:1;
      margin:22px 0 0 0; 
      font-size:14px;
      line-height:1.85;
      color:#2d2d2d;
      letter-spacing:2px;
    }

    .cta{
      position:relative;
      z-index:1;
      display:inline-block;
      margin-top:26px;
      background:var(--green);
      color:#fff;
      text-decoration:none;
      font-weight:700;
      font-size:13px;
      padding:10px 44px;
      border-radius:2px;
    }

    /* ================= SLIDER ================= */
    .hero-right{
      position:relative;
      background:#111;
      overflow:hidden;
      min-height: 520px;
    }

    .slides{ position:absolute; inset:0; }
    .slide{
      position:absolute;
      inset:0;
      opacity:0;
      transform:scale(1.02);
      transition: opacity .6s ease, transform .8s ease;
    }
    .slide.active{ opacity:1; transform:scale(1); }
    .slide img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:saturate(.95) contrast(.95);
    }

    .hero-right::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.25));
      pointer-events:none;
      z-index:1;
    }

    /* redes encima del slider */
    .social-overlay{
      position:absolute;
      top: 38px;
      right: 28px;
      z-index: 3;
      display:flex;
      gap:10px;
      align-items:center;
    }
    .social-overlay a{
      width:28px;
      height:28px;
      border-radius:999px;
      display:grid;
      place-items:center;
      text-decoration:none;
      background: rgba(15,21,64,.85);
      box-shadow: 0 10px 18px rgba(0,0,0,.22);
      opacity:.95;
    }
    .social-overlay svg{
      width:20px;
      height:20px;
      fill:#fff;
    }

    /* ✅ hamburger debajo de redes (solo mobile) */
    .hamburger-overlay{
      position:absolute;
      top: 52px;
      right: 28px;
      z-index: 4;
      display:none;
      width:42px;
      height:38px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.35);
      background: rgba(15,21,64,.75);
      cursor:pointer;
      align-items:center;
      justify-content:center;
      padding:0;
      box-shadow: 0 10px 18px rgba(0,0,0,.22);
    }
    .hamburger-overlay span{
      display:block;
      width:18px;
      height:2px;
      background:#fff;
      position:relative;
    }
    .hamburger-overlay span::before,
    .hamburger-overlay span::after{
      content:"";
      position:absolute;
      left:0;
      width:18px;
      height:2px;
      background:#fff;
      transition: transform .2s ease, top .2s ease, opacity .2s ease;
    }
    .hamburger-overlay span::before{ top:-6px; }
    .hamburger-overlay span::after{ top:6px; }

    /* menú mobile overlay */
/* menú mobile overlay (FIJO, NO SE RECORTA) */
.mobile-menu-overlay{
  position: fixed;              /* ✅ antes absolute */
  top: 98px;                    /* ajusta si quieres */
  right: 28px;
  z-index: 2000;                /* ✅ encima de todo */
  display:none;

  width: min(340px, 90vw);
  background: rgba(255,255,255,.98);
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);

  max-height: calc(100vh - 120px); /* ✅ se ve completo */
  overflow: auto;                  /* ✅ scroll si hace falta */
  -webkit-overflow-scrolling: touch;

  /* para el indicador */
  overflow-x: hidden;
}

.mobile-menu-overlay a{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  min-height: 44px;             /* ✅ alto cómodo */
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color:#2b2b2b;
  font-weight:800;
  font-size:14px;
}

/* ✅ ya NO pintamos el active aquí (lo pintará el indicador) */
.mobile-menu-overlay a.active{ color:#ebebeb; }
.mobile-menu-overlay a:hover{ color:#ebebeb; }

/* ✅ indicador móvil (pill que se mueve) */
.mobile-indicator{
  position:absolute;
  left:10px;
  right:10px;
  height:44px;
  top:10px;
  background: var(--nav);
  border-radius: 12px;
  transition: top .22s ease, height .22s ease;
  z-index:0;
  pointer-events:none;
}
    /* abierto */
    .nav-open .mobile-menu-overlay{ display:block; }
    .nav-open .hamburger-overlay span{ background:transparent; }
    .nav-open .hamburger-overlay span::before{ top:0; transform:rotate(45deg); }
    .nav-open .hamburger-overlay span::after{ top:0; transform:rotate(-45deg); }

    .quote{
      position:absolute;
      left:50%;
      bottom:26px;
      transform: translateX(-50%);
      z-index:3;
      color:rgba(255,255,255,.92);
      font-style:italic;
      font-size:15px;
      font-weight:600;
      text-align:center;
      text-shadow:0 2px 14px rgba(0,0,0,.55);
      width: 100%;
      padding: 0 56px;
    }

    /* Track + dots */
    .track{
      position:absolute;
      top:90px;
      right:22px;
      bottom:88px;
      width:38px;
      z-index:3;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:space-between;
      padding:18px 0;
      pointer-events:auto;
    }
    .track::before{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      left:50%;
      width:3px;
      transform:translateX(-50%);
      background:rgba(255,255,255,.92);
      border-radius:2px;
    }
    .dot{
      width:18px;
      height:18px;
      border-radius:999px;
      background: rgba(255,255,255,.98);
      border: 3px solid rgba(255,255,255,.98);
      cursor:pointer;
      position:relative;
      z-index:2;
      transition:
        width .35s ease,
        height .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
      color: transparent;
      font-size: 0;
      display:grid;
      place-items:center;
    }
    .dot.active{
      width:24px;
      height:24px;
      border-width:0;
      background:rgba(255,255,255,.98);
      color:#bdbdbd;
      font-weight:800;
      font-size:12px;
      box-shadow:0 10px 18px rgba(0,0,0,.25);
      cursor:default;
      transform: scale(1.02);
    }

    .divider-shadow{
      height:18px;
      background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
    }

    
    /* ====== SECCIONES GENERALES ====== */

.section-kicker{
  text-align:center;
  letter-spacing:6px;
  font-size:14px;
  font-weight:700;
  color:#2b2b2b;
  margin:0;
}

.section-title{
  text-align:center;
  margin:10px 0 60px;
  font-size:42px;
  font-weight:900;
  color:var(--brand);
  letter-spacing:2px;
}
li{
  font-family: Myriad Pro, sans-serif !important;
  font-size: 16px;
  color: #2d2d2d !important;
}
li::marker {
  color: red; /* Aquí pones el color que quieras */

}

/* ====== SOBRE / NOSOTROS (estilo como la imagen) ====== */
.about-section{
  padding: 70px 70px 40px;
  background:#f3f3f3; /* tono gris claro como la referencia */
}

.about-head{
  text-align:center;
  margin-bottom: 40px;
}

.about-head .section-kicker{
  margin: 0;
}

.about-head .section-title{
  margin: 10px 0 0;
}

/* layout 2 columnas: imagen izquierda, texto derecha */
.about-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 70px;
  align-items:center;
  width: 90%;
        margin: 0 auto;
        padding-bottom: 20px;
        padding-top: 20px;
}

/* Imagen con “cajita” rayada detrás (como el estilo del hero) */
.about-image{
  position:relative;
}
.about-image::before{
  content:"";
  position:absolute;
  left:-26px;
  top:-22px;
  width: 210px;
  height: 120px;
  background:
    repeating-linear-gradient(
      -45deg,
      #e8e8e8 0px,
      #e8e8e8 10px,
      #f7f7f7 10px,
      #f7f7f7 20px
    );
  border-radius:2px;
  z-index:0;
}
.about-image img{
  position:relative;
  z-index:1;
  width:90%;
  display:block;
  border-radius:2px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  margin: 0 auto;
}

/* Texto derecha */
.about-text h3{
  margin:0 0 14px;
  color: var(--green);
  font-size: 23px;
  font-weight: 800;
}
.about-text p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.9;
  color:#2d2d2d;
}


/* ===== SECCIÓN MVX (Misión / Visión / Valores estilo cards imagen+gris) ===== */

.mvx-section{
  padding: 70px 60px;
}

.mvx-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 2em;
}

.mvx-card{
  border-radius:10px;
  overflow:hidden;
  background:#f3f3f3;
  box-shadow: 0 16px 30px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;

display:flex;
flex-direction:column;
height:100%;
}

.mvx-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 40px rgba(0,0,0,.18);
}

/* imagen superior */
.mvx-img{
  position:relative;
  height: 240px;
  overflow:hidden;
}

.mvx-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* bloque gris inferior */
.mvx-body{
  background:#f3f3f3;
  padding: 26px 24px 30px;
  position:relative;
display:flex;
flex-direction:column;
flex:1;
}

/* línea gris divisoria tipo referencia */
.mvx-body::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:#c9c9cf;
}

.mvx-body h3{
  margin: 8px 0 14px;
  font-weight:900;
  letter-spacing:1px;
  color:#2a2a2a;
  color: var(--green);
  font-size: 23px;
  font-weight: 800;
}
}

.mvx-body p{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:#333;
}

.mvx-body ul{
  margin:0;
  padding-left:18px;
  line-height:1.9;
  font-size:15px;
  flex:1;
}
.btn-cotizar{
margin-top:auto;
width:70%;
padding:12px;
border:none;
background:#0f1540;
color:#fff;
font-weight:600;
letter-spacing:.5px;
cursor:pointer;
transition:.3s;
border-radius:4px;
margin: 0 auto;
}
.btn-cotizar a{
  text-decoration: none;
}

.btn-cotizar:hover{
background:#b31318;
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.15);
}
  FORMULARIO MODERNO
========================= */
.contact-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #0f1540;
  position: relative;
}

.form-section {
  max-width: 1100px;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}

/* Línea decorativa lateral */
.form-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to bottom, #004376, #ed1c24);
}

/* INFO */
.form-info {
  flex: 1;
  min-width: 280px;
  color: #333;
}

.form-info h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #004376;
}

.form-info p {
  margin: 10px 0;
  font-size: 1rem;
  color: #666;
}

.phone-list {
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: 20px;
  color: #0f1540!important;
}
.phone-list a{
  text-decoration: none !important;
  color: #0f1540!important;
}

/* CAMPOS */
.form-fields {
  flex: 1;
}

.form-fields label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #004376;
  margin-bottom: 6px;
  display: block;
  letter-spacing: .5px;
}

/* Inputs modernos */
.form-fields input,
.form-fields select,
.form-fields textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 0.95rem;
  border-radius: 12px;
  border: 1px solid #e0e6ed;
  background: #f9fbfd;
  transition: all .3s ease;
}

/* Efecto focus elegante */
.form-fields input:focus,
.form-fields select:focus,
.form-fields textarea:focus {
  border-color: #004376;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0,67,118,0.1);
}

/* Textarea más alto */
.form-fields textarea {
  min-height: 120px;
  resize: vertical;
}

/* BOTÓN PREMIUM */
.form-fields button {
  margin-top: 25px;
  background: linear-gradient(135deg, #004376, #0f1540);
  color: #fff;
  font-weight: 700;
  padding: 14px 30px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 10px 25px rgba(0,67,118,0.25);
}

/* Hover elegante */
.form-fields button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0,67,118,0.35);
}
h2{
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--green);
  text-align: center;
}
.revistas-section{
width:90%;
max-width:1200px;
margin:80px auto;
font-family:sans-serif;
}
.revistas-section img, .video-gallery img
{
  margin: 0 auto;
  width: 60%;
  display: block;
}
.revista-title{
text-align:center;
font-size:34px;
margin-bottom:40px;
letter-spacing:3px;
}

/* visor */

.revista-viewer{
width:100%;
height:520px;
border-radius:10px;
overflow:hidden;
box-shadow:0 20px 40px rgba(0,0,0,.15);
margin-bottom:40px;
}

.revista-viewer iframe{
width:100%;
height:100%;
}

/* lista */

.revistas-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:25px;
}

/* tarjeta revista */

.revista-item{
cursor:pointer;
text-align:center;
transition:.3s;
}

.revista-item img{
width:100%;
border-radius:6px;
box-shadow:0 12px 25px rgba(0,0,0,.15);
}

.revista-item:hover{
transform:translateY(-6px) scale(1.03);
}

.revista-item p{
margin-top:10px;
font-weight:600;
color:#333;
}
.video-gallery{
width:90%;
max-width:1200px;
margin:80px auto;
font-family:sans-serif;
}

.video-title{
text-align:center;
font-size:34px;
margin-bottom:40px;
letter-spacing:3px;
color:#222;
}

/* visor principal */

.video-player{
width:100%;
height:520px;
border-radius:12px;
overflow:hidden;
box-shadow:0 20px 45px rgba(0,0,0,.15);
margin-bottom:40px;
}

.video-player iframe{
width:100%;
height:100%;
}

/* miniaturas */

.video-thumbnails{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:25px;
}

.video-thumb{
cursor:pointer;
transition:.3s;
}

.video-thumb img{
width:100%;
border-radius:8px;
box-shadow:0 12px 25px rgba(0,0,0,.15);
}

.video-thumb:hover{
transform:translateY(-6px) scale(1.04);
}

.video-thumb p{
margin-top:10px;
font-weight:600;
color:#333;
font-size:15px;
}

/* SERVICIOS */

.services-home{
padding:90px 8%;
text-align:center;
}

.services-header h2{
font-size:34px;
margin-bottom:10px;
}

.services-grid{
margin-top:50px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:28px;
}

.service-card{
background:white;
padding:35px;
border-radius:10px;
text-decoration:none;
color:#111;
transition:.35s;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

.service-icon{
font-size:40px;
margin-bottom:10px;
}



/* REVISTA */

.revista-home{
padding:90px 8%;
background:white;
}

.revista-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.revista-preview iframe{
width:100%;
height:420px;
border:none;
border-radius:8px;
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

.revista-btn{
display:inline-block;
margin-top:20px;
background:#111;
color:white;
padding:12px 30px;
text-decoration:none;
border-radius:6px;
}



/* VIDEOS */

.videos-home{
padding:90px 8%;
background:#fafafa;
text-align:center;
}

.videos-grid{
margin-top:40px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.video-card{
position:relative;
overflow:hidden;
border-radius:10px;
cursor:pointer;
}

.video-card img{
width:100%;
display:block;
transition:.4s;
}

.video-card:hover img{
transform:scale(1.08);
}

.video-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.45);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:white;
font-size:20px;
opacity:0;
transition:.3s;
}

.video-card:hover .video-overlay{
opacity:1;
}



/* ABOUT */

.about-home{
padding:40px 8%;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-img img{
width:100%;
border-radius:10px;
}

.about-btn{
display:inline-block;
margin-top:20px;
background:#111;
color:white;
padding:12px 28px;
text-decoration:none;
border-radius:6px;
}



/* CTA */

.cta-home{
padding:90px 8%;
text-align:center;
background:#111;
color:white;
}

.cta-button{
display:inline-block;
margin-top:20px;
background:white;
color:#111;
padding:14px 32px;
border-radius:6px;
text-decoration:none;
font-weight:600;
}
    /*footer*/

    footer{
      background-color: #0f1540;
  padding: 1% 0;
  color: #fff;
  text-align: center;
    }
    footer p {
  color: #ffffff;
  display: block;
  text-align: center;
}

/* ===== RESPONSIVE ===== */
/* ================= RESPONSIVE ================= */
@media (max-width: 1280px){
  .menu a {
  font-size: 13px;
  }
  .logo {
  width: 110px;
}
  }
    @media (max-width: 1024px){
      .menu{ display:none; }

      .topbar{
        width: auto;
        background: transparent;
        padding: calc(var(--top-strip-h) + 10px) 16px 0;
      }

      .brand{
        background: rgba(255,255,255,.96);
        border-radius: 12px;
        padding: 8px 10px;
        box-shadow: 0 12px 28px rgba(0,0,0,.10);
      }

      .hero{ grid-template-columns: 1fr; }
      .hero-right{ order:1; min-height:420px; }
      .hero-left{ order:2; padding: 64px 40px; }

      .stripe-box{ left:28px; top:54px; width:320px; }

      .hamburger-overlay{ display:flex; }

      .social-overlay{ right: 22px; }
      .hamburger-overlay{ right: 22px; }
      .mobile-menu-overlay{ right: 22px; }

      .track{ right:14px; }
      .social-overlay{
    top: 18px;
    right:22px;
  }

  .hamburger-overlay{
    top: 58px;   /* queda debajo de redes */
    right:22px;
  }
  .track{
  display:none !important;
}
.about-grid{
display:flex;
flex-direction:column;
}

/* imagen siempre primero */
.about-image{
order:1;
}

/* texto después */
.about-text{
order:2;
}
    }

    @media (max-width: 1000px){
  .mvx-grid{
    grid-template-columns: 1fr 1fr;
  }

/* responsive */
@media (max-width: 900px){
  .about-section{ padding:60px 30px 30px; }
  .about-grid{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .about-image::before{ left: -16px; top: -16px; }
.revista-content,
.about-grid{
grid-template-columns:1fr;
}
.page::before {
  visibility: hidden;
}
}
/* responsive */

@media (max-width:768px){

.video-player{
height:300px;
}

.video-thumbnails{
grid-template-columns:1fr 1fr;
}
  .form-section {
    flex-direction: column;
    padding: 35px;
  }
  .hero-right{
    min-height:260px;   /* antes 420 o 340 */
    max-height:260px;
  }

  .slides,
  .slide{
    height:260px;
  }

  .slide img{
    object-fit:cover;
    object-position:center; /* evita que se vea tan ancha */
  }
}


@media (max-width: 640px){
  .mvx-section{
    padding: 50px 20px;
  }

  .mvx-grid{
    grid-template-columns: 1fr;
  }

  .mvx-img{
    height: 200px;
  }
}


 @media (max-width: 520px){
      .frame{ padding: 18px 10px; }
      .hero-right{ min-height:340px; }
      .headline{ font-size:42px; }
      .desc{ letter-spacing:1px; }
      .cta{ width:160px; text-align:center; padding:10px 0; }
      .dot.active{ width:56px; height:56px; font-size:20px; }

      .social-overlay{ top:14px; right:14px; }
      .hamburger-overlay{ top:48px; right:14px; }
      .mobile-menu-overlay{ top:94px; right:14px; width: min(320px, 88vw); }
    }