/* 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;
  --verde-boton: #4e8b0d;
  --verde-boton-osc: #3b6e08;
  --gris: #333;
  --tinta: #1a1a1a;
  --tinta-suave: #575757;
  --papel: #fbfaf6;
  --papel-suave: #f4f4f2;
  --tarjeta: #fffdf9;
  --pie: #2b2b2b;
  --linea: rgb(0 0 0 / 12%);
  --whatsapp: #25d366;
  --verde-hoja-fondo: #e9efe0;
  --verde-profundo: #26520a;
  --verde-bosque: #2c5f09;
  --verde-enlace: #4f7d11;
  --fondo-hero: #1c2b0f;
  --ambar: #d99a14;
  --error: #b3261e;
  --error-suave: #fdf0ee;
  --verde-papel: #f3f6ef;
  --verde-inicio: #8bab0a; /* verde de proher-natura.com (botones y encabezados del inicio) */
  --verde-inicio-osc: #76930a;
  --verde-inicio-texto: #5f7708;
  --verde-foto-vacia: #e8eee0;
  --enlace-pie: #8cc3ff;
  --sombra-flotante: 0 10px 28px -10px rgb(0 0 0 / 55%);
  --sombra-dialogo: 0 30px 80px -20px rgb(0 0 0 / 55%);
  --sombra-panel: 0 18px 50px -14px rgb(0 0 0 / 45%), 0 2px 8px rgb(0 0 0 / 12%);
  --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(2.5rem, 5vw, 4rem);
  --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__cabeza { max-width: 44rem; margin-bottom: 2.25rem; }
.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); }

/* 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); }
/* Botones de marca: verde con letra blanca. Nunca negros (el negro no es color de Proher Natura). */
.btn--verde { background: var(--verde-boton); color: #fff; }
.btn--verde:hover { background: var(--verde-boton-osc); color: #fff; }
.btn--tinta { background: transparent; color: var(--verde-boton); border-color: var(--verde-boton); }
.btn--tinta:hover { background: var(--verde-boton); 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; }
.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: 1120px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--alto-cabecera) 0 0 0; background: var(--gris); color: #fff; 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; color: #fff; border-bottom: 1px solid rgb(255 255 255 / 14%); border-radius: 0; width: 100%; justify-content: space-between; }
}

/* Hero */
.hero { position: relative; min-height: min(86vh, 46rem); display: grid; align-items: center; color: #fff; overflow: hidden; isolation: isolate; background: var(--fondo-hero); }
.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 .sobretitulo { color: #fff; }
.hero p.lead { color: #eef2e6; max-width: 36rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@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)); }

.dividida { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) { .dividida { grid-template-columns: 1.1fr 1fr; } }
.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); }

/* Página interior */
.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; }
.estado-msg { padding: 1rem 1.25rem; border-radius: var(--radio); background: var(--verde-suave); border: 1px solid var(--linea); }
.estado-msg--error { background: var(--error-suave); }
.btn-wa { color: #fff; background: #1f9d4f; }
.btn-wa:hover { background: #167a3c; 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: var(--gris); }

/* Pie */
.pie { background: var(--pie); color: #e9e9e4; padding: 3.5rem 0 1.5rem; font-size: .9375rem; }
.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__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 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: 56px; height: 56px; transform: translate(-50%,-50%); border-radius: 50%; background: rgb(78 139 13 / 88%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 56% 50%/54% no-repeat; box-shadow: 0 0 0 3px rgb(255 255 255 / 85%), 0 8px 22px -6px rgb(0 0 0 / 55%); transition: transform 200ms, background-color 200ms; }
.video button:hover::after, .video button:focus-visible::after { transform: translate(-50%,-50%) scale(1.12); background-color: var(--verde-boton-osc); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__tit { font: 700 .9375rem var(--f-titulo); margin: .6rem 0 0; }

@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-boton); color: #fff; font: 700 .8125rem var(--f-titulo); text-decoration: none;
}
.dist-lista a.button:hover { background: var(--verde-boton-osc); }

/* Imágenes y videos no se arrastran ni se seleccionan (la copia de texto sigue permitida: teléfonos, direcciones, correos) */
img, video, picture { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Enlaces dentro de un texto: subrayados, para no depender solo del color */
.pie__legal a { text-decoration: underline; }
.pie p a { text-decoration: underline; }

/* Transiciones: suaves, solo con opacidad y movimiento (no traban), y apagadas si la persona pidió reducir el movimiento. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .16s ease-out both vt-sale; }
  ::view-transition-new(root) { animation: .3s ease-out .04s both vt-entra; }
  @keyframes vt-sale { to { opacity: 0; } }
  @keyframes vt-entra { from { opacity: 0; } }
  /* Cada bloque sube y aparece al entrar en pantalla (solo donde el navegador lo soporta; en los demás se ve normal). */
  @supports (animation-timeline: view()) {
    .seccion > .contenedor > * { animation: bloque-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 220px; }
  }
  @keyframes bloque-entra { from { opacity: 0; transform: translateY(26px); } }
  img[loading="lazy"], img.suave { transition: opacity .5s ease; }
  .img-espera { opacity: 0; }
  dialog[open] { animation: dialogo-entra .3s cubic-bezier(.2, .7, .2, 1); }
  dialog[open]::backdrop { animation: fondo-entra .3s ease-out; }
  @keyframes dialogo-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
  @keyframes fondo-entra { from { opacity: 0; } }
}