/* ===========================================================
REDISEÑO — PUNEX GROUP · 30/09/2026
Hoja de trabajo. Se carga DESPUÉS de styles.css y solo en
las páginas de /_propuesta/. El sitio en producción no se toca.
ÍNDICE
0 · Variables y utilidades
1 · Cabeceras (hero) y fundido de imágenes
2 · Catálogo
3 · Portada
4 · Por qué PUNEX
5 · Mercado
6 · Puertos
7 · Documentación
8 · Hablemos
9 · Empresa
10 · Acceso / la red
11 · Formularios y verificación antirrobot
12 · MÓVIL — diseño propio
=========================================================== */
:root{
--pp-verde:#1D4D35; --pp-oro:#D5B548; --pp-crema:#F4EFE3;
--pp-tinta:#14241b; --pp-gris:#6d7a70; --pp-linea:#e2ded3;
}
/* ===== 1 · CABECERAS Y FUNDIDO ============================= */
.hm-hero, .pg-hero{ position:relative; overflow:hidden; }
.pp-fade{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transition:opacity 1.6s ease-in-out; z-index:0;
}
.pp-fade.is-on{ opacity:1; }
.hm-hero > .px-wrap, .pg-hero > .px-wrap{ position:relative; z-index:2; }
/* portada */
.hm-hero{ min-height:min(calc(100svh - var(--top-h,76px) - 190px), 508px) !important; }
.hm-hero-in{ padding-block:1.6rem 1.9rem !important; }
.hm-hero h1{ font-size:clamp(2.1rem,.85rem + 2.75vw,3.35rem); line-height:1.02; max-width:19ch; }
.hm-hero .hm-lead{ max-width:54ch; }
.hm-puno{ margin-top:1.1rem; }
/* interiores: el texto sube y se pega al borde de arriba */
.pg-hero .px-wrap{
min-height:clamp(128px,11vw,168px) !important;
padding-block:.7rem .9rem !important;
justify-content:flex-start !important;
}
.pg-hero .pg-k{ margin-top:0 !important; }
/* ---- acceso y login en el encabezado ---------------------- */
.pp-top-acc{ position:relative; margin-right:.5rem; }
.pp-top-b{
display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
height:34px; padding:0 .8rem; border-radius:999px;
border:1px solid rgba(255,255,255,.34); background:transparent; color:#fff;
font:600 .8rem Montserrat,system-ui,sans-serif;
}
.pp-top-b svg{ width:14px; height:14px; }
.pp-top-b:hover, .pp-top-acc.is-open .pp-top-b{ background:var(--pp-oro); border-color:var(--pp-oro); color:#14241b; }
.pp-top-panel{
position:absolute; right:0; top:calc(100% + .55rem); width:270px; display:none;
background:#fff; border-radius:14px; padding:1rem; box-shadow:0 18px 44px rgba(0,0,0,.28);
z-index:60; text-align:left;
}
.pp-top-acc.is-open .pp-top-panel{ display:block; }
.pp-top-lab{ display:block; margin-bottom:.7rem; color:var(--pp-gris);
font:600 .66rem/1 Montserrat,system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.pp-top-panel .px-field{ display:block; margin-bottom:.6rem; }
.pp-top-panel input{ width:100%; padding:.55rem .7rem; border:1px solid var(--pp-linea);
border-radius:9px; background:#faf9f6; font:500 .88rem Montserrat,system-ui,sans-serif; }
.pp-top-enter{ width:100%; border:0; border-radius:999px; padding:.6rem;
background:var(--pp-verde); color:#fff; font:600 .88rem Montserrat,system-ui,sans-serif;
opacity:.55; cursor:not-allowed; }
.pp-top-n{ margin:.7rem 0 0; font:500 .74rem/1.4 Montserrat,system-ui,sans-serif; color:var(--pp-gris); }
.pp-top-n a{ color:var(--pp-verde); font-weight:600; }
.pg-hero h1{ font-size:clamp(2rem,1.05rem + 2vw,3.05rem) !important; line-height:1.03;
margin:.1rem 0 .3rem !important; }
.pg-hero p{ max-width:66ch; margin-bottom:0 !important; }
/* legibilidad del banner: velo más marcado por abajo */
.pg-hero::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(90deg,rgba(11,26,19,.90) 0%,rgba(11,26,19,.74) 42%,rgba(11,26,19,.30) 78%,rgba(11,26,19,.18) 100%);
}
/* la sección que sigue al banner arranca antes */
.pg-hero + .px-sec, .pg-hero + section{ padding-top:clamp(1.5rem,2.2vw,2.2rem) !important; }
.px-sec, .hm-sec{ padding-block:clamp(2.2rem,3.2vw,3.4rem) !important; }
/* títulos de sección en páginas interiores: compactos y en una línea */
main:not(.hm) .hm-head h2 br, main:not(.hm) .px-head h2 br{ display:none; }
main:not(.hm) .hm-head h2, main:not(.hm) .px-head h2{
font-size:clamp(1.45rem,.95rem + 1.15vw,2.1rem) !important; line-height:1.1;
}
main:not(.hm) .hm-head{
display:flex !important; align-items:baseline; gap:1.3rem; flex-wrap:wrap;
margin-bottom:.9rem !important;
}
main:not(.hm) .hm-head > p{ flex:1 1 320px; margin:0; }
/* ===== 2 · CATÁLOGO ======================================== */
/* fuera: intro de familia y las tres cifras verdes */
.cx-sh-t > div > p, .cx-stats{ display:none !important; }
/* cabecera de familia: la foto se funde con el bloque verde */
.cx-sh{ border-radius:14px; position:relative; overflow:hidden; }
.cx-sh-img{
height:clamp(120px,11vw,168px) !important; object-fit:cover;
-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 45%,rgba(0,0,0,.35) 78%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 45%,rgba(0,0,0,.35) 78%,transparent 100%);
}
/* la foto de familia vive en su propio marco, para no confundirla con las fichas */
.cx-sh::before{
content:""; position:absolute; left:0; right:0; top:0;
height:clamp(120px,11vw,168px); pointer-events:none; z-index:1;
border-bottom:1px solid rgba(213,181,72,.45);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.cx-sh-t{ padding:.6rem 1.2rem .3rem !important; position:relative; z-index:2; margin-top:-2.2rem; }
.cx-sh-t h2{ font-size:clamp(1.35rem,.9rem + 1vw,1.85rem) !important; margin:0 !important; }
.cx-cal{ padding:.6rem 1.2rem 1rem !important; }
.cx-caltab td{ height:16px !important; }
.cx-meta{ margin-bottom:.6rem !important; }
.cx-sec{ margin-top:1.4rem !important; }
.cx-sec:first-of-type{ margin-top:.4rem !important; }
/* la ficha de producto lleva marco propio: su foto no se confunde
con la fotografía de ambiente de la cabecera de familia */
.cx-sh{ margin-bottom:1.15rem; }
.cx-card{ border:1px solid var(--pp-linea) !important; border-radius:13px; overflow:hidden;
background:#fff; }
.cx-card .cx-media{ padding:7px 7px 0; background:#fff; }
.cx-card .cx-media img{ border-radius:9px; display:block; width:100%;
outline:1px solid rgba(20,36,27,.08); outline-offset:-1px; }
.cx-card .cx-prov{ top:14px !important; left:14px !important; }
/* --- barra fija: buscador centrado + desplegable de filtros --- */
.pp-bar{
position:sticky; top:var(--top-h,76px); z-index:40;
background:rgba(255,255,255,.93); backdrop-filter:saturate(1.3) blur(10px);
border-bottom:1px solid var(--pp-linea);
transition:transform .28s ease, box-shadow .2s ease;
margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
}
.pp-bar.is-stuck{ box-shadow:0 6px 22px rgba(20,36,27,.09); }
.pp-bar.is-hidden{ transform:translateY(-118%); }
.pp-bar-in{
display:flex; align-items:center; justify-content:center; gap:.6rem;
max-width:820px; margin-inline:auto; padding-block:.7rem;
}
.pp-bar .px-search, .pp-bar .cx-search{ flex:1 1 auto; margin:0; max-width:none; }
.pp-bar input[type=search]{
width:100%; height:46px; padding:0 1rem; border-radius:999px;
border:1px solid var(--pp-linea); background:#fff;
font:500 .95rem Montserrat,system-ui,sans-serif; color:var(--pp-tinta);
}
.pp-fbtn{
flex:0 0 auto; height:46px; display:inline-flex; align-items:center; gap:.5rem;
padding:0 1.05rem; border-radius:999px; cursor:pointer;
border:1px solid var(--pp-verde); background:#fff; color:var(--pp-verde);
font:600 .9rem Montserrat,system-ui,sans-serif;
}
.pp-fbtn:hover{ background:var(--pp-verde); color:#fff; }
.pp-fbtn svg{ width:11px; height:11px; transition:transform .2s; }
.pp-bar.is-open .pp-fbtn{ background:var(--pp-verde); color:#fff; }
.pp-bar.is-open .pp-fbtn svg{ transform:rotate(180deg); }
.pp-dl{
flex:0 0 auto; height:46px; display:inline-flex; align-items:center; gap:.45rem;
padding:0 1.15rem; border-radius:999px; background:var(--pp-verde); color:#fff;
font:600 .9rem Montserrat,system-ui,sans-serif; text-decoration:none;
}
.pp-dl small{ font-weight:500; opacity:.7; font-size:.76rem; }
.pp-fwrap{ position:relative; }
.pp-fmenu{
position:absolute; right:0; top:calc(100% + .5rem); width:min(420px,88vw);
background:#fff; border:1px solid var(--pp-linea); border-radius:14px;
box-shadow:0 18px 48px rgba(20,36,27,.16); padding:.5rem; display:none;
}
.pp-bar.is-open .pp-fmenu{ display:block; }
.pp-fmenu .pp-fmlab{
display:block; padding:.45rem .7rem .3rem; font:600 .7rem/1 Montserrat,system-ui,sans-serif;
letter-spacing:.14em; text-transform:uppercase; color:var(--pp-gris);
}
.pp-fmenu .cx-chip{
width:100%; display:flex !important; align-items:center; gap:.7rem;
padding:.6rem .7rem; border:0; border-radius:9px; background:none;
text-align:left !important; white-space:normal; cursor:pointer;
}
.pp-fmenu .cx-chip:hover{ background:var(--pp-crema); }
.pp-fmenu .cx-chip.is-on{ background:var(--pp-verde); color:#fff; }
.pp-fmenu .cx-chip b{
flex:0 0 auto; width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
background:var(--pp-crema); color:var(--pp-verde); font:700 .72rem/1 Montserrat,system-ui,sans-serif;
}
.pp-fmenu .cx-chip.is-on b{ background:rgba(255,255,255,.18); color:var(--pp-oro); }
.pp-fmenu .cx-cn{ display:block; font:600 .93rem/1.2 Montserrat,system-ui,sans-serif; }
.pp-fmenu .cx-cc{ display:block; font:500 .78rem/1 Montserrat,system-ui,sans-serif;
color:var(--pp-gris); margin-top:.15rem; }
.pp-fmenu .cx-chip.is-on .cx-cc{ color:rgba(255,255,255,.72); }
/* ===== 3 · PORTADA ========================================= */
.hm-podium, .hm-prods{ align-items:stretch; }
/* ---- LA CINTA, integrada con el hero y con las certificaciones ----
Deja de ser una franja roja suelta entre dos bloques oscuros: pasa a ser
la primera línea de la base oscura que arranca donde acaba la foto. */
.px-ticker{
background:linear-gradient(180deg,#072019 0%,#0b2b21 100%) !important;
border-block:0 !important;
border-top:1px solid rgba(213,181,72,.32) !important;
border-bottom:1px solid rgba(255,255,255,.05) !important;
padding-block:.5rem !important;
}
/* legibilidad: el nombre manda, la partida acompaña dentro de una cápsula */
.px-ticker span, .hm .px-ticker span{
color:#F4EFE3 !important;
font:600 .95rem/1 Montserrat,system-ui,sans-serif !important;
padding-inline:1.5rem !important; gap:.75em !important; align-items:center !important;
}
.px-ticker span code, .hm .px-ticker span code{
color:#E2C766 !important;
font:500 .74rem/1 "IBM Plex Mono",monospace !important;
border:1px solid rgba(213,181,72,.30); border-radius:5px;
padding:.22em .5em; letter-spacing:.02em;
}
.px-ticker span::after{
content:"" !important; margin-left:1.5rem !important;
width:4px; height:4px; border-radius:50%;
background:rgba(213,181,72,.5) !important; display:inline-block;
}
/* y mucho más despacio: iba a 120 s, pasa a 300 */
.px-ticker-in, .hm .px-ticker-in{ animation-duration:300s !important; }
/* ---- CERTIFICACIONES, legibles ----------------------------
El rótulo dejaba de leerse en versalitas minúsculas con mucho
tracking. Pasa a caja baja y cuerpo normal, en su propia línea,
y las pastillas ganan tamaño y contraste. */
.px-certs{ background:#0b2b21 !important; border-top:1px solid rgba(255,255,255,.07) !important; }
.px-certs .px-wrap{
display:block !important;
padding-block:1.5rem 1.7rem !important;
}
.px-certs-label{
display:block !important; margin-bottom:.95rem !important;
font:500 .95rem/1.45 Montserrat,system-ui,sans-serif !important;
letter-spacing:0 !important; text-transform:none !important;
color:rgba(244,239,227,.80) !important; max-width:60ch;
}
.px-certs ul{
display:flex !important; flex-wrap:wrap; gap:.5rem !important;
list-style:none; margin:0; padding:0;
}
.px-certs li{
background:rgba(255,255,255,.065) !important;
border:1px solid rgba(255,255,255,.17) !important;
border-radius:8px !important;
padding:.52rem .9rem !important;
font:600 .89rem/1 Montserrat,system-ui,sans-serif !important;
color:#F4EFE3 !important; letter-spacing:0 !important;
}
@media (max-width:760px){
.px-ticker{ padding-block:.5rem !important; }
.px-ticker span, .hm .px-ticker span{ font-size:.88rem !important; padding-inline:1.1rem !important; }
.px-ticker span code, .hm .px-ticker span code{ font-size:.7rem !important; }
.px-ticker-in, .hm .px-ticker-in{ animation-duration:360s !important; }
.px-certs .px-wrap{ padding-block:1.2rem 1.4rem !important; }
.px-certs-label{ font-size:.89rem !important; margin-bottom:.8rem !important; }
.px-certs li{ font-size:.83rem !important; padding:.45rem .75rem !important; }
}
/* ---- ESLOGAN · Traemos Perú ------------------------------- */
.pp-slogan{
display:inline-flex; align-items:center; gap:.7rem; margin-bottom:.75rem;
font:700 .82rem/1 Montserrat,system-ui,sans-serif;
letter-spacing:.28em; text-transform:uppercase; color:var(--pp-oro);
}
.pp-slogan::after{ content:""; width:52px; height:1px; background:var(--pp-oro); opacity:.7; }
.pp-slogan-pie{
margin:.55rem 0 .7rem !important;
font:700 1.02rem/1.1 Montserrat,system-ui,sans-serif;
letter-spacing:.06em; color:var(--pp-oro) !important;
}
/* ===== 4 · POR QUÉ PUNEX =================================== */
.px-split{ gap:clamp(1.4rem,2.6vw,2.6rem) !important; align-items:start !important; }
.px-split-txt{ padding-top:0 !important; align-self:start !important; }
.px-split-txt > *:first-child{ margin-top:0 !important; }
.px-split-txt p{ font-size:clamp(1rem,.92rem + .3vw,1.22rem); line-height:1.5; }
.px-eligen-grid{ gap:.9rem !important; margin-top:1.2rem !important; }
.px-fotos{ padding-block:clamp(1.6rem,2.4vw,2.4rem) !important; }
/* ===== 5 · MERCADO ========================================= */
/* la banda de cifras sube, sobre crema — no dos verdes seguidos */
.mk-hero-band{
position:relative; background:var(--pp-crema); overflow:hidden;
padding-block:clamp(1.5rem,2.2vw,2.2rem) !important;
border-bottom:1px solid #e6e1d3;
}
.mk-hero-band > img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:.10; z-index:0; filter:grayscale(.35);
}
.mk-hero-band > .px-wrap{ position:relative; z-index:1; }
.mk-hero-band .hm-head{ margin-bottom:.9rem !important; }
.mk-hero-band .hm-head h2{ font-size:clamp(1.4rem,.9rem + 1.3vw,2rem) !important; }
.mk-hero-band .mk-ns{ display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.mk-hero-band .mk-n{
background:var(--pp-verde) !important; border:0 !important;
border-left:3px solid var(--pp-oro) !important; border-radius:11px;
padding:.8rem .95rem !important;
}
.mk-hero-band .mk-n-c{ color:var(--pp-oro) !important;
font-size:clamp(1.1rem,.75rem + .75vw,1.45rem) !important; }
.mk-hero-band .mk-n-d{ color:rgba(255,255,255,.88) !important; font-size:.82rem !important;
line-height:1.38 !important; }
.mk-hero-band .mk-src{ color:rgba(255,255,255,.5) !important; font-size:.68rem !important; }
/* gráficas: más bajas, más contraste y sin estirarse a todo el ancho */
.mk-chart-sec{ background:#fff; }
.mk-chart{
max-width:820px; margin-inline:auto; background:#fff;
border:1px solid var(--pp-linea); border-radius:14px; padding:.9rem 1rem;
box-shadow:0 2px 14px rgba(20,36,27,.05);
}
.mk-chart svg{ max-height:300px; }
.mk-chart svg text{ fill:#33423a !important; font-size:10px !important; }
.mk-ms{ max-width:820px; margin-inline:auto; }
.mk-bignote{ max-width:820px; margin-inline:auto; font-size:.82rem !important; }
/* fichas de mercado: más estrechas y con la cifra junto a lo que describe */
.mk-fs{ max-width:900px; margin-inline:auto; }
.mk-f{
border:1px solid var(--pp-linea); border-radius:12px; overflow:hidden;
background:#fff; box-shadow:0 1px 8px rgba(20,36,27,.05);
}
.mk-f + .mk-f{ margin-top:.55rem; }
.mk-f-t{ background:var(--pp-crema); padding:.7rem .95rem !important; }
.mk-f-b{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; }
.mk-f-g{ border-right:1px solid var(--pp-linea); padding:.8rem .95rem; }
.mk-f-g svg{ max-height:150px; }
.mk-kpis{ padding:.8rem .95rem; display:grid; gap:.4rem; align-content:start; font-size:.84rem; }
.mk-dest, .mk-ins{ padding:0 .95rem .8rem; font-size:.84rem; }
.mk-news .mk-c{ font-size:.85rem; }
.mk-news h3{ font-size:.95rem !important; }
/* ===== 6 · PUERTOS ========================================= */
.pt .hm-head{ margin-bottom:.8rem !important; }
.pt-map-w{ min-height:clamp(420px,52vh,600px); }
.pt-map{ min-height:clamp(420px,52vh,600px); }
/* la calculadora vive dentro de la caja verde, al lado del mapa */
.pt-calc-sec{ display:none; } /* ya no hace falta la sección aparte */
.pt-calc-in h3{
margin:0 0 .55rem; color:var(--pp-oro);
font:600 .68rem/1 Montserrat,system-ui,sans-serif !important;
letter-spacing:.14em; text-transform:uppercase;
}
.pt-calc-in .pt-calc{ display:block !important; }
.pt-calc-in .pt-ctl{ background:rgba(255,255,255,.07) !important; padding:.9rem !important;
border-radius:12px; gap:.6rem !important; }
.pt-calc-in .pt-out{ margin-top:.7rem; background:rgba(255,255,255,.07); border-radius:12px;
padding:.85rem .9rem; border-left:3px solid var(--pp-oro); }
.pt-calc-in .pt-out *{ color:#fff !important; }
.pt-calc-in .pt-disc{ margin:.6rem 0 0; font-size:.7rem; color:rgba(255,255,255,.5) !important; }
.pt-calc-in select, .pt-calc-in input{ font-size:.85rem; }
@media (min-width:980px){
.pt-map-w{ grid-template-columns:minmax(0,1fr) 25rem !important; grid-template-rows:auto 1fr; }
.pt-map{ grid-column:1; grid-row:1 / span 2; height:clamp(540px,70vh,700px) !important; }
.pt-side{ grid-column:2; grid-row:1; max-height:none !important;
padding:1.1rem 1.2rem .4rem !important; }
.pt-calc-in{ grid-column:2; grid-row:2; min-height:0; overflow:auto;
border-top:1px solid rgba(255,255,255,.14);
margin:.6rem 1.2rem 1rem; padding:.7rem 0 0; }
}
/* ===== 7 · DOCUMENTACIÓN =================================== */
/* el blanco plano pasa a un fondo tramado muy suave */
.px-sec-alt, #documentacion{
background:
linear-gradient(180deg,#FBF9F4 0%,#F7F4EC 100%),
repeating-linear-gradient(135deg,rgba(29,77,53,.022) 0 2px,transparent 2px 7px) !important;
}
#normativa{ background:#fff; }
.dk{ padding-top:.3rem; }
.dk-ctl{ gap:.7rem !important; }
.dk-res{ margin-top:.9rem !important; background:#fff; border:1px solid var(--pp-linea);
border-radius:14px; padding:1.1rem 1.2rem; }
.dk-list li{ font-size:.9rem; }
/* normativa: cada norma se lee sola, en dos columnas */
#normativa .px-relojes-list{
display:grid; grid-template-columns:1fr 1fr; gap:.65rem;
max-width:1040px; margin-inline:auto; list-style:none; padding:0;
}
#normativa .px-reloj-n{
display:block; background:#FBF9F4; border:1px solid var(--pp-linea);
border-left:4px solid var(--pp-oro); border-radius:11px;
padding:.85rem 1rem; box-shadow:0 1px 8px rgba(20,36,27,.04);
font-size:.85rem; line-height:1.5; color:#3a4841;
}
#normativa .px-reloj-h{
display:block; font:700 .93rem/1.32 Montserrat,system-ui,sans-serif;
color:var(--pp-verde); margin-bottom:.35rem;
}
#normativa .px-fecha{
display:inline-block; font:600 .68rem/1 Montserrat,system-ui,sans-serif;
letter-spacing:.09em; text-transform:uppercase;
background:var(--pp-verde); color:var(--pp-oro); border-radius:999px;
padding:.3rem .62rem; margin-bottom:.5rem;
}
/* ===== 8 · HABLEMOS ======================================== */
.px-contact{ padding-top:1.1rem !important; }
.px-contact-in{ display:block !important; }
/* los datos de contacto pasan a una tira fina arriba */
.pp-strip{
display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
background:var(--pp-verde); color:#fff; border-radius:14px;
padding:1rem 1.2rem; margin-bottom:1.1rem;
}
.pp-strip .px-h4{ color:var(--pp-oro) !important; font-size:.68rem !important; letter-spacing:.14em; }
.pp-strip p{ margin:.2rem 0 0; font:500 .89rem/1.4 Montserrat,system-ui,sans-serif; color:#fff; }
.pp-strip a{ color:#fff; }
.pp-forms{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; align-items:start; }
.pp-forms .px-fields{ grid-template-columns:1fr 1fr !important; }
.pp-forms .ct-full{ grid-column:1 / -1; }
.pp-forms .ct-quote, .pp-forms .px-contact-side{ display:none; }
.pp-fcard{
background:#fff; border:1px solid var(--pp-linea); border-radius:16px;
padding:1.25rem 1.25rem 1.15rem; box-shadow:0 2px 14px rgba(20,36,27,.05);
}
.pp-fcard.is-prov{ background:var(--pp-crema); border-color:#ded8c7; }
.pp-fcard .px-form{ border:0 !important; padding:0 !important; background:none !important;
box-shadow:none !important; margin:0 !important; }
.pp-fcard h2{ font-size:1.25rem !important; margin:0 0 .2rem !important; }
.pp-fcard .pp-sub{ margin:0 0 1rem; font:500 .88rem/1.45 Montserrat,system-ui,sans-serif; color:var(--pp-gris); }
/* ===== 9 · EMPRESA ========================================= */
#empresa{ padding-top:clamp(2.2rem,3.4vw,3.4rem) !important; }
.px-founder{
padding-top:0 !important; gap:clamp(1.8rem,3.2vw,3.2rem) !important;
align-items:center !important; /* foto y texto, a la misma altura */
max-width:1000px; margin-inline:auto; /* el bloque, centrado en la página */
}
.px-founder > *:first-child{ margin-top:0 !important; }
/* la foto se ve entera, sin recortar, con paspartú liso de ancho igual
en los cuatro lados y sin sombra */
.px-founder figure{
margin:0 auto; max-width:400px; text-align:center;
background:none; padding:0; border:0; box-shadow:none;
overflow:visible !important; position:relative;
}
.px-founder figure::before, .px-founder figure::after{ display:none !important; }
.px-founder figure img{
width:100%; height:auto; aspect-ratio:auto !important;
object-fit:contain !important; display:block;
background:#fff; padding:16px; /* el paspartú, igual en los 4 lados */
border:1px solid var(--pp-linea);
border-radius:4px; box-shadow:none;
}
.px-founder figcaption{ margin-top:.95rem; text-align:center;
font-size:.82rem; color:var(--pp-gris); }
.px-founder figcaption b{
display:block; position:relative; margin-bottom:.55rem; padding-bottom:.5rem;
color:var(--pp-verde); font:700 1.02rem/1.2 Montserrat,system-ui,sans-serif;
}
.px-founder figcaption b::after{
content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
width:38px; height:2px; background:var(--pp-oro);
}
.px-founder > div{ align-self:center; }
/* la frase grande, legible: Montserrat semibold en vez de cursiva fina */
.px-founder blockquote{
margin:0 0 1.1rem; padding-left:1rem; max-width:44ch;
border-left:3px solid var(--pp-oro);
font:600 clamp(1.14rem,.92rem + .62vw,1.48rem)/1.32 Montserrat,system-ui,sans-serif !important;
font-style:normal !important; color:var(--pp-verde) !important;
letter-spacing:-.005em;
}
.px-founder .px-founder-bio{ max-width:56ch; font-size:.96rem; line-height:1.62; }
/* ===== 10 · ACCESO / LA RED ================================ */
.ac-hero{ background:var(--pp-verde); color:#fff; position:relative; overflow:hidden;
padding-block:clamp(2rem,3vw,3rem); }
.ac-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; }
.ac-in{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr;
gap:clamp(1.4rem,3vw,3rem); align-items:center; }
.ac-in h1{ color:#fff; font-size:clamp(1.9rem,1rem + 2vw,2.9rem); line-height:1.05; margin:.35rem 0 .7rem; }
.ac-in p{ color:rgba(255,255,255,.86); max-width:50ch; }
.ac-k{ color:var(--pp-oro); font:600 .72rem/1 Montserrat,system-ui,sans-serif;
letter-spacing:.16em; text-transform:uppercase; }
.ac-box{ background:#fff; color:var(--pp-tinta); border-radius:18px; padding:1.4rem 1.35rem 1.25rem;
box-shadow:0 20px 50px rgba(0,0,0,.26); }
.ac-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; background:var(--pp-crema);
border-radius:11px; padding:.3rem; margin-bottom:1.1rem; }
.ac-tab{ border:0; background:none; cursor:pointer; border-radius:8px; padding:.6rem .4rem;
font:600 .88rem Montserrat,system-ui,sans-serif; color:var(--pp-verde); }
.ac-tab.is-on{ background:var(--pp-verde); color:#fff; }
.ac-box .px-field{ display:block; margin-bottom:.8rem; }
.ac-box input{ width:100%; padding:.7rem .85rem; border:1px solid var(--pp-linea);
border-radius:10px; background:#faf9f6; font:500 .93rem Montserrat,system-ui,sans-serif; }
.ac-btn{ width:100%; border:0; border-radius:999px; padding:.8rem; cursor:not-allowed; opacity:.55;
background:var(--pp-verde); color:#fff; font:600 .95rem Montserrat,system-ui,sans-serif; }
.ac-note{ margin:.8rem 0 0; font:500 .8rem/1.45 Montserrat,system-ui,sans-serif; color:var(--pp-gris); }
.ac-note a{ color:var(--pp-verde); font-weight:600; }
.ac-red{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.4rem,3vw,3rem); align-items:center; }
.ac-red img{ width:100%; border-radius:16px; object-fit:cover; aspect-ratio:4/3; }
.ac-vent{ display:grid; gap:.7rem; margin:1.1rem 0 0; padding:0; list-style:none; }
.ac-vent li{ display:grid; grid-template-columns:30px 1fr; gap:.7rem; align-items:start;
font:500 .95rem/1.5 Montserrat,system-ui,sans-serif; }
.ac-vent b{ display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
background:var(--pp-crema); color:var(--pp-verde);
font:700 .78rem/1 Montserrat,system-ui,sans-serif; }
.ac-vent span b{ all:unset; font-weight:700; }
/* ===== 11 · FORMULARIOS Y VERIFICACIÓN ===================== */
.px-form, .pp-form{ max-width:none !important; }
.px-fields, .pp-form .px-fields{ gap:.75rem .9rem !important; }
.px-field input, .px-field select, .px-field textarea{
padding:.6rem .8rem !important; font-size:.92rem !important; border-radius:9px !important;
}
.px-lab{ font-size:.79rem !important; margin-bottom:.22rem !important; }
.px-field textarea{ min-height:96px; }
.pp-form{ background:#fff; border:1px solid var(--pp-linea); border-radius:16px;
padding:1.3rem 1.3rem 1.2rem; margin-top:1.2rem; }
.pp-form .px-fields{ display:grid; grid-template-columns:repeat(3,1fr); }
.pp-form .ct-full{ grid-column:1 / -1; }
.pp-send{ margin-top:1.1rem; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.pp-send .hm-btn{ border:0; cursor:pointer; }
.pp-legal{ margin:0; max-width:46ch; font:500 .78rem/1.45 Montserrat,system-ui,sans-serif; color:var(--pp-gris); }
.pp-aviso{
margin:0 0 1rem; padding:.7rem .9rem; border-radius:10px;
background:rgba(213,181,72,.12); border-left:3px solid var(--pp-oro);
font:500 .85rem/1.5 Montserrat,system-ui,sans-serif; color:#5d5324;
}
.pp-prov{ background:var(--pp-crema); }
/* escudo de verificación */
.pp-shield{
position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
background:rgba(12,24,18,.62); backdrop-filter:blur(4px);
opacity:0; transition:opacity .3s ease;
}
.pp-shield.is-on{ opacity:1; }
.pp-shield-box{
width:min(400px,90vw); background:#fff; border-radius:18px; padding:1.9rem 1.7rem 1.6rem;
text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.pp-shield-ico{ color:var(--pp-verde); width:56px; margin:0 auto .9rem; }
.pp-shield-ico svg{ width:100%; height:auto; }
.pp-shield-ico .pp-tick{ stroke-dasharray:26; stroke-dashoffset:26; transition:stroke-dashoffset .5s ease .1s; }
.pp-shield.is-ok .pp-shield-ico{ color:#2f7d52; }
.pp-shield.is-ok .pp-shield-ico .pp-tick{ stroke-dashoffset:0; }
.pp-shield-t{ margin:0 0 .4rem; font:700 1.02rem/1.3 Montserrat,system-ui,sans-serif; color:var(--pp-verde); }
.pp-shield-p{ margin:0; font:500 .87rem/1.5 Montserrat,system-ui,sans-serif; color:var(--pp-gris); }
.pp-shield-bar{ margin-top:1.1rem; height:3px; border-radius:2px; background:var(--pp-crema); overflow:hidden; }
.pp-shield-bar i{ display:block; height:100%; width:0; background:var(--pp-oro);
animation:ppbar 1.9s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes ppbar{ to{ width:100%; } }
/* área de clientes de la portada */
.pp-acc{ background:var(--pp-verde); color:#fff; padding-block:clamp(2.4rem,3.4vw,3.6rem); }
.pp-acc-in{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,3vw,3.2rem); align-items:center; }
.pp-acc-t .hm-k{ color:var(--pp-oro); }
.pp-acc-t h2{ color:#fff; font-size:clamp(1.6rem,.9rem + 1.6vw,2.4rem); line-height:1.08; margin:.35rem 0 .9rem; }
.pp-acc-t ul{ list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.45rem; }
.pp-acc-t li{ position:relative; padding-left:1.3rem; color:rgba(255,255,255,.86);
font:500 .94rem/1.5 Montserrat,system-ui,sans-serif; }
.pp-acc-t li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
border-radius:50%; background:var(--pp-oro); }
.pp-acc-box{ background:#fff; color:var(--pp-tinta); border-radius:16px; padding:1.4rem 1.3rem 1.2rem;
box-shadow:0 16px 40px rgba(0,0,0,.22); }
.pp-acc-box h3{ margin:0 0 .9rem; font:700 1.1rem/1 Montserrat,system-ui,sans-serif; }
.pp-acc-box input{ width:100%; padding:.68rem .82rem; border:1px solid var(--pp-linea);
border-radius:10px; background:#faf9f6; font:500 .93rem Montserrat,system-ui,sans-serif; }
.pp-acc-b{ width:100%; border:0; margin-top:.2rem; opacity:.55; cursor:not-allowed; }
.pp-acc-n{ margin:.8rem 0 0; font:500 .79rem/1.45 Montserrat,system-ui,sans-serif; color:var(--pp-gris); }
.pp-acc-n a{ color:var(--pp-verde); font-weight:600; }
/* ===========================================================
12 · MÓVIL — diseño propio, no el de escritorio encogido
=========================================================== */
@media (max-width:760px){
/* --- aire general: una cosa por pantalla --- */
.px-sec, .hm-sec{ padding-block:1.8rem !important; }
h2{ font-size:1.42rem !important; line-height:1.15 !important; }
.hm-head p, .px-lead{ font-size:.92rem !important; }
/* --- cabeceras --- */
.hm-hero{ min-height:auto !important; }
.hm-hero-in{ padding-block:.9rem 1.3rem !important; }
.hm-hero h1{ font-size:clamp(1.95rem,8vw,2.5rem); }
.pg-hero .px-wrap{ min-height:112px !important; padding-block:.85rem .8rem !important; }
.pg-hero h1{ font-size:clamp(1.65rem,6.6vw,2.1rem) !important; }
.pg-hero p{ font-size:.88rem !important; line-height:1.45; }
.pg-hero::after{ background:linear-gradient(180deg,rgba(11,26,19,.55) 0%,rgba(11,26,19,.9) 70%); }
/* --- barra del catálogo --- */
.pp-bar-in{ padding-block:.55rem; gap:.45rem; flex-wrap:nowrap; }
.pp-bar input[type=search]{ height:42px; font-size:.9rem; }
.pp-fbtn{ height:42px; padding:0 .8rem; }
.pp-fbtn .pp-fbtn-t{ display:none; }
.pp-dl{ display:none; }
.pp-fmenu{ position:fixed; left:.6rem; right:.6rem; width:auto; top:auto;
bottom:.6rem; max-height:70vh; overflow:auto; }
/* --- catálogo: la ficha se abre, no se despliega sola --- */
.cx-sh-img{ height:78px !important; }
.cx-sh-t{ padding:.7rem .9rem .2rem !important; }
.cx-sh-t h2{ font-size:1.2rem !important; }
.cx-cal, .cx-cal-x{ padding:0 .9rem .8rem !important; }
.pp-acc-mob{ margin:0 .9rem .9rem; border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.06); }
.pp-acc-mob > summary{ color:#fff; }
.pp-acc-mob > summary::after{ color:var(--pp-oro); }
.pp-acc-mob .cx-lab, .pp-acc-mob .cx-legend{ color:rgba(255,255,255,.8); }
.pp-acc-mob > .pp-mob-b{ padding:0; }
.cx-card{ border-radius:12px; }
.cx-media img{ aspect-ratio:16/10; object-fit:cover; }
.cx-key{ display:none; } /* pasa al desplegable */
.cx-season{ display:none; } /* pasa al desplegable */
.cx-more summary{ padding:.7rem .9rem !important; font-size:.88rem !important; }
/* --- portada --- */
.hm-podium, .hm-prods{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:.6rem !important; }
.hm-prod h3{ font-size:.95rem !important; }
.hm-prod .hm-sci{ display:none; }
/* selva · sierra · costa: las tres a la vista, en menos de 3/4 de pantalla */
.hm-regs{ display:grid !important; grid-template-columns:1fr !important; gap:.45rem !important; }
.hm-reg{
display:grid !important; grid-template-columns:104px 1fr; align-items:stretch;
border-radius:11px; overflow:hidden; min-height:0 !important;
}
.hm-reg img{ width:104px; height:100%; min-height:96px; aspect-ratio:auto !important;
object-fit:cover; position:static !important; }
.hm-reg > div{ padding:.6rem .75rem !important; background:var(--pp-verde) !important;
position:static !important; inset:auto !important; }
.hm-reg::before, .hm-reg::after{ display:none !important; }
.hm-reg h3{ font-size:1rem !important; margin:.1rem 0 .2rem !important; color:#fff !important; }
.hm-reg .hm-k{ font-size:.6rem !important; color:var(--pp-oro) !important; }
.hm-reg li{ color:#fff !important; border-color:rgba(255,255,255,.3) !important; }
.hm-reg p{ display:none; }
.hm-reg ul{ display:flex; flex-wrap:wrap; gap:.25rem; margin:0; padding:0; }
.hm-reg li{ font-size:.68rem !important; padding:.16rem .42rem !important; }
/* por qué punex: los seis puntos en una sola pantalla */
.px-eligen-grid{ display:grid !important; grid-template-columns:1fr 1fr !important;
gap:.5rem !important; }
.px-eligen-item{ padding:.6rem .7rem !important; }
.px-eligen-item h3{ font-size:.82rem !important; line-height:1.2 !important; }
.px-eligen-item p{ display:none; }
.px-eligen-item .px-num, .px-eligen-item > span:first-child{ font-size:1.1rem !important; }
/* de la finca al puerto: las cuatro fotos juntas */
.px-fotos-grid{ display:grid !important; grid-template-columns:1fr 1fr !important;
gap:.4rem !important; }
.px-foto{ background:rgba(255,255,255,.07); border-radius:11px; }
.px-foto img{ aspect-ratio:4/3 !important; object-fit:cover; }
.px-foto::after{ display:none !important; }
.px-foto figcaption{
position:static !important; inset:auto !important;
padding:.5rem .6rem .65rem !important;
}
.px-foto b{ font-size:.86rem !important; line-height:1.15 !important; }
.px-foto span{ font-size:.71rem !important; line-height:1.32 !important; margin-top:.25em !important; }
/* --- formularios: nunca más de 3/4 de pantalla --- */
.pp-form, .pp-fcard{ padding:.8rem .8rem .9rem; border-radius:12px; }
.pp-form .px-fields, .pp-fcard .px-fields{
grid-template-columns:1fr !important; gap:.45rem !important;
max-height:52vh; overflow:auto; padding-right:.25rem;
-webkit-overflow-scrolling:touch;
}
.px-field input, .px-field select, .px-field textarea{ font-size:16px !important;
padding:.5rem .65rem !important; }
.px-field textarea{ min-height:64px; }
.px-lab{ font-size:.74rem !important; }
.pp-forms{ grid-template-columns:1fr !important; }
.pp-aviso{ font-size:.78rem; padding:.55rem .7rem; margin-bottom:.6rem; }
.pp-strip{ grid-template-columns:1fr 1fr !important; gap:.6rem; padding:.8rem .9rem; }
.pp-strip p{ font-size:.8rem; }
.pp-send{ flex-direction:column; align-items:stretch; gap:.7rem; }
.pp-send .hm-btn{ width:100%; text-align:center; }
/* --- mercado --- */
.mk-hero-band .mk-ns{ grid-template-columns:1fr !important; gap:.5rem; }
.mk-hero-band .mk-n{ padding:.75rem .85rem !important; }
.mk-f-b{ grid-template-columns:1fr !important; }
.mk-f-g{ border-right:0; border-bottom:1px solid var(--pp-linea); }
.mk-chart{ padding:.8rem .6rem; }
/* --- puertos --- */
.pt-map-w, .pt-map{ min-height:300px; }
.pt-calc{ grid-template-columns:1fr; padding:1rem; }
/* --- documentación --- */
#normativa .px-reloj-n{ padding:.8rem .9rem; }
#normativa .px-reloj-h{ font-size:.9rem; }
/* --- acceso --- */
.ac-in, .ac-red{ grid-template-columns:1fr !important; }
.ac-red img{ aspect-ratio:16/10; }
.pp-acc-in{ grid-template-columns:1fr !important; }
/* --- el login del encabezado, a pantalla completa --- */
.pp-top-acc{ margin-right:.3rem; }
.pp-top-b span{ display:none; }
.pp-top-b{ width:38px; height:38px; padding:0; justify-content:center; border-radius:50%; }
.pp-top-panel{ position:fixed; left:.7rem; right:.7rem; top:auto; width:auto; }
/* --- datos y gráficas: todo más pequeño --- */
.mk-chart svg{ max-height:210px; }
.mk-f-g svg{ max-height:120px; }
.mk-kpis, .mk-dest, .mk-ins{ font-size:.79rem; }
.mk-news h3{ font-size:.88rem !important; }
.dk-list li{ font-size:.85rem; }
#normativa .px-relojes-list{ grid-template-columns:1fr !important; }
.px-founder figure{ max-width:none; }
.px-founder figure img{ aspect-ratio:3/2; }
/* --- bloques plegables genéricos del móvil --- */
.pp-mob{ border:1px solid var(--pp-linea); border-radius:12px; background:#fff;
margin-bottom:.6rem; overflow:hidden; }
.pp-mob > summary{
list-style:none; cursor:pointer; padding:.85rem 1rem;
font:600 .95rem/1.2 Montserrat,system-ui,sans-serif; color:var(--pp-verde);
display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.pp-mob > summary::-webkit-details-marker{ display:none; }
.pp-mob > summary::after{ content:"+"; font-weight:700; color:var(--pp-oro); font-size:1.15rem; }
.pp-mob[open] > summary::after{ content:"–"; }
.pp-mob > .pp-mob-b{ padding:0 1rem 1rem; }
}
/* en escritorio los plegables del móvil no existen */
@media (min-width:761px){
.pp-mob{ border:0; }
.pp-mob > summary{ display:none; }
.pp-mob > .pp-mob-b{ display:block !important; }
}
/* ===========================================================
13 · 01/10/2026 — HERO C, LEGIBILIDAD EN CLARO, PUERTOS, DOCS
=========================================================== */
/* ---- 13.1 HERO PORTADA · diseño C ------------------------- */
.hm-hero{
min-height:min(calc(100svh - var(--top-h,76px) - 148px), 566px) !important;
display:flex !important; align-items:flex-end !important;
}
.hm-hero::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(100deg,
rgba(7,32,25,.95) 0%, rgba(7,32,25,.86) 30%,
rgba(7,32,25,.34) 66%, rgba(7,32,25,.20) 82%, rgba(7,32,25,.52) 100%);
}
.hm-hero > img, .hm-hero .pp-fade{ filter:saturate(1.03) contrast(1.03); }
.hm-hero-in{ position:relative; z-index:2; width:100%; padding-block:0 3.05rem !important; }
.hm-hero-in::before{
content:""; display:block; width:54px; height:3px;
background:var(--pp-oro); margin-bottom:1.2rem;
}
.hm-hero .pp-slogan{
display:block; margin-bottom:.55rem !important;
font:700 .72rem/1 Montserrat,system-ui,sans-serif !important;
letter-spacing:.34em !important; text-transform:uppercase !important;
color:var(--pp-oro) !important;
}
.hm-hero h1{
color:#F4EFE3 !important;
font-size:clamp(2.15rem,.85rem + 2.85vw,3.3rem) !important;
line-height:1.08 !important; letter-spacing:-.02em;
max-width:21ch !important; margin:0 0 1.05rem !important;
text-shadow:0 2px 26px rgba(0,0,0,.34);
}
.hm-hero h1 em{ font-style:normal !important; color:#E2C766 !important; }
.hm-hero .hm-lead{
color:rgba(244,239,227,.92) !important; max-width:53ch !important;
font-size:1.02rem !important; line-height:1.68 !important;
margin-bottom:0 !important; text-shadow:0 1px 14px rgba(0,0,0,.3);
}
.hm-hero .hm-acts{ margin-top:1.75rem !important; }
.hm-hero .hm-btn-verde{
background:transparent !important; border:1px solid rgba(244,239,227,.45) !important;
color:#F4EFE3 !important;
}
.hm-hero .hm-btn-verde:hover{ background:rgba(244,239,227,.13) !important; }
.hm-hero .hm-puno{ margin-top:1.15rem !important; display:inline-flex !important; }
.hm-hero .hm-puno p{ display:none !important; }
.hm-hero .hm-puno-b{
background:transparent !important; border:1px solid rgba(244,239,227,.4) !important;
color:#F4EFE3 !important;
}
.pp-hcerts{
position:absolute; z-index:3; right:clamp(1.2rem,4.2vw,3rem); bottom:3.05rem;
display:flex; flex-direction:column; gap:.55rem; align-items:flex-end;
}
.pp-hcerts span{
font:600 .70rem/1 Montserrat,system-ui,sans-serif;
letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
color:rgba(244,239,227,.95);
background:rgba(7,32,25,.52); border:1px solid rgba(213,181,72,.42);
border-radius:999px; padding:.52rem .95rem;
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
@media (max-width:1080px){ .pp-hcerts{ display:none; } }
/* ---- 13.2 LEGIBILIDAD Y SEPARACIÓN EN FONDOS CLAROS ------- */
:root{ --tx:#101a13; --tx-2:#39483d; --tx-3:#5a6a5e; --line:#cfdbd3; }
.px-sec, .hm-sec{ padding-block:clamp(3.2rem,5vw,5.2rem) !important; }
.pg-hero + .px-sec{ padding-top:clamp(2.2rem,3.2vw,3.2rem) !important; }
main:not(.hm) > .px-sec:not(.px-sec-dark):nth-of-type(even){ background:#f1f5f2; }
main:not(.hm) > .px-sec + .px-sec:not(.px-sec-dark){ border-top:1px solid var(--line); }
main:not(.hm) .px-head{ padding-top:.2rem; }
main:not(.hm) .px-eyebrow{ color:var(--oro-3) !important; }
/* ---- 13.3 PREGUNTAS FRECUENTES ---------------------------- */
.px-faq{ gap:.9rem 1.6rem !important; }
.px-faq details{
border:1px solid #cfdbd3 !important; background:#fff !important;
border-radius:12px !important; padding-inline:1.35rem !important;
box-shadow:0 2px 10px rgba(11,43,33,.045) !important;
}
.px-faq details[open]{
border-color:var(--oro) !important; background:#fdfcf8 !important;
box-shadow:0 10px 26px rgba(11,43,33,.09) !important;
}
.px-faq summary{ min-height:60px !important; font-size:.98rem !important; color:#0b2b21 !important; }
.px-faq summary::after{ color:var(--oro-3) !important; }
.px-faq p{
color:#39483d !important; font-size:.94rem !important; line-height:1.7 !important;
border-top:1px solid #e6ece7; padding-top:.9rem !important;
padding-bottom:1.25em !important; max-width:62ch !important;
}
/* ---- 13.5 PUERTOS · mapa y calculadora -------------------- */
.pt-map-w{
grid-template-columns:minmax(0,1fr) 23rem !important;
grid-template-rows:auto auto !important; min-height:0 !important;
}
.pt-map{
grid-column:1 !important; grid-row:1 !important;
height:clamp(420px,56vh,560px) !important; min-height:0 !important;
}
.pt-side{
grid-column:2 !important; grid-row:1 !important;
max-height:clamp(420px,56vh,560px) !important; overflow:auto !important;
padding:1.4rem 1.4rem 1.6rem !important;
}
.pt-calc-in{
grid-column:1 / -1 !important; grid-row:2 !important;
background:#F4EFE3 !important; color:#14170f !important;
margin:0 !important; overflow:visible !important;
border-top:3px solid var(--oro) !important;
padding:clamp(1.3rem,2.4vw,1.9rem) !important;
}
.pt-calc-in h3{
margin:0 0 1.1rem !important; color:#0b2b21 !important;
font:700 1.18rem/1.25 var(--sans) !important;
letter-spacing:-.01em !important; text-transform:none !important;
}
.pt-calc-in .pt-calc{
display:grid !important; grid-template-columns:minmax(0,21rem) minmax(0,1fr) !important;
gap:1.4rem !important; align-items:start !important; padding:0 !important;
}
.pt-calc-in .pt-ctl{
background:#0b2b21 !important; padding:1.3rem !important;
border-radius:14px !important; gap:.85rem !important;
}
.pt-calc-in select, .pt-calc-in input{ font-size:.92rem !important; }
.pt-calc-in .pt-out{
margin-top:0 !important; background:#fff !important;
border:1px solid #cfdbd3 !important; border-left:3px solid var(--oro) !important;
border-radius:14px !important; padding:1.2rem 1.4rem !important;
}
.pt-calc-in .pt-out *{ color:#14170f !important; }
.pt-calc-in .pt-r span{ color:#39483d !important; }
.pt-calc-in .pt-r b{ color:#0b2b21 !important; }
.pt-calc-in .pt-r em{ color:var(--oro-3) !important; background:#fbf3e0 !important; }
.pt-calc-in .pt-r small{ color:#5a6a5e !important; }
.pt-calc-in .pt-tot b{ color:#0a5c41 !important; }
.pt-calc-in .pt-bd summary{ color:#0a5c41 !important; }
.pt-calc-in .pt-bd li{ color:#39483d !important; }
.pt-calc-in .pt-bd li b{ color:#0b2b21 !important; }
.pt-calc-in .pt-disc{ display:none !important; }
.pt-calc-sec{ display:block !important; background:#eef3f0 !important; padding-block:1.4rem 1.7rem !important; border-top:0 !important; }
.pt-calc-sec .hm-head{ display:none !important; }
.pt-calc-sec .pt-disc{ margin:0 !important; font-size:.8rem !important; color:#5a6a5e !important; line-height:1.6 !important; }
@media (max-width:980px){
.pt-map-w{ grid-template-columns:1fr !important; }
.pt-map{ grid-column:1 !important; grid-row:1 !important; height:clamp(320px,46vh,420px) !important; }
.pt-side{ grid-column:1 !important; grid-row:2 !important; max-height:none !important; }
.pt-calc-in{ grid-column:1 !important; grid-row:3 !important; }
.pt-calc-in .pt-calc{ grid-template-columns:1fr !important; }
}
@media (max-width:760px){
.hm-hero{ min-height:min(calc(100svh - var(--top-h,64px) - 120px), 470px) !important; }
.hm-hero::after{
background:linear-gradient(180deg,rgba(7,32,25,.55) 0%,rgba(7,32,25,.70) 42%,rgba(7,32,25,.95) 100%);
}
.hm-hero-in{ padding-block:0 2rem !important; }
.hm-hero-in::before{ width:42px; margin-bottom:.9rem; }
.hm-hero h1{ max-width:none !important; font-size:clamp(1.85rem,1.1rem + 3.4vw,2.35rem) !important; }
.hm-hero .hm-lead{ font-size:.95rem !important; line-height:1.6 !important; }
.hm-hero .hm-acts{ margin-top:1.3rem !important; }
.px-faq{ grid-template-columns:1fr !important; }
.px-sec, .hm-sec{ padding-block:clamp(2.4rem,6vw,3.4rem) !important; }
}
/* ajustes finales 13.6 */
main:not(.hm) .pt-calc-sec .hm-head{ display:none !important; }
.pt-side::after{
content:"Pulse cualquier puerto o aeropuerto del mapa para ver su ficha: tránsito, frecuencia y flete de referencia desde el Callao.";
display:block; margin-top:1.3rem; padding-top:1.1rem;
border-top:1px solid rgba(255,255,255,.14);
font:500 .82rem/1.55 var(--sans); color:#a9bfae;
}
/* ---- 13.7 ACCESO A LA RED (demo) ------------------------- */
.pp-top-enter:not([disabled]), .ac-btn:not([disabled]){ opacity:1 !important; cursor:pointer !important; }
.pp-top-enter:not([disabled]):hover{ background:var(--pp-oro) !important; color:#14241b !important; }
.ac-btn:not([disabled]):hover{ background:#0a5c41 !important; }
.px-field.pp-pw{ position:relative; }
.px-field.pp-pw input{ padding-right:2.5rem !important; }
.pp-eye{
position:absolute; right:.35rem; bottom:.15rem;
width:2rem; height:2rem; display:grid; place-items:center;
border:0; background:transparent; padding:0; cursor:pointer; color:#7d8a81;
}
.pp-eye svg{ width:18px; height:18px; }
.pp-eye:hover{ color:var(--pp-verde); }
.pp-login-err{
margin:.6rem 0 0 !important;
font:600 .78rem/1.45 Montserrat,system-ui,sans-serif !important;
color:#b32338 !important;
}
.pp-login-err[hidden]{ display:none !important; }
@keyframes pp-shake{
10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}
}
.pp-top-panel.is-err, .ac-box.is-err{ animation:pp-shake .4s ease; }
/* ---- 13.8 HABLEMOS · tira de contacto ejecutiva ----------- */
.pp-strip{
grid-template-columns:repeat(4,1fr) !important; gap:0 !important;
background:linear-gradient(180deg,#0e3327 0%,#0b2b21 100%) !important;
border:1px solid rgba(213,181,72,.26) !important;
border-radius:14px !important; padding:1.15rem 0 !important;
margin-bottom:1.7rem !important;
}
.pp-strip > div{ padding:.1rem 1.5rem; border-left:1px solid rgba(255,255,255,.10); }
.pp-strip > div:first-child{ border-left:0; }
.pp-strip .px-h4{
display:block !important; margin:0 0 .45rem !important;
color:rgba(244,239,227,.52) !important;
font:600 .63rem/1 Montserrat,system-ui,sans-serif !important;
letter-spacing:.16em !important; text-transform:uppercase !important;
}
.pp-strip p{
margin:0 !important; color:#F4EFE3 !important;
font:600 .95rem/1.42 Montserrat,system-ui,sans-serif !important;
}
.pp-strip a{
color:#F4EFE3 !important; text-decoration:none !important;
border-bottom:1px solid rgba(213,181,72,.5); padding-bottom:1px;
}
.pp-strip a:hover{ color:#E2C766 !important; border-bottom-color:#E2C766; }
.pp-strip > div:nth-child(3) p, .pp-strip > div:nth-child(4) p{
font-weight:500 !important; font-size:.87rem !important;
color:rgba(244,239,227,.85) !important;
}
/* ---- 13.9 HABLEMOS · dos formularios simétricos ----------- */
.pp-forms{ gap:2rem !important; align-items:stretch !important; }
.pp-fcard{
display:flex !important; flex-direction:column;
background:#fff !important; border:1px solid #d9e0da !important;
border-top:3px solid var(--pp-oro) !important;
border-radius:14px !important;
padding:1.3rem 1.35rem 1.25rem !important;
box-shadow:0 6px 22px rgba(20,36,27,.06) !important;
}
.pp-fcard.is-prov{ background:#fff !important; border-color:#d9e0da !important; border-top-color:var(--pp-verde) !important; }
.pp-fcard h2{ font-size:1.12rem !important; margin:0 0 .25rem !important; }
.pp-fcard .pp-sub{
margin:0 0 1rem !important; font-size:.84rem !important;
padding-bottom:.85rem; border-bottom:1px solid #edefea;
}
.pp-fcard .px-form{ display:flex !important; flex-direction:column; flex:1 1 auto; }
.pp-fcard .px-fields{ gap:.6rem .8rem !important; max-height:none !important; overflow:visible !important; }
.pp-fcard .px-lab{ font-size:.72rem !important; }
.pp-fcard .px-field input, .pp-fcard .px-field select{ padding:.46rem .7rem !important; font-size:.87rem !important; }
.pp-fcard .px-field textarea{ min-height:82px !important; font-size:.87rem !important; }
.pp-fcard .px-btn, .pp-fcard button[type=submit]{ margin-top:auto !important; }
.pp-fcard .ct-note, .pp-fcard .px-form > p:last-child{ font-size:.76rem !important; }
/* ---- 13.10 AVISO "MENSAJE ENVIADO" ------------------------ */
.pp-sent{
display:none; align-items:center; gap:.6rem;
margin:.85rem 0 0 !important; padding:.72rem .95rem;
background:#e8f4ee; border:1px solid #9ecbb4; border-left:3px solid #0a5c41;
border-radius:10px; color:#0a5c41 !important;
font:600 .85rem/1.4 Montserrat,system-ui,sans-serif !important;
}
.pp-sent.is-on{ display:flex; animation:pp-in .35s ease; }
.pp-sent svg{ width:17px; height:17px; flex:0 0 auto; }
@keyframes pp-in{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
#pp-sink{ position:absolute !important; width:0 !important; height:0 !important; border:0 !important; left:-9999px !important; }
@media (max-width:860px){
.pp-strip{ grid-template-columns:1fr 1fr !important; gap:.9rem 0 !important; padding:1rem 0 !important; }
.pp-strip > div{ padding:.1rem 1rem; }
.pp-strip > div:nth-child(3){ border-left:0; }
.pp-strip p{ font-size:.86rem !important; }
.pp-forms{ gap:1.3rem !important; }
}
@media (max-width:560px){
.pp-strip{ grid-template-columns:1fr !important; }
.pp-strip > div{ border-left:0; padding-block:.35rem; }
}
/* 13.11 · botones de los dos formularios, alineados abajo y simétricos */
.pp-fcard .px-form-acts, .pp-fcard .pp-send{ margin-top:auto !important; padding-top:1rem !important; }
.pp-fcard .px-form-acts .px-btn,
.pp-fcard .pp-send .hm-btn{
display:flex !important; width:100% !important;
justify-content:center !important; text-align:center !important;
}
.pp-fcard .px-nota{ margin:.6rem 0 0 !important; font-size:.75rem !important; }
/* ===========================================================
14 · DOCUMENTACIÓN — rediseño integral (01/10/2026)
Dos mitades con fondo distinto: la herramienta en claro,
la normativa en verde profundo.
=========================================================== */
/* 14.1 · la barra de selección, arriba y horizontal ---------- */
#documentacion{ background:#eef3f0 !important; }
.px-sec.px-sec-alt:has(.dk){ background:#eef3f0 !important; }
.dk{ display:grid !important; grid-template-columns:1fr !important; gap:1.4rem !important; }
.dk-ctl{
position:static !important;
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:.85rem 1.1rem !important; align-items:end !important;
background:linear-gradient(180deg,#0e3327 0%,#0b2b21 100%) !important;
border:1px solid rgba(213,181,72,.26) !important;
border-radius:14px !important;
padding:1.15rem 1.3rem 1.2rem !important;
}
.dk-ctl label{
color:rgba(244,239,227,.55) !important;
font:600 .64rem/1 Montserrat,system-ui,sans-serif !important;
letter-spacing:.15em !important; gap:.4rem !important;
}
.dk-ctl select{
min-height:42px !important; border-radius:9px !important;
background:rgba(255,255,255,.07) !important;
border:1px solid rgba(255,255,255,.22) !important;
font-size:.9rem !important;
}
.dk-acts{
grid-column:1 / -1 !important;
display:flex !important; justify-content:flex-end; gap:.7rem !important;
margin-top:.55rem !important; padding-top:.95rem !important;
border-top:1px solid rgba(255,255,255,.13) !important;
}
.dk-print{ min-height:40px !important; padding:0 1.1rem; font-size:.82rem !important; }
.dk-acts .px-btn{ min-height:40px; padding:0 1.3rem; font-size:.82rem !important; }
/* 14.2 · cabecera del resultado ------------------------------ */
.dk-res{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.dk-lead{
margin:0 0 1.1rem !important; padding:.95rem 1.2rem !important;
background:#fff !important; border:1px solid #d9e2db !important;
border-left:4px solid var(--pp-oro) !important; border-radius:11px !important;
font:500 .98rem/1.5 Montserrat,system-ui,sans-serif !important;
color:#14241b !important;
}
.dk-lead b{ color:#0b2b21 !important; font-weight:700 !important; }
.dk-lead b:first-child{ color:#0a5c41 !important; }
/* 14.3 · leyenda de responsables ----------------------------- */
.dk-leg{
display:flex; flex-wrap:wrap; gap:.45rem .9rem;
margin:0 0 .9rem; padding:0 .2rem;
}
.dk-leg span{
display:inline-flex; align-items:center; gap:.42rem;
font:600 .70rem/1 Montserrat,system-ui,sans-serif;
letter-spacing:.04em; color:#4b5a4f;
}
.dk-leg i{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.dk-leg .c-punex{ background:#C8A33F; }
.dk-leg .c-op{ background:#0a5c41; }
.dk-leg .c-of{ background:#2f5aa8; }
.dk-leg .c-lab{ background:#8a5a9e; }
/* 14.4 · los documentos, en rejilla de dos ------------------- */
.dk-list{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:.75rem !important; align-items:stretch !important;
}
.dk-list li{
display:grid !important; grid-template-columns:2.1rem minmax(0,1fr) !important;
gap:.85rem !important; align-items:start !important;
background:#fff !important; border:1px solid #dde5df !important;
border-left:3px solid #c3cfc7 !important;
border-top:0 !important; border-radius:11px !important;
padding:.95rem 1.1rem !important;
box-shadow:0 1px 3px rgba(11,43,33,.045) !important;
}
.dk-n{
font:700 .8rem/1.6 Montserrat,system-ui,sans-serif !important;
color:#9aa89f !important; letter-spacing:.02em;
}
.dk-list b{
display:block !important; font:700 .97rem/1.32 Montserrat,system-ui,sans-serif !important;
color:#0b2b21 !important; margin-bottom:.4rem !important;
}
.dk-list em{
display:inline-block !important; font-style:normal !important;
font:700 .63rem/1 Montserrat,system-ui,sans-serif !important;
letter-spacing:.09em !important; text-transform:uppercase !important;
border-radius:4px !important; padding:.32rem .5rem !important;
background:#eef2ef !important; border:0 !important; color:#4b5a4f !important;
margin-bottom:.5rem !important;
}
.dk-list p{
margin:0 !important; color:#44524a !important;
font:400 .875rem/1.58 Montserrat,system-ui,sans-serif !important;
}
/* color por responsable */
.dk-list li.is-punex{ border-left-color:#C8A33F !important; }
.dk-list li.is-punex em{ background:#fbf3e0 !important; color:#8a6a10 !important; }
.dk-list li.is-op{ border-left-color:#0a5c41 !important; }
.dk-list li.is-op em{ background:#e6f1eb !important; color:#0a5c41 !important; }
.dk-list li.is-of{ border-left-color:#2f5aa8 !important; }
.dk-list li.is-of em{ background:#e8eef8 !important; color:#2a4d8f !important; }
.dk-list li.is-lab{ border-left-color:#8a5a9e !important; }
.dk-list li.is-lab em{ background:#f2eaf5 !important; color:#6f4680 !important; }
/* 14.5 · normativa que aplica a este envío ------------------- */
.dk-rel{ margin-top:1.5rem !important; padding-top:1.3rem !important; border-top:1px solid #d5ded8 !important; }
.dk-rel h4{
color:#0b2b21 !important; font:700 .7rem/1 Montserrat,system-ui,sans-serif !important;
letter-spacing:.15em !important; margin:0 0 .75rem !important;
}
.dk-rel ul{ gap:.6rem !important; }
.dk-rel a{
background:#fff !important; border:1px solid #dde5df !important;
border-left:3px solid var(--pp-oro) !important; border-radius:10px !important;
padding:.8rem 1rem !important;
}
.dk-rel a b{ font:700 .89rem/1.35 Montserrat,system-ui,sans-serif !important; color:#0b2b21 !important; }
.dk-rel a span{ font-size:.77rem !important; color:#5a6a5e !important; }
.dk-note{
margin:1.3rem 0 0 !important; padding:.8rem 1rem !important;
background:#e5ebe7 !important; border-radius:9px !important;
font:500 .8rem/1.55 Montserrat,system-ui,sans-serif !important; color:#4b5a4f !important;
border:0 !important;
}
/* 14.6 · NORMATIVA · sección en verde profundo --------------- */
#normativa{
background:linear-gradient(180deg,#0b2b21 0%,#072019 100%) !important;
color:#F4EFE3 !important; border-top:0 !important;
}
#normativa .px-num{ color:var(--pp-oro) !important; }
#normativa .px-eyebrow{ color:rgba(244,239,227,.55) !important; }
#normativa h2{ color:#F4EFE3 !important; }
#normativa .px-lead{ color:rgba(244,239,227,.78) !important; }
#normativa .px-relojes-list{
list-style:none; margin:0; padding:0;
display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:.85rem !important;
}
#normativa .px-relojes-list li{
background:rgba(255,255,255,.05) !important;
border:1px solid rgba(255,255,255,.13) !important;
border-left:3px solid rgba(213,181,72,.55) !important;
border-radius:12px !important; padding:1.1rem 1.2rem 1.15rem !important;
margin:0 !important;
}
#normativa .px-reloj-h{
display:block !important; margin:0 0 .6rem !important;
border:0 !important; padding:0 !important;
}
#normativa .px-reloj-h b{
display:block !important; margin-bottom:.45rem !important;
font:700 1rem/1.3 Montserrat,system-ui,sans-serif !important;
color:#F4EFE3 !important; letter-spacing:-.005em;
}
#normativa .px-fecha{
display:inline-block !important;
font:700 .62rem/1 Montserrat,system-ui,sans-serif !important;
letter-spacing:.09em !important; text-transform:uppercase !important;
background:rgba(213,181,72,.16) !important; color:#E2C766 !important;
border:1px solid rgba(213,181,72,.34) !important;
border-radius:4px !important; padding:.33rem .55rem !important;
}
#normativa .px-reloj-n{
margin:0 0 .6rem !important; padding:.5rem .7rem !important;
background:rgba(0,0,0,.26) !important; border-radius:7px !important;
font:500 .76rem/1.4 "IBM Plex Mono",ui-monospace,monospace !important;
color:#E2C766 !important; border:0 !important;
}
#normativa .px-relojes-list li > p:last-child{
margin:0 !important; color:rgba(244,239,227,.76) !important;
font:400 .865rem/1.6 Montserrat,system-ui,sans-serif !important;
}
@media (max-width:980px){
.dk-ctl{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.dk-list{ grid-template-columns:1fr !important; }
#normativa .px-relojes-list{ grid-template-columns:1fr !important; }
}
@media (max-width:620px){
.dk-ctl{ grid-template-columns:1fr !important; }
.dk-acts{ flex-direction:column; }
.dk-acts .px-btn, .dk-print{ width:100%; justify-content:center; }
}
/* 14.7 · correcciones de ancho y leyenda -------------------- */
.dk-lead, .dk-note{ max-width:none !important; }
#normativa .px-relojes-list{ max-width:none !important; }
.dk-leg{
margin:0 0 1rem !important; padding:.6rem .9rem !important;
background:#e5ebe7; border-radius:9px;
gap:.5rem 1.2rem !important;
}
.dk-leg span{ font-size:.715rem !important; color:#44524a; }
.dk-rel a b{ font-family:Montserrat,system-ui,sans-serif !important; }
/* ===========================================================
15 · CABECERA — corregido el desbordamiento horizontal
El menú + Acceso + ES/EN se salían del ancho en todas las
pantallas y provocaban barra de scroll lateral en toda la web.
=========================================================== */
html, body{ max-width:100%; }
.px-top-in{ gap:.9rem !important; flex-wrap:nowrap !important; }
.px-logo{ flex:0 0 auto; }
.px-nav{ min-width:0 !important; }
.px-nav ul{ flex-wrap:nowrap !important; gap:clamp(.6rem,1.15vw,1.45rem) !important; }
.px-nav li:not(.px-nav-cta) a{
font-size:clamp(.775rem,.60rem + .26vw,.875rem) !important;
white-space:nowrap !important;
}
.px-nav .px-nav-cta{ margin-left:auto !important; flex:0 0 auto; }
.px-nav .px-nav-cta a{
padding:.5em 1.05em !important; font-size:.8rem !important; white-space:nowrap;
}
.pp-top-acc{ flex:0 0 auto; margin-right:.2rem !important; }
.pp-top-b{ height:32px !important; padding:0 .72rem !important; font-size:.76rem !important; white-space:nowrap; }
.px-lang{ flex:0 0 auto; margin-left:.45rem !important; }
.px-lang a{ min-height:32px !important; padding:0 .62em !important; font-size:.72rem !important; }
@media (min-width:1120px) and (max-width:1339px){
.px-nav ul > li:first-child{ display:none !important; } /* "Inicio" lo hace el logo */
}
@media (min-width:1120px) and (max-width:1219px){
.pp-top-b span{ display:none !important; } /* solo el candado */
.pp-top-b{ padding:0 .55rem !important; }
.px-lang a[aria-current]{ display:none !important; } /* solo el otro idioma */
.px-nav .px-nav-cta a{ padding:.5em .85em !important; font-size:.76rem !important; }
}
/* 15.1 · el botón de oferta ya no se solapa con Acceso ------ */
.px-nav{ flex:1 1 auto !important; }
.px-nav ul{ width:100% !important; justify-content:flex-start !important; }
.px-nav ul > li:first-child{ margin-left:auto !important; }
.px-nav .px-nav-cta{ margin-left:.75rem !important; }
@media (min-width:1120px) and (max-width:1339px){
.px-nav ul > li:first-child{ display:none !important; }
.px-nav ul > li:nth-child(2){ margin-left:auto !important; }
}
/* 15.2 · el menú cabe sin pisar nada ------------------------- */
.px-nav ul{ gap:clamp(.48rem,.80vw,1.05rem) !important; }
.px-nav li:not(.px-nav-cta) a{
font-size:clamp(.745rem,.60rem + .20vw,.845rem) !important;
letter-spacing:0 !important;
}
.px-nav .px-nav-cta a{ padding:.5em .95em !important; font-size:.775rem !important; }
@media (min-width:1120px){
.px-nav ul > li:first-child{ display:none !important; } /* Inicio = el logotipo */
.px-nav ul > li:nth-child(2){ margin-left:auto !important; }
}
/* 15.3 · medidas fijas: el contenedor deja de crecer en 1280px */
@media (min-width:1120px){
.px-nav ul{ gap:.60rem !important; }
.px-nav li:not(.px-nav-cta) a{ font-size:.795rem !important; }
.px-nav .px-nav-cta a{ padding:.5em .9em !important; font-size:.765rem !important; }
}
/* 15.4 · cabecera compacta: candado sin texto y un solo idioma */
@media (min-width:1120px){
.pp-top-b span{ display:none !important; }
.pp-top-b{ width:34px; padding:0 !important; justify-content:center; border-radius:999px; }
.pp-top-b svg{ width:15px; height:15px; }
.px-lang a[aria-current]{ display:none !important; }
.px-lang{ margin-left:.35rem !important; }
.px-nav ul{ gap:.66rem !important; }
.px-nav li:not(.px-nav-cta) a{ font-size:.81rem !important; }
}
/* 15.5 · tramo 1120–1279: el contenedor es más estrecho ------ */
@media (min-width:1120px) and (max-width:1279px){
.px-nav ul{ gap:.40rem !important; }
.px-nav li:not(.px-nav-cta) a{ font-size:.74rem !important; }
.px-nav .px-nav-cta a{ padding:.5em .78em !important; font-size:.73rem !important; }
.px-nav .px-nav-cta{ margin-left:.5rem !important; }
}
/* 15.6 · móvil: el resultado del flete se partía letra a letra */
@media (max-width:700px){
.pt-calc-in .pt-r{ grid-template-columns:minmax(0,1fr) !important; gap:.3rem !important; }
.pt-calc-in .pt-r span{ font-size:.86rem !important; }
.pt-calc-in .pt-r b{ text-align:left !important; font-size:1.15rem !important; }
.pt-calc-in .pt-tot b{ font-size:1.6rem !important; line-height:1.1 !important; }
.pt-calc-in .pt-out{ padding:1rem 1.1rem !important; }
}
/* 15.7 · mercado: el bloque crema tras el nombre rompía la fila */
.mk-f-t{ background:transparent !important; padding:0 !important; }
.mk-f summary{ padding:.8rem 1.1rem !important; gap:.95rem !important; }
.mk-f-t b{ margin-bottom:.15rem; }
/* ===========================================================
16 · CATÁLOGO — tarjetas a su tamaño
La ficha ocupaba 400 px de alto por una foto y tres líneas.
=========================================================== */
@media (min-width:1200px){
.cx-store .cx-list, .cx-sec .cx-list, .cx-list{
grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:.75rem !important; }
}
@media (min-width:900px) and (max-width:1199px){
.cx-store .cx-list, .cx-sec .cx-list, .cx-list{
grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:.7rem !important; }
}
@media (min-width:620px) and (max-width:899px){
.cx-store .cx-list, .cx-sec .cx-list, .cx-list{
grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:.65rem !important; }
}
.cx-card{ border-radius:11px !important; }
.cx-media{ aspect-ratio:4 / 3 !important; height:auto !important; }
.cx-media img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.cx-body{ padding:.75rem .85rem .85rem !important; }
.cx-body h3{ font-size:.92rem !important; line-height:1.28 !important; margin:0 0 .15rem !important; }
.cx-body .cx-sci, .cx-card em{ font-size:.75rem !important; }
.cx-card a.cx-more, .cx-body a{ font-size:.8rem !important; }
/* ===========================================================
17 · EMPRESA — el eslogan en lugar de la cita
=========================================================== */
.px-founder blockquote.pp-slogan-emp{
margin:0 0 1.1rem !important; padding:0 0 1.1rem !important;
border:0 !important; border-bottom:1px solid var(--pp-linea) !important;
font:800 clamp(1.75rem,1.1rem + 1.9vw,2.6rem)/1.05 Montserrat,system-ui,sans-serif !important;
letter-spacing:-.025em !important; color:var(--pp-verde) !important;
quotes:none !important; font-style:normal !important;
}
.px-founder blockquote.pp-slogan-emp::before,
.px-founder blockquote.pp-slogan-emp::after{ content:none !important; }
/* ===========================================================
18 · MÓVIL — todo más compacto
El móvil heredaba las medidas del escritorio y cada pantalla
ocupaba el doble de lo necesario.
=========================================================== */
@media (max-width:760px){
html{ font-size:15px; }
/* ritmo general */
.px-sec, .hm-sec{ padding-block:1.85rem !important; }
.pg-hero + .px-sec{ padding-top:1.4rem !important; }
.px-sec > .px-wrap > header, .hm-head{ margin-bottom:1rem !important; }
/* cabeceras de página */
.hm-hero{ min-height:min(calc(100svh - var(--top-h,60px) - 110px), 400px) !important; }
.hm-hero-in{ padding-block:0 1.5rem !important; }
.hm-hero h1{ font-size:1.72rem !important; line-height:1.14 !important; margin-bottom:.7rem !important; }
.hm-hero .hm-lead{ font-size:.88rem !important; line-height:1.55 !important; }
.hm-hero .hm-acts{ margin-top:1rem !important; gap:.5rem !important; }
.hm-hero .hm-puno{ margin-top:.75rem !important; }
.pg-hero .px-wrap{ min-height:92px !important; padding-block:.6rem .75rem !important; }
.pg-hero h1{ font-size:1.55rem !important; line-height:1.12 !important; }
.pg-hero p{ font-size:.86rem !important; line-height:1.5 !important; margin-top:.5rem !important; }
.pg-k, .hm-k, .px-eyebrow{ font-size:.6rem !important; }
/* títulos */
h2, .px-head-r h2, .hm-head h2{ font-size:1.42rem !important; line-height:1.14 !important; }
h3{ font-size:1rem !important; }
.px-lead{ font-size:.89rem !important; line-height:1.55 !important; }
/* botones: compactos pero táctiles */
.px-btn, .hm-btn, .ac-btn, .dk-print, button[type=submit]{
min-height:44px !important; padding-block:0 !important;
font-size:.84rem !important;
}
/* catálogo: dos fichas por fila */
.cx-store .cx-list, .cx-sec .cx-list, .cx-list{
grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.5rem !important;
}
.cx-card{ border-radius:9px !important; }
.cx-card .cx-media{ padding:4px 4px 0 !important; }
.cx-body{ padding:.55rem .6rem .7rem !important; }
.cx-body h3{ font-size:.8rem !important; line-height:1.25 !important; }
.cx-body .cx-sci, .cx-card em{ font-size:.68rem !important; }
.cx-body a, .cx-card a.cx-more{ font-size:.73rem !important; }
.cx-sec{ margin-bottom:1rem !important; }
/* portada: fichas de producto más bajas */
.hm-podium{ gap:.5rem !important; }
.hm-prod figure img{ aspect-ratio:4 / 3 !important; object-fit:cover; }
.hm-prod h3{ font-size:.86rem !important; }
.hm-prod .hm-sci{ font-size:.68rem !important; }
.hm-prod .hm-price{ font-size:.78rem !important; }
/* mercado: fichas en una línea */
.mk-fs{ gap:.45rem !important; }
.mk-f summary{ padding:.6rem .75rem !important; gap:.65rem !important; }
.mk-f summary img{ width:42px !important; height:42px !important; border-radius:7px !important; }
.mk-f-t b{ font-size:.87rem !important; line-height:1.25 !important; }
.mk-f-t small{ font-size:.63rem !important; }
.mk-h{ padding:.85rem 1rem !important; }
.mk-h b{ font-size:1.25rem !important; }
.mk-h p{ font-size:.8rem !important; }
.mk-n h3{ font-size:.9rem !important; }
.mk-news .mk-c{ font-size:.79rem !important; }
/* documentación */
.dk-ctl{ padding:.9rem 1rem 1rem !important; gap:.6rem !important; }
.dk-ctl select{ min-height:40px !important; font-size:.86rem !important; }
.dk-lead{ padding:.75rem .9rem !important; font-size:.88rem !important; margin-bottom:.8rem !important; }
.dk-leg{ padding:.5rem .7rem !important; gap:.35rem .8rem !important; margin-bottom:.7rem !important; }
.dk-leg span{ font-size:.66rem !important; }
.dk-list li{ padding:.72rem .85rem !important; gap:.7rem !important; grid-template-columns:1.6rem minmax(0,1fr) !important; }
.dk-list b{ font-size:.9rem !important; }
.dk-list p{ font-size:.81rem !important; line-height:1.5 !important; }
.dk-list em{ font-size:.58rem !important; padding:.26rem .42rem !important; }
#normativa .px-relojes-list li{ padding:.85rem .95rem !important; }
#normativa .px-reloj-h b{ font-size:.92rem !important; }
#normativa .px-relojes-list li > p:last-child{ font-size:.81rem !important; }
/* formularios */
.px-fields{ gap:.45rem .6rem !important; }
.px-field{ margin-bottom:.35rem !important; }
.px-lab{ font-size:.7rem !important; margin-bottom:.18rem !important; }
.px-field input, .px-field select{ min-height:40px !important; padding:.42rem .62rem !important; }
.px-field textarea{ min-height:68px !important; }
.pp-fcard{ padding:1rem 1rem 1.05rem !important; }
.pp-fcard h2{ font-size:1rem !important; }
.pp-fcard .pp-sub{ font-size:.78rem !important; margin-bottom:.75rem !important; padding-bottom:.6rem !important; }
/* puertos */
.pt-side{ padding:1rem 1.05rem 1.1rem !important; }
.pt-side h3{ font-size:1.15rem !important; }
.pt-side::after{ font-size:.76rem !important; margin-top:.9rem !important; padding-top:.85rem !important; }
.pt-calc-in{ padding:1.05rem 1rem 1.15rem !important; }
.pt-calc-in h3{ font-size:1rem !important; margin-bottom:.8rem !important; }
.pt-calc-in .pt-ctl{ padding:.95rem !important; gap:.6rem !important; }
/* empresa y preguntas */
.px-founder blockquote.pp-slogan-emp{ font-size:1.6rem !important; padding-bottom:.85rem !important; margin-bottom:.85rem !important; }
.px-founder-bio{ font-size:.86rem !important; line-height:1.6 !important; }
.px-faq summary{ min-height:50px !important; font-size:.88rem !important; }
.px-faq details{ padding-inline:1rem !important; }
.px-faq p{ font-size:.84rem !important; }
/* pie */
.px-foot{ padding-block:1.9rem 1.4rem !important; }
.px-foot-in{ gap:1.2rem !important; }
.px-foot p, .px-foot li, .px-foot a{ font-size:.82rem !important; }
}
@media (max-width:420px){
html{ font-size:14.5px; }
.cx-body h3{ font-size:.78rem !important; }
}
/* 18.1 · móvil: cabecera y fotos de catálogo más bajas ------ */
@media (max-width:760px){
:root{ --top-h:58px; }
.px-top-in{ min-height:58px !important; gap:.5rem !important; }
.px-logo img{ height:32px !important; width:auto !important; }
.px-burger{ width:40px !important; height:40px !important; }
.px-lang a{ min-height:34px !important; padding:0 .55em !important; font-size:.7rem !important; }
.pp-top-b{ height:34px !important; width:34px !important; padding:0 !important; }
.cx-media img, .cx-card .cx-media img{ aspect-ratio:4 / 3 !important; object-fit:cover !important; }
.hm-hero{ min-height:min(calc(100svh - 58px - 100px), 390px) !important; }
}
/* 18.2 · la foto del catálogo en 4:3 (ganaba una regla de .cx-store) */
.cx-store .cx-card:not(.is-open) .cx-media img,
.cx-store .cx-card .cx-media img,
.cx-media img{ aspect-ratio:4 / 3 !important; object-fit:cover !important; }
/* 18.3 · móvil: noticias de seis en seis -------------------- */
.mk-more{ display:none; }
@media (max-width:760px){
.mk-ns > .is-fold{ display:none !important; }
.mk-more{
display:block; width:100%; margin-top:.9rem;
min-height:44px; border-radius:999px; cursor:pointer;
border:1px solid var(--pp-verde); background:transparent; color:var(--pp-verde);
font:700 .84rem/1 Montserrat,system-ui,sans-serif;
}
.mk-more:hover{ background:var(--pp-verde); color:#fff; }
.mk-n{ padding:.85rem .95rem !important; }
.mk-n h3{ font-size:.88rem !important; line-height:1.3 !important; }
.mk-n p{ font-size:.79rem !important; line-height:1.5 !important; }
.mk-n-d b{ font-size:1rem !important; }
}
/* ===========================================================
19 · BANNER A TODO EL ANCHO, CON «INICIO» (01/10/2026)
El menú ocupaba la misma caja que el texto y no cabía todo.
Ahora el banner usa la pantalla entera y vuelve «Inicio».
=========================================================== */
.px-top .px-wrap, .px-top-in{
max-width:none !important;
padding-inline:clamp(1.1rem,2.6vw,2.6rem) !important;
gap:1.6rem !important;
}
.px-nav ul{ gap:1.35rem !important; }
.px-nav li:not(.px-nav-cta) a{ font-size:.835rem !important; letter-spacing:0 !important; }
.px-nav .px-nav-cta{ margin-left:1.9rem !important; }
.px-nav .px-nav-cta a{ padding:.55em 1.25em !important; font-size:.8rem !important; }
.pp-top-acc{ margin-right:0 !important; margin-left:.35rem !important; }
.px-lang{ margin-left:.55rem !important; }
@media (min-width:1120px){
.px-nav ul > li:first-child{ display:list-item !important; margin-left:0 !important; }
.px-nav ul > li:nth-child(2){ margin-left:0 !important; }
.px-nav ul{ justify-content:center !important; }
}
@media (min-width:1120px) and (max-width:1339px){
.px-top .px-wrap, .px-top-in{ gap:.9rem !important; padding-inline:1.2rem !important; }
.px-nav ul{ gap:.58rem !important; }
.px-nav li:not(.px-nav-cta) a{ font-size:.73rem !important; }
.px-nav .px-nav-cta{ margin-left:.55rem !important; }
.px-nav .px-nav-cta a{ padding:.5em .72em !important; font-size:.72rem !important; }
.px-lang{ margin-left:.3rem !important; }
.pp-top-acc{ margin-left:.25rem !important; }
}
@media (min-width:1340px) and (max-width:1519px){
.px-nav ul{ gap:1.05rem !important; }
.px-nav li:not(.px-nav-cta) a{ font-size:.805rem !important; }
}
.px-top{ border-bottom:1px solid rgba(213,181,72,.26) !important; }
/* ===========================================================
20 · EL MENÚ OCUPA LA BARRA ENTERA (01/10/2026)
«Inicio» pegado al logotipo y el resto repartido a lo ancho,
para que el logotipo no quede solo en una punta.
=========================================================== */
@media (min-width:1120px){
.px-top-in{ gap:1.1rem !important; }
.px-nav{ flex:1 1 auto !important; margin-left:.4rem !important; margin-right:.4rem !important; }
.px-nav ul{
width:100% !important;
justify-content:space-between !important;
gap:.5rem !important;
flex-wrap:nowrap !important;
}
.px-nav ul > li{ flex:0 0 auto; }
.px-nav ul > li:first-child{ margin-left:0 !important; }
.px-nav ul > li:nth-child(2){ margin-left:0 !important; }
.px-nav .px-nav-cta{ margin-left:0 !important; }
}
@media (min-width:1120px) and (max-width:1339px){
.px-top-in{ gap:.7rem !important; }
.px-nav ul{ gap:.4rem !important; }
}
/* ###########################################################
21 · REDISEÑO PIGMENTO · 04/10/2026 · SIN PUBLICAR
Capa nueva sobre todo lo anterior. Orden:
21.1 tokens · 21.2 V1 estrecha · 21.3 tipografía · 21.4 ritmo
21.5 tarjetas · 21.6 menú (2 variantes) · 21.7 banner de pigmento
(3 bordes × 2 tonos) · 21.8 portada (2 montajes) · 21.9 catálogo
(3 tarjetas) · 21.10 ficha de producto · 21.11 mercado
21.12 móvil · 21.13 comparador
Las variantes se eligen con atributos en : data-banner,
data-tono, data-portada, data-ficha, data-menu, data-serif.
Cuando Martín elija, se borran las que sobren.
########################################################### */
/* ===== 21.1 · TOKENS ======================================= */
:root{
--pg-achiote:#C14A22; --pg-cochinilla:#8E1B35; --pg-curcuma:#D9A21B; --pg-maiz:#3B1F4E;
--pg-verde:#1D4D35; --pg-oro:#D5B548; --pg-crema:#F4EFE3; --pg-tinta:#14241B;
--pg-salvia:#E4EDE6; --pg-blanco:#FFFFFF; --pg-cuerpo:#33423A; --pg-linea:#E2DCCB;
--f-tit:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--f-body:"Lora",Georgia,"Times New Roman",serif;
--f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--disp:var(--f-tit); /* los títulos dejan Instrument Serif */
--max:1120px; /* V1 estrecha */
--pad:clamp(1rem,4.45vw,4rem); /* 56-64 px de margen interior en escritorio */
--form:680px;
--pig-base:var(--pg-verde); --pig-ink:#F4EFE3; --pig:var(--pig-base);
}
html[data-serif="source"]{ --f-body:"Source Serif 4",Georgia,"Times New Roman",serif; }
[data-pig="achiote"] { --pig-base:var(--pg-achiote); --pig-ink:#FFF8EE; }
[data-pig="cochinilla"]{ --pig-base:var(--pg-cochinilla); --pig-ink:#FFF4F2; }
[data-pig="curcuma"] { --pig-base:var(--pg-curcuma); --pig-ink:var(--pg-tinta); }
[data-pig="maiz"] { --pig-base:var(--pg-maiz); --pig-ink:#F6F0FA; }
[data-pig="verde"] { --pig-base:var(--pg-verde); --pig-ink:#F4EFE3; }
[data-pig]{ --pig:var(--pig-base); }
/* tono apagado: el mismo pigmento, con un tercio de gris tierra */
html[data-tono="apagado"] [data-pig], [data-pig][data-tono="apagado"], [data-tono="apagado"] [data-pig]{
--pig:color-mix(in oklab, var(--pig-base) 64%, #6B665A);
}
html[data-tono="vivo"] [data-tono="apagado"] [data-pig]{ --pig:color-mix(in oklab, var(--pig-base) 64%, #6B665A); }
[data-tono="vivo"] [data-pig], [data-pig][data-tono="vivo"]{ --pig:var(--pig-base); }
/* ===== 21.2 · ESTRUCTURA V1 ESTRECHA ======================== */
.px-wrap:not(.px-top-in){ max-width:var(--max) !important; padding-inline:var(--pad) !important; }
/* formularios a 680 centrados (maqueta V1) */
.px-sec > .px-wrap > form.px-form,
.px-sec .px-wrap > .px-rv > form.px-form,
form.px-form:not(.pp-fcard form):not(.ct-form),
.pp-form, .sp-form{ max-width:var(--form) !important; margin-inline:auto !important; }
.px-fields{ max-width:none !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.px-field.ct-full, .px-fields > .ct-full, .px-fields .px-field.pp-wide{ grid-column:1 / -1 !important; }
form.px-form, .pp-form, .sp-form{
background:#fff !important; border:1px solid var(--pg-linea) !important;
border-top:3px solid var(--pg-oro) !important; border-radius:12px !important;
padding:1.6rem 1.7rem 1.5rem !important; box-shadow:0 2px 10px rgba(0,0,0,.06) !important;
}
.pp-fcard form.px-form{ background:none !important; border:0 !important; padding:0 !important;
box-shadow:none !important; max-width:none !important; border-radius:0 !important; }
.pp-forms, .pp-strip{ max-width:1000px !important; margin-inline:auto !important; }
.pp-narrow > .px-wrap > *, .pp-narrow > .px-wrap > .px-rv{ max-width:var(--form) !important; margin-inline:auto !important; }
.pp-narrow > .px-wrap > header, .pp-narrow > .px-wrap > .px-head, .pp-narrow > .px-wrap > .hm-head{
max-width:var(--form) !important; margin-inline:auto !important; display:block !important;
grid-template-columns:none !important; }
.px-form-acts .px-btn, .pp-send .hm-btn, .sp-form button[type=submit]{ width:100% !important; justify-content:center !important; }
/* ===== 21.3 · TIPOGRAFÍA =================================== */
body{
font-family:var(--f-body) !important; font-size:18px !important; line-height:1.55 !important;
color:var(--pg-cuerpo) !important; font-feature-settings:"kern","liga","onum";
}
/* la interfaz sigue en Montserrat: menús, botones, campos, etiquetas, tablas */
.px-top, .px-top *, .px-nav a, button, input, select, textarea, label, summary, th, small,
.px-btn, .hm-btn, .px-lab, .cx-chip, .cx-open, .cx-kick, .cx-acts, .cx-prov, .cx-badges, .px-lang,
.hm-prod, .px-foot .px-h4, .px-legal, .pp-tabbar, .pp-chips, .px-ticker, .px-certs li, .dk-leg,
.mk-row, .mk-lbl, .pp-mt th, .pp-fi-reg dt, .pp-fi-tl, .pp-cifras span, .wa-float, .pp-step-nav{
font-family:var(--f-tit);
}
/* texto de lectura: la serif, aunque una regla anterior lo hubiera fijado en Montserrat */
p, li, dd, blockquote:not(.pp-slogan-emp), figcaption,
.dk-list p, .dk-lead, .dk-note, #normativa .px-relojes-list li > p:last-child, .pp-acc-t li, .ac-vent li,
.pp-aviso, .pp-fcard .pp-sub, .px-certs-label, .mk-ins, .px-faq p, .cx-stext, .cx-note, .cx-terms,
.px-lead, .hm-head p, .pg-hero p, .hm-hero .hm-lead, .px-foot p, .pp-legal, .ac-note, .ac-in p,
.px-split-txt p, .px-founder-bio, .mk-n p, .pp-top-n, .pp-acc-n{
font-family:var(--f-body) !important; letter-spacing:0 !important;
}
.px-nav li, .px-nav li *, .px-certs li, .hm-reg li, .cx-badges li, .px-legal span, .cx-legend li,
.mk-dest li, .pp-tabbar *, .pp-chips *, .px-lang *, .px-foot-contact li, .cx-bar li, .pp-step-nav li{
font-family:var(--f-tit) !important;
}
p{ hyphens:manual; }
/* medida de línea: 65-72 caracteres */
.px-lead, .hm-head p, .pg-hero p, .hm-hero .hm-lead, .px-split-txt p, .px-founder-bio, .px-faq p,
.px-sec > .px-wrap > p, .px-rv > p, .sp-how p, .ac-in p, .mk-ins{ max-width:62ch !important; }
.px-split-txt p{ font-size:1.1rem !important; line-height:1.55 !important; }
/* títulos: Montserrat ExtraBold, tracking cerrado */
h1, h2, h3, .pg-hero h1, .hm-hero h1, .ac-in h1{
font-family:var(--f-tit) !important; font-weight:800 !important; letter-spacing:-.02em !important;
color:var(--pg-tinta);
}
.hm-hero h1 em{ font-style:normal !important; }
.hm-hero h1{ font-size:52px !important; line-height:1.04 !important; }
.pg-hero h1, .ac-in h1{ font-size:40px !important; line-height:1.08 !important; max-width:24ch !important; }
h2, main:not(.hm) .hm-head h2, main:not(.hm) .px-head h2, .px-head-r h2, .hm-head h2,
.mk-hero-band .hm-head h2{ font-size:31px !important; line-height:1.14 !important; }
h3{ font-size:22px; line-height:1.22; }
.px-sec h2 br, .hm-sec h2 br{ display:none; }
/* datos y cifras: monoespaciada */
code, .hm-price, .cx-price b, .cx-key dd, .hm-prod small, .mk-row b, .mk-kpis b, .mk-f-k b, .mk-h b,
.mk-n-d b, .pt-tot b, .pt-r b, .dk-n, .hm-rank, .cx-stats b, .px-fecha, .pp-mono, .px-reloj-n,
.pp-cifras b, .pp-mt td.n, .pp-mfig b, .mk-dest b, .pp-fi-reg dd.n, .pp-fi-price b{
font-family:var(--f-mono) !important; font-variant-numeric:tabular-nums; letter-spacing:-.01em !important;
}
/* eyebrow: filete de oro de 3 px + número de sección + rótulo */
main{ counter-reset:ppsec; }
.hm-k, .px-eyebrow, .pg-k, .ac-k{
display:inline-flex !important; align-items:center; gap:.6rem;
font:700 11px/1.2 var(--f-tit) !important; letter-spacing:.18em !important;
text-transform:uppercase !important; color:var(--pg-oro) !important;
}
.hm-k::before, .px-eyebrow::before, .pg-k::before, .ac-k::before{
content:""; flex:0 0 auto; width:26px; height:3px; background:var(--pg-oro); border-radius:1px;
}
.hm-head .hm-k::after, .px-head-l .px-eyebrow::after, .pp-ey::after{ content:none; }
.hm-head .hm-k, .pp-numbered{ counter-increment:ppsec; }
.hm-head .hm-k::before, .pp-numbered::before{
content:counter(ppsec, decimal-leading-zero); width:auto; height:auto; background:none;
padding-left:34px; font:700 11px/1 var(--f-mono);
background:linear-gradient(var(--pg-oro),var(--pg-oro)) left center / 26px 3px no-repeat;
}
.px-head-l{ display:flex !important; align-items:center; gap:.6rem; }
.px-head-l .px-num{
font:700 11px/1 var(--f-mono) !important; color:var(--pg-oro) !important; letter-spacing:.1em;
padding-left:34px; background:linear-gradient(var(--pg-oro),var(--pg-oro)) left center / 26px 3px no-repeat;
}
.px-head-l .px-eyebrow::before{ display:none; }
.hm-reg .hm-k::before, .cx-card .hm-k::before{ display:none; }
/* ===== 21.4 · RITMO DE SECCIONES =========================== */
main:not(.hm) > .px-sec:not(.px-sec-dark):nth-of-type(even){ background:transparent; }
main:not(.hm) > .px-sec + .px-sec:not(.px-sec-dark){ border-top:0 !important; }
.pp-bg-crema { background:var(--pg-crema) !important; }
.pp-bg-blanco{ background:var(--pg-blanco) !important; }
.pp-bg-salvia{ background:var(--pg-salvia) !important; }
.pp-bg-verde { background:var(--pg-verde) !important; color:#E9E4D6; }
.px-sec, .hm-sec{ padding-block:clamp(3.2rem,5vw,4.6rem) !important; }
/* sección oscura: lo que va directo sobre el verde se aclara; las tarjetas guardan su color */
.pp-bg-verde > .px-wrap > header h2, .pp-bg-verde .hm-head h2, .pp-bg-verde .px-head h2,
.pp-bg-verde > .px-wrap > h2, .pp-bg-verde .px-fotos-h h2, .pp-bg-verde .sp-how h2, .pp-bg-verde h2{ color:#F4EFE3 !important; }
.pp-bg-verde .hm-head p, .pp-bg-verde .px-lead, .pp-bg-verde > .px-wrap > p,
.pp-bg-verde > .px-wrap > header p{ color:rgba(244,239,227,.82) !important; }
.pp-bg-verde .pp-card h3, .pp-bg-verde .pp-card p{ color:inherit; }
.hm-cream{ background:var(--pg-crema) !important; }
/* ===== 21.5 · TARJETAS ===================================== */
.cx-card, .hm-prod, .px-eligen-item, .mk-n, .mk-h, .px-card, .sp-ben, .pp-card{
background:var(--pg-crema) !important; border:0 !important; border-top:3px solid var(--pg-oro) !important;
border-radius:10px !important; box-shadow:0 2px 10px rgba(0,0,0,.06) !important;
}
.pp-bg-crema .cx-card, .pp-bg-crema .hm-prod, .pp-bg-crema .px-eligen-item, .pp-bg-crema .mk-n{
background:#FBF8F1 !important; /* sobre crema, un punto más claro para que la tarjeta se lea */
}
.px-faq details{ border-top:3px solid var(--pg-oro) !important; background:var(--pg-crema) !important;
box-shadow:0 2px 10px rgba(0,0,0,.06) !important; border-left:0 !important; border-right:0 !important; border-bottom:0 !important; }
/* botones: oro para la acción principal */
.px-btn-p, .hm-btn-oro, .px-nav .px-nav-cta a, .pp-fi-acts .pp-b-oro{
background:var(--pg-oro) !important; color:var(--pg-tinta) !important; border-color:var(--pg-oro) !important;
}
/* ===== 21.6 · MENÚ · dos variantes ========================= */
/* A · barra clásica: verde profundo y filete de oro */
.px-top{ background:var(--pg-verde) !important; border-bottom:1px solid rgba(213,181,72,.38) !important; transition:none !important; }
.px-scrolled .px-top{ background:var(--pg-verde) !important; }
.px-nav li:not(.px-nav-cta) a{ color:rgba(244,239,227,.84) !important; }
.px-nav li:not(.px-nav-cta) a[aria-current="page"], .px-nav li:not(.px-nav-cta) a.is-here{ color:#fff !important; }
.px-nav li:not(.px-nav-cta) a[aria-current="page"]::after{ background:var(--pg-oro) !important; height:2px !important; }
/* B · barra con el pigmento de la sección: menú y banda son un solo bloque de color */
html[data-menu="pigmento"] .px-top{ background:var(--pig) !important; border-bottom:0 !important; }
html[data-menu="pigmento"] .px-scrolled .px-top{ background:var(--pig) !important; box-shadow:0 8px 24px -14px rgba(0,0,0,.45); }
html[data-menu="pigmento"] .px-nav li:not(.px-nav-cta) a{ color:color-mix(in srgb, var(--pig-ink) 86%, transparent) !important; }
html[data-menu="pigmento"] .px-nav li:not(.px-nav-cta) a[aria-current="page"]{ color:var(--pig-ink) !important; }
html[data-menu="pigmento"] .px-nav li:not(.px-nav-cta) a[aria-current="page"]::after,
html[data-menu="pigmento"] .px-nav li:not(.px-nav-cta) a:hover::after{ background:var(--pig-ink) !important; }
html[data-menu="pigmento"] .pp-top-b, html[data-menu="pigmento"] .px-lang a{ color:var(--pig-ink) !important; border-color:color-mix(in srgb, var(--pig-ink) 40%, transparent) !important; }
html[data-menu="pigmento"] .px-burger{ color:var(--pig-ink) !important; border-color:color-mix(in srgb, var(--pig-ink) 35%, transparent) !important; }
html[data-menu="pigmento"] body[data-pig="curcuma"] .px-logo img{ filter:brightness(0) saturate(0) opacity(.86); }
html[data-menu="pigmento"] body[data-pig="curcuma"] .px-nav .px-nav-cta a{ background:var(--pg-verde) !important; color:#F4EFE3 !important; }
html[data-menu="pigmento"] .pg-hero, html[data-menu="pigmento"] .ac-hero{ padding-top:0; }
@media (max-width:1119px){
html[data-menu="pigmento"] .px-nav{ background:var(--pig) !important; }
html[data-menu="pigmento"] .px-nav a{ color:var(--pig-ink) !important; border-bottom-color:color-mix(in srgb, var(--pig-ink) 18%, transparent) !important; }
}
/* ===== 21.7 · BANNER DE PIGMENTO =========================== */
/* tres bordes: curva suave (por defecto), ondulación marcada, borde rasgado */
:root{
--edge-h:14px;
--edge-curva:url("data:image/svg+xml;utf8,");
--edge-onda:url("data:image/svg+xml;utf8,");
--edge-rasgado:url("data:image/svg+xml;utf8,");
--edge:var(--edge-curva); --edge-size:100% var(--edge-h); --edge-rep:no-repeat;
}
html[data-banner="onda"], [data-banner="onda"] { --edge:var(--edge-onda); --edge-size:180px var(--edge-h); --edge-rep:repeat-x; }
html[data-banner="rasgado"], [data-banner="rasgado"]{ --edge:var(--edge-rasgado); --edge-size:720px 16px; --edge-rep:repeat-x; --edge-h:16px; }
html[data-banner="curva"], [data-banner="curva"] { --edge:var(--edge-curva); --edge-size:100% 14px; --edge-rep:no-repeat; --edge-h:14px; }
/* la máscara: todo el bloque, menos la franja de abajo, que toma la forma del borde */
.pp-edge, .pg-hero, .ac-hero, .hm-hero{
-webkit-mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat,
var(--edge) left bottom / var(--edge-size) var(--edge-rep);
mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat,
var(--edge) left bottom / var(--edge-size) var(--edge-rep);
}
/* banda de página interior */
.pg-hero, .ac-hero{ background:var(--pig) !important; color:var(--pig-ink) !important; position:relative; }
.pg-hero > img, .ac-hero > img{
position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
opacity:1 !important; filter:saturate(.9) contrast(1.02);
}
.pg-hero::after, .ac-hero::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(90deg,
var(--pig) 0%, color-mix(in srgb, var(--pig) 94%, transparent) 34%,
color-mix(in srgb, var(--pig) 70%, transparent) 62%,
color-mix(in srgb, var(--pig) 42%, transparent) 100%) !important;
}
.pg-hero .px-wrap{ min-height:clamp(200px,17vw,236px) !important; justify-content:center !important;
padding-block:2rem calc(2rem + var(--edge-h)) !important; }
.ac-hero{ padding-block:clamp(2.2rem,3vw,3rem) calc(clamp(2.2rem,3vw,3rem) + var(--edge-h)) !important; }
.ac-hero > .px-wrap{ position:relative; z-index:2; }
.pg-hero h1, .ac-in h1{ color:var(--pig-ink) !important; margin:.7rem 0 .5rem !important; text-shadow:none !important; }
.pg-hero p, .ac-in p{ color:color-mix(in srgb, var(--pig-ink) 88%, transparent) !important; margin-top:.3rem !important; }
.pg-hero .pg-k, .ac-hero .ac-k{ color:var(--pg-oro) !important; }
[data-pig="curcuma"] .pg-hero .pg-k, [data-pig="curcuma"] .ac-hero .ac-k{ color:var(--pg-tinta) !important; }
[data-pig="curcuma"] .pg-hero .pg-k::before, [data-pig="curcuma"] .ac-hero .ac-k::before{ background:var(--pg-tinta); }
.pg-hero + .px-sec, .pg-hero + section, .ac-hero + section{ margin-top:calc(-1 * var(--edge-h)); padding-top:calc(clamp(2.4rem,3.4vw,3.2rem) + var(--edge-h)) !important; }
/* filete de oro de 2 px bajo la banda, cuando el pigmento es oscuro */
.pp-filete, [data-pig="verde"] .pg-hero, [data-pig="maiz"] .pg-hero, [data-pig="cochinilla"] .pg-hero,
[data-pig="maiz"] .ac-hero, .hm-hero{ background-color:var(--pg-oro) !important; }
.pp-filete > img, .pp-filete::after,
[data-pig="verde"] .pg-hero > img, [data-pig="verde"] .pg-hero::after,
[data-pig="maiz"] .pg-hero > img, [data-pig="maiz"] .pg-hero::after,
[data-pig="cochinilla"] .pg-hero > img, [data-pig="cochinilla"] .pg-hero::after,
[data-pig="maiz"] .ac-hero > img, [data-pig="maiz"] .ac-hero::after,
.hm-hero > img, .hm-hero > .pp-fade, .hm-hero::after{
height:calc(100% - 2px) !important; bottom:auto !important; inset:auto !important; top:0 !important; left:0 !important; width:100% !important;
-webkit-mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat,
var(--edge) left bottom / var(--edge-size) var(--edge-rep);
mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat,
var(--edge) left bottom / var(--edge-size) var(--edge-rep);
}
/* debajo de la banda oscura, el fondo de pigmento no debe asomar entre la foto y el filete */
[data-pig="verde"] .pg-hero::before, [data-pig="maiz"] .pg-hero::before, [data-pig="cochinilla"] .pg-hero::before,
[data-pig="maiz"] .ac-hero::before{
content:""; position:absolute; left:0; top:0; width:100%; height:calc(100% - 2px); background:var(--pig); z-index:0;
-webkit-mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge) left bottom / var(--edge-size) var(--edge-rep);
mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge) left bottom / var(--edge-size) var(--edge-rep);
}
.pg-hero > img, .ac-hero > img{ z-index:0; }
/* ===== 21.8 · PORTADA · dos montajes ======================= */
.hm-hero::after{
background:linear-gradient(100deg, rgba(29,77,53,.95) 0%, rgba(29,77,53,.86) 32%,
rgba(29,77,53,.38) 66%, rgba(29,77,53,.22) 100%) !important;
}
.hm-hero-in{ padding-bottom:calc(3rem + var(--edge-h)) !important; }
.hm-hero-in::before{ display:none !important; }
.hm-hero .pp-slogan{ display:inline-flex !important; align-items:center; gap:.6rem; font:700 11px/1 var(--f-tit) !important;
letter-spacing:.18em !important; color:var(--pg-oro) !important; }
.hm-hero .pp-slogan::before{ content:""; width:26px; height:3px; background:var(--pg-oro); }
.hm-hero .pp-slogan::after{ display:none; }
.hm-hero h1{ color:#F4EFE3 !important; max-width:20ch !important; }
.hm-hero h1 em{ color:var(--pg-oro) !important; }
.pp-hcerts{ display:none !important; } /* pasan a la banda de cifras */
.hm-hero + .px-ticker{ margin-top:calc(-1 * var(--edge-h)); padding-top:calc(.5rem + var(--edge-h)) !important; }
.px-ticker, .px-certs{ background:var(--pg-verde) !important; }
.px-ticker{ border-top:0 !important; }
/* banda de cifras (mismo contenido en los dos montajes) */
.pp-cifras{ background:var(--pg-verde); color:#F4EFE3; border-bottom:1px solid rgba(213,181,72,.28); }
.pp-cifras .px-wrap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.pp-cifras div{ padding:1.15rem 1.2rem 1.2rem; border-left:1px solid rgba(244,239,227,.12); }
.pp-cifras div:first-child{ border-left:0; padding-left:0; }
.pp-cifras b{ display:block; color:var(--pg-oro); font-size:30px; line-height:1; font-weight:600; margin-bottom:.45rem; }
.pp-cifras span{ display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(244,239,227,.78); }
/* A · hero a pantalla casi completa; las cifras, debajo del hero */
html[data-portada="a"] .hm-hero{ min-height:calc(100svh - var(--top-h,76px) - 56px) !important; align-items:flex-end !important; }
html[data-portada="a"] .pp-cifras.is-top{ display:none; }
html[data-portada="b"] .pp-cifras.is-low{ display:none; }
/* B · hero corto y las cifras arriba, pegadas al menú */
html[data-portada="b"] .hm-hero{ min-height:clamp(360px,44vh,430px) !important; align-items:flex-end !important; }
html[data-portada="b"] .hm-hero h1{ font-size:46px !important; }
html[data-portada="b"] .pp-cifras.is-top{ border-bottom:0; }
html[data-portada="b"] .pp-cifras.is-top div{ padding-block:.95rem 1rem; }
html[data-portada="b"] .pp-cifras.is-top b{ font-size:26px; }
/* ===== 21.9 · CATÁLOGO · tres tarjetas ===================== */
.cx-store .cx-card.is-open{ grid-column:auto !important; }
.cx-store .cx-card .cx-open{ display:none !important; }
.cx-store .cx-card{ cursor:pointer; transition:transform .18s ease, box-shadow .18s ease !important; position:relative; }
.cx-store .cx-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(20,36,27,.12) !important; }
.cx-store .cx-card .cx-body > *{ display:none !important; }
#body .cx-store .cx-card .cx-body > h3, #body .cx-store .cx-card .cx-body > .cx-sci{ display:block !important; }
.cx-store .cx-card .cx-body h3{ font:800 1.02rem/1.25 var(--f-tit) !important; letter-spacing:-.01em !important; margin:0 !important; color:var(--pg-tinta) !important; }
.cx-store .cx-card .cx-sci{ font:italic 400 .9rem/1.3 var(--f-body) !important; color:#5a6a5e !important; margin:.15rem 0 0 !important; }
.pp-cd{ display:none; } /* el dato que añade el JS: precio y partida */
.pp-cd b{ display:block; font:600 .98rem/1.2 var(--f-mono); color:var(--pg-tinta); }
.pp-cd small{ display:block; font:500 .74rem/1.3 var(--f-mono); color:#6b776e; margin-top:.2rem; letter-spacing:.02em; }
.pp-cd-go{ display:none; }
.cx-store .cx-card .cx-media{ padding:0 !important; background:#E9E3D3 !important; }
.cx-store .cx-card .cx-badges, .cx-store .cx-card .cx-prov{ display:none !important; }
/* A · foto grande */
html[data-ficha="grande"] .cx-store .cx-list{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:1.1rem !important; }
html[data-ficha="grande"] .cx-store .cx-card{ display:flex !important; flex-direction:column; overflow:hidden; }
html[data-ficha="grande"] .cx-store .cx-card .cx-media img{ aspect-ratio:4/3 !important; border-radius:0 !important; }
html[data-ficha="grande"] .cx-store .cx-card .cx-body{ padding:.95rem 1.05rem 1.1rem !important; display:block !important; }
html[data-ficha="grande"] #body .cx-store .cx-card .cx-body > .pp-cd{ display:block !important; margin-top:.75rem; padding-top:.7rem; border-top:1px solid var(--pg-linea); }
/* B · foto pequeña en fila */
html[data-ficha="fila"] .cx-store .cx-list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.7rem 1rem !important; }
html[data-ficha="fila"] .cx-store .cx-card{ display:grid !important; grid-template-columns:96px minmax(0,1fr) auto !important; align-items:center;
gap:0 1rem; padding:.7rem 1rem .7rem .7rem !important; min-height:0; }
html[data-ficha="fila"] .cx-store .cx-card .cx-media{ width:96px; height:96px; border-radius:7px; overflow:hidden; aspect-ratio:auto !important; }
html[data-ficha="fila"] .cx-store .cx-card .cx-media img{ width:96px !important; height:96px !important; aspect-ratio:1 !important; border-radius:0 !important; }
html[data-ficha="fila"] .cx-store .cx-card .cx-body{ padding:0 !important; display:block !important; }
html[data-ficha="fila"] #body .cx-store .cx-card .cx-body > .pp-cd{ display:block !important; margin-top:.45rem; }
html[data-ficha="fila"] .pp-cd-go{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
border:1px solid var(--pg-linea); color:var(--pg-verde); }
html[data-ficha="fila"] .cx-store .cx-card:hover .pp-cd-go{ background:var(--pg-verde); color:#fff; border-color:var(--pg-verde); }
/* C · sin foto, el dato como protagonista */
html[data-ficha="dato"] .cx-store .cx-list{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:1rem !important; }
html[data-ficha="dato"] .cx-store .cx-card{ display:flex !important; flex-direction:column; padding:1.1rem 1.15rem 1.15rem !important; }
html[data-ficha="dato"] .cx-store .cx-card .cx-media{ display:none !important; }
html[data-ficha="dato"] .cx-store .cx-card .cx-body{ padding:0 !important; display:flex !important; flex-direction:column; flex:1; }
html[data-ficha="dato"] #body .cx-store .cx-card .cx-body > .cx-kick{ display:block !important; order:-1; margin-bottom:.55rem;
font:700 10.5px/1 var(--f-tit) !important; letter-spacing:.16em !important; text-transform:uppercase; color:#7b6a2a !important; }
html[data-ficha="dato"] #body .cx-store .cx-card .cx-body > .pp-cd{ display:block !important; order:3; margin-top:auto; padding-top:1rem; }
html[data-ficha="dato"] .pp-cd b{ font-size:1.5rem; font-weight:500; letter-spacing:-.02em; }
html[data-ficha="dato"] .pp-cd small{ font-size:.78rem; margin-top:.4rem; }
html[data-ficha="dato"] .pp-cd i{ display:block; font:500 .74rem/1.4 var(--f-tit); font-style:normal; color:#5a6a5e; margin-top:.55rem; padding-top:.55rem; border-top:1px dashed var(--pg-linea); }
.pp-cd i{ display:none; }
html[data-ficha="dato"] .cx-store .cx-card .cx-body h3{ font-size:1.12rem !important; }
/* cabeceras de familia: la foto toma el pigmento de la familia; el calendario sigue en verde */
.cx-sh{ background:var(--pg-verde) !important; color:#F4EFE3; }
.cx-sh::before{ background:linear-gradient(90deg, var(--pig) 0%, color-mix(in srgb, var(--pig) 78%, transparent) 45%,
color-mix(in srgb, var(--pig) 30%, transparent) 100%) !important; border-bottom:0 !important; }
.cx-sh-img{ -webkit-mask-image:none !important; mask-image:none !important; }
.cx-sh-t{ background:var(--pig); color:var(--pig-ink); margin-top:0 !important; padding:.9rem 1.2rem calc(.8rem + var(--edge-h)) !important;
-webkit-mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge) left bottom / var(--edge-size) var(--edge-rep);
mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge) left bottom / var(--edge-size) var(--edge-rep); }
.cx-sh-t h2{ color:var(--pig-ink) !important; }
.cx-sh-n{ color:var(--pg-oro) !important; font-family:var(--f-mono) !important; font-weight:500 !important; }
[data-pig="curcuma"].cx-sh .cx-sh-n, [data-pig="achiote"].cx-sh .cx-sh-n{ color:var(--pig-ink) !important; opacity:.8; }
.cx-sh .cx-cal{ padding-top:.4rem !important; }
/* ===== 21.10 · FICHA DE PRODUCTO · registro verificable ===== */
.pp-fi{ position:fixed; inset:0; z-index:1200; display:none; }
.pp-fi.is-on{ display:block; }
.pp-fi-bg{ position:absolute; inset:0; background:rgba(12,22,16,.55); backdrop-filter:blur(3px); animation:pp-in .2s ease; }
.pp-fi-box{
position:absolute; top:3vh; bottom:3vh; left:50%; transform:translateX(-50%); width:min(940px,94vw);
background:var(--pg-crema); border-radius:14px; overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.35);
animation:pp-in .25s ease; overscroll-behavior:contain;
}
.pp-fi-band{ position:relative; background:var(--pig); color:var(--pig-ink); padding:1.6rem 2rem calc(1.4rem + var(--edge-h)); }
.pp-fi-band .pg-k{ color:var(--pg-oro) !important; }
[data-pig="curcuma"].pp-fi-band .pg-k{ color:var(--pg-tinta) !important; }
[data-pig="curcuma"].pp-fi-band .pg-k::before{ background:var(--pg-tinta); }
.pp-fi-band h2{ color:var(--pig-ink) !important; font-size:34px !important; margin:.6rem 0 .1rem !important; }
.pp-fi-band .pp-fi-sci{ font:italic 400 1.05rem/1.3 var(--f-body); opacity:.86; margin:0; }
.pp-fi-x{ position:absolute; top:.9rem; right:.9rem; width:44px; height:44px; border-radius:50%; cursor:pointer;
border:1px solid color-mix(in srgb, var(--pig-ink) 35%, transparent); background:transparent; color:var(--pig-ink);
font:500 1.4rem/1 var(--f-tit); }
.pp-fi-in{ padding:1.2rem 2rem 2rem; }
.pp-fi-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.2rem; margin:0 0 1rem; }
.pp-fi-price b{ font-size:1.6rem; font-weight:500; color:var(--pg-tinta); }
.pp-fi-price span{ font:600 .8rem/1.3 var(--f-tit); color:#5a6a5e; letter-spacing:.02em; }
.pp-fi-acts{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 1.3rem; }
.pp-fi-acts a{ display:inline-flex; align-items:center; gap:.5rem; min-height:46px; padding:0 1.2rem; border-radius:999px;
font:700 .9rem/1 var(--f-tit); text-decoration:none; }
.pp-fi-acts .pp-b-oro{ background:var(--pg-oro); color:var(--pg-tinta); }
.pp-fi-acts .pp-b-ln{ border:1.5px solid var(--pg-verde); color:var(--pg-verde); background:transparent; }
.pp-fi-acts svg{ width:16px; height:16px; }
.pp-fi-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1.4rem; align-items:start; }
.pp-fi-reg{ margin:0; background:#fff; border-top:3px solid var(--pg-oro); border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.pp-fi-reg > div{ display:grid; grid-template-columns:11.5rem minmax(0,1fr); gap:.8rem; padding:.62rem 1rem; border-bottom:1px solid #EEE9DC; }
.pp-fi-reg > div:last-child{ border-bottom:0; }
.pp-fi-reg dt{ font:700 10.5px/1.5 var(--f-tit); letter-spacing:.12em; text-transform:uppercase; color:#6b776e; padding-top:.15rem; }
.pp-fi-reg dd{ margin:0; font-size:.95rem; line-height:1.45; color:var(--pg-tinta); }
.pp-fi-reg dd.nd{ font:500 .82rem/1.5 var(--f-mono) !important; color:#9a9a8c; }
.pp-fi-reg dd.n{ font-size:.86rem; }
.pp-fi-ph{ margin:0; }
.pp-fi-ph img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.pp-fi-ph figcaption{ font:500 .76rem/1.4 var(--f-tit) !important; color:#6b776e; margin-top:.45rem; }
.pp-fi-h3{ font:800 13px/1 var(--f-tit) !important; letter-spacing:.14em !important; text-transform:uppercase; color:var(--pg-verde) !important; margin:1.8rem 0 .9rem !important; }
.pp-fi-tl{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.pp-fi-tl::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:15px; height:2px;
background:repeating-linear-gradient(90deg,var(--pg-oro) 0 8px,transparent 8px 13px); }
.pp-fi-tl li{ position:relative; text-align:center; padding:0 .4rem; font-family:var(--f-tit) !important; }
.pp-fi-tl li i{ display:grid; place-items:center; width:32px; height:32px; margin:0 auto .55rem; border-radius:50%;
background:var(--pg-verde); color:var(--pg-oro); font:700 .78rem/1 var(--f-mono); font-style:normal; position:relative; }
.pp-fi-tl li b{ display:block; font:700 .86rem/1.2 var(--f-tit); color:var(--pg-tinta); }
.pp-fi-tl li span{ display:block; font:500 .74rem/1.3 var(--f-mono); color:#9a9a8c; margin-top:.2rem; }
.pp-fi-spec{ margin-top:1.6rem; }
.pp-fi-spec > summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
min-height:48px; padding:0 1rem; border-radius:10px; background:#fff; border:1px solid var(--pg-linea);
font:700 .9rem/1 var(--f-tit); color:var(--pg-verde); }
.pp-fi-spec > summary::-webkit-details-marker{ display:none; }
.pp-fi-spec > summary::after{ content:"+"; color:var(--pg-oro); font-size:1.3rem; }
.pp-fi-spec[open] > summary::after{ content:"–"; }
.pp-fi-spec .cx-spec{ display:grid !important; gap:0; margin:.6rem 0 0; background:#fff; border-radius:10px; padding:.3rem 1rem; }
.pp-fi-spec .cx-spec > div{ display:grid; grid-template-columns:11.5rem minmax(0,1fr); gap:.8rem; padding:.55rem 0; border-bottom:1px solid #EEE9DC; }
.pp-fi-spec .cx-spec > div:last-child{ border-bottom:0; }
.pp-fi-spec .cx-spec dt{ font:700 10.5px/1.5 var(--f-tit); letter-spacing:.12em; text-transform:uppercase; color:#6b776e; }
.pp-fi-spec .cx-spec dd{ margin:0; font-size:.93rem; }
.pp-fi-spec p{ font-size:.92rem; margin:.7rem 0 0; }
.pp-fi-foot{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.pp-fi-foot .cx-acts{ display:flex !important; gap:.6rem; flex-wrap:wrap; }
html.pp-noscroll, html.pp-noscroll body{ overflow:hidden !important; }
/* ===== 21.11 · MERCADO · cuatro bloques ===================== */
.pp-mk1{ background:var(--pg-verde) !important; color:#F4EFE3; }
.pp-mk1 .hm-head h2{ color:#F4EFE3 !important; }
.pp-mk1-sel{ font:600 .95rem/1.3 var(--f-tit); color:rgba(244,239,227,.8); margin:.2rem 0 1.4rem; }
.pp-mk1-sel b{ color:#fff; }
.pp-mk1-sel code{ font-size:.8rem; color:var(--pg-oro); margin-left:.4rem; }
.pp-mfigs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(244,239,227,.14);
border-top:1px solid rgba(213,181,72,.5); }
.pp-mfig{ background:var(--pg-verde); padding:1.3rem 1.4rem 1.2rem 0; }
.pp-mfig + .pp-mfig{ padding-left:1.4rem; }
.pp-mfig span{ display:block; font:700 11px/1.3 var(--f-tit); letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,227,.66); }
.pp-mfig b{ display:block; font-size:clamp(2.3rem,1.6rem + 2vw,3.4rem); line-height:1.05; font-weight:500; color:var(--pg-oro); margin:.5rem 0 .25rem; }
.pp-mfig small{ font:500 .8rem/1.3 var(--f-tit); color:rgba(244,239,227,.6); }
.pp-mfig b.mk-up{ color:#9FD6A9; } .pp-mfig b.mk-down{ color:#E9A28F; }
.pp-mk2 .mk-ms{ display:none !important; }
.pp-mk2 .mk-chart{ max-width:none !important; padding:1.3rem 1.4rem !important; border-radius:10px; border-top:3px solid var(--pg-oro) !important; }
.pp-mk2 .mk-row{ min-height:40px; padding-block:.35rem; }
.pp-mk2 .mk-track{ height:16px !important; }
.pp-mk2 .mk-track i{ background:var(--pg-curcuma) !important; }
.pp-mk2 .mk-chart svg{ max-height:none !important; }
.pp-mt-w{ overflow-x:auto; background:#fff; border-radius:10px; border-top:3px solid var(--pg-oro); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.pp-mt{ width:100%; border-collapse:collapse; font-size:.92rem; }
.pp-mt th{ text-align:left; font:700 10.5px/1.3 var(--f-tit) !important; letter-spacing:.12em; text-transform:uppercase; color:#6b776e;
padding:.85rem .9rem; border-bottom:1px solid var(--pg-linea); white-space:nowrap; background:#FBF8F1; }
.pp-mt td{ padding:.7rem .9rem; border-bottom:1px solid #EEE9DC; vertical-align:middle; }
.pp-mt td.n, .pp-mt th.n{ text-align:right; white-space:nowrap; }
.pp-mt td.n{ font-size:.86rem; }
.pp-mt tr.is-sel td{ background:#FBF3DC; }
.pp-mt tbody tr{ cursor:pointer; }
.pp-mt tbody tr:hover td{ background:#FBF8F1; }
.pp-mt .pp-mt-p{ display:flex; align-items:center; gap:.7rem; }
.pp-mt .pp-mt-p img{ width:40px; height:40px; border-radius:6px; object-fit:cover; flex:0 0 auto; }
.pp-mt .pp-mt-p b{ display:block; font:700 .92rem/1.25 var(--f-tit); color:var(--pg-tinta); }
.pp-mt .pp-mt-p small{ display:block; font:500 .74rem/1.3 var(--f-mono); color:#7b877e; }
.pp-mt .mk-up{ color:#2f7d52; } .pp-mt .mk-down{ color:#b5452c; }
.pp-mk4 > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
min-height:60px; padding:0 1.3rem; background:#fff; border-radius:10px; border-top:3px solid var(--pg-oro);
box-shadow:0 2px 10px rgba(0,0,0,.06); font:800 1.05rem/1.2 var(--f-tit); color:var(--pg-tinta); }
.pp-mk4 > summary::-webkit-details-marker{ display:none; }
.pp-mk4 > summary::after{ content:"+"; font-size:1.5rem; color:var(--pg-oro); }
.pp-mk4[open] > summary::after{ content:"–"; }
.pp-mk4-b{ padding-top:1.6rem; }
.pp-mk4-b > h3{ font-size:22px !important; margin:2rem 0 .9rem !important; }
.pp-mk4-b > h3:first-child{ margin-top:0 !important; }
.pp-mk4-b .mk-heads{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.pp-mk4-b .mk-h{ padding:1rem 1.1rem !important; }
.pp-mk4-b .mk-h b{ color:var(--pg-tinta) !important; font-size:1.25rem !important; }
.pp-mk4-b .mk-h p{ color:var(--pg-cuerpo) !important; font-size:.92rem !important; }
.pp-mk4-b .mk-h a{ font:600 .74rem/1 var(--f-tit); }
.pp-mk4-b .mk-fs{ max-width:none !important; }
.pp-mk4-b .pp-mob > summary{ display:none !important; }
.pp-mk4-b .pp-mob > .pp-mob-b{ display:block !important; padding:0 !important; }
.pp-mk4-b .pp-mob{ border:0 !important; background:none !important; }
/* ===== 21.12 · MÓVIL ======================================= */
.pp-tabbar{ display:none; }
@media (max-width:760px){
html{ font-size:16px !important; }
body{ font-size:17px !important; padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
.hm-hero h1{ font-size:34px !important; } html[data-portada="b"] .hm-hero h1{ font-size:31px !important; }
.pg-hero h1, .ac-in h1{ font-size:29px !important; }
h2, main:not(.hm) .hm-head h2, main:not(.hm) .px-head h2, .px-head-r h2, .hm-head h2{ font-size:25px !important; }
h3{ font-size:19px; }
.px-lead, .hm-head p, .pg-hero p, .hm-hero .hm-lead, .px-faq p, .px-founder-bio, .px-split-txt p,
.dk-list p, .mk-ins, .pp-aviso, .cx-terms{ font-size:17px !important; line-height:1.55 !important; }
.pg-hero .px-wrap{ min-height:150px !important; padding-block:1.4rem calc(1.4rem + var(--edge-h)) !important; }
.pp-cifras .px-wrap{ grid-template-columns:1fr 1fr; }
.pp-cifras div{ padding:.85rem .8rem; border-left:0; border-top:1px solid rgba(244,239,227,.12); }
.pp-cifras div:nth-child(-n+2){ border-top:0; }
.pp-cifras div:first-child{ padding-left:.8rem; }
.pp-cifras b{ font-size:22px; } html[data-portada="b"] .pp-cifras.is-top b{ font-size:20px; }
html[data-portada="a"] .hm-hero{ min-height:calc(100svh - 58px - 68px - 40px) !important; }
/* objetivos táctiles de 44 px */
.px-btn, .hm-btn, button, .cx-chip, .pp-chips button, summary, .px-lang a, .px-nav a{ min-height:44px; }
.px-field input, .px-field select, .px-field textarea{ min-height:46px !important; font-size:17px !important; }
/* 1 · barra fija inferior */
.pp-tabbar{
display:grid; grid-template-columns:1fr 1fr 1.35fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:1100;
background:var(--pg-verde); border-top:1px solid rgba(213,181,72,.4);
padding:6px 6px calc(6px + env(safe-area-inset-bottom)); gap:4px;
box-shadow:0 -8px 24px rgba(0,0,0,.18);
}
.pp-tabbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px;
border-radius:10px; color:#E9E4D6; text-decoration:none; font:600 11px/1.1 var(--f-tit) !important; letter-spacing:.01em; }
.pp-tabbar a svg{ width:21px; height:21px; }
.pp-tabbar a[aria-current="page"]{ color:var(--pg-oro); }
.pp-tabbar .pp-tb-cta{ background:var(--pg-oro); color:var(--pg-tinta) !important; font-weight:800 !important; font-size:12px !important; }
.pp-tabbar .pp-tb-wa svg{ color:#5FD38D; }
.wa-float{ display:none !important; }
.pn-launch, .pn-fab{ bottom:calc(76px + env(safe-area-inset-bottom)) !important; }
/* 2 · catálogo en lista */
html[data-ficha] .cx-store .cx-list{ grid-template-columns:1fr !important; gap:0 !important; }
html[data-ficha] .cx-store .cx-card{
display:grid !important; grid-template-columns:58px minmax(0,1fr) auto !important; align-items:center; gap:0 .85rem;
padding:.6rem .2rem !important; background:transparent !important; border:0 !important; border-bottom:1px solid var(--pg-linea) !important;
border-radius:0 !important; box-shadow:none !important; transform:none !important;
}
html[data-ficha] .cx-store .cx-card .cx-media{ display:block !important; width:58px; height:58px; border-radius:7px; overflow:hidden; }
html[data-ficha] .cx-store .cx-card .cx-media img{ width:58px !important; height:58px !important; aspect-ratio:1 !important; }
html[data-ficha] .cx-store .cx-card .cx-body{ padding:0 !important; display:block !important; }
html[data-ficha] #body .cx-store .cx-card .cx-body > .cx-kick{ display:none !important; }
html[data-ficha] .cx-store .cx-card .cx-body h3{ font-size:16px !important; }
html[data-ficha] .cx-store .cx-card .cx-sci{ font-size:14px !important; }
html[data-ficha] #body .cx-store .cx-card .cx-body > .pp-cd{ display:block !important; margin:.2rem 0 0 !important; padding:0 !important; border:0 !important; }
html[data-ficha] .pp-cd b{ font-size:13.5px !important; font-weight:600 !important; }
html[data-ficha] .pp-cd small, html[data-ficha] .pp-cd i{ display:none !important; }
html[data-ficha] .pp-cd-go{ display:grid !important; place-items:center; width:32px; height:44px; color:var(--pg-verde); border:0 !important; }
.cx-store .cx-sec{ margin-top:1.4rem !important; }
.cx-sh{ border-radius:10px !important; }
/* chips de familia fijos arriba */
.pp-fwrap, .pp-dl{ display:none !important; }
.pp-chips{ display:flex; gap:.4rem; overflow-x:auto; padding:.15rem 0 .65rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pp-chips::-webkit-scrollbar{ display:none; }
.pp-chips button{ flex:0 0 auto; border:1px solid var(--pg-linea); background:#fff; color:var(--pg-verde); border-radius:999px;
padding:0 .95rem; font:700 13px/1 var(--f-tit); white-space:nowrap; cursor:pointer; }
.pp-chips button.is-on{ background:var(--pg-verde); color:#fff; border-color:var(--pg-verde); }
.pp-bar{ top:var(--top-h,58px) !important; }
.pp-bar.is-hidden{ transform:none !important; }
.pp-bar-in{ flex-direction:column; align-items:stretch !important; padding-bottom:0 !important; }
/* 3 · ficha: el dato antes que la foto */
.pp-fi-box{ inset:0; top:0; bottom:0; left:0; transform:none; width:100%; border-radius:0; }
.pp-fi-band{ padding:1.2rem 1.1rem calc(1.1rem + var(--edge-h)); }
.pp-fi-band h2{ font-size:26px !important; padding-right:3rem; }
.pp-fi-in{ padding:1rem 1.1rem calc(2rem + 68px); }
.pp-fi-acts a{ flex:1 1 0; justify-content:center; min-height:48px; padding:0 .6rem; font-size:.86rem; }
.pp-fi-grid{ grid-template-columns:1fr; }
.pp-fi-reg > div, .pp-fi-spec .cx-spec > div{ grid-template-columns:1fr; gap:.15rem; }
.pp-fi-tl{ grid-template-columns:1fr; gap:.8rem; }
.pp-fi-tl::before{ left:15px; right:auto; top:16px; bottom:16px; width:2px; height:auto;
background:repeating-linear-gradient(180deg,var(--pg-oro) 0 8px,transparent 8px 13px); }
.pp-fi-tl li{ display:grid; grid-template-columns:32px 1fr; gap:0 .8rem; text-align:left; align-items:center; padding:0; }
.pp-fi-tl li i{ margin:0; grid-row:span 2; }
/* 4 · formularios en tres pasos */
.pp-steps .px-fields{ max-height:none !important; overflow:visible !important; }
.pp-steps [data-step]:not(.is-step){ display:none !important; }
.pp-steps fieldset.pp-empty{ display:none !important; }
.pp-steps:not(.is-last) .px-form-acts, .pp-steps:not(.is-last) .pp-send,
.pp-steps:not(.is-last) button[type=submit], .pp-steps:not(.is-last) .px-nota{ display:none !important; }
.pp-step-nav{ display:flex; list-style:none; margin:0 0 1rem; padding:0; gap:.35rem; }
.pp-step-nav li{ flex:1; font:700 11px/1.2 var(--f-tit) !important; letter-spacing:.08em; text-transform:uppercase; color:#8a948c;
padding-top:.55rem; border-top:3px solid var(--pg-linea); }
.pp-step-nav li.is-on{ color:var(--pg-verde); border-top-color:var(--pg-oro); }
.pp-step-nav li.is-done{ color:var(--pg-verde); border-top-color:var(--pg-verde); }
.pp-step-bt{ display:flex; gap:.6rem; margin-top:1rem; }
.pp-step-bt button{ flex:1; min-height:48px; border-radius:999px; font:700 .92rem/1 var(--f-tit); cursor:pointer; }
.pp-step-bt .pp-next{ background:var(--pg-verde); color:#fff; border:0; }
.pp-step-bt .pp-prev{ background:transparent; color:var(--pg-verde); border:1.5px solid var(--pg-verde); }
.pp-steps.is-first .pp-prev{ display:none; }
.pp-steps.is-last .pp-next{ display:none; }
/* 5 · mercado y documentación plegados */
.pp-mfigs{ grid-template-columns:1fr; }
.pp-mfig, .pp-mfig + .pp-mfig{ padding:1rem 0; border-bottom:1px solid rgba(244,239,227,.12); }
.pp-mfig b{ font-size:2.4rem; }
.pp-mt thead{ display:none; }
.pp-mt, .pp-mt tbody, .pp-mt tr, .pp-mt td{ display:block; }
.pp-mt tr{ border-bottom:1px solid #EEE9DC; padding:.2rem 0; }
.pp-mt td{ border:0; padding:.35rem .9rem; }
.pp-mt td.n{ display:none; text-align:left; }
.pp-mt td.n::before{ content:attr(data-l); display:inline-block; min-width:9.5rem; font:700 10.5px/1.4 var(--f-tit); letter-spacing:.1em; text-transform:uppercase; color:#7b877e; }
.pp-mt tr.is-open td.n{ display:block; }
.pp-mt td.pp-mt-k{ display:block !important; }
.pp-mt td.pp-mt-k::before{ content:none; }
.pp-mk4-b .mk-heads{ grid-template-columns:1fr; }
.dk-list li.pp-fold p{ display:none !important; }
.dk-list li.pp-fold b::after{ content:" +"; color:var(--pg-oro); }
.dk-list li{ cursor:pointer; }
#normativa .px-relojes-list li.pp-fold > p:last-child{ display:none !important; }
#normativa .px-relojes-list li{ cursor:pointer; }
#normativa .px-relojes-list li.pp-fold .px-reloj-h b::after{ content:" +"; color:var(--pg-oro); }
}
@media (min-width:761px) and (max-width:1000px){
html[data-ficha="grande"] .cx-store .cx-list, html[data-ficha="dato"] .cx-store .cx-list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
html[data-ficha="fila"] .cx-store .cx-list{ grid-template-columns:1fr !important; }
.pp-cifras .px-wrap{ grid-template-columns:1fr 1fr; }
.pp-fi-grid{ grid-template-columns:1fr; }
}
.pp-chips{ display:none; }
@media (max-width:760px){ .pp-chips{ display:flex; } }
.pp-step-nav, .pp-step-bt{ display:none; }
@media (max-width:760px){ .pp-steps .pp-step-nav, .pp-steps .pp-step-bt{ display:flex; } }
/* ===== 21.13 · COMPARADOR (?solo=1 dentro de los marcos) ==== */
html[data-solo="1"] .pp-tabbar, html[data-solo="1"] .wa-float, html[data-solo="1"] .pn-launch{ display:none !important; }
.pp-fi-box:focus{ outline:none; }
.pp-fi-foot .cx-acts{ flex-direction:row !important; align-items:center; }
.pp-fi-foot .cx-acts > *{ width:auto !important; flex:0 0 auto; min-height:46px; }
/* la banda pinta por encima de la sección siguiente, que se mete debajo del borde irregular */
.pg-hero, .ac-hero, .hm-hero{ z-index:5 !important; }
.pg-hero + *, .ac-hero + *, .hm-hero + *{ position:relative; z-index:1; }
html[data-portada="b"] .hm-hero-in{ padding-top:2.4rem !important; }
html[data-portada="a"] .hm-hero-in{ padding-top:3rem !important; }
.pp-mt td.pp-mt-k{ min-width:250px; width:30%; }
.pp-mt .pp-mt-p small{ white-space:nowrap; }
.pp-mt td.n:last-child{ white-space:normal; min-width:150px; }
.pp-mfig b em{ font-style:normal; font-size:.42em; letter-spacing:0; margin-left:.35em; color:rgba(244,239,227,.75); }
@media (max-width:760px){
.px-fields, .pp-form .px-fields, .pp-fcard .px-fields, .pp-forms .px-fields{ grid-template-columns:1fr !important; }
form.px-form, .pp-form, .sp-form{ padding:1.1rem 1rem 1.2rem !important; }
}
.px-founder .px-founder-bio{ font-size:1.06rem !important; line-height:1.6 !important; }
@media (max-width:760px){ .px-founder .px-founder-bio{ font-size:17px !important; } }
.sp-ben{ padding:1.1rem 1.15rem 1.2rem !important; }
.sp-ico{ font-family:var(--f-mono) !important; color:#8a7420 !important; }
/* medida de línea: tope de 72 caracteres en toda la prosa */
.px-lead, .hm-head p, .pg-hero p, .hm-hero .hm-lead, .px-split-txt p, .px-founder-bio, .px-faq p,
.px-sec > .px-wrap > p, .px-rv > p, .sp-how p, .ac-in p, .mk-ins, .mk-upd, .dk-lead, .dk-note, .cx-terms,
.pp-aviso, .px-wrap > p{ max-width:56ch !important; }
.dk-lead, .dk-note{ max-width:none !important; }
/* ===== 22 · MÓVIL MÁS CORTO (05/10/2026) =====================
Nada se borra: lo largo se pliega o pasa a carrusel horizontal. */
.pp-more{ display:none; }
@media (max-width:760px){
/* carruseles horizontales con la tarjeta siguiente asomando */
.hm-podium, .hm-prods, .hm-steps, .px-portal, .sp-bens{
display:flex !important; flex-wrap:nowrap !important; gap:.7rem !important; overflow-x:auto !important;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
margin-inline:calc(-1 * var(--pad)) !important; padding:0 var(--pad) .5rem !important;
grid-template-columns:none !important;
}
.hm-podium::-webkit-scrollbar, .hm-prods::-webkit-scrollbar, .hm-steps::-webkit-scrollbar,
.px-portal::-webkit-scrollbar, .sp-bens::-webkit-scrollbar{ display:none; }
.hm-podium > *, .hm-prods > *, .hm-steps > *, .px-portal > *, .sp-bens > *{
flex:0 0 68% !important; max-width:68% !important; scroll-snap-align:start; margin:0 !important;
}
.hm-prods{ margin-top:.6rem !important; }
.hm-podium .hm-prod figure img, .hm-prods .hm-prod figure img{ aspect-ratio:4/3 !important; }
.hm-steps > *, .px-portal > *, .sp-bens > *{ flex-basis:78% !important; max-width:78% !important; }
.pp-swipe{ display:flex; align-items:center; gap:.4rem; margin:.1rem 0 .5rem; font:600 12px/1 var(--f-tit); color:#7b877e; }
.pp-bg-verde .pp-swipe, .hm-band .pp-swipe{ color:rgba(244,239,227,.65); }
/* cifras de la portada inglesa: carrusel */
.hm-nums{ display:flex !important; flex-wrap:nowrap !important; gap:.7rem !important; overflow-x:auto !important;
scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(-1 * var(--pad)) !important; padding:0 var(--pad) .3rem !important; }
.hm-nums::-webkit-scrollbar{ display:none; }
.hm-nums > *{ flex:0 0 72% !important; max-width:72% !important; scroll-snap-align:start; }
.hm-founder img{ max-height:260px; width:100%; object-fit:cover; object-position:center 20%; }
/* mapa de la red, más bajo */
.px-red figure img{ max-height:230px; width:100%; object-fit:cover; object-position:center 30%; }
.px-red{ gap:1rem !important; }
/* acceso de la portada: el login ya está en el candado del menú */
.pp-acc-box{ display:none !important; }
/* catálogo: sin foto de cabecera de familia */
.cx-sh-img, .cx-sh::before{ display:none !important; }
.cx-sh-t{ padding-top:.75rem !important; }
/* normativa plegada: solo título y fecha */
#normativa .px-relojes-list li.pp-fold .px-reloj-n{ display:none !important; }
#normativa .px-relojes-list li{ padding:.75rem .9rem !important; }
/* listas largas: se ven las primeras y un botón muestra el resto */
.pp-cut{ display:none !important; }
.pp-more{ display:flex; justify-content:center; align-items:center; width:100%; min-height:46px; margin:.8rem 0 0;
border-radius:999px; border:1.5px solid var(--pg-verde); background:transparent; color:var(--pg-verde);
font:700 14px/1 var(--f-tit); cursor:pointer; }
.pp-bg-verde .pp-more, #normativa .pp-more{ border-color:var(--pg-oro); color:var(--pg-oro); }
/* pie compacto */
.px-foot{ padding-block:1.6rem 1.2rem !important; }
.px-foot-contact li{ margin:0 !important; } .px-foot-contact a{ min-height:40px; display:inline-flex; align-items:center; }
.px-foot-in{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:1rem 1.2rem !important; }
.px-foot-in > div:first-child{ grid-column:1 / -1; }
.px-foot-in > div:first-child p:not(.px-logo):not(.pp-slogan-pie){ display:none; }
.px-foot .px-logo img{ height:34px; width:auto; }
.px-foot-in li{ margin:0 0 .3rem !important; }
.px-foot details.pp-fsrc > summary{ list-style:none; cursor:pointer; font:700 11px/1.3 var(--f-tit); letter-spacing:.14em;
text-transform:uppercase; color:var(--pg-oro); min-height:0; }
.px-foot details.pp-fsrc > summary::-webkit-details-marker{ display:none; }
.px-foot details.pp-fsrc > summary::after{ content:" +"; }
.px-foot details.pp-fsrc[open] > summary::after{ content:" –"; }
.px-foot details.pp-fsrc .px-h4{ display:none; }
.px-legal{ font-size:12px !important; gap:.3rem .8rem !important; }
}
@media (min-width:761px){ .pp-swipe{ display:none !important; } }
@media (max-width:760px){
.hm-step figure img, .hm-step img{ aspect-ratio:16/9 !important; height:auto !important; object-fit:cover; }
.pp-clamp{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; }
.pp-readmore{ display:inline-block; margin-top:.4rem; padding:0; border:0; background:none; cursor:pointer;
font:700 14px/1 var(--f-tit); color:var(--pg-verde); text-decoration:underline; text-underline-offset:3px; min-height:32px; }
.cx-list + .pp-more{ margin-bottom:.4rem; }
}
@media (min-width:761px){ .pp-readmore{ display:none; } }
@media (max-width:760px){ html[data-ficha] #body .cx-store .cx-card.pp-cut{ display:none !important; } }
.pp-more[hidden]{ display:none !important; }
@media (max-width:760px){
#body .dk-list li.pp-cut, #body #normativa .px-relojes-list li.pp-cut, #body .pp-mt tr.pp-cut,
#body .mk-chart .mk-row.pp-cut, #body .cx-list .pp-cut{ display:none !important; }
}
/* ===== 23 · BODEGONES (05/10/2026): producto solo, sin fondo ===== */
img[src*="/img/p/"]{ object-fit:contain !important; background:var(--pg-crema,#F4EFE3) !important; }
.cx-card img[src*="/img/p/"], .pp-mt img[src*="/img/p/"], .mk-f img[src*="/img/p/"]{ padding:4%; }
.pp-fi-ph img[src*="/img/p/"]{ padding:6%; background:#fff !important; }
/* ###########################################################
24 · BANNER INTERIOR · CUATRO PROPUESTAS (05/10/2026)
Se eligen con ?estilo=tinta|partido|tarjeta|neto
«tinta» es el actual (foto teñida de pigmento + borde irregular).
########################################################### */
/* ---- B · PARTIDO: foto limpia a la derecha, bloque de pigmento a la izquierda ---- */
html[data-estilo="partido"] .pg-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:300px; }
html[data-estilo="partido"] .pg-hero > img{
position:relative !important; grid-column:2; inset:auto !important; height:100% !important; min-height:300px;
filter:none !important; opacity:1 !important; -webkit-mask:none !important; mask:none !important;
object-position:50% 40%;
}
html[data-estilo="partido"] .pg-hero::after{ content:none !important; }
html[data-estilo="partido"] .pg-hero::before{ content:none !important; }
html[data-estilo="partido"] .pg-hero .px-wrap{
grid-column:1; grid-row:1; max-width:none !important; min-height:0 !important;
padding:clamp(2rem,3.4vw,3rem) clamp(1.6rem,4vw,3.6rem) clamp(2rem,3.4vw,3rem) var(--pad) !important;
justify-content:center !important;
}
html[data-estilo="partido"] .pg-hero{ -webkit-mask:none !important; mask:none !important; background:var(--pig) !important; }
html[data-estilo="partido"] .pg-hero + .px-sec, html[data-estilo="partido"] .pg-hero + section{ margin-top:0 !important; padding-top:clamp(2.4rem,3.4vw,3.2rem) !important; }
html[data-estilo="partido"] .pg-hero h1{ max-width:16ch !important; font-size:clamp(30px,3.2vw,44px) !important; }
html[data-estilo="partido"] .pg-hero p{ max-width:46ch !important; }
/* filete de oro vertical entre texto y foto */
html[data-estilo="partido"] .pg-hero > img{ border-left:3px solid var(--pg-oro); }
@media (max-width:760px){
html[data-estilo="partido"] .pg-hero{ grid-template-columns:1fr; }
html[data-estilo="partido"] .pg-hero > img{ grid-column:1; grid-row:1; min-height:0; height:190px !important; border-left:0; border-bottom:3px solid var(--pg-oro); }
html[data-estilo="partido"] .pg-hero .px-wrap{ grid-row:2; padding:1.4rem var(--pad) 1.6rem !important; }
}
/* ---- C · TARJETA: foto limpia a sangre, título en tarjeta crema que pisa la foto ---- */
html[data-estilo="tarjeta"] .pg-hero{
-webkit-mask:none !important; mask:none !important; background:var(--pg-crema) !important;
padding-bottom:clamp(1.6rem,3vw,2.6rem); overflow:visible;
}
html[data-estilo="tarjeta"] .pg-hero > img{
position:relative !important; display:block; width:100% !important; height:clamp(220px,26vw,340px) !important;
inset:auto !important; filter:none !important; opacity:1 !important; -webkit-mask:none !important; mask:none !important;
object-position:50% 45%;
}
html[data-estilo="tarjeta"] .pg-hero::after, html[data-estilo="tarjeta"] .pg-hero::before{ content:none !important; }
html[data-estilo="tarjeta"] .pg-hero .px-wrap{
position:relative; z-index:3; min-height:0 !important; margin-top:calc(-1 * clamp(56px,7vw,96px));
padding:0 var(--pad) !important;
}
html[data-estilo="tarjeta"] .pg-hero .px-wrap > *{ position:relative; }
html[data-estilo="tarjeta"] .pg-hero .px-wrap::before{
content:""; position:absolute; left:calc(var(--pad) - 1.6rem); right:38%; top:-1.4rem; bottom:-1.4rem;
background:var(--pg-crema); border-left:6px solid var(--pig); border-radius:0 6px 6px 0;
box-shadow:0 18px 40px -22px rgba(20,36,27,.45);
}
html[data-estilo="tarjeta"] .pg-hero h1{ color:var(--pg-tinta) !important; max-width:20ch !important; }
html[data-estilo="tarjeta"] .pg-hero p{ color:var(--pg-cuerpo) !important; max-width:52ch !important; }
html[data-estilo="tarjeta"] .pg-hero .pg-k{ color:var(--pig) !important; }
html[data-estilo="tarjeta"] .pg-hero .pg-k::before{ background:var(--pig) !important; }
html[data-estilo="tarjeta"] [data-pig="curcuma"] .pg-hero .pg-k, html[data-estilo="tarjeta"] body[data-pig="curcuma"] .pg-hero .pg-k{ color:#8a6a10 !important; }
html[data-estilo="tarjeta"] .pg-hero + .px-sec, html[data-estilo="tarjeta"] .pg-hero + section{ margin-top:0 !important; padding-top:clamp(2rem,3vw,2.8rem) !important; }
@media (max-width:760px){
html[data-estilo="tarjeta"] .pg-hero .px-wrap::before{ right:calc(var(--pad) - 1rem); left:calc(var(--pad) - 1rem); top:-1rem; bottom:-1rem; }
html[data-estilo="tarjeta"] .pg-hero .px-wrap{ margin-top:-40px; }
html[data-estilo="tarjeta"] .pg-hero > img{ height:180px !important; }
}
/* ---- D · NETO: sin foto. Pigmento plano, título grande, dato de la sección en mono ---- */
html[data-estilo="neto"] .pg-hero > img{ display:none !important; }
html[data-estilo="neto"] .pg-hero::after, html[data-estilo="neto"] .pg-hero::before{ content:none !important; }
html[data-estilo="neto"] .pg-hero{ -webkit-mask:none !important; mask:none !important; background:var(--pig) !important; }
html[data-estilo="neto"] .pg-hero .px-wrap{
min-height:0 !important; padding:clamp(2.6rem,4.5vw,4.2rem) var(--pad) clamp(2.4rem,4vw,3.6rem) !important;
display:grid !important; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:1.5rem 3rem; align-items:end;
}
html[data-estilo="neto"] .pg-hero .pg-k{ grid-column:1; }
html[data-estilo="neto"] .pg-hero h1{ grid-column:1; font-size:clamp(36px,4.2vw,58px) !important; max-width:14ch !important; margin:.5rem 0 0 !important; }
html[data-estilo="neto"] .pg-hero p{ grid-column:2; grid-row:1 / span 2; align-self:end; max-width:40ch !important; margin:0 !important;
padding-left:1.4rem; border-left:2px solid color-mix(in srgb, var(--pig-ink) 35%, transparent); }
html[data-estilo="neto"] .pg-hero + .px-sec, html[data-estilo="neto"] .pg-hero + section{ margin-top:0 !important; padding-top:clamp(2.4rem,3.4vw,3.2rem) !important; }
/* filete de oro abajo, recto, 3 px */
html[data-estilo="neto"] .pg-hero{ border-bottom:3px solid var(--pg-oro); }
@media (max-width:760px){
html[data-estilo="neto"] .pg-hero .px-wrap{ grid-template-columns:1fr; gap:1rem; }
html[data-estilo="neto"] .pg-hero p{ grid-column:1; grid-row:auto; border-left:0; padding-left:0; }
}
/* el banner oscuro (verde/maíz/cochinilla) pierde el filete inferior de oro en B, C y D para no duplicarlo */
html[data-estilo="partido"] .pg-hero, html[data-estilo="tarjeta"] .pg-hero, html[data-estilo="neto"] .pg-hero{ background-color:var(--pig) !important; }
html[data-estilo="tarjeta"] .pg-hero{ background-color:var(--pg-crema) !important; }
/* ===========================================================
25 · DISEÑO «MEZCLA» (06/10/2026)
Cabecera de la propuesta 2 (verde noche, foto real, arco del
swoosh) + interior de la propuesta 3 (blanco, aire, mosaico de
producto, banda de pigmentos). Se activa con ;
con ?diseno=pigmento se recupera el aspecto anterior.
=========================================================== */
html[data-diseno="mezcla"]{
--mz-noche:#1D4D35; --mz-verde:#30714F; --mz-oro:#D5B548; --mz-oro2:#B8942E; --mz-tinta:#214A36; --mz-cuerpo:#2b3630;
--mz-gris:#7b877e; --mz-linea:#ECEBE6; --mz-fondo:#fff; --mz-fondo2:#FAF9F6; --mz-crema:#F4EFE3;
--mz-achiote:#C14A22; --mz-cochinilla:#8E1B35; --mz-curcuma:#D9A21B; --mz-maiz:#3B1F4E;
--mz-tit:"Montserrat",system-ui,sans-serif; --mz-body:"Lora",Georgia,serif; --mz-mono:"IBM Plex Mono",ui-monospace,monospace;
--max:1400px;
}
/* 25.1 · base: blanco, Lora, títulos Montserrat apretados -------- */
html[data-diseno="mezcla"] body{ background:var(--mz-fondo) !important; color:var(--mz-cuerpo) !important; font-family:var(--mz-body) !important; }
html[data-diseno="mezcla"] main{ background:var(--mz-fondo); }
html[data-diseno="mezcla"] h1, html[data-diseno="mezcla"] h2, html[data-diseno="mezcla"] h3, html[data-diseno="mezcla"] h4{ font-family:var(--mz-tit) !important; letter-spacing:-.02em; color:var(--mz-tinta); }
html[data-diseno="mezcla"] h2{ font-weight:800 !important; letter-spacing:-.03em !important; }
html[data-diseno="mezcla"] .pp-bg-crema, html[data-diseno="mezcla"] .pp-bg-blanco{ background:var(--mz-fondo) !important; }
html[data-diseno="mezcla"] .pp-bg-salvia{ background:var(--mz-fondo2) !important; }
html[data-diseno="mezcla"] .pp-bg-crema + .pp-bg-blanco, html[data-diseno="mezcla"] .pp-bg-blanco + .pp-bg-crema,
html[data-diseno="mezcla"] section.px-sec + section.px-sec{ border-top:1px solid var(--mz-linea); }
html[data-diseno="mezcla"] .pp-bg-verde{ background:var(--mz-noche) !important; }
html[data-diseno="mezcla"] .hm-k, html[data-diseno="mezcla"] .pg-k, html[data-diseno="mezcla"] .ac-k, html[data-diseno="mezcla"] .cx-kick, html[data-diseno="mezcla"] .mz-k{
display:inline-flex !important; align-items:center; gap:.6rem; font:700 11px/1 var(--mz-tit) !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:var(--mz-oro2) !important; background:none !important; padding:0 !important; border:0 !important; margin:0 0 .7rem !important;
}
html[data-diseno="mezcla"] .hm-k::before, html[data-diseno="mezcla"] .pg-k::before, html[data-diseno="mezcla"] .ac-k::before, html[data-diseno="mezcla"] .mz-k::before{ content:""; width:26px; height:3px; background:var(--mz-oro); flex:none; }
html[data-diseno="mezcla"] .cx-kick::before{ content:none; }
html[data-diseno="mezcla"] .hm-head h2, html[data-diseno="mezcla"] .px-sec h2:not(.cx-card h2){ font-size:clamp(28px,3.2vw,44px) !important; line-height:1.02 !important; }
html[data-diseno="mezcla"] .hm-head p{ color:var(--mz-cuerpo); }
html[data-diseno="mezcla"] a{ text-decoration-color:var(--mz-oro); }
/* 25.2 · cabecera (propuesta 2) ---------------------------------- */
html[data-diseno="mezcla"] .px-top, html[data-diseno="mezcla"] .px-scrolled .px-top{ background:rgba(29,77,53,.96) !important; backdrop-filter:blur(8px); border-bottom:1px solid rgba(213,181,72,.3) !important; }
html[data-diseno="mezcla"] .px-top-in{ min-height:76px !important; }
html[data-diseno="mezcla"] .px-logo img{ height:46px !important; width:auto !important; }
html[data-diseno="mezcla"] .px-nav > ul > li > a{ font:600 13px/1 var(--mz-tit) !important; color:rgba(244,239,227,.82) !important; letter-spacing:0 !important; text-transform:none !important; }
html[data-diseno="mezcla"] .px-nav > ul > li > a:hover, html[data-diseno="mezcla"] .px-nav > ul > li > a.is-here{ color:#fff !important; box-shadow:0 2px 0 var(--mz-oro); background:none !important; }
html[data-diseno="mezcla"] .px-nav .px-nav-cta .px-btn{ background:var(--mz-oro) !important; color:var(--mz-tinta) !important; border-radius:999px !important; font:800 13px/1 var(--mz-tit) !important; padding:.8rem 1.1rem !important; box-shadow:none !important; border:0 !important; }
html[data-diseno="mezcla"] .px-lang a{ font-family:var(--mz-mono) !important; }
/* 25.3 · banner interior: noche + foto real + arco ---------------- */
html[data-diseno="mezcla"] .pg-hero, html[data-diseno="mezcla"] .ac-hero{
background:var(--mz-noche) !important; color:#F4EFE3 !important; -webkit-mask:none !important; mask:none !important; padding:0 !important; margin:0 !important; min-height:0; display:block !important; grid-template-columns:none !important; isolation:isolate;
}
html[data-diseno="mezcla"] .pg-hero::before, html[data-diseno="mezcla"] .ac-hero::before{
content:"" !important; position:absolute; right:-6%; top:-18%; width:min(60%,760px); aspect-ratio:800/420; z-index:2; pointer-events:none; opacity:.9; display:block !important; background:none !important; height:auto !important; left:auto !important; bottom:auto !important; border:0 !important;
background-image:url("data:image/svg+xml;utf8,") !important; background-size:100% 100% !important; background-repeat:no-repeat !important;
}
html[data-diseno="mezcla"] .pg-hero::after, html[data-diseno="mezcla"] .ac-hero::after{
content:"" !important; position:absolute; inset:0 !important; z-index:1; display:block !important; opacity:1 !important; mix-blend-mode:normal !important;
background:linear-gradient(90deg,rgba(29,77,53,.96) 0%,rgba(29,77,53,.86) 36%,rgba(29,77,53,.3) 70%,rgba(29,77,53,.12) 100%),linear-gradient(0deg,rgba(29,77,53,.85) 0%,transparent 45%) !important;
}
html[data-diseno="mezcla"] .pg-hero > img, html[data-diseno="mezcla"] .ac-hero > img{
position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:72% 50% !important; filter:none !important; mix-blend-mode:normal !important; opacity:1 !important; z-index:0 !important; display:block !important; border:0 !important; grid-column:auto !important; border-radius:0 !important;
}
html[data-diseno="mezcla"] .pg-hero > .px-wrap, html[data-diseno="mezcla"] .ac-hero > .px-wrap, html[data-diseno="mezcla"] .ac-hero .ac-in{
position:relative; z-index:3; min-height:360px !important; display:flex; flex-direction:column; justify-content:flex-end; padding-block:3rem 2.6rem !important; background:none !important; box-shadow:none !important; border:0 !important; transform:none !important; margin:0 auto !important; max-width:var(--max) !important;
}
html[data-diseno="mezcla"] .pg-hero .pg-k, html[data-diseno="mezcla"] .ac-hero .ac-k{ color:var(--mz-oro) !important; }
html[data-diseno="mezcla"] .pg-hero h1, html[data-diseno="mezcla"] .ac-in h1{ color:#F4EFE3 !important; font:700 clamp(32px,4vw,52px)/1.02 var(--mz-tit) !important; letter-spacing:-.03em !important; max-width:17ch !important; margin:.2rem 0 .8rem !important; text-shadow:none !important; }
html[data-diseno="mezcla"] .pg-hero p, html[data-diseno="mezcla"] .ac-in p{ color:rgba(244,239,227,.86) !important; font-size:17px !important; max-width:52ch !important; margin:0 !important; }
html[data-diseno="mezcla"] .pg-hero + .px-sec, html[data-diseno="mezcla"] .pg-hero + section, html[data-diseno="mezcla"] .ac-hero + section{ margin-top:0 !important; padding-top:clamp(2.4rem,3.4vw,3.6rem) !important; }
/* 25.4 · botones: píldora -------------------------------------- */
html[data-diseno="mezcla"] .hm-btn, html[data-diseno="mezcla"] .px-btn, html[data-diseno="mezcla"] .mz-b, html[data-diseno="mezcla"] .pp-top-enter, html[data-diseno="mezcla"] .pp-acc-b{
border-radius:999px !important; font:700 15px/1 var(--mz-tit) !important; min-height:48px; padding:0 1.5rem !important; display:inline-flex !important; align-items:center; justify-content:center; gap:.5rem; box-shadow:none !important; letter-spacing:0 !important; text-transform:none !important; text-decoration:none !important;
}
html[data-diseno="mezcla"] .hm-btn-oro, html[data-diseno="mezcla"] .mz-b-oro, html[data-diseno="mezcla"] .px-btn-p{ background:var(--mz-oro) !important; color:var(--mz-tinta) !important; border:0 !important; }
html[data-diseno="mezcla"] .hm-btn-verde, html[data-diseno="mezcla"] .px-btn:not(.px-btn-p){ background:var(--mz-tinta) !important; color:#fff !important; border:0 !important; }
html[data-diseno="mezcla"] .mz-b-ln{ background:transparent !important; border:1.5px solid currentColor !important; color:inherit; }
html[data-diseno="mezcla"] .mz-b-tinta{ background:var(--mz-tinta) !important; color:#fff !important; }
/* 25.5 · PORTADA: hero (propuesta 2) ------------------------------ */
html[data-diseno="mezcla"] .mz-hero{ position:relative; isolation:isolate; height:clamp(560px,78vh,760px); display:grid; align-items:end; overflow:hidden; background:var(--mz-noche); color:#F4EFE3; }
html[data-diseno="mezcla"] .mz-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%; z-index:0; }
html[data-diseno="mezcla"] .mz-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(29,77,53,.94) 0%,rgba(29,77,53,.78) 38%,rgba(29,77,53,.2) 72%,rgba(29,77,53,.1) 100%),linear-gradient(0deg,rgba(29,77,53,.9) 0%,transparent 40%); }
html[data-diseno="mezcla"] .mz-arc{ position:absolute; right:-6%; top:-12%; width:58%; height:auto; z-index:2; opacity:.9; pointer-events:none; }
html[data-diseno="mezcla"] .mz-hero-in{ position:relative; z-index:3; width:100%; padding-bottom:3.4rem !important; }
html[data-diseno="mezcla"] .mz-hero .mz-k{ color:var(--mz-oro) !important; }
html[data-diseno="mezcla"] .mz-hero h1{ color:#F4EFE3; font:700 clamp(38px,5.2vw,72px)/.98 var(--mz-tit); letter-spacing:-.03em; max-width:16ch; margin:.6rem 0 1.2rem; }
html[data-diseno="mezcla"] .mz-hero h1 em{ font-style:normal; color:var(--mz-oro); }
html[data-diseno="mezcla"] .mz-lead{ font-size:19px; line-height:1.55; max-width:50ch; margin:0 0 1.6rem; color:rgba(244,239,227,.9); }
html[data-diseno="mezcla"] .mz-acts{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
html[data-diseno="mezcla"] .mz-hero .mz-b-ln{ color:#F4EFE3; }
html[data-diseno="mezcla"] .mz-hero .hm-puno-b{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(244,239,227,.1); border:1px solid rgba(244,239,227,.25); color:#F4EFE3; border-radius:999px; min-height:48px; padding:0 1.2rem 0 .5rem; font:600 14px/1 var(--mz-tit); cursor:pointer; }
html[data-diseno="mezcla"] .mz-hero .hm-puno-av{ width:34px; height:34px; display:inline-block; }
html[data-diseno="mezcla"] .mz-pie{ position:absolute; right:clamp(18px,4vw,56px); bottom:1.6rem; z-index:3; font:500 11px/1.5 var(--mz-mono); color:rgba(244,239,227,.6); text-align:right; letter-spacing:.04em; }
html[data-diseno="mezcla"] .mz-banda{ background:var(--mz-noche); color:#F4EFE3; border-top:1px solid rgba(213,181,72,.35); }
html[data-diseno="mezcla"] .mz-banda .px-wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
html[data-diseno="mezcla"] .mz-banda .px-wrap > div{ padding:1.2rem 1.4rem; border-left:1px solid rgba(255,255,255,.08); }
html[data-diseno="mezcla"] .mz-banda .px-wrap > div:first-child{ border-left:0; padding-left:0; }
html[data-diseno="mezcla"] .mz-banda b{ display:block; font:500 30px/1 var(--mz-mono); color:var(--mz-oro); }
html[data-diseno="mezcla"] .mz-banda span{ display:block; margin-top:.4rem; font:700 11px/1.3 var(--mz-tit); letter-spacing:.14em; text-transform:uppercase; color:rgba(244,239,227,.65); }
/* 25.6 · PORTADA: cinta y certificaciones (propuesta 3, finas) ----- */
html[data-diseno="mezcla"] .px-ticker{ background:#fff !important; border-top:1px solid var(--mz-linea) !important; border-bottom:1px solid var(--mz-linea) !important; color:var(--mz-tinta) !important; margin:0 !important; }
html[data-diseno="mezcla"] .px-ticker-in span{ font:600 13px/1 var(--mz-tit) !important; color:var(--mz-tinta) !important; }
html[data-diseno="mezcla"] .px-ticker-in code{ font:500 11.5px/1 var(--mz-mono) !important; color:var(--mz-gris) !important; background:none !important; }
html[data-diseno="mezcla"] .px-certs{ background:#fff !important; border-bottom:1px solid var(--mz-linea) !important; padding:1rem 0 !important; }
html[data-diseno="mezcla"] .px-certs .px-wrap{ display:flex !important; gap:.8rem 2rem !important; flex-wrap:wrap; align-items:center; }
html[data-diseno="mezcla"] .px-certs-label{ font:italic 400 14px/1.3 var(--mz-body) !important; color:var(--mz-gris) !important; }
html[data-diseno="mezcla"] .px-certs ul{ display:flex !important; gap:.6rem 1.8rem !important; flex-wrap:wrap; margin:0 !important; padding:0 !important; list-style:none !important; }
html[data-diseno="mezcla"] .px-certs li{ font:600 12.5px/1 var(--mz-tit) !important; color:#5a6a5e !important; background:none !important; border:0 !important; padding:0 !important; }
html[data-diseno="mezcla"] .px-certs li::before{ content:"✓ "; color:var(--mz-verde); }
/* 25.7 · PORTADA: mosaico de producto (propuesta 3) ---------------- */
html[data-diseno="mezcla"] .mz-sec{ padding:clamp(3rem,5vw,4.5rem) 0; }
html[data-diseno="mezcla"] .mz-hd{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2rem; }
html[data-diseno="mezcla"] .mz-hd h2{ font-size:clamp(34px,4vw,56px) !important; line-height:1 !important; margin:0; }
html[data-diseno="mezcla"] .mz-hd p{ margin:0; max-width:40ch; font-size:16px; }
html[data-diseno="mezcla"] .mz-mos{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:250px; grid-auto-flow:dense; gap:1.2rem; }
html[data-diseno="mezcla"] .mz-it{ position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:0; color:inherit; text-decoration:none !important; }
html[data-diseno="mezcla"] .mz-it.big{ grid-column:span 3; grid-row:span 2; } html[data-diseno="mezcla"] .mz-it.med{ grid-column:span 2; grid-row:span 2; } html[data-diseno="mezcla"] .mz-it.sm{ grid-column:span 1; }
html[data-diseno="mezcla"] .mz-it img{ width:100%; height:100%; object-fit:cover; min-height:0; display:block; }
html[data-diseno="mezcla"] .mz-it .t{ margin-top:.5rem; display:flex; justify-content:space-between; gap:.6rem; align-items:baseline; line-height:1.2; }
html[data-diseno="mezcla"] .mz-it b{ font:700 14px/1.3 var(--mz-tit); color:var(--mz-tinta); } html[data-diseno="mezcla"] .mz-it i{ display:block; font:italic 400 12.5px/1.3 var(--mz-body); color:var(--mz-gris); }
html[data-diseno="mezcla"] .mz-it .pr{ font:500 12px/1.3 var(--mz-mono); color:var(--mz-tinta); white-space:nowrap; }
html[data-diseno="mezcla"] .mz-it .pig{ position:absolute; top:0; left:0; width:6px; height:28%; background:var(--c); z-index:1; }
html[data-diseno="mezcla"] .mz-it.big b{ font-size:18px; } html[data-diseno="mezcla"] .mz-it.big .pr{ font-size:14px; }
html[data-diseno="mezcla"] .mz-it:hover img{ opacity:.92; }
html[data-diseno="mezcla"] .mz-mas{ margin-top:2rem; text-align:center; }
html[data-diseno="mezcla"] .mz-mas .mz-b{ color:var(--mz-tinta); }
/* 25.8 · PORTADA: banda de pigmentos ----------------------------- */
html[data-diseno="mezcla"] .mz-pigs{ display:grid; grid-template-columns:repeat(4,1fr); }
html[data-diseno="mezcla"] .mz-pigs a{ padding:2.2rem clamp(18px,3vw,40px); color:#fff; min-height:220px; display:flex; flex-direction:column; justify-content:space-between; text-decoration:none !important; }
html[data-diseno="mezcla"] .mz-pigs h3{ color:#fff; font-size:22px; font-weight:800; margin:0 0 .3rem; } html[data-diseno="mezcla"] .mz-pigs p{ margin:0; font-size:14px; opacity:.92; line-height:1.5; }
html[data-diseno="mezcla"] .mz-pigs .n{ font:500 12px/1 var(--mz-mono); opacity:.75; }
html[data-diseno="mezcla"] .mz-pigs .cu, html[data-diseno="mezcla"] .mz-pigs .cu h3{ color:var(--mz-tinta); }
/* 25.9 · PORTADA: seis controles en columnas, tira de proceso ------ */
html[data-diseno="mezcla"] .mz-art .px-wrap{ display:grid; grid-template-columns:1fr 2fr; gap:4rem; }
html[data-diseno="mezcla"] .mz-art h2{ font-size:clamp(30px,3.4vw,46px) !important; line-height:1.02 !important; max-width:14ch; margin:0; }
html[data-diseno="mezcla"] .mz-art .lead{ font-size:18px; margin:1rem 0 0; max-width:34ch; }
html[data-diseno="mezcla"] .mz-cols{ columns:2; column-gap:3rem; }
html[data-diseno="mezcla"] .mz-cols > div{ break-inside:avoid; margin-bottom:1.4rem; padding-top:.9rem; border-top:1px solid var(--mz-linea); }
html[data-diseno="mezcla"] .mz-cols b{ display:block; font:700 15px/1.3 var(--mz-tit); color:var(--mz-tinta); margin-bottom:.25rem; }
html[data-diseno="mezcla"] .mz-cols span{ font:500 11px/1 var(--mz-mono); color:var(--mz-achiote); display:block; margin-bottom:.4rem; }
html[data-diseno="mezcla"] .mz-cols p{ margin:0; font-size:15px; }
html[data-diseno="mezcla"] .mz-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
html[data-diseno="mezcla"] .mz-strip figure{ margin:0; position:relative; }
html[data-diseno="mezcla"] .mz-strip img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
html[data-diseno="mezcla"] .mz-strip figcaption{ position:absolute; left:0; bottom:0; right:0; padding:1.6rem .9rem .8rem; background:linear-gradient(0deg,rgba(0,0,0,.6),transparent); color:#fff; font:600 12px/1.3 var(--mz-tit); }
html[data-diseno="mezcla"] .mz-strip figcaption span{ display:block; font:500 10.5px/1 var(--mz-mono); opacity:.8; margin-bottom:.25rem; }
/* 25.10 · PORTADA: regiones (marcado existente), datos, cierre ----- */
html[data-diseno="mezcla"] .mz-regs .hm-regs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; }
html[data-diseno="mezcla"] .hm-reg{ display:block; background:#fff; border:1px solid var(--mz-linea); border-radius:0 !important; overflow:hidden; color:inherit; text-decoration:none !important; box-shadow:none !important; }
html[data-diseno="mezcla"] .hm-reg img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:none !important; }
html[data-diseno="mezcla"] .hm-reg > div{ padding:1.1rem 1.1rem 1.3rem; }
html[data-diseno="mezcla"] .hm-reg h3{ font-size:20px; font-weight:800; margin:.1rem 0 .4rem; }
html[data-diseno="mezcla"] .hm-reg p{ margin:0 0 .6rem; font-size:15px; }
html[data-diseno="mezcla"] .hm-reg ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .5rem; }
html[data-diseno="mezcla"] .hm-reg li{ font:600 11.5px/1 var(--mz-tit); color:#5a6a5e; border:1px solid var(--mz-linea); border-radius:999px; padding:.4rem .6rem; }
html[data-diseno="mezcla"] .mz-datos .px-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
html[data-diseno="mezcla"] .mz-datos h2{ font-size:28px !important; margin:0 0 1.2rem; }
html[data-diseno="mezcla"] .mz-datos dl{ margin:0; } html[data-diseno="mezcla"] .mz-datos dt{ font:500 clamp(28px,3vw,40px)/1 var(--mz-mono); color:var(--mz-tinta); letter-spacing:-.03em; padding-top:1rem; border-top:1px solid var(--mz-linea); }
html[data-diseno="mezcla"] .mz-datos dd{ margin:.4rem 0 1.4rem; font-size:15px; } html[data-diseno="mezcla"] .mz-datos dd small{ display:block; font:500 11px/1.4 var(--mz-mono); color:var(--mz-gris); margin-top:.3rem; }
html[data-diseno="mezcla"] .mz-norm{ list-style:none; margin:0; padding:0; } html[data-diseno="mezcla"] .mz-norm li{ padding:1rem 0; border-top:1px solid var(--mz-linea); display:grid; grid-template-columns:1fr auto; gap:1rem; font-size:15px; }
html[data-diseno="mezcla"] .mz-norm b{ font:700 15px/1.3 var(--mz-tit); color:var(--mz-tinta); } html[data-diseno="mezcla"] .mz-norm span{ font:500 11.5px/1.4 var(--mz-mono); color:var(--mz-gris); text-align:right; }
html[data-diseno="mezcla"] .mz-datos .mz-mas{ text-align:left; margin-top:1rem; }
html[data-diseno="mezcla"] .mz-cierre{ border-top:1px solid var(--mz-linea); }
html[data-diseno="mezcla"] .mz-cierre .px-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
html[data-diseno="mezcla"] .mz-cierre h2{ font-size:clamp(34px,4.2vw,60px) !important; font-weight:900 !important; line-height:.95 !important; letter-spacing:-.04em !important; margin:0 0 1.2rem; }
html[data-diseno="mezcla"] .mz-cierre p{ font-size:17px; max-width:46ch; margin:0 0 1.4rem; }
html[data-diseno="mezcla"] .mz-firma{ display:grid; grid-template-columns:96px 1fr; gap:1.2rem; align-items:center; border-left:6px solid var(--mz-oro); padding-left:1.4rem; font-size:15px; }
html[data-diseno="mezcla"] .mz-firma img{ width:96px; height:120px; object-fit:cover; display:block; }
html[data-diseno="mezcla"] .mz-firma b{ font-family:var(--mz-tit); color:var(--mz-tinta); }
/* 25.11 · PORTADA: secciones heredadas (productores, acceso) ------- */
html[data-diseno="mezcla"] .pp-prov, html[data-diseno="mezcla"] .pp-acc{ background:var(--mz-fondo2) !important; border-top:1px solid var(--mz-linea); }
html[data-diseno="mezcla"] .pp-acc{ background:#fff !important; }
html[data-diseno="mezcla"] .px-field input, html[data-diseno="mezcla"] .px-field select, html[data-diseno="mezcla"] .px-field textarea{ border-radius:0 !important; border:1px solid #D9D6CE !important; background:#fff !important; font-family:var(--mz-body) !important; }
html[data-diseno="mezcla"] .px-lab{ font:700 11px/1.3 var(--mz-tit) !important; letter-spacing:.08em; text-transform:uppercase; color:#5a6a5e !important; }
html[data-diseno="mezcla"] .pp-acc-box{ background:#fff !important; border:1px solid var(--mz-linea) !important; border-radius:0 !important; box-shadow:none !important; }
/* 25.12 · PIE ----------------------------------------------------- */
html[data-diseno="mezcla"] .px-foot{ background:var(--mz-noche) !important; color:#CFCBBE !important; border-top:0 !important; padding:2.6rem 0 1.6rem !important; font-size:14px; }
html[data-diseno="mezcla"] .px-foot .px-h4{ color:var(--mz-oro) !important; font:700 11px/1.3 var(--mz-tit) !important; letter-spacing:.18em; text-transform:uppercase; }
html[data-diseno="mezcla"] .px-foot a{ color:#E6E1D3 !important; }
html[data-diseno="mezcla"] .px-foot .px-legal{ border-top:1px solid rgba(255,255,255,.12) !important; margin-top:1.2rem; padding-top:1rem; font:500 12px/1.6 var(--mz-mono) !important; color:#8e9a90 !important; }
html[data-diseno="mezcla"] .px-foot .px-src{ font:500 11px/1.4 var(--mz-mono) !important; color:#8e9a90 !important; }
html[data-diseno="mezcla"] .pp-slogan-pie{ font:italic 400 15px/1.4 var(--mz-body) !important; color:var(--mz-oro) !important; }
/* 25.13 · CATÁLOGO: tarjetas de la propuesta 3 --------------------- */
html[data-diseno="mezcla"] #body .cx-store .cx-card{ background:#fff !important; border:1px solid var(--mz-linea) !important; border-radius:0 !important; box-shadow:none !important; overflow:visible; }
html[data-diseno="mezcla"] #body .cx-store .cx-card:hover{ box-shadow:none !important; border-color:#D9D6CE !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-media{ position:relative; border-radius:0 !important; aspect-ratio:1 !important; background:#fff !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-media::before{ content:""; position:absolute; top:0; left:0; width:6px; height:28%; background:var(--c,var(--mz-verde)); z-index:2; }
html[data-diseno="mezcla"] #body .cx-store .cx-media img{ object-fit:cover !important; filter:none !important; border-radius:0 !important; aspect-ratio:1 !important; }
html[data-diseno="mezcla"] #body .cx-sec[data-sec="s1"] .cx-card{ --c:var(--mz-curcuma); } html[data-diseno="mezcla"] #body .cx-sec[data-sec="s2"] .cx-card{ --c:var(--mz-cochinilla); }
html[data-diseno="mezcla"] #body .cx-sec[data-sec="s3"] .cx-card{ --c:var(--mz-oro); } html[data-diseno="mezcla"] #body .cx-sec[data-sec="s4"] .cx-card{ --c:var(--mz-achiote); }
html[data-diseno="mezcla"] #body .cx-sec[data-sec="s5"] .cx-card{ --c:var(--mz-maiz); } html[data-diseno="mezcla"] #body .cx-sec[data-sec="s6"] .cx-card{ --c:var(--mz-verde); }
html[data-diseno="mezcla"] #body .cx-store .cx-body h3{ font:700 18px/1.2 var(--mz-tit) !important; color:var(--mz-tinta) !important; letter-spacing:-.02em; }
html[data-diseno="mezcla"] #body .cx-store .cx-sci{ font:italic 400 13.5px/1.3 var(--mz-body) !important; color:var(--mz-gris) !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-price b{ font:500 16px/1.2 var(--mz-mono) !important; color:var(--mz-tinta) !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-price span{ font:500 11px/1.3 var(--mz-mono) !important; color:var(--mz-gris) !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-key dt{ font:500 10.5px/1.3 var(--mz-mono) !important; letter-spacing:.06em; text-transform:uppercase; color:var(--mz-gris) !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-key dd{ font-size:14px !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-key > div{ border-top:1px solid var(--mz-linea) !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-badges li{ background:rgba(255,255,255,.92) !important; border:1px solid var(--mz-linea) !important; border-radius:999px !important; font:600 10.5px/1 var(--mz-tit) !important; color:#5a6a5e !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-prov{ font:600 10.5px/1 var(--mz-tit) !important; border-radius:999px !important; }
html[data-diseno="mezcla"] .cx-sec > .px-wrap > header h2, html[data-diseno="mezcla"] .cx-sec h2{ font-size:clamp(28px,3vw,40px) !important; }
html[data-diseno="mezcla"] .pp-bar, html[data-diseno="mezcla"] .pp-bar-in{ background:#fff !important; border-color:var(--mz-linea) !important; box-shadow:none !important; border-radius:0 !important; }
html[data-diseno="mezcla"] .pp-fbtn, html[data-diseno="mezcla"] .cx-search input{ border-radius:0 !important; border:1px solid #D9D6CE !important; background:#fff !important; font-family:var(--mz-body) !important; }
/* 25.14 · MERCADO, DOCUMENTACIÓN, EMPRESA, PUERTOS: datos en mono, bordes finos */
html[data-diseno="mezcla"] .mk-h, html[data-diseno="mezcla"] .px-eligen-item, html[data-diseno="mezcla"] .px-card, html[data-diseno="mezcla"] .dk-card, html[data-diseno="mezcla"] .pt-card, html[data-diseno="mezcla"] .sp-card, html[data-diseno="mezcla"] .mk-f, html[data-diseno="mezcla"] .pp-m{
background:#fff !important; border:1px solid var(--mz-linea) !important; border-radius:0 !important; box-shadow:none !important;
}
html[data-diseno="mezcla"] .mk-h b, html[data-diseno="mezcla"] .pp-cifra b, html[data-diseno="mezcla"] .pp-num{ font:500 clamp(26px,2.6vw,36px)/1 var(--mz-mono) !important; color:var(--mz-tinta) !important; letter-spacing:-.03em; }
html[data-diseno="mezcla"] .mk-h a{ font:500 11px/1.4 var(--mz-mono) !important; color:var(--mz-gris) !important; }
html[data-diseno="mezcla"] .px-eligen-item i{ font:500 12px/1 var(--mz-mono) !important; color:var(--mz-achiote) !important; background:none !important; border:0 !important; width:auto !important; height:auto !important; }
html[data-diseno="mezcla"] .px-eligen-item h3{ font-size:16px !important; }
html[data-diseno="mezcla"] .mk-hero-band > img{ display:none !important; }
html[data-diseno="mezcla"] .mk-hero-band{ background:#fff !important; }
html[data-diseno="mezcla"] .mk-hero-band .hm-head h2, html[data-diseno="mezcla"] .mk-hero-band .hm-k, html[data-diseno="mezcla"] .mk-hero-band p{ color:var(--mz-tinta) !important; text-shadow:none !important; }
html[data-diseno="mezcla"] .pp-bg-verde h2, html[data-diseno="mezcla"] .pp-bg-verde h3, html[data-diseno="mezcla"] .pp-bg-verde p, html[data-diseno="mezcla"] .pp-bg-verde li{ color:#F4EFE3; }
html[data-diseno="mezcla"] .pp-bg-verde .hm-k, html[data-diseno="mezcla"] .pp-bg-verde .pg-k{ color:var(--mz-oro) !important; }
html[data-diseno="mezcla"] .pp-bg-verde .mk-h, html[data-diseno="mezcla"] .pp-bg-verde .px-card, html[data-diseno="mezcla"] .pp-bg-verde .dk-card{ background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.12) !important; color:#F4EFE3; }
/* 25.15 · móvil ---------------------------------------------------- */
@media (max-width:900px){
html[data-diseno="mezcla"] .mz-hero{ height:clamp(520px,80vh,640px); }
html[data-diseno="mezcla"] .mz-arc, html[data-diseno="mezcla"] .mz-pie{ display:none; }
html[data-diseno="mezcla"] .mz-hero h1{ font-size:clamp(32px,9vw,42px); }
html[data-diseno="mezcla"] .mz-lead{ font-size:16px; }
html[data-diseno="mezcla"] .mz-banda .px-wrap{ grid-template-columns:1fr 1fr; }
html[data-diseno="mezcla"] .mz-banda .px-wrap > div{ padding:.9rem .8rem; } html[data-diseno="mezcla"] .mz-banda .px-wrap > div:nth-child(odd){ border-left:0; padding-left:0; }
html[data-diseno="mezcla"] .mz-banda b{ font-size:22px; }
html[data-diseno="mezcla"] .mz-hd{ flex-direction:column; align-items:flex-start; gap:.8rem; }
html[data-diseno="mezcla"] .mz-mos{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; gap:.8rem; }
html[data-diseno="mezcla"] .mz-it.big, html[data-diseno="mezcla"] .mz-it.med{ grid-column:span 2; grid-row:span 2; } html[data-diseno="mezcla"] .mz-it.sm{ grid-column:span 1; grid-row:span 1; }
html[data-diseno="mezcla"] .mz-pigs{ grid-template-columns:1fr 1fr; }
html[data-diseno="mezcla"] .mz-pigs a{ min-height:150px; padding:1.3rem 1rem; } html[data-diseno="mezcla"] .mz-pigs h3{ font-size:18px; } html[data-diseno="mezcla"] .mz-pigs p{ font-size:13px; }
html[data-diseno="mezcla"] .mz-art .px-wrap, html[data-diseno="mezcla"] .mz-datos .px-wrap, html[data-diseno="mezcla"] .mz-cierre .px-wrap{ grid-template-columns:1fr; gap:1.6rem; }
html[data-diseno="mezcla"] .mz-cols{ columns:1; }
html[data-diseno="mezcla"] .mz-strip{ grid-template-columns:1fr 1fr; }
html[data-diseno="mezcla"] .mz-regs .hm-regs{ grid-template-columns:1fr; gap:.8rem; }
html[data-diseno="mezcla"] .hm-reg{ display:grid; grid-template-columns:120px 1fr; } html[data-diseno="mezcla"] .hm-reg img{ aspect-ratio:auto; height:100%; }
html[data-diseno="mezcla"] .mz-sec{ padding:2.4rem 0; }
html[data-diseno="mezcla"] .mz-norm li{ grid-template-columns:1fr; gap:.2rem; } html[data-diseno="mezcla"] .mz-norm span{ text-align:left; }
html[data-diseno="mezcla"] .pg-hero > .px-wrap, html[data-diseno="mezcla"] .ac-hero > .px-wrap{ min-height:260px !important; padding-block:2rem 1.6rem !important; }
html[data-diseno="mezcla"] .pg-hero h1, html[data-diseno="mezcla"] .ac-in h1{ font-size:30px !important; }
html[data-diseno="mezcla"] .pg-hero p, html[data-diseno="mezcla"] .ac-in p{ font-size:15px !important; }
html[data-diseno="mezcla"] .pg-hero::before, html[data-diseno="mezcla"] .ac-hero::before{ display:none !important; }
html[data-diseno="mezcla"] .px-top-in{ min-height:60px !important; }
html[data-diseno="mezcla"] .px-logo img{ height:38px !important; }
}
/* 25.16 · correcciones tras la primera revisión (06/10/2026) --------- */
html[data-diseno="mezcla"] .hm-reg{ position:relative; display:grid !important; grid-template-rows:auto 1fr; min-height:0 !important; height:auto !important; aspect-ratio:auto !important; }
html[data-diseno="mezcla"] .hm-reg::before, html[data-diseno="mezcla"] .hm-reg::after{ display:none !important; content:none !important; }
html[data-diseno="mezcla"] .hm-reg img{ position:static !important; inset:auto !important; height:auto !important; aspect-ratio:4/3 !important; opacity:1 !important; object-fit:cover !important; }
html[data-diseno="mezcla"] .hm-reg > div{ position:static !important; inset:auto !important; background:none !important; color:var(--mz-cuerpo) !important; padding:1.1rem 1.1rem 1.3rem !important; transform:none !important; }
html[data-diseno="mezcla"] .hm-reg h3{ color:var(--mz-tinta) !important; font-size:20px !important; margin:.1rem 0 .4rem !important; text-shadow:none !important; }
html[data-diseno="mezcla"] .hm-reg p{ display:block !important; color:var(--mz-cuerpo) !important; }
html[data-diseno="mezcla"] .hm-reg li{ color:#5a6a5e !important; border-color:var(--mz-linea) !important; background:none !important; }
html[data-diseno="mezcla"] .hm-reg .hm-k{ color:var(--mz-oro2) !important; }
html[data-diseno="mezcla"] .pp-acc{ background:var(--mz-noche) !important; color:#F4EFE3 !important; border-top:1px solid rgba(213,181,72,.3) !important; }
html[data-diseno="mezcla"] .pp-acc-t h2{ color:#fff !important; font-size:clamp(26px,2.8vw,36px) !important; }
html[data-diseno="mezcla"] .pp-acc-t li, html[data-diseno="mezcla"] .pp-acc-t p{ color:rgba(244,239,227,.85) !important; }
html[data-diseno="mezcla"] .pp-acc-t .hm-k{ color:var(--mz-oro) !important; }
html[data-diseno="mezcla"] .pp-acc-t .hm-link a{ color:var(--mz-oro) !important; }
html[data-diseno="mezcla"] .pp-acc-box{ border:0 !important; }
html[data-diseno="mezcla"] .cx-sh{ background:#fff !important; border:1px solid var(--mz-linea) !important; border-radius:0 !important; overflow:hidden; box-shadow:none !important; min-height:0 !important; }
html[data-diseno="mezcla"] .cx-sh-img{ display:none !important; }
html[data-diseno="mezcla"] .cx-sh::before, html[data-diseno="mezcla"] .cx-sh::after{ display:none !important; content:none !important; }
html[data-diseno="mezcla"] .cx-sh-t{ position:static !important; display:grid !important; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; padding:1.6rem 1.6rem 1.3rem !important; background:none !important; color:var(--mz-tinta) !important; min-height:0 !important; border-left:6px solid var(--c,var(--mz-verde)); }
html[data-diseno="mezcla"] .cx-sec[data-sec="s1"] .cx-sh-t{ --c:var(--mz-curcuma); } html[data-diseno="mezcla"] .cx-sec[data-sec="s2"] .cx-sh-t{ --c:var(--mz-cochinilla); }
html[data-diseno="mezcla"] .cx-sec[data-sec="s3"] .cx-sh-t{ --c:var(--mz-oro); } html[data-diseno="mezcla"] .cx-sec[data-sec="s4"] .cx-sh-t{ --c:var(--mz-achiote); }
html[data-diseno="mezcla"] .cx-sec[data-sec="s5"] .cx-sh-t{ --c:var(--mz-maiz); } html[data-diseno="mezcla"] .cx-sec[data-sec="s6"] .cx-sh-t{ --c:var(--mz-verde); }
html[data-diseno="mezcla"] .cx-sh-n{ font:500 34px/1 var(--mz-mono) !important; color:var(--mz-oro2) !important; opacity:1 !important; text-shadow:none !important; }
html[data-diseno="mezcla"] .cx-sh h2{ color:var(--mz-tinta) !important; font-size:clamp(26px,2.8vw,36px) !important; margin:0 0 .4rem !important; text-shadow:none !important; }
html[data-diseno="mezcla"] .cx-sh h2::after{ display:none !important; }
html[data-diseno="mezcla"] .cx-sh p{ color:var(--mz-cuerpo) !important; max-width:70ch; margin:0 !important; text-shadow:none !important; }
html[data-diseno="mezcla"] .ac-hero .ac-in{ display:grid !important; grid-template-columns:1.1fr .9fr !important; gap:3rem; align-items:center !important; justify-content:normal !important; min-height:380px !important; }
html[data-diseno="mezcla"] .ac-hero::before{ display:none !important; }
html[data-diseno="mezcla"] .ac-box{ position:relative; z-index:3; }
@media (max-width:900px){
html[data-diseno="mezcla"] .ac-hero .ac-in{ grid-template-columns:1fr !important; gap:1.4rem; }
html[data-diseno="mezcla"] .cx-sh-t{ grid-template-columns:1fr; gap:.4rem; padding:1.1rem 1rem 1rem !important; }
html[data-diseno="mezcla"] .cx-sh-n{ font-size:22px !important; }
html[data-diseno="mezcla"] .hm-reg{ grid-template-columns:120px 1fr !important; grid-template-rows:auto !important; }
html[data-diseno="mezcla"] .hm-reg img{ aspect-ratio:auto !important; height:100% !important; }
html[data-diseno="mezcla"] .hm-reg p{ display:none !important; }
}
html[data-diseno="mezcla"] .cx-sh-t{ margin-top:0 !important; }
html[data-diseno="mezcla"] .cx-sh .pp-mob{ margin:0 !important; }
html[data-diseno="mezcla"] .cx-sh .cx-cal{ background:var(--mz-noche) !important; color:#F4EFE3; padding:1rem 1.2rem 1.1rem !important; border-radius:0 !important; }
html[data-diseno="mezcla"] .cx-sh .cx-cal .cx-lab{ color:var(--mz-oro) !important; }
html[data-diseno="mezcla"] .cx-sh .cx-cal .cx-legend{ color:rgba(244,239,227,.8) !important; }
html[data-diseno="mezcla"] .cx-sh .cx-caltab tbody th a, html[data-diseno="mezcla"] .cx-sh .cx-caltab tbody th{ color:#F4EFE3 !important; }
html[data-diseno="mezcla"] .cx-sh .cx-caltab th{ color:rgba(244,239,227,.65) !important; }
html[data-diseno="mezcla"] .cx-sh .cx-caltab td.cx-nd{ color:rgba(244,239,227,.65) !important; }
html[data-diseno="mezcla"] .ac-box .ac-note, html[data-diseno="mezcla"] .ac-box p{ color:var(--mz-gris) !important; font-size:13px !important; max-width:none !important; margin:.8rem 0 0 !important; }
html[data-diseno="mezcla"] .ac-box .ac-note a{ color:var(--mz-verde) !important; }
html[data-diseno="mezcla"] .ac-box{ padding:1.4rem !important; border-radius:0 !important; }
/* ===========================================================
26 · CORRECCIONES MÓVIL Y CUADRÍCULAS (07/10/2026)
Tras la revisión de Martín en iPhone: sin desplazamiento
lateral, hero móvil con foto corta y sin botones, textos
nunca sobre foto en móvil, fotos sin recortar, catálogo y
documentación en cuadrícula, tarjetas de contacto visibles,
barra inferior legible, sin CTA en el menú desplegable.
=========================================================== */
/* 26.1 · nada se sale de la pantalla ------------------------- */
html[data-diseno="mezcla"]{ overflow-x:clip; }
html[data-diseno="mezcla"] body{ overflow-x:clip; }
html[data-diseno="mezcla"] .mz-mos, html[data-diseno="mezcla"] .mz-pigs, html[data-diseno="mezcla"] .mz-strip,
html[data-diseno="mezcla"] .mz-cols, html[data-diseno="mezcla"] .mz-banda .px-wrap, html[data-diseno="mezcla"] .mz-datos .px-wrap{ max-width:100%; min-width:0; }
html[data-diseno="mezcla"] .mz-pigs{ grid-template-columns:repeat(4,minmax(0,1fr)); }
html[data-diseno="mezcla"] .mz-pigs a{ min-width:0; overflow-wrap:anywhere; }
html[data-diseno="mezcla"] .mz-banda .px-wrap{ grid-template-columns:repeat(4,minmax(0,1fr)); }
html[data-diseno="mezcla"] .mz-mas .mz-b{ white-space:normal; text-align:center; line-height:1.25; padding:.7rem 1.3rem !important; min-height:46px; }
/* 26.2 · mosaico de la portada: cuadrados iguales, foto entera -- */
html[data-diseno="mezcla"] .mz-mos{ grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:auto; gap:1.1rem; }
html[data-diseno="mezcla"] .mz-it{ display:block; min-width:0; }
html[data-diseno="mezcla"] .mz-it.big, html[data-diseno="mezcla"] .mz-it.med, html[data-diseno="mezcla"] .mz-it.sm{ grid-column:auto; grid-row:auto; }
html[data-diseno="mezcla"] .mz-it img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block; }
html[data-diseno="mezcla"] .mz-it .pig{ height:22%; }
html[data-diseno="mezcla"] .mz-it .t{ display:block; margin-top:.55rem; }
html[data-diseno="mezcla"] .mz-it .t > div{ min-width:0; }
html[data-diseno="mezcla"] .mz-it b, html[data-diseno="mezcla"] .mz-it.big b{ display:block; font:700 15px/1.25 var(--mz-tit); color:var(--mz-tinta); }
html[data-diseno="mezcla"] .mz-it i{ display:block; font:italic 400 12.5px/1.3 var(--mz-body); color:var(--mz-gris); margin-top:.1rem; }
html[data-diseno="mezcla"] .mz-it .pr, html[data-diseno="mezcla"] .mz-it.big .pr{ display:block; white-space:normal; margin-top:.3rem; font:500 13px/1.3 var(--mz-mono); color:var(--mz-tinta); }
/* 26.3 · regiones: foto menos recortada ----------------------- */
html[data-diseno="mezcla"] .hm-reg img{ aspect-ratio:16/9 !important; }
/* 26.4 · menú desplegable sin «Solicitar oferta» (ya está en la barra inferior) */
@media (max-width:1119px){ html[data-diseno="mezcla"] .px-nav .px-nav-cta{ display:none !important; } }
/* 26.5 · barra inferior: texto centrado y flecha debajo ------- */
@media (max-width:760px){
html[data-diseno="mezcla"] .pp-tabbar{ background:var(--mz-noche) !important; border-top-color:rgba(213,181,72,.35) !important; }
html[data-diseno="mezcla"] .pp-tabbar a{ font:600 11px/1.1 var(--mz-tit) !important; }
html[data-diseno="mezcla"] .pp-tabbar .pp-tb-cta{ flex-direction:column-reverse; justify-content:center; gap:2px; padding:4px 6px; border-radius:12px; font-size:12px !important; line-height:1.1 !important; }
html[data-diseno="mezcla"] .pp-tabbar .pp-tb-cta span{ display:block; text-align:center; white-space:normal; max-width:100%; }
html[data-diseno="mezcla"] .pp-tabbar .pp-tb-cta svg{ width:15px; height:15px; }
}
/* 26.6 · catálogo en cuadrícula (data-ficha="cuadro") ---------- */
html[data-diseno="mezcla"] .pp-bg-blanco.cx, html[data-diseno="mezcla"] .px-sec.cx{ background:var(--mz-crema) !important; }
html[data-diseno="mezcla"] .pp-bar{ background:rgba(244,239,227,.96) !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-list{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:1rem !important; margin-top:1rem !important; align-items:stretch !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-card{ display:flex !important; flex-direction:column !important; grid-template-columns:none !important; padding:0 !important; gap:0 !important; min-width:0; background:#fff !important; border:1px solid #E3DDCD !important; position:relative; }
html[data-diseno="mezcla"] #body .cx-store .cx-card:hover{ transform:none; box-shadow:0 10px 24px -16px rgba(20,36,27,.4) !important; border-color:#CFC8B4 !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-media{ width:100% !important; height:auto !important; aspect-ratio:1 !important; border-radius:0 !important; overflow:hidden; background:#fff !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-media img{ width:100% !important; height:100% !important; aspect-ratio:1 !important; object-fit:cover !important; border-radius:0 !important; display:block; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-media::before{ height:22%; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-body{ display:block !important; padding:.85rem .95rem .9rem !important; flex:1 1 auto; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-body > h3{ font:700 16px/1.25 var(--mz-tit) !important; letter-spacing:-.01em !important; color:var(--mz-tinta) !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-body > .cx-sci{ font:italic 400 12.5px/1.3 var(--mz-body) !important; color:var(--mz-gris) !important; margin:.15rem 0 0 !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-body > .pp-cd{ display:block !important; margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--mz-linea); }
html[data-diseno="mezcla"] .pp-cd b{ font:600 15px/1.25 var(--mz-mono) !important; color:var(--mz-tinta) !important; }
html[data-diseno="mezcla"] .pp-cd small{ font:500 11px/1.3 var(--mz-mono) !important; color:var(--mz-gris) !important; margin-top:.25rem; letter-spacing:0 !important; }
html[data-diseno="mezcla"] .pp-cd i{ display:block; font:400 12.5px/1.4 var(--mz-body); font-style:normal; color:#5a6a5e; margin-top:.45rem; }
html[data-diseno="mezcla"] #body .cx-store .pp-cd-go{ display:flex !important; align-items:center; justify-content:center; gap:.4rem; min-height:36px; border-top:1px solid var(--mz-linea); color:var(--mz-verde); font:700 12px/1 var(--mz-tit); background:#FBF9F4; width:auto; height:auto; border-radius:0; position:static; }
html[data-diseno="mezcla"] #body .cx-store .pp-cd-go::before{ content:"Ficha técnica"; }
html[lang="en"][data-diseno="mezcla"] #body .cx-store .pp-cd-go::before{ content:"Technical sheet"; }
html[data-diseno="mezcla"] #body .cx-store .pp-cd-go svg{ width:14px; height:14px; }
html[data-diseno="mezcla"] #body .cx-store .cx-card:hover .pp-cd-go{ background:var(--mz-verde); color:#fff; }
/* colores de familia: cabecera y filete de la foto */
html[data-diseno="mezcla"] .cx-sec[data-sec="s1"]{ --c:var(--mz-curcuma); --ink:var(--mz-tinta); }
html[data-diseno="mezcla"] .cx-sec[data-sec="s2"]{ --c:var(--mz-cochinilla); --ink:#fff; }
html[data-diseno="mezcla"] .cx-sec[data-sec="s3"]{ --c:var(--mz-maiz); --ink:#fff; }
html[data-diseno="mezcla"] .cx-sec[data-sec="s4"]{ --c:var(--mz-achiote); --ink:#fff; }
html[data-diseno="mezcla"] .cx-sec[data-sec="s5"]{ --c:var(--mz-verde); --ink:#fff; }
html[data-diseno="mezcla"] .cx-sec[data-sec="s6"]{ --c:var(--mz-noche); --ink:#fff; }
html[data-diseno="mezcla"] #body .cx-sec .cx-card{ --c:inherit; }
html[data-diseno="mezcla"] .cx-sh{ background:var(--c,var(--mz-verde)) !important; border:0 !important; color:var(--ink,#fff); }
html[data-diseno="mezcla"] .cx-sh-t{ border-left:0 !important; padding:1.5rem 1.6rem 1.2rem !important; color:var(--ink,#fff) !important; }
html[data-diseno="mezcla"] .cx-sh-n{ color:var(--ink,#fff) !important; opacity:.8 !important; }
html[data-diseno="mezcla"] .cx-sh h2{ color:var(--ink,#fff) !important; }
html[data-diseno="mezcla"] .cx-sh .pp-mob > summary{ color:var(--ink,#fff) !important; background:rgba(0,0,0,.14) !important; border:0 !important; border-radius:0 !important; margin:0 1rem 1rem !important; }
html[data-diseno="mezcla"] .cx-sh .cx-cal{ margin:0 !important; }
html[data-diseno="mezcla"] .cx-terms, html[data-diseno="mezcla"] .px-wrap > .cx-terms{ color:var(--mz-cuerpo); }
@media (min-width:761px) and (max-width:1119px){ html[data-diseno="mezcla"] #body .cx-store .cx-list{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:.8rem !important; } }
/* 26.7 · documentación en cuadrícula --------------------------- */
html[data-diseno="mezcla"] .dk-list li{ border-radius:0 !important; border-color:#E3DDCD !important; }
html[data-diseno="mezcla"] #normativa .px-relojes-list li{ min-width:0; }
html[data-diseno="mezcla"] #normativa .px-fecha{ white-space:normal !important; line-height:1.35 !important; max-width:100%; }
/* 26.8 · contacto: tarjetas que se vean ------------------------ */
html[data-diseno="mezcla"] .px-contact{ background:var(--mz-crema) !important; }
html[data-diseno="mezcla"] .pp-fcard{ background:#fff !important; border:1px solid #D9D3C3 !important; border-top:5px solid var(--mz-oro) !important; border-radius:0 !important; box-shadow:0 14px 34px -22px rgba(20,36,27,.45) !important; padding:1.5rem 1.4rem 1.6rem !important; }
html[data-diseno="mezcla"] .pp-fcard.is-prov{ border-top-color:var(--mz-verde) !important; }
html[data-diseno="mezcla"] .pp-fcard h2{ font-size:26px !important; margin:0 0 .3rem !important; }
html[data-diseno="mezcla"] .pp-fcard .pp-sub{ color:var(--mz-cuerpo) !important; font:400 15px/1.5 var(--mz-body) !important; margin:0 0 1.1rem !important; }
html[data-diseno="mezcla"] .pp-strip{ background:var(--mz-noche) !important; border-radius:0 !important; }
/* 26.9 · MÓVIL ------------------------------------------------- */
@media (max-width:900px){
/* hero de la portada: foto corta y entera arriba, texto debajo, sin botones */
html[data-diseno="mezcla"] .mz-hero{ height:auto !important; display:block; }
html[data-diseno="mezcla"] .mz-hero-bg{ position:static !important; width:100% !important; height:auto !important; aspect-ratio:auto !important; object-fit:unset !important; display:block; }
html[data-diseno="mezcla"] .mz-hero::after{ content:none !important; }
html[data-diseno="mezcla"] .mz-hero-in{ padding-block:1.3rem 1.5rem !important; }
html[data-diseno="mezcla"] .mz-acts{ display:none !important; }
html[data-diseno="mezcla"] .mz-hero h1{ font-size:30px; max-width:none; margin:.4rem 0 .7rem; }
html[data-diseno="mezcla"] .mz-lead{ font-size:15.5px; max-width:none; margin:0; }
/* banner interior: foto entera arriba, texto sobre fondo liso */
html[data-diseno="mezcla"] .pg-hero, html[data-diseno="mezcla"] .ac-hero{ display:block !important; }
html[data-diseno="mezcla"] .pg-hero > img, html[data-diseno="mezcla"] .ac-hero > img{ position:static !important; inset:auto !important; width:100% !important; height:auto !important; aspect-ratio:auto !important; object-fit:unset !important; display:block !important; }
html[data-diseno="mezcla"] .pg-hero::after, html[data-diseno="mezcla"] .ac-hero::after, html[data-diseno="mezcla"] .pg-hero::before, html[data-diseno="mezcla"] .ac-hero::before{ content:none !important; display:none !important; }
html[data-diseno="mezcla"] .pg-hero > .px-wrap{ min-height:0 !important; padding-block:1.2rem 1.4rem !important; display:block !important; }
html[data-diseno="mezcla"] .ac-hero .ac-in{ min-height:0 !important; padding-block:1.2rem 1.4rem !important; }
html[data-diseno="mezcla"] .pg-hero h1, html[data-diseno="mezcla"] .ac-in h1{ font-size:28px !important; margin:.3rem 0 .6rem !important; }
html[data-diseno="mezcla"] .pg-hero p, html[data-diseno="mezcla"] .ac-in p{ font-size:15px !important; }
/* mosaico: dos columnas, foto cuadrada entera */
html[data-diseno="mezcla"] .mz-mos{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-rows:auto !important; gap:.9rem .7rem !important; }
html[data-diseno="mezcla"] .mz-it.big, html[data-diseno="mezcla"] .mz-it.med{ grid-column:auto !important; grid-row:auto !important; }
html[data-diseno="mezcla"] .mz-it b, html[data-diseno="mezcla"] .mz-it.big b{ font-size:14px; }
html[data-diseno="mezcla"] .mz-it .pr, html[data-diseno="mezcla"] .mz-it.big .pr{ font-size:12.5px; }
html[data-diseno="mezcla"] .mz-it i{ font-size:11.5px; }
html[data-diseno="mezcla"] .mz-mas .mz-b{ width:100%; }
/* tira de proceso: pie debajo de la foto, nunca encima */
html[data-diseno="mezcla"] .mz-strip{ gap:8px; padding:0 8px; }
html[data-diseno="mezcla"] .mz-strip figure{ background:var(--mz-noche); }
html[data-diseno="mezcla"] .mz-strip img{ aspect-ratio:3/2; }
html[data-diseno="mezcla"] .mz-strip figcaption{ position:static; background:var(--mz-noche); padding:.5rem .65rem .65rem; font-size:12px; }
html[data-diseno="mezcla"] .mz-strip figcaption span{ display:inline; margin-right:.4rem; }
/* regiones: foto entera arriba */
html[data-diseno="mezcla"] .hm-reg{ display:block !important; }
html[data-diseno="mezcla"] .hm-reg img{ width:100% !important; height:auto !important; aspect-ratio:auto !important; }
html[data-diseno="mezcla"] .hm-reg p{ display:block !important; }
/* banda de pigmentos y cifras: dos columnas que no se salen */
html[data-diseno="mezcla"] .mz-pigs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
html[data-diseno="mezcla"] .mz-banda .px-wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* contacto */
html[data-diseno="mezcla"] .pp-fcard{ padding:1.2rem 1rem 1.3rem !important; }
html[data-diseno="mezcla"] .pp-fcard h2{ font-size:22px !important; }
}
@media (max-width:760px){
/* catálogo: dos columnas */
html[data-diseno="mezcla"] #body .cx-store .cx-list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.6rem !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-body{ padding:.6rem .65rem .65rem !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-body > h3{ font-size:14px !important; }
html[data-diseno="mezcla"] #body .cx-store .cx-card .cx-body > .cx-sci{ font-size:11.5px !important; }
html[data-diseno="mezcla"] .pp-cd b{ font-size:13px !important; }
html[data-diseno="mezcla"] .pp-cd small{ font-size:10px !important; }
html[data-diseno="mezcla"] .pp-cd i{ display:none; }
html[data-diseno="mezcla"] #body .cx-store .pp-cd-go{ min-height:32px; font-size:11px; }
html[data-diseno="mezcla"] .cx-sh-t{ padding:1rem 1rem .8rem !important; }
html[data-diseno="mezcla"] .cx-sh .pp-mob > summary{ margin:0 .8rem .8rem !important; }
/* documentación: documentos y normativa en dos columnas, sin «Ver N más» en la normativa */
html[data-diseno="mezcla"] .dk-list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.5rem !important; }
html[data-diseno="mezcla"] .dk-list li{ display:block !important; padding:.7rem .7rem .8rem !important; min-width:0; }
html[data-diseno="mezcla"] .dk-list .dk-n{ display:block; font:500 11px/1 var(--mz-mono); color:var(--mz-gris); margin-bottom:.35rem; }
html[data-diseno="mezcla"] .dk-list b{ font-size:13.5px !important; line-height:1.3 !important; margin-bottom:.35rem !important; }
html[data-diseno="mezcla"] .dk-list em{ font-size:9.5px !important; white-space:normal !important; line-height:1.3 !important; }
html[data-diseno="mezcla"] .dk-list p{ font-size:13px !important; line-height:1.45 !important; margin-top:.4rem !important; }
html[data-diseno="mezcla"] #normativa .px-relojes-list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.5rem !important; }
html[data-diseno="mezcla"] #body #normativa .px-relojes-list li.pp-cut{ display:block !important; }
html[data-diseno="mezcla"] #normativa .pp-more{ display:none !important; }
html[data-diseno="mezcla"] #normativa .px-relojes-list li{ padding:.75rem .7rem .8rem !important; }
html[data-diseno="mezcla"] #normativa .px-reloj-h b{ display:block; font-size:13.5px !important; line-height:1.3 !important; }
html[data-diseno="mezcla"] #normativa .px-fecha{ font-size:9.5px !important; letter-spacing:.04em !important; padding:.3rem .5rem !important; border-radius:6px !important; margin-top:.35rem !important; display:inline-block !important; }
html[data-diseno="mezcla"] #normativa .px-reloj-n{ font-size:11px !important; }
html[data-diseno="mezcla"] #normativa .px-relojes-list li > p:last-child{ font-size:13px !important; line-height:1.45 !important; }
}
/* ===== Calendario de cosecha en móvil (07/10/2026): botón transparente verde y tabla apilada ===== */
@media (max-width:760px){
html[data-diseno="mezcla"] .cx-sh details.pp-mob > summary,
.cx-sh details.pp-mob > summary{
background:transparent !important; border:1.5px solid var(--pp-verde) !important; color:var(--pp-verde) !important;
border-radius:10px !important; margin:0 .9rem .9rem !important; padding:.8rem 1rem !important;
}
.cx-sh details.pp-mob > summary::after{ color:var(--pp-verde) !important; }
.cx-sh details.pp-mob[open] > summary{ margin-bottom:.4rem !important; }
/* la tabla pasa a filas apiladas: nombre arriba, doce casillas debajo */
.pp-acc-mob .px-scroll{ overflow:visible; }
.pp-acc-mob .cx-caltab{ min-width:0 !important; width:100% !important; border-spacing:0; display:block; }
.pp-acc-mob .cx-caltab thead{ display:none; }
.pp-acc-mob .cx-caltab tbody{ display:block; }
.pp-acc-mob .cx-caltab tbody tr{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; margin:0 0 .7rem; }
.pp-acc-mob .cx-caltab tbody th{ grid-column:1 / -1; width:auto !important; white-space:normal !important; padding:0 0 .25rem !important; font-size:.84rem !important; }
.pp-acc-mob .cx-caltab td{ display:flex; align-items:center; justify-content:center; height:22px !important; border-radius:3px; font:600 .58rem/1 var(--mono,monospace); color:rgba(255,255,255,.55); }
.pp-acc-mob .cx-caltab td.cx-c, .pp-acc-mob .cx-caltab td.cx-p{ color:rgba(0,0,0,.55); }
.pp-acc-mob .cx-caltab td:nth-child(2)::before{content:"E"} .pp-acc-mob .cx-caltab td:nth-child(3)::before{content:"F"}
.pp-acc-mob .cx-caltab td:nth-child(4)::before{content:"M"} .pp-acc-mob .cx-caltab td:nth-child(5)::before{content:"A"}
.pp-acc-mob .cx-caltab td:nth-child(6)::before{content:"M"} .pp-acc-mob .cx-caltab td:nth-child(7)::before{content:"J"}
.pp-acc-mob .cx-caltab td:nth-child(8)::before{content:"J"} .pp-acc-mob .cx-caltab td:nth-child(9)::before{content:"A"}
.pp-acc-mob .cx-caltab td:nth-child(10)::before{content:"S"} .pp-acc-mob .cx-caltab td:nth-child(11)::before{content:"O"}
.pp-acc-mob .cx-caltab td:nth-child(12)::before{content:"N"} .pp-acc-mob .cx-caltab td:nth-child(13)::before{content:"D"}
html[lang="en"] .pp-acc-mob .cx-caltab td:nth-child(2)::before{content:"J"} html[lang="en"] .pp-acc-mob .cx-caltab td:nth-child(6)::before{content:"M"}
html[lang="en"] .pp-acc-mob .cx-caltab td:nth-child(7)::before{content:"J"} html[lang="en"] .pp-acc-mob .cx-caltab td:nth-child(10)::before{content:"S"}
.pp-acc-mob .cx-caltab td.cx-nd{ grid-column:1 / -1; display:block; height:auto !important; padding:.1rem 0 0 !important; font:italic 400 .76rem/1.3 var(--sans,sans-serif) !important; color:#8fa596 !important; }
.pp-acc-mob .cx-caltab td.cx-nd::before{ content:none; }
.pp-acc-mob .cx-cal-h{ margin-bottom:.8rem; }
}
/* ===========================================================
27 · CATÁLOGO MÓVIL Y AJUSTE A PANTALLA (07/10/2026)
El calendario de cosecha no se veía en móvil (una regla base lo
ocultaba a ≤700 px aunque el plegable se abriera). Botón «Ver
calendario de cosecha» transparente, borde y letra verdes, sobre
el fondo crema; cabecera de familia solo en el bloque del título.
Chips de familia en varias filas y cinta de productos oculta en
móvil: nada se mueve ni queda cortado en el borde de la pantalla.
=========================================================== */
html[data-diseno="mezcla"] .cx-sh{ background:transparent !important; overflow:visible !important; }
html[data-diseno="mezcla"] .cx-sh-t{ background:var(--c,var(--mz-verde)) !important; }
html[data-diseno="mezcla"] .cx-store .cx-sh .cx-cal{ display:block !important; }
html[data-diseno="mezcla"] .cx-sh .pp-mob{ background:transparent !important; border:0 !important; margin:0 !important; border-radius:0 !important; overflow:visible !important; }
@media (max-width:760px){
html[data-diseno="mezcla"] .cx-sh details.pp-mob > summary{
display:flex !important; justify-content:center !important; align-items:center !important; gap:.5rem !important;
width:100%; box-sizing:border-box; margin:.7rem 0 0 !important; padding:.75rem 1rem !important;
background:transparent !important; border:1.5px solid var(--mz-verde) !important; border-radius:999px !important;
color:var(--mz-verde) !important; font:700 14px/1.2 var(--mz-tit) !important;
}
html[data-diseno="mezcla"] .cx-sh details.pp-mob > summary::after{ color:var(--mz-verde) !important; font-size:1.1rem !important; }
html[data-diseno="mezcla"] .cx-sh details.pp-mob[open] > summary{ margin-bottom:.6rem !important; }
html[data-diseno="mezcla"] .cx-sh .pp-mob > .pp-mob-b{ padding:0 !important; }
html[data-diseno="mezcla"] .cx-store .cx-sh .cx-cal{ padding:.9rem .9rem 1rem !important; }
html[data-diseno="mezcla"] .pp-chips{ flex-wrap:wrap !important; overflow:visible !important; gap:.4rem !important; padding-bottom:.4rem !important; }
html[data-diseno="mezcla"] .px-ticker{ display:none !important; }
html[data-diseno="mezcla"] .px-wrap{ max-width:100% !important; }
}
/* ===========================================================
28 · HERO MÓVIL COMO EN ESCRITORIO, SIN BOTONES (07/10/2026)
Martín prefiere la foto a sangre con el texto encima (la primera
versión); se quitan solo los botones y se oscurece el degradado
para que el texto se lea sobre cualquier zona de la foto.
=========================================================== */
@media (max-width:900px){
html[data-diseno="mezcla"] .mz-hero{ height:clamp(470px,70vh,600px) !important; display:grid !important; align-items:end !important; overflow:hidden !important; }
html[data-diseno="mezcla"] .mz-hero-bg{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:66% 50% !important; }
html[data-diseno="mezcla"] .mz-hero::after{ content:"" !important; position:absolute; inset:0; z-index:1;
background:linear-gradient(0deg, rgba(29,77,53,1) 0%, rgba(29,77,53,1) 50%, rgba(29,77,53,.15) 61%, rgba(29,77,53,0) 68%) !important; }
html[data-diseno="mezcla"] .mz-hero-in{ position:relative; z-index:3; padding-block:0 1.7rem !important; }
html[data-diseno="mezcla"] .mz-acts{ display:none !important; }
html[data-diseno="mezcla"] .mz-hero h1{ font-size:clamp(30px,8.4vw,38px); line-height:1.02; max-width:none; margin:.5rem 0 .7rem; }
html[data-diseno="mezcla"] .mz-lead{ font-size:15.5px; line-height:1.5; color:rgba(244,239,227,.94); max-width:none; margin:0; }
}
/* ===========================================================
29 · BARRA SUPERIOR MÓVIL: ES / EN junto al menú (07/10/2026)
Logo a la izquierda; candado, selector de idioma y menú agrupados
a la derecha. El idioma activo va en oro dentro de una píldora fina.
=========================================================== */
@media (max-width:1119px){
html[data-diseno="mezcla"] .px-top-in{ gap:.45rem !important; }
html[data-diseno="mezcla"] .px-top-in .pp-top-acc{ margin-left:auto !important; }
html[data-diseno="mezcla"] .px-lang{ margin-left:0 !important; padding:2px !important; background:transparent !important; border:1px solid rgba(244,239,227,.38) !important; border-radius:999px !important; gap:0 !important; }
html[data-diseno="mezcla"] .px-lang a{ display:inline-flex !important; align-items:center; justify-content:center; min-height:30px !important; min-width:36px; padding:0 .5rem !important; border-radius:999px !important; font:700 11.5px/1 var(--mz-tit) !important; letter-spacing:.04em; color:rgba(244,239,227,.8) !important; background:transparent !important; }
html[data-diseno="mezcla"] .px-lang a[aria-current]{ display:inline-flex !important; background:var(--mz-oro) !important; color:var(--mz-tinta) !important; }
html[data-diseno="mezcla"] .px-burger{ margin-left:0 !important; }
}
/* ===========================================================
30 · PRECIO COMERCIAL Y MENÚ «CATÁLOGO DE PRODUCTOS» (07/10/2026)
El precio deja la monoespaciada: Montserrat 800 en verde, con la
unidad en versalita pequeña y la etiqueta «FOB Callao» encima.
=========================================================== */
html[data-diseno="mezcla"] .pp-cd b{ display:block; font:800 19px/1.1 var(--mz-tit) !important; color:var(--mz-verde) !important; letter-spacing:-.01em !important; }
html[data-diseno="mezcla"] .pp-cd b::before{ content:"FOB Callao"; display:block; font:700 9.5px/1 var(--mz-tit); letter-spacing:.14em; text-transform:uppercase; color:var(--mz-oro2); margin-bottom:.3rem; }
html[data-diseno="mezcla"] .pp-u{ font:700 11px/1 var(--mz-tit); letter-spacing:.05em; color:#5a6a5e; margin-left:.25rem; text-transform:uppercase; white-space:nowrap; }
html[data-diseno="mezcla"] .pp-cd small:not(.pp-u){ font:500 10.5px/1.3 var(--mz-mono) !important; }
html[data-diseno="mezcla"] .mz-it .pr, html[data-diseno="mezcla"] .mz-it.big .pr{ font:800 14.5px/1.2 var(--mz-tit) !important; color:var(--mz-verde) !important; letter-spacing:-.01em; }
html[data-diseno="mezcla"] .mz-it .pr small{ font:700 10px/1 var(--mz-tit); letter-spacing:.05em; color:#5a6a5e; margin-left:.2rem; text-transform:uppercase; }
html[data-diseno="mezcla"] .pp-fi-price b{ font:800 30px/1 var(--mz-tit) !important; color:var(--mz-verde) !important; letter-spacing:-.02em !important; }
html[data-diseno="mezcla"] .pp-fi-price .pp-u{ font-size:13px; }
html[data-diseno="mezcla"] .pp-fi-price > span{ font:600 11px/1.4 var(--mz-tit) !important; letter-spacing:.08em; text-transform:uppercase; color:#5a6a5e !important; }
@media (max-width:760px){
html[data-diseno="mezcla"] .pp-cd b{ font-size:16px !important; }
html[data-diseno="mezcla"] .pp-cd b::before{ font-size:9px; margin-bottom:.25rem; }
html[data-diseno="mezcla"] .pp-u{ font-size:10px; }
html[data-diseno="mezcla"] .mz-it .pr, html[data-diseno="mezcla"] .mz-it.big .pr{ font-size:13.5px !important; }
}
/* el menú de escritorio con «Catálogo de productos» */
html[data-diseno="mezcla"] .px-nav > ul > li > a{ font-size:12.5px !important; }
@media (min-width:1120px) and (max-width:1320px){
html[data-diseno="mezcla"] .px-nav > ul{ gap:.55rem !important; }
html[data-diseno="mezcla"] .px-nav > ul > li > a{ font-size:11.5px !important; }
}
/* 30.1 · la unidad va en la misma línea que la cifra (una regla antigua ponía los del precio en bloque) */
html[data-diseno="mezcla"] .pp-cd b .pp-u, html[data-diseno="mezcla"] .pp-u{ display:inline !important; margin-top:0 !important; vertical-align:baseline; }
/* 31 · cabecera del catálogo con el texto de la portada (07/10/2026) */
html[data-diseno="mezcla"] .pg-hero h1 em{ font-style:normal !important; color:var(--mz-oro) !important; }
html[data-diseno="mezcla"] [data-pig="achiote"] .pg-hero h1{ max-width:22ch !important; font-size:clamp(30px,3.4vw,44px) !important; }
html[data-diseno="mezcla"] [data-pig="achiote"] .pg-hero p{ max-width:60ch !important; }
/* ===========================================================
32 · CATÁLOGO MÓVIL: LA BARRA DE BÚSQUEDA NO SE QUEDA FIJA (07/10/2026)
Con las familias en varias filas la barra pegajosa medía 372 px y
tapaba media pantalla al bajar. En móvil va en el flujo de la página.
=========================================================== */
@media (max-width:760px){
html[data-diseno="mezcla"] .pp-bar{ position:static !important; top:auto !important; transform:none !important; box-shadow:none !important; backdrop-filter:none !important; border-bottom:0 !important; background:transparent !important; margin-inline:0 !important; }
html[data-diseno="mezcla"] .pp-bar.is-hidden{ transform:none !important; }
html[data-diseno="mezcla"] .pp-bar-in{ padding-block:.4rem 0 !important; }
html[data-diseno="mezcla"] .pp-fwrap, html[data-diseno="mezcla"] .pp-fmenu{ display:none !important; }
}
/* ===========================================================
33 · HERO DE INICIO (07/10/2026): sin arcos, foto nueva y
título + botones que caben en pantalla en escritorio.
=========================================================== */
/* quitar las dos líneas doradas (arco del swoosh) en TODAS las portadas */
html[data-diseno="mezcla"] .mz-arc{ display:none !important; }
html[data-diseno="mezcla"] .pg-hero::before,
html[data-diseno="mezcla"] .ac-hero::before{ content:none !important; display:none !important; background:none !important; }
@media (min-width:901px){
/* la altura la marca el contenido: los botones nunca se cortan */
html[data-diseno="mezcla"] .mz-hero{ height:auto !important; min-height:clamp(470px,64vh,600px) !important; align-items:end !important; padding-top:1.8rem; }
html[data-diseno="mezcla"] .mz-hero-in{ padding-block:0 2.2rem !important; }
html[data-diseno="mezcla"] .mz-hero h1{ font-size:clamp(32px,3.3vw,50px) !important; line-height:1.03 !important; max-width:17ch !important; margin:.45rem 0 .9rem !important; }
html[data-diseno="mezcla"] .mz-lead{ font-size:16.5px !important; line-height:1.5 !important; max-width:46ch !important; margin:0 0 1.2rem !important; }
html[data-diseno="mezcla"] .mz-acts{ gap:.6rem !important; flex-wrap:wrap; }
html[data-diseno="mezcla"] .mz-acts .mz-b, html[data-diseno="mezcla"] .mz-hero .hm-puno-b{ min-height:46px !important; }
}
/* ===========================================================
34 · HERO DE INICIO: VERDE LIMPIO, FOTO NÍTIDA (rev. 07/10/2026)
Martín: el velo verde hacía «efecto niebla» y difuminaba la foto
bajo el título. Ahora la foto se ve NÍTIDA en una zona amplia (sin
velo) y el verde queda DEFINIDO solo detrás del texto, con
transición rápida (sin banda translúcida intermedia que da niebla)
+ sombra de texto para legibilidad. Verde de marca #1D4D35.
=========================================================== */
html[data-diseno="mezcla"] .mz-hero-bg{ object-position:72% 42% !important; }
/* bloque verde SÓLIDO tras el texto = legibilidad perfecta y verde macizo;
la foto queda 100% nítida al lado (sin velo). Sombra solo para el pie,
que va sobre la foto. */
html[data-diseno="mezcla"] .mz-pie{ color:rgba(244,239,227,.9) !important; text-shadow:0 1px 10px rgba(8,26,17,.85), 0 0 2px rgba(8,26,17,.8); }
@media (min-width:901px){
html[data-diseno="mezcla"] .mz-hero::after{
background:linear-gradient(90deg, rgba(29,77,53,1) 0%, rgba(29,77,53,1) 42%, rgba(29,77,53,.18) 53%, rgba(29,77,53,0) 60%) !important;
}
}
/* ===== 27 · 07/10/2026 · texto sobre la foto, sin velo de color ===== */
html[data-diseno="mezcla"] .mz-hero::after,
html[data-diseno="mezcla"] .pg-hero::after,
html[data-diseno="mezcla"] .ac-hero::after,
.hm-hero::after, .pg-hero::after, .ac-hero::after{
content:none !important; background:none !important;
}
html[data-diseno="mezcla"] .mz-hero h1, html[data-diseno="mezcla"] .mz-hero .mz-k,
html[data-diseno="mezcla"] .mz-hero .mz-lead, html[data-diseno="mezcla"] .mz-hero .mz-pie,
html[data-diseno="mezcla"] .mz-hero .mz-b-ln,
.pg-hero h1, .pg-hero p, .pg-hero .pg-k,
.ac-hero h1, .ac-hero p, .ac-hero .ac-k{
text-shadow:0 1px 1px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.8), 0 2px 16px rgba(0,0,0,.7), 0 0 50px rgba(0,0,0,.55);
}
/* ===========================================================
35 · AJUSTES FINALES HERO · 07/10/2026 (Martín)
Verde PUNEX auténtico OSCURO en un velo DEGRADADO SUAVE (ni
bloque sólido ni sin-velo): se lee el título y se ve la foto.
Título en Inter (más legible que Montserrat 800 apretado).
Va la última de todo: manda sobre las secciones 26/28/34.
=========================================================== */
html[data-diseno="mezcla"] .mz-hero h1{ font-family:"Inter",system-ui,sans-serif !important; font-weight:800 !important; letter-spacing:-.015em !important; }
html[data-diseno="mezcla"] .mz-hero .mz-k{ font-family:"Inter",system-ui,sans-serif !important; }
html[data-diseno="mezcla"] .mz-hero h1,
html[data-diseno="mezcla"] .mz-hero .mz-k,
html[data-diseno="mezcla"] .mz-lead{ text-shadow:0 1px 2px rgba(6,20,13,.55), 0 2px 16px rgba(6,20,13,.45) !important; }
html[data-diseno="mezcla"] .mz-pie{ text-shadow:0 1px 10px rgba(6,20,13,.85) !important; }
@media (min-width:901px){
html[data-diseno="mezcla"] .mz-hero::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important;
background:linear-gradient(90deg, rgba(18,48,33,.9) 0%, rgba(18,48,33,.64) 30%, rgba(18,48,33,.26) 50%, rgba(18,48,33,0) 68%) !important; }
}
@media (max-width:900px){
html[data-diseno="mezcla"] .mz-hero::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important;
background:linear-gradient(0deg, rgba(18,48,33,.93) 0%, rgba(18,48,33,.72) 28%, rgba(18,48,33,.3) 54%, rgba(18,48,33,0) 80%) !important; }
}
/* ===========================================================
36 · LEGIBILIDAD GLOBAL · 07/10/2026 (Martín)
· verde un poco MÁS OSCURO en toda la web
· título legible en la PRIMERA imagen de CADA página (heroes
interiores .pg-hero / .ac-hero): foto + velo verde oscuro
degradado + título blanco en Inter
· menos espacio arriba en el hero de inicio
Va la última de todo: manda sobre 25..35.
=========================================================== */
/* verde un poco más oscuro (cabecera, pie, bandas, botones tinta) */
html[data-diseno="mezcla"]{ --mz-noche:#163B28 !important; --mz-tinta:#173A2B !important; --mz-verde:#2B6446 !important; }
/* títulos en Inter en toda la web = más legibles */
html[data-diseno="mezcla"] h1, html[data-diseno="mezcla"] h2, html[data-diseno="mezcla"] h3,
html[data-diseno="mezcla"] .pg-hero h1, html[data-diseno="mezcla"] .ac-hero h1, html[data-diseno="mezcla"] .ac-in h1{
font-family:"Inter",system-ui,sans-serif !important; letter-spacing:-.015em !important;
}
/* HERO DE INICIO: menos espacio arriba */
@media (min-width:901px){
html[data-diseno="mezcla"] .mz-hero{ min-height:clamp(400px,52vh,520px) !important; padding-top:0 !important; }
}
@media (max-width:900px){
html[data-diseno="mezcla"] .mz-hero{ min-height:clamp(380px,56vh,470px) !important; }
}
/* HEROES INTERIORES (.pg-hero / .ac-hero): foto a sangre + velo verde oscuro + título blanco legible */
html[data-diseno="mezcla"] .pg-hero, html[data-diseno="mezcla"] .ac-hero{
position:relative !important; overflow:hidden !important; isolation:isolate !important; background:var(--mz-noche) !important;
}
html[data-diseno="mezcla"] .pg-hero > img, html[data-diseno="mezcla"] .ac-hero > img{
position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
object-fit:cover !important; object-position:50% 42% !important; opacity:1 !important; z-index:0 !important; filter:none !important;
}
html[data-diseno="mezcla"] .pg-hero::after, html[data-diseno="mezcla"] .ac-hero::after{
content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important;
background:linear-gradient(90deg, rgba(12,32,22,.94) 0%, rgba(12,32,22,.76) 40%, rgba(12,32,22,.48) 72%, rgba(12,32,22,.32) 100%) !important;
}
html[data-diseno="mezcla"] .pg-hero .px-wrap, html[data-diseno="mezcla"] .ac-hero .px-wrap{ position:relative !important; z-index:2 !important; }
html[data-diseno="mezcla"] .pg-hero h1, html[data-diseno="mezcla"] .ac-hero h1, html[data-diseno="mezcla"] .ac-in h1{
color:#F4EFE3 !important; font-weight:800 !important; text-shadow:0 1px 2px rgba(4,16,10,.55), 0 2px 18px rgba(4,16,10,.45) !important;
}
html[data-diseno="mezcla"] .pg-hero p, html[data-diseno="mezcla"] .ac-hero p, html[data-diseno="mezcla"] .ac-in p{
color:rgba(244,239,227,.95) !important; text-shadow:0 1px 10px rgba(4,16,10,.65) !important;
}
html[data-diseno="mezcla"] .pg-hero .pg-k, html[data-diseno="mezcla"] .ac-hero .ac-k{ color:var(--mz-oro) !important; }
/* menos blanco: fondo general cálido para que tarjetas y secciones blancas resalten (ritmo visual) */
html[data-diseno="mezcla"] body{ background:#F2EDE2 !important; }
html[data-diseno="mezcla"] .px-sec, html[data-diseno="mezcla"] section{ position:relative; }
/* menos blanco v2: tonos cálidos reales en las secciones (estaban en blanco puro) */
html[data-diseno="mezcla"] body{ background:#EDE7DA !important; }
html[data-diseno="mezcla"] .pp-bg-crema{ background:#F3EDDF !important; }
html[data-diseno="mezcla"] .pp-bg-salvia{ background:#E8EEE5 !important; }
html[data-diseno="mezcla"] .pp-bg-blanco{ background:#FCFBF8 !important; }
/* heroes interiores en MÓVIL: velo más fuerte y uniforme (el texto va a todo el ancho) */
@media (max-width:900px){
html[data-diseno="mezcla"] .pg-hero::after, html[data-diseno="mezcla"] .ac-hero::after{
background:linear-gradient(0deg, rgba(10,28,19,.9) 0%, rgba(10,28,19,.74) 58%, rgba(10,28,19,.6) 100%) !important;
}
}
/* MÓVIL robusto: oscurecer la propia foto del hero interior (elemento real, no pseudo) + velo suave */
@media (max-width:900px){
html[data-diseno="mezcla"] .pg-hero > img, html[data-diseno="mezcla"] .ac-hero > img{ filter:brightness(.58) saturate(1.04) !important; }
html[data-diseno="mezcla"] .pg-hero::after, html[data-diseno="mezcla"] .ac-hero::after{ background:linear-gradient(0deg, rgba(8,24,16,.5) 0%, rgba(8,24,16,.18) 60%, rgba(8,24,16,.06) 100%) !important; }
}
/* ===== El buscador y el filtro mandan sobre cualquier variante de ficha (08/10/2026) =====
Las variantes html[data-diseno]/[data-ficha] fijan display:…!important en .cx-card y le
ganaban al atributo [hidden] que pone catalogo.js: los productos descartados por el
buscador seguían viéndose (buscar "cúrcuma" devolvía la sección entera).
Especificidad deliberadamente por encima de html[data-diseno="x"] #body .cx-store .cx-card. */
html[data-diseno] #body .cx-store .cx-card[hidden],
html[data-ficha] #body .cx-store .cx-card[hidden],
html #body .cx-store .cx-card[hidden],
html[data-diseno] #body .cx-store .cx-sec[hidden],
html[data-ficha] #body .cx-store .cx-sec[hidden],
html #body .cx-store .cx-sec[hidden] { display: none !important; }