/* ANDINA INRETAIL S.A.C. — maqueta visual fiel a V4.1
   El diseño visual es la exportación SVG original para preservar pixel por pixel.
   Enlaces, menú y campos de formulario son capas HTML superpuestas.
   No es un ecommerce, no hay carrito, precios ni pagos. */
:root { --andina:#c83e32; --ink:#19222a; --surface:#f6f4f1; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f2ef;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:1440px;margin:0 auto;background:white;box-shadow:0 20px 80px rgba(15,24,33,.07)}
.screen{position:relative;width:100%;overflow:visible;line-height:0}
.screen img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.screen--mobile{display:none}
.hit-area{position:absolute;inset:0;pointer-events:none;line-height:normal}
.hit{display:block;position:absolute;pointer-events:auto;background:transparent;border:0;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:rgba(200,62,50,.17)}
.hit:focus-visible{outline:3px solid #c83e32;outline-offset:2px;border-radius:5px}
.field{position:absolute;pointer-events:auto;margin:0;padding:0 15px;font-family:Inter,Arial,sans-serif;font-size:15px;background:transparent;color:transparent;border:1px solid transparent;border-radius:7px;outline:0;min-width:0;line-height:1.35}
.field:focus,.field:not(:placeholder-shown),.field:is(select){background:white;color:#172029;border-color:#c83e32}
.field:focus{box-shadow:0 0 0 2px rgba(200,62,50,.13)}
.field option{color:#172029}
.field-select{appearance:auto;opacity:0;cursor:pointer}
.field-select:focus,.field-select.has-value{opacity:1;background:white}
.field-area{padding:18px 15px;resize:none}
.checkbox-field{position:absolute;pointer-events:auto;opacity:0;margin:0;accent-color:#c83e32;cursor:pointer}
.checkbox-field:checked,.checkbox-field:focus-visible{opacity:1}
.submit-overlay{position:absolute;pointer-events:auto;background:transparent;border:0;border-radius:6px;cursor:pointer}
.submit-overlay:focus-visible{outline:3px solid white;outline-offset:-4px}
.accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Only shown after a person opens the mobile menu. Default screen remains untouched. */
.menu-shade{position:fixed;inset:0;background:rgba(6,15,24,.58);opacity:0;pointer-events:none;transition:opacity .22s;z-index:100}
.menu-shade.open{opacity:1;pointer-events:auto}
.side-menu{position:fixed;right:0;top:0;bottom:0;width:min(88vw,355px);background:#fff;z-index:101;padding:28px 26px;box-shadow:-24px 0 70px #0610182b;transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column;gap:10px}
.side-menu.open{transform:translateX(0)}
.menu-brand{display:flex;align-items:center;gap:14px;margin:12px 0 28px;font-weight:800;letter-spacing:.025em}
.menu-brand img{width:60px;height:60px}
.side-menu a{font-size:17px;text-decoration:none;color:#17212a;padding:16px 8px;border-bottom:1px solid #e8e8e8}
.side-menu a:hover,.side-menu a.active{color:#c83e32}
.side-menu a.cta{color:#fff;background:#c83e32;border-radius:7px;padding:18px 16px;margin-top:14px;text-align:center}
.menu-close{align-self:flex-end;border:0;background:#f2f2f2;color:#17212a;border-radius:99px;width:44px;height:44px;font-size:24px;cursor:pointer}
body.menu-open{overflow:hidden}
.notice{position:fixed;z-index:120;bottom:22px;left:50%;transform:translate(-50%,18px);background:#17212a;color:white;border-radius:9px;padding:14px 22px;box-shadow:0 18px 50px #0003;font-size:14px;line-height:1.4;max-width:min(90vw,640px);pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;text-align:center}
.notice.visible{opacity:1;transform:translate(-50%,0)}
.dialog-shade{position:fixed;inset:0;background:#0c1924af;display:none;align-items:center;justify-content:center;z-index:130;padding:22px}
.dialog-shade.open{display:flex}
.dialog{width:min(100%,530px);background:white;border-radius:14px;padding:30px 32px;box-shadow:0 25px 85px #0004;line-height:1.5}
.dialog h2{margin:0 0 12px;font-size:24px}
.dialog p{color:#4c5963}
.dialog button{border:0;border-radius:6px;background:#c83e32;color:white;padding:13px 21px;cursor:pointer;font-weight:700}
.dialog .ghost{background:#f1efed;color:#19222a;margin-left:10px}
@media(max-width:767px){body{background:#fff}main{max-width:390px;box-shadow:none}.screen--desktop{display:none}.screen--mobile{display:block}.field{font-size:14px;padding-left:17px}.field-area{padding-top:16px}}
@media(min-width:768px){.screen--desktop{display:block}.screen--mobile{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::after,*::before{transition:none!important}}

/* Hero cinematográfico — sustituye ÚNICAMENTE el fotograma de fondo del SVG.
   El texto, degradado, logo y botón permanecen idénticos a la maqueta V4.1. */
.screen .hero-video {position:absolute;left:0;width:100%;display:block;object-fit:cover;
  object-position:center center;z-index:0;pointer-events:none;background:#121c26}
.screen--desktop .hero-video {top:1.5217391304%;height:11.9565217391%;}
.screen--mobile .hero-video {top:1.4784394251%;height:14.0862422998%;}
.screen > img {position:relative;z-index:1;pointer-events:none}
.screen .hit-area {z-index:2}
@media(prefers-reduced-motion:reduce){.hero-video{visibility:visible}}


/* V4.1.2 — Ajuste responsive fiel al diseño aprobado.
   La maqueta de Figma es de 390px de referencia, pero un teléfono real
   puede medir 360, 393, 412, 430px o cualquier otro valor CSS.
   El SVG y sus áreas interactivas escalan juntos, sin bandas a los lados. */
@media screen and (max-width: 767px) {
  html, body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  body { background: #ffffff; }
  main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .screen--mobile {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .screen--desktop { display: none; }
  .screen--mobile > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .screen--mobile .hero-video {
    left: 0;
    width: 100%;
    /* El MP4 original es horizontal 16:9; 'cover' le recortaba
       los extremos al encajarlo en un Hero vertical. */
    object-fit: contain;
    object-position: center center;
    background-color: #101a24;
    background-image: url("assets/hero-poster-mobile.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .screen--mobile .hit-area { inset: 0; }
}

/* Fichas del catálogo ahora se renderizan con HTML semántico en producto.css. */