/*
 * GRUPO LUCKY · ADAPTACIÓN RESPONSIVE 2026
 * Capa final de overrides: conserva el diseño de escritorio y corrige el
 * CSS heredado que contiene reglas !important. Ver README.md.
 * Base: móvil de 320 px; cortes por contenido, no por marca de dispositivo.
 */

:root {
  --gl-gutter: clamp(16px, 4.6vw, 72px);
  --gl-radius: 22px;
}

/* Mejoras universales: progresivas y seguras en WebKit/Blink/Gecko. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden !important; }
@supports (overflow: clip) {
  body { overflow-x: clip !important; }
}
main, main > section, .wrap, .legal-layout, .legal-cards,
.dm-brand, .dm-alliances-grid, .gallery, .formation .program-list,
.career-story, .stories-grid, .recognition-grid { min-width: 0; }
img, video, picture, iframe { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { max-width: 100%; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #00f1b2;
  outline-offset: 3px;
}
:where(h1,h2,h3,h4,p) { overflow-wrap: break-word; }
/* No obligar a palabras cortas a dividirse salvo que sean realmente largas. */
:where(.legal-layout,.dm-alliances-grid,.jobs-head,.recognition-grid,.career-story) > * { min-width: 0; }
/* Posters: el estilo original del vídeo usa background: ... !important; lo restauramos explícitamente. */
#video-beneficios .v13-moving-background {
  background-image: linear-gradient(90deg,rgba(11,11,11,.86),rgba(11,11,11,.26)),url('/assets/img/vida-en-grupo/video-beneficios.jpg') !important;
}
#linea-carrera .v13-moving-background {
  background-image: linear-gradient(90deg,rgba(11,11,11,.84),rgba(11,11,11,.28)),url('/assets/img/vida-en-grupo/video-linea-carrera.jpg') !important;
}
#reconocimiento .v13-moving-background {
  background-image: linear-gradient(90deg,rgba(11,11,11,.84),rgba(11,11,11,.28)),url('/assets/img/vida-en-grupo/video-reconocimiento.jpg') !important;
}
.gallery-item .label,.backtop{
  -webkit-backdrop-filter: blur(12px);
}
.v13-dialog-player { min-height: 180px; }
.v13-dialog-player iframe { display:block; width:100%; height:100%; }
.v13-dialog { max-width: min(1100px, 94vw); }

/* Navegación compacta para tabletas y portátiles estrechos. */
@media (max-width: 1199px) {

  html { scroll-padding-top:90px !important; }
  section[id] { scroll-margin-top:90px !important; }
}

/* Tablet, teléfonos grandes y vista vertical de línea de carrera. */
@media (max-width: 900px) {
  :root { --gl-gutter: clamp(16px, 5vw, 34px); }
  .wrap { width:100%; max-width:100%; padding-inline:var(--gl-gutter) !important; }
  .jobs, .legal-feature, .dm-alliances, .culture, .formation,
  .excellence, .principles, .stories { padding-top:72px !important; padding-bottom:76px !important; }
  .section-title, .jobs h2, .legal-feature h2, .v12-career-story h2,
  #lucky-social-footer h2 {
    font-size:clamp(39px, 7.7vw, 72px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
    max-width:100%;
  }
  /* Hero con altura basada en contenido: no recortar texto con 100vh móvil. */
  #inicio.v12-hero {
    height:auto !important;
    min-height: min(730px, 90vh) !important;
    padding:70px var(--gl-gutter) !important;
    align-items:center !important;
    background:#111;
  }
  #inicio .v12-hero-panel {
    width:min(100%, 660px) !important;
    max-width:100% !important;
    margin:0 !important;
    padding:clamp(22px,5vw,38px) !important;
    border-radius:var(--gl-radius) !important;
  }
  #inicio .v12-hero-panel h1 {
    font-size:clamp(38px,7.4vw,69px) !important;
    line-height:1.03 !important;
    letter-spacing:-.043em !important;
    overflow-wrap:break-word;
  }
  #inicio .v12-hero-panel p { max-width:52ch; }
  .jobs-head { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:8px; }
  .jobs-head p { max-width:65ch !important; }
  .searchbar { width:100%; max-width:100%; margin:22px 0 30px; }
  .searchbar input { min-width:0; font-size:16px; }
  .chips { margin:22px 0 !important; }
  .legal-layout { grid-template-columns:minmax(0,1fr) !important; }
  .legal-image { min-height:360px; }
  .legal-cards { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .legal-card { min-width:0 !important; }
  .dm-brand, .dm-alliance-head, .dm-alliances-grid {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .dm-brand { padding:clamp(16px,4vw,28px) !important; }
  .dm-brand-logo { max-width:100%; }
  .dm-brand-logo img { max-width:100%; height:auto; }
  .dm-alliance-img { height:clamp(280px,55vw,430px) !important; }
  .dm-alliances-grid { margin-top:32px; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px; }
  .gallery-item { height:310px !important; }
  .gallery-item:nth-child(2) { margin-top:0 !important; }
  .gallery-item:nth-child(3) { display:block !important; margin-top:0 !important; }
  .gallery-item img { width:100%;height:100%;object-fit:cover; }
  .formation .program {
    grid-template-columns:64px minmax(0,1fr) 36px !important;
    grid-template-areas:'num title arrow' 'num desc arrow';
    min-height:0 !important;
    padding:23px !important;
    gap:8px 16px !important;
  }
  .formation .program-no { grid-area:num; align-self:start !important; }
  .formation .program h3 { grid-area:title; font-size:clamp(28px,5vw,42px) !important; }
  .formation .program p { grid-area:desc; font-size:16px !important; }
  .formation .program-arrow { grid-area:arrow; }
  .recognition-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .v12-career-story { padding:65px var(--gl-gutter) !important; }
  .v12-career-story .career-story { grid-template-columns:1fr !important; }
  .stories-grid { grid-template-columns:1fr !important; }
  .final-cta { padding:90px var(--gl-gutter) !important; }
  .final-cta h2 { font-size:clamp(44px,8vw,76px) !important; }

  /* Las transiciones del prototipo original desenfocaban todo el texto
     al hacer scroll. En táctiles reducimos el costo y el tiempo de espera. */
  .reveal { filter:none !important; transform:translateY(14px) !important; transition:opacity .26s ease,transform .3s ease !important; }
  .reveal.visible { opacity:1 !important; filter:none !important; transform:none !important; }
  .photo-reveal { clip-path:none !important; }

  /* Timeline accesible con desplazamiento vertical NATIVO para móvil y tablet. */
  #linea-carrera.v13-career { height:auto !important; min-height:0 !important; }
  #linea-carrera .v13-career-screen {
    height:auto !important; min-height:0 !important;
    position:relative !important; top:auto !important;
    overflow:hidden !important;
    padding-bottom:35px;
  }
  #linea-carrera .v13-career-header {
    position:relative !important;
    top:auto !important; left:auto !important;
    padding:clamp(38px,7vw,70px) var(--gl-gutter) 25px;
    max-width:100%;
  }
  #linea-carrera .v13-career-track {
    width:100% !important; height:auto !important;
    display:grid !important; grid-template-columns:minmax(0,1fr) !important;
    transform:none !important;
    will-change:auto !important;
    padding:0 var(--gl-gutter);
    gap:12px;
  }
  #linea-carrera .v13-career-stage {
    display:flex !important;
    width:100% !important; height:auto !important; min-height:215px !important;
    flex:1 1 auto !important;
    padding:28px clamp(20px,5vw,40px) !important;
    align-items:center !important;
    background:linear-gradient(110deg,#2a1644e8,#101014ee) !important;
    border:1px solid #fff3;
    border-radius:var(--gl-radius);
    overflow:hidden;
  }
  #linea-carrera .v13-career-stage:nth-child(even) {
    background:linear-gradient(110deg,#172b4be8,#131116ee) !important;
  }
  #linea-carrera .v13-stage-copy,
  #linea-carrera .v13-career-stage.active .v13-stage-copy {
    width:100% !important; max-width:100%;
    opacity:1 !important;
    transform:none !important;
  }
  #linea-carrera .v13-career-stage h3 {
    font-size:clamp(35px,7.2vw,65px) !important;
    line-height:1 !important; letter-spacing:-.05em !important;
    margin:14px 0 12px !important;
    overflow-wrap:anywhere;
  }
  #linea-carrera .v13-career-stage h4 { font-size:clamp(19px,3vw,30px) !important; }
  #linea-carrera .v13-career-stage p { font-size:clamp(16px,2.2vw,19px) !important; }
  #linea-carrera .v13-stage-decor { display:none !important; }
  #linea-carrera .v13-stage-count,#linea-carrera .v13-progress { display:none !important; }
  #linea-carrera .v13-moving-player { display:none !important; }
  .v13-film { height:auto !important; min-height:490px !important; padding:60px 0; }
  .v13-film-content { padding:26px var(--gl-gutter) !important; }
  .v13-film h2 { font-size:clamp(42px,8vw,80px) !important; }
  .v13-film p { font-size:clamp(17px,3vw,24px) !important; }
  .v13-recognition-video { min-height:450px !important; }
  .v13-recognition-video .media-copy { padding-inline:clamp(16px,4vw,35px) !important; }
  .v13-recognition-video .media-copy h3 { font-size:clamp(32px,6vw,55px) !important; }
  .v13-video-zone iframe.v13-moving-player { display:none !important; }
  .v13-dialog { width:94vw; max-height:90vh; }
  .v13-dialog-footer { flex-wrap:wrap; }
}

/* Teléfonos estándar. */
@media (max-width: 640px) {

  #lucky-region-banner { min-height:285px !important; }
  #lucky-region-banner .lucky-region-copy { width:100%; padding:30px var(--gl-gutter) !important; }
  #lucky-region-banner h2 { font-size:clamp(37px,11vw,65px) !important; }
  .jobs, .legal-feature, .dm-alliances, .culture, .formation,
  .excellence, .principles, .stories { padding-block:58px 62px !important; }
  .section-title, .jobs h2, .legal-feature h2, .v12-career-story h2,
  #lucky-social-footer h2 {
    font-size:clamp(34px,9.6vw,60px) !important;
    line-height:1.04 !important;
    overflow-wrap:normal;
  }
  #inicio.v12-hero {
    min-height:600px !important;
    height:auto !important;
    padding-block:64px !important;
  }
  #inicio .v12-hero-panel { width:100% !important; padding:clamp(22px,5vw,30px) !important; }
  #inicio .v12-hero-panel h1 { font-size:clamp(36px,9vw,55px) !important; }
  #inicio .v12-hero-panel a { text-align:center; max-width:100%; font-size:14px; }
  #inicio .v12-hero-panel p { font-size:16px !important; }
  .searchbar { flex-wrap:wrap; border-radius:20px !important; padding:12px !important; gap:8px; }
  .searchbar input { flex:1 1 calc(100% - 45px); }
  #clear-search { flex:1 1 100%; min-height:43px; }
  .jobs-meta { align-items:flex-start; flex-wrap:wrap; font-size:12px; }
  .job { grid-template-columns:25px minmax(0,1fr) 24px !important;
    grid-template-areas:'num info arrow' '. cta cta';
    column-gap:10px !important; row-gap:8px !important;
    padding:22px 5px !important; align-items:start;
  }
  .job .job-num { grid-area:num; }
  .job > div { grid-area:info; min-width:0; }
  .job .arrow { grid-area:arrow; font-size:20px; }
  .job .apply { grid-area:cta; display:inline-flex !important; justify-self:start;
    padding:8px 13px; font-size:12px;
  }
  .job-title { font-size:clamp(20px,6vw,29px) !important; line-height:1.14; overflow-wrap:break-word; }
  .job-sub { line-height:1.4; overflow-wrap:break-word; }
  .legal-image { min-height:295px !important; }
  .legal-cards { grid-template-columns:minmax(0,1fr) !important; gap:12px; }
  .legal-card { min-height:0 !important; padding:22px !important; }
  .dm-alliance-notes { grid-template-columns:minmax(0,1fr) !important; }
  .dm-alliance-img { height:300px !important; }
  .dm-alliance-img span { left:15px; right:15px; bottom:15px; padding:12px !important; font-size:12px; }
  .gallery { grid-template-columns:minmax(0,1fr) !important; margin-top:28px; }
  .gallery-item { height:270px !important; }
  .formation .program { grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:'num arrow' 'title title' 'desc desc';
    gap:12px !important; padding:24px !important;
  }
  .formation .program-no { grid-area:num; }
  .formation .program h3 { grid-area:title; font-size:clamp(31px,9vw,45px) !important; }
  .formation .program p { grid-area:desc; font-size:16px !important; }
  .formation .program-arrow { grid-area:arrow; }
  .recognition-grid { grid-template-columns:minmax(0,1fr) !important; }
  .recognition { min-height:240px !important; }
  .v12-career-story { padding-block:55px !important; }
  .v12-career-story .career-story img { height:250px !important; }
  .v12-career-story .career-story .copy { padding:22px !important; }
  .principles-grid { grid-template-columns:minmax(0,1fr) !important; }
  .quote { padding:25px !important; }
  .quote h3 { font-size:clamp(24px,7vw,33px) !important; }
  .v13-recognition-video { min-height:440px !important; }
  .v13-film h2 { font-size:clamp(39px,10vw,58px) !important; }
  #lucky-social-footer { padding:55px var(--gl-gutter) 35px !important; }
  #lucky-social-footer .lucky-footer-top { gap:25px; }
  #lucky-social-footer .lucky-socials { width:100%; }
  #lucky-social-footer .lucky-socials a,#lucky-social-footer .lucky-socials span {
    flex:1 1 132px; justify-content:center; min-width:0;
  }
  .final-cta { padding:70px var(--gl-gutter) 110px !important; }
  .final-cta h2 { font-size:clamp(39px,9.5vw,60px) !important; }
  .final-cta .btn { width:100%; max-width:390px; font-size:16px !important; padding:15px 18px !important; }
  .floating-jobs { left:12px !important; right:auto !important;
    bottom:max(12px,env(safe-area-inset-bottom)) !important;
    font-size:12px !important; padding:12px 13px !important;
    gap:7px !important; max-width:calc(100vw - 100px);
  }
  #gl-floating-chat { right:12px !important;
    bottom:max(12px,env(safe-area-inset-bottom)) !important;
  }
  #gl-floating-chat .gl-chat-toggle { width:56px !important; height:56px !important; }
  #gl-floating-chat .gl-chat-panel {
    width:calc(100vw - 24px) !important;
    height:min(520px,calc(100vh - 112px)) !important;
    max-height:calc(100vh - 112px) !important;
    bottom:70px !important;
  }
  .backtop { left:12px !important; bottom:78px !important;
    width:39px;height:39px; }
  .v13-dialog-header,.v13-dialog-footer { padding:12px 14px; }
  .v13-dialog-player { min-height:0; }
  input, textarea, select { font-size:16px; } /* iOS: evita zoom por focus. */
}

/* Teléfonos estrechos, incluido el ancho lógico de 320 px. */
@media (max-width: 540px) {

  html { scroll-padding-top:122px !important; }
  section[id] { scroll-margin-top:122px !important; }
}

@media (max-width: 360px) {
  .eyebrow { letter-spacing:1.5px !important; }
  #inicio.v12-hero { padding-inline:14px !important; }
  #inicio .v12-hero-panel { padding:19px !important; }
  #inicio .v12-hero-panel h1 { font-size:35px !important; }
  .section-title, .jobs h2, .legal-feature h2 { font-size:34px !important; }
  .v13-career-stage h3 { overflow-wrap:anywhere; }
  .floating-jobs { font-size:11px !important; padding-inline:10px !important; }
}

/* Safe-area y barras móviles: preferir unidades dinámicas, con fallback anterior. */
@supports (height: 100dvh) {

  @media (max-width: 640px) {
    #gl-floating-chat .gl-chat-panel {
      height:min(520px,calc(100dvh - 112px)) !important;
      max-height:calc(100dvh - 112px) !important;
    }
  }
}

/* Accesibilidad: sin movimiento obligatorio y sin vídeos decorativos. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal, .photo-reveal, .v13-stage-copy { opacity:1 !important; filter:none !important; transform:none !important; clip-path:none !important; }
  .v13-moving-player { display:none !important; }
}

/* No incrustar el reproductor en el fondo: errores de terceros no tapan el copy. */
.v13-video-zone iframe.v13-moving-player {display:none!important;}
#reconocimiento .v13-moving-background {
  background-color:#140722!important;
  background-image:linear-gradient(100deg,rgba(0,0,0,.89) 0%,rgba(7,2,16,.70) 54%,rgba(41,5,60,.57) 100%),
    url('/assets/img/vida-en-grupo/video-reconocimiento.jpg')!important;
  background-position:center!important;
  background-size:cover!important;
}
#reconocimiento .v13-recognition-video {
  display:flex!important;align-items:center!important;min-height:570px!important;
  padding:clamp(30px,5vw,76px)!important;
}
#reconocimiento .v13-recognition-video .media-copy {
  position:relative!important;inset:auto!important;
  left:auto!important;bottom:auto!important;top:auto!important;
  margin:0!important;padding:0!important;max-width:760px!important;width:100%!important;
  z-index:4!important;
}
#reconocimiento .v13-recognition-video .media-copy h3 {
  font-size:clamp(48px,6.8vw,96px)!important;
  line-height:.99!important;
  overflow:visible!important;
  margin:15px 0 25px!important;
}
#reconocimiento .v13-recognition-video .media-copy p {
  max-width:630px!important;font-size:clamp(16px,1.75vw,21px)!important;
  line-height:1.4!important;
}
/* Las etapas se revelan al entrar por primera vez, no se ocultan al retroceder. */
.v13-career-stage.has-animated .v13-stage-copy {opacity:1!important;transform:none!important;}

@supports (height:100dvh) {

}
@media (max-width:540px) {

  html {scroll-padding-top:78px!important;}
  section[id] {scroll-margin-top:78px!important;}
  #reconocimiento .v13-recognition-video {min-height:460px!important;padding:42px 22px!important;}
  #reconocimiento .v13-recognition-video .media-copy h3 {font-size:clamp(41px,10vw,62px)!important;}
  #reconocimiento .v13-recognition-video .media-copy p {font-size:16px!important;}
}
@media (max-width:360px) {

  #reconocimiento .v13-recognition-video .media-copy h3 {font-size:37px!important;}
}

/* Iconos vectoriales integrados y ampliación visible del área clicable. */
#lucky-social-footer .lucky-socials {
  display:grid!important;grid-template-columns:repeat(3,minmax(0,max-content));
  align-items:center;justify-content:start;gap:13px!important;
}
#lucky-social-footer .lucky-socials a.gl-social {
  display:inline-flex!important;align-items:center;justify-content:center;
  min-width:142px;min-height:57px;padding:13px 17px!important;
  gap:11px;border:1px solid rgba(255,255,255,.19)!important;
  background:#222!important;color:#fff!important;border-radius:16px!important;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
  white-space:nowrap;text-decoration:none!important;
}
#lucky-social-footer .lucky-socials a.gl-social svg {
  width:24px;height:24px;flex:none;display:block;overflow:visible;
}
#lucky-social-footer .lucky-socials a.gl-social:hover {
  background:#36303d!important;border-color:var(--pais-acento,#7f46f1)!important;
  transform:translateY(-2px);
}
#lucky-social-footer .lucky-socials a.gl-social:focus-visible{
  outline:3px solid #00eab0!important;outline-offset:3px!important;
}
#lucky-social-footer .lucky-socials .gl-social-name {font-size:14px;line-height:1.2;font-weight:750;}
#lucky-social-footer .lucky-footer-top {flex-wrap:nowrap;gap:clamp(22px,4vw,64px);}
#lucky-social-footer .lucky-footer-top > div {min-width:0;}
#lucky-social-footer .lucky-footer-top > div:first-child {flex:1 1 45%;}
#lucky-social-footer .lucky-footer-top > div:last-child {flex:0 1 auto;}

@media (max-width: 1540px) and (min-width:1200px) {

  #lucky-social-footer .lucky-socials a.gl-social {min-width:125px;padding-inline:13px!important;}
}
@media (max-width:1199px) {

  #lucky-social-footer .lucky-footer-top {flex-wrap:wrap;}
  #lucky-social-footer .lucky-footer-top > div {flex:1 1 100%;}
}
@media (max-width:700px) {
  #lucky-social-footer .lucky-socials {
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
    width:min(100%,420px);gap:13px!important;
    margin:4px auto 0!important;
    justify-content:center!important;
  }
  #lucky-social-footer .lucky-socials a.gl-social {
    width:100%;min-width:0!important;min-height:69px!important;
    padding:12px 7px!important;gap:0!important;border-radius:16px!important;
  }
  #lucky-social-footer .lucky-socials a.gl-social svg {width:30px;height:30px;}
  #lucky-social-footer .lucky-socials a.gl-social .gl-social-name {display:none!important;}
  #lucky-social-footer .lucky-footer-top {gap:34px!important;}
}

@media (prefers-reduced-motion:reduce) {
  #lucky-social-footer .lucky-socials a.gl-social{
    transition:none!important;transform:none!important;
  }
}

/* Ajustes finales: especificidad de los contenedores y del texto de los botones. */
#lucky-social-footer .lucky-socials a.gl-social .gl-social-name {
  display:inline!important;flex:0 0 auto!important;
  min-height:0!important;padding:0!important;
  background:transparent!important;border:0!important;
  font-size:14px!important;color:#fff!important;
}
@media(max-width:1199px) {
  #lucky-social-footer .lucky-footer-top > div:first-child,
  #lucky-social-footer .lucky-footer-top > div:last-child {
    flex:1 1 100%!important;width:100%!important;max-width:100%!important;
  }
}
@media(max-width:700px) {
  #lucky-social-footer .lucky-socials {width:min(100%,420px)!important;}
  #lucky-social-footer .lucky-socials a.gl-social .gl-social-name {display:none!important;}
}

@media(max-width:700px) {
 #lucky-social-footer .lucky-footer-meta {
   display:grid!important;grid-template-columns:minmax(0,1fr)!important;
   gap:10px!important;padding-bottom:85px!important;
 }
 #lucky-social-footer .lucky-footer-meta > * {min-width:0;overflow-wrap:anywhere;}
}
/* El pie principal debe ser un bloque, no dos columnas heredadas del antiguo footer. */
#lucky-social-footer {display:block!important;}
#lucky-social-footer .lucky-footer-top,
#lucky-social-footer .lucky-footer-meta {width:100%!important;max-width:100%!important;box-sizing:border-box;}