/* ============================================================
   Los Maitenes SpA — capa de mejoras
   Se carga DESPUES de estilo.css y solo sobrescribe lo necesario.
   1. Encabezado y navegacion (escritorio + movil)
   2. Hero: encuadre del fondo y datos
   3. Ajustes responsive generales
   ============================================================ */

:root{
  --mj-lima:#a3e635;
  --mj-lima-osc:#84cc16;
  --mj-tinta:#0d1117;
  --mj-vidrio:rgba(10,13,17,.72);
  --mj-linea:rgba(255,255,255,.12);
  --mj-radio:14px;
  --mj-cab-h:68px;
  --mj-ease:cubic-bezier(.22,1,.36,1);
}

@media (min-width:900px){
  :root{ --mj-cab-h:76px; }
}

/* ============================================================
   1. ENCABEZADO
   ============================================================ */

.cabecera{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s var(--mj-ease),
             border-color .35s var(--mj-ease),
             backdrop-filter .35s var(--mj-ease),
             box-shadow .35s var(--mj-ease);
}

/* estado "pegado": aparece el vidrio al bajar */
.cabecera.mj-fija{
  background:var(--mj-vidrio);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--mj-linea);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}

.cabecera > .contenedor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:var(--mj-cab-h);
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}

/* --- marca --- */
.cabecera .marca{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:0 0 auto;
  transition:opacity .25s var(--mj-ease);
}
.cabecera .marca:hover{ opacity:.85; }
.cabecera .marca img{
  width:34px; height:34px;
  flex:0 0 auto;
}
.cabecera .marca b{
  display:block;
  font-size:clamp(13px,1.4vw,15px);
  letter-spacing:.06em;
  line-height:1.1;
  color:#fff;
}
.cabecera .marca > span > span{
  display:block;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mj-lima);
  line-height:1.3;
  margin-top:2px;
}

/* ============================================================
   1a. NAV ESCRITORIO
   ============================================================ */

@media (min-width:900px){

  .cabecera .hamburguesa{ display:none !important; }

  /* el pie del cajon es exclusivo de movil */
  .cabecera .mj-menu-pie{ display:none !important; }

  .cabecera .menu{
    position:static;
    display:flex !important;
    flex-direction:row;
    align-items:center;
    flex:0 0 auto;
    gap:6px;
    width:auto;
    height:auto;
    padding:0;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto;
  }

  .cabecera .menu > ul{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    gap:4px;
    margin:0;
    padding:0;
    list-style:none;
  }

  .cabecera .menu > ul > li{ margin:0; flex:0 0 auto; }

  .cabecera .menu > ul > li > a{
    position:relative;
    display:block;
    white-space:nowrap;
    padding:9px 14px;
    font-size:14.5px;
    font-weight:500;
    line-height:1;
    color:rgba(255,255,255,.82);
    text-decoration:none;
    border-radius:999px;
    transition:color .25s var(--mj-ease), background-color .25s var(--mj-ease);
  }

  /* subrayado que crece desde el centro */
  .cabecera .menu > ul > li > a::after{
    content:"";
    position:absolute;
    left:14px; right:14px;
    bottom:2px;
    height:2px;
    border-radius:2px;
    background:var(--mj-lima);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .3s var(--mj-ease);
  }

  .cabecera .menu > ul > li > a:hover,
  .cabecera .menu > ul > li > a:focus-visible{
    color:#fff;
    background:rgba(255,255,255,.06);
  }
  .cabecera .menu > ul > li > a:hover::after,
  .cabecera .menu > ul > li > a:focus-visible::after{
    transform:scaleX(1);
  }

  /* seccion activa (scrollspy en mejoras.js) */
  .cabecera .menu > ul > li > a.mj-activo{
    color:#fff;
  }
  .cabecera .menu > ul > li > a.mj-activo::after{
    transform:scaleX(1);
    background:var(--mj-lima);
  }

  /* CTA */
  .cabecera .menu > .btn{
    margin-left:12px;
    padding:11px 20px;
    font-size:14px;
    font-weight:650;
    border-radius:999px;
    background:var(--mj-lima);
    color:#0b0f14;
    box-shadow:0 2px 0 rgba(0,0,0,.25);
    transition:transform .25s var(--mj-ease),
               box-shadow .25s var(--mj-ease),
               background-color .25s var(--mj-ease);
  }
  .cabecera .menu > .btn:hover{
    background:var(--mj-lima-osc);
    transform:translateY(-2px);
    box-shadow:0 10px 24px -6px rgba(163,230,53,.5);
  }
  .cabecera .menu > .btn:active{ transform:translateY(0); }
}

/* ============================================================
   1b. HAMBURGUESA (movil)
   ============================================================ */

.cabecera .hamburguesa{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:46px; height:46px;
  padding:0;
  border:1px solid var(--mj-linea);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  z-index:320;
  transition:background-color .25s var(--mj-ease), border-color .25s var(--mj-ease);
}
.cabecera .hamburguesa:hover{ background:rgba(255,255,255,.1); }

/* tres lineas construidas sobre el <i> existente */
.cabecera .hamburguesa i,
.cabecera .hamburguesa i::before,
.cabecera .hamburguesa i::after{
  content:"";
  position:absolute;
  left:50%;
  width:20px; height:2px;
  margin-left:-10px;
  border-radius:2px;
  background:#fff;
  transition:transform .35s var(--mj-ease), opacity .2s linear, top .35s var(--mj-ease);
}
.cabecera .hamburguesa i{ top:50%; margin-top:-1px; }
.cabecera .hamburguesa i::before{ top:-6px; margin-left:0; left:0; }
.cabecera .hamburguesa i::after{ top:6px; margin-left:0; left:0; }

/* estado abierto: se convierte en X */
.cabecera .hamburguesa[aria-expanded="true"] i{ background:transparent; }
.cabecera .hamburguesa[aria-expanded="true"] i::before{
  top:0; transform:rotate(45deg);
}
.cabecera .hamburguesa[aria-expanded="true"] i::after{
  top:0; transform:rotate(-45deg);
}

/* ============================================================
   1c. CAJON MOVIL
   ============================================================ */

@media (max-width:899.98px){

  /* la marca queda por encima del cajon para no perder el logo */
  .cabecera .marca{
    position:relative;
    z-index:320;
  }

  .cabecera .menu{
    position:fixed;
    inset:0;
    z-index:300;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    width:100%;
    height:100dvh;
    padding:calc(var(--mj-cab-h) + 28px) 24px calc(32px + env(safe-area-inset-bottom));
    background:linear-gradient(160deg,#0b0f14 0%,#111820 60%,#0b0f14 100%);
    box-sizing:border-box;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    pointer-events:none;
    transition:opacity .3s var(--mj-ease),
               transform .35s var(--mj-ease),
               visibility 0s linear .35s;
  }

  .cabecera .menu.mj-abierto{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
    transition:opacity .3s var(--mj-ease),
               transform .35s var(--mj-ease),
               visibility 0s linear 0s;
  }

  /* resplandor decorativo */
  .cabecera .menu::before{
    content:"";
    position:absolute;
    top:-120px; right:-90px;
    width:320px; height:320px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(163,230,53,.16), transparent 68%);
    pointer-events:none;
  }

  .cabecera .menu > ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    position:relative;
  }

  .cabecera .menu > ul > li{
    border-bottom:1px solid rgba(255,255,255,.07);
    opacity:0;
    transform:translateY(14px);
  }

  .cabecera .menu.mj-abierto > ul > li{
    animation:mjEntra .45s var(--mj-ease) forwards;
  }
  .cabecera .menu.mj-abierto > ul > li:nth-child(1){ animation-delay:.06s; }
  .cabecera .menu.mj-abierto > ul > li:nth-child(2){ animation-delay:.11s; }
  .cabecera .menu.mj-abierto > ul > li:nth-child(3){ animation-delay:.16s; }
  .cabecera .menu.mj-abierto > ul > li:nth-child(4){ animation-delay:.21s; }
  .cabecera .menu.mj-abierto > ul > li:nth-child(5){ animation-delay:.26s; }

  @keyframes mjEntra{
    to{ opacity:1; transform:translateY(0); }
  }

  .cabecera .menu > ul > li > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 4px;
    font-size:clamp(21px,6vw,26px);
    font-weight:600;
    letter-spacing:-.01em;
    line-height:1.15;
    color:#fff;
    text-decoration:none;
    transition:color .2s var(--mj-ease), padding-left .25s var(--mj-ease);
  }

  /* flechita a la derecha */
  .cabecera .menu > ul > li > a::after{
    content:"";
    width:8px; height:8px;
    border-right:2px solid var(--mj-lima);
    border-top:2px solid var(--mj-lima);
    transform:rotate(45deg);
    opacity:.55;
    transition:opacity .2s var(--mj-ease), transform .25s var(--mj-ease);
  }
  .cabecera .menu > ul > li > a:active{
    color:var(--mj-lima);
    padding-left:10px;
  }
  .cabecera .menu > ul > li > a:active::after{
    opacity:1;
    transform:rotate(45deg) translate(2px,-2px);
  }

  .cabecera .menu > ul > li > a.mj-activo{ color:var(--mj-lima); }

  .cabecera .menu > .btn{
    margin-top:28px;
    width:100%;
    padding:17px 20px;
    font-size:16px;
    font-weight:650;
    text-align:center;
    border-radius:14px;
    background:var(--mj-lima);
    color:#0b0f14;
    opacity:0;
    transform:translateY(14px);
  }
  .cabecera .menu.mj-abierto > .btn{
    animation:mjEntra .45s var(--mj-ease) .32s forwards;
  }

  /* pie del cajon inyectado por mejoras.js */
  .mj-menu-pie{
    margin-top:auto;
    padding-top:28px;
    display:flex;
    flex-direction:column;
    gap:10px;
    opacity:0;
    transform:translateY(14px);
  }
  .cabecera .menu.mj-abierto .mj-menu-pie{
    animation:mjEntra .45s var(--mj-ease) .38s forwards;
  }
  .mj-menu-pie a{
    color:rgba(255,255,255,.75);
    text-decoration:none;
    font-size:15px;
    display:flex;
    align-items:center;
    gap:9px;
  }
  .mj-menu-pie a:active{ color:var(--mj-lima); }
  .mj-menu-pie span{
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
  }

  /* bloquear scroll del fondo */
  html.mj-sin-scroll,
  body.mj-sin-scroll{
    overflow:hidden;
    touch-action:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .cabecera .menu.mj-abierto > ul > li,
  .cabecera .menu.mj-abierto > .btn,
  .cabecera .menu.mj-abierto .mj-menu-pie{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .cabecera, .cabecera .menu, .cabecera .hamburguesa i,
  .cabecera .hamburguesa i::before, .cabecera .hamburguesa i::after{
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   2. HERO — encuadre del fondo
   El sujeto (la garra) esta al 72% horizontal de la imagen.
   En pantallas angostas el recorte "cover" se lleva casi todo
   el ancho, por eso hay que anclar el foco ahi y no al 50%.
   ============================================================ */

.hero-foto,
.hero-lienzo{
  object-fit:cover;
}

/* movil / tablet vertical */
@media (max-width:699.98px){
  .hero-foto{ object-position:72% 52% !important; }
}
@media (min-width:700px) and (max-width:1099.98px){
  .hero-foto{ object-position:64% 55% !important; }
}
@media (min-width:1100px){
  .hero-foto{ object-position:50% 58% !important; }
}

/* velo: mas denso abajo e izquierda en movil para que el texto lea */
@media (max-width:899.98px){
  .hero-velo{
    background:
      linear-gradient(180deg,
        rgba(8,11,15,.80) 0%,
        rgba(8,11,15,.35) 26%,
        rgba(8,11,15,.55) 62%,
        rgba(8,11,15,.92) 100%),
      linear-gradient(90deg,
        rgba(8,11,15,.72) 0%,
        rgba(8,11,15,.22) 55%,
        rgba(8,11,15,0) 100%) !important;
  }
}

/* copy del hero: mas aire y tipografia fluida */
.hero-copy{
  max-width:min(100%, 62ch);
}
@media (max-width:699.98px){
  .hero-copy h1{
    font-size:clamp(30px,8.6vw,40px) !important;
    line-height:1.06 !important;
    letter-spacing:-.02em;
  }
  .hero-copy p{
    font-size:clamp(14.5px,4vw,16.5px) !important;
    line-height:1.55 !important;
  }
}

/* botones del hero a ancho completo solo en pantallas muy angostas */
@media (max-width:400px){
  .hero-copy .btn{
    width:100%;
    justify-content:center;
  }
}

/* --- datos del hero --- */
.hero-datos{
  gap:0;
}

/* En telefonos se oculta la barra de datos (45 t / horario / RM):
   la informacion ya aparece mas abajo en el sitio y aqui solo
   competia con el titular y los botones. En tablet y escritorio
   se mantiene. */
@media (max-width:699.98px){
  .hero-datos{ display:none !important; }
}
/* En movil se apilan en filas: valor a la izquierda, etiqueta a la
   derecha. Ocupa poco alto y se lee mucho mejor que 3 columnas
   de 110px con las etiquetas partidas en dos lineas. */
@media (max-width:520px){
  .hero-datos{
    grid-template-columns:1fr !important;
  }
  .hero-datos > *{
    display:flex !important;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    padding:11px 14px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .hero-datos > *:last-child{
    border-bottom:0;
  }
  .hero-datos b,
  .hero-datos strong{
    font-size:18px !important;
    line-height:1.2 !important;
    white-space:nowrap;
  }
  /* solo la etiqueta directa de cada celda, nunca el contador
     que vive dentro del <b> (ej. <b><span data-counter>45</span> t</b>) */
  .hero-datos > * > span,
  .hero-datos > * > small{
    font-size:10px !important;
    letter-spacing:.12em !important;
    line-height:1.3 !important;
    text-align:right;
    color:rgba(255,255,255,.6);
  }

  .hero-datos b *,
  .hero-datos strong *{
    font-size:inherit !important;
    letter-spacing:inherit !important;
    color:inherit !important;
  }
}

/* ============================================================
   3. AJUSTES RESPONSIVE GENERALES
   ============================================================ */

html{ -webkit-text-size-adjust:100%; }

/* Nota: NO poner overflow-x en <body>. Lo convierte en contenedor de
   scroll, cambia el bloque contenedor y rompe el position:sticky del
   hero. Ya se verifico que no hay desborde horizontal. */

img, svg, video, canvas, iframe{
  max-width:100%;
}

/* nada de desbordes horizontales por palabras largas */
h1,h2,h3,h4,p,li,a,td,th{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* el ancla del header fijo no debe tapar los titulos de seccion */
section[id]{
  scroll-margin-top:calc(var(--mj-cab-h) + 12px);
}

/* areas tactiles minimas comodas */
@media (pointer:coarse){
  .menu a,
  .pie a,
  .btn{
    min-height:44px;
  }
}

/* boton flotante de WhatsApp: respetar zona segura del iPhone */
.wsp{
  bottom:max(18px, env(safe-area-inset-bottom)) !important;
  right:max(18px, env(safe-area-inset-right)) !important;
}

/* focus visible coherente en todo el sitio */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--mj-lima);
  outline-offset:3px;
  border-radius:6px;
}