/* Roboto self-hosted */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto/roboto-v48-latin-regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto/roboto-v48-latin-700.woff2") format("woff2");
  font-display: swap;
}

/* ========= Design tokens ========= */
:root{
  --green-700:#155B42;
  --green-800:#0f4a35;
  --bg:#f4f8f6;
  --text:#123;
  --white:#fff;
  --radius:1rem;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --img-stroke: rgba(0,0,0,.18);

  /* Offset de anclas para header fijo */
  --header-offset-desktop: 88px;
  --header-offset-mobile: 105px;

  /* Ancho objetivo de cada botón de CTA en escritorio */
  --cta-btn-w: clamp(210px, 22vw, 240px);
}

/* ========= Base ========= */
*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: var(--header-offset-desktop);
}
@media (max-width: 900px){
  html{ scroll-padding-top: var(--header-offset-mobile); }
}
html, body{ overscroll-behavior-y: none; }
body{
  margin:0;
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--green-700);
  background:var(--bg);
  line-height:1.5;
}
img{ max-width:100%; display:block; }
.wrapper{ width:min(1200px,92%); margin-inline:auto; }

/* Bloquear scroll cuando el menú móvil está abierto */
.no-scroll{ overflow:hidden; }

/* Accesibilidad */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto;
  background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem; z-index:9999;
}


/* ========= Headings base (evita dependencia del UA stylesheet) ========= */
h1{
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 .5rem;
  font-weight: 700;
}
h2{
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  font-weight: 700;
}
h3{
  font-size: 1.25rem;
  line-height: 1.25;
  margin: .25rem 0;
  font-weight: 700;
}
:where(section, article, nav, aside) h1{
  font-size: clamp(2rem, 4vw, 3rem);
}

/* ========= Header / Nav ========= */

.site-header{
  position:sticky; top:0; z-index:3000;
  background:var(--white);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding-top: env(safe-area-inset-top);
}
@supports (padding: max(0px)) {
  .site-header{ padding-top: max(env(safe-area-inset-top), 0px); }
}
.site-header .wrapper{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 0;
}

/* Logo header con relación 1:1 garantizada */
.brand img{
  height:88px;
  width:88px;
  aspect-ratio:1 / 1;
}

/* Input toggle accesible (no display:none) */
.nav-toggle{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Botón hamburguesa usando solo el label */
.burger{
  display:none; position:relative; width:44px; height:44px; cursor:pointer;
}
.burger::before,
.burger::after,
.burger .line{
  content:""; position:absolute; left:10px; right:10px; height:3px; background:var(--green-700);
  border-radius:2px;
}
.burger .line{ top:50%; transform:translateY(-50%); }
.burger::before{ top:12px; }
.burger::after{ bottom:12px; }

/* NAV: reset para evitar viñetas en cualquier nivel */
.site-nav ul,
.site-nav li{
  list-style:none;
  margin:0;
  padding:0;
}

/* Solo el UL de primer nivel en fila (desktop) */
.site-nav > ul{
  display:flex; gap:.25rem; align-items:center;
}
.site-nav a{
  display:block; padding:.5rem .75rem; border-radius:.5rem;
  text-decoration:none; font-weight:700; color:var(--green-700);
}
.site-nav a:hover{ background:var(--green-700); color:#fff; }

.has-dropdown{ position:relative; }

/* Submenú (desktop: hover/focus) */
.dropdown{
  position:absolute; top:100%; left:0;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:.75rem;
  padding:.5rem;
  min-width:240px; box-shadow:var(--shadow);
  list-style:none; margin:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index:2000;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.dropdown a{ font-weight:600; color:var(--green-700); white-space:nowrap; }
.dropdown a:hover{ background:rgba(21,91,66,.08); color:var(--green-800); }
.site-nav ul.dropdown{
  display:flex; flex-direction:column; align-items:stretch; gap:.25rem;
}

/* ========= Responsive ========= */
@media (max-width: 900px){
  .site-header .wrapper{
    position:relative;
    justify-content:center;
    min-height:105px;
  }
  /* Logo header móvil, mantiene 1:1 */
  .brand img{
    height:97px;
    width:97px;
  }

  .burger{
    display:block;
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    z-index:3100;
  }
  .burger::before,
  .burger::after,
  .burger .line{
    left:12px; right:12px; height:3px;
  }

  .site-nav{
    position:fixed; inset:105px 0 auto 0; background:#fff;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
  }
  #nav-toggle:checked ~ .site-nav{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0);
  }

  .site-nav > ul{
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    padding:1rem;
  }
  .site-nav a{ border-radius:.6rem; }

  /* Submenú (móvil): cerrado por defecto; se abre con .open desde JS */
  .site-nav .has-dropdown > .dropdown{
    position:static;
    display:none;
    border:none; box-shadow:none;
    padding:.25rem 0 0 .75rem;
    min-width:auto;
    opacity:1; visibility:visible; pointer-events:auto;
    transform:none; transition:none;
  }
  .site-nav .has-dropdown.open > .dropdown{ display:block; }
}

/* ========= Hero ========= */

.hero{
  position: relative;
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  
}

/* Fondo movido a HTML con <picture class="bg"> */
.hero .bg{ position: absolute; inset: 0; z-index: -1; }
.hero .bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.hero .content{ position:relative; padding:3rem 0; }
.hero h1{ margin:0 0 .5rem; font-weight:700; font-size:clamp(2rem,4vw,3rem); color:#fff; }
.hero p{ margin:0 0 1.25rem; color:#e7fff3; }

/* ========= Buttons ========= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.2rem;
  border-radius:.8rem;
  font-weight:700;
  text-decoration:none;
  line-height:1;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  will-change: transform;
}
.btn-primary{ background:#fff; color:var(--green-700); }
.btn-primary:hover{ filter:brightness(.95); }
.btn-outline{ border:2px solid #fff; color:#fff; }
.btn-outline:hover{ background:#fff; color:var(--green-700); }
.btn-secondary{ background:var(--green-700); color:#fff; }
.btn-secondary:hover{ background:var(--green-800); }

/* Micro-animación para Ver categoría y Comprar */
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-buy:hover,
.btn-buy:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(21, 91, 66, .22);
}
.btn-secondary:active,
.btn-buy:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(21, 91, 66, .16);
}

/* Respeta preferencias de reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
  .btn-secondary:hover,
  .btn-secondary:focus-visible,
  .btn-secondary:active,
  .btn-buy:hover,
  .btn-buy:focus-visible,
  .btn-buy:active{
    transform:none; box-shadow:none;
  }
}

/* Botón comprar (WhatsApp) */
.btn-buy{
  background:#25D366;
  color:#fff;
}
.btn-buy:hover{ background:#1ebe57; }

/* Icono WhatsApp (SVG inline) */
.btn-buy::before{
  content:"";
  display:inline-block;
  width:1.15em;
  height:1.15em;
  margin-right:.5em;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="%23ffffff"><path d="M16 3c7.18 0 13 5.82 13 13s-5.82 13-13 13c-2.23 0-4.32-.58-6.13-1.6L3 29l1.66-6.02A12.9 12.9 0 0 1 3 16C3 8.82 8.82 3 16 3zm7.16 16.77c-.1-.16-.36-.26-.75-.46-.39-.2-2.3-1.13-2.66-1.25-.36-.13-.62-.2-.88.2-.26.39-1 1.25-1.23 1.5-.23.26-.46.29-.85.1-.39-.2-1.64-.6-3.13-1.92-1.16-1.04-1.94-2.33-2.17-2.72-.23-.39-.02-.6.17-.8.17-.17.39-.46.58-.69.2-.23.26-.39.39-.65.13-.26.07-.49-.03-.69-.1-.2-.88-2.13-1.22-2.91-.32-.76-.65-.66-.88-.66h-.75c-.26 0-.69.1-1.05.49-.36.39-1.38 1.35-1.38 3.29s1.41 3.82 1.61 4.09c.2.26 2.77 4.23 6.73 5.93.94.4 1.68.63 2.25.8.94.3 1.79.26 2.46.16.75-.11 2.3-.94 2.63-1.86.33-.92.33-1.71.23-1.87z"/></svg>');
}

/* ========= Sections / Cards ========= */
.section{ padding:3.5rem 0; }
.section h2{ text-align:center; font-size:clamp(1.5rem,2.5vw,2rem); margin:0 0 1rem; }
.section-lead{ text-align:center; margin:0 auto 2rem; max-width:720px; color:#355; }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column;
}

/* Media de las cards */
.card > picture,
.card > img{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:clamp(180px, 22vw, 240px);
  padding:clamp(8px, 1vw, 16px);
  overflow:hidden;
  background:#fff;
  box-sizing:border-box;
}
.card > picture > img,
.card > img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  filter:
    drop-shadow(0 0 0 var(--img-stroke))
    drop-shadow(0 0 1px var(--img-stroke));
}
@media (min-resolution: 2dppx){
  .card > picture > img,
  .card > img{
    filter:
      drop-shadow(0 0 0 var(--img-stroke))
      drop-shadow(0 0 .75px var(--img-stroke))
      drop-shadow(0 0 1px var(--img-stroke));
  }
}

.card-body{ padding:1rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card h3{ margin:.25rem 0; font-size:1.2rem; }
.card p{ margin:0; color:#335; }

/* CTA */
.card .cta{
  margin-top:auto;
  display:flex;
  gap:.6rem;
  justify-content:center;
  align-items:stretch;
  flex-wrap:nowrap;
}
.card .cta .btn{
  flex:1 1 0;
  min-width:0;
  min-height:56px;
  padding:.9rem 1.1rem;
  font-size:clamp(.85rem, 2.6vw, 1.05rem);
  white-space:nowrap;
  text-align:center;
}
@media (max-width: 360px){
  .card .cta .btn{
    font-size:clamp(.80rem, 3.2vw, .98rem);
  }
}

/* Escritorio */
@media (min-width: 901px){
  .card .cta{
    --cta-gap:.65rem;
    gap:var(--cta-gap);
  }
  .card .cta .btn{
    --cta-basis: min(var(--cta-btn-w), calc((100% - var(--cta-gap)) / 2));
    flex:0 0 var(--cta-basis);
    width:var(--cta-basis);
    max-width:var(--cta-basis);
    padding:.8rem 1rem;
    font-size:clamp(.9rem, 1vw, 1rem);
  }
  .btn-buy::before{ margin-right:.45rem; }
}

/* Nosotros + Salud para ti */
.nosotros{ background:linear-gradient(0deg, rgba(21,91,66,.03), rgba(21,91,66,.03)); }
.cards-mini{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.mini{
  display:inline-block; padding:.75rem 1rem; border-radius:.75rem; background:#fff;
  box-shadow:var(--shadow); text-decoration:none; color:var(--green-700); font-weight:700;
}

/* ========= Footer ========= */
.footer{ background:var(--green-800); color:#fff; }
.footer .wrapper{ padding:2rem 0; }
.footer .columns{
  display:grid; grid-template-columns:2fr 1fr; gap:1rem; align-items:flex-start;
}

/* Logo footer 1:1 garantizado */
.footer-logo{
  height:88px;
  width:88px;
  aspect-ratio:1 / 1;
  display:block;
  margin-inline:auto;
  margin-bottom:.75rem;
  filter: brightness(0) invert(1);
}
@media (max-width: 900px){
  .footer-logo{
    height:97px;
    width:97px;
  }
}

/* Centrar el bloque que contiene logo + copyright */
.footer .columns > :first-child{ text-align:center; }

.footer a{ color:#fff; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.small{ font-size:.9rem; opacity:.9; }

/* ========= Footer legal layout ========= */
.footer .legal { text-align: center; }
.footer .legal .rights{ display:inline; margin-left:.35ch; }
@media (max-width:900px){
  .footer .legal .rights{ display:block; margin-top:.25rem; margin-left:0; }
}
@media (min-width: 901px){
  .footer .legal .rights{ display:inline; }
  .footer .legal .rights::before{
    content: " | ";
    margin: 0 .1rem;
  }
}

/* ========= Panel desplegable ========= */
.product-panel{
  overflow:hidden;
  height:0;
  opacity:0;
  padding:0;
  pointer-events:none;
  border-top:1px solid rgba(0,0,0,.06);
  border-radius:0 0 var(--radius) var(--radius);
  transition: height .28s ease, opacity .28s ease, padding .28s ease;
  will-change: height, opacity;
  background:#fff;
  margin-top:.5rem;
}
.product-panel__inner{
  padding: .75rem .5rem .5rem;
}
.product-panel.is-open{
  opacity:1;
  pointer-events:auto;
  padding:.15rem 0 .35rem;
}

/* Overlay en desktop para panel */
@media (min-width: 901px){
  .card{
    position: relative;
    overflow: visible;
  }
  .product-panel{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .5rem);
    height: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    z-index: 50;
    margin-top: 0;
    will-change: height;
  }
  .product-panel__inner{
    padding: .9rem 1rem .8rem;
    max-height: 70vh;
    overflow: auto;
  }
}

/* Pinta diferida de secciones no críticas */
.nosotros,
#salud.section.wrapper{
  content-visibility: auto;
  contain-intrinsic-size: 700px;
}
@media (min-width:901px){
  .nosotros,
  #salud.section.wrapper{ contain-intrinsic-size: 800px; }
}

/* ===== Fix: grid en móvil ===== */
@media (max-width: 900px){
  .grid{
    grid-template-columns: 1fr;   /* 1 columna en móvil */
    gap: 1rem;                     /* opcional: separa un poco las cards */
  }
}

/* Alternativa si quieres texto blanco */
.btn-buy{ background:#008A1D; color:#fff; }
.btn-buy:hover,
.btn-buy:focus-visible{ background:#008A1D; color:#fff; } /* no aclarar */
.btn-buy::before{
  /* igual que arriba: usa currentColor o deja fill blanco si mantienes color:#fff */
}


/* ====== Accesibilidad “quirúrgica” ====== */
/* 1) Anillo de enfoque consistente (solo teclado) */
:root{ --focus-ring:#0F8E60; } /* verde marca, buen contraste sobre blanco y gris */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.burger:focus-visible,
.nav-toggle:focus-visible + .burger,
.footer-links a:focus-visible,
.mini:focus-visible,
.btn:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  text-decoration: none;
}

/* En fondos oscuros (hero / overlay), usa anillo claro */
.hero .btn:focus-visible,
.btn-outline:focus-visible{
  outline-color:#FFFFFF;
}

/* Corrige reglas previas que quitaban el outline en hover/focus */
.btn-secondary:focus-visible,
.btn-buy:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* 2) Tamaño mínimo de objetivos táctiles en móvil (48x48) */
@media (max-width:900px){
  .site-nav a{
    min-height:48px;
    display:flex; align-items:center;  /* no cambia la apariencia, solo asegura la altura */
  }
  .footer-links a{
    min-height:44px;                 /* suficiente para Lighthouse, sin “inflar” demasiado el footer */
    display:flex; align-items:center;
  }
  /* la hamburguesa ya es 48x48 en tu CSS; lo repetimos por si acaso en algún navegador raro */
  .burger{ width:48px; height:48px; }
}

/* (opcional pero útil) foco visible también al navegar con Tab en links del header */
.site-nav a:focus-visible{
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--focus-ring); /* halo doble legible sobre header blanco */
  outline: none; /* el halo ya hace de indicador */
}

/* ===== Fix: panel "Hábitos saludables" en escritorio ===== */
@media (min-width: 901px){
  /* el wrapper que rodea el panel */
  #habitos-wrap{ position: relative; }

  /* solo este panel debe comportarse en flujo normal, no absoluto */
  #habitos-wrap .product-panel{
    position: static !important;
    top: auto; left: auto; right: auto;
    margin-top: .5rem;                 /* mismo espacio que en móvil */
    box-shadow: var(--shadow);         /* luce igual que los demás */
    border: 1px solid rgba(0,0,0,.06);
    z-index: auto;
  }

  /* altura máxima opcional (como en desktop para otros paneles) */
  #habitos-wrap .product-panel__inner{
    max-height: 70vh;
    overflow: auto;
  }
}