/* Auto-generated responsive overrides */
/* Base fluid elements */
*{box-sizing:border-box;}
html,body{max-width:100%; overflow-x:hidden;}
img,video,canvas{max-width:100%; height:auto; display:block;}
iframe{max-width:100%;}
/* La regla de 'table' se ha eliminado */

/* Tap target sizing */
button, a.button, .btn{min-height:44px; padding:0.75rem 1rem;}
/* Container padding */
.container, .wrap, .content, main{padding-left:1rem; padding-right:1rem;}
/* Typography scaling */
body{line-height:1.5;}
p{margin:0.75rem 0;}
/* Simple grid helpers */
.row{display:flex; flex-wrap:wrap; gap:1rem;}
.col{flex:1 1 100%;}
@media (min-width:640px){
  .col-sm-6{flex:1 1 calc(50% - 0.5rem);}
  .col-sm-4{flex:1 1 calc(33.333% - 0.67rem);}
  .col-sm-3{flex:1 1 calc(25% - 0.75rem);}
}
/* BLOQUE "Nav stacking on mobile" ELIMINADO */

/* Font scaling for very small screens */
@media (max-width:420px){
  body{font-size:16px;}
  h1{font-size:1.6rem;}
  h2{font-size:1.35rem;}
  h3{font-size:1.2rem;}
}

/* Optional: improve focus visibility */
:focus{outline:2px solid rgba(0,0,0,0.6); outline-offset:2px;}
/* Improve link visibility */
a{text-decoration-thickness: .08em;}
/* Increase line-height for headings on mobile */
@media (max-width:768px){
  h1,h2,h3{line-height:1.2;}
}

/* ==== Fluid Typography & Layout Tweaks ==== */
:root{
  --step--1: clamp(0.875rem, 0.82rem + 0.28vw, 0.95rem);
  --step-0: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.7vw, 1.5rem);
  --step-2: clamp(1.563rem, 1.4rem + 1vw, 1.875rem);
  --step-3: clamp(1.953rem, 1.7rem + 1.4vw, 2.25rem);
}
body{font-size:var(--step-0);}
h1{font-size:var(--step-3);}
h2{font-size:var(--step-2);}
h3{font-size:var(--step-1);}
small,.small{font-size:var(--step--1);}

/* BLOQUE "Hamburger Menu" ELIMINADO */

/* El "Table stacking helper" se ha eliminado */

/* === REGLA UNIFICADA PARA MÓVIL VERTICAL === */
@media (max-width: 540px) and (orientation: portrait) {

  /* 1. Elimina espacio entre header y hero */
  header { margin-bottom: 0 !important; }
  header + * { margin-top: 0 !important; }
  header + .hero {
    margin-top: 0 !important;
    padding-top: 64px !important; /* Mantiene el espacio para el topbar */
  }
  video:first-of-type {
    margin-top: 0 !important;
    top: 0 !important;
  }

  /* 2. Ajustes de layout del Hero y Texto */
  .hero {
    grid-template-rows: auto !important; /* Anula '1fr' para que el texto suba */
    gap: 0 !important;
    padding-bottom: 2rem !important; /* Espacio antes de los botones CTA */
  }
  .copy {
    margin-bottom: 1rem !important; /* Espacio entre título y botones */
    /* Tamaño de fuente reducido (20% más pequeño) */
    font-size: clamp(1.6rem, 4.8vw, 3.2rem);
  }

  /* 3. El "Scale Trick" (v14) para el video */
  .hero .media video#vid {
    object-fit: cover !important;
    object-position: initial !important;
    width: 242.86vw !important;
    max-width: none !important;
    position: absolute !important;
    left: 50% !important;
    top: 50px !important;
    transform: translateX(-50%) scale(0.7) !important;
    transform-origin: top center !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 1 !important;
  }

  /* 4. Asegura que el texto esté visible encima del video */
  .hero .copy {
    z-index: 2 !important;
  }

  /* 5. Ajustes del logo "Ignighted" al final */
  section.brand2#photoclips2 {
    display: block !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section.brand2#photoclips2 a,
  section.brand2#photoclips2 img {
    display: block !important;
  }
  section.brand2#photoclips2 img[src$="assets/images/svg/ignighted-logo.svg"] {
    max-width: 80% !important;
    width: 80% !important; /* Usamos 80% para consistencia */
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}