/* ============================================================================
   nav-publico.css — Navegación móvil LATERAL (drawer) + Pop-up de bienvenida.
   FUENTE ÚNICA de estos dos componentes para TODA la web pública
   (index · catalogo · producto · proposito · pedido). Editar aquí propaga a
   todas las pestañas — no duplicar estos estilos en cada HTML.

   Rebrand V3 "Mañana de Caribe": marfil = lienzo, verde = autoridad, coral =
   acento/CTA. Colores en hex propio (--ov-*) para no depender de las variables
   internas de cada página (que difieren: --pino vs --verde-pino, etc.).
   ========================================================================== */
:root{
  --ov-marfil:#F7F4EC; --ov-superficie:#FCFBF6; --ov-pino:#123F38; --ov-profundo:#0C2E29;
  --ov-tinta:#16201D; --ov-neutro:#5E6B67; --ov-linea:#E7ECE9; --ov-coral:#FF5A47;
  --ov-sol:#FFC53D; --ov-cielo:#BEE3F4; --ov-guayaba:#FFD9CE; --ov-pill:999px;
  --ov-f:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ov-fd:'Fraunces',Georgia,serif;
}

/* ---------- Botón hamburguesa (solo móvil) ----------
   Vive en .nav-top; por defecto oculto en escritorio (ahí manda la fila .nav-links). */
.ov-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  margin-left:-9px;padding:0;border:none;background:transparent;cursor:pointer;color:var(--ov-tinta);
  -webkit-tap-highlight-color:transparent}
.ov-burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}

@media(max-width:900px){
  .ov-burger{display:inline-flex}
  /* La fila de enlaces inline se reemplaza por el drawer (antes era scroll horizontal). */
  header .nav-links{display:none}
  /* Wordmark centrado tipo CLARK — pero por FLEX (dentro de su propia columna), no en
     absoluto: así nunca se encima con los iconos de la derecha. La marca ocupa el centro
     flexible entre la hamburguesa (izq) y los iconos (der). */
  header .nav-top .brand{flex:1 1 auto;justify-content:center;min-width:0;padding:0 6px}
  /* El icono de WhatsApp del header sobra en móvil (ya hay botón flotante): se oculta para
     dar aire y evitar que el grupo de iconos empuje contra el wordmark. */
  header .nav-icons a[aria-label="WhatsApp"]{display:none}
  /* Wordmark un punto más compacto en móvil para que respire junto a los iconos. */
  header .brand .word{font-size:1.15rem}
}

/* ---------- Drawer lateral ---------- */
.ov-scrim{position:fixed;inset:0;z-index:200;background:rgba(12,46,41,.5);
  opacity:0;visibility:hidden;transition:opacity .3s ease}
.ov-scrim.on{opacity:1;visibility:visible}
.ov-panel{position:fixed;top:0;left:0;bottom:0;width:min(86vw,360px);background:var(--ov-marfil);
  z-index:210;transform:translateX(-100%);transition:transform .34s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;box-shadow:0 0 60px -8px rgba(12,46,41,.45);overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.ov-panel.on{transform:none}
.ov-phead{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--ov-linea)}
.ov-phead .ov-brand{font-family:var(--ov-fd);font-size:1.25rem;color:var(--ov-pino);font-weight:600;line-height:1}
.ov-phead .ov-brand i{font-style:italic}
.ov-phead .ov-brand .dot{color:var(--ov-coral)}
.ov-x{border:none;background:transparent;cursor:pointer;width:40px;height:40px;
  color:var(--ov-tinta);display:flex;align-items:center;justify-content:center}
.ov-x svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.ov-links{display:flex;flex-direction:column;padding:6px 0;flex:1}
.ov-links a{padding:15px 24px;font-family:var(--ov-f);font-size:1.05rem;color:var(--ov-tinta);
  font-weight:400;border-bottom:1px solid rgba(231,236,233,.7);transition:background .2s,color .2s}
.ov-links a:active{background:var(--ov-superficie)}
.ov-links a.ov-hi{color:var(--ov-coral);font-weight:600}                 /* "Nueva Colección" destacada (patrón CLARK) */
.ov-links a[aria-current="page"]{color:var(--ov-pino);font-weight:600}
.ov-pfoot{padding:18px 22px 26px;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--ov-linea)}
.ov-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.88em 1.4em;border-radius:var(--ov-pill);font-family:var(--ov-f);font-weight:500;font-size:.95rem;
  border:none;cursor:pointer;line-height:1}
.ov-btn-coral{background:var(--ov-coral);color:#fff}
.ov-btn-wa{background:#25D366;color:#fff}
body.ov-lock{overflow:hidden}

/* ============================================================================
   BARRA INFERIOR MÓVIL (bottom tab bar) — solo ≤900px. Pone el recorrido de
   compra en la zona del pulgar, siempre visible: Catálogo · Asesor · Cotizar
   (destacado, con contador del carrito) · WhatsApp. Reemplaza al botón flotante
   de WhatsApp en móvil. Se construye en nav-publico.js (fuente única). ------- */
.ov-tabbar{display:none}
@media(max-width:900px){
  .ov-tabbar{
    display:grid; grid-template-columns:repeat(4,1fr);
    position:fixed; left:0; right:0; bottom:0;
    /* z-45: por encima del contenido, pero DEBAJO de los overlays de página
       (drawer del carrito z-70/71, lightbox z-90, modal z-50) y del drawer/pop-up
       del nav (z-200/300) — así nunca tapa el botón de pagar del carrito. */
    z-index:45;
    background:var(--ov-superficie); border-top:1px solid var(--ov-linea);
    box-shadow:0 -8px 26px -14px rgba(12,46,41,.30);
    padding-bottom:env(safe-area-inset-bottom,0px);   /* respeta el home indicator de iPhone */
  }
  /* La barra ya trae WhatsApp: el botón flotante sobra en móvil (evita solapamiento). */
  .wa-float{display:none!important}
  /* Deja aire para que la barra no tape el pie de página. */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
}
.ov-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 4px 7px;min-height:56px;position:relative;color:var(--ov-tinta);
  font-family:var(--ov-f);text-decoration:none;-webkit-tap-highlight-color:transparent}
.ov-tab svg{width:23px;height:23px;stroke:var(--ov-pino);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,transform .2s}
.ov-tab span{font-size:.64rem;font-weight:500;color:var(--ov-neutro);letter-spacing:.01em;
  line-height:1;transition:color .2s}
.ov-tab:active{background:var(--ov-marfil)}
.ov-tab:active svg{transform:scale(.9)}
/* Página actual: resalte pino */
.ov-tab[aria-current="page"] svg{stroke:var(--ov-pino)}
.ov-tab[aria-current="page"] span{color:var(--ov-pino);font-weight:600}
/* Cotizar = CTA estrella: coral siempre (y más marcado si es la página actual) */
.ov-tab-cta svg{stroke:var(--ov-coral)}
.ov-tab-cta span{color:var(--ov-coral);font-weight:600}
/* Contador del carrito sobre el icono de Cotizar (mismo dato que el header) */
.ov-tabcart{position:absolute;top:4px;left:calc(50% + 7px);background:var(--ov-coral);color:#fff;
  font-size:.58rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 0 0 2px var(--ov-superficie)}

/* ---------- Pop-up de bienvenida (captación estilo CLARK) ---------- */
.ov-pop-scrim{position:fixed;inset:0;z-index:300;background:rgba(12,46,41,.62);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;visibility:hidden;transition:opacity .35s ease}
.ov-pop-scrim.on{opacity:1;visibility:visible}
.ov-pop{position:relative;background:var(--ov-marfil);border-radius:18px;overflow:hidden;
  max-width:390px;width:100%;box-shadow:0 30px 80px -20px rgba(12,46,41,.55);
  transform:translateY(14px) scale(.98);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ov-pop-scrim.on .ov-pop{transform:none}
.ov-pop-x{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;
  border:none;background:rgba(12,46,41,.55);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.ov-pop-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
/* Banner = MISMO split de la portada actual (sahara-cover izq · juan-cover der),
   no un JPG combinado aparte: así el pop-up nunca se desincroniza del hero. */
.ov-pop-img{display:flex;height:196px}
.ov-pop-img span{flex:1;background-size:cover;background-position:center 20%}
.ov-pop-img span+span{border-left:2px solid var(--ov-marfil)}
.ov-pop-body{padding:22px 26px 26px;text-align:center}
.ov-pop-kick{font-family:var(--ov-f);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-size:.66rem;color:var(--ov-neutro)}
.ov-pop h3{font-family:var(--ov-fd);font-weight:600;font-size:1.5rem;color:var(--ov-pino);
  margin:.35em 0 .25em;line-height:1.15}
.ov-pop h3 b{font-weight:700;color:var(--ov-coral)}
.ov-pop p{font-family:var(--ov-f);font-weight:300;color:var(--ov-neutro);font-size:.92rem;margin-bottom:1.1em}
.ov-pop form{display:flex;flex-direction:column;gap:10px}
.ov-pop input{padding:.9em 1.2em;border-radius:var(--ov-pill);border:1.5px solid var(--ov-linea);
  background:var(--ov-superficie);font-family:var(--ov-f);font-size:.95rem;text-align:center;color:var(--ov-tinta)}
.ov-pop input:focus{outline:none;border-color:var(--ov-coral)}
.ov-pop .ov-btn-coral{width:100%}
.ov-pop .ov-fine{font-size:.72rem;color:var(--ov-neutro);margin:.9em 0 0}
.ov-code{font-family:var(--ov-fd);font-weight:700;font-size:1.7rem;letter-spacing:.1em;color:var(--ov-pino);
  background:var(--ov-cielo);border:1.5px dashed var(--ov-pino);border-radius:12px;padding:.45em .2em;margin:.3em 0 .7em}

/* ============================================================================
   ACCESIBILIDAD BASE — compartida por TODA la web pública (index · catalogo ·
   producto · proposito · pedido). Se vive aquí (no en cada HTML) para que el
   arreglo se propague a las 5 páginas con una sola edición. No toca la marca:
   solo suma foco de teclado, salto de contenido, respeto a "menos movimiento"
   y tamaño mínimo táctil. Auditoría UX jul-2026 (Prioridad 1 y 2). ---------- */

/* Foco de teclado VISIBLE (antes solo existía el outline del navegador, y en el
   pop-up se anulaba). Anillo coral de marca con halo marfil para que resalte
   sobre cualquier superficie (marfil, verde, cielo, tinta). Regla clave:
   :focus-visible → solo aparece al navegar con teclado, no al hacer clic con
   ratón, para no ensuciar la interacción táctil/con puntero. */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ov-coral);
  outline-offset:2px;
  /* Sin border-radius aquí: el outline sigue el radio propio del elemento
     (pastilla, tarjeta o input) — fijarlo aquí deformaría los botones pill. */
  box-shadow:0 0 0 5px rgba(247,244,236,.85);
}
/* No mostrar el anillo al enfocar por clic/tap (solo teclado). */
:where(a,button,input,textarea,select,summary,[tabindex]):focus:not(:focus-visible){outline:none}
/* El input del pop-up SÍ recupera foco visible de teclado (antes: outline:none seco). */
.ov-pop input:focus-visible{outline:3px solid var(--ov-coral);outline-offset:2px;border-color:var(--ov-coral)}

/* Salto al contenido — primer tabulador de cada página. Oculto hasta recibir
   foco de teclado; entonces baja como una pastilla verde sobre el marfil. */
.ov-skip{position:fixed;top:-60px;left:16px;z-index:400;
  background:var(--ov-pino);color:var(--ov-marfil);
  font-family:var(--ov-f);font-weight:600;font-size:.9rem;
  padding:.7em 1.2em;border-radius:var(--ov-pill);
  box-shadow:0 12px 30px -10px rgba(12,46,41,.5);
  transition:top .25s ease}
.ov-skip:focus{top:14px}

/* Tamaño mínimo táctil 44×44 (WCAG 2.5.5) en los iconos del header, que quedaban
   ~41 px. Centrado interno para que el icono no se descoloque. */
header .nav-icons a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* "Menos movimiento": desactiva el scroll suave global para quien lo pide. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
}