/* phn2026.css — Sitio oficial Proher Natura (remasterización 2026-10)
   Mismo carácter que el sitio anterior: encabezado blanco con la hoja, verde de marca,
   títulos Montserrat, hero con video. Un solo archivo, sin framework.
   Regla de marca: el verde (#80BA26) es superficie (botones, filetes, sellos), nunca color de texto. */

:root {
  --verde: #80ba26;
  --verde-claro: #bad684;
  --verde-suave: #eef5df;
  --tinta: #1a1a1a;
  --tinta-suave: #575757;
  --papel: #fbfaf6;
  --papel-suave: #f4f4f2;
  --tarjeta: #fffdf9;
  --pie: #2b2b2b;
  --linea: rgb(0 0 0 / 12%);
  --whatsapp: #25d366;
  --radio: 12px;
  --radio-sm: 8px;
  --sombra: 0 1px 2px rgb(0 0 0 / 4%), 0 12px 32px -16px rgb(0 0 0 / 22%);
  --ancho: 72rem;
  --canal: clamp(1.25rem, 5vw, 2.5rem);
  --seccion: clamp(3.25rem, 7vw, 5.5rem);
  --alto-cabecera: 72px;
  --f-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-cuerpo: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 12px); }
body {
  margin: 0; overflow-x: clip; background: var(--papel); color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--f-cuerpo);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-titulo); line-height: 1.15; margin: 0 0 .6em; }
h1 { font-weight: 800; font-size: clamp(2.2rem, 6vw, 3.9rem); letter-spacing: -.01em; }
h2 { font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-weight: 700; font-size: 1.2rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: .6rem 1rem; z-index: 200; }
.salto:focus { left: 0; }

.contenedor { width: min(100% - 2 * var(--canal), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }
.seccion--suave { background: var(--papel-suave); }
.seccion--oscura { background: var(--pie); color: #fff; }
.seccion__cabeza { max-width: 44rem; margin-bottom: 2.25rem; }
.seccion__cabeza--centro { margin-inline: auto; text-align: center; }
.sobretitulo {
  display: inline-block; font: 700 .8125rem var(--f-titulo); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta); padding-bottom: .35rem; border-bottom: 3px solid var(--verde); margin-bottom: 1rem;
}
.lead { font-size: 1.1875rem; color: var(--tinta-suave); }
.seccion--oscura .lead { color: #c7c7c2; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  font: 700 .9375rem var(--f-titulo); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: transform 200ms cubic-bezier(.4,0,.2,1), background 200ms, color 200ms, border-color 200ms;
}
.btn:hover { transform: translateY(-2px); }
.btn--verde { background: var(--verde); color: var(--tinta); }
.btn--verde:hover { background: var(--tinta); color: #fff; }
.btn--tinta { background: var(--tinta); color: #fff; }
.btn--tinta:hover { background: var(--verde); color: var(--tinta); }
.btn--borde { border-color: currentColor; background: transparent; }
.btn--borde:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.btn--sm { min-height: 40px; padding: .45rem 1.1rem; font-size: .8125rem; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--linea);
  /* sin backdrop-filter: crearía un bloque contenedor y rompería el menú móvil (position: fixed) */
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; min-height: var(--alto-cabecera); gap: 1rem; }
.marca img { width: 156px; height: auto; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav__enlace, .nav__boton {
  font: 600 .8125rem var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--tinta); padding: .75rem .8rem; border: 0; background: none; cursor: pointer; border-radius: var(--radio-sm);
  display: inline-flex; align-items: center; gap: .35rem;
}
.nav__enlace:hover, .nav__boton:hover, .nav__enlace[aria-current="page"] { background: var(--verde-suave); }
.nav__enlace[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--verde); border-radius: var(--radio-sm) var(--radio-sm) 0 0; }
.nav__grupo { position: relative; }
.nav__menu {
  position: absolute; top: 100%; left: 0; min-width: 15rem; background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: .4rem; display: none; z-index: 5;
}
.nav__grupo:hover .nav__menu, .nav__grupo:focus-within .nav__menu, .nav__grupo.abierto .nav__menu { display: block; }
.nav__menu a { display: block; padding: .6rem .8rem; border-radius: var(--radio-sm); text-decoration: none; font-size: .9375rem; }
.nav__menu a:hover { background: var(--verde-suave); }
.nav__acciones { display: flex; align-items: center; gap: .5rem; margin-left: .5rem; }
.burger { display: none; width: 48px; height: 48px; border: 1px solid var(--linea); border-radius: var(--radio-sm); background: #fff; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--tinta); margin: 5px auto; transition: transform 200ms; }

@media (max-width: 1080px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--alto-cabecera) 0 0 0; background: var(--papel); flex-direction: column; align-items: stretch;
    padding: 1rem var(--canal) 2rem; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 250ms cubic-bezier(.4,0,.2,1), visibility 250ms; gap: 0;
  }
  .nav.abierto { transform: none; visibility: visible; }
  .nav__enlace, .nav__boton { font-size: 1rem; padding: 1rem .5rem; border-bottom: 1px solid var(--linea); border-radius: 0; width: 100%; justify-content: space-between; }
  .nav__menu { position: static; display: block; box-shadow: none; border: 0; background: transparent; padding: 0 0 .5rem 1rem; }
  .nav__acciones { margin: 1rem 0 0; flex-direction: column; align-items: stretch; }
  .nav__acciones .btn { width: 100%; }
}

/* Hero */
.hero { position: relative; min-height: min(86vh, 46rem); display: grid; align-items: center; color: #fff; overflow: hidden; isolation: isolate; background: #1c2b0f; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(10 20 4 / 55%), rgb(10 20 4 / 62%)); }
.hero__cuerpo { padding-block: 4rem; max-width: 46rem; }
.hero .sobretitulo { color: #fff; }
.hero p.lead { color: #eef2e6; max-width: 36rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.aviso-cofepris {
  display: inline-flex; gap: .6rem; align-items: center; margin-top: 2rem; font: 500 .8125rem var(--f-titulo);
  background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 28%); padding: .5rem .9rem; border-radius: 999px; backdrop-filter: blur(6px);
}
.aviso-cofepris strong { letter-spacing: .03em; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } .hero { background: url('/img/2026/hero-poster.jpg') center/cover; } html { scroll-behavior: auto; } .btn { transition: none; } }

/* Buscador de centro (home y localizador) */
.buscador { background: var(--tarjeta); color: var(--tinta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem; max-width: 40rem; }
.hero .buscador { margin-top: 2rem; }
.buscador__titulo { font: 800 1rem var(--f-titulo); margin-bottom: .75rem; }
.buscador__fila { display: flex; flex-wrap: wrap; gap: .6rem; }
.campo { flex: 1 1 14rem; min-height: 48px; padding: .6rem 1rem; border: 2px solid var(--linea); border-radius: var(--radio-sm); font: inherit; background: #fff; color: var(--tinta); }
.campo:focus { border-color: var(--tinta); outline: none; }
.buscador__ayuda { font-size: .875rem; color: var(--tinta-suave); margin: .75rem 0 0; }

/* Tarjetas y rejillas */
.rejilla { display: grid; gap: 1.5rem; }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; }
.tarjeta__img { aspect-ratio: 1; background: radial-gradient(circle at 50% 55%, var(--verde-suave), #fff 70%); display: grid; place-items: center; padding: 1rem; }
.tarjeta__img img { max-height: 100%; width: auto; object-fit: contain; }
.tarjeta__cuerpo { padding: 1.1rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.tarjeta__cat { font: 700 .75rem var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.tarjeta__precio { font: 800 1.15rem var(--f-titulo); margin-top: auto; padding-top: .5rem; }
.tarjeta__aviso { font-size: .8125rem; color: var(--tinta-suave); border-left: 3px solid var(--verde); padding-left: .6rem; margin-top: .4rem; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; text-align: center; }
.cifra strong { display: block; font: 800 clamp(1.9rem, 4vw, 2.7rem) var(--f-titulo); }
.cifra span { color: var(--tinta-suave); font-size: .9375rem; }
.cifras--franja { background: var(--verde); padding: 1.75rem 0; }
.cifras--franja .cifra span { color: var(--tinta); }

.dividida { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) { .dividida { grid-template-columns: 1.1fr 1fr; } .dividida--inversa > :first-child { order: 2; } }
.dividida img { border-radius: var(--radio); box-shadow: var(--sombra); }
.lista-check { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .7rem; }
.lista-check li { padding-left: 2rem; position: relative; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat; }

.paises { display: flex; flex-wrap: wrap; gap: .6rem; }
.pais { padding: .6rem 1.1rem; background: #fff; color: var(--tinta); border-radius: 999px; font: 700 .8125rem var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.pais:hover { background: var(--verde); }
.mundo { position: relative; color: #fff; isolation: isolate; text-align: center; }
.mundo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mundo::after { content: ""; position: absolute; inset: 0; background: rgb(12 22 6 / 62%); z-index: -1; }
.mundo .paises { justify-content: center; }
.mundo .seccion__cabeza { margin-inline: auto; }

/* Página interior */
.portada { background: var(--verde-suave); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--linea); }
.portada h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .4rem; }
.migas { font-size: .875rem; color: var(--tinta-suave); margin-bottom: 1rem; }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.leyenda { font-size: .875rem; color: var(--tinta-suave); border-left: 4px solid var(--verde); padding: .25rem 0 .25rem 1rem; max-width: 52rem; }

/* Resultados del localizador */
.resultado { display: grid; gap: .5rem 1.5rem; grid-template-columns: 1fr; padding: 1.25rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
@media (min-width: 720px) { .resultado { grid-template-columns: 1fr auto; align-items: center; } }
.resultado__dist { display: inline-block; font: 800 .8125rem var(--f-titulo); background: var(--verde); padding: .15rem .65rem; border-radius: 999px; margin-bottom: .35rem; }
.resultado h3 { margin: 0; }
.resultado p { margin: 0; color: var(--tinta-suave); }
.resultado__acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.pila { display: grid; gap: 1rem; }
.estado-msg { padding: 1rem 1.25rem; border-radius: var(--radio); background: var(--verde-suave); border: 1px solid var(--linea); }
.estado-msg--error { background: #fdf0ee; }
.btn-wa { background: var(--whatsapp); color: var(--tinta); }
.btn-wa:hover { background: var(--tinta); color: #fff; }

/* Formularios */
.form { display: grid; gap: 1rem; }
.form label { font: 700 .875rem var(--f-titulo); display: grid; gap: .35rem; }
.form textarea.campo { min-height: 9rem; resize: vertical; }
.form__nota { font-size: .875rem; color: var(--tinta-suave); }
.honey { position: absolute; left: -9999px; }

/* Texto legal */
.legal { max-width: 52rem; }
.legal h2 { font-size: 1.35rem; margin-top: 2rem; }
.legal p, .legal li { color: #333; }

/* Pie */
.pie { background: var(--pie); color: #e9e9e4; padding: 3.5rem 0 1.5rem; font-size: .9375rem; }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pie h4 { font: 700 .8125rem var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; color: #fff; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pie__marca img { width: 170px; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.pie__legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 16%); font-size: .8125rem; color: #c7c7c2; display: grid; gap: .4rem; }
.redes { display: flex; gap: .6rem; margin-top: 1rem; }
.redes a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 30%); display: grid; place-items: center; }
.redes a:hover { background: var(--verde); border-color: var(--verde); color: var(--tinta); }
.redes svg { width: 20px; height: 20px; }

.wa-flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: var(--whatsapp);
  display: grid; place-items: center; box-shadow: 0 8px 24px -6px rgb(0 0 0 / 40%); color: #fff;
}
.wa-flotante svg { width: 30px; height: 30px; }

/* Video bajo demanda (sin cargar YouTube hasta el clic) */
.video { position: relative; aspect-ratio: 16/9; border-radius: var(--radio); overflow: hidden; background: #000; box-shadow: var(--sombra); }
.video button { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: center/cover no-repeat; }
.video button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a1a1a'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") 55% 50%/46% no-repeat; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__tit { font: 700 .9375rem var(--f-titulo); margin: .6rem 0 0; }

.evento { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; align-items: center; padding: 1.1rem 1.25rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.evento__fecha { text-align: center; background: var(--verde); border-radius: var(--radio-sm); padding: .6rem .3rem; font-family: var(--f-titulo); }
.evento__fecha b { display: block; font-size: 1.6rem; line-height: 1; }
.evento__fecha span { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.evento h3 { margin: 0 0 .15rem; }
.evento p { margin: 0; color: var(--tinta-suave); }

@media print { .cabecera, .wa-flotante, .pie, .hero__video { display: none; } }

/* Listado de distribuidores: restila el HTML que entrega beans/DistribuidoresBean.php */
.dist-lista .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; margin: 0; }
.dist-lista .row::before, .dist-lista .row::after, .dist-lista .clear { display: none; }
.dist-lista [class*="col-"] { width: auto; float: none; padding: 0; }
.dist-lista .promo-banner-box {
  display: flex; min-height: 100%; border-radius: var(--radio); overflow: hidden; background-size: cover; background-position: center;
  background-color: var(--pie); box-shadow: var(--sombra); color: #fff;
}
.dist-lista .promo-text { display: flex; flex-direction: column; gap: .25rem; padding: 1.4rem; width: 100%; background: linear-gradient(180deg, rgb(0 0 0 / 28%), rgb(0 0 0 / 62%)); }
.dist-lista .title { display: block; font: 700 1rem var(--f-titulo); line-height: 1.3; color: #fff; word-break: break-word; }
.dist-lista .title[style*="smaller"] { font: 400 .875rem var(--f-cuerpo); }
.dist-lista .promo-text > span:has(a) { display: inline-block; margin: .6rem .4rem 0 0; }
.dist-lista a.button {
  display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1.1rem; border-radius: 999px;
  background: var(--verde); color: var(--tinta); font: 700 .8125rem var(--f-titulo); text-decoration: none;
}
.dist-lista a.button:hover { background: #fff; }

.nav__enlace, .nav__boton, .nav__acciones .btn { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 1081px) { .nav__enlace, .nav__boton { padding-inline: .5rem; letter-spacing: .03em; } }