/* ==========================================================================
Pinturas Reds — Home
Port estático del canvas de Claude Design "Home Pinturas Reds.dc.html".
Sin React, sin runtime externo. Tokens listos para theme.json de WP.
========================================================================== */
:root{
/* Color */
--red:#E11922;
--red-hot:#FF3A34;
--red-dark:#A20E14;
--ink:#181312;
--ink-2:#221b19;
--ink-3:#2a2220;
--muted:#4a3f3d;
--yellow:#FDE74C;
--green:#1C7C54;
--wa:#25D366; /* verde de marca WhatsApp */
--wa-oscuro:#128C7E; /* el otro verde oficial: legible sobre claro (4.14:1) */
--line:rgba(24,19,18,.16);
--line-soft:rgba(24,19,18,.14);
--line-dark:rgba(255,255,255,.14);
/* Tipografía */
--display:'Bricolage Grotesque',system-ui,sans-serif;
--body:Onest,system-ui,sans-serif;
--mono:'Martian Mono',ui-monospace,monospace;
/* Retícula */
--shell:1600px;
--gutter:32px;
--ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html,body{
margin:0;padding:0;
background:#fff;color:var(--ink);
font-family:var(--body);
-webkit-font-smoothing:antialiased;
/* `clip` y NO `hidden`: hidden convierte al body en contenedor de scroll y
eso ANULA position:sticky en toda la página — el header y el panel de
precios de la carta llevaban sesiones rotos por esta palabra. `clip`
recorta igual pero sin crear contenedor de scroll. */
overflow-x:clip;
}
/* A7: el enlace "tocado en la carta" de la calculadora necesita scroll suave;
scope global porque es un nativo, no hay JS de por medio. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-dark)}
button{font-family:inherit}
/* Anillo de dos capas: blanco + halo tinta. Contrasta sobre blanco, negro Y
rojo (#E11922), donde el rojo brillante era casi invisible. */
:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px rgba(24,19,18,.9)}
img{max-width:100%;display:block}
/* Enlace de salto al contenido: oculto a la vista, accesible al teclado.
z-index por encima del header sticky (z-index:60). */
.salta{position:fixed;top:10px;left:10px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:15px;transform:translateY(-160%);transition:transform .2s var(--ease)}
.salta:focus{transform:translateY(0)}
/* --------------------------------------------------------------- Utilidades */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 16px}
.eyebrow--light{color:rgba(255,255,255,.8)}
.eyebrow--hot{color:var(--red-hot)}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.6vw,54px);letter-spacing:-.026em;line-height:.98;margin:0;font-variation-settings:'opsz' 44}
.h2--sm{font-size:clamp(30px,3.2vw,46px);letter-spacing:-.025em;line-height:1}
.lead{font-size:19px;line-height:1.55;color:var(--muted);margin:18px 0 0}
.lead--onink{color:rgba(255,255,255,.72)}
.lead--onred{color:rgba(255,255,255,1)}
.pill{border-radius:999px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.pill--red{background:var(--red);color:#fff;border:none;padding:18px 32px;font-size:17px}
.pill--red:hover{background:var(--red-dark);color:#fff}
.pill--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink);padding:16.5px 32px;font-size:17px}
.pill--ghost:hover{background:var(--ink);color:#fff}
.pill--ink{background:var(--ink);color:#fff;border:none;padding:16px 28px;font-size:16px}
.pill--ink:hover{background:var(--ink-3);color:#fff}
.pill--onink{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);padding:14px 22px;font-size:15px}
.pill--onink:hover{background:rgba(255,255,255,.1);color:#fff}
.pill--white{background:#fff;color:var(--ink);border:1.5px solid var(--ink);padding:15px;font-size:16px}
.pill--white:hover{background:var(--ink);color:#fff}
/* Glifo OFICIAL de WhatsApp (Simple Icons, CC0 - ver assets/iconos/
LICENSE-simple-icons.txt). Va como MASCARA, no como imagen: en una mascara
solo cuenta el alfa, asi que el color lo pone `background`. Por eso las
sobreescrituras por contexto que YA existian (.drawer__send .dot-wa{background:#fff})
siguen funcionando sin tocar una linea de marcado.
El SVG va EN LINEA como data URI a proposito: styles.css vive en la raiz del
estatico y en assets/ dentro del tema, asi que un url() relativo apuntaria a
un sitio distinto en cada entorno. */
.dot-wa{
width:16px;height:16px;display:block;flex:none;
/* #25D366 sobre blanco da 1.98:1 y el glifo se pierde. #128C7E es el verde
oscuro del MISMO juego de marca de WhatsApp y da 4.14:1 sobre blanco,
3.87 sobre el crema. Se queda el verde brillante donde el fondo es
oscuro o verde, que es donde sí resalta. */
background:var(--wa-oscuro);
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967c-.273-.099-.471-.148-.67.15c-.197.297-.767.966-.94%201.164c-.173.199-.347.223-.644.075c-.297-.15-1.255-.463-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059c-.173-.297-.018-.458.13-.606c.134-.133.298-.347.446-.52s.198-.298.298-.497c.099-.198.05-.371-.025-.52s-.669-1.612-.916-2.207c-.242-.579-.487-.5-.669-.51a13%2013%200%200%200-.57-.01c-.198%200-.52.074-.792.372c-.272.297-1.04%201.016-1.04%202.479c0%201.462%201.065%202.875%201.213%203.074s2.096%203.2%205.077%204.487c.709.306%201.262.489%201.694.625c.712.227%201.36.195%201.871.118c.571-.085%201.758-.719%202.006-1.413s.248-1.289.173-1.413c-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214l-3.741.982l.998-3.648l-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884c2.64%200%205.122%201.03%206.988%202.898a9.82%209.82%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.82%2011.82%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.9%2011.9%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.82%2011.82%200%200%200-3.48-8.413%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967c-.273-.099-.471-.148-.67.15c-.197.297-.767.966-.94%201.164c-.173.199-.347.223-.644.075c-.297-.15-1.255-.463-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059c-.173-.297-.018-.458.13-.606c.134-.133.298-.347.446-.52s.198-.298.298-.497c.099-.198.05-.371-.025-.52s-.669-1.612-.916-2.207c-.242-.579-.487-.5-.669-.51a13%2013%200%200%200-.57-.01c-.198%200-.52.074-.792.372c-.272.297-1.04%201.016-1.04%202.479c0%201.462%201.065%202.875%201.213%203.074s2.096%203.2%205.077%204.487c.709.306%201.262.489%201.694.625c.712.227%201.36.195%201.871.118c.571-.085%201.758-.719%202.006-1.413s.248-1.289.173-1.413c-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214l-3.741.982l.998-3.648l-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884c2.64%200%205.122%201.03%206.988%202.898a9.82%209.82%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.82%2011.82%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.9%2011.9%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.82%2011.82%200%200%200-3.48-8.413%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
/* ---------------------------------------------------- Hover de los botones
Un barrido de luz que cruza el botón, más un tinte verde/amarillo del
sistema. Todo con transform/opacity: no dispara relayout.
El barrido va en ::after para no pisar los ::before existentes. */
.pill{position:relative;overflow:hidden;isolation:isolate;
transition:transform .22s var(--ease), box-shadow .28s var(--ease), background-color .22s, color .22s, border-color .22s}
.pill::after{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(100deg,transparent 20%,rgba(253,231,76,.55) 45%,rgba(28,124,84,.55) 62%,transparent 82%);
transform:translateX(-115%);opacity:0;transition:opacity .3s; /* NO transition en transform: al salir el mouse el barrido volveria en reversa */
}
.pill:hover::after,.pill:focus-visible::after{transform:translateX(115%);opacity:1;transition:transform .55s var(--ease), opacity .3s}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(0) scale(.985)}
.pill--red:hover{box-shadow:0 12px 26px -12px rgba(225,25,34,.75)}
.pill--ink:hover{box-shadow:0 12px 26px -12px rgba(24,19,18,.7)}
.pill--ghost:hover,.pill--white:hover{box-shadow:0 12px 26px -14px rgba(24,19,18,.55)}
/* Sobre rojo el barrido amarillo/verde se pierde: se aclara */
.cta .pill::after,.medida .pill::after{
background:linear-gradient(100deg,transparent 20%,rgba(253,231,76,.85) 45%,rgba(255,255,255,.7) 62%,transparent 82%);
}
@media (prefers-reduced-motion:reduce){
.pill::after{display:none}
.pill:hover{transform:none}
}
/* Hueco de contenido pendiente: se ve, para no olvidarlo */
.todo{
border:1.5px dashed rgba(255,255,255,.3);border-radius:12px;
background-image:repeating-linear-gradient(115deg,var(--ink-3) 0 14px,var(--ink-2) 14px 28px);
display:flex;align-items:flex-end;padding:18px;
}
.todo p{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.62);margin:0;line-height:1.7}
.todo--light{border-color:var(--line);background-image:repeating-linear-gradient(115deg,#f4f1ee 0 14px,#eae5e0 14px 28px)}
.todo--light p{color:var(--muted)}
.frame{border-radius:14px;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover}
/* ------------------------------------------------------------- Animaciones */
@keyframes brochazo{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sube{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){
*{animation:none !important;transition:none !important}
}
/* ------------------------------------------------------------- Barra promo */
.promo{
background:var(--red);color:#fff;font-size:15px;letter-spacing:.01em;
display:flex;justify-content:center;align-items:center;gap:18px;
padding:11px 20px;flex-wrap:wrap;text-align:center;
}
.promo strong{font-weight:600}
/* Tarea 1.1: píldora blanca compacta sobre el rojo de la barra, con el punto
verde de WhatsApp. min-height:36px cumple la diana mínima pedida. */
.promo a{
display:inline-flex;align-items:center;gap:8px;
background:#fff;color:var(--red-dark);font-weight:700;
border-radius:999px;padding:6px 16px;min-height:36px;
}
.promo a:hover{background:var(--yellow);color:var(--ink)}
.promo .sep{opacity:.5}
/* ----------------------------------------------------------------- Header */
/* overflow visible a propósito: la lata del logo sobresale por abajo */
.header{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff;border-bottom:1px solid rgba(255,255,255,.1);overflow:visible}
.header__in{max-width:var(--shell);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;position:relative;padding-left:96px}
.brand:hover{color:#fff}
/* La lata NO va contenida en una caja: sale del header y queda cortada por la
línea inferior, como el envase apoyado sobre la barra. Va absoluta para que
su tamaño no arrastre la altura del header. */
.brand__mark{
position:absolute;left:0;top:50%;
display:block;line-height:0;pointer-events:none;
/* A3: menos voladizo — sobresalía tanto que ocultaba títulos de sección
al hacer scroll. El corte por la línea del header se mantiene (es la
gracia); el saliente por debajo queda ≤14px. */
transform:translateY(-50%);
filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
transition:transform .35s var(--ease);
}
.brand__mark img{width:auto;height:96px;display:block}
.brand:hover .brand__mark{transform:translateY(-54%) rotate(-3deg)}
.brand__wm{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.03em;line-height:1}
.brand__wm em{color:var(--red-hot);font-style:normal}
/* Menú: mayúsculas, bold y centrado entre la marca y los CTA (margin-inline
auto lo centra sin tocar la estructura flex del header). El cuerpo baja a
13.5px porque en mayúsculas y bold ocho enlaces ganan mucho ancho. */
.nav{display:flex;gap:22px;font-size:13.5px;font-weight:700;margin-inline:auto;
flex-wrap:wrap;text-transform:uppercase;letter-spacing:.045em}
.nav a{color:#fff;padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover{color:#fff;border-bottom-color:var(--red-hot)}
.header__cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.count{font-family:var(--mono);font-size:12px;background:var(--red-hot);color:var(--ink);border-radius:999px;padding:2px 7px;font-weight:500}
.header__cta .pill--red{padding:11px 22px;font-size:15px}
.burger{display:none;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:10px;color:#fff;width:42px;height:42px;font-size:19px;cursor:pointer;align-items:center;justify-content:center}
/* ------------------------------------------------------------------- Hero */
.hero{background:#fff;padding:0}
.hero__grid{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;min-height:640px}
.hero__copy{
padding:86px 56px 74px var(--gutter);display:flex;flex-direction:column;justify-content:center;
animation:sube .55s var(--ease) both;
/* contenedor de consulta: el titular se dimensiona contra ESTA columna,
no contra el viewport — así cabe en 3 líneas a cualquier ancho */
container-type:inline-size;
}
.hero h1{
font-family:var(--display);font-weight:800;
/* Coeficiente recalibrado para Bricolage Grotesque (métricas más anchas que
Archivo): 11.6cqw ≈ el ancho de la línea más larga ("fabricado para ti").
Ver README. */
font-size:clamp(24px,11.6cqw,74px);
line-height:.96;letter-spacing:-.028em;margin:0;display:flex;flex-direction:column;
font-variation-settings:'opsz' 80;
}
.hero h1 span{white-space:nowrap}
.hero h1 .red{color:var(--red)}
.hero__sub{font-size:20px;line-height:1.55;max-width:52ch;color:var(--muted);margin:28px 0 0}
.hero__btns{display:flex;gap:14px;margin:38px 0 0;flex-wrap:wrap}
.hero__facts{display:flex;gap:34px;margin:46px 0 0;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:26px}
.hero__facts div{max-width:22ch}
.hero__facts dt{font-family:var(--display);font-weight:800;font-size:19px;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.hero__facts dt img{width:26px;height:26px;flex:none}
.hero__facts dd{font-size:15px;color:var(--muted);margin:0;line-height:1.5}
.hero__art{position:relative;background:var(--ink);overflow:hidden;min-height:520px}
.hero__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:brochazo .8s var(--ease) both}
/* --- Lata 3D del hero ---------------------------------------------------- */
.hero3d{
background:
radial-gradient(60% 52% at 50% 40%,rgba(225,25,34,.34),transparent 72%),
radial-gradient(130% 105% at 50% 0%,#2a2220 0%,#141010 100%);
}
/* La foto es el estado base; el canvas la releva cuando el modelo está listo */
/* Sin animación de entrada propia: un `animation ... both` que toque opacity
fijaría opacity:1 y ganaría al opacity:0 del estado is-3d. Hereda el
`brochazo` de .hero__art img, que solo anima clip-path. */
.hero3d .hero3d__poster{
object-fit:contain;padding:7% 14% 13%;
transition:opacity .7s ease;
}
.hero3d.is-3d .hero3d__poster{opacity:0}
.hero3d__canvas{
position:absolute;inset:0;display:block;
width:100% !important;height:100% !important;
opacity:0;animation:aparece .9s ease .1s forwards;
}
@keyframes aparece{to{opacity:1}}
.hero3d__hint{
position:absolute;left:0;right:0;bottom:20px;margin:0;text-align:center;
font-family:var(--mono);font-size:11px;letter-spacing:.09em;
color:rgba(255,255,255,.48);opacity:0;transition:opacity .6s ease .4s;pointer-events:none;
}
.hero3d.is-3d .hero3d__hint{opacity:1}
.hero__badge{
position:absolute;left:0;bottom:118px;background:var(--red);color:#fff;
padding:16px 26px 16px 34px;border-radius:0 999px 999px 0;
animation:brochazo .6s .35s var(--ease) both;
}
.hero__badge span{font-family:var(--mono);font-size:13px;letter-spacing:.06em}
/* ------------------------------------------------------------- Categorías */
.cats{background:var(--ink);color:#fff;padding:74px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-head p{font-size:16px;color:rgba(255,255,255,.66);margin:0;max-width:46ch}
.cats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cat{
position:relative;isolation:isolate;overflow:hidden;
display:flex;flex-direction:column;justify-content:space-between;gap:30px;
min-height:250px;background:var(--ink-2);
border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px;color:#fff;
transition:border-color .2s;
}
.cat:hover{border-color:var(--red-hot);color:#fff}
.cat__bg{position:absolute;inset:0;z-index:0;display:block}
.cat__bg img{width:100%;height:100%;object-fit:cover}
/* Scrim como en los originales de la fábrica: la mitad superior queda LIMPIA.
El degradado a pantalla completa que traía el canvas aplastaba justo donde
viven el domo del impermeabilizante y las pasadas 3-4 del rodillo. */
.cat__scrim{
position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,
rgba(10,8,7,0) 44%,
rgba(10,8,7,.5) 74%,
rgba(10,8,7,.85) 100%);
}
.cat__code{
position:relative;z-index:2;display:flex;justify-content:space-between;gap:12px;
font-family:var(--mono);font-size:12px;color:var(--red-hot);text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.cat__body{position:relative;z-index:2}
/* Con el scrim más suave, el texto se sostiene con sombra propia */
.cat__name{display:block;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,.85),0 4px 18px rgba(0,0,0,.6)}
.cat__sub{display:block;font-size:14px;color:rgba(255,255,255,.86);line-height:1.5;text-shadow:0 1px 3px rgba(0,0,0,.85),0 3px 12px rgba(0,0,0,.5)}
/* Tarea 2: chip de afordancia — la tarjeta entera es , esto solo da la
señal visual de "aquí se hace clic". Va después del sub para no tapar nombre. */
.cat__chip{
display:inline-flex;align-items:center;gap:6px;margin-top:14px;align-self:flex-start;
background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.45);
border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;
letter-spacing:.02em;text-transform:uppercase;
transition:transform .25s var(--ease),background .2s,border-color .2s;
}
.cat__chip::after{content:"→";margin-left:2px;transition:transform .25s var(--ease)}
.cat:hover .cat__chip{background:var(--red-hot);border-color:var(--red-hot)}
.cat:hover .cat__chip::after{transform:translateX(3px)}
/* -------------------------------------------------------- Carta de colores */
.carta{background:#fff;padding:88px 0}
.carta__intro{max-width:60ch;margin-bottom:40px}
.carta__grid{display:grid;grid-template-columns:1fr 372px;gap:26px;align-items:start}
/* A1: 168px dejaba solo 1 columna a 390px (muro de 54 muestras, 12,537px de
alto). A 150px entran 2 (2×150+14=314 ≤ 335 de contenido a 390px); si el
viewport no alcanza (320px, contenido ~305px) grid la colapsa sola a 1
columna limpia — auto-fill nunca fuerza 2 si no caben. */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.sw{
display:block;width:100%;padding:0;background:#fff;
border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;
transition:transform .25s var(--ease),border-color .2s;text-align:left;
}
.sw:hover{transform:translateY(-3px)}
.sw:active{transform:translateY(-1px) scale(.97)}
.sw[aria-pressed="true"]{border:2px solid var(--red)}
.sw__chip{display:block;height:108px;border-bottom:1px solid rgba(24,19,18,.1)}
.sw__meta{display:block;padding:14px 14px 16px}
.sw__name{display:block;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;color:var(--ink)}
.sw__code{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
/* El panel pasó de tarjeta pegajosa a SIDEBAR que entra por la derecha al tocar
un color. `.panel` es solo el riel de posición; lo visible es `.panel__card`.
Reglas del encargo: el riel mide lo que mide la sección, y no puede tapar el
menú ni el pie — por eso va ABSOLUTO dentro de #carta (no fixed) y la tarjeta
va sticky dentro del riel para acompañar el scroll sin salirse.
OJO: la sección NO lleva overflow:hidden para esconder el riel cerrado. Eso
mataría el sticky de la tarjeta (misma trampa del overflow-x del body). El
desborde lo esconde el `overflow-x:clip` de html,body. */
.panel{color:#fff}
.panel__card{
background:var(--ink);border-radius:14px;overflow:hidden;
box-shadow:0 26px 60px -30px rgba(24,19,18,.55);
}
/* A1: botón de cierre de la hoja móvil. Oculto en desktop (el sticky no
se cierra); visible solo bajo 980px, ver @media. El panel está
posicionado (sticky/fixed), así que absolute lo ancla a él. */
.panel__close{
display:none;position:absolute;top:12px;right:12px;z-index:5;
width:44px;height:44px;align-items:center;justify-content:center;
background:rgba(24,19,18,.4);color:#fff;border:none;border-radius:50%;
font-size:16px;line-height:1;cursor:pointer;
}
.panel__close:hover{background:rgba(24,19,18,.6)}
/* A12: aviso de por qué unos chips de línea están bloqueados, visible sin
hover (el title no existe en táctil). Solo se muestra si hay bloqueados. */
.panel__hint{
display:block;font-family:var(--mono);font-size:11px;line-height:1.5;
color:rgba(255,255,255,.55);margin:-8px 0 18px;
}
.carta.bio .panel__hint{color:rgba(251,247,239,.65)}
.panel__swatch{display:block;height:150px;transition:background .3s var(--ease)}
.panel__in{padding:24px}
.panel__fam{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--red-hot);margin:0 0 10px}
.panel h3{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1;margin:0 0 6px}
.panel__hex{font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.72);margin:0 0 22px;font-variant-numeric:tabular-nums}
.spec{display:grid;gap:12px;font-size:14px;border-top:1px solid var(--line-dark);padding-top:18px}
.spec div{display:flex;justify-content:space-between;gap:16px}
.spec dt{color:rgba(255,255,255,.6)}
.spec dd{font-weight:600;margin:0;text-align:right}
.spec dd.mono{font-family:var(--mono);font-weight:400}
.spec dd.price{font-family:var(--mono);font-weight:500;color:var(--red-hot);font-variant-numeric:tabular-nums}
.note{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.45);margin:12px 0 0;line-height:1.6}
.panel__btns{display:grid;gap:10px;margin-top:22px}
.panel__btns .pill{padding:15px;font-size:16px}
.panel__btns .pill--onink{padding:14px;font-size:15px}
/* --------------------------------- Carta: cabeceras de familia y líneas --- */
/* Cabecera de familia: ocupa toda la fila de la retícula */
.fam{
grid-column:1 / -1;
display:flex;align-items:baseline;gap:12px;
margin:26px 0 2px;padding-bottom:8px;
font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.02em;
text-transform:uppercase;
border-bottom:1px solid var(--hair, var(--line-soft));
}
.fam:first-child{margin-top:0}
.fam small{font-family:var(--mono);font-size:11px;font-weight:400;opacity:.6;text-transform:none;letter-spacing:0}
.fam--pos::after{
content:"solo en Superior · Semigloss · Satinada · Esmalte";
font-family:var(--mono);font-size:10.5px;font-weight:400;text-transform:none;
letter-spacing:0;opacity:.7;margin-left:auto;text-align:right;
}
/* Selector de línea dentro del panel */
.panel__lbl{font-size:13px;font-weight:600;margin:0 0 9px;opacity:.75}
.lineas{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.lin{
background:transparent;color:inherit;border:1px solid rgba(255,255,255,.3);
border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;
transition:background .2s, border-color .2s, transform .18s var(--ease), opacity .2s;
/* WCAG 2.5.5: diana táctil mínima (44px en móvil, ver @media 700px) */
min-height:38px;
}
.lin:hover:not(:disabled){transform:translateY(-1px);border-color:currentColor}
.lin[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.lin:disabled{opacity:.3;cursor:not-allowed}
/* ============================================================================
Carta de colores — BIOPHILIC
Excepción deliberada a la paleta B/N/R: esta sección usa materia natural
(yeso, papel, arena, terracota, verde) porque es donde el visitante ELIGE
color. Todo está scopeado a `.carta.bio`; el resto de la página no se toca.
========================================================================== */
.carta.bio{
--sand:#E9DFCD; /* arena de playa seca */
--plaster:#F5EEE2; /* yeso recién dado */
--paper:#FBF7EF; /* papel de carta de colores */
--terra:#B4552F; /* terracota de teja */
--terra-ink:#8F3F1D; /* terracota legible en texto pequeño */
--leaf:#3E4E3E; /* verde de hoja en sombra */
--leaf-soft:#7E9070; /* verde de guayaba */
--bark:#3A2E25; /* tinta cálida: marrón, nunca negro */
--bark-soft:#6B5A4B;
--hair:rgba(58,46,37,.14);
position:relative;
isolation:isolate;
color:var(--bark);
/* Roberto 06-ago: misma textura, fondo BLANCO. Solo cambia esta capa de
color; las capas de grano, fibra y calor de sol quedan intactas. */
background-color:#fff;
/* Capas de materia: grano de yeso + fibra de papel + calor de sol */
background-image:
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 4px),
repeating-linear-gradient(0deg,rgba(58,46,37,.025) 0 1px,transparent 1px 5px),
radial-gradient(120% 80% at 12% -10%,rgba(255,246,230,.9),transparent 60%);
background-size:260px 260px,auto,auto,auto;
}
/* Mancha orgánica de vegetación, muy tenue, detrás de la retícula */
.carta.bio::before{
content:"";position:absolute;z-index:-1;pointer-events:none;
right:-6%;top:14%;width:52%;height:70%;
background:radial-gradient(58% 52% at 62% 40%,rgba(126,144,112,.22),transparent 70%);
border-radius:56% 44% 38% 62% / 48% 56% 44% 52%;
}
.carta.bio .eyebrow{color:var(--terra-ink)}
.carta.bio .h2{color:var(--bark)}
.carta.bio .lead{color:var(--bark-soft)}
/* --- Muestras: pastillas de yeso con sombra suave, sin bordes duros ------- */
.carta.bio .sw{
background:var(--plaster);
border:1px solid transparent;
border-radius:22px;
box-shadow:0 2px 3px rgba(58,46,37,.06), 0 14px 28px -18px rgba(58,46,37,.4);
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.carta.bio .sw:hover{
transform:translateY(-4px);
box-shadow:0 3px 4px rgba(58,46,37,.07), 0 26px 44px -22px rgba(58,46,37,.5);
}
.carta.bio .sw[aria-pressed="true"]{
border:1px solid transparent;
box-shadow:0 0 0 2.5px var(--terra), 0 20px 38px -20px rgba(143,63,29,.55);
}
/* El chip de color se redondea por dentro: forma de piedra de río, no de caja */
.carta.bio .sw__chip{
height:112px;
border-bottom:none;
border-radius:21px 21px 26px 26px;
box-shadow:inset 0 -1px 0 rgba(58,46,37,.10), inset 0 22px 34px -26px rgba(255,255,255,.85);
}
.carta.bio .sw__meta{padding:15px 16px 18px}
.carta.bio .sw__name{color:var(--bark)}
.carta.bio .sw__code{color:var(--bark-soft)}
/* --- Panel: madera/hoja en sombra en lugar del negro ---------------------- */
.carta.bio .panel__card{
background:
url("data:image/svg+xml;utf8,"),
linear-gradient(168deg,#47593F 0%,var(--leaf) 46%,#33412F 100%);
border-radius:28px;
box-shadow:0 30px 64px -32px rgba(35,45,32,.7);
}
.carta.bio .panel__swatch{
height:158px;
border-radius:28px 28px 34px 34px;
box-shadow:inset 0 -2px 0 rgba(58,46,37,.16);
}
.carta.bio .panel__fam{color:#E7C9A6;letter-spacing:.12em}
.carta.bio .panel__hex{color:rgba(251,247,239,.74)}
.carta.bio .spec{border-top-color:rgba(251,247,239,.2)}
.carta.bio .spec dt{color:rgba(251,247,239,.66)}
.carta.bio .spec dd.price{color:#F0C9A0}
.carta.bio .note{color:rgba(251,247,239,.75)}
.carta.bio .panel__btns .pill--white{
background:var(--paper);color:var(--bark);border:none;border-radius:20px;
box-shadow:0 10px 22px -12px rgba(20,28,18,.8);
}
.carta.bio .panel__btns .pill--white:hover{background:#fff;color:var(--bark)}
.carta.bio .panel__btns .pill--onink{
border-radius:20px;border-color:rgba(251,247,239,.4);color:var(--paper);
}
.carta.bio .panel__btns .pill--onink:hover{background:rgba(251,247,239,.12)}
/* Familias y líneas dentro de la carta biofílica */
.carta.bio .fam{color:var(--bark);border-bottom-color:var(--hair)}
.carta.bio .fam small{color:var(--bark-soft);opacity:1}
.carta.bio .fam--pos::after{color:var(--terra-ink);opacity:1}
.carta.bio .panel__lbl{color:rgba(251,247,239,.8)}
.carta.bio .lin{border-color:rgba(251,247,239,.32);color:var(--paper);border-radius:14px}
.carta.bio .lin[aria-pressed="true"]{background:var(--paper);color:var(--bark);border-color:var(--paper)}
@media (max-width:980px){
.carta.bio::before{display:none}
.carta.bio .panel__swatch{height:130px}
}
/* ------------------------------------------------------- Color a medida */
.medida{background:var(--red);color:#fff;padding:88px 0}
.medida__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.medida__copy p.lead{max-width:40ch;font-size:19px;margin-top:20px}
/* ------------------------------------------------ Asesor conversacional --- */
.chat{
background:#fff;color:var(--ink);border-radius:18px;overflow:hidden;
display:flex;flex-direction:column;height:452px;
box-shadow:0 30px 60px -34px rgba(90,6,10,.6);
}
.chat__top{
display:flex;align-items:center;gap:12px;padding:14px 18px;
border-bottom:1px solid var(--line-soft);background:#fff;flex:none;
}
.chat__avatar{
width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
background:radial-gradient(120% 120% at 30% 20%,#fff,#F3EDE6);
box-shadow:inset 0 0 0 1px rgba(24,19,18,.08);
}
.chat__quien{flex:1;min-width:0}
.chat__nom{font-family:var(--display);font-weight:800;font-size:16px;margin:0;letter-spacing:-.01em}
.chat__est{font-size:12px;color:var(--muted);margin:2px 0 0;display:flex;align-items:center;gap:6px}
.chat__est i{width:7px;height:7px;border-radius:50%;background:var(--wa);flex:none;
box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:latir 2.4s ease-out infinite}
@keyframes latir{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%,100%{box-shadow:0 0 0 7px rgba(37,211,102,0)}}
.chat__paso{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;
border:1px solid var(--line-soft);border-radius:999px;padding:4px 9px}
.chat__hilo{
flex:1;overflow-y:auto;overscroll-behavior:contain;
padding:18px;display:flex;flex-direction:column;gap:9px;
scroll-behavior:smooth;
}
/* Burbujas */
.bb{
max-width:84%;padding:12px 15px;font-size:16px;line-height:1.45;
border-radius:16px;
animation:bbEntra .28s var(--ease) both;
}
@keyframes bbEntra{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.bb--bot{align-self:flex-start;background:#F4F0EA;border-bottom-left-radius:6px}
.bb--yo{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:6px;font-weight:600}
.bb--escribe{display:flex;gap:5px;padding:15px;align-items:center}
.bb--escribe i{width:7px;height:7px;border-radius:50%;background:#B9AFA4;animation:puntos 1.2s ease-in-out infinite}
.bb--escribe i:nth-child(2){animation-delay:.16s}
.bb--escribe i:nth-child(3){animation-delay:.32s}
@keyframes puntos{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
/* Ficha del color recomendado dentro de la burbuja */
.ficha{display:flex;align-items:center;gap:13px}
.ficha__sw{width:52px;height:52px;border-radius:14px;flex:none;box-shadow:inset 0 0 0 1px rgba(24,19,18,.12)}
.ficha__txt strong{display:block;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.1}
.ficha__txt em{display:block;font-family:var(--mono);font-style:normal;font-size:12px;color:var(--muted);margin-top:3px}
/* Opciones y acciones */
.chat__acciones{
display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 18px;flex:none;
border-top:1px solid var(--line-soft);min-height:64px;align-content:flex-start;
}
.chip-op{
display:inline-flex;align-items:center;gap:8px;
background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;
padding:10px 15px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
animation:bbEntra .26s var(--ease) both;
transition:border-color .18s, color .18s, background .18s, transform .18s var(--ease);
}
.chip-op:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.chip-op small{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400}
.chip-op:hover small{color:var(--red)}
.chip-op--ver{border-color:var(--ink);background:var(--ink);color:#fff}
.chip-op--ver:hover{background:var(--ink-3);color:#fff;border-color:var(--ink-3)}
.chip-op--wa{border-color:var(--red);background:var(--red);color:#fff}
.chip-op--wa:hover{background:var(--red-dark);color:#fff;border-color:var(--red-dark)}
.chip-op--wa::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--wa);flex:none}
.chip-op--humano{border-style:dashed}
@media (prefers-reduced-motion:reduce){
.chat__hilo{scroll-behavior:auto}
}
[hidden]{display:none !important}
/* ----------------------------------------------------------------- Proceso */
.proceso{background:var(--green);color:#fff;padding:88px 0}
.proceso__head{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:end;margin-bottom:44px}
.proceso__head p{font-size:18px;color:rgba(255,255,255,.9);line-height:1.55;margin:0;max-width:54ch}
.proceso__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.paso{border-top:3px solid var(--yellow);padding:22px 0 0}
/* A8: var(--yellow) (#FDE74C) sobre #1C7C54 daba 4.12:1 a 12px — bajo AA.
#FFF3A8 sobre el mismo verde mide ≈4.60:1 (fórmula de luminancia relativa
WCAG). Se queda amarillo — el borde de arriba sigue en --yellow, sin tocar
el token. */
.paso__n{font-family:var(--mono);font-size:12px;color:#FFF3A8}
.paso h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;margin:12px 0 10px;line-height:1.05}
.paso p{font-size:16px;color:rgba(255,255,255,.9);line-height:1.55;margin:0 0 20px}
.paso__art{height:190px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.18)}
.paso__art img{width:100%;height:100%;object-fit:contain;padding:10px}
/* Producto recortado: se ancla abajo y a la derecha, apoyado como en un estante,
en vez de flotar diminuto en el centro del marco. */
.paso__art--producto{display:flex;justify-content:flex-end;align-items:flex-end;padding:0 30px 0 0}
/* height:100% y no más: con 116% se le cortaba la tapa contra el overflow:hidden */
.paso__art--producto img{width:auto;height:100%;padding:0;object-fit:contain;object-position:bottom}
.paso .todo{height:190px}
/* ----------------------------------------------------------------- Pilares */
.pilar{display:grid;grid-template-columns:68px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line-soft)}
.pilar__k{font-family:var(--mono);font-size:12px;color:var(--red);padding-top:6px}
/* Icono del pilar: Fluent Emoji Flat (MIT, Microsoft) sobre disco claro */
.pilar__ico{
width:60px;height:60px;border-radius:18px;display:grid;place-items:center;flex:none;
background:radial-gradient(120% 120% at 30% 20%,#fff,#F6F1EA);
box-shadow:0 1px 0 rgba(24,19,18,.06), 0 12px 22px -14px rgba(24,19,18,.5);
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pilar__ico img{width:38px;height:38px;display:block}
.pilar:hover .pilar__ico{transform:translateY(-3px) rotate(-4deg);box-shadow:0 2px 0 rgba(24,19,18,.06),0 18px 30px -16px rgba(24,19,18,.6)}
.pilar h3{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;margin:0 0 8px}
.pilar p{font-size:17px;color:var(--muted);line-height:1.55;margin:0;max-width:58ch}
/* ---------------------------------------------------------------- Reseñas */
.resenas{background:var(--ink);color:#fff;padding:88px 0}
.resenas__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.resenas__head .src{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55);margin:0;max-width:34ch;line-height:1.7}
/* ------------------------------------------- Cintas de opiniones (marquee)
Dos rieles en direcciones contrarias. El desplazamiento es del 50% porque
el contenido está duplicado: al reiniciar, la copia cae en el mismo sitio.
Solo translate3d — cero layout, cero paint. */
.cintas{position:relative}
.cinta{
overflow:hidden;padding:6px 0;
/* los globos se desvanecen en los bordes en vez de cortarse en seco */
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.cinta + .cinta{margin-top:16px}
.cinta__riel{display:flex;gap:16px;width:max-content;will-change:transform}
/* A9: solo hay 4 logos de cliente (×2 pasadas). Con gap 16 + min-width 230
cabían 5 a la vez a 1440 y "torrance" se repetía en el mismo viewport. */
#rielClientes{gap:24px}
.cinta--izq .cinta__riel{animation:desliza-izq 46s linear infinite}
.cinta--der .cinta__riel{animation:desliza-der 38s linear infinite}
@keyframes desliza-izq{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-50%,0,0)}
}
@keyframes desliza-der{
from{transform:translate3d(-50%,0,0)}
to{transform:translate3d(0,0,0)}
}
/* Al pasar el mouse se detiene para poder leer */
.cintas:hover .cinta__riel{animation-play-state:paused}
.cintas.esta-fuera .cinta__riel,
.cintas.esta-fuera .globo{animation-play-state:paused}
/* Globos flotantes */
.globo{
flex:none;width:330px;
background:var(--ink-2);border:1px solid var(--line-dark);border-radius:18px;
padding:22px 24px;display:flex;flex-direction:column;gap:13px;
animation:flota 6.5s ease-in-out infinite;
animation-delay:var(--flota,0s);
/* pico del globo */
position:relative;
}
.globo::after{
content:"";position:absolute;left:30px;bottom:-8px;width:16px;height:16px;
background:inherit;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
transform:rotate(45deg);border-bottom-right-radius:4px;
}
@keyframes flota{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-9px,0)}
}
.globo--destacado{background:var(--red);border-color:transparent}
.globo--destacado::after{border-color:transparent}
.globo__estrellas{font-family:var(--mono);font-size:14px;color:var(--red-hot);letter-spacing:.14em}
.globo--destacado .globo__estrellas{color:#fff}
.globo__txt{font-size:16px;line-height:1.5;margin:0;color:rgba(255,255,255,.9)}
.globo--destacado .globo__txt{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.25;letter-spacing:-.015em;color:#fff}
.globo__quien{
font-family:var(--mono);font-size:11px;color:var(--red-hot);
border:1px dashed rgba(255,255,255,.3);border-radius:8px;padding:5px 8px;align-self:flex-start;
}
.globo--destacado .globo__quien{color:#fff;border-color:rgba(255,255,255,.65)}
/* Globos de cliente confirmado */
.globo--cliente{
width:auto;min-width:270px;align-items:center;text-align:center;gap:10px;
background:#fff;border-color:transparent;
}
.globo--cliente::after{background:#fff;border-color:transparent}
.globo__logo{height:44px;display:grid;place-items:center}
.globo__logo img{height:44px;width:auto;filter:invert(1) brightness(.25)}
.globo__nom{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.globo__pie{font-family:var(--mono);font-size:11px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
.cinta__riel{animation:none !important;flex-wrap:wrap;width:auto;justify-content:center}
.globo{animation:none !important}
.cinta{mask-image:none;-webkit-mask-image:none}
}
@media (max-width:700px){
.globo{width:270px;padding:18px 20px}
.globo--cliente{min-width:190px}
}
.resenas__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;align-items:start}
.resena{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:18px;min-height:250px}
.resena--hero{background:var(--red);border:none;padding:30px;gap:20px}
.resena__stars{font-family:var(--mono);font-size:14px;color:var(--red-hot);letter-spacing:.14em}
.resena--hero .resena__stars{color:#fff}
.resena__q{font-size:18px;line-height:1.55;margin:0;color:rgba(255,255,255,.88);flex:1}
.resena--hero .resena__q{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.15;letter-spacing:-.02em;color:#fff}
.resena__who{font-size:14px;color:rgba(255,255,255,.6);margin:0}
.resena__who.pend{font-family:var(--mono);font-size:12px;color:var(--red-hot);border:1px dashed rgba(255,255,255,.3);border-radius:8px;padding:6px 9px;align-self:flex-start}
.resena--hero .resena__who.pend{color:#fff;border-color:rgba(255,255,255,.7)}
/* --------------------------------------------------------------- Muestras */
/* ----------------------------------------------------------- Calculadora */
.calc{background:var(--ink);color:#fff;padding:88px 0}
.calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.calc__copy .lead{max-width:44ch;font-size:19px;margin:20px 0 34px}
.calc__controls{display:grid;gap:24px;max-width:520px}
.calc__controls label{display:flex;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:12px}
.calc__controls label output{font-family:var(--mono);color:var(--red-hot);font-variant-numeric:tabular-nums}
.calc__controls input[type=range]{width:100%;accent-color:var(--red);height:26px}
/* Pulgar grande y visible: la diana por defecto del navegador es ~12px */
.calc__controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer}
.calc__controls input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer}
.calc__sup p{font-size:15px;font-weight:600;margin:0 0 12px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:12px 20px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.chip:hover{border-color:var(--red-hot)}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red)}
.ticket{background:#fff;color:var(--ink);border-radius:16px;padding:32px}
.ticket__top{display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line-soft)}
.ticket__sw{display:block;width:56px;height:56px;border-radius:10px;border:1px solid rgba(24,19,18,.14);flex:none;transition:background .3s var(--ease)}
.ticket__k{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 4px}
.ticket__name{font-family:var(--display);font-weight:800;font-size:22px;margin:0;letter-spacing:-.02em}
/* A7: de dónde salió el "color elegido" y cómo cambiarlo — discreto, no compite
con el nombre del color. */
.ticket__origen{margin:5px 0 0;font-family:var(--mono);font-size:12px}
.ticket__origen a{color:var(--muted)}
.ticket__origen a:hover{color:var(--red)}
.ticket__nums{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line-soft)}
.ticket__big{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;margin:0;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ticket__big span{font-size:22px;color:var(--muted)}
.ticket__rows{display:grid;gap:12px;padding:22px 0;font-size:15px}
.ticket__rows div{display:flex;justify-content:space-between;gap:16px}
.ticket__rows dt{color:var(--muted)}
.ticket__rows dd{font-weight:600;text-align:right;margin:0;font-variant-numeric:tabular-nums}
.ticket__rows dd.mono{font-family:var(--mono);font-weight:400}
.ticket__rows dd.price{font-family:var(--mono);font-weight:500;color:var(--red)}
.ticket .note{color:var(--muted);margin:0 0 22px}
.ticket__btns{display:grid;gap:10px}
.ticket__btns .pill--red{padding:17px;font-size:17px}
.ticket__btns .pill--white{padding:16px}
/* --------------------------------------------------------------- Proyectos */
.proyectos{background:#fff;padding:88px 0}
.proyectos__intro{max-width:56ch;margin-bottom:38px}
.proyectos__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:300px 300px;gap:16px}
.obra{
border-radius:14px;background-image:repeating-linear-gradient(115deg,var(--ink-3) 0 14px,var(--ink-2) 14px 28px);
padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;
position:relative;isolation:isolate;overflow:hidden;
}
/* Cierra la fila: 4 obras en 3 columnas dejaban una celda vacía con span 2 */
.obra--wide{grid-column:1 / -1}
/* Foto de la obra + degradado para que el texto de abajo siempre se lea */
.obra__foto{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.obra__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.obra:hover .obra__foto img{transform:scale(1.05)}
.obra__tint{position:absolute;inset:0;z-index:1;
background-image:linear-gradient(180deg,rgba(10,8,7,.15) 0%,rgba(10,8,7,.35) 55%,rgba(10,8,7,.88) 100%) !important}
.obra__note{font-family:var(--mono);font-size:10.5px;color:rgba(255,255,255,.85);margin:0;line-height:1;position:relative;z-index:2;background:rgba(10,8,7,.55);backdrop-filter:blur(3px);border:1px dashed rgba(255,255,255,.4);border-radius:999px;padding:5px 10px;align-self:flex-start}
.obra__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;position:relative;z-index:2}
.obra__t{font-family:var(--display);font-weight:800;font-size:22px;color:#fff;margin:0 0 4px;letter-spacing:-.02em}
.obra__c{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.7);margin:0}
.obra__btn{display:flex;align-items:center;gap:9px;background:var(--red);color:#fff;border:none;border-radius:999px;padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s}
.obra__btn:hover{background:var(--red-dark)}
.obra__dot{width:12px;height:12px;border-radius:50%;display:block;border:1px solid rgba(255,255,255,.6)}
/* ----------------------------------------------------------------- Extras */
.extras{background:var(--yellow);color:var(--ink);padding:76px 0}
.extras__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.extras h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,42px);letter-spacing:-.025em;line-height:1;margin:0}
.extras__copy p{font-size:18px;line-height:1.55;margin:16px 0 0;color:var(--muted);max-width:34ch}
/* 3×2 en vez de 4+2: seis productos en cuatro columnas dejaban un hueco */
.extras__items{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* Tarjeta "robada" de PROPUESTAS/tienda-home/propuesta-tienda.html, Dirección
C · La vitrina (Roberto, 07-ago-2026): mismo lenguaje -- panel de foto +
ficha oscura con precio en amarillo -- adaptado al ancho de 3 columnas
(la vitrina original medía 560px fija) y a un solo precio por artículo (la
vitrina tenía tabla de presentaciones; estos productos no las tienen). El
frame de la sección (`.extras`, `.extras__items` 3 cols) NO se toca. */
.extra{
display:grid;grid-template-columns:88px 1fr;grid-template-rows:auto auto;gap:10px 14px;
background:var(--ink);border:1px solid var(--line-dark);border-radius:16px;padding:13px;overflow:hidden;
color:#fff;cursor:pointer;text-align:left;
transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
}
.extra:hover{transform:translateY(-4px);box-shadow:0 16px 30px -18px rgba(0,0,0,.65);border-color:var(--yellow)}
.extra:active{transform:translateY(-1px)}
/* Foto de tamaño FIJO (no estira con las filas vecinas -- ese fue el bug: al
envolverse el botón en dos líneas, la foto que compartía sus dos filas se
alargaba con él). */
.extra__foto{
grid-column:1;grid-row:1;width:88px;height:88px;align-self:start;
display:grid;place-items:center;background:#fff;border-radius:11px;overflow:hidden;
}
.extra__foto img{max-width:78%;max-height:78%;width:auto;height:auto;object-fit:contain;
transition:transform .3s var(--ease)}
.extra:hover .extra__foto img{transform:scale(1.08) rotate(-2deg)}
.extra__txt{display:block;grid-column:2;grid-row:1;padding:0}
.extra__txt strong{display:block;font-family:var(--display);font-weight:800;font-size:16.5px;letter-spacing:-.02em;line-height:1.15;color:#fff}
.extra__txt em{display:block;font-style:normal;font-size:12px;color:rgba(255,255,255,.66);margin-top:3px}
/* El botón ocupa las DOS columnas, en su propia fila -- así nunca vuelve a
inflar la foto que tiene al lado. */
.extra__add{
display:inline-flex;align-items:center;grid-column:1/-1;grid-row:2;justify-self:start;white-space:nowrap;
font-family:var(--mono);font-size:10px;letter-spacing:.01em;color:var(--ink);
background:#fff;border-radius:999px;padding:6px 11px;transition:background .18s,color .18s;
}
.extra:hover .extra__add{background:var(--yellow)}
/* ------------------------------------------------------------------- Blog */
.blog{background:#fff;padding:88px 0}
.blog__head{text-align:center;margin:0 auto 44px}
.blog__head .h2{letter-spacing:.01em;white-space:nowrap}
.blog__head p{max-width:70ch;margin-left:auto;margin-right:auto}
.blog__head .h2 em{color:var(--red);font-style:normal}
.blog__head .h2 .sep{color:var(--red);font-size:.6em;vertical-align:middle;margin:0 .12em}
.blog__head p{font-size:18px;color:var(--muted);line-height:1.55;margin:16px 0 0}
.blog__head strong{color:var(--red);font-weight:600}
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{
display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
color:var(--ink);border:1px solid var(--line-soft);
box-shadow:0 2px 3px rgba(24,19,18,.04), 0 18px 34px -26px rgba(24,19,18,.5);
transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.post:hover{
transform:translateY(-6px);color:var(--ink);border-color:transparent;
box-shadow:0 3px 4px rgba(24,19,18,.05), 0 30px 50px -28px rgba(24,19,18,.65);
}
.post__foto{display:block;aspect-ratio:19/10;overflow:hidden;background:var(--ink-2)}
.post__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post:hover .post__foto img{transform:scale(1.06)}
.post__body{display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;flex:1}
.post__fecha{
display:flex;align-items:center;gap:8px;
font-size:13px;color:var(--muted);
}
/* Reloj dibujado en CSS: un icono más para descargar no hace falta */
.post__fecha::before{
content:"";width:13px;height:13px;border:1.6px solid var(--muted);border-radius:50%;
position:relative;flex:none;
background:
linear-gradient(to bottom,currentColor 0 0) no-repeat,
linear-gradient(to right,currentColor 0 0) no-repeat;
background-size:1.6px 4px, 4px 1.6px;
background-position:center 2.4px, center center;
}
.post__t{
font-family:var(--display);font-weight:800;font-size:19px;line-height:1.25;letter-spacing:-.015em;
flex:1;
}
.post:hover .post__t{color:var(--red)}
.post__pie{display:flex;align-items:center;gap:8px;margin-top:2px}
.post__likes{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--muted)}
/* Corazón en CSS puro */
.post__likes::before{
content:"";width:14px;height:13px;flex:none;background:var(--red);
clip-path:path("M7 13C7 13 0 8.5 0 4.2C0 1.9 1.8 0 4 0C5.3 0 6.4 0.7 7 1.7C7.6 0.7 8.7 0 10 0C12.2 0 14 1.9 14 4.2C14 8.5 7 13 7 13Z");
transition:transform .25s var(--ease);
}
.post:hover .post__likes::before{transform:scale(1.18)}
/* Tarea 2: chip "Leer" — señal de clic, va junto a los likes, no tapa el título */
.post__chip{
margin-left:auto;display:inline-flex;align-items:center;gap:5px;
background:var(--ink);color:#fff;border-radius:999px;
padding:7px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
transition:transform .25s var(--ease),background .2s;
}
.post__chip::after{content:"→";transition:transform .25s var(--ease)}
.post:hover .post__chip{background:var(--red)}
.post:hover .post__chip::after{transform:translateX(3px)}
@media (max-width:980px){
.blog__grid{grid-template-columns:1fr}
/* el nowrap del titular solo tiene sentido con sitio de sobra */
.blog__head .h2{white-space:normal}
}
/* Paginación del archivo del blog (page-blog.php): clases que imprime
`paginate_links()` de WordPress, no inventadas por el estático. */
.blog__paginacion{display:flex;justify-content:center;gap:8px;margin-top:44px;flex-wrap:wrap}
.blog__paginacion .page-numbers{display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);
font-family:var(--mono);font-size:14px;color:var(--ink);text-decoration:none}
.blog__paginacion .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.blog__paginacion .page-numbers:hover:not(.current){border-color:var(--red);color:var(--red)}
/* -------------------------------------------------------------------- B2B */
.b2b{background:var(--ink);color:#fff;padding:88px 0}
.b2b__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.b2b .lead{max-width:50ch;font-size:19px;margin:20px 0 30px}
.b2b__bullets{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.b2b__bullets p{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.8);margin:0}
.b2b .pill--red{padding:17px 30px;font-size:17px}
.b2b__art{height:340px;border-radius:14px;background:var(--red);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.b2b__art img{max-height:86%;width:auto;object-fit:contain}
.b2b__art figcaption{
position:absolute;left:0;right:0;bottom:0;padding:16px 20px;margin:0;
font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.85);
background:linear-gradient(180deg,rgba(10,8,7,0),rgba(10,8,7,.8));
}
/* Variante con fotografía a sangre en vez de producto recortado */
.b2b__art--foto{background:var(--ink)}
.b2b__art--foto img{max-height:none;width:100%;height:100%;object-fit:cover}
/* --------------------------------------------------------------- Historia */
.historia{background:#fff;padding:88px 0}
.historia__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.historia__art{height:420px;border-radius:14px;overflow:hidden;position:relative;background:var(--ink)}
.historia__art img{width:100%;height:100%;object-fit:cover}
.historia__art figcaption{
position:absolute;left:0;right:0;bottom:0;padding:18px 20px;margin:0;
font-family:var(--mono);font-size:12px;color:#fff;line-height:1.6;
background:linear-gradient(180deg,rgba(10,8,7,0),rgba(10,8,7,.85));
}
.historia h2{font-size:clamp(32px,3.4vw,50px)}
.historia .lead{max-width:52ch;font-size:19px;margin-top:20px}
/* Tarea 1.2: píldora equivalente a .pill--ghost, min-height 44px (diana). */
.link-ul{
display:inline-flex;align-items:center;margin-top:26px;
background:#fff;color:var(--ink);border:1.5px solid var(--ink);
border-radius:999px;padding:13.5px 28px;min-height:44px;
font-weight:600;font-size:17px;
}
.link-ul:hover{background:var(--ink);color:#fff}
/* -------------------------------------------------------------- CTA final */
.cta{background:var(--red);color:#fff;padding:92px 0}
.cta__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.cta h2{font-family:var(--display);font-weight:800;font-size:clamp(36px,4.4vw,68px);letter-spacing:-.028em;line-height:.95;margin:0}
.cta__sub{font-size:20px;line-height:1.55;margin:22px 0 32px;color:rgba(255,255,255,.92);max-width:44ch}
.cta__btns{display:flex;gap:14px;flex-wrap:wrap}
.cta__btns .pill{padding:19px 32px;font-size:18px}
.cta__btns .pill--phone{background:#fff;color:var(--ink);border:none}
.cta__btns .pill--phone:hover{background:var(--ink);color:#fff}
.cta__btns .pill--outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.cta__btns .pill--outline:hover{background:#fff;color:var(--ink)}
.nap{background:var(--ink);border-radius:14px;padding:30px;display:grid;gap:18px}
.nap__k{font-family:var(--mono);font-size:12px;color:var(--red-hot);margin:0 0 6px}
.nap p:not(.nap__k){font-size:17px;margin:0;line-height:1.5}
/* Tarea 1.3: teléfono como píldora blanca con punto verde, min-height 44px. */
.nap__wa{
display:inline-flex;align-items:center;gap:10px;
background:#fff;color:var(--ink);font-weight:700;
border-radius:999px;padding:11px 20px;min-height:44px;
}
.nap__wa:hover{background:var(--yellow);color:var(--ink)}
.nap .hours{font-family:var(--mono);font-size:15px;color:rgba(255,255,255,.85)}
.nap__map{height:160px;border-radius:10px;overflow:hidden;border:1px solid var(--line-dark)}
.nap__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.2)}
/* ----------------------------------------------------------------- Footer */
.foot{background:var(--ink);color:#fff;padding:56px 0 34px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px;border-bottom:1px solid var(--line-dark)}
.foot__wm{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;line-height:1;display:block}
.foot__wm em{color:var(--red-hot);font-style:normal}
/* Logo de marca sobre chip blanco: el SVG es rojo sólido y no contrasta con la tinta */
/* Sin el chip blanco: el logo va directo sobre la tinta del pie. 148 -> 170px
es el 15% que pidió Roberto. */
.foot__logo{display:inline-block;line-height:0}
.foot__logo img{width:170px;height:auto}
.foot__about{font-size:15px;color:rgba(255,255,255,.6);line-height:1.55;margin:14px 0 0;max-width:34ch}
.foot__col{display:grid;gap:10px;align-content:start;font-size:15px}
.foot__col p{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.45);margin:0 0 4px}
.foot__col a{color:rgba(255,255,255,.82)}
.foot__col a:hover{color:#fff}
.foot__legal{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.62);margin:22px 0 0}
/* ----------------------------------------------------------------- Drawer */
.drawer{position:fixed;inset:0;z-index:90;background:rgba(24,19,18,.6);display:flex;justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer__panel{width:min(440px,100%);background:#fff;height:100%;display:flex;flex-direction:column;padding:28px;animation:entra .3s var(--ease) both}
@keyframes entra{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.drawer__head h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;margin:0}
.drawer__x{background:transparent;border:1px solid rgba(24,19,18,.2);border-radius:999px;width:36px;height:36px;font-size:16px;cursor:pointer;color:var(--ink)}
.drawer__items{display:grid;gap:10px;overflow:auto}
.li{display:flex;justify-content:space-between;gap:14px;border:1px solid var(--line-soft);border-radius:12px;padding:15px}
.li__n{font-family:var(--display);font-weight:800;font-size:17px;margin:0 0 4px}
.li__m{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0}
/* Tarea 1.4: "quitar" pasa de texto suelto a botón con borde, diana min 32x32.
Generado por app.js: solo se toca el CSS, el marcado no está en el HTML. */
.li__x{
display:inline-flex;align-items:center;justify-content:center;
background:transparent;border:1.5px solid var(--red);border-radius:8px;
color:var(--red);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
cursor:pointer;align-self:flex-start;min-width:32px;min-height:32px;padding:6px 10px;
transition:background .18s,color .18s;
}
.li__x:hover{background:var(--red);color:#fff}
.drawer__empty{font-size:16px;color:var(--muted);line-height:1.55;margin:0}
.drawer__send{margin-top:auto;background:var(--red);color:#fff;border-radius:999px;padding:18px;font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px}
.drawer__send:hover{background:var(--red-dark);color:#fff}
.drawer__send .dot-wa{background:#fff}
/* Aviso flotante al agregar */
.toast{
position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:95;
background:var(--ink);color:#fff;border-radius:999px;padding:14px 24px;font-size:15px;font-weight:600;
box-shadow:0 18px 40px -18px rgba(24,19,18,.7);opacity:0;pointer-events:none;
transition:opacity .25s,transform .25s var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* ----------------------------------------------------------- Flotante WhatsApp */
/* Tarea 3. Verde WhatsApp elegido sobre rojo de marca: el rojo se pierde contra
las secciones .promo/.medida/.cta que ya son rojas; el verde con anillo
blanco se sostiene sobre las 4 familias de fondo (blanco, negro/tinta, rojo,
amarillo). z-index:70 — por encima del header (60) pero por debajo del
drawer (90), para que el drawer lo tape al abrirse. bottom:84px deja
margen de sobra sobre el .toast (bottom:26px, ~48px de alto: ocupa de 26 a
~74px), así nunca se solapan sin depender de si el toast está visible.
NOTA: "aparece al pasar el hero" pedía alternar una clase por scroll; eso
requiere JS y el brief prohíbe escribirlo aquí. Queda visible siempre. */
/* A2: bottom:84px tapaba 60×49px de "Agregar a mi lista" del panel en
desktop (a 1440×900 el botón acaba en y≈785; con bottom:18px el FAB baja
a y≈822–882, ya fuera). */
.fab-wa{
position:fixed;right:20px;bottom:18px;z-index:70;
display:inline-flex;align-items:center;gap:10px;
background:var(--wa);color:var(--ink);text-decoration:none;
min-width:60px;min-height:60px;border-radius:999px;
padding:0 22px;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;
box-shadow:0 16px 34px -14px rgba(24,19,18,.6),0 0 0 3px rgba(255,255,255,.92);
}
/* NOTA: se intentó revelarlo al pasar el hero (ocultarlo en la primera pantalla,
donde ya hay dos CTA grandes). El estado oculto peleaba con reglas posteriores
de este mismo bloque y diagnosticarlo costaba más que la mejora, que es
estética. Se queda visible siempre: cumple lo que se pedía —un CTA
persistente— y es más simple. */
.fab-wa:hover{background:#1ec258;color:var(--ink)}
/* En el flotante el glifo va BLANCO sobre el verde: es el bloqueo canonico de
la marca (blanco sobre verde, o verde sobre blanco; nunca tinta sobre verde).
El latido de anillo era de un punto redondo; en un glifo se veria como un
parche cuadrado, asi que se cambia por una escala minima. */
.fab-wa__dot{
width:22px;height:22px;display:block;flex:none;background:#fff;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967c-.273-.099-.471-.148-.67.15c-.197.297-.767.966-.94%201.164c-.173.199-.347.223-.644.075c-.297-.15-1.255-.463-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059c-.173-.297-.018-.458.13-.606c.134-.133.298-.347.446-.52s.198-.298.298-.497c.099-.198.05-.371-.025-.52s-.669-1.612-.916-2.207c-.242-.579-.487-.5-.669-.51a13%2013%200%200%200-.57-.01c-.198%200-.52.074-.792.372c-.272.297-1.04%201.016-1.04%202.479c0%201.462%201.065%202.875%201.213%203.074s2.096%203.2%205.077%204.487c.709.306%201.262.489%201.694.625c.712.227%201.36.195%201.871.118c.571-.085%201.758-.719%202.006-1.413s.248-1.289.173-1.413c-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214l-3.741.982l.998-3.648l-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884c2.64%200%205.122%201.03%206.988%202.898a9.82%209.82%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.82%2011.82%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.9%2011.9%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.82%2011.82%200%200%200-3.48-8.413%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967c-.273-.099-.471-.148-.67.15c-.197.297-.767.966-.94%201.164c-.173.199-.347.223-.644.075c-.297-.15-1.255-.463-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059c-.173-.297-.018-.458.13-.606c.134-.133.298-.347.446-.52s.198-.298.298-.497c.099-.198.05-.371-.025-.52s-.669-1.612-.916-2.207c-.242-.579-.487-.5-.669-.51a13%2013%200%200%200-.57-.01c-.198%200-.52.074-.792.372c-.272.297-1.04%201.016-1.04%202.479c0%201.462%201.065%202.875%201.213%203.074s2.096%203.2%205.077%204.487c.709.306%201.262.489%201.694.625c.712.227%201.36.195%201.871.118c.571-.085%201.758-.719%202.006-1.413s.248-1.289.173-1.413c-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214l-3.741.982l.998-3.648l-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884c2.64%200%205.122%201.03%206.988%202.898a9.82%209.82%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.82%2011.82%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.9%2011.9%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.82%2011.82%200%200%200-3.48-8.413%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
animation:latir-ico 2.6s ease-in-out infinite;
}
@keyframes latir-ico{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
/* ------------------------------------------------------ Tarea 4: barrido extendido
Mismo mixin visual de .pill::after, reutilizado en el resto de pulsables con
forma de botón. Excluidos a propósito: .sw (elevación propia, 54 barridos
serían ruido), .nav a y .foot__col a (son navegación de texto, no botones). */
.obra__btn,.chip,.lin,.chip-op,.extra,.drawer__send,.drawer__x,.fab-wa,
.promo a,.link-ul,.nap__wa,.li__x{
position:relative;overflow:hidden;isolation:isolate;
}
.obra__btn::after,.chip::after,.lin::after,.chip-op::after,.extra::after,
.drawer__send::after,.drawer__x::after,.fab-wa::after,
.promo a::after,.link-ul::after,.nap__wa::after,.li__x::after{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(100deg,transparent 20%,rgba(253,231,76,.55) 45%,rgba(28,124,84,.55) 62%,transparent 82%);
transform:translateX(-115%);opacity:0;transition:transform .55s var(--ease),opacity .3s;
}
.obra__btn:hover::after,.obra__btn:focus-visible::after,
.chip:hover::after,.chip:focus-visible::after,
.lin:hover:not(:disabled)::after,.lin:focus-visible::after,
.chip-op:hover::after,.chip-op:focus-visible::after,
.extra:hover::after,.extra:focus-visible::after,
.drawer__send:hover::after,.drawer__send:focus-visible::after,
.drawer__x:hover::after,.drawer__x:focus-visible::after,
.fab-wa:hover::after,.fab-wa:focus-visible::after,
.promo a:hover::after,.promo a:focus-visible::after,
.link-ul:hover::after,.link-ul:focus-visible::after,
.nap__wa:hover::after,.nap__wa:focus-visible::after,
.li__x:hover::after,.li__x:focus-visible::after{
transform:translateX(115%);opacity:1;
}
@media (prefers-reduced-motion:reduce){
.obra__btn::after,.chip::after,.lin::after,.chip-op::after,.extra::after,
.drawer__send::after,.drawer__x::after,.fab-wa::after,
.promo a::after,.link-ul::after,.nap__wa::after,.li__x::after{display:none}
.fab-wa__dot{animation:none}
}
/* El position:relative del mixin de barrido (arriba) pisaba el position:fixed
del flotante por orden de cascada: se restaura aquí, después. */
.fab-wa{position:fixed}
/* ================================================================ Responsive */
@media (max-width:1180px) and (min-width:701px){
/* Roberto: la lata se tapa por arriba en el menú. Causa: en este rango el
menú se oculta tras el burger y el header baja a 79px de alto, pero la
lata se queda en 96px centrada con `top:50%` -> sobresale 9px POR ARRIBA
y ese sobrante queda debajo de la barra roja de promoción.
El diseño original solo preveía sobresalir por ABAJO (ver comentario de
`.brand__mark` arriba: «el saliente por debajo queda ≤14px»). Se cuelga
del borde superior del header (`top:0` en vez de centrar) y se reduce un
5% (96 -> 91px, el máximo que se pidió) para que el sobrante de abajo
quede en ese mismo margen de ≤14px en vez de crecer a 17px. */
/* -16px medido: `.brand` (el contenedor de referencia) no empieza en el
borde superior del header, así que `top:0` no basta — hay que restarle
ese desfase para que la lata quede a ras del borde de arriba. */
.brand__mark{top:-16px;transform:none}
.brand:hover .brand__mark{transform:rotate(-3deg)}
.brand__mark img{height:91px}
}
@media (max-width:1180px){
.nav{display:none}
.burger{display:flex}
.header.open .nav{
display:flex;position:absolute;top:100%;left:0;right:0;background:var(--ink);
flex-direction:column;gap:0;padding:8px var(--gutter) 20px;border-bottom:1px solid rgba(255,255,255,.1);
}
.header.open .nav a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.header__in{gap:18px}
.carta__grid{grid-template-columns:1fr 320px}
}
@media (max-width:980px){
:root{--gutter:20px}
.hero__grid{grid-template-columns:1fr;min-height:0}
.hero__copy{padding:56px var(--gutter) 44px}
/* OJO: los spans siguen en nowrap a propósito — el titular debe caber en 3
líneas exactas en todos los anchos. El tamaño lo resuelve `cqw`. */
/* Tarea 6.2: sin order — vuelve al orden natural del HTML (copy primero,
envase después), así el h1 y los botones caen en la primera pantalla. */
.hero__art{min-height:380px}
.hero3d__hint{display:none} /* Tarea 6.3: habla de un mouse que no existe */
.hero__badge{bottom:24px}
.carta__grid{grid-template-columns:1fr}
/* A1: el .panel con el precio quedaba al final del flujo, 13 pantallas
abajo del muro de 54 muestras — tocar un color no mostraba nada. Ahora
es una hoja inferior fija, oculta por defecto y visible con
.panel--abierto. Selector con id (#carta) para ganar por especificidad
a `.carta.bio .panel` (fondo verde de la variante temática) sin
duplicar sus colores — solo se toca posición/transform/forma. */
#carta .panel{
position:fixed;left:0;right:0;bottom:0;top:auto;z-index:80;
max-height:46vh;overflow:auto;
border-radius:18px 18px 0 0;
box-shadow:0 -20px 50px -20px rgba(24,19,18,.6);
transform:translateY(105%);
transition:transform .32s var(--ease);
}
#carta .panel.panel--abierto{transform:translateY(0)}
.panel__close{display:flex}
.panel__swatch{height:120px}
/* A1: con nombre+hex+líneas+precio en orden de lectura, el precio caía a
~443px de la cabecera — fuera de los 46vh del sheet, con scroll. Se
reordena SOLO visualmente (el DOM/orden de lectura no cambia, screen
readers siguen el orden natural): precio justo después del hex, antes
de elegir línea. Así entra sin scroll con margen de sobra. */
.panel__in{display:flex;flex-direction:column}
.panel__in .spec{order:2}
.panel__in .panel__lbl,
.panel__in .lineas,
.panel__in .panel__hint{order:3}
.panel__in .note{order:4}
.panel__in .panel__btns{order:5}
.medida__grid,.proceso__head,.proceso__grid,.pilares__grid,.resenas__grid,
.muestras__head,.muestras__grid,.calc__grid,.extras__grid,.b2b__grid,
.historia__grid,.cta__grid,.foot__grid{grid-template-columns:1fr;gap:32px}
.proyectos__grid{grid-template-columns:1fr;grid-template-rows:auto}
.obra--wide{grid-column:span 1}
.obra{min-height:260px}
.foot__grid{gap:28px}
.historia__art{height:300px}
.cta__btns .pill{padding:16px 24px;font-size:16px}
/* 60px arriba y abajo por doce secciones eran 1.440px solo de aire en
una pantalla de 375px. A 38px sigue leyendose el corte entre bloques. */
section{padding:38px 0 !important}
/* Tarea 6.1: antes se ocultaba por completo (display:none). Se achica en
vez de esconderse: el CTA debe verse en la primera pantalla del móvil. */
.header__cta .pill--red{padding:9px 14px;font-size:13px}
}
@media (max-width:700px){
/* la lata baja de tamaño para no comerse el header en móvil */
.brand{padding-left:70px}
.brand__mark img{height:76px}
/* El wordmark se oculta: con «Cotizar» de vuelta en móvil, la fila no cabía y
el burger quedaba FUERA de pantalla (right=455 en 375px de ancho), o sea
sin forma de abrir el menú. `overflow-x:clip` lo escondía en vez de
provocar scroll, así que la comprobación de desborde daba verde.
La lata ya identifica la marca a este tamaño. */
.brand__wm{display:none}
.header__in{gap:10px}
.header__cta{gap:8px}
.header__cta .pill--red{padding:10px 16px;font-size:14px}
.extras__items{grid-template-columns:repeat(2,1fr)}
/* A 2 por fila la columna de texto de la tarjeta vitrina quedaba en ~65px:
el título se cortaba ("Bande[ja]") y el botón salía del recuadro. Se
apila foto-arriba/texto-abajo solo aquí; el estilo (fondo tinta, precio
amarillo, píldora) no cambia. */
.extra{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:10px}
.extra__foto{grid-column:1;grid-row:1;width:100%;height:96px}
.extra__txt{grid-column:1;grid-row:2}
.extra__add{grid-column:1;grid-row:3}
.pilar{grid-template-columns:52px 1fr;gap:16px}
.pilar__ico{width:48px;height:48px;border-radius:14px}
.pilar__ico img{width:30px;height:30px}
/* WCAG 2.5.5 — dianas de 44px en el flujo de venta */
.lin{min-height:44px}
.obra__btn{min-height:44px}
.calc__controls input[type=range]{height:44px}
.promo .sep{display:none} /* Tarea 6.4: dejaba un "·" huérfano al final de la línea */
/* A2: en móvil el FAB de texto tapaba 60×49px de "Crear mi color a medida".
Versión compacta circular: solo el glifo/punto, aria-label se conserva
en el . Con la hoja de A1 abierta (z-index 80) el FAB (70) queda
debajo — no hace falta CSS extra, ya está en el orden de capas. */
.fab-wa{
right:14px;bottom:14px;
width:60px;padding:0;justify-content:center;gap:0;
border-radius:50%;
}
.fab-wa__txt{display:none}
/* A6: #openList envolvía a dos líneas (70px de alto) por el texto */
.header__cta .pill--onink{white-space:nowrap}
}
/* A 320px (iPhone SE viejo, Androids de gama baja) la fila del header aún se
salía ~25px. Misma receta que a 700px, un punto más apretada. «Cotizar» NO
se oculta: fue decisión explícita devolverlo al móvil. */
@media (max-width:360px){
.brand{padding-left:54px}
.brand__mark img{height:58px}
.header__in{padding:12px 14px;gap:8px}
.header__cta{gap:6px}
.header__cta .pill--red{padding:9px 12px;font-size:13px}
.header__cta .pill--onink{padding:9px 12px;font-size:13px}
.burger{width:38px;height:38px}
}
@media (max-width:560px){
.hero__facts{gap:22px}
.ticket__nums{grid-template-columns:1fr}
.ticket,.nap{padding:22px}
.drawer__panel{padding:20px}
}
/* ------------------------------------------------------- E4 · acuses de recibo
Todo transform/opacity. El drawer ya no se abre al agregar (app.js): el acuse
es el toast + este bump del contador, que es lo que el ojo va a buscar. */
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.header__cta .pill--onink .num.bump,#listCount.bump{
display:inline-block;animation:bump .26s var(--ease)}
@keyframes drawer-sale{to{transform:translateX(30px);opacity:0}}
@keyframes fade-sale{to{opacity:0}}
.drawer.is-closing .drawer__panel{animation:drawer-sale .24s var(--ease) forwards}
.drawer.is-closing{pointer-events:none}
@keyframes llega{0%{box-shadow:0 0 0 0 rgba(253,231,76,.75)}100%{box-shadow:0 0 0 16px rgba(253,231,76,0)}}
.panel.llega{animation:llega .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
.header__cta .pill--onink .num.bump,#listCount.bump,.panel.llega,
.drawer.is-closing .drawer__panel{animation:none}
}
/* ==========================================================================
SUBPÁGINAS · colores, historia, contacto
Todo con los tokens de :root. Ni un color nuevo, ni una fuente nueva: estas
páginas comparten cabecera, pie y hoja con el home, así que lo único que se
añade aquí son los bloques que el home no tiene.
========================================================================== */
/* --- Cabecera de página --------------------------------------------------- */
.phero{background:var(--ink);color:#fff;padding:clamp(72px,9vw,132px) 0 clamp(52px,6vw,84px)}
.phero__in{max-width:900px}
.h1--pag{font-family:var(--display);font-variation-settings:'opsz' 64;
font-size:clamp(34px,5.6vw,72px);line-height:1.02;letter-spacing:-.02em;
font-weight:700;margin:14px 0 0}
.phero__sub{margin:22px 0 0;font-size:clamp(16px,1.25vw,19px);line-height:1.62;
color:rgba(255,255,255,.82);max-width:62ch}
.phero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.eyebrow--light{color:var(--yellow)}
/* --- Cierre de página ---------------------------------------------------- */
.cierre-pag{background:var(--red);color:#fff;padding:clamp(64px,8vw,104px) 0;text-align:center}
.cierre-pag__in{max-width:760px;margin-inline:auto}
.cierre-pag p{margin:16px auto 0;font-size:clamp(16px,1.2vw,19px);line-height:1.6;
color:rgba(255,255,255,.92);max-width:56ch}
.cierre-pag .phero__btns{justify-content:center}
/* --- Línea Positivos (página de colores) --------------------------------- */
.pos{background:var(--ink-2);color:#fff;padding:clamp(64px,8vw,110px) 0}
.pos__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
.pos__copy p{margin:18px 0 0;line-height:1.65;color:rgba(255,255,255,.84);max-width:56ch}
.pos__nota{border-left:3px solid var(--yellow);padding-left:14px;
font-size:14px;color:rgba(255,255,255,.72)!important}
.pos__precios{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
border-radius:20px;padding:clamp(22px,2.4vw,30px)}
.pos__precios h3{font-family:var(--display);font-size:20px;margin:0 0 16px}
.pos__precios .pill{margin-top:20px;width:100%;justify-content:center}
.tprecios{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
.tprecios th,.tprecios td{padding:11px 8px;text-align:right;border-bottom:1px solid var(--line-dark)}
.tprecios thead th{color:var(--yellow);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.tprecios th:first-child,.tprecios td:first-child{text-align:left;font-family:var(--body);font-size:14px}
.tprecios td{font-variant-numeric:tabular-nums}
.tprecios__pie{margin:14px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.6)}
/* --- Fundador (historia) ------------------------------------------------- */
.fund{padding:clamp(64px,8vw,110px) 0;background:#fff}
.fund__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:start}
.fund__foto{margin:0}
.fund__foto img{width:100%;height:auto;border-radius:20px;display:block}
.fund__foto figcaption,.fabrica__foto figcaption{margin-top:12px;font-family:var(--mono);
font-size:11.5px;line-height:1.5;color:var(--muted)}
.fund__copy p{margin:18px 0 0;line-height:1.7;color:var(--muted);max-width:62ch}
/* --- Hero con foto y cita del fundador (página Historia) ----------------
Roberto (07-ago-2026): "no se parece en nada" al diseño de Historia.dc.html
-- ese hero es a pantalla completa (sin `.shell`, la foto llega al borde),
igual que ya hace `.hero` en el home. Se corrige con el mismo patrón, no
uno inventado: mismo `max-width:var(--shell)` sin el padding del shell. */
.phero--foto{padding:0;background:var(--ink)}
.phero--foto__grid{max-width:var(--shell);margin:0 auto;display:grid;
grid-template-columns:1fr 1fr;align-items:stretch;min-height:600px}
.phero--foto__copy{padding:clamp(56px,7vw,96px) clamp(28px,4vw,64px) clamp(56px,7vw,96px) var(--gutter)}
.phero--foto__copy .phero__sub{max-width:52ch}
.phero--foto__foto{margin:0;position:relative;overflow:hidden;min-height:420px;background:#000}
.phero--foto__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.phero--foto__cita{position:absolute;left:0;right:0;bottom:0;margin:0;padding:36px 40px;
background:linear-gradient(180deg,rgba(10,8,7,0) 38%,rgba(10,8,7,.88) 100%)}
.phero--foto__cita p{margin:0 0 12px;font-family:var(--display);font-weight:800;
font-size:clamp(19px,1.8vw,24px);line-height:1.3;letter-spacing:-.015em;color:#fff;max-width:32ch}
.phero--foto__cita span{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.72)}
@media (max-width:900px){
.phero--foto__grid{grid-template-columns:1fr;min-height:0}
.phero--foto__copy{padding:44px var(--gutter)}
.phero--foto__foto{height:320px}
}
/* --- La ruta: cronología de 3 pasos, con las brochas del diseño original -
OJO: "cronologia", NO "ruta" -- ese nombre ya existe en styles.css para las
tarjetas de "Rutas de contacto" (contacto.html) y su regla, al ir DESPUÉS
en la cascada, se comía fondo/padding/color de esta sección entera.
Las brochas son las MISMAS rutas SVG de Historia.dc.html (dibujadas a mano
para ese diseño) -- se copian tal cual, no se regeneran. */
.cronologia{background:#fff;padding:0 0 clamp(56px,7vw,96px);position:relative;overflow:hidden}
.cronologia__brochas{position:absolute;top:0;left:0;right:0;height:420px;z-index:0;
pointer-events:none;isolation:isolate}
/* Cada brocha trae su propia declaración `animation` completa (duración y
demora distintas por trazo, copiadas tal cual de Historia.dc.html) en su
atributo `style` -- por eso esta clase no declara `animation`. */
.brocha{position:absolute;top:0;mix-blend-mode:multiply;transform-origin:top}
@keyframes crecer{from{scale:1 0}to{scale:1 1}}
@media (max-width:760px){.brocha.sm-off{display:none}}
@media (prefers-reduced-motion:reduce){.brocha{scale:1 1 !important;animation:none}}
.cronologia__head{max-width:60ch;margin-bottom:38px;position:relative;z-index:1;padding-top:clamp(56px,7vw,96px)}
.cronologia__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}
.paso-ruta{border-top:3px solid var(--ink);padding-top:22px;background:rgba(255,255,255,.88);backdrop-filter:blur(2px)}
.paso-ruta--red{border-color:var(--red)}
.paso-ruta--green{border-color:var(--green)}
.paso-ruta__n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.paso-ruta h3{font-family:var(--display);font-weight:800;font-size:22px;
letter-spacing:-.02em;line-height:1.15;margin:14px 0 10px}
.paso-ruta p{font-size:15.5px;line-height:1.62;color:var(--muted);margin:0}
@media (max-width:900px){.cronologia__grid{grid-template-columns:1fr;gap:32px}}
/* --- El primer reto: el thinner, con la foto real de la lata ------------- */
.thinner{background:var(--ink);color:#fff;padding:0}
.thinner__grid{max-width:var(--shell);margin:0 auto;display:grid;
grid-template-columns:.9fr 1.1fr;align-items:center}
.thinner__foto{display:flex;align-items:center;justify-content:center;
padding:clamp(44px,6vw,70px) clamp(28px,4vw,40px);background:#fff}
.thinner__foto img{width:100%;max-width:320px;height:auto;object-fit:contain}
.thinner__copy{padding:clamp(44px,6vw,70px) var(--gutter)}
.thinner__copy .lead{color:rgba(255,255,255,.78);max-width:52ch}
@media (max-width:900px){.thinner__grid{grid-template-columns:1fr}}
/* --- Nuestro compromiso / Mirando al futuro ------------------------------ */
.compromiso{background:var(--red);color:#fff;padding:clamp(56px,7vw,88px) 0}
.compromiso__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)}
.compromiso__col--futuro{border-left:1px solid rgba(255,255,255,.28);padding-left:clamp(24px,4vw,64px)}
.compromiso h2{font-size:clamp(26px,2.4vw,38px)}
.compromiso .lead{color:rgba(255,255,255,.92);max-width:48ch}
.compromiso__chips{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.compromiso__chips span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;
background:rgba(255,255,255,.14);border-radius:999px;padding:9px 16px}
@media (max-width:900px){
.compromiso__grid{grid-template-columns:1fr;gap:36px}
.compromiso__col--futuro{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.28);padding-top:32px}
}
/* --- Cifras (página Historia) -------------------------------------------- */
.stats{background:var(--green);color:#fff;padding:clamp(48px,6vw,76px) 0}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{border-top:3px solid var(--yellow);padding-top:20px}
.stat b{display:block;font-family:var(--display);font-weight:800;
font-size:clamp(42px,4.2vw,64px);letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:10px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.85)}
@media (max-width:900px){.stats__grid{grid-template-columns:1fr;gap:28px}}
/* --- La fábrica hoy (historia) ------------------------------------------ */
.fabrica{padding:clamp(64px,8vw,110px) 0;background:#F7F3EE}
.fabrica__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,44px);align-items:start}
.fabrica__foto{margin:0}
.fabrica__foto img{width:100%;height:auto;border-radius:18px;display:block}
.fabrica__texto p{margin:0 0 18px;line-height:1.7;color:var(--muted)}
.cita{font-family:var(--display);font-size:clamp(19px,1.7vw,25px);line-height:1.42;
color:var(--ink)!important;letter-spacing:-.01em}
/* --- Contacto ----------------------------------------------------------- */
.cont{padding:clamp(56px,7vw,96px) 0;background:#fff}
.cont__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
/* La tarjeta contrasta con su sección: fondo claro -> tarjeta con borde e
interior tinta suave, nunca blanco sobre blanco. */
.cont__card{background:#F7F3EE;border:1px solid var(--line-soft);border-radius:20px;
padding:clamp(22px,2.4vw,30px)}
.cont__card h2{font-family:var(--display);font-size:21px;margin:0 0 12px;color:var(--ink)}
.cont__card p{margin:0 0 14px;line-height:1.62;color:var(--muted);font-size:15px}
.cont__card p:last-child{margin-bottom:0}
.cont__card--wa{background:var(--ink);border-color:transparent}
.cont__card--wa h2,.cont__card--wa p{color:#fff}
.cont__card--wa p{color:rgba(255,255,255,.82)}
.cont__dato{font-family:var(--mono);font-size:23px!important;color:var(--yellow)!important;
font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cont__card--wa .pill{margin-top:4px}
.thoras{width:100%;border-collapse:collapse;margin-bottom:10px}
.thoras th,.thoras td{padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.thoras th{text-align:left;font-weight:600;color:var(--ink)}
.thoras td{text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted)}
.cont__nota{font-size:13px!important;color:var(--muted)}
.cont__card--falta{background:#FFF8E6;border-color:rgba(180,85,47,.3)}
.marca-falta{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
letter-spacing:.04em;background:var(--yellow);color:var(--ink)!important;
padding:5px 10px;border-radius:6px;margin-bottom:12px!important}
/* --- Rutas de contacto -------------------------------------------------- */
.rutas{padding:clamp(56px,7vw,96px) 0;background:var(--ink);color:#fff}
.rutas .sec-head h2,.rutas .sec-head p{color:#fff}
.rutas .sec-head p{color:rgba(255,255,255,.78)}
.rutas__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:36px}
.ruta{display:grid;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
border-radius:18px;padding:24px;text-decoration:none;color:#fff;position:relative;overflow:hidden;
transition:transform .22s var(--ease),background-color .22s,border-color .22s}
.ruta:hover{transform:translateY(-3px);background:rgba(255,255,255,.09);border-color:var(--yellow)}
.ruta__n{font-family:var(--mono);font-size:11px;color:var(--yellow);letter-spacing:.06em}
.ruta__t{font-family:var(--display);font-size:18.5px;line-height:1.25;font-weight:600}
.ruta__d{font-size:14px;line-height:1.55;color:rgba(255,255,255,.72)}
@media (max-width:900px){
.pos__grid,.fund__grid,.fabrica__grid{grid-template-columns:1fr}
.fund__foto{max-width:420px}
}
/* --- Puente de la portada a la carta completa ----------------------------- */
.carta__mas{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;
gap:10px;margin-top:26px}
.carta__mas-nota{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
@media (max-width:980px){.carta__mas{align-items:stretch}
.carta__mas .pill{justify-content:center}}
/* --- La selección de la portada: 10 muestras, no 54 -----------------------
Con 10 el muro medía 409px contra 713 del panel de precios, y quedaba medio
frame vacío con el botón flotando. A 5 columnas y con la muestra más alta el
bloque sube a ~600px y el panel deja de colgar solo. En la página de la carta
(sin data-solo) NO se toca nada: allí el muro de 54 ya tiene su altura. */
@media (min-width:981px){
.swatches[data-solo]{grid-template-columns:repeat(5,1fr)}
.swatches[data-solo] .sw__chip{height:168px}
.swatches[data-solo] .sw__name{font-size:18px}
}
/* ==========================================================================
SIDEBAR DE PRECIO — entra por la derecha al tocar un color (≥981px)
Encargo: alto = alto de la sección, sin tapar el menú ni el pie.
Por eso el riel es ABSOLUTO dentro de #carta y no fixed: confinado a la caja
de la sección, es imposible que se monte sobre la cabecera o el footer.
========================================================================== */
#carta{position:relative}
@media (min-width:981px){
/* La columna de 372px desaparece: el muro usa todo el ancho y el sidebar
entra por encima. Menos reflow al abrir (solo transform). */
.carta__grid{grid-template-columns:1fr}
#carta .panel{
position:absolute;top:0;right:0;bottom:0; /* = alto exacto de la sección */
width:min(380px,32vw);z-index:60;
pointer-events:none; /* cerrado no intercepta clics */
transform:translateX(calc(100% + 48px));
transition:transform .42s var(--ease);
}
#carta .panel.panel--abierto{transform:none;pointer-events:auto}
/* La tarjeta acompaña el scroll DENTRO del riel. 96px la dejan por debajo del
header sticky; el riel se encarga de que nunca pase del pie de la sección. */
#carta .panel__card{
position:sticky;top:96px;
max-height:calc(100vh - 128px);overflow:auto;
border-radius:18px 0 0 18px;
box-shadow:-24px 0 60px -28px rgba(24,19,18,.5);
}
/* El ✕ hace falta también en escritorio: el sidebar ahora se cierra. */
#carta .panel__close{display:flex}
/* Pista de que hay que tocar un color, visible solo con el sidebar cerrado. */
.carta__mas{transition:opacity .3s var(--ease)}
}
@media (prefers-reduced-motion:reduce){
#carta .panel{transition:none}
}
/* --- La tarjeta del sidebar toca los dos bordes de la sección -------------
Encargo de Roberto: sin espacio muerto arriba ni abajo. La tarjeta pasa a
`height:100%` del riel (que ya mide lo que la sección), en columna, con los
botones anclados al fondo por `margin-top:auto`. Lo que llena el medio es la
combinación sugerida, que además es la palanca de venta: de un galón a cuatro.
EXCEPCIÓN `.carta--completa` (la página de la carta): su sección mide ~2.580px
y una tarjeta a alto completo sería una franja oscura de dos mil píxeles; ahí
se queda sticky y acotada a la ventana. */
@media (min-width:981px){
/* `max-height` y `sticky` los ponía el bloque anterior del sidebar y topaban
la tarjeta en 772px (100vh-128). Aquí se anulan: la tarjeta LLENA el riel,
que ya mide lo que la sección, así que toca los dos bordes. */
#carta .panel__card{height:100%;max-height:none;position:static;
display:flex;flex-direction:column;border-radius:18px 0 0 18px}
#carta .panel__in{flex:1;display:flex;flex-direction:column;overflow:auto}
#carta .panel__btns{margin-top:auto;padding-top:20px}
#carta.carta--completa .panel__card{height:auto;position:sticky;top:96px;max-height:calc(100vh - 128px)}
#carta.carta--completa .panel__in{flex:0 1 auto}
#carta.carta--completa .panel__btns{margin-top:22px}
}
/* --- Combinación sugerida ------------------------------------------------- */
.combina{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-dark)}
.carta.bio .combina{border-top-color:rgba(251,247,239,.18)}
.combina__row{display:grid;gap:8px;margin:12px 0 14px}
.combi{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:center;
width:100%;padding:8px;background:rgba(255,255,255,.06);border:1px solid transparent;
border-radius:12px;cursor:pointer;text-align:left;
transition:background-color .2s var(--ease),border-color .2s,transform .2s var(--ease)}
.combi:hover{background:rgba(255,255,255,.12);border-color:var(--yellow);transform:translateX(-2px)}
.combi:active{transform:translateX(-2px) scale(.99)}
.combi__chip{display:block;width:34px;height:34px;border-radius:8px;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.combi__txt{display:grid;gap:2px;min-width:0}
.combi__n{font-family:var(--display);font-weight:700;font-size:14.5px;color:#fff;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combi__r{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
color:rgba(255,255,255,.62)}
.combina__add{width:100%;justify-content:center;font-size:14px;padding:12px}
@media (max-width:980px){
/* En la hoja inferior el precio manda; la combinación va después, sin robarle
el espacio que A1 le ganó al scroll. */
.combina{order:9;margin-top:16px}
}
/* --- Con la tarjeta a alto completo, los CTA no pueden caer en el scroll ----
Medido: el contenido (muestra 150px + ficha + combinación) pide ~1.063px y la
sección da 1.011. En vez de recortar la muestra de color —que ES el producto—
los botones quedan anclados al fondo del área desplazable. Llevan fondo propio
porque si no, el texto que pasa por debajo se transparenta. */
@media (min-width:981px){
#carta:not(.carta--completa) .panel__swatch{height:126px}
#carta .panel__btns{
position:sticky;bottom:0;margin-top:auto;
padding:16px 0 4px;background:var(--ink)}
/* La variante temática tiene degradado, no color plano: se repite su tramo
final para que el anclaje no se note como un parche. */
.carta.bio .panel__btns{
background:linear-gradient(to bottom,rgba(51,65,47,0) 0,#33412F 14px,#33412F 100%)}
}
/* --- El flotante no compite con el sidebar --------------------------------
Medido en captura: el FAB (z-70) tapaba el tercer color de la combinación.
Con el sidebar abierto sobra, porque la tarjeta ya tiene su propio «Cotizar
por WhatsApp» dos dedos más arriba. Se retira mientras está abierto y vuelve
al cerrarlo. En móvil no aplica: allí la hoja inferior ya lo cubre. */
@media (min-width:981px){
body.con-sidebar .fab-wa{
opacity:0;transform:translateY(10px) scale(.96);pointer-events:none}
}
/* Supuse que los botones del sidebar y de la tarjeta de contacto tenían fondo
oscuro y les puse el verde brillante: son píldoras CREMA, y el glifo se caía a
1.86:1. Medido y corregido — el verde oscuro sirve en todos los fondos claros.
El brillante se reserva para píldoras de tinta, si algún día llevan el glifo. */
.pill--onink .dot-wa,.pill--ink .dot-wa{background:var(--wa)}
/* --- Precio de entrada en las tarjetas de categoría ------------------------
El home tenía 15 secciones y solo DOS mostraban un precio (carta y
calculadora): quien entraba buscando «un galón de esmalte, ¿cuánto?» no
tenía respuesta en ninguna pantalla. El dato va aquí, junto al CTA, sin
sumar una sección nueva.
El chip y el precio comparten fila; en móvil se apilan para no apretar. */
.cat__pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.cat__desde{font-family:var(--mono);font-size:11px;letter-spacing:.02em;
color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums;
text-shadow:0 1px 8px rgba(0,0,0,.75)}
@media (max-width:700px){
.cat__pie{gap:8px}
.cat__desde{font-size:10.5px}
}
/* --- Precio en «Completa el proyecto» --------------------------------------
Los 6 accesorios se mostraban sin precio y la lista de cotización decía
«cantidad a definir» sin cifra: el visitante no sabía si añadir una bandeja
le costaba 100 o 1.000 pesos. Precios reales del catálogo, tabla E. */
/* Tarjeta oscura ahora (vitrina) -- precio en amarillo sobre tinta, como en
Dirección C. Amarillo #FDE74C sobre #181312 = 15.5:1, sin problema de AA. */
.extra__precio{display:block;margin-top:5px;font-family:var(--mono);
font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
color:var(--yellow);letter-spacing:-.01em}
/* --- Los 4 argumentos, dentro del Hero ------------------------------------
Van donde siempre estuvieron: en la columna de texto, debajo de los botones.
Antes eran 3 datos cortos y los MISMOS 4 completos se repetían en la sección
«Por qué Reds y no la otra», que se eliminó. Se quedó el contenido bueno y el
trato de icono de allá (.pilar), que era mejor.
DOS columnas, no cuatro: la columna del Hero mide ~660px y a cuatro cada una
quedaba en 160px, con los títulos partidos en dos líneas. */
.hero__facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;
margin-top:30px;padding-top:26px;border-top:1px solid var(--line-soft)}
.hero__facts .pilar{display:grid;grid-template-columns:44px 1fr;gap:14px;
align-items:start;padding:0;border-bottom:none}
.hero__facts .pilar__ico{width:44px;height:44px;border-radius:13px}
.hero__facts .pilar__ico img{width:26px;height:26px}
.hero__facts .pilar h3{font-size:16.5px;margin:0 0 4px;letter-spacing:-.015em}
.hero__facts .pilar p{font-size:13px;line-height:1.5;max-width:32ch}
@media (max-width:700px){
.hero__facts{grid-template-columns:1fr;gap:16px;margin-top:24px;padding-top:20px}
.hero__facts .pilar p{max-width:60ch;font-size:13.5px}
}
/* --- Salpicadura de pintura al hacer clic en la lata -----------------------
Capa fija sobre la página. z-index 60: por encima del contenido, por debajo
del header (200), del drawer (90) y del flotante (70), para que una mancha
nunca tape la navegación ni un CTA. pointer-events:none: es decoración, no
intercepta ni un clic. */
/* z-index 40, y hay dos razones medidas:
1) a 60 EMPATABA con el header (que no es 200, como creí al escribirlo) y en
un empate gana el último del documento: la capa, que se crea en JS al final
del body. Las manchas pasaban por encima del menú.
2) a 40 quedan por debajo del header (60), del flotante (70) y del drawer
(90), y por debajo de las tarjetas que se elevan a 41 justo aquí abajo. */
#splats{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
/* La pintura pasa POR DETRÁS de las tarjetas, no por encima.
Solo estas tres familias: la auditoría confirmó que son `position:relative`
con `isolation` propia y que NINGÚN ancestro las atrapa, así que subirles el
z-index funciona de verdad.
NO incluidas, y no es olvido:
· `.sw` (muestras de color) — atrapadas por `section#carta{isolation:isolate}`,
que sostiene el fondo texturizado y el sidebar de precio. Liberarlas exige
tocar eso y re-verificar la carta completa.
· `.globo` (reseñas) — dentro de un riel con `transform`+`will-change`, que es
lo que hace correr la cinta. */
.cat,.extra,.obra{z-index:41}
/* La carta se pone por ENCIMA de la capa de manchas (40): la pintura que baja
se mete por detras de esta seccion y ahi termina el efecto. La seccion ya
creaba contexto de apilamiento con `isolation`, asi que basta el z-index.
El sidebar de precio (z-60) queda dentro de este contexto: sigue por encima
del contenido de la seccion y por debajo del header, que es lo correcto. */
#carta{z-index:41}
.splat{position:absolute;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));
will-change:transform;transform-origin:50% 12%}
.splat .pop{width:100%;height:100%;transform-origin:50% 50%;
animation:splat-in .45s cubic-bezier(.2,1.6,.4,1) both}
.splat.fade{animation:splat-out .4s ease both}
@keyframes splat-in{from{transform:scale(.15)}60%{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes splat-out{to{opacity:0}}
@media (prefers-reduced-motion:reduce){#splats{display:none}}
/* --- Mapa de la fábrica ---------------------------------------------------
Pin confirmado por Roberto: 18.4841787, -69.898832. Sustituye al marcador
FALTA que había ahí. Relación de aspecto fija para que no salte el layout
mientras carga el iframe. */
.nap__mapa{border-radius:14px;overflow:hidden;border:1px solid var(--line-dark);
aspect-ratio:16/9;background:rgba(255,255,255,.05)}
.nap__mapa iframe{display:block;width:100%;height:100%;border:0;
filter:grayscale(.18) contrast(1.04)}
.cont__mapa{border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);
aspect-ratio:4/3;margin:0 0 16px}
.cont__mapa iframe{display:block;width:100%;height:100%;border:0}
.cont__dato--dir{font-size:17px!important;color:var(--ink)!important;
font-family:var(--display);font-weight:700;letter-spacing:-.01em}
/* Correo y teléfono. El amarillo de `.cont__dato` está calculado para la tarjeta
oscura de WhatsApp: sobre blanco da 1.3:1, o sea ilegible. En las tarjetas
claras el dato va en tinta (14.6:1). */
.cont__card:not(.cont__card--wa) .cont__dato{color:var(--ink)!important;font-size:19px!important}
.cont__dato a{color:inherit;text-decoration:none;
border-bottom:2px solid rgba(24,19,18,.18);transition:border-color .18s,color .18s}
.cont__dato a:hover{color:var(--red)!important;border-bottom-color:var(--red)}
/* "Ventas@PinturasReds.do" en mono a 19px no cabe en el ancho de la tarjeta
(se salía por la derecha, medido: -21px en escritorio, -34px en tablet). */
.cont__dato--correo{font-size:15.5px!important;word-break:break-all}
.cont__dato--tel{margin-top:-2px!important}
/* Cabecera de la página de contacto, compacta: la de 132/84 px de aire con el
titular a 72 px empujaba las tarjetas —lo que el visitante viene a buscar—
fuera de la primera pantalla. */
.phero--compacto{padding:clamp(56px,6vw,84px) 0 clamp(34px,3.6vw,50px)}
.phero--compacto .h1--pag{font-size:clamp(30px,4.2vw,54px);margin-top:10px}
.phero--compacto .phero__sub{margin-top:14px;font-size:clamp(15.5px,1.15vw,17.5px);
line-height:1.58;max-width:56ch}
/* ==========================================================================
PANTALLA PARTIDA · asesor + proceso en una sola sección
Fusión de dos secciones que decidió Roberto con las dos maquetas delante.
Medido: 1.304 -> 780 px en escritorio, 2.357 -> 1.674 en móvil. El ahorro en
móvil NO viene del mitad y mitad (ahí las columnas se apilan igual): viene de
convertir los tres pasos en lista con miniatura.
Coste asumido: las fotos de la fábrica bajan de 442 px a 64 px de miniatura.
========================================================================== */
.dual{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.dual__lado{padding:clamp(44px,4.4vw,76px) clamp(26px,3vw,56px)}
.dual__rojo{background:var(--red);color:#fff}
.dual__verde{background:var(--green);color:#fff}
.dual .h2{font-size:clamp(28px,2.6vw,42px);line-height:1.04;margin:0 0 14px;color:#fff}
.dual .lead{font-size:16px;line-height:1.6;color:rgba(255,255,255,.86);
margin:0 0 26px;max-width:44ch}
.dual .chat{max-width:none}
/* Los 3 pasos, en lista vertical con miniatura */
.dual .proceso__grid{grid-template-columns:1fr;gap:0}
.dual .paso{display:grid;grid-template-columns:74px 1fr;gap:4px 16px;align-items:start;
padding:16px 0;border-top:1px solid rgba(255,255,255,.18)}
.dual .paso:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
/* Colocación EXPLÍCITA: sin esto los cuatro hijos se auto-colocan y el título
cae en la columna de 74px de la miniatura, encima del texto. Lo vi en la
maqueta antes de traerlo aquí. */
.dual .paso__art{grid-column:1;grid-row:1 / span 3;margin:0;height:64px}
.dual .paso__n,.dual .paso h3,.dual .paso p{grid-column:2}
.dual .paso__art img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.dual .paso h3{font-size:17.5px;margin:0 0 3px}
.dual .paso p{font-size:13.5px;line-height:1.5;margin:0;color:rgba(255,255,255,.86)}
.dual .paso__n{font-size:10.5px;margin-bottom:4px}
@media (max-width:900px){
/* A esta anchura no hay mitad y mitad posible: se apilan. El ahorro se
mantiene porque los pasos siguen siendo lista, no tarjetas apiladas. */
.dual{grid-template-columns:1fr}
}
/* ==========================================================================
«PASO POR PASO» · la animación de la secuencia
Lo que comunica secuencia no es que cada cosa se mueva: es que LLEGUEN EN
ORDEN y que se dibuje el camino que las une. Riel que baja + los tres pasos
entrando escalonados detrás de él.
POR QUÉ TRANSICIÓN Y NO KEYFRAMES: con `@keyframes` + retardos por
`nth-child` la animación quedaba en `running` con `currentTime` clavado en 0 y
los pasos invisibles. Una transición disparada por una clase que pone el JS
con su propio escalonado es menos elegante sobre el papel y muchísimo más
fácil de verificar: se mide la opacidad y se sabe.
SEGURIDAD: el estado oculto solo existe con `pasos-js`, que la pone el JS. Si
el JS no corre, los pasos se ven normales — nunca se esconde contenido a la
espera de un script.
========================================================================== */
.dual__verde .proceso__grid{position:relative}
.dual__verde .proceso__grid::before{
content:"";position:absolute;left:37px;top:16px;bottom:16px;width:2px;
background:linear-gradient(180deg,var(--yellow),rgba(253,231,76,.25));
border-radius:2px;transform:scaleY(0);transform-origin:top center;
transition:transform 1.15s cubic-bezier(.23,1,.32,1)}
.pasos-on.proceso__grid::before{transform:scaleY(1)}
.pasos-js .paso{opacity:0;transform:translateY(14px);
transition:opacity .5s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1)}
.pasos-js .paso.listo{opacity:1;transform:none}
.pasos-js .paso__art{transform:scale(.94);
transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.pasos-js .paso.listo .paso__art{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
/* Sin recorrido: se ve el resultado y punto. */
.pasos-js .paso,.pasos-js .paso__art{opacity:1;transform:none;transition:none}
.dual__verde .proceso__grid::before{transform:scaleY(1);transition:none}
}
/* --- Las dos mitades, a la misma altura y a la misma escala ----------------
Medido antes: el chat terminaba en 817 y los pasos en 725 (92 px de desfase),
con texto de 13.5px contra 16 del chat y miniaturas de 70x60. El lado verde se
veía más chico y más corto.
Ahora la columna verde es flex y la lista CRECE para ocupar exactamente el
mismo alto que el chat: `flex:1` + tres filas iguales. Así el riel del paso 03
termina donde termina la ventana del chat, sin números mágicos: si el chat
crece al conversar, la lista crece con él. */
.dual__lado{display:flex;flex-direction:column}
.dual__verde .proceso__grid{flex:1;grid-template-rows:repeat(3,1fr);align-content:stretch}
.dual .paso{align-content:center;padding:0}
.dual .paso:last-child{border-bottom:none}
/* El riel llega de borde a borde de la lista: acaba a la altura del chat */
.dual__verde .proceso__grid::before{top:0;bottom:0}
/* Escala propia del lado verde. CORRECCION: antes la saqué del texto del chat
(16px de burbuja), y ese texto era el que estaba grande de más — copiar un
tamaño equivocado no lo arregla, lo duplica. Ahora la lista se mide contra sí
misma: 19 / 14.5, que es la escala del resto de las secciones. */
.dual .paso{grid-template-columns:104px 1fr;gap:6px 20px}
.dual .paso__art{height:88px}
.dual .paso h3{font-size:19px;margin:0 0 5px}
.dual .paso p{font-size:14.5px;line-height:1.5}
.dual .paso__n{font-size:11.5px;margin-bottom:5px}
.dual__verde .proceso__grid::before{left:52px} /* centro de la nueva columna */
/* ------------------------------------- El asesor con cara de WhatsApp ------
Roberto: «dale la interfaz de un chat de WhatsApp, así el cliente de lejos
entiende que eso es un chat de soporte». Se cambia SOLO la piel: ni el
marcado de index.html ni la lógica de app.js se tocan, así que el árbol de
preguntas, el «escribiendo…» y la ficha de color siguen igual.
Contraste medido: blanco sobre #075E54 = 7.7:1. OJO, el verde claro de la
marca (#25D366) da 1.98 sobre blanco y el #128C7E del flotante 4.14 — o sea
ninguno de los dos sirve para TEXTO; de ahí el verde oscuro en la cabecera.
Los tamaños bajan un punto: burbuja 16 -> 14.5, chip 15 -> 14. */
.chat{border-radius:14px}
.chat__top{background:#075E54;border-bottom:none;padding:12px 16px;gap:11px}
.chat__avatar{width:38px;height:38px;background:#F0F2F5;box-shadow:none}
.chat__nom{color:#fff;font-size:15.5px}
.chat__est{color:rgba(255,255,255,.85);font-size:11.5px}
.chat__est i{background:#4AE168}
.chat__paso{color:#fff;border-color:rgba(255,255,255,.4);font-size:10.5px}
/* El fondo beige del hilo es la mitad de la señal «esto es WhatsApp» */
.chat__hilo{background:#ECE5DD;padding:16px 14px;gap:7px}
/* WhatsApp apoya la conversación ABAJO, no arriba: con pocos mensajes quedaba un
vacío beige de 200px. `margin-top:auto` en el primer globo los baja sin usar
`justify-content:flex-end`, que en contenedores con scroll deja el inicio del
hilo inalcanzable. */
.chat__hilo > :first-child{margin-top:auto}
.bb{
position:relative;max-width:82%;font-size:14.5px;line-height:1.42;
padding:7px 11px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);
}
.bb--bot{background:#fff;color:#111B21;border-radius:0 8px 8px 8px}
.bb--yo{background:#D9FDD3;color:#111B21;font-weight:500;border-radius:8px 0 8px 8px}
/* La colita del globo. Va dentro del padding del hilo (14px > 8px), así que el
`overflow` de la tarjeta no la recorta. */
.bb--bot::before,.bb--yo::before{content:"";position:absolute;top:0;width:8px;height:12px}
.bb--bot::before{left:-8px;background:#fff;clip-path:polygon(100% 0,0 0,100% 100%)}
.bb--yo::before{right:-8px;background:#D9FDD3;clip-path:polygon(0 0,100% 0,0 100%)}
/* El doble cotejo azul. Sin hora: inventar un «11:42» sería dato falso. */
.bb--yo::after{
content:"\2713\2713";display:block;text-align:right;color:#53BDEB;
font-size:11px;line-height:1;letter-spacing:-2px;margin:3px -1px -1px 0;
}
.bb--escribe{padding:11px}
.chat__acciones{background:#F0F2F5;border-top:1px solid #E0DCD5;padding:12px 14px 14px;gap:7px}
.chip-op{font-size:14px;padding:8px 13px;border-width:1px;border-color:#D6D0C8;color:#111B21}
.chip-op small{font-size:10.5px}
.chip-op:hover{border-color:#075E54;color:#075E54}
.chip-op:hover small{color:#075E54}
/* "Tengo una foto" se queda ROJO (pedido explícito) — es la acción de venta,
no un botón de WhatsApp genérico; el resto de la piel WhatsApp no cambia.
Sin reglas propias: hereda `.chip-op--wa` de arriba (rojo + puntico verde). */
/* En móvil el alto fijo de 452px es una trampa: la barra de opciones se parte en
cuatro filas y al hilo le quedan ~150px, así que la respuesta del asesor caía
fuera de la vista tras contestar. Ahí abajo no hay nada que alinear, así que la
tarjeta crece con la conversación. */
@media (max-width:900px){
.chat{height:auto}
.chat__hilo{min-height:210px}
}
@media (max-width:900px){
.dual__lado{display:block}
.dual__verde .proceso__grid{display:grid;grid-template-rows:none}
.dual .paso{padding:16px 0;grid-template-columns:84px 1fr;gap:4px 16px}
.dual .paso__art{height:70px}
.dual .paso h3{font-size:18px}
.dual .paso p{font-size:14px}
.dual__verde .proceso__grid::before{left:42px;top:16px;bottom:16px}
}
/* ============================================================================
OBJETIVOS TACTILES (WCAG 2.5.5) — medido en emulacion movil real a 375px.
Solo en dispositivos de puntero grueso: en escritorio con raton un enlace
de 20px esta bien y agrandarlo desmaquetaria el pie de pagina.
============================================================================ */
@media (pointer: coarse) {
/* Los enlaces del pie median 20px de alto y quedaban pegados uno a otro:
con el pulgar se acierta el de al lado. Las clases reales del tema son
.foot__col y .promo — comprobadas en el DOM, no supuestas. */
.foot__col a,
.foot a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* La barra superior (.promo) y el CTA del header median 36 y 38px. */
.promo a,
.header__cta .pill--red,
.header__cta #openList {
min-height: 44px;
}
/* Migas de pan de WooCommerce: 14px de alto, imposibles de acertar. */
.woo .woocommerce-breadcrumb a {
min-height: 40px;
display: inline-flex;
align-items: center;
}
/* El enlace suelto dentro de los plegables de la ficha. */
.ficha__plegable a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* El menu hamburguesa medía 42px: cerca, pero por debajo del minimo. */
.burger { min-width: 48px; min-height: 48px; }
/* El nav desplegado en movil necesita filas comodas, no lineas de texto. */
.nav a { min-height: 48px; display: flex; align-items: center; }
}
/* ============================================================================
CARRILES DESLIZABLES EN MOVIL
El home medido en 375px daba 16.044px de alto: casi 20 pantallas de scroll.
La causa no es el contenido sino la forma — cuatro rejillas que en movil se
apilan en una sola columna y suman ~4.600px entre las cuatro.
Aqui pasan a UNA fila que se navega con el dedo. El contenido no se recorta:
cambia el eje.
Medido por rejilla (alto actual -> alto de una tarjeta):
.cats__grid 5 tarjetas 1306px -> ~250px
.blog__grid 3 tarjetas 1193px -> ~388px
.proyectos__grid 4 obras 1088px -> ~260px
.carta .swatches 10 colores 1033px -> ~208px
============================================================================ */
@media (max-width: 760px) {
.cats__grid,
.blog__grid,
.proyectos__grid,
.carta .swatches {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 14px;
/* El dedo suelta y la tarjeta queda encuadrada. */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain; /* no arrastra la pagina al llegar al final */
/* Sangrado hasta el borde de la pantalla: se lee como carril que sigue,
no como caja cortada. El padding devuelve el margen visual. */
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-bottom: 6px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
}
.cats__grid::-webkit-scrollbar,
.blog__grid::-webkit-scrollbar,
.proyectos__grid::-webkit-scrollbar,
.carta .swatches::-webkit-scrollbar { display: none; }
/* 84% y no 100%: que asome el borde de la siguiente es lo que le dice al
usuario que puede deslizar. Sin esa pista, el carril parece una tarjeta
suelta y nadie lo intenta. */
.cats__grid > *,
.blog__grid > *,
.proyectos__grid > * {
flex: 0 0 84%;
scroll-snap-align: start;
}
/* Los swatches son chicos: caben tres y medio, y asi se ve que hay mas. */
.carta .swatches > * {
flex: 0 0 42%;
scroll-snap-align: start;
}
/* La obra destacada del final ocupaba fila completa; dentro del carril es
una tarjeta mas, del mismo ancho que las demas. */
.proyectos__grid > *:last-child { grid-column: auto; }
}
/* Quien tenga activada la reduccion de movimiento igual puede deslizar: solo
se le quita el desplazamiento suave. */
@media (prefers-reduced-motion: reduce) {
.cats__grid, .blog__grid, .proyectos__grid, .carta .swatches { scroll-behavior: auto; }
}