/* =========================================================================
SIETE COLORES · Sistema visual
Submarca de 7Kolors aplicada a alimentación institucional.
Paleta Pantone oficial del manual de marca 7Kolors v1.0.
========================================================================= */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,700,500,400&f[]=satoshi@400,500,700&display=swap');
:root{
/* Espectro oficial (Pantone → HEX) */
--amarillo: #FFD100; /* PMS 109 C · acento principal · Escolar */
--verde: #7C9302; /* PMS 377 C · frescura, alimento · Prebásica */
--azul: #00A3E0; /* PMS 299 C · tecnología, gestión· Empresas */
--rojo: #D22630; /* PMS 1795 C · energía, cuidado · Hospitalaria */
--grafito: #101820; /* Black 6 C · texto y wordmark */
--blanco: #FFFFFF;
--bronce: #8C6239; /* PMS 464 C · calidez, tierra */
/* Variantes tipográficas de cada línea.
Los tonos Pantone son para superficies; sobre fondo claro no alcanzan
contraste AA en texto pequeño, así que el texto usa estas versiones. */
--escolar-txt: #7A6500; /* 5,69:1 sobre blanco */
--prebasica-txt: #5C6E01; /* 5,70:1 */
--empresas-txt: #0072A0; /* 5,36:1 */
--hospitalaria-txt: #A81C24; /* 7,35:1 */
/* Neutros derivados */
--crema: #FBF7EF;
--crema-2: #F4EDE0;
--linea: #E6DECD;
--texto: #101820;
--texto-2: #55605F;
--texto-3: #8A918F;
--radio: 18px;
--radio-s: 12px;
--sombra: 0 1px 2px rgba(16,24,32,.04), 0 12px 32px -12px rgba(16,24,32,.14);
--sombra-alta: 0 2px 4px rgba(16,24,32,.05), 0 32px 64px -24px rgba(16,24,32,.22);
--max: 1200px;
/* Curvas de movimiento · una sola familia para toda la página */
--curva: cubic-bezier(.16,1,.3,1); /* salidas suaves, sensación de peso */
--curva-suave:cubic-bezier(.4,0,.2,1);
--transicion: .38s var(--curva);
--transicion-larga: .9s var(--curva);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:'Satoshi','Cabinet Grotesk',system-ui,-apple-system,sans-serif;
color:var(--texto);
background:var(--crema);
font-size:17px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3,h4,.wm{font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.06;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.contenedor{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
/* ---------- Elemento de marca: barra espectro ---------- */
.espectro{
height:5px;width:100%;border:0;margin:0;
background:linear-gradient(90deg,
var(--rojo) 0%, var(--rojo) 14.28%,
#F07300 14.28%, #F07300 28.56%,
var(--amarillo) 28.56%, var(--amarillo) 42.84%,
var(--verde) 42.84%, var(--verde) 57.12%,
#0E7C7B 57.12%, #0E7C7B 71.4%,
var(--azul) 71.4%, var(--azul) 85.68%,
var(--grafito) 85.68%, var(--grafito) 100%);
}
.espectro--fina{height:3px}
/* ---------- Logotipo ---------- */
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:46px;height:auto;flex:none}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-txt .wm{
font-size:20px;font-weight:800;letter-spacing:-.02em;
color:var(--grafito);text-transform:none;
}
.logo-txt .wm b{font-weight:800;color:var(--verde)}
.logo-txt small{
font-family:'Satoshi',sans-serif;font-size:9.5px;font-weight:700;
letter-spacing:.19em;text-transform:uppercase;color:var(--texto-3);margin-top:5px;
}
/* ---------- Barra superior ---------- */
.aviso{
background:var(--grafito);color:#D7DDDC;
font-size:12.5px;letter-spacing:.02em;text-align:center;
padding:9px 20px;
}
.aviso b{color:var(--amarillo);font-weight:700}
header{position:sticky;top:0;z-index:60;background:rgba(251,247,239,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.nav-links{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500}
.nav-links a{color:var(--texto-2);transition:color .2s;position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--verde);transition:width var(--transicion)}
.nav-links a:hover{color:var(--grafito)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:12px}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:14px 26px;border-radius:100px;border:1.5px solid transparent;
font-family:'Satoshi',sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em;
cursor:pointer;transition:all var(--transicion);white-space:nowrap;
}
.btn--primario{background:var(--grafito);color:#fff}
.btn--primario:hover{background:#000;transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(16,24,32,.55)}
.btn--sol{background:var(--amarillo);color:var(--grafito)}
.btn--sol:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(255,209,0,.7)}
.btn--linea{border-color:var(--linea);color:var(--texto);background:transparent}
.btn--linea:hover{border-color:var(--grafito);background:var(--grafito);color:#fff}
.btn--claro{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.btn--claro:hover{background:#fff;color:var(--grafito)}
.btn--sm{padding:11px 20px;font-size:14px}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{display:block;width:22px;height:2px;background:var(--grafito);margin:5px 0;border-radius:2px;transition:var(--transicion)}
/* ---------- Kicker ---------- */
.kicker{
display:inline-flex;align-items:center;gap:10px;
font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
color:var(--texto-3);margin-bottom:22px;
}
.kicker::before{content:'';width:26px;height:2px;background:var(--verde);border-radius:2px}
.kicker--claro{color:rgba(255,255,255,.72)}
.kicker--claro::before{background:var(--amarillo)}
/* ---------- Hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--grafito)}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(16,24,32,.62) 0%,rgba(16,24,32,.30) 34%,rgba(16,24,32,.86) 100%);
}
.hero-inner{position:relative;z-index:2;padding:120px 0 56px;width:100%}
.hero h1{font-size:clamp(3rem,7.4vw,6.4rem);color:#fff;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--amarillo)}
.hero-sub{color:rgba(255,255,255,.86);font-size:clamp(1.02rem,1.6vw,1.24rem);max-width:56ch;margin-top:26px;line-height:1.6}
.hero-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-pie{
display:flex;flex-wrap:wrap;gap:30px 46px;align-items:center;
margin-top:52px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16);
}
.hero-dato{color:#fff}
.hero-dato b{display:block;font-family:'Cabinet Grotesk',sans-serif;font-size:2.1rem;line-height:1;font-weight:800}
.hero-dato span{font-size:12.5px;color:rgba(255,255,255,.62);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
/* ---------- Secciones ---------- */
section{position:relative}
.seccion{padding:110px 0}
.seccion--crema{background:var(--crema-2)}
.seccion--oscura{background:var(--grafito);color:#fff}
.seccion--oscura h2,.seccion--oscura h3{color:#fff}
.seccion--blanca{background:#fff}
.cabecera{max-width:62ch;margin-bottom:64px}
.cabecera h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
.cabecera p{color:var(--texto-2);font-size:1.08rem;margin-top:20px;line-height:1.7}
.seccion--oscura .cabecera p{color:rgba(255,255,255,.68)}
/* ---------- Marquesina de confianza ---------- */
.confianza{background:#fff;border-bottom:1px solid var(--linea);padding:34px 0}
.confianza-fila{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:22px 52px}
.confianza-fila small{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--texto-3);font-weight:700}
.confianza-fila img{height:38px;width:auto;opacity:.55;filter:grayscale(1);transition:var(--transicion)}
.confianza-fila img:hover{opacity:1;filter:none}
/* ---------- Sistema de 4 líneas (color por línea) ---------- */
.lineas{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.linea{
position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
padding:34px 28px 30px;overflow:hidden;transition:var(--transicion);
display:flex;flex-direction:column;
}
.linea::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--c)}
.linea::after{
content:'';position:absolute;inset:0;background:var(--c);opacity:0;transition:var(--transicion);
mix-blend-mode:multiply;pointer-events:none;
}
.linea:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta);border-color:transparent}
.linea:hover::after{opacity:.05}
.linea-ico{width:46px;height:46px;margin-bottom:22px;color:var(--c)}
.linea-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.linea h3{font-size:1.42rem;margin-bottom:6px}
.linea .tipo{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-txt,var(--c));margin-bottom:16px}
.linea p{color:var(--texto-2);font-size:.95rem;line-height:1.62}
.linea ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:9px}
.linea li{font-size:.88rem;color:var(--texto-2);padding-left:22px;position:relative;line-height:1.45}
.linea li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--c);opacity:.85}
.linea .vinculo{margin-top:auto;font-size:.9rem;font-weight:700;color:var(--grafito);display:inline-flex;align-items:center;gap:7px;transition:gap var(--transicion)}
.linea:hover .vinculo{gap:13px}
.etiqueta{
position:absolute;top:16px;right:16px;font-size:9px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;background:var(--c);color:#fff;
padding:4px 11px;border-radius:100px;z-index:3;
box-shadow:0 0 0 3px var(--tinte,#fff);
}
.etiqueta--amarilla{color:var(--grafito)}
/* ---------- Cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.13);border-radius:var(--radio);overflow:hidden}
.cifra{background:var(--grafito);padding:40px 30px}
.cifra b{display:block;font-family:'Cabinet Grotesk',sans-serif;font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:800;line-height:1;color:#fff}
.cifra b i{font-style:normal;color:var(--amarillo)}
.cifra span{display:block;margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.45}
/* ---------- Proceso ---------- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--linea)}
.paso{padding:34px 26px 30px;border-right:1px solid var(--linea);position:relative;transition:var(--transicion)}
.paso:last-child{border-right:0}
.paso:hover{background:#fff}
.paso-num{
font-family:'Cabinet Grotesk',sans-serif;font-size:13px;font-weight:800;color:#fff;
background:var(--grafito);width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.paso h4{font-size:1.12rem;margin-bottom:10px}
.paso p{font-size:.9rem;color:var(--texto-2);line-height:1.6}
.paso .cuando{display:inline-block;margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--verde)}
/* ---------- Atributos ---------- */
.atributos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linea);border-left:1px solid var(--linea)}
.atributo{padding:36px 32px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);transition:var(--transicion)}
.atributo:hover{background:var(--crema-2)}
.atributo .ico{width:30px;height:30px;color:var(--grafito);margin-bottom:20px}
.atributo .ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.atributo h4{font-size:1.08rem;margin-bottom:9px}
.atributo p{font-size:.92rem;color:var(--texto-2);line-height:1.6}
/* ---------- Menú semanal ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plato{background:#fff;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);transition:var(--transicion)}
.plato:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.plato-img{aspect-ratio:16/10;overflow:hidden;background:var(--crema-2);position:relative}
.plato-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.plato:hover .plato-img img{transform:scale(1.06)}
.plato-dia{
position:absolute;top:14px;left:14px;background:rgba(251,247,239,.94);backdrop-filter:blur(6px);
font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
padding:7px 13px;border-radius:100px;color:var(--grafito);
}
.plato-cuerpo{padding:24px}
.plato h4{font-size:1.15rem;margin-bottom:9px;line-height:1.25}
.plato p{font-size:.9rem;color:var(--texto-2);line-height:1.58}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:100px;background:var(--crema-2);color:var(--texto-2)}
.chip--verde{background:rgba(124,147,2,.12);color:#5C6E01}
.chip--azul{background:rgba(0,163,224,.12);color:#0072A0}
.chip--rojo{background:rgba(210,38,48,.1);color:#A81C24}
.chip--amarillo{background:rgba(255,209,0,.2);color:#8A7100}
/* ---------- Testimonios ---------- */
.testimonios{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonio{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:34px 30px;display:flex;flex-direction:column}
.estrellas{color:var(--amarillo);font-size:15px;letter-spacing:3px;margin-bottom:20px}
.testimonio blockquote{margin:0;font-size:1.02rem;line-height:1.66;color:var(--texto);flex:1}
.autor{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--linea)}
.avatar{
width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:14px;color:#fff;background:var(--grafito);
}
.autor b{display:block;font-size:.95rem}
.autor span{font-size:.82rem;color:var(--texto-3)}
/* ---------- Bloque dividido ---------- */
.dividido{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.dividido-media{position:relative;border-radius:var(--radio);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sombra-alta)}
.dividido-media--ancha{aspect-ratio:16/12}
.dividido-media picture{display:block;width:100%;height:100%}
.dividido-media img,.dividido-media video{width:100%;height:100%;object-fit:cover}
.lista-check{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:15px}
.lista-check li{position:relative;padding-left:34px;font-size:1rem;line-height:1.55;color:var(--texto-2)}
.lista-check li::before{
content:'';position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:50%;
background:var(--verde);
-webkit-mask:url("data:image/svg+xml;utf8,") center/70% no-repeat,
linear-gradient(#000,#000);
-webkit-mask-composite:xor;mask-composite:exclude;
}
.seccion--oscura .lista-check li{color:rgba(255,255,255,.78)}
.seccion--oscura .lista-check li::before{background:var(--amarillo)}
/* ---------- El símbolo ---------- */
.simbolo{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.simbolo-ave{position:relative;display:flex;align-items:center;justify-content:center;padding:40px}
.simbolo-ave img{width:100%;max-width:340px;position:relative;z-index:2;filter:drop-shadow(0 26px 40px rgba(16,24,32,.24))}
.simbolo-ave::before{
content:'';position:absolute;width:88%;aspect-ratio:1;border-radius:50%;
background:conic-gradient(var(--rojo),#F07300,var(--amarillo),var(--verde),#0E7C7B,var(--azul),var(--rojo));
filter:blur(58px);opacity:.30;
}
.significados{display:grid;gap:0;border-top:1px solid var(--linea)}
.significado{display:flex;gap:26px;padding:26px 0;border-bottom:1px solid var(--linea);align-items:flex-start}
.significado .n{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:.86rem;color:var(--texto-3);padding-top:5px;flex:none;width:26px}
.significado h4{font-size:1.16rem;margin-bottom:7px}
.significado p{font-size:.95rem;color:var(--texto-2);line-height:1.62}
/* ---------- Paleta ---------- */
.paleta{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-radius:var(--radio);overflow:hidden;margin-top:44px}
.tono{aspect-ratio:1/1.25;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;transition:var(--transicion)}
.tono:hover{transform:translateY(-8px)}
.tono b{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.tono span{font-size:10.5px;opacity:.72;margin-top:3px}
/* ---------- CTA final ---------- */
.cta-final{background:var(--grafito);color:#fff;position:relative;overflow:hidden}
.cta-final::before{
content:'';position:absolute;top:-40%;right:-10%;width:620px;height:620px;border-radius:50%;
background:conic-gradient(var(--rojo),#F07300,var(--amarillo),var(--verde),#0E7C7B,var(--azul),var(--rojo));
filter:blur(120px);opacity:.22;
}
.cta-cuerpo{position:relative;z-index:2;text-align:center;max-width:720px;margin:0 auto;padding:120px 0}
.cta-cuerpo h2{font-size:clamp(2.3rem,5vw,4rem);margin-bottom:22px}
.cta-cuerpo p{color:rgba(255,255,255,.72);font-size:1.1rem;line-height:1.7}
.cta-acciones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}
.cta-nota{margin-top:30px;font-size:13.5px;color:rgba(255,255,255,.5)}
/* ---------- Contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.datos{display:grid;gap:0;border-top:1px solid var(--linea);margin-top:36px}
.dato{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--linea);align-items:center}
.dato .ico{width:22px;height:22px;color:var(--verde);flex:none}
.dato .ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dato b{display:block;font-size:.98rem}
.dato span{font-size:.86rem;color:var(--texto-3)}
/* ---------- Pie ---------- */
footer{background:var(--grafito);color:rgba(255,255,255,.62);padding:76px 0 0;font-size:.92rem}
.pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:52px;padding-bottom:56px}
.pie-marca .logo-txt .wm{color:#fff}
.pie-marca .logo-txt small{color:rgba(255,255,255,.42)}
.pie-marca p{margin-top:22px;line-height:1.7;max-width:38ch;font-size:.9rem}
.pie h5{font-family:'Cabinet Grotesk',sans-serif;font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin:0 0 20px}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.pie a:hover{color:var(--amarillo)}
.pie-base{border-top:1px solid rgba(255,255,255,.1);padding:26px 0;display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.4)}
.transicion{
display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.13);border-radius:100px;padding:7px 16px;
font-size:.8rem;color:rgba(255,255,255,.72);
}
.transicion i{width:7px;height:7px;border-radius:50%;background:var(--amarillo);flex:none}
/* ---------- WhatsApp flotante ---------- */
.wa{
position:fixed;right:22px;bottom:22px;z-index:80;width:58px;height:58px;border-radius:50%;
background:#25D366;display:flex;align-items:center;justify-content:center;
box-shadow:0 12px 30px -8px rgba(37,211,102,.65);transition:var(--transicion);
}
.wa:hover{transform:scale(1.08) translateY(-3px)}
.wa svg{width:30px;height:30px;fill:#fff}
/* ---------- Animación de entrada ---------- */
.rev{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rev.on{opacity:1;transform:none}
/* ---------- Página interior ---------- */
.cabecera-pagina{background:var(--grafito);color:#fff;padding:130px 0 90px;position:relative;overflow:hidden}
.cabecera-pagina::before{
content:'';position:absolute;bottom:-60%;left:-8%;width:520px;height:520px;border-radius:50%;
background:conic-gradient(var(--amarillo),var(--verde),var(--azul),var(--rojo),var(--amarillo));
filter:blur(120px);opacity:.2;
}
.cabecera-pagina h1{font-size:clamp(2.5rem,6vw,4.6rem);position:relative;z-index:2;max-width:18ch}
.cabecera-pagina p{color:rgba(255,255,255,.7);font-size:1.1rem;max-width:60ch;margin-top:24px;position:relative;z-index:2;line-height:1.7}
.miga{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:26px;position:relative;z-index:2;font-weight:600}
.miga a:hover{color:var(--amarillo)}
/* ---------- Responsive ---------- */
@media (max-width:1080px){
.lineas{grid-template-columns:repeat(2,1fr)}
.pasos{grid-template-columns:repeat(2,1fr)}
.paso:nth-child(2){border-right:0}
.paso:nth-child(-n+2){border-bottom:1px solid var(--linea)}
.atributos{grid-template-columns:repeat(2,1fr)}
.menu-grid,.testimonios{grid-template-columns:repeat(2,1fr)}
.pie-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:860px){
.nav-links{display:none}
.menu-btn{display:block}
.nav-cta .btn{display:none}
.dividido,.simbolo,.contacto-grid{grid-template-columns:1fr;gap:44px}
.cifras{grid-template-columns:repeat(2,1fr)}
.paleta{grid-template-columns:repeat(4,1fr)}
.seccion{padding:76px 0}
.hero{min-height:82vh}
.hero-pie{gap:22px 32px}
}
@media (max-width:620px){
body{font-size:16px}
.lineas,.menu-grid,.testimonios,.atributos,.pasos{grid-template-columns:1fr}
.paso,.atributo{border-right:0}
.pie-grid{grid-template-columns:1fr;gap:34px}
.paleta{grid-template-columns:repeat(2,1fr)}
.contenedor{padding:0 20px}
}
/* =========================================================================
MOVIMIENTO Y ACABADO
Capa de refinamiento: transiciones entre páginas, revelado de titulares,
textura, y microinteracciones. Todo respeta prefers-reduced-motion.
========================================================================= */
/* ---------- Transición entre páginas (View Transitions API) ---------- */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:vt-salida .34s var(--curva-suave) both }
::view-transition-new(root){ animation:vt-entrada .5s var(--curva) both }
@keyframes vt-salida { to { opacity:0; transform:translateY(-8px) } }
@keyframes vt-entrada{ from{ opacity:0; transform:translateY(14px) } }
/* La cabecera y el logotipo persisten entre páginas */
header{ view-transition-name:cabecera }
.wa{ view-transition-name:wa }
/* ---------- Barra de progreso de lectura ---------- */
.progreso{
position:fixed; top:0; left:0; right:0; height:3px; z-index:100;
transform-origin:0 50%; transform:scaleX(0);
background:linear-gradient(90deg,
var(--rojo) 0%, #F07300 16%, var(--amarillo) 33%, var(--verde) 50%,
#0E7C7B 66%, var(--azul) 83%, var(--grafito) 100%);
transition:transform .1s linear;
}
/* ---------- Cabecera que se compacta al bajar ---------- */
header{ transition:box-shadow .5s var(--curva), background .5s var(--curva) }
header .nav{ transition:height .5s var(--curva) }
header .logo img{ transition:width .5s var(--curva) }
header.compacta{ box-shadow:0 1px 0 var(--linea), 0 10px 34px -22px rgba(16,24,32,.5) }
header.compacta .nav{ height:64px }
header.compacta .logo img{ width:38px }
header.compacta .logo-txt small{ opacity:0; transition:opacity .35s var(--curva) }
/* ---------- Revelado de titulares, línea por línea ---------- */
.linea-mask{ display:block; overflow:hidden }
.linea-mask > span{
display:block;
transform:translateY(105%) rotate(1.4deg);
transition:transform 1.05s var(--curva);
transition-delay:var(--d,0ms);
}
.linea-mask.on > span,
.on .linea-mask > span{ transform:none }
/* ---------- Revelado general, más lento y con desenfoque ---------- */
.rev{
opacity:0; transform:translateY(30px);
filter:blur(6px);
transition:opacity 1s var(--curva), transform 1s var(--curva), filter 1s var(--curva);
}
.rev.on{ opacity:1; transform:none; filter:none }
/* ---------- Fotografías: revelan con máscara y un leve zoom ---------- */
.dividido-media,.plato-img{ position:relative }
.dividido-media picture{display:block;width:100%;height:100%}
.dividido-media img,.dividido-media video{
transform:scale(1.14); transition:transform 1.6s var(--curva);
}
.rev.on .dividido-media img,
.dividido-media.on img,
.rev.on.dividido-media img{ transform:scale(1) }
.dividido-media::before{
content:''; position:absolute; inset:0; z-index:2; background:var(--crema);
transform-origin:100% 50%; transform:scaleX(1);
transition:transform 1.15s var(--curva) .1s;
}
.rev.on .dividido-media::before,
.dividido-media.on::before{ transform:scaleX(0) }
.seccion--oscura .dividido-media::before{ background:var(--grafito) }
/* ---------- Textura de grano: le da cuerpo a los fondos oscuros ---------- */
.seccion--oscura::after,.cta-final::after,.cabecera-pagina::after,footer::after,.hero::after{
content:''; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.038;
background-image:url("data:image/svg+xml;utf8,");
}
.hero .contenedor,.cta-cuerpo,.cabecera-pagina .contenedor{ position:relative; z-index:3 }
/* ---------- Hero: parallax y foco lento ---------- */
.hero-media{ will-change:transform }
.hero-media img,.hero-media video{ transform:scale(1.06); animation:foco 26s ease-in-out infinite alternate }
@keyframes foco{ to{ transform:scale(1.14) translate3d(-1.2%,-.8%,0) } }
/* ---------- Botones: brillo que cruza y desplazamiento con peso ---------- */
.btn{ position:relative; overflow:hidden; isolation:isolate }
.btn::after{
content:''; position:absolute; inset:0; z-index:-1; transform:translateX(-101%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
transition:transform .85s var(--curva);
}
.btn:hover::after{ transform:translateX(101%) }
.btn:active{ transform:translateY(0) scale(.985) }
/* ---------- Tarjetas: la luz sigue al cursor ---------- */
.linea,.plato,.testimonio,.certif{ position:relative }
.linea::marker{ content:'' }
.brillo{
position:absolute; inset:0; pointer-events:none; opacity:0; z-index:1; border-radius:inherit;
transition:opacity .45s var(--curva);
background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
rgba(255,255,255,.85), transparent 62%);
}
.linea:hover .brillo,.plato:hover .brillo,.testimonio:hover .brillo{ opacity:.6 }
.linea > *:not(.brillo):not(.etiqueta),
.plato > *:not(.brillo),
.testimonio > *:not(.brillo){ position:relative; z-index:2 }
.linea > .etiqueta{ position:absolute }
/* ---------- Enlaces de navegación: subrayado que crece desde el centro ---------- */
.nav-links a::after{ left:50%; transform:translateX(-50%) }
/* ---------- Cifras: la línea divisoria se dibuja ---------- */
.cifra{ position:relative; overflow:hidden }
.cifra::before{
content:''; position:absolute; left:0; top:0; width:100%; height:2px;
background:var(--amarillo); transform:scaleX(0); transform-origin:0 50%;
transition:transform 1.1s var(--curva) var(--d,0ms);
}
.on .cifra::before{ transform:scaleX(1) }
/* ---------- Menú móvil a pantalla completa ---------- */
.menu-movil{
position:fixed; inset:0; z-index:90; background:var(--grafito); color:#fff;
display:flex; flex-direction:column; justify-content:center; padding:0 30px;
opacity:0; visibility:hidden; transition:opacity .5s var(--curva), visibility .5s;
}
.menu-movil.abierto{ opacity:1; visibility:visible }
.menu-movil nav{ display:grid; gap:6px }
.menu-movil a{
font-family:'Cabinet Grotesk',sans-serif; font-size:clamp(2rem,9vw,3rem); font-weight:800;
letter-spacing:-.03em; color:#fff; padding:9px 0; overflow:hidden; display:block;
}
.menu-movil a span{
display:block; transform:translateY(105%);
transition:transform .8s var(--curva); transition-delay:var(--d,0ms);
}
.menu-movil.abierto a span{ transform:none }
.menu-movil .pie-menu{
position:absolute; left:30px; right:30px; bottom:34px; display:flex; flex-wrap:wrap;
gap:10px 26px; font-size:14px; color:rgba(255,255,255,.55);
border-top:1px solid rgba(255,255,255,.14); padding-top:22px;
}
.menu-btn{ position:relative; z-index:95 }
.menu-btn span{ transition:transform .45s var(--curva), opacity .3s }
.menu-btn.activo span:nth-child(1){ transform:translateY(7px) rotate(45deg); background:#fff }
.menu-btn.activo span:nth-child(2){ opacity:0 }
.menu-btn.activo span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:#fff }
body.sin-scroll{ overflow:hidden }
/* ---------- Marca de agua del ave, muy tenue, en secciones oscuras ---------- */
.cta-final .contenedor::before{
content:''; position:absolute; right:-40px; bottom:-60px; width:280px; height:280px;
background:url('brand/ave_blanco_1200.png') center/contain no-repeat;
opacity:.05; pointer-events:none;
}
/* ---------- Accesibilidad: quien pide menos movimiento, lo recibe ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
.rev,.linea-mask > span{ opacity:1 !important; transform:none !important; filter:none !important }
.dividido-media::before{ transform:scaleX(0) !important }
.dividido-media img{ transform:none !important }
@view-transition{ navigation:none }
}
/* =========================================================================
CAPA DE COLOR
El espectro deja de ser un detalle y pasa a estructurar la página:
un color dominante por sección y por elemento, en bloques grandes.
Los tonos Pantone pintan superficies; el texto usa las variantes
tipográficas ya validadas en contraste.
========================================================================= */
:root{
--naranja: #F07300;
--teal: #0E7C7B;
/* Tintes: el mismo tono llevado a superficie clara */
--t-escolar: #FFF6D2;
--t-prebasica:#EFF3DA;
--t-empresas: #DFF4FD;
--t-hospitalaria: #FCE8E9;
--t-naranja: #FEEDDE;
--t-teal: #DFF0EF;
}
/* ---------- Hero: el negro plano se tiñe con el espectro ---------- */
.hero-media::after{
background:
linear-gradient(180deg,rgba(16,24,32,.58) 0%,rgba(16,24,32,.22) 32%,rgba(16,24,32,.88) 100%),
linear-gradient(115deg,rgba(210,38,48,.30) 0%,rgba(240,115,0,.20) 26%,
rgba(255,209,0,.14) 48%,rgba(124,147,2,.20) 68%,rgba(0,163,224,.28) 100%);
}
.hero-pie{ border-top:none; position:relative }
.hero-pie::before{
content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:2px;
background:linear-gradient(90deg,var(--rojo) 0 14.28%,var(--naranja) 14.28% 28.56%,
var(--amarillo) 28.56% 42.84%,var(--verde) 42.84% 57.12%,var(--teal) 57.12% 71.4%,
var(--azul) 71.4% 85.68%,rgba(255,255,255,.35) 85.68% 100%);
}
.hero-dato:nth-child(1) b{ color:var(--amarillo) }
.hero-dato:nth-child(2) b{ color:#7ED0F5 }
.hero-dato:nth-child(3) b{ color:#C3D64A }
.hero-dato:nth-child(4) b{ color:#FF8A93 }
/* Chips de línea sobre el hero */
.hero-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px }
.hero-chip{
display:inline-flex; align-items:center; gap:8px; padding:7px 15px 7px 11px;
border-radius:100px; background:rgba(255,255,255,.11); backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.2); color:#fff;
font-size:12.5px; font-weight:700; letter-spacing:.02em;
transition:var(--transicion);
}
.hero-chip i{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:none }
.hero-chip:hover{ background:var(--c); border-color:var(--c); color:var(--grafito); transform:translateY(-2px) }
/* ---------- Tarjetas de línea: nacen tintadas y se llenan al pasar ---------- */
.linea{ background:var(--tinte); border-color:transparent }
.linea::before{ height:6px }
.linea::after{ display:none }
.linea .linea-ico{ color:var(--c-txt,var(--c)) }
.linea:hover{ background:var(--c); transform:translateY(-8px) }
.linea:hover .tipo,
.linea:hover .linea-ico{ color:var(--sobre,#101820) }
.linea:hover h3,
.linea:hover p,
.linea:hover li,
.linea:hover .vinculo{ color:var(--sobre,#101820) }
.linea:hover li::before{ background:var(--sobre,#101820) }
.linea h3,.linea p,.linea li,.linea .vinculo,.linea .tipo,.linea .linea-ico{ transition:color var(--transicion) }
/* ---------- Cifras: cada indicador toma su color ---------- */
.cifras{ background:transparent; gap:14px; border-radius:0 }
.cifra{ background:var(--c); border-radius:var(--radio); padding:34px 28px; color:var(--sobre,#fff) }
.cifra b{ color:inherit }
.cifra b i{ color:inherit; opacity:.62 }
.cifra span{ color:inherit; opacity:.72 }
.cifra::before{ display:none }
/* ---------- Proceso: los cuatro pasos, los cuatro colores ---------- */
.pasos{ border-top:none; gap:14px; display:grid }
.paso{
border-right:none; border-radius:var(--radio); background:#fff;
border-top:6px solid var(--c); padding:30px 26px 28px;
}
.paso:hover{ background:var(--tinte) }
.paso-num{ background:var(--c); color:var(--sobre,#fff); width:34px; height:34px; font-size:14px }
.paso .cuando{ color:var(--c-txt,var(--c)) }
/* ---------- Atributos: iconos en pastilla de color ---------- */
.atributos{ border:none; gap:14px; display:grid }
.atributo{
border:none; border-radius:var(--radio); background:#fff; padding:32px 28px;
border-bottom:none;
}
.atributo:hover{ background:var(--tinte); transform:translateY(-4px) }
.atributo{ transition:background var(--transicion), transform var(--transicion) }
.atributo .ico{
width:46px; height:46px; border-radius:14px; background:var(--tinte);
color:var(--c-txt,var(--c)); display:flex; align-items:center; justify-content:center;
margin-bottom:22px;
}
.atributo .ico svg{ width:24px; height:24px }
.atributo:hover .ico{ background:var(--c); color:var(--sobre,#fff) }
/* ---------- Menú semanal: un color por día ---------- */
.plato{ border-color:transparent; border-top:6px solid var(--c) }
.plato-dia{ background:var(--c); color:var(--sobre,#fff) }
.plato-cuerpo{ background:#fff }
.plato:hover{ background:var(--tinte) }
.plato:hover .plato-cuerpo{ background:var(--tinte) }
.plato .plato-cuerpo{ transition:background var(--transicion) }
/* ---------- Testimonios en color pleno ---------- */
.testimonio{ background:var(--c); border-color:transparent; color:var(--sobre,#fff) }
.testimonio blockquote{ color:inherit }
.testimonio .estrellas{ color:var(--sobre,#fff); opacity:.85 }
.testimonio .autor{ border-top-color:rgba(255,255,255,.28) }
.testimonio .autor b{ color:inherit }
.testimonio .autor span{ color:inherit; opacity:.72 }
.testimonio .avatar{ background:rgba(255,255,255,.22); color:var(--sobre,#fff) }
.testimonio[style*="FFD100"] .autor{ border-top-color:rgba(16,24,32,.18) }
/* ---------- Cierre en amarillo, no en negro ---------- */
.cta-final{ background:var(--amarillo); color:var(--grafito) }
.cta-final::before{ opacity:.5; mix-blend-mode:multiply }
.cta-final h2{ color:var(--grafito) }
.cta-final p{ color:rgba(16,24,32,.72) }
.cta-nota{ color:rgba(16,24,32,.55) }
.cta-final .btn--sol{ background:var(--grafito); color:#fff }
.cta-final .btn--claro{ background:rgba(16,24,32,.08); color:var(--grafito); border-color:rgba(16,24,32,.28) }
.cta-final .btn--claro:hover{ background:var(--grafito); color:#fff }
.cta-final .contenedor::before{
background-image:url('brand/ave_grafito_1200.png'); opacity:.09;
width:340px; height:340px;
}
.cta-final::after{ opacity:.06 }
/* ---------- Cabecera de página interior, teñida ---------- */
.cabecera-pagina::before{ opacity:.42; filter:blur(90px) }
.cabecera-pagina{
background:
linear-gradient(135deg,rgba(210,38,48,.16),transparent 42%),
linear-gradient(315deg,rgba(0,163,224,.18),transparent 46%),
var(--grafito);
}
/* ---------- Separadores de espectro entre secciones ---------- */
.seccion--crema{ position:relative }
.seccion--crema::before{
content:''; position:absolute; top:0; left:0; right:0; height:4px;
background:linear-gradient(90deg,var(--rojo) 0 14.28%,var(--naranja) 14.28% 28.56%,
var(--amarillo) 28.56% 42.84%,var(--verde) 42.84% 57.12%,var(--teal) 57.12% 71.4%,
var(--azul) 71.4% 85.68%,var(--grafito) 85.68% 100%);
}
/* ---------- Marquesina de confianza con acento ---------- */
.confianza{ background:var(--crema); border-bottom:none }
.confianza-fila small{ color:var(--texto-2) }
/* ---------- Símbolo: el halo se ve de verdad ---------- */
.simbolo-ave::before{ opacity:.5; filter:blur(52px) }
.seccion--blanca{ background:#fff }
/* ---------- Kicker con punto de color según sección ---------- */
.kicker::before{ background:var(--acento,var(--verde)) }
/* =========================================================================
HERO CLARO
Composición editorial: mensaje sobre fondo claro y la fotografía
enmarcada al costado. Sin video, sin velo oscuro sobre la imagen.
========================================================================= */
.hero{
min-height:0; display:block; background:var(--crema);
padding:76px 0 0; overflow:visible;
}
.hero::after{ display:none } /* el grano era para el fondo oscuro */
.hero-inner{ padding:0 24px 84px }
.hero-reja{ display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center }
.hero-reja > *{ min-width:0 }
.hero h1{ color:var(--grafito); font-size:clamp(2.7rem,5.6vw,4.9rem); max-width:14ch }
.hero h1 em{ color:var(--verde) }
.hero-sub{ color:var(--texto-2); max-width:46ch }
.hero-chip{
background:#fff; border-color:var(--linea); color:var(--texto-2); backdrop-filter:none;
}
.hero-chip:hover{ color:var(--grafito) }
/* Fotografía enmarcada, con el espectro detrás */
.hero-foto{ position:relative; isolation:isolate }
.hero-foto::before{
content:''; position:absolute; inset:2% 0 -3% 0; z-index:-1; border-radius:34px;
background:conic-gradient(from 210deg,var(--rojo),var(--naranja),var(--amarillo),
var(--verde),var(--teal),var(--azul),var(--rojo));
filter:blur(38px); opacity:.28;
}
.hero-foto figure{
margin:0; border-radius:26px; overflow:hidden; background:#fff;
box-shadow:0 3px 6px rgba(16,24,32,.05), 0 42px 76px -34px rgba(16,24,32,.42);
aspect-ratio:4/3.1;
}
.hero-foto picture{ display:block; width:100%; height:100% }
/* El encuadre se corre a la derecha: ahí están la chef y el plato */
.hero-foto img{ width:100%; height:100%; object-fit:cover; object-position:72% 50%; transform:scale(1.01) }
/* Sello de cumplimiento sanitario, flotando sobre la foto */
.hero-sello{
position:absolute; left:-26px; bottom:-24px; z-index:2;
background:#fff; border-radius:18px; padding:17px 24px 17px 19px;
box-shadow:0 2px 4px rgba(16,24,32,.05), 0 22px 44px -18px rgba(16,24,32,.34);
display:flex; align-items:center; gap:14px; max-width:270px;
}
.hero-sello .marca{
width:42px; height:42px; border-radius:12px; background:var(--t-prebasica);
color:var(--prebasica-txt); display:flex; align-items:center; justify-content:center; flex:none;
}
.hero-sello .marca svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.hero-sello b{ display:block; font-family:'Cabinet Grotesk',sans-serif; font-weight:800; font-size:1rem; line-height:1.15; letter-spacing:-.02em; color:var(--grafito) }
.hero-sello span{ font-size:.79rem; color:var(--texto-2); line-height:1.4; display:block; margin-top:4px }
/* Indicadores, ahora sobre fondo claro */
.hero-pie{
margin-top:0; padding-top:26px; gap:26px 42px;
border-top:1px solid var(--linea);
}
.hero-pie::before{ display:none }
.hero-dato{ color:var(--grafito) }
.hero-dato span{ color:var(--texto-3) }
.hero-dato b{ font-size:1.95rem }
.hero-dato:nth-child(1) b{ color:#7A6500 }
.hero-dato:nth-child(2) b{ color:var(--empresas-txt) }
.hero-dato:nth-child(3) b{ color:var(--prebasica-txt) }
.hero-dato:nth-child(4) b{ color:var(--hospitalaria-txt) }
.hero-dato:nth-child(5) b{ color:var(--grafito) }
/* Franja de indicadores separada del bloque principal */
.hero-franja{ background:#fff; border-top:1px solid var(--linea); padding:26px 0 }
.hero-franja .hero-pie{ border-top:none; padding-top:0; margin:0; justify-content:space-between }
@media (max-width:980px){
.hero-reja{ grid-template-columns:1fr; gap:44px }
.hero{ padding-top:52px }
.hero-inner{ padding-bottom:56px }
.hero-foto{ order:-1 }
.hero-sello{ left:10px; bottom:-18px; max-width:250px }
.hero h1{ max-width:none }
}
/* =========================================================================
RITMO
Lenguaje de composición inspirado en jitter.video, traducido a la marca:
píldoras de sección, titulares centrados, radios generosos, etiquetas
marcador y un carrusel que se desborda del ancho útil.
Se conserva el fondo crema cálido: no se adopta el blanco frío del original.
========================================================================= */
:root{ --radio-xl:30px; --radio-l:24px }
/* ---------- Kicker convertido en píldora centrada ---------- */
.cabecera--centro{ max-width:none; text-align:center; margin-bottom:74px }
.cabecera--centro .kicker{
background:#fff; border:1px solid var(--linea); border-radius:100px;
padding:9px 20px 9px 16px; margin-bottom:28px; color:var(--texto-2);
box-shadow:0 1px 2px rgba(16,24,32,.04);
}
.cabecera--centro .kicker::before{ width:8px; height:8px; border-radius:50%; background:var(--acento,var(--verde)) }
.cabecera--centro h2{ font-size:clamp(2.4rem,5.4vw,4.4rem); max-width:16ch; margin:0 auto; letter-spacing:-.035em }
.cabecera--centro p{ max-width:56ch; margin-left:auto; margin-right:auto }
.seccion--oscura .cabecera--centro .kicker{
background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.8);
}
/* ---------- Etiqueta marcador: texto sobre fondo sólido ---------- */
.marcador{
display:inline-block; background:var(--grafito); color:#fff;
font-family:'Cabinet Grotesk',sans-serif; font-weight:800; font-size:.95rem;
letter-spacing:-.01em; padding:3px 9px; border-radius:6px; line-height:1.35;
}
.marcador--claro{ background:#fff; color:var(--grafito) }
.marcador--sol{ background:var(--amarillo); color:var(--grafito) }
/* ---------- Radios más generosos en todo el sistema ---------- */
.linea,.plato,.testimonio,.certif,.paso,.atributo,.dividido-media,.form,.canal-item,.item{
border-radius:var(--radio-xl);
}
.cifra,.franja-cta,.cambio,.hero-foto figure{ border-radius:var(--radio-l) }
/* ---------- Más aire ---------- */
.seccion{ padding:132px 0 }
.cabecera{ margin-bottom:70px }
/* ---------- Carrusel horizontal que se desborda del ancho útil ---------- */
.riel{
display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,340px);
gap:20px; overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scroll-padding-left:max(24px,calc((100% - var(--max))/2 + 24px));
padding:6px max(24px,calc((100% - var(--max))/2 + 24px)) 30px;
width:100%; scrollbar-width:none;
}
.riel::-webkit-scrollbar{ display:none }
.riel > *{ scroll-snap-align:start }
.riel-pie{
display:flex; align-items:center; gap:14px; color:var(--texto-3);
font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.riel-pie::after{
content:''; flex:1; height:1px;
background:linear-gradient(90deg,var(--linea),transparent);
}
/* ---------- Tarjetas de proceso apiladas, al modo de la referencia ---------- */
.pila{ display:grid; gap:22px; max-width:760px; margin:0 auto }
.pila-tarjeta{
background:var(--tinte); border-radius:var(--radio-xl); padding:44px 44px 40px;
position:relative; overflow:hidden;
}
.pila-tarjeta--pleno{ background:var(--c); color:var(--sobre,#fff) }
.pila-tarjeta .marcador{ margin-bottom:18px }
.pila-tarjeta h4{ font-size:1.7rem; margin-bottom:12px; letter-spacing:-.03em }
.pila-tarjeta p{ font-size:1.02rem; line-height:1.62; color:var(--texto-2); max-width:52ch }
.pila-tarjeta--pleno h4,.pila-tarjeta--pleno p{ color:var(--sobre,#fff) }
.pila-tarjeta--pleno p{ opacity:.82 }
.pila-num{
position:absolute; right:34px; top:28px;
font-family:'Cabinet Grotesk',sans-serif; font-weight:800; font-size:4.4rem;
line-height:1; color:var(--c); opacity:.16; letter-spacing:-.04em;
}
.pila-tarjeta--pleno .pila-num{ color:var(--sobre,#fff); opacity:.24 }
.pila-cuando{
display:inline-block; margin-top:22px; font-size:11.5px; font-weight:700;
letter-spacing:.13em; text-transform:uppercase; color:var(--c-txt,var(--c));
}
.pila-tarjeta--pleno .pila-cuando{ color:var(--sobre,#fff); opacity:.75 }
@media (max-width:860px){
.seccion{ padding:88px 0 }
.pila-tarjeta{ padding:34px 28px 30px }
.pila-num{ font-size:3.2rem; right:22px; top:22px }
.cabecera--centro{ text-align:left }
.cabecera--centro h2,.cabecera--centro p{ margin-left:0 }
}
/* ---------- El ave se posa en el borde del marco de la portada ----------
No se compone dentro de la fotografía: se apoya en su borde, como firma
de marca. Deja claro que es un símbolo y no parte de la escena. */
.hero-foto img.hero-ave{
position:absolute; left:-42px; top:-38px;
width:124px; height:auto; max-width:none; z-index:3; pointer-events:none;
filter:drop-shadow(0 14px 22px rgba(16,24,32,.28));
animation:posarse 1.1s var(--curva) .35s both;
}
@keyframes posarse{
from{ opacity:0; transform:translate(-14px,-26px) rotate(-7deg) scale(.9) }
to { opacity:1; transform:none }
}
@media (max-width:980px){ .hero-foto img.hero-ave{ width:88px; left:-26px; top:-24px } }
@media (prefers-reduced-motion:reduce){ .hero-foto img.hero-ave{ animation:none } }
/* =========================================================================
CARÁCTER
Rompe la simetría y la repetición de patrón, que es lo que delata una
página armada con plantilla: composición desigual, jerarquía extrema,
trazos dibujados a mano y textura de papel.
========================================================================= */
/* ---------- Textura de papel en las superficies claras ---------- */
body::before{
content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply;
}
body > *{ position:relative; z-index:2 }
/* ---------- Trazo dibujado a mano bajo una palabra ---------- */
.trazo{ position:relative; display:inline-block; white-space:nowrap }
.trazo svg{
position:absolute; left:-2%; bottom:-.22em; width:104%; height:.34em;
overflow:visible; pointer-events:none;
}
.trazo path{
fill:none; stroke:var(--amarillo); stroke-width:11; stroke-linecap:round;
stroke-dasharray:var(--largo,420); stroke-dashoffset:var(--largo,420);
animation:trazar 1.15s var(--curva) .75s forwards;
}
@keyframes trazar{ to{ stroke-dashoffset:0 } }
@media (prefers-reduced-motion:reduce){ .trazo path{ animation:none; stroke-dashoffset:0 } }
/* ---------- Bento desigual: jerarquía en vez de seis cajas iguales ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px }
.bento .atributo{ margin:0 }
.bento .atributo--ancho{ grid-column:span 3 }
.bento .atributo--medio{ grid-column:span 2 }
.bento .atributo--alto{
grid-column:span 3; grid-row:span 2; background:var(--c); color:var(--sobre,#fff);
display:flex; flex-direction:column; justify-content:space-between; padding:44px 40px;
}
.bento .atributo--alto h4{ font-size:2rem; letter-spacing:-.03em; margin-bottom:14px }
.bento .atributo--alto p{ color:var(--sobre,#fff); opacity:.82; font-size:1.04rem; max-width:34ch }
.bento .atributo--alto .ico{
width:60px; height:60px; border-radius:18px; background:rgba(255,255,255,.16);
color:var(--sobre,#fff); margin-bottom:0;
}
.bento .atributo--alto .ico svg{ width:30px; height:30px }
.bento .atributo--alto:hover{ background:var(--c); transform:translateY(-4px) }
.bento .atributo--alto:hover .ico{ background:rgba(255,255,255,.26) }
.bento-remate{
grid-column:span 6; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
padding:6px 4px 0; color:var(--texto-3); font-size:13px;
}
.bento-remate b{ font-family:'Cabinet Grotesk',sans-serif; font-size:2.6rem; color:var(--grafito); line-height:1 }
/* ---------- Declaración editorial: una sola idea, a gran tamaño ---------- */
.declaracion{ background:var(--crema); padding:120px 0 }
.declaracion .contenedor{ display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,.92fr); gap:52px; align-items:center }
.declaracion .ave{ width:96px; flex:none; margin-top:10px }
.declaracion figure{ margin:0; border-radius:var(--radio-xl); overflow:hidden; box-shadow:var(--sombra-alta) }
.declaracion figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.4 }
.declaracion p{
font-family:'Cabinet Grotesk',sans-serif; font-weight:800; letter-spacing:-.032em;
font-size:clamp(1.7rem,3.5vw,2.9rem); line-height:1.16; color:var(--grafito); max-width:20ch;
}
.declaracion p em{ font-style:normal; color:var(--verde) }
.declaracion .firma{
margin-top:26px; font-family:'Satoshi',sans-serif; font-weight:500;
font-size:.95rem; color:var(--texto-3); letter-spacing:.01em; max-width:46ch; line-height:1.6;
}
@media (max-width:980px){
.bento{ grid-template-columns:repeat(2,1fr) }
.bento .atributo--ancho,.bento .atributo--medio{ grid-column:span 1 }
.bento .atributo--alto{ grid-column:span 2; grid-row:span 1 }
.bento-remate{ grid-column:span 2 }
.declaracion .contenedor{ grid-template-columns:1fr; gap:28px }
.declaracion figure{ order:3 }
.declaracion .ave{ width:70px }
}
@media (max-width:620px){
.bento{ grid-template-columns:1fr }
.bento .atributo--ancho,.bento .atributo--medio,.bento .atributo--alto,.bento-remate{ grid-column:span 1 }
}
/* =========================================================================
REFINAMIENTO
El color deja de pintar superficies grandes y pasa a ser acento fino
sobre neutros. Más aire, sombras de varias capas, filetes de 1 px y
tipografía con tracking trabajado. El lujo se construye quitando.
========================================================================= */
:root{
--sombra-fina:0 1px 1px rgba(16,24,32,.03), 0 2px 4px rgba(16,24,32,.03), 0 8px 16px -8px rgba(16,24,32,.06);
--sombra-media:0 1px 1px rgba(16,24,32,.04), 0 4px 8px rgba(16,24,32,.04),
0 16px 32px -16px rgba(16,24,32,.12), 0 40px 60px -40px rgba(16,24,32,.16);
--hueso:#F7F3EA;
--linea-fina:rgba(16,24,32,.09);
}
/* ---------- Aire ---------- */
.seccion{ padding:152px 0 }
.cabecera{ margin-bottom:84px }
.cabecera--centro{ margin-bottom:86px }
/* ---------- Tipografía: más contraste de escala y tracking trabajado ---------- */
.cabecera h2,.cabecera--centro h2{ letter-spacing:-.042em; line-height:1.02 }
.cabecera p{ font-size:1.12rem; line-height:1.75; color:var(--texto-2); max-width:54ch }
.kicker{ letter-spacing:.22em; font-size:11px }
body{ line-height:1.7 }
/* ---------- Sombras: varias capas, como objeto real sobre superficie ---------- */
.linea,.plato,.testimonio,.certif,.atributo,.form,.hero-sello{ box-shadow:var(--sombra-fina) }
.dividido-media,.hero-foto figure,.foto-linea,.declaracion figure{ box-shadow:var(--sombra-media) }
.linea:hover,.plato:hover,.atributo:hover{ box-shadow:var(--sombra-media) }
/* ---------- Cifras: de bloques de color pleno a filete fino sobre neutro ---------- */
.cifras{ gap:0; background:transparent; border-top:1px solid rgba(255,255,255,.14) }
.cifra{
background:transparent; border-radius:0; padding:44px 34px 40px;
border-right:1px solid rgba(255,255,255,.14); color:#fff; position:relative;
}
.cifra:last-child{ border-right:none }
.cifra::after{
content:''; position:absolute; top:-1px; left:0; width:34px; height:2px; background:var(--c);
}
.cifra b{ color:#fff; font-size:clamp(2.6rem,4.6vw,3.7rem); letter-spacing:-.045em }
.cifra b i{ color:var(--c); opacity:1 }
.cifra span{ color:rgba(255,255,255,.5); font-size:13px; letter-spacing:.02em; opacity:1 }
/* ---------- Testimonios: papel, no color pleno ---------- */
.testimonio{
background:#fff; color:var(--texto); border:1px solid var(--linea-fina);
padding:42px 38px; position:relative;
}
.testimonio::before{
content:''; position:absolute; top:0; left:38px; width:28px; height:2px; background:var(--c);
}
.testimonio blockquote{ color:var(--texto); font-size:1.06rem; line-height:1.72 }
.testimonio .estrellas{ color:var(--c); opacity:1; font-size:13px; letter-spacing:4px }
.testimonio .autor{ border-top-color:var(--linea-fina) }
.testimonio .autor b{ color:var(--texto) }
.testimonio .autor span{ color:var(--texto-3); opacity:1 }
.testimonio .avatar{ background:var(--hueso); color:var(--texto-2); border:1px solid var(--linea-fina) }
/* ---------- Tarjetas de línea: tinte apenas insinuado y filete de color ---------- */
.linea{ background:#fff; border:1px solid var(--linea-fina) }
.linea::before{ height:3px }
.linea:hover{ background:var(--tinte); transform:translateY(-6px) }
.linea:hover .tipo,.linea:hover .linea-ico{ color:var(--c-txt,var(--c)) }
.linea:hover h3,.linea:hover p,.linea:hover li,.linea:hover .vinculo{ color:inherit }
.linea:hover li::before{ background:var(--c) }
.linea h3{ letter-spacing:-.032em }
/* ---------- Cierre: grafito profundo con filete de espectro ---------- */
.cta-final{ background:var(--grafito); color:#fff }
.cta-final h2{ color:#fff; letter-spacing:-.042em }
.cta-final p{ color:rgba(255,255,255,.62) }
.cta-nota{ color:rgba(255,255,255,.38) }
.cta-final::before{ opacity:.16; mix-blend-mode:normal }
.cta-final .contenedor::before{ background-image:url('brand/ave_blanco_1200.png'); opacity:.05 }
.cta-final .btn--sol{ background:var(--amarillo); color:var(--grafito) }
.cta-final .btn--claro{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28) }
.cta-final .btn--claro:hover{ background:#fff; color:var(--grafito) }
/* ---------- Superficies: hueso en vez de crema saturada ---------- */
.seccion--crema{ background:var(--hueso) }
.confianza{ background:#fff; border-bottom:1px solid var(--linea-fina) }
.confianza-fila img{ opacity:.4 }
/* ---------- Filetes finos en vez de bordes gruesos ---------- */
.paso{ border-top-width:2px }
.pila-tarjeta{ background:#fff; border:1px solid var(--linea-fina); position:relative }
.pila-tarjeta::before{ content:''; position:absolute; top:0; left:44px; width:32px; height:2px; background:var(--c) }
.pila-tarjeta--pleno{ background:var(--grafito); border-color:var(--grafito) }
.pila-tarjeta--pleno::before{ background:var(--amarillo) }
.pila-num{ opacity:.10 }
.pila-tarjeta--pleno .pila-num{ opacity:.14 }
/* ---------- Botones: más peso y respiración ---------- */
.btn{ padding:16px 30px; letter-spacing:-.005em }
.btn--sm{ padding:12px 22px }
.btn--linea{ border-color:var(--linea-fina) }
/* ---------- Movimiento más lento, que es lo que se siente caro ---------- */
:root{ --transicion:.52s var(--curva) }
.rev{ transition:opacity 1.25s var(--curva), transform 1.25s var(--curva), filter 1.25s var(--curva) }
@media (max-width:860px){
.seccion{ padding:96px 0 }
.cifra{ border-right:none; border-bottom:1px solid rgba(255,255,255,.14); padding:32px 24px }
}
/* =========================================================================
MINIMALISMO
Se retiran cajas, sombras marcadas, íconos grandes, etiquetas y textura.
Queda espacio, tipografía y filetes de color de 2 px. El sistema de siete
colores sobrevive como señal, no como superficie.
========================================================================= */
/* ---------- Fuera la textura de papel ---------- */
body::before{ display:none }
/* ---------- Superficies: dos neutros y nada más ---------- */
:root{ --hueso:#F8F5EF; --linea-fina:rgba(16,24,32,.08) }
.seccion--crema{ background:#fff }
.seccion--blanca{ background:var(--hueso) }
body{ background:var(--hueso) }
/* ---------- El espectro se afina ---------- */
.espectro{ height:2px }
.espectro--fina{ height:2px }
.seccion--crema::before{ display:none }
/* ---------- Cabecera más liviana ---------- */
header{ background:rgba(248,245,239,.9); border-bottom:1px solid var(--linea-fina) }
.nav{ height:88px }
.aviso{ background:transparent; color:var(--texto-3); font-size:11.5px; letter-spacing:.06em; padding:14px 20px; border-bottom:1px solid var(--linea-fina) }
.aviso b{ color:var(--texto); font-weight:700 }
/* ---------- Portada: sin trazo dibujado, sin píldoras ---------- */
.trazo svg{ display:none }
.hero h1 em{ color:var(--texto-3) }
.hero-chips{ gap:0 26px; margin-bottom:34px }
.hero-chip{
background:transparent; border:none; padding:0; border-radius:0;
font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
color:var(--texto-3); backdrop-filter:none;
}
.hero-chip i{ width:5px; height:5px }
.hero-chip:hover{ background:transparent; color:var(--texto); transform:none }
.hero-foto::before{ display:none }
.hero-foto figure{ border-radius:2px; box-shadow:none; border:1px solid var(--linea-fina) }
.hero-sello{
box-shadow:none; border:1px solid var(--linea-fina); border-radius:2px;
background:var(--hueso); padding:20px 24px;
}
.hero-sello .marca{ display:none }
.hero-franja{ background:transparent; border-top:1px solid var(--linea-fina) }
.hero-dato b{ font-weight:800; letter-spacing:-.04em }
.hero-dato:nth-child(n) b{ color:var(--texto) }
/* ---------- Tarjetas de línea: sin caja, separadas por aire ---------- */
.lineas{ gap:56px 40px }
.linea{
background:transparent; border:none; box-shadow:none; border-radius:0;
padding:26px 0 0; overflow:visible;
}
.linea::before{ height:2px; width:38px }
.linea:hover{ background:transparent; transform:none; box-shadow:none }
.linea .linea-ico,.linea .etiqueta{ display:none }
.linea .tipo{ font-size:11px; letter-spacing:.19em; color:var(--texto-3) }
.linea:hover .tipo{ color:var(--c-txt,var(--c)) }
.linea h3{ font-size:1.5rem; margin-bottom:14px }
.linea li::before{ width:3px; height:3px; top:11px; background:var(--texto-3) }
.linea .vinculo{ font-weight:600; font-size:.86rem; letter-spacing:.02em }
.brillo{ display:none }
/* ---------- Atributos: filas con filete, no bento de cajas ---------- */
.bento{ grid-template-columns:repeat(2,1fr); gap:0 64px }
.bento .atributo,
.bento .atributo--alto,
.bento .atributo--ancho,
.bento .atributo--medio{
grid-column:auto; grid-row:auto; background:transparent; box-shadow:none;
border:none; border-top:1px solid var(--linea-fina); border-radius:0;
padding:38px 0 34px; display:block;
}
.bento .atributo:hover{ background:transparent; transform:none; box-shadow:none }
.bento .atributo .ico{
width:auto; height:auto; background:transparent; border-radius:0; margin-bottom:0;
display:none;
}
.bento .atributo--alto h4{ font-size:1.35rem }
.bento .atributo--alto p,.bento .atributo p{ color:var(--texto-2); font-size:.98rem; max-width:46ch }
.bento .atributo--alto{ color:inherit }
.bento .atributo--alto h4,.bento .atributo--alto p{ color:inherit }
.bento h4{ font-size:1.2rem; margin-bottom:10px; letter-spacing:-.028em }
.bento h4::before{
content:''; display:block; width:26px; height:2px; background:var(--c); margin-bottom:18px;
}
.bento-remate{ grid-column:span 2; border-top:1px solid var(--linea-fina); padding-top:30px; margin-top:8px }
/* ---------- Proceso: sin cajas ---------- */
.pila-tarjeta{
background:transparent; border:none; border-top:1px solid var(--linea-fina);
border-radius:0; padding:44px 0 40px;
}
.pila-tarjeta::before{ left:0 }
.pila-tarjeta--pleno{ background:transparent; border-color:var(--linea-fina) }
.pila-tarjeta--pleno h4,.pila-tarjeta--pleno p{ color:var(--texto) }
.pila-tarjeta--pleno p{ color:var(--texto-2); opacity:1 }
.pila-tarjeta--pleno::before{ background:var(--grafito) }
.marcador{ background:transparent; color:var(--texto-3); padding:0; font-family:'Satoshi',sans-serif;
font-size:11px; font-weight:700; letter-spacing:.19em; text-transform:uppercase }
.marcador--claro,.marcador--sol{ background:transparent; color:var(--texto-3) }
.pila-num{ opacity:.06; font-size:5rem; right:0 }
.pila-tarjeta--pleno .pila-num{ opacity:.06; color:var(--grafito) }
/* ---------- Platos del menú: sin caja ---------- */
.plato{ background:transparent; border:none; box-shadow:none; border-radius:0 }
.plato:hover{ background:transparent; transform:none; box-shadow:none }
.plato-img{ border-radius:2px; aspect-ratio:4/3 }
.plato-dia{
position:static; background:transparent; color:var(--c-txt,var(--texto-3)); padding:0;
font-size:11px; letter-spacing:.19em; display:block; margin-bottom:10px;
}
.plato-cuerpo{ background:transparent; padding:20px 0 0 }
.plato:hover .plato-cuerpo{ background:transparent }
.chip{ background:transparent; color:var(--texto-3); padding:0 14px 0 0; font-weight:500; font-size:11.5px; letter-spacing:.04em }
.chip--verde,.chip--azul,.chip--rojo,.chip--amarillo{ background:transparent; color:var(--texto-3) }
/* ---------- Testimonios: solo tipografía ---------- */
.testimonio{ background:transparent; border:none; box-shadow:none; border-top:1px solid var(--linea-fina); border-radius:0; padding:36px 0 0 }
.testimonio::before{ left:0 }
.testimonio .estrellas{ display:none }
.testimonio blockquote{ font-size:1.1rem; line-height:1.75 }
.testimonio .avatar{ display:none }
.testimonio .autor{ border-top:none; padding-top:0; margin-top:22px }
/* ---------- Fotografía: bordes rectos ---------- */
.dividido-media,.foto-linea,.declaracion figure,.plato-img{ border-radius:2px }
.dividido-media,.foto-linea,.declaracion figure{ box-shadow:none; border:1px solid var(--linea-fina) }
/* ---------- Formulario y contacto ---------- */
.form{ background:transparent; border:none; box-shadow:none; padding:0 }
.campo input,.campo select,.campo textarea{ background:transparent; border:none; border-bottom:1px solid var(--linea-fina); border-radius:0; padding:14px 0 }
.campo input:focus,.campo textarea:focus{ background:transparent; border-color:var(--grafito) }
.canal-item{ background:transparent; border:none; border-top:1px solid var(--linea-fina); border-radius:0; box-shadow:none; padding:24px 0 }
.canal-item:hover{ transform:none; box-shadow:none }
.canal-item .ico{ background:transparent; color:var(--texto-3); width:22px; height:22px; border-radius:0 }
.canal-item .ico svg{ width:20px; height:20px }
.certif{ background:transparent; border:none; border-top:2px solid var(--c); border-radius:0; padding:30px 0 0 }
/* ---------- Botones minimalistas ---------- */
.btn--sol{ background:var(--grafito); color:#fff }
.btn--sol:hover{ background:#000; box-shadow:none; transform:translateY(-1px) }
.btn--primario:hover{ box-shadow:none; transform:translateY(-1px) }
.btn::after{ display:none }
.wa{ box-shadow:none; background:var(--grafito) }
.wa:hover{ transform:none; background:#000 }
/* ---------- Cierre ---------- */
.cta-final::before{ display:none }
.cta-final .contenedor::before{ display:none }
.cta-cuerpo{ padding:150px 0 }
@media (max-width:860px){
.bento{ grid-template-columns:1fr; gap:0 }
.bento-remate{ grid-column:span 1 }
.lineas{ gap:44px }
}
/* ---------- Ajustes finos de la portada minimalista ---------- */
.hero h1 em{ color:var(--prebasica-txt) }
/* El sello deja de flotar sobre la foto: pasa a ser un pie de imagen */
.hero-foto{ display:flex; flex-direction:column }
.hero-sello{
position:static; max-width:none; margin-top:18px; padding:0;
background:transparent; border:none; display:flex; align-items:baseline; gap:12px;
}
.hero-sello b{ font-family:'Satoshi',sans-serif; font-size:11px; font-weight:700;
letter-spacing:.19em; text-transform:uppercase; color:var(--texto); flex:none }
.hero-sello span{ margin-top:0; font-size:12.5px; color:var(--texto-3); line-height:1.5 }
@media (max-width:980px){ .hero-sello{ margin-top:16px } }
/* =========================================================================
VIDA Y LEGIBILIDAD
Auditoría del 10-ago-2026: siete elementos quedaban bajo el mínimo de
contraste y el botón de contorno era invisible hasta pasar el cursor.
Se corrige devolviendo color a los rótulos —que además es lo que le
faltaba a la página— en vez de limitarse a oscurecer grises.
========================================================================= */
:root{
--texto-3:#646C6A; /* 2,96:1 → 4,95:1 sobre hueso */
--borde-boton:#B9AE99; /* visible sin pasar el cursor */
--hueso:#F9F5EC; /* medio punto más cálido */
}
/* ---------- El botón de contorno se ve siempre ---------- */
.btn--linea{
border-color:var(--borde-boton); border-width:1.5px;
background:rgba(255,255,255,.5);
}
.btn--linea:hover{ border-color:var(--grafito); background:var(--grafito); color:#fff }
/* ---------- La acción principal vuelve al amarillo de marca ---------- */
.btn--sol{ background:var(--amarillo); color:var(--grafito) }
.btn--sol:hover{ background:#F2C700; color:var(--grafito); transform:translateY(-1px) }
.cta-final .btn--sol{ background:var(--amarillo); color:var(--grafito) }
/* ---------- Los rótulos recuperan el color de su línea ---------- */
.linea .tipo{ color:var(--c-txt,var(--texto-2)) }
.plato-dia{ color:var(--c-txt,var(--texto-2)); font-weight:700 }
.pila-cuando{ color:var(--c-txt,var(--texto-2)) }
.marcador{ color:var(--c-txt,var(--texto-2)) }
.pila-tarjeta--pleno .marcador,
.pila-tarjeta--pleno .pila-cuando{ color:var(--texto-2) }
/* ---------- Chips de la portada: legibles y con su punto de color ---------- */
.hero-chip{ color:var(--texto-2); font-weight:700 }
.hero-chip:hover{ color:var(--grafito) }
/* ---------- Etiquetas nutricionales: color tenue de vuelta ---------- */
.chip{ color:var(--texto-2); font-weight:600 }
.chip--verde{ color:var(--prebasica-txt) }
.chip--azul{ color:var(--empresas-txt) }
.chip--rojo{ color:var(--hospitalaria-txt) }
.chip--amarillo{ color:var(--escolar-txt) }
/* ---------- Calidez: un filete de color al pasar por cada línea ---------- */
.linea::before{ transition:width .55s var(--curva) }
.linea:hover::before{ width:100% }
.plato-img{ position:relative; overflow:hidden }
.plato-img::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
background:var(--c); transform:scaleX(0); transform-origin:0 50%;
transition:transform .6s var(--curva);
}
.plato:hover .plato-img::after{ transform:scaleX(1) }
/* ---------- El pie del carrusel, legible ---------- */
.riel-pie{ color:var(--texto-2) }
/* ---------- Evidencia verificable en lugar de indicadores decorativos ---------- */
.verificable{ border-top:1px solid rgba(255,255,255,.14) }
.verif{
display:grid; grid-template-columns:52px 1fr auto; gap:32px; align-items:baseline;
padding:34px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.verif-n{
font-family:'Cabinet Grotesk',sans-serif; font-size:12px; font-weight:800;
letter-spacing:.1em; color:rgba(255,255,255,.34);
}
.verif h4{ font-size:1.28rem; color:#fff; margin-bottom:8px; letter-spacing:-.028em }
.verif p{ color:rgba(255,255,255,.56); font-size:.97rem; line-height:1.68; max-width:60ch }
.verif-dato{
font-family:'Satoshi',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--amarillo); white-space:nowrap;
}
.verif-pie{ margin-top:34px; font-size:.92rem; color:rgba(255,255,255,.42) }
@media (max-width:760px){
.verif{ grid-template-columns:36px 1fr; gap:16px }
.verif-dato{ grid-column:2; margin-top:10px }
}
/* =========================================================================
TARJETAS QUE GIRAN
Cara frontal en color pleno con el ave; al girar aparece la información.
El contenido del dorso vive siempre en el DOM: se lee con lector de
pantalla y lo indexa el buscador aunque no esté a la vista.
========================================================================= */
.tarjeta{
position:relative; aspect-ratio:3/4.05; border:0; padding:0; background:transparent;
cursor:pointer; outline:none;
}
/* ---------- Frente: color pleno y el ave ---------- */
.cara--frente{ background:var(--c); color:var(--sobre) }
.cara-ave{
position:absolute; right:-42px; bottom:-30px; width:210px; height:auto; max-width:none;
opacity:.16; pointer-events:none; transform:rotate(-6deg);
}
.cara--frente .cara-tipo{
font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
color:var(--sobre); opacity:.62; margin-bottom:auto;
}
.cara--frente h3{
font-size:1.72rem; line-height:1.1; letter-spacing:-.035em; color:var(--sobre);
position:relative; z-index:2;
}
.cara-pista{
margin-top:20px; font-size:11px; font-weight:700; letter-spacing:.19em;
text-transform:uppercase; color:var(--sobre); opacity:.6;
display:inline-flex; align-items:center; gap:9px; position:relative; z-index:2;
}
.cara-pista::after{
content:''; width:20px; height:1px; background:currentColor;
transition:width .5s var(--curva);
}
.tarjeta:hover .cara-pista::after{ width:34px }
/* ---------- Dorso: la información ---------- */
.cara--dorso .cara-tipo{
font-size:10.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
color:var(--c-txt); margin-bottom:16px;
}
.cara--dorso p{ font-size:.92rem; line-height:1.62; color:var(--texto-2) }
.cara--dorso ul{ list-style:none; padding:0; margin:18px 0 auto; display:grid; gap:9px }
.cara--dorso li{
font-size:.85rem; color:var(--texto-2); padding-left:16px; position:relative; line-height:1.45;
}
.cara--dorso li::before{
content:''; position:absolute; left:0; top:8px; width:5px; height:5px;
border-radius:50%; background:var(--c);
}
.cara--dorso .vinculo{
margin-top:22px; font-size:.84rem; font-weight:700; color:var(--c-txt);
display:inline-flex; align-items:center; gap:8px;
}
/* ---------- Sin giro para quien pidió menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
.tarjeta-caras{ transition:none }
}
/* ---------- Táctil: sin hover, la pista lo dice ---------- */
@media (hover:none){
.cara-pista::before{ content:'Toca para '; }
}
@media (max-width:980px){
.lineas{ grid-template-columns:repeat(2,1fr); gap:16px }
.tarjeta{ aspect-ratio:3/4.3 }
.cara{ padding:28px 24px }
.cara--frente h3{ font-size:1.42rem }
}
@media (max-width:620px){
.lineas{ grid-template-columns:1fr; gap:14px }
.tarjeta{ aspect-ratio:auto; min-height:330px }
}
/* ---------- Remate de sección: una acción concreta donde el visitante ya está convencido ---------- */
.remate{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px;
margin-top:56px; padding-top:32px; border-top:1px solid var(--linea-fina);
}
.remate p{ font-size:1.06rem; color:var(--texto-2); max-width:52ch; margin:0 }
.remate--oscuro{ border-top-color:rgba(255,255,255,.14) }
.remate--oscuro p{ color:rgba(255,255,255,.62) }
@media (max-width:620px){
.remate{ margin-top:40px }
.remate .btn{ width:100% }
}
/* =========================================================================
MINUTA REAL
Cinco días con las cuatro alternativas de cada uno, que es como funciona
el servicio. Reemplaza al carrusel de un plato por día.
========================================================================= */
.semana{
display:grid; grid-template-columns:repeat(5,1fr); gap:0;
max-width:var(--max); margin:0 auto; padding:0 24px;
border-top:1px solid var(--linea-fina);
}
.dia{ border-right:1px solid var(--linea-fina); padding:0 22px }
.dia:first-child{ padding-left:0 }
.dia:last-child{ border-right:none; padding-right:0 }
.dia-cab{
display:flex; align-items:baseline; justify-content:space-between; gap:10px;
padding:22px 0 18px; border-bottom:1px solid var(--linea-fina);
}
.dia-nombre{
font-family:'Cabinet Grotesk',sans-serif; font-weight:800; font-size:1.05rem;
letter-spacing:-.02em; color:var(--texto);
}
.dia-num{ font-size:12px; font-weight:600; color:var(--texto-3); letter-spacing:.08em }
.dia-opciones{ display:grid }
.opcion{ padding:20px 0; border-bottom:1px solid var(--linea-fina) }
.opcion:last-child{ border-bottom:none }
.opcion-tipo{
display:flex; align-items:center; gap:7px;
font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
color:var(--c-txt); margin-bottom:8px;
}
.opcion-tipo::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--c); flex:none }
.opcion p{ font-size:.88rem; line-height:1.5; color:var(--texto-2); margin:0 }
.pendiente{ color:var(--texto-3); font-style:italic }
@media (max-width:1080px){
.semana{ grid-template-columns:repeat(2,1fr); gap:0 32px }
.dia{ border-right:none; padding:0; border-bottom:1px solid var(--linea-fina) }
.dia:last-child{ padding:0 }
}
@media (max-width:620px){
.semana{ grid-template-columns:1fr }
}
/* ---------- Tira de fotografías: apetito bajo la minuta escrita ---------- */
.tira{
display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr);
gap:2px; margin-top:64px; overflow-x:auto; scrollbar-width:none;
}
.tira::-webkit-scrollbar{ display:none }
.tira figure{ margin:0; aspect-ratio:1/1; overflow:hidden; background:var(--hueso) }
.tira img{
width:100%; height:100%; object-fit:cover;
filter:saturate(.92); transition:transform 1.1s var(--curva), filter .6s var(--curva);
}
.tira figure:hover img{ transform:scale(1.05); filter:saturate(1.05) }
@media (max-width:620px){ .tira{ grid-auto-columns:minmax(160px,1fr); margin-top:44px } }
/* =========================================================================
REGISTRO INSTITUCIONAL
Barra de contacto permanente, pie con datos corporativos y sección de
compromiso: los elementos que un comprador espera de un proveedor formal.
========================================================================= */
.barra-inst{ background:var(--grafito); color:rgba(255,255,255,.62); font-size:12px }
.barra-inst-fila{
display:flex; align-items:center; justify-content:space-between; gap:16px 32px;
min-height:42px; flex-wrap:wrap;
}
.barra-transicion{ letter-spacing:.02em }
.barra-transicion b{ color:var(--amarillo); font-weight:700 }
.barra-links{ display:flex; gap:26px; flex-wrap:wrap }
.barra-links a{ color:rgba(255,255,255,.62); transition:color .3s var(--curva) }
.barra-links a:hover{ color:#fff }
/* ---------- Pilares del compromiso ---------- */
.pilares{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 56px }
.pilar{ border-top:2px solid var(--c); padding:26px 0 0 }
.pilar-n{
font-family:'Cabinet Grotesk',sans-serif; font-size:11px; font-weight:800;
letter-spacing:.19em; color:var(--c-txt); display:block; margin-bottom:14px;
}
.pilar h3{ font-size:1.5rem; letter-spacing:-.032em; margin-bottom:14px }
.pilar p{ font-size:.96rem; line-height:1.72; color:var(--texto-2) }
/* ---------- Pie legal ---------- */
.pie-legal{
display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 40px;
padding:26px 0; border-top:1px solid rgba(255,255,255,.1); font-size:12.5px;
color:rgba(255,255,255,.5);
}
.pie-legal-datos{ display:flex; flex-wrap:wrap; gap:6px 26px }
.pie-legal-datos b{ color:rgba(255,255,255,.78); font-weight:600 }
.pie-legal-sellos{ display:flex; flex-wrap:wrap; gap:6px 22px }
.pie-legal-sellos span{ position:relative; padding-left:16px }
.pie-legal-sellos span::before{
content:''; position:absolute; left:0; top:6px; width:7px; height:7px;
border-radius:50%; background:var(--prebasica-txt);
}
.pie-base{ border-top:1px solid rgba(255,255,255,.1) }
@media (max-width:860px){
.pilares{ grid-template-columns:1fr; gap:0 }
.pilar{ margin-bottom:34px }
.barra-links{ gap:16px; font-size:11.5px }
.barra-transicion{ width:100%; padding-top:8px }
}
/* ---------- Cargos disponibles ---------- */
.cargos{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 56px; border-top:1px solid var(--linea-fina) }
.cargo{ padding:32px 0 0 }
.cargo h4{ font-size:1.22rem; letter-spacing:-.028em; margin-bottom:10px }
.cargo p{ font-size:.94rem; line-height:1.68; color:var(--texto-2) }
@media (max-width:860px){ .cargos{ grid-template-columns:1fr } .cargo{ padding:26px 0 0 } }
/* =========================================================================
MODO OSCURO
Grafito profundo como superficie base. Sobre oscuro los Pantone ganan
saturación percibida: el color luce más sin subirle la intensidad.
========================================================================= */
:root{
--noche:#0D1319; /* más profundo que el grafito de marca */
--noche-2:#141C24; /* superficie elevada */
--linea-noche:rgba(255,255,255,.10);
--texto-claro:#EDE8DF;
--texto-claro-2:rgba(237,232,223,.66);
--texto-claro-3:rgba(237,232,223,.42);
}
[data-theme="dark"] body, [data-theme="dark"]body{ background:var(--noche); color:var(--texto-claro) }
[data-theme="dark"] body::before{ display:none }
/* ---------- Superficies ---------- */
[data-theme="dark"] .seccion--crema,
[data-theme="dark"] .seccion--blanca{ background:var(--noche-2) }
[data-theme="dark"] .seccion--oscura{ background:var(--noche) }
[data-theme="dark"] .confianza{ background:var(--noche); border-bottom:1px solid var(--linea-noche) }
[data-theme="dark"] .hero{ background:var(--noche) }
[data-theme="dark"] .declaracion{ background:var(--noche-2) }
[data-theme="dark"] .cta-final{ background:var(--noche-2) }
/* ---------- Tipografía ---------- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .wm{ color:var(--texto-claro) }
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] body, [data-theme="dark"]body{ color:var(--texto-claro-2) }
[data-theme="dark"] .cabecera h2,
[data-theme="dark"] .cabecera--centro h2,
[data-theme="dark"] .hero h1{ color:var(--texto-claro) }
[data-theme="dark"] .cabecera p{ color:var(--texto-claro-2) }
[data-theme="dark"] .kicker{ color:var(--texto-claro-3) }
[data-theme="dark"] .hero-sub{ color:var(--texto-claro-2) }
/* ---------- Cabecera ---------- */
[data-theme="dark"] header{ background:rgba(13,19,25,.9); border-bottom:1px solid var(--linea-noche) }
[data-theme="dark"] .logo-txt .wm{ color:var(--texto-claro) }
[data-theme="dark"] .logo-txt small{ color:var(--texto-claro-3) }
[data-theme="dark"] .nav-links a{ color:var(--texto-claro-2) }
[data-theme="dark"] .nav-links a:hover{ color:var(--texto-claro) }
[data-theme="dark"] .barra-inst{ background:#080C10; border-bottom:1px solid var(--linea-noche) }
/* ---------- Filetes y separadores ---------- */
:root[data-theme="dark"]{ --linea-fina:rgba(255,255,255,.10) }
[data-theme="dark"] .cabecera--centro .kicker{ background:var(--noche-2); border-color:var(--linea-noche); color:var(--texto-claro-2) }
/* ---------- Portada ---------- */
[data-theme="dark"] .hero-foto figure{ border-color:var(--linea-noche) }
[data-theme="dark"] .hero-sello{ background:transparent }
[data-theme="dark"] .hero-sello b{ color:var(--texto-claro) }
[data-theme="dark"] .hero-sello span{ color:var(--texto-claro-3) }
[data-theme="dark"] .hero-chip{ color:var(--texto-claro-2) }
[data-theme="dark"] .hero-chip:hover{ color:var(--texto-claro) }
/* ---------- Botones ---------- */
[data-theme="dark"] .btn--primario{ background:var(--texto-claro); color:var(--noche) }
[data-theme="dark"] .btn--primario:hover{ background:#fff; color:var(--noche) }
[data-theme="dark"] .btn--linea{ border-color:rgba(255,255,255,.26); color:var(--texto-claro); background:transparent }
[data-theme="dark"] .btn--linea:hover{ background:var(--texto-claro); color:var(--noche); border-color:var(--texto-claro) }
[data-theme="dark"] .btn--sol{ background:var(--amarillo); color:#101820 }
/* ---------- Tarjetas: el dorso también oscurece ---------- */
[data-theme="dark"] .cara--dorso{ background:var(--noche-2); border-color:var(--linea-noche); color:var(--texto-claro) }
[data-theme="dark"] .cara--dorso p,
[data-theme="dark"] .cara--dorso li{ color:var(--texto-claro-2) }
[data-theme="dark"] .cara--dorso .vinculo{ color:var(--texto-claro) }
/* ---------- Evidencia, proceso, pilares ---------- */
[data-theme="dark"] .verif h4{ color:var(--texto-claro) }
[data-theme="dark"] .verif p{ color:var(--texto-claro-2) }
[data-theme="dark"] .verificable,
[data-theme="dark"] .verif{ border-color:var(--linea-noche) }
[data-theme="dark"] .pila-tarjeta{ border-color:var(--linea-noche) }
[data-theme="dark"] .pila-tarjeta h4,
[data-theme="dark"] .pila-tarjeta--pleno h4{ color:var(--texto-claro) }
[data-theme="dark"] .pila-tarjeta p,
[data-theme="dark"] .pila-tarjeta--pleno p{ color:var(--texto-claro-2) }
[data-theme="dark"] .pila-num{ opacity:.08; color:var(--texto-claro) }
[data-theme="dark"] .marcador,
[data-theme="dark"] .marcador--claro,
[data-theme="dark"] .marcador--sol{ color:var(--texto-claro-3) }
[data-theme="dark"] .pilar p,
[data-theme="dark"] .cargo p{ color:var(--texto-claro-2) }
[data-theme="dark"] .pilar h3,
[data-theme="dark"] .cargo h4{ color:var(--texto-claro) }
[data-theme="dark"] .bento .atributo{ border-color:var(--linea-noche) }
[data-theme="dark"] .bento h4,
[data-theme="dark"] .bento .atributo--alto h4{ color:var(--texto-claro) }
[data-theme="dark"] .bento p,
[data-theme="dark"] .bento .atributo--alto p{ color:var(--texto-claro-2) }
[data-theme="dark"] .bento-remate{ border-color:var(--linea-noche) }
[data-theme="dark"] .bento-remate b{ color:var(--texto-claro) }
/* ---------- Minuta ---------- */
[data-theme="dark"] .semana,
[data-theme="dark"] .dia,
[data-theme="dark"] .dia-cab,
[data-theme="dark"] .opcion{ border-color:var(--linea-noche) }
[data-theme="dark"] .dia-nombre{ color:var(--texto-claro) }
[data-theme="dark"] .dia-num{ color:var(--texto-claro-3) }
[data-theme="dark"] .opcion p{ color:var(--texto-claro-2) }
/* ---------- Testimonios y remates ---------- */
[data-theme="dark"] .testimonio{ border-color:var(--linea-noche) }
[data-theme="dark"] .testimonio blockquote{ color:var(--texto-claro) }
[data-theme="dark"] .testimonio .autor b{ color:var(--texto-claro) }
[data-theme="dark"] .testimonio .autor span{ color:var(--texto-claro-3) }
[data-theme="dark"] .remate{ border-color:var(--linea-noche) }
[data-theme="dark"] .remate p,
[data-theme="dark"] .remate--oscuro p{ color:var(--texto-claro-2) }
/* ---------- Declaración ---------- */
[data-theme="dark"] .declaracion p{ color:var(--texto-claro) }
[data-theme="dark"] .declaracion .firma{ color:var(--texto-claro-3) }
/* ---------- Cierre y pie ---------- */
[data-theme="dark"] .cta-final h2{ color:var(--texto-claro) }
[data-theme="dark"] .cta-final p{ color:var(--texto-claro-2) }
[data-theme="dark"] .cta-final .btn--claro{ border-color:rgba(255,255,255,.26); color:var(--texto-claro) }
[data-theme="dark"] footer{ background:#080C10 }
/* ---------- Formulario ---------- */
[data-theme="dark"] .campo label,
[data-theme="dark"] .etiqueta-campo{ color:var(--texto-claro-2) }
[data-theme="dark"] .campo input,
[data-theme="dark"] .campo select,
[data-theme="dark"] .campo textarea{ color:var(--texto-claro); border-bottom-color:var(--linea-noche) }
[data-theme="dark"] .campo input::placeholder,
[data-theme="dark"] .campo textarea::placeholder{ color:var(--texto-claro-3) }
[data-theme="dark"] .radio{ background:transparent; border-color:var(--linea-noche); color:var(--texto-claro-2) }
[data-theme="dark"] .canal-item{ border-color:var(--linea-noche) }
[data-theme="dark"] .canal-item b{ color:var(--texto-claro) }
[data-theme="dark"] .comuna{ background:transparent; border-color:var(--linea-noche); color:var(--texto-claro-2) }
[data-theme="dark"] .dato b{ color:var(--texto-claro) }
[data-theme="dark"] .datos,
[data-theme="dark"] .dato{ border-color:var(--linea-noche) }
/* ---------- Fotografía: un punto menos de brillo sobre fondo oscuro ---------- */
[data-theme="dark"] .hero-foto img,
[data-theme="dark"] .dividido-media img,
[data-theme="dark"] .foto-linea img,
[data-theme="dark"] .declaracion figure img,
[data-theme="dark"] .tira img{
filter:brightness(.96) saturate(1.02);
}
[data-theme="dark"] .tira figure{ background:var(--noche-2) }
/* =========================================================================
VOLTEO DE TARJETAS
Las dos caras se cruzan: la de salida se atenúa y encoge levemente, la de
entrada aparece creciendo. Siempre hay una cara visible, y al no existir
rotación tampoco puede aparecer texto espejado.
========================================================================= */
.lineas{ grid-template-columns:repeat(4,1fr); gap:20px }
.tarjeta{ position:relative; aspect-ratio:3/4.05; cursor:pointer; outline:none }
.tarjeta-caras{ position:absolute; inset:0 }
.cara{
position:absolute; inset:0; border-radius:4px; padding:34px 30px;
display:flex; flex-direction:column; overflow:hidden;
transition:opacity .42s var(--curva), transform .55s var(--curva);
}
.cara--frente{ opacity:1; transform:scale(1); z-index:2 }
.cara--dorso { opacity:0; transform:scale(1.04); z-index:1 }
.tarjeta:hover .cara--frente,
.tarjeta:focus-visible .cara--frente,
.tarjeta.girada .cara--frente{ opacity:0; transform:scale(.97); z-index:1 }
.tarjeta:hover .cara--dorso,
.tarjeta:focus-visible .cara--dorso,
.tarjeta.girada .cara--dorso{ opacity:1; transform:scale(1); z-index:3 }
@media (prefers-reduced-motion:reduce){ .cara{ transition-duration:.01ms } }
/* Los ajustes responsivos deben ir después del bloque de volteo, que redefine la grilla */
@media (max-width:980px){
.lineas{ grid-template-columns:repeat(2,1fr); gap:16px }
.tarjeta{ aspect-ratio:3/4.3 }
.cara{ padding:28px 24px }
.cara--frente h3{ font-size:1.42rem }
}
@media (max-width:620px){
.lineas{ grid-template-columns:1fr; gap:14px }
.tarjeta{ aspect-ratio:auto; min-height:330px }
.tarjeta-caras{ position:relative; inset:auto; min-height:330px }
.cara{ position:absolute }
}
/* ---------- Acceso al monedero y cambio de tema, en la barra superior ---------- */
.barra-monedero{
display:inline-flex; align-items:center; gap:8px;
border:1px solid rgba(255,255,255,.24); border-radius:100px; padding:5px 14px 5px 11px;
color:rgba(255,255,255,.86) !important; font-weight:600;
transition:background .3s var(--curva), border-color .3s var(--curva);
}
.barra-monedero svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7 }
.barra-monedero:hover{ background:var(--amarillo); border-color:var(--amarillo); color:#101820 !important }
.tema{
display:inline-flex; align-items:center; gap:8px; background:transparent; border:0;
padding:5px 0; cursor:pointer; color:rgba(255,255,255,.62); font:inherit;
font-size:12px; transition:color .3s var(--curva);
}
.tema:hover{ color:#fff }
.tema svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round }
.tema-luna{ display:none }
[data-theme="dark"] .tema-sol{ display:none }
[data-theme="dark"] .tema-luna{ display:inline }
@media (max-width:760px){ .tema-texto{ display:none } }
/* =========================================================================
ICONOGRAFÍA PROPIA
Set dibujado a medida: aves y cocina, trazo de 1,6 y esquinas redondeadas.
Un solo sprite en el documento, reutilizado con