:root{
--paper:#efe2bc;
--paper-2:#f7eccd;
--green:#0b5b42;
--green-dark:#063d2d;
--yellow:#f2ca2c;
--yellow-soft:#f7d949;
--ink:#141410;
--white:#ffffff;
--red:#b8341f;
--ink-90:rgba(20,20,16,.9);
--ink-95:rgba(20,20,16,.95);
--ink-60:rgba(20,20,16,.6);
--ink-18:rgba(20,20,16,.18);
--wash:rgba(255,255,255,.45);
--wash-soft:rgba(255,255,255,.22);
--line:3px solid var(--ink);
--line-thin:2px solid var(--ink);
--line-thick:4px solid var(--ink);
--dash:2px dashed var(--ink-60);
--radius:0px;
--radius-pill:999px;
--shadow-sm:4px 4px 0 var(--ink-95);
--shadow:8px 8px 0 var(--ink-95);
--shadow-lg:12px 12px 0 var(--ink-95);
--shadow-green:10px 10px 0 var(--green), 14px 14px 0 var(--ink-90);
--font-display:Georgia, 'Times New Roman', 'Nimbus Roman', serif;
--font-label:Arial, Helvetica, 'Liberation Sans', sans-serif;
--font-body:Georgia, 'Times New Roman', 'Nimbus Roman', serif;
--fs-display-xl:clamp(3rem, 8vw, 7.25rem);
--fs-display-lg:clamp(2rem, 4.6vw, 4.4rem);
--fs-display-md:clamp(2rem, 4.4vw, 3.5rem);
--fs-display-sm:clamp(1.5rem, 3vw, 2.25rem);
--fs-section-title:var(--fs-display-md);
--fs-copy:clamp(1rem, 1.1vw, 1.1rem);
--fs-lead:var(--fs-copy);
--fs-body:var(--fs-copy);
--fs-label:.78rem;
--fs-label-sm:.7rem;
--tracking-label:.12em;
--tracking-display:-.045em;
--space-2xs:4px;
--space-xs:8px;
--space-sm:14px;
--space-md:22px;
--space-lg:36px;
--space-xl:56px;
--space-2xl:clamp(46px, 5.5vw, 76px);
--gutter:clamp(20px, 3vw, 46px);
--measure:68ch;
--container:1460px;
--frame-gap:14px;
--frame-width:min(var(--container), calc(100% - var(--frame-gap) * 2));
--dur-press:.1s;
--dur-fast:.18s;
--dur:.32s;
--dur-slow:.55s;
--ease-out:cubic-bezier(.22,1,.36,1);
--ease-pop:cubic-bezier(.34,1.56,.64,1);
--ease-inout:cubic-bezier(.4,0,.2,1);
--z-rays:0;
--z-content:1;
--z-header:40;
--z-navpanel:50;
--z-audio:60;
--z-grain:99;
--z-skip:100;
}
@property --rayos-giro{
syntax:'<angle>';
inherits:false;
initial-value:-7deg;
}
@media (max-width:640px){
:root{
--frame-gap:8px;
--gutter:14px;
}
}
*,*::before,*::after{box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:clamp(96px, 14vh, 140px);
-webkit-text-size-adjust:100%;
}
body{
margin:0;
min-height:100vh;
color:var(--ink);
font-family:var(--font-body);
font-size:var(--fs-body);
line-height:1.55;
background:
linear-gradient(180deg, rgba(255,255,255,.32), rgba(0,0,0,.02)),
var(--paper);
overflow-x:hidden;
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
opacity:.16;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
z-index:var(--z-grain);
}
img,picture,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
a:not([class]){
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:3px;
text-decoration-color:var(--green);
}
a:not([class]):hover{text-decoration-color:var(--ink)}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.05}
p{margin:0 0 var(--space-md)}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
hr{border:0;border-top:var(--line);margin:var(--space-lg) 0}
strong,b{font-weight:800}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{
outline:3px solid var(--ink);
outline-offset:3px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.section--green :focus-visible{
outline-color:var(--yellow);
}
.skip-link{
position:absolute;
left:var(--space-sm);
top:-100px;
z-index:var(--z-skip);
padding:12px 18px;
background:var(--yellow);
color:var(--ink);
border:var(--line);
box-shadow:var(--shadow-sm);
font-family:var(--font-label);
font-weight:900;
font-size:var(--fs-label);
letter-spacing:var(--tracking-label);
text-transform:uppercase;
transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:var(--space-sm)}
.page{
position:relative;
display:flex;
flex-direction:column;
min-height:calc(100vh - var(--frame-gap) * 2);
width:var(--frame-width);
margin:var(--frame-gap) auto;
background:rgba(247,236,205,.78);
border:5px solid var(--green-dark);
outline:2px solid var(--yellow);
outline-offset:-10px;
box-shadow:0 0 0 2px var(--ink), 16px 16px 0 rgba(20,20,16,.15);
overflow:clip;
}
.page::after{
content:"";
position:absolute;
inset:12px;
border:var(--dash);
border-color:rgba(6,61,45,.6);
pointer-events:none;
opacity:.55;
z-index:var(--z-content);
}
.rays{
display:none;
}
main{position:relative;z-index:var(--z-content);flex:1 0 auto}
.visually-hidden{
position:absolute!important;
width:1px;height:1px;
margin:-1px;padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
}
.lead{
max-width:var(--measure);
font-size:var(--fs-lead);
font-weight:700;
line-height:1.5;
}
.prose{max-width:var(--measure)}
.prose h3{
margin:var(--space-lg) 0 var(--space-sm);
color:var(--green-dark);
font-size:var(--fs-display-sm);
text-transform:uppercase;
letter-spacing:-.02em;
}
.prose ul{margin:0 0 var(--space-md);padding-left:1.2em;list-style:square}
.prose li{margin-bottom:var(--space-xs)}
@media (max-width:720px){
:root{--frame-gap:6px}
.page{border-width:4px}
.page::after{inset:8px}
}
.site-header{
position:sticky;
top:0;
z-index:var(--z-header);
background:var(--green);
border-bottom:var(--line-thick);
color:var(--paper-2);
}
.site-header::before{
content:"";
position:absolute;
inset:0;
opacity:.12;
background:repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.16) 11px 14px);
pointer-events:none;
}
.site-header__inner{
position:relative;
z-index:1;
display:flex;
align-items:center;
gap:var(--space-md);
padding:12px var(--gutter);
}
.brand{flex:0 0 auto;display:block}
.brand img{
width:clamp(132px, 15vw, 210px);
height:auto;
}
.site-nav{margin-left:auto}
.site-nav__list{
display:flex;
align-items:center;
gap:clamp(10px, 1.8vw, 26px);
list-style:none;
}
.nav-link{
position:relative;
display:block;
padding:8px 2px 6px;
font-family:var(--font-label);
font-size:var(--fs-label);
font-weight:900;
letter-spacing:var(--tracking-label);
text-transform:uppercase;
color:var(--paper-2);
}
.nav-link::after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:4px;
background:var(--yellow);
transform:scaleX(0);
transform-origin:left center;
transition:transform var(--dur) var(--ease-out);
}
.nav-link:hover::after,
.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-link.is-active{color:var(--yellow)}
.nav-link.is-active::after{transform:scaleX(1)}
.site-header__cta{flex:0 0 auto}
.nav-toggle{
display:none;
align-items:center;
gap:10px;
margin-left:auto;
padding:10px 14px;
background:var(--yellow);
color:var(--ink);
border:var(--line);
box-shadow:var(--shadow-sm);
font-family:var(--font-label);
font-size:var(--fs-label);
font-weight:1000;
letter-spacing:var(--tracking-label);
text-transform:uppercase;
cursor:pointer;
}
.nav-toggle__bars{display:grid;gap:3px;width:20px}
.nav-toggle__bars i{display:block;height:3px;background:var(--ink);transition:transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-panel{
position:relative;
z-index:var(--z-navpanel);
display:grid;
gap:var(--space-md);
padding:var(--space-md) var(--gutter) var(--space-lg);
background:var(--paper-2);
color:var(--ink);
border-top:var(--line-thick);
border-bottom:var(--line-thick);
}
.nav-panel[hidden]{display:none}
@media (prefers-reduced-motion: no-preference){
.js .nav-panel{
transform-origin:top right;
transition:
opacity .22s var(--ease-out),
transform .28s var(--ease-out);
}
.js .nav-panel.is-cerrando,
.js .nav-panel:not(.is-abierto){
opacity:0;
transform:translate3d(0,-10px,0) scaleY(.94);
}
.js .nav-panel.is-abierto{
opacity:1;
transform:none;
}
}
.nav-panel__list{list-style:none;display:grid;gap:2px}
.nav-panel__list a{
display:block;
padding:16px 14px;
min-height:56px;
border:var(--line-thin);
background:var(--wash);
font-family:var(--font-label);
font-size:1rem;
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
}
.nav-panel__list a.is-active{
background:var(--yellow);
box-shadow:inset 4px 0 0 var(--green);
}
.nav-panel__cta{width:100%}
.nav-panel__contact{
display:grid;
gap:6px;
font-family:var(--font-label);
font-size:var(--fs-label);
font-weight:800;
letter-spacing:.04em;
}
.nav-panel__contact a{text-decoration:underline;text-underline-offset:3px}
.ticker{
position:relative;
z-index:calc(var(--z-header) - 1);
overflow:hidden;
background:var(--yellow);
color:var(--ink);
border-bottom:var(--line-thick);
box-shadow:inset 0 -3px 0 var(--green);
padding:9px 0 10px;
font-family:var(--font-label);
font-size:.74rem;
font-weight:900;
letter-spacing:.18em;
text-transform:uppercase;
white-space:nowrap;
}
.ticker{
touch-action:pan-y;
cursor:grab;
user-select:none;
-webkit-user-select:none;
}
.ticker.is-arrastrando{cursor:grabbing}
.ticker__track{display:inline-flex;width:max-content}
.ticker__seq{display:inline-block;padding-right:.5em}
.ticker b{color:var(--green);font-weight:900;margin:0 .35em}
.site-footer{
position:relative;
z-index:var(--z-content);
background:var(--green-dark);
color:var(--paper-2);
border-top:var(--line-thick);
}
.site-footer::before{
content:"";
position:absolute;
inset:0;
opacity:.1;
background:repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.16) 11px 14px);
pointer-events:none;
}
.site-footer__top{
position:relative;
display:grid;
grid-template-columns:minmax(220px, 1.15fr) repeat(4, minmax(120px, 1fr));
gap:var(--space-lg);
padding:var(--space-xl) var(--gutter) var(--space-lg);
align-items:start;
}
.site-footer__brand img{width:min(240px, 70%)}
.site-footer__claim{
margin:var(--space-sm) 0 4px;
color:var(--yellow);
font-size:1.15rem;
font-style:italic;
}
.site-footer__origin{
margin:0;
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:900;
letter-spacing:var(--tracking-label);
text-transform:uppercase;
opacity:.85;
}
.site-footer__col h2{
margin:0 0 var(--space-sm);
color:var(--yellow);
font-family:var(--font-label);
font-size:var(--fs-label);
font-weight:1000;
letter-spacing:var(--tracking-label);
text-transform:uppercase;
}
.site-footer__subhead{margin-top:var(--space-md)!important}
.site-footer__col ul{list-style:none;display:grid;gap:10px}
.site-footer__col a{
display:inline-block;
padding:2px 0;
border-bottom:2px solid transparent;
font-family:var(--font-label);
font-size:.85rem;
font-weight:700;
transition:border-color var(--dur-fast) var(--ease-out);
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible{border-bottom-color:var(--yellow)}
.site-footer__bottom{
position:relative;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:var(--space-sm);
padding:var(--space-md) var(--gutter);
border-top:2px solid rgba(247,236,205,.25);
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:900;
letter-spacing:.1em;
text-transform:uppercase;
}
.site-footer__bottom p{margin:0}
.site-footer__adults{color:var(--yellow)}
.breadcrumbs{
padding:var(--space-sm) var(--gutter) 0;
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.breadcrumbs li+li::before{content:"›";margin-right:8px;color:var(--green)}
.breadcrumbs a{border-bottom:2px solid var(--green)}
.breadcrumbs [aria-current]{opacity:.7}
@media (max-width:1080px){
.site-header .site-header__cta{display:none}
.site-nav{display:none}
.site-header .nav-toggle{display:inline-flex}
.site-footer__top{grid-template-columns:repeat(2, minmax(0,1fr))}
.site-footer__brand{grid-column:1 / -1}
}
@media (max-width:640px){
.site-footer__col a,
.nav-panel__contact a,
.breadcrumbs a,
.form-aside p a,
.faq a,
.legal-body dd a{
display:inline-block;
padding-block:12px;
}
.site-footer__col ul{gap:0}
.brand{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:640px){
.site-footer__top{
grid-template-columns:repeat(2, minmax(0,1fr));
gap:var(--space-md);
padding-block:var(--space-md);
}
.site-footer__brand{grid-column:1 / -1}
.site-footer__brand img{width:clamp(96px, 26vw, 130px)}
.site-footer__bottom{
justify-content:center;
text-align:center;
padding-block:var(--space-sm);
gap:6px;
}
.ticker{font-size:.66rem;padding:8px 0;letter-spacing:.14em}
.brand img{width:clamp(120px, 34vw, 170px)}
}
.section{
position:relative;
z-index:var(--z-content);
padding:var(--space-2xl) 0;
border-bottom:var(--line-thick);
overflow:hidden;
}
@media (max-width:640px){
.section{padding-block:clamp(30px, 7vw, 38px)}
.section-head{margin-bottom:clamp(18px, 4vw, 26px)}
}
.section:last-of-type{border-bottom:0}
.section__inner{
position:relative;
z-index:1;
width:min(calc(var(--container) - 40px), calc(100% - var(--gutter) * 2));
margin-inline:auto;
}
.section--paper{background:rgba(247,236,205,.78)}
.section--yellow{background:var(--yellow);border-bottom-color:var(--ink)}
.section--green{background:var(--green);color:var(--paper-2)}
.section--green .display{color:var(--paper-2);text-shadow:3px 3px 0 var(--green-dark), 5px 5px 0 var(--ink-95)}
.section--green .display__alt{color:var(--yellow);text-shadow:3px 3px 0 var(--green-dark), 5px 5px 0 var(--ink-95)}
.section--ink{background:var(--ink);color:var(--paper-2)}
.section--halftone{
background-color:rgba(247,236,205,.9);
background-image:radial-gradient(circle at center, rgba(6,61,45,.16) 0 1.8px, transparent 2.2px);
background-size:12px 12px;
}
.section--act::before,
.section--cta::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:repeating-conic-gradient(
from var(--rayos-giro, -7deg) at 50% 50%,
rgba(6,61,45,.1) 0 8deg,
transparent 8deg 17deg
);
}
.section--cta::before{
background:repeating-conic-gradient(
from var(--rayos-giro, -7deg) at 50% 50%,
rgba(242,202,44,.11) 0 8deg,
transparent 8deg 17deg
);
}
.section--technical{
background-color:rgba(247,236,205,.94);
background-image:
linear-gradient(rgba(6,61,45,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(6,61,45,.045) 1px, transparent 1px);
background-size:48px 48px;
}
.eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
margin:0 0 var(--space-md);
padding:9px 16px 8px;
border:var(--line);
background:var(--yellow);
color:var(--ink);
box-shadow:var(--shadow-sm);
font-family:var(--font-label);
font-weight:1000;
font-size:.8rem;
letter-spacing:.14em;
text-transform:uppercase;
}
.eyebrow::before,
.eyebrow::after{
content:"";
width:9px;height:9px;
border-radius:var(--radius-pill);
background:var(--green);
border:2px solid var(--ink);
}
.eyebrow::after{background:var(--yellow)}
.eyebrow--plain::before,
.eyebrow--plain::after{display:none}
.display{
margin:0 0 var(--space-lg);
color:var(--green-dark);
font-family:var(--font-display);
font-size:var(--fs-display-lg);
line-height:.98;
letter-spacing:var(--tracking-display);
text-transform:uppercase;
text-shadow:3px 3px 0 var(--yellow), 5px 5px 0 var(--ink-95);
}
.display--xl{font-size:var(--fs-display-xl);line-height:.94}
.display--hero{
font-size:clamp(3rem, 10.4vw, 9.5rem);
line-height:.9;
letter-spacing:-.05em;
margin-bottom:0;
padding-inline:clamp(0px, 1.5vw, 24px);
}
.display--md{font-size:var(--fs-display-md)}
.display--sm{font-size:var(--fs-display-sm);text-shadow:2px 2px 0 var(--yellow), 3px 3px 0 var(--ink-95)}
.section .display{
font-size:var(--fs-section-title);
line-height:.94;
}
.display__alt{
display:block;
color:var(--yellow);
text-shadow:3px 3px 0 var(--green), 5px 5px 0 var(--ink-95);
}
.display__tail{display:block}
.display--sm .display__alt{text-shadow:2px 2px 0 var(--green), 3px 3px 0 var(--ink-95)}
.section-head{margin-bottom:clamp(30px, 4vw, 48px);max-width:var(--measure)}
.section-head--center{max-width:60ch;margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .lead{margin-inline:auto}
@media (min-width:1000px){
.section-head--ancho{max-width:none}
}
.section-head--fila,
.section-head--ancho{margin-bottom:clamp(20px, 2.2vw, 30px)}
@media (min-width:1000px){
.section-head--fila{
max-width:none;
display:grid;
grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
column-gap:var(--space-xl);
align-items:end;
}
.section-head--fila > .eyebrow{grid-column:1;grid-row:1;justify-self:start}
.section-head--fila > .display{grid-column:1;grid-row:2;margin-bottom:0}
.section-head--fila > .lead{
grid-column:2;
grid-row:2;
align-self:end;
margin-bottom:0;
max-width:60ch;
}
}
.btn{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
min-height:52px;
padding:13px 22px;
border:var(--line);
box-shadow:var(--shadow-sm);
font-family:var(--font-label);
font-weight:1000;
font-size:.95rem;
letter-spacing:.1em;
text-transform:uppercase;
text-align:center;
cursor:pointer;
overflow:hidden;
transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn::before{
content:"";
flex:0 0 auto;
width:12px;height:12px;
border-radius:var(--radius-pill);
background:var(--yellow);
border:2px solid currentColor;
}
.btn:hover,
.btn:focus-visible{
transform:translate(2px,2px);
box-shadow:2px 2px 0 var(--ink-95);
}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink-95)}
.btn--green{background:var(--green);color:var(--paper-2)}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--yellow::before{background:var(--green);border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:none;border-style:solid}
.btn--ghost::before{background:var(--green)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--wash);box-shadow:var(--shadow-sm);transform:translate(0,0)}
.section--green .btn--ghost{color:var(--paper-2);border-color:var(--paper-2)}
.section--green .btn--ghost::before{background:var(--yellow);border-color:var(--paper-2)}
.section--green .btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--sm{min-height:44px;padding:10px 15px;font-size:.78rem;box-shadow:3px 3px 0 var(--ink-95)}
.btn--sm::before{width:9px;height:9px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}
.panel{
position:relative;
--panel-pad:clamp(22px, 2vw, 30px);
padding:var(--panel-pad);
background:var(--paper-2);
border:var(--line);
box-shadow:var(--shadow);
}
.panel::after{
content:"";
position:absolute;
inset:9px;
border:var(--dash);
pointer-events:none;
opacity:.45;
}
.panel--yellow{background:var(--yellow)}
.panel--green{background:var(--green);color:var(--paper-2)}
.panel--green::after{border-color:rgba(247,236,205,.5)}
.panel--flat{box-shadow:var(--shadow-sm)}
.panel > *{position:relative;z-index:1}
.tag{
display:inline-block;
max-width:100%;
margin:0 6px 12px 0;
padding:6px 10px;
border:var(--line-thin);
background:var(--wash);
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:1000;
letter-spacing:.1em;
line-height:1.15;
text-transform:uppercase;
}
.tag--green{background:var(--green);color:var(--paper-2);border-color:var(--ink)}
.tag--yellow{background:var(--yellow)}
.pending{
display:inline-block;
padding:3px 8px;
background:repeating-linear-gradient(45deg, var(--yellow) 0 6px, var(--yellow-soft) 6px 12px);
border:2px dashed var(--ink);
font-family:var(--font-label);
font-size:.68rem;
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
}
.facts{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0 0 var(--space-lg);
list-style:none;
font-family:var(--font-label);
font-size:var(--fs-label);
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
}
.facts li{
padding:8px 11px;
border:var(--line-thin);
background:var(--wash);
transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.facts li:hover{transform:translateY(-3px) rotate(-1deg);background:rgba(242,202,44,.35)}
.bubble{
position:relative;
max-width:34ch;
margin:0;
padding:18px 20px;
background:var(--paper-2);
border:var(--line-thick);
box-shadow:var(--shadow-sm);
font-family:var(--font-label);
font-weight:1000;
font-size:clamp(1rem, 1.6vw, 1.3rem);
line-height:1.25;
letter-spacing:.02em;
text-transform:uppercase;
}
.bubble::after,
.bubble::before{
content:"";
position:absolute;
bottom:-24px;
left:36px;
border:12px solid transparent;
border-top-color:var(--ink);
}
.bubble::before{bottom:-19px;border-top-color:var(--paper-2);z-index:1}
.divider{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin:var(--space-xl) 0;
color:var(--green);
font-size:1.1rem;
}
.divider::before,
.divider::after{
content:"";
flex:1;
height:0;
border-top:var(--dash);
}
.grid{display:grid;gap:var(--space-lg)}
.grid--2{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.grid--3{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.grid--4{grid-template-columns:repeat(auto-fit, minmax(210px, 1fr))}
.step{
min-height:190px;
padding-top:78px;
}
.step__num{
position:absolute;
top:20px;left:20px;
z-index:2;
display:grid;
place-items:center;
width:52px;height:52px;
background:var(--yellow);
border:var(--line);
box-shadow:var(--shadow-sm);
font-family:var(--font-label);
font-size:1.15rem;
font-weight:1000;
}
.step__title{
margin-bottom:var(--space-xs);
color:var(--green-dark);
font-size:1.3rem;
text-transform:uppercase;
letter-spacing:-.01em;
}
.step__text{margin:0;font-size:1rem}
.feature__title{
margin-bottom:var(--space-xs);
color:var(--green-dark);
font-size:1.35rem;
text-transform:uppercase;
letter-spacing:-.015em;
}
.panel--green .feature__title{color:var(--yellow)}
.feature__text{margin:0}
.registro{
list-style:none;
margin:0;
padding:0;
background:var(--paper-2);
border:var(--line);
box-shadow:var(--shadow);
}
.registro__fila{
display:grid;
grid-template-columns:235px minmax(190px, 250px) minmax(0, 1fr);
gap:var(--space-sm) var(--space-md);
align-items:start;
padding:var(--space-sm) clamp(18px, 1.8vw, 26px);
border-bottom:var(--dash);
}
.registro__fila:last-child{border-bottom:0}
.registro__fila:hover{background:var(--wash-soft)}
.registro__marca{
margin:0;
align-self:start;
justify-self:start;
background:var(--yellow);
}
.registro__titulo{
margin:0;
color:var(--green-dark);
font-family:var(--font-display);
font-size:var(--fs-copy);
font-weight:700;
line-height:1.25;
text-transform:uppercase;
letter-spacing:.01em;
}
.registro__texto{margin:0}
@media (max-width:900px){
.registro__fila{
grid-template-columns:1fr;
gap:var(--space-xs);
padding:var(--space-md) var(--space-md);
}
.registro__marca{margin-bottom:2px}
}
@media (max-width:640px){
.registro__fila{
gap:4px;
padding:var(--space-sm) var(--space-md);
}
.registro__marca{margin-bottom:2px}
}
.product{
position:relative;
display:grid;
min-width:0;
background:var(--paper-2);
border:var(--line-thick);
box-shadow:var(--shadow);
}
.product__plate{
position:relative;
isolation:isolate;
overflow:hidden;
min-height:clamp(300px, 64vw, 360px);
background:#f4f3ed;
border-bottom:var(--line);
}
.product__plate::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
opacity:.12;
mix-blend-mode:multiply;
background:
linear-gradient(90deg, transparent 0 49%, rgba(20,20,16,.08) 50%, transparent 51%),
repeating-linear-gradient(0deg, rgba(20,20,16,.08) 0 1px, transparent 1px 5px);
}
.product__img{
position:absolute;
inset:46px 12px 66px;
width:calc(100% - 24px);
height:calc(100% - 112px);
object-fit:contain;
object-position:center;
transform:scale(var(--img-scale, 1));
mix-blend-mode:multiply;
filter:brightness(1.07) contrast(1.045) saturate(1.05);
}
.product[data-product="display-x20"]{--img-scale:1.06}
.product[data-product="display-x50"]{--img-scale:1.26}
.product__img--placeholder{
display:grid;
place-items:center;
gap:10px;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 10px, transparent 10px 20px),
var(--yellow);
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:1000;
letter-spacing:.1em;
text-transform:uppercase;
}
.product__img--placeholder img{width:74px;height:auto;opacity:.85}
.product__ref{
position:absolute;
top:12px;
left:18px;
z-index:2;
color:var(--green-dark);
font-family:var(--font-display);
font-size:clamp(2.2rem, 3.4vw, 3.1rem);
font-weight:900;
line-height:1;
text-shadow:2px 2px 0 var(--yellow);
}
.product__stamp{
position:absolute;
bottom:16px;
left:50%;
z-index:2;
max-width:calc(100% - 40px);
padding:9px 16px;
border:var(--line-thin);
background:var(--yellow);
box-shadow:3px 3px 0 var(--ink-95);
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:1000;
letter-spacing:.11em;
line-height:1.2;
text-align:center;
text-transform:uppercase;
transform:translateX(-50%) rotate(-1deg);
}
.product__body{
display:flex;
flex-direction:column;
min-width:0;
padding:clamp(20px, 2.2vw, 32px);
}
.product__body > .tag{align-self:flex-start}
.product__name{
margin:0 0 10px;
color:var(--green-dark);
font-size:clamp(1.7rem, 2.5vw, 2.4rem);
line-height:.95;
letter-spacing:-.03em;
text-transform:uppercase;
text-shadow:2px 2px 0 var(--yellow);
scroll-margin-top:140px;
}
.product__summary{
margin:0 0 var(--space-md);
padding-bottom:var(--space-md);
border-bottom:var(--dash);
font-weight:700;
}
.product__desc{margin:0 0 var(--space-md);font-size:.98rem}
.product__specs{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:2px;
margin:0 0 var(--space-lg);
padding:2px;
background:var(--paper-2);
}
.product__spec{
padding:11px 13px;
box-shadow:0 0 0 2px var(--ink);
}
.product__spec--material,
.product__spec--colores{grid-column:1 / -1}
.product__specs dt{
color:var(--green);
font-family:var(--font-label);
font-size:.66rem;
font-weight:1000;
letter-spacing:.12em;
text-transform:uppercase;
}
.product__specs dd{margin:5px 0 0;font-weight:800;font-size:.95rem;line-height:1.32}
.product__features{
margin:0 0 var(--space-md);
padding-left:1.1em;
list-style:square;
font-size:.95rem;
}
.product__features li{margin-bottom:6px}
.product__actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:auto;
}
@media (min-width:900px){
.product{grid-template-columns:minmax(0, 46%) minmax(0, 1fr)}
.product__plate{
min-height:clamp(360px, 29vw, 440px);
border-right:var(--line);
border-bottom:0;
}
}
.cta-block{
display:grid;
grid-template-columns:minmax(0, 2fr) minmax(260px, 1fr);
gap:clamp(var(--space-lg), 6vw, 96px);
align-items:center;
}
.cta-block__text{
min-width:0;
max-width:780px;
}
.cta-block__actions{
display:grid;
gap:var(--space-sm);
width:min(100%, 360px);
justify-self:end;
}
.cta-block__actions .btn{
width:100%;
justify-content:center;
}
@media (max-width:900px){
.cta-block{grid-template-columns:1fr}
.cta-block__actions{
width:100%;
justify-self:stretch;
}
}
.faq{display:grid;gap:var(--space-sm)}
.faq__item{
border:var(--line);
background:var(--paper-2);
box-shadow:var(--shadow-sm);
}
.faq__item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-sm);
padding:18px 20px;
min-height:60px;
cursor:pointer;
font-family:var(--font-label);
font-size:.95rem;
font-weight:1000;
letter-spacing:.04em;
text-transform:uppercase;
list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
content:"+";
flex:0 0 auto;
display:grid;
place-items:center;
width:30px;height:30px;
background:var(--yellow);
border:var(--line-thin);
font-size:1.2rem;
line-height:1;
}
.faq__item[open] summary::after{content:"–"}
.faq__item[open] summary{background:var(--yellow);border-bottom:var(--line-thin)}
.faq__answer{padding:18px 20px}
.faq__answer p:last-child{margin-bottom:0}
.draft-notice{
margin:0 0 var(--space-lg);
padding:16px 18px;
border:3px dashed var(--ink);
background:repeating-linear-gradient(45deg, rgba(242,202,44,.55) 0 10px, rgba(247,217,73,.55) 10px 20px);
font-family:var(--font-label);
font-size:.9rem;
font-weight:700;
letter-spacing:.02em;
}
.form{display:grid;gap:var(--space-md)}
.form__grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
gap:var(--space-sm) var(--space-md);
}
.field{display:grid;gap:6px}
.field--full{grid-column:1 / -1}
.field label{
font-family:var(--font-label);
font-size:var(--fs-label);
font-weight:1000;
letter-spacing:.1em;
text-transform:uppercase;
}
.field .req{color:var(--green);margin-left:2px}
.field .hint{
font-family:var(--font-label);
font-size:.72rem;
font-weight:700;
opacity:.75;
letter-spacing:.02em;
text-transform:none;
}
.field input,
.field select,
.field textarea{
width:100%;
min-height:52px;
padding:13px 14px;
background:var(--paper-2);
border:var(--line);
border-radius:var(--radius);
font-family:var(--font-label);
font-size:1rem;
font-weight:700;
color:var(--ink);
transition:box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.5}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 22px, calc(100% - 13px) 22px;background-size:7px 7px;background-repeat:no-repeat;padding-right:44px}
.field input:hover,.field select:hover,.field textarea:hover{background:var(--white)}
.field input:focus,.field select:focus,.field textarea:focus{
outline:3px solid var(--ink);
outline-offset:2px;
background:var(--white);
box-shadow:var(--shadow-sm);
}
.field--invalid input,
.field--invalid select,
.field--invalid textarea{
border-color:var(--red);
background:rgba(184,52,31,.07);
}
.field__error{
display:none;
align-items:center;
gap:8px;
color:var(--red);
font-family:var(--font-label);
font-size:.78rem;
font-weight:1000;
letter-spacing:.02em;
}
.field__error::before{content:"✕";font-size:.9rem}
.field--invalid .field__error{display:flex}
.field--check{
grid-column:1 / -1;
display:grid;
grid-template-columns:auto minmax(0, 1fr);
gap:12px;
align-items:start;
padding:14px 16px;
border:var(--line-thin);
background:var(--wash);
}
.field--check input{
width:26px;height:26px;
min-height:0;
margin:0;
padding:0;
accent-color:var(--green);
cursor:pointer;
}
.field--check label{
font-family:var(--font-body);
font-size:.92rem;
font-weight:700;
letter-spacing:normal;
text-transform:none;
line-height:1.45;
cursor:pointer;
}
.field--check .field__error{grid-column:1 / -1}
.hp{
position:absolute!important;
left:-9999px;
width:1px;height:1px;
opacity:0;
pointer-events:none;
}
.form__status{
display:none;
padding:16px 18px;
border:var(--line);
box-shadow:var(--shadow-sm);
font-family:var(--font-label);
font-size:.95rem;
font-weight:800;
line-height:1.45;
}
.form__status.is-visible{display:block}
.form__status--ok{background:var(--green);color:var(--paper-2)}
.form__status--ok::before{content:"✓ ";font-weight:1000}
.form__status--error{background:var(--yellow);color:var(--ink)}
.form__status--error::before{content:"! ";font-weight:1000}
.form__status a{text-decoration:underline;text-underline-offset:3px}
.form button[type="submit"][aria-busy="true"]{opacity:.75;cursor:progress}
.audio-btn{
position:fixed;
right:var(--frame-gap);
bottom:calc(var(--frame-gap) + 16px);
z-index:var(--z-audio);
width:50px;height:50px;
display:grid;
place-items:center;
border-radius:var(--radius-pill);
border:var(--line);
background:var(--yellow);
color:var(--ink);
font-size:1.5rem;
line-height:1;
cursor:pointer;
box-shadow:var(--shadow-sm);
transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.audio-btn:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--ink-90)}
.audio-btn.is-playing{background:var(--green);color:var(--paper-2)}
@media (max-width:720px){
.audio-btn{
right:var(--frame-gap);
bottom:calc(var(--frame-gap) + 10px);
width:44px;
height:44px;
font-size:1.15rem;
}
.btn{width:100%}
.btn--sm{width:auto}
.btn-row{gap:10px}
}
.form__aviso{
margin:calc(var(--space-sm) * -1) 0 var(--space-md);
border:var(--line-thin);
background:var(--wash);
font-size:.82rem;
}
.form__aviso > summary{
padding:10px 14px;
cursor:pointer;
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
}
.form__aviso[open] > summary{border-bottom:var(--dash)}
.form__aviso dl{
display:grid;
grid-template-columns:auto minmax(0, 1fr);
gap:6px 14px;
margin:0;
padding:12px 14px;
}
.form__aviso dt{
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:1000;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--green-dark);
}
.form__aviso dd{margin:0}
@media (max-width:640px){
.form__aviso dl{grid-template-columns:1fr;gap:2px}
.form__aviso dd{margin-bottom:8px}
}
.mt-md{margin-top:var(--space-md)}
.mt-lg{margin-top:var(--space-lg)}
.mt-xl{margin-top:var(--space-xl)}
.m-0{margin:0}
.mi-auto{margin-inline:auto}
.jc-center{justify-content:center}
.gap-xl{gap:var(--space-xl)}
.gap-2xl{gap:var(--space-2xl)}
.feature__title--yellow{color:var(--yellow)}
.hint--label{font-family:var(--font-label);font-size:.75rem}
.hero{
position:relative;
z-index:var(--z-content);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px, 440px);
align-items:start;
gap:clamp(20px, 2.4vw, 34px);
padding:clamp(28px, 4vw, 56px) var(--gutter) clamp(40px, 6vw, 88px);
border-bottom:var(--line-thick);
overflow:hidden;
background:rgba(247,236,205,.7);
}
.hero::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:repeating-conic-gradient(
from var(--rayos-giro, -7deg) at 50% 50%,
rgba(6,61,45,.11) 0 8deg,
transparent 8deg 17deg
);
}
.hero__top{
grid-column:1 / -1;
position:relative;
z-index:1;
display:grid;
justify-items:center;
text-align:center;
margin-bottom:0;
}
.hero__copy{position:relative;z-index:1}
.hero__sub{margin-bottom:var(--space-sm)}
.hero__media{position:relative;z-index:1;display:grid;place-items:center}
.hero__scroll{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:var(--space-lg);
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:1000;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--green-dark);
}
.hero__scroll::after{
content:"↓";
display:grid;
place-items:center;
width:30px;height:30px;
border:var(--line-thin);
background:var(--yellow);
}
@media (max-width:1100px){
.hero{grid-template-columns:1fr;text-align:center;padding-top:var(--space-lg)}
.hero__top{margin-bottom:0}
.hero__media{order:-1}
.hero .eyebrow,.hero .facts,.hero .btn-row,.hero__scroll{justify-content:center}
.hero .lead{margin-inline:auto}
.hero .facts{justify-content:center}
}
.split{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:clamp(28px, 5vw, 72px);
align-items:center;
}
.split--reverse > :first-child{order:2}
@media (max-width:760px){
.split--reverse > :first-child{order:0}
}
@media (min-width:901px){
.split--object{
grid-template-columns:minmax(0, 1.24fr) minmax(250px, .76fr);
align-items:start;
}
}
.section--intro{padding-top:clamp(20px, 2.4vw, 34px)}
.section--intro .display{font-size:clamp(2.3rem, 5.4vw, 5.2rem)}
.caja{
position:relative;
display:grid;
justify-items:center;
padding-bottom:30px;
}
@media (max-width:900px){
.caja{margin-top:clamp(46px, 12vw, 72px)}
}
.caja__pieza{
position:relative;
z-index:1;
width:min(100%, 400px);
transform-origin:50% 100%;
}
.caja__img{display:block;width:100%;height:auto}
.caja__suelo{
position:absolute;
bottom:14px;
left:50%;
z-index:0;
width:min(64%, 268px);
height:20px;
translate:-50% 0;
border-radius:50%;
background:rgba(20,20,16,.15);
}
.story-section{padding-block:clamp(48px, 5vw, 64px)}
.story-intro{
display:grid;
grid-template-columns:1fr;
align-items:start;
gap:clamp(12px, 1.4vw, 18px);
width:100%;
}
.story-intro__heading .display{
max-width:none;
margin-bottom:0;
font-size:var(--fs-section-title);
line-height:.94;
}
.story-intro__heading .display__alt,
.story-intro__heading .display__tail{
display:inline;
white-space:normal;
}
.story-intro__heading .display__alt::before,
.story-intro__heading .display__tail::before{content:" "}
.story-intro__copy{max-width:92ch;padding-top:0}
.story-intro__copy .lead{max-width:78ch}
.story-intro__copy p{margin-bottom:clamp(12px, 1.4vw, 18px)}
.story-intro__copy p:last-of-type{margin-bottom:0}
.story-intro__copy .btn-row{margin-top:clamp(18px, 2vw, 24px)}
.story-process{
margin-top:clamp(26px, 3vw, 36px);
}
.story-process .section-head{margin-bottom:clamp(20px, 2.4vw, 28px)}
.process-head{
display:grid;
grid-template-columns:1fr;
align-items:start;
gap:clamp(10px, 1.2vw, 14px);
width:100%;
max-width:none;
}
.story-section .eyebrow{
gap:8px;
margin-bottom:var(--space-md);
padding:0 0 7px;
border:0;
border-bottom:4px solid var(--yellow);
background:transparent;
box-shadow:none;
font-size:.72rem;
}
.story-section .eyebrow::before{
width:8px;
height:8px;
border:0;
background:var(--green);
}
.story-section .eyebrow::after{display:none}
.process-head__title .eyebrow{margin-bottom:var(--space-sm)}
.process-head__title .display{margin-bottom:0}
.process-head__title .display__alt{display:inline}
.process-head__title .display__alt::before{content:" "}
.process-head .lead{max-width:72ch;margin:0}
.schematic{
position:relative;
width:min(100%, 1180px);
margin-inline:auto;
background:var(--paper-2);
border:var(--line-thick);
box-shadow:14px 14px 0 var(--ink-95);
}
.schematic::before{
content:"";
position:absolute;
z-index:-1;
inset:10px -10px -10px 10px;
border:4px solid var(--green);
background:var(--yellow);
}
.schematic::after{
content:"";
position:absolute;
inset:9px;
border:2px solid rgba(6,61,45,.48);
pointer-events:none;
}
.schematic__masthead{
position:relative;
z-index:2;
display:flex;
justify-content:space-between;
gap:var(--space-md);
padding:13px clamp(16px, 2.4vw, 30px) 11px;
background:var(--green);
color:var(--paper-2);
border-bottom:var(--line);
font-family:var(--font-label);
font-size:clamp(.61rem, 1vw, .76rem);
font-weight:1000;
letter-spacing:.14em;
line-height:1.2;
text-transform:uppercase;
}
.schematic__frame{
position:relative;
z-index:1;
padding:clamp(10px, 1.6vw, 22px);
}
.schematic__svg{width:100%;height:auto;display:block}
.schematic__svg-label,
.schematic__number{
font-family:Arial, Helvetica, sans-serif;
font-weight:1000;
letter-spacing:2px;
fill:var(--ink);
}
.schematic__svg-label{font-size:18px}
.schematic__number line{stroke:var(--ink);stroke-width:3}
.schematic__number circle{fill:var(--yellow);stroke:var(--ink);stroke-width:4}
.schematic__number text{font-size:18px;letter-spacing:0}
.schematic__footer{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
align-items:center;
gap:var(--space-md);
padding:14px clamp(16px, 2.4vw, 30px);
border-top:var(--line);
font-family:var(--font-label);
text-transform:uppercase;
}
.schematic__footer strong{
color:var(--green-dark);
font-size:clamp(.78rem, 1.25vw, 1rem);
letter-spacing:.09em;
}
.schematic__footer span{
text-align:right;
font-size:var(--fs-label-sm);
font-weight:900;
letter-spacing:.06em;
opacity:.76;
}
.flow-path{stroke-dasharray:18 12;stroke-dashoffset:0}
.flow-path--keyline{stroke-dasharray:none}
.airflow-demo{
width:100%;
margin:0;
}
.airflow-demo__stage{
position:relative;
aspect-ratio:1448 / 590;
overflow:hidden;
background:var(--paper-2);
border:var(--line-thick);
box-shadow:12px 12px 0 var(--ink-95);
isolation:isolate;
}
.airflow-demo__image{
position:absolute;
top:50%;
left:0;
display:block;
width:100%;
height:auto;
transform:translateY(-50%);
}
.airflow-demo__motion{
position:absolute;
z-index:2;
top:50%;
left:0;
display:block;
width:100%;
height:auto;
transform:translateY(-50%);
pointer-events:none;
mix-blend-mode:screen;
}
.airflow-sweep,
.airflow-thread{
fill:none;
stroke:url("#airflow-spectrum");
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
.airflow-sweep{
stroke-width:14;
stroke-dasharray:150 390;
opacity:.26;
filter:url("#airflow-glow");
}
.airflow-thread{
stroke-width:2.2;
stroke-dasharray:38 116;
opacity:.82;
filter:url("#airflow-glow");
}
.airflow-thread--2{stroke-dasharray:18 88;opacity:.62}
.airflow-thread--3{stroke-width:3;stroke-dasharray:52 142;opacity:.92}
.airflow-thread--4{stroke-dasharray:24 104;opacity:.72}
.airflow-thread--5{stroke-dasharray:12 74;opacity:.56}
.airflow-thread--6{stroke-width:1.5;stroke-dasharray:7 62;opacity:.48}
.airflow-thread--7{stroke-width:1.8;stroke-dasharray:30 82;opacity:.66}
.airflow-thread--8{stroke-width:2.6;stroke-dasharray:16 96;opacity:.74}
.airflow-thread--9{stroke-width:1.7;stroke-dasharray:44 126;opacity:.58}
.airflow-thread--10{stroke-width:1.35;stroke-dasharray:5 48;opacity:.42}
.airflow-thread--11{stroke-width:1.45;stroke-dasharray:22 112;opacity:.46}
.airflow-particles{opacity:.95}
.schematic-notes{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:clamp(18px, 2.5vw, 32px);
width:100%;
margin:clamp(24px, 3vw, 32px) auto 0;
padding:0;
list-style:none;
}
.schematic-notes li{
display:grid;
grid-template-columns:auto minmax(0, 1fr);
gap:12px;
padding-top:14px;
border-top:4px solid var(--ink);
}
.schematic-notes__num{
color:var(--green);
font-family:var(--font-display);
font-size:clamp(1.35rem, 2.2vw, 2rem);
font-weight:900;
line-height:.9;
}
.schematic-notes__num::after{content:" ·"}
.schematic-notes__tag{
display:block;
margin-bottom:7px;
font-family:var(--font-label);
font-size:.61rem;
font-weight:1000;
letter-spacing:.14em;
line-height:1;
text-transform:uppercase;
}
.schematic-notes h3{
margin:0 0 8px;
color:var(--green-dark);
font-family:var(--font-display);
font-size:clamp(1.05rem, 1.5vw, 1.28rem);
line-height:1;
text-transform:uppercase;
}
.schematic-notes p{margin:0;font-size:.9rem;line-height:1.4}
@media (max-width:900px){
.story-intro,
.process-head{grid-template-columns:1fr;gap:var(--space-md)}
.story-intro__copy{padding-top:0}
.process-head .lead{max-width:68ch}
.schematic-notes{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:560px){
.schematic{box-shadow:8px 8px 0 var(--ink-95)}
.schematic::before{inset:7px -7px -7px 7px;border-width:3px}
.schematic__masthead span:last-child{display:none}
.schematic__frame{padding:8px 5px}
.schematic__footer{grid-template-columns:1fr;gap:6px}
.schematic__footer span{text-align:left}
.schematic-notes{grid-template-columns:1fr}
.schematic__svg-label{font-size:20px}
.airflow-demo__stage{box-shadow:7px 7px 0 var(--ink-95)}
}
.timeline{
position:relative;
display:grid;
gap:var(--space-xl);
padding-left:46px;
list-style:none;
}
.timeline::before{
content:"";
position:absolute;
left:15px;top:8px;bottom:8px;
width:0;
border-left:3px dashed var(--green);
}
.timeline__item{position:relative}
.timeline__item::before{
content:"";
position:absolute;
left:-46px;top:6px;
width:32px;height:32px;
border-radius:var(--radius-pill);
background:var(--yellow);
border:var(--line);
box-shadow:var(--shadow-sm);
}
.timeline__step{
display:block;
margin-bottom:6px;
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:1000;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--green);
}
.timeline__title{
margin-bottom:var(--space-xs);
color:var(--green-dark);
font-size:clamp(1.3rem, 2.4vw, 1.85rem);
text-transform:uppercase;
letter-spacing:-.02em;
}
.timeline__text{max-width:60ch;margin:0}
.marquee-cards{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:var(--space-md);
}
.value-card{
padding:var(--space-md);
background:var(--paper-2);
border:var(--line);
box-shadow:var(--shadow-sm);
}
.value-card__num{
display:block;
margin-bottom:var(--space-xs);
color:var(--green);
font-family:var(--font-label);
font-size:2rem;
font-weight:1000;
line-height:1;
}
.value-card h3{
margin-bottom:6px;
font-size:1.1rem;
text-transform:uppercase;
letter-spacing:-.01em;
color:var(--green-dark);
}
.value-card p{margin:0;font-size:.95rem}
.audience{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
gap:var(--space-md);
}
@media (min-width:1101px){
#para-quien .audience{
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:clamp(12px, 1.2vw, 18px);
}
#para-quien .audience__item{padding:clamp(14px, 1.2vw, 20px)}
#para-quien .audience__item h3{font-size:1.08rem}
#para-quien .audience__item p{font-size:.88rem}
}
.audience__item{
display:grid;
grid-template-columns:minmax(0, 1fr);
gap:10px;
padding:var(--space-md);
background:var(--paper-2);
border:var(--line);
box-shadow:var(--shadow-sm);
transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.audience__item:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}
.audience__item h3{
color:var(--green-dark);
font-size:1.2rem;
text-transform:uppercase;
letter-spacing:-.01em;
}
.audience__item p{margin:0;font-size:.95rem}
@media (max-width:640px){
.audience{grid-template-columns:minmax(0, 1fr)}
.audience__item{
grid-template-columns:38px minmax(0, 1fr);
grid-template-areas:
"mark title"
"copy copy";
align-items:center;
gap:8px 12px;
padding:var(--space-sm) var(--space-md);
}
.audience__mark{grid-area:mark;width:38px;height:38px;font-size:1rem}
.audience__item h3{grid-area:title}
.audience__item p{grid-area:copy}
}
@media (min-width:601px) and (max-width:640px){
#productos + #distribuidores .audience__item{
grid-template-columns:minmax(0, 1fr);
grid-template-areas:"mark" "title" "copy";
align-items:start;
}
}
.audience__item h3,
.registro__titulo,
.feature__title{overflow-wrap:break-word}
.audience__mark{
width:44px;height:44px;
display:grid;
place-items:center;
background:var(--yellow);
border:var(--line-thin);
font-family:var(--font-label);
font-weight:1000;
font-size:1.1rem;
}
.professional-cuco{
min-width:0;
margin:0;
}
.legal-body{max-width:var(--measure)}
.legal-body h2{
margin:var(--space-xl) 0 var(--space-sm);
color:var(--green-dark);
font-size:clamp(1.4rem, 2.6vw, 2rem);
text-transform:uppercase;
letter-spacing:-.02em;
}
.legal-body h2:first-child{margin-top:0}
.legal-body ul{margin:0 0 var(--space-md);padding-left:1.2em;list-style:square}
.legal-body li{margin-bottom:var(--space-xs)}
.legal-body dl{margin:0 0 var(--space-md)}
.legal-body dt{
font-family:var(--font-label);
font-size:var(--fs-label-sm);
font-weight:1000;
letter-spacing:.1em;
text-transform:uppercase;
margin-top:var(--space-sm);
}
.legal-body dd{margin:4px 0 0}
.notfound{
display:grid;
place-items:center;
gap:var(--space-lg);
padding:var(--space-2xl) var(--gutter);
text-align:center;
}
.notfound img{width:min(240px, 60%)}
.form-aside{display:grid;gap:var(--space-md);align-content:start}
.form-layout{
display:grid;
grid-template-columns:minmax(0, 1.6fr) minmax(240px, .9fr);
gap:clamp(28px, 4vw, 60px);
align-items:start;
}
@media (max-width:900px){
.form-layout{grid-template-columns:1fr}
}
#productos .section-head > .eyebrow,
#productos .section-head > .lead{
display:none;
}
.catalog-card{
position:relative;
display:grid;
grid-template-columns:minmax(230px, 44%) minmax(0, 1fr);
min-height:360px;
min-width:0;
overflow:hidden;
background:var(--paper-2);
border:var(--line-thick);
box-shadow:8px 8px 0 var(--ink-95);
}
.catalog-card__visual{
position:relative;
min-height:360px;
display:grid;
place-items:center;
overflow:hidden;
padding:0;
border-right:var(--line);
background:#f4f3ed;
isolation:isolate;
}
.catalog-card__visual::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
opacity:.12;
background:
linear-gradient(90deg, transparent 0 49%, rgba(20,20,16,.08) 50%, transparent 51%),
repeating-linear-gradient(0deg, rgba(20,20,16,.08) 0 1px, transparent 1px 5px);
mix-blend-mode:multiply;
}
.catalog-card__visual img{
position:absolute;
inset:38px 8px 54px;
width:calc(100% - 16px);
height:calc(100% - 92px);
object-fit:contain;
object-position:center;
filter:contrast(1.035) saturate(1.04);
}
.catalog-card__ref{
position:absolute;
top:13px;
left:16px;
color:var(--green-dark);
font-family:var(--font-display);
font-size:clamp(2rem, 3vw, 3rem);
font-weight:900;
line-height:1;
}
.catalog-card__stamp{
position:absolute;
right:14px;
bottom:14px;
left:14px;
padding:8px 10px;
border:var(--line-thin);
background:var(--paper-2);
box-shadow:3px 3px 0 var(--ink-95);
font-family:var(--font-label);
font-size:.67rem;
font-weight:1000;
letter-spacing:.1em;
line-height:1.2;
text-align:center;
text-transform:uppercase;
}
.catalog-card--pro .catalog-card__visual{
background:#f4f3ed;
}
.catalog-card--pro .catalog-card__visual::before{
background:
linear-gradient(90deg, transparent 0 49%, rgba(20,20,16,.08) 50%, transparent 51%),
repeating-linear-gradient(0deg, rgba(20,20,16,.08) 0 1px, transparent 1px 5px);
}
.catalog-card--pro .catalog-card__ref{
z-index:2;
color:var(--green-dark);
text-shadow:2px 2px 0 var(--yellow);
}
.catalog-card--pro .catalog-card__stamp{background:var(--yellow)}
.catalog-card__stamp{z-index:2}
.catalog-card[data-product="display-x20"] .catalog-card__visual img{
transform:scale(1.08);
}
.catalog-card[data-product="display-x50"] .catalog-card__visual img{
transform:scale(1.29);
}
.catalog-card__body{
min-width:0;
display:flex;
flex-direction:column;
padding:clamp(16px, 1.2vw, 18px);
}
.catalog-card__kicker{
align-self:flex-start;
margin-bottom:9px;
padding:6px 9px;
border:var(--line-thin);
background:var(--wash);
font-family:var(--font-label);
font-size:.66rem;
font-weight:1000;
letter-spacing:.11em;
line-height:1.15;
text-transform:uppercase;
}
.catalog-card--pro .catalog-card__kicker{
background:var(--green);
color:var(--paper-2);
}
.catalog-card__name{
margin-bottom:8px;
color:var(--green-dark);
font-family:var(--font-display);
font-size:clamp(1.55rem, 2vw, 2rem);
letter-spacing:-.025em;
line-height:.98;
text-transform:uppercase;
}
.catalog-card__summary{
margin:0 0 12px;
font-size:.9rem;
font-weight:700;
line-height:1.33;
}
.catalog-card__features{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
margin:auto 0 12px;
border-block:var(--line-thin);
list-style:none;
}
.catalog-card__features li{
min-width:0;
padding:9px 8px;
font-family:var(--font-label);
font-size:.67rem;
font-weight:900;
letter-spacing:.035em;
line-height:1.28;
text-transform:uppercase;
}
.catalog-card__features li + li{border-left:var(--line-thin)}
.catalog-card__features li > span{
display:block;
margin-bottom:4px;
color:var(--green);
font-size:.58rem;
letter-spacing:.1em;
}
.catalog-card--pro .catalog-card__features{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.catalog-card__link{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:42px;
padding:8px 12px;
border:var(--line-thin);
background:var(--green);
color:var(--paper-2);
box-shadow:3px 3px 0 var(--ink-95);
font-family:var(--font-label);
font-size:.72rem;
font-weight:1000;
letter-spacing:.09em;
line-height:1.2;
text-transform:uppercase;
transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.catalog-card--pro .catalog-card__link{
background:var(--yellow);
color:var(--ink);
}
.catalog-card__link strong{
font-family:var(--font-label);
font-size:1.3rem;
line-height:1;
}
.catalog-card__link:hover,
.catalog-card__link:focus-visible{
transform:translate(2px,2px);
box-shadow:1px 1px 0 var(--ink-95);
}
@media (min-width:1101px){
#catalogo > .section__inner > .grid{
gap:clamp(30px, 3.4vw, 52px)!important;
}
#catalogo .product__plate{min-height:clamp(400px, 27vw, 470px)}
}
@media (min-width:1101px){
.hero{
grid-template-columns:minmax(0, 1fr) minmax(300px, min(31vw, 470px));
grid-template-rows:auto 1fr;
column-gap:clamp(28px, 4vw, 68px);
row-gap:clamp(14px, 2vh, 22px);
align-items:center;
min-height:min(720px, calc(100svh - 42px));
padding:clamp(26px, 4vh, 38px) max(var(--gutter), calc((100% - var(--container)) / 2 + 20px));
}
.hero__top{
grid-column:1;
grid-row:1;
justify-items:start;
align-self:end;
text-align:left;
}
.hero__top .eyebrow{margin-bottom:clamp(12px, 2vh, 18px)}
.hero .display--hero{
max-width:none;
padding-inline:0;
font-size:clamp(4.35rem, min(6.6vw, 11vh), 6.55rem);
line-height:.84;
letter-spacing:-.055em;
}
.hero__copy{
grid-column:1;
grid-row:2;
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(150px, 200px);
grid-template-areas:
"sub packs"
"lead packs"
"facts packs"
"actions packs";
align-content:start;
align-items:start;
column-gap:clamp(20px, 2.4vw, 38px);
}
.hero__sub{
grid-area:sub;
margin-bottom:8px;
font-size:var(--fs-section-title);
white-space:nowrap;
}
.hero__copy > .lead{
grid-area:lead;
max-width:58ch;
margin:0 0 12px;
line-height:1.38;
}
.hero .facts{
grid-area:facts;
gap:6px;
margin:0 0 14px;
font-size:.68rem;
}
.hero .facts li{padding:6px 8px}
.hero__copy > .btn-row{grid-area:actions}
.hero__copy > .btn-row .btn{
min-height:46px;
padding:11px 16px;
font-size:.76rem;
}
.hero .packs{
grid-area:packs;
align-self:end;
min-height:0;
margin:0;
padding:4px 0 14px;
}
.hero .pack--x20{
width:clamp(76px, 7.1vw, 108px);
margin-bottom:20px;
}
.hero .pack--x50{width:clamp(94px, 8.6vw, 132px)}
.hero__scroll{display:none}
.hero__media{
grid-column:2;
grid-row:1 / span 2;
align-self:center;
}
.hero .carta{
width:min(100%, 350px, calc(76vh * 848 / 1264));
}
.hero + #que-es{
min-height:min(640px, calc(100svh - 78px));
padding-block:clamp(28px, 4vh, 40px);
}
.hero + #que-es > .section__inner{
display:grid;
grid-template-columns:minmax(450px, .7fr) minmax(0, 1.3fr);
gap:clamp(28px, 3vw, 46px);
align-items:center;
}
.hero + #que-es .story-intro{
align-content:center;
gap:14px;
}
.hero + #que-es .story-intro__heading .display{
max-width:none;
font-size:var(--fs-section-title);
letter-spacing:-.055em;
}
.hero + #que-es .story-intro__heading .display__alt,
.hero + #que-es .story-intro__heading .display__tail{
display:block;
}
.hero + #que-es .story-intro__heading .display__alt::before,
.hero + #que-es .story-intro__heading .display__tail::before{content:""}
.hero + #que-es .story-intro__copy{max-width:38ch}
.hero + #que-es .story-intro__copy p{
margin-bottom:10px;
line-height:1.38;
}
.hero + #que-es .story-intro__copy .btn-row{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
align-items:stretch;
margin-top:16px;
}
.hero + #que-es .story-intro__copy .btn{width:100%}
.hero + #que-es .story-process{min-width:0;margin-top:0}
.hero + #que-es .process-head{
grid-template-columns:minmax(460px, 1.08fr) minmax(280px, .92fr);
align-items:end;
gap:24px;
margin-bottom:18px;
}
.hero + #que-es .process-head__title .display{
max-width:none;
margin-bottom:0;
line-height:.88;
}
.hero + #que-es .process-head .lead{
max-width:50ch;
padding-bottom:4px;
line-height:1.35;
}
.hero + #que-es .airflow-demo__stage{
aspect-ratio:3.15 / 1;
box-shadow:8px 8px 0 var(--ink-95);
}
.hero + #que-es .schematic-notes{
gap:clamp(12px, 1.5vw, 22px);
margin-top:14px;
}
.hero + #que-es .schematic-notes li{
grid-template-columns:auto minmax(0, 1fr);
gap:8px;
padding-top:9px;
border-top-width:3px;
}
.hero + #que-es .schematic-notes__num{font-size:1.4rem}
.hero + #que-es .schematic-notes__tag{margin-bottom:4px;font-size:.55rem}
.hero + #que-es .schematic-notes h3{margin-bottom:5px;font-size:.95rem}
.hero + #que-es .schematic-notes p{font-size:.75rem;line-height:1.22}
#que-es + #productos{
min-height:min(600px, calc(100svh - 78px));
padding-block:clamp(22px, 3.2vh, 32px);
}
#que-es + #productos > .section__inner{
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
grid-template-areas:
"head action"
"products products";
gap:72px clamp(24px, 3vw, 42px);
align-items:end;
}
#que-es + #productos .section-head{
grid-area:head;
display:grid;
grid-template-columns:minmax(0, 1fr);
grid-template-areas:"title";
gap:0;
align-items:center;
max-width:none;
margin:0;
}
#que-es + #productos .section-head > .eyebrow{
grid-area:eyebrow;
margin:0;
}
#que-es + #productos .section-head .display{
grid-area:title;
max-width:none;
margin:0;
font-size:clamp(2.6rem, 3.8vw, 4rem);
letter-spacing:-.06em;
line-height:.9;
white-space:nowrap;
}
#que-es + #productos .section-head .display__alt{
display:inline;
}
#que-es + #productos .section-head .display__alt::before{
content:" ";
}
#que-es + #productos .section-head .lead{
grid-area:copy;
max-width:74ch;
margin:0;
font-size:.9rem;
line-height:1.32;
}
#que-es + #productos > .section__inner > .grid{
grid-area:products;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:clamp(18px, 2vw, 30px)!important;
}
#que-es + #productos > .section__inner > .btn-row{
grid-area:action;
align-self:end;
justify-content:flex-end;
margin-top:0!important;
}
#productos + #universo{
min-height:min(540px, calc(100svh - 78px));
padding-block:clamp(28px, 4vh, 40px);
}
#productos + #universo .split{
grid-template-columns:minmax(0, 1.65fr) minmax(250px, .55fr);
gap:clamp(24px, 3vw, 46px);
}
#productos + #universo .split > :nth-child(2){min-width:0}
#productos + #universo .display{margin-bottom:18px}
#productos + #universo .marquee-cards{
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:10px;
}
#productos + #universo .value-card{padding:14px}
#productos + #universo .value-card__num{font-size:1.45rem}
#productos + #universo .value-card p{font-size:.82rem;line-height:1.32}
#productos + #universo .panel{padding:clamp(20px, 2vw, 30px)}
#productos + #universo .panel img{
float:left;
width:92px!important;
margin:0 18px 8px 0!important;
}
#productos + #distribuidores{
min-height:min(500px, calc(100svh - 78px));
padding-block:clamp(28px, 4vh, 38px);
}
#productos + #distribuidores > .section__inner{
display:grid;
grid-template-columns:minmax(430px, 1fr) minmax(260px, .65fr);
grid-template-areas:
"head mascot"
"audience audience"
"action action";
column-gap:clamp(24px, 3vw, 46px);
row-gap:clamp(18px, 2.4vh, 28px);
align-items:start;
}
#productos + #distribuidores .section-head{
grid-area:head;
max-width:none;
margin:0;
}
#productos + #distribuidores .section-head .display{
max-width:none;
margin-bottom:14px;
letter-spacing:-.055em;
overflow-wrap:normal;
}
#productos + #distribuidores .professional-cuco{
grid-area:mascot;
align-self:center;
justify-self:center;
width:100%;
min-height:210px;
}
#productos + #distribuidores .professional-cuco > .carta{
width:min(100%, 340px);
}
#productos + #distribuidores .audience{
grid-area:audience;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:clamp(12px, 1.4vw, 20px);
}
#productos + #distribuidores .audience__item{
grid-template-columns:44px minmax(0, 1fr);
grid-template-areas:"mark title" "mark copy";
align-items:start;
gap:4px 12px;
padding:16px;
}
#productos + #distribuidores .audience__mark{grid-area:mark}
#productos + #distribuidores .audience__item h3{grid-area:title}
#productos + #distribuidores .audience__item p{grid-area:copy;font-size:.86rem}
#productos + #distribuidores > .section__inner > .btn-row{
grid-area:action;
margin-top:0!important;
}
#distribuidores + .section--cta{padding-block:clamp(26px, 4vh, 38px)}
#distribuidores + .section--cta .display{margin-bottom:12px}
#distribuidores + .section--cta .eyebrow{margin-bottom:12px}
#distribuidores + .section--cta .lead{margin-bottom:0}
}
@media (min-width:761px) and (max-width:1100px){
.hero{
grid-template-columns:minmax(0, 1fr) minmax(260px, 34vw);
grid-template-areas:"top media" "copy media";
align-items:center;
gap:20px 30px;
padding:30px var(--gutter) 42px;
text-align:left;
}
.hero__top{
grid-area:top;
justify-items:start;
text-align:left;
}
.hero__copy{grid-area:copy}
.hero__media{grid-area:media;order:0}
.hero .display--hero{font-size:clamp(4rem, 9vw, 6.4rem)}
.hero .carta{width:min(100%, 320px)}
.hero .packs{margin-top:24px}
.hero .eyebrow,.hero .facts,.hero .btn-row,.hero__scroll{justify-content:flex-start}
.hero .lead{margin-inline:0}
.hero + #que-es,
#que-es + #productos,
#productos + #universo,
#productos + #distribuidores{padding-block:48px}
.hero + #que-es .story-intro{
grid-template-columns:minmax(260px, .75fr) minmax(0, 1.25fr);
gap:28px;
}
.hero + #que-es .story-intro__copy{padding-top:0}
.hero + #que-es .process-head{
grid-template-columns:minmax(300px, .8fr) minmax(0, 1.2fr);
align-items:end;
}
#que-es + #productos > .section__inner > .grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
#que-es + #productos .catalog-card{grid-template-columns:1fr}
#que-es + #productos .catalog-card__visual{
min-height:280px;
padding:0;
border-right:0;
border-bottom:var(--line);
}
#que-es + #productos .catalog-card__visual img{
inset:36px 10px 50px;
width:calc(100% - 20px);
height:calc(100% - 86px);
}
#que-es + #productos .catalog-card__stamp{
right:12px;
bottom:12px;
left:auto;
}
#que-es + #productos .catalog-card__features{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
#que-es + #productos .catalog-card--pro .catalog-card__features{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
#que-es + #productos .catalog-card__features li + li{
border-left:var(--line-thin);
}
#productos + #universo .marquee-cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
#productos + #distribuidores .audience{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width:1280px){
.hero + #que-es > .section__inner{
grid-template-columns:minmax(500px, .75fr) minmax(0, 1.25fr);
}
}
@media (min-width:1101px) and (max-width:1279px){
.hero + #que-es .process-head{
grid-template-columns:1fr;
gap:12px;
}
.hero + #que-es .process-head .lead{max-width:62ch}
#productos + #universo .marquee-cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:760px){
.hero{
gap:20px;
padding-bottom:44px;
}
.hero__media{order:0}
.hero__top{order:-1}
.hero .display--hero{font-size:clamp(3rem, 17vw, 5rem)}
.hero .carta{width:min(62vw, 250px)}
.hero .packs{margin-top:24px}
.hero__scroll{display:none}
.hero + #que-es,
#que-es + #productos,
#productos + #universo,
#productos + #distribuidores{padding-block:42px}
#que-es + #productos > .section__inner > .grid{gap:24px!important}
#que-es + #productos > .section__inner > .grid{
grid-template-columns:none;
grid-auto-flow:column;
grid-auto-columns:minmax(86%, 1fr);
gap:16px!important;
margin-inline:-2px;
padding:2px 2px 14px;
overflow-x:auto;
overscroll-behavior-inline:contain;
scroll-snap-type:inline mandatory;
scrollbar-width:thin;
scrollbar-color:var(--green) rgba(6,61,45,.12);
}
#que-es + #productos .catalog-card{
grid-template-columns:1fr;
scroll-snap-align:start;
}
#que-es + #productos .catalog-card__visual{
min-height:270px;
padding:0;
border-right:0;
border-bottom:var(--line);
}
#que-es + #productos .catalog-card__visual img{
inset:28px 6px 44px;
width:calc(100% - 12px);
height:calc(100% - 72px);
}
#que-es + #productos .catalog-card__stamp{
right:10px;
bottom:10px;
left:auto;
max-width:68%;
}
#que-es + #productos .catalog-card__body{padding:20px 18px}
#que-es + #productos .catalog-card__features,
#que-es + #productos .catalog-card--pro .catalog-card__features{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
#que-es + #productos .catalog-card__features li + li{
border-left:var(--line-thin);
}
#que-es + #productos .catalog-card__features li{
padding:9px 8px;
font-size:.61rem;
}
#que-es + #productos .catalog-card:not(.catalog-card--pro) .catalog-card__features li:nth-child(3){
grid-column:1 / -1;
border-top:var(--line-thin);
border-left:0;
}
#productos + #universo .marquee-cards,
#productos + #distribuidores .audience{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
}
#productos + #distribuidores .audience__item{padding:16px}
}
@media (max-width:560px){
.hero + #que-es .schematic-notes{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:18px 12px;
}
.hero + #que-es .schematic-notes li{
grid-template-columns:1fr;
gap:6px;
}
.hero + #que-es .schematic-notes__num{font-size:1.25rem}
.hero + #que-es .schematic-notes p{font-size:.76rem;line-height:1.3}
}
@media (max-width:600px){
#productos + #distribuidores .audience{grid-template-columns:minmax(0, 1fr)}
}
@media (prefers-reduced-motion: no-preference){
.reveal-ready [data-reveal]:not(.caja),
.reveal-ready .reveal:not(.caja){
opacity:0;
transform:translate3d(0,8px,0);
transition:
opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
}
.reveal-ready [data-reveal].is-revealed,
.reveal-ready .reveal.is-revealed{
opacity:1;
transform:none;
}
.reveal-ready [data-reveal][data-layout-fixed]{transform:none}
@keyframes rays-spin{to{--rayos-giro:353deg}}
.hero::before,
.section--act::before,
.section--cta::before{animation:rays-spin 150s linear infinite}
@keyframes ticker-scroll{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(calc(-1 * var(--ticker-vuelta, 50%)),0,0)}
}
.ticker__track{animation:ticker-scroll var(--ticker-dur, 30s) linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker.is-arrastrando .ticker__track{animation-play-state:paused}
@keyframes flow-run{to{stroke-dashoffset:-480}}
.schematic.is-in .flow-path{animation:flow-run 7s linear infinite}
@keyframes airflow-run{to{stroke-dashoffset:-620}}
@keyframes airflow-sweep{to{stroke-dashoffset:-1080}}
.airflow-demo.is-in .airflow-sweep{
animation:airflow-sweep 5.4s linear infinite;
}
.airflow-demo.is-in .airflow-thread{
animation:airflow-run 3.8s linear infinite;
}
.airflow-demo.is-in .airflow-thread--1{animation-delay:-.35s}
.airflow-demo.is-in .airflow-thread--2{animation-delay:-1.25s;animation-duration:4.4s}
.airflow-demo.is-in .airflow-thread--3{animation-delay:-2.15s;animation-duration:3.35s}
.airflow-demo.is-in .airflow-thread--4{animation-delay:-2.8s;animation-duration:4.1s}
.airflow-demo.is-in .airflow-thread--5{animation-delay:-3.4s;animation-duration:4.7s}
.airflow-demo.is-in .airflow-thread--6{animation-delay:-.8s;animation-duration:3.05s}
.airflow-demo.is-in .airflow-thread--7{animation-delay:-1.7s;animation-duration:5.15s}
.airflow-demo.is-in .airflow-thread--8{animation-delay:-3.1s;animation-duration:3.55s}
.airflow-demo.is-in .airflow-thread--9{animation-delay:-4.2s;animation-duration:5.7s}
.airflow-demo.is-in .airflow-thread--10{animation-delay:-2.45s;animation-duration:2.85s}
.airflow-demo.is-in .airflow-thread--11{animation-delay:-5.1s;animation-duration:6.2s}
.site-footer__col a{transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
.site-footer__col a:hover{transform:translateX(3px)}
}
.audience__item,
.catalog-card__link,
.audio-btn,
.value-card{
transition:
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.is-fisica{transition-property:none}
.is-fisica:hover{transform:none}
.btn:active,
.audio-btn:active{
transform:translate(4px,4px);
box-shadow:0 0 0 var(--ink-95);
transition-duration:var(--dur-press);
}
.audience__item:active,
.catalog-card:active,
.value-card:active{
transform:translate(2px,2px);
box-shadow:var(--shadow-sm);
transition-duration:var(--dur-press);
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation:none!important;
transition:none!important;
}
.js [data-reveal],
.js .reveal{
opacity:1!important;
transform:none!important;
}
.ticker{white-space:normal}
.ticker__track{width:auto;display:block;text-align:center}
.ticker__seq:nth-child(2){display:none}
.rays::before{opacity:.05}
.airflow-sweep,
.airflow-particles{display:none}
.airflow-thread{
stroke-dasharray:none;
opacity:.2;
filter:none;
}
}
@media (max-width:520px){
.ticker{letter-spacing:.1em}
}
.carta-zona{
perspective:750px;
isolation:isolate;
transform:translate3d(.1px,.1px,.1px);
display:grid;
place-items:center;
width:100%;
}
.carta{
--grad-x:50%;
--grad-y:50%;
--sprk-x:50%;
--sprk-y:50%;
--sprk-o:.75;
--color1:#f7d949;
--color2:#37b98a;
--front:image-set(
url("/assets/img/carta-gilters-v2.webp") type("image/webp"),
url("/assets/img/carta-gilters-v2.jpg") type("image/jpeg")
);
position:relative;
width:min(100%, 420px);
aspect-ratio:848 / 1264;
margin:0;
overflow:hidden;
z-index:10;
isolation:isolate;
border-radius:5% / 3.5%;
box-shadow:
-5px -5px 5px -5px var(--color1),
5px 5px 5px -5px var(--color2),
-7px -7px 10px -5px transparent,
7px 7px 10px -5px transparent,
0 0 5px 0 rgba(255,255,255,0),
0 55px 35px -20px rgba(0,0,0,.5);
transition:transform .5s ease, box-shadow .2s ease;
will-change:transform, filter;
background-color:#040712;
background-image:var(--front);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 50%;
transform-origin:center;
}
.carta--vendes{
--front:image-set(
url("/assets/img/carta-vendes.webp") type("image/webp"),
url("/assets/img/carta-vendes.jpg") type("image/jpeg")
);
aspect-ratio:525 / 349;
width:min(100%, 460px);
}
.carta--flip{
background:none;
overflow:visible;
perspective:1100px;
cursor:pointer;
}
.carta--flip,
.carta--flip:hover{box-shadow:none}
.carta--flip::before,
.carta--flip::after,
.carta--flip .carta__face::before,
.carta--flip .carta__face::after{
display:none;
content:none;
background:none;
animation:none;
}
.carta__flip{
position:absolute;
inset:0;
transform-style:preserve-3d;
transition:transform .7s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
.carta--flip:hover .carta__flip,
.carta--flip:focus-within .carta__flip{
transform:rotateY(180deg);
}
.carta__face{
position:absolute;
inset:0;
width:100%;
height:100%;
margin:0;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.carta__face--back{
--front:image-set(
url("/assets/img/carta-vendes-back.webp") type("image/webp"),
url("/assets/img/carta-vendes-back.jpg") type("image/jpeg")
);
transform:rotateY(180deg);
}
.carta--flip .carta__face,
.carta--flip .carta__face:hover{box-shadow:none}
@media (prefers-reduced-motion: no-preference){
.carta--flip{animation:holoCard 12s ease infinite}
.carta--flip:hover,
.carta--flip:focus-within{animation:none;transform:none}
}
@media (prefers-reduced-motion: reduce){
.carta__flip{transition:none}
}
.carta:hover{
box-shadow:
-20px -20px 30px -25px var(--color1),
20px 20px 30px -25px var(--color2),
-7px -7px 10px -5px var(--color1),
7px 7px 10px -5px var(--color2),
0 0 13px 4px rgba(255,255,255,.3),
0 55px 35px -20px rgba(0,0,0,.5);
}
.carta::before,
.carta::after{
content:"";
position:absolute;
inset:0;
background-repeat:no-repeat;
opacity:.5;
mix-blend-mode:soft-light;
transition:all .33s ease;
}
.carta::before{
background-position:var(--grad-x) var(--grad-y);
background-size:300% 300%;
background-image:linear-gradient(
115deg,
transparent 0%,
var(--color1) 25%,
transparent 47%,
transparent 53%,
var(--color2) 75%,
transparent 100%
);
opacity:.6;
filter:brightness(.5) contrast(1);
z-index:1;
}
.carta::after{
background-image:linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
background-position:var(--sprk-x) var(--sprk-y);
background-size:160%;
z-index:2;
filter:brightness(1) contrast(1);
mix-blend-mode:overlay;
opacity:.42;
}
.carta.is-active::after,
.carta:hover::after{
filter:brightness(1) contrast(1);
opacity:calc(var(--sprk-o) * .6);
}
.carta.is-active,
.carta:hover{
animation:none;
transition:box-shadow .1s ease-out;
}
.carta.is-active::before,
.carta:hover::before{
animation:none;
background-image:linear-gradient(
110deg,
transparent 25%,
var(--color1) 48%,
var(--color2) 52%,
transparent 75%
);
background-size:250% 250%;
opacity:.72;
filter:brightness(.66) contrast(1.33);
transition:none;
}
.carta.is-active::before,
.carta:hover::before,
.carta.is-active::after,
.carta:hover::after{
animation:none;
transition:none;
}
.packs{
position:relative;
display:flex;
align-items:flex-end;
justify-content:center;
margin-top:clamp(30px, 4.8vw, 74px);
padding-bottom:clamp(14px, 2vw, 26px);
perspective:1000px;
perspective-origin:50% 40%;
}
.pack{
position:relative;
flex:0 0 auto;
}
.pack--x20{
width:clamp(84px, 10.5vw, 146px);
z-index:1;
margin-bottom:clamp(16px, 2.6vw, 38px);
}
.pack--x50{
width:clamp(104px, 13vw, 182px);
z-index:2;
margin-left:clamp(-26px, -2.2vw, -14px);
}
.pack__link{
display:block;
position:relative;
border-radius:6px;
}
.pack__art{
position:relative;
z-index:1;
display:block;
transform-origin:50% 60%;
transform-style:preserve-3d;
will-change:transform;
transition:transform .5s var(--ease-out);
filter:drop-shadow(0 3px 2px rgba(20,20,16,.28));
}
.pack__art img{width:100%;height:auto}
.pack__art::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(
115deg,
transparent 34%,
rgba(255,255,255,.16) 46%,
rgba(255,255,255,.34) 50%,
rgba(255,255,255,.14) 54%,
transparent 66%
);
background-size:280% 280%;
background-position:var(--gloss-x, 50%) var(--gloss-y, 50%);
background-repeat:no-repeat;
mix-blend-mode:screen;
opacity:.42;
-webkit-mask-image:var(--pack-src);
mask-image:var(--pack-src);
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
.pack--x20{--pack-src:url("/assets/img/pack-x20.webp")}
.pack--x50{--pack-src:url("/assets/img/pack-x50.webp")}
.pack.is-tilting .pack__art{transition:transform .08s linear}
.pack.is-tilting .pack__shadow{transition:transform .12s linear, opacity .12s linear}
.pack__shadow{
position:absolute;
left:-4%;
right:-4%;
bottom:-7%;
height:13%;
z-index:0;
border-radius:50%;
background:radial-gradient(ellipse at 50% 50%,
rgba(20,20,16,.5) 0%,
rgba(20,20,16,.3) 38%,
rgba(20,20,16,.1) 62%,
transparent 76%);
filter:blur(6px);
transform-origin:50% 50%;
}
.pack__info{
position:absolute;
left:50%;
bottom:calc(100% + 16px);
z-index:20;
width:max-content;
max-width:min(15rem, 62vw);
display:grid;
gap:5px;
padding:12px 14px;
background:var(--paper-2);
border:var(--line);
box-shadow:var(--shadow-sm);
color:var(--ink);
text-align:left;
pointer-events:none;
opacity:0;
transform:translate(-50%, 6px) scale(.96);
transform-origin:50% 100%;
transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pack__info::before,
.pack__info::after{
content:"";
position:absolute;
top:100%;
left:50%;
margin-left:-10px;
border:10px solid transparent;
border-top-color:var(--ink);
}
.pack__info::after{
top:calc(100% - 4px);
border-top-color:var(--paper-2);
}
.pack__info strong{
font-family:var(--font-label);
font-size:.82rem;
font-weight:1000;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--green-dark);
}
.pack__specs{
font-family:var(--font-label);
font-size:.72rem;
font-weight:700;
line-height:1.35;
}
.pack__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.pack__tags i{
padding:3px 7px;
border:2px solid var(--ink);
background:var(--yellow);
font-family:var(--font-label);
font-size:.6rem;
font-weight:1000;
font-style:normal;
letter-spacing:.08em;
text-transform:uppercase;
}
.pack__badge{
position:absolute;
left:50%;
bottom:2%;
z-index:3;
padding:6px 11px 5px;
background:var(--yellow);
color:var(--ink);
border:var(--line-thin);
box-shadow:3px 3px 0 var(--ink-95);
font-family:var(--font-label);
font-size:clamp(.56rem, .9vw, .68rem);
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
white-space:nowrap;
transform:translateX(-50%) rotate(-3deg);
transform-origin:50% 50%;
transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pack:hover .pack__badge,
.pack__link:focus-visible .pack__badge{
transform:translateX(-50%) rotate(-3deg) translate(2px, 2px);
box-shadow:1px 1px 0 var(--ink-95);
}
@media (hover: hover) and (pointer: fine){
.pack:hover .pack__info{
opacity:1;
transform:translate(-50%, 0) scale(1);
}
}
.pack__link:focus-visible ~ .pack__info{
opacity:1;
transform:translate(-50%, 0) scale(1);
}
@media (prefers-reduced-motion: no-preference){
.carta.is-animated{
transition:none;
animation:holoCard 12s ease 0s infinite;
}
.carta.is-animated::before{
transition:none;
animation:holoGradient 12s ease 0s infinite;
}
.carta.is-animated::after{
transition:none;
animation:holoSparkle 12s ease 0s infinite;
}
.pack.is-animated .pack__art{
transition:none;
animation:packFloat 12s ease infinite;
}
.pack.is-animated .pack__art::after{
animation:packGloss 12s ease infinite;
}
.pack.is-animated .pack__shadow{
animation:packShadow 12s ease infinite;
}
.pack--x20.is-animated .pack__art,
.pack--x20.is-animated .pack__art::after,
.pack--x20.is-animated .pack__shadow{animation-delay:-2.6s}
.pack--x50.is-animated .pack__art,
.pack--x50.is-animated .pack__art::after,
.pack--x50.is-animated .pack__shadow{animation-delay:-7.2s}
}
@keyframes packFloat{
0%, 100%{transform:translateY(0) rotateZ(0deg) rotateX(0deg) rotateY(0deg)}
5%, 8%{transform:translateY(-10px) rotateZ(-1deg) rotateX(5deg) rotateY(-16deg)}
13%, 16%{transform:translateY(-4px) rotateZ(1deg) rotateX(-7deg) rotateY(24deg)}
35%, 38%{transform:translateY(-13px) rotateZ(2deg) rotateX(9deg) rotateY(15deg)}
55%{transform:translateY(-6px) rotateZ(-2deg) rotateX(-9deg) rotateY(-20deg)}
}
@keyframes packGloss{
0%, 100%{background-position:50% 50%; opacity:.3}
5%, 8%{background-position:16% 30%; opacity:.5}
13%, 16%{background-position:84% 38%; opacity:.38}
35%, 38%{background-position:78% 66%; opacity:.55}
55%{background-position:22% 60%; opacity:.34}
}
@keyframes packShadow{
0%, 100%{transform:scale(1); opacity:.95; filter:blur(5px)}
5%, 8%{transform:scale(.8, .72) translateX(4%); opacity:.6; filter:blur(8px)}
13%, 16%{transform:scale(.92, .86) translateX(-4%); opacity:.78; filter:blur(6px)}
35%, 38%{transform:scale(.74, .66) translateX(-3%); opacity:.52; filter:blur(9px)}
55%{transform:scale(.88, .8) translateX(3%); opacity:.72; filter:blur(7px)}
}
@keyframes holoSparkle{
0%, 100%{opacity:.42; background-position:50% 50%; filter:brightness(1.2) contrast(1.25)}
5%, 8%{opacity:.56; background-position:40% 40%; filter:brightness(.8) contrast(1.2)}
13%, 16%{opacity:.28; background-position:50% 50%; filter:brightness(1.2) contrast(.8)}
35%, 38%{opacity:.56; background-position:60% 60%; filter:brightness(1) contrast(1)}
55%{opacity:.19; background-position:45% 45%; filter:brightness(1.2) contrast(1.25)}
}
@keyframes holoGradient{
0%, 100%{opacity:.6; background-position:50% 50%; filter:brightness(.5) contrast(1)}
5%, 9%{background-position:100% 100%; opacity:.85; filter:brightness(.75) contrast(1.25)}
13%, 17%{background-position:0% 0%; opacity:.75}
35%, 39%{background-position:100% 100%; opacity:.85; filter:brightness(.5) contrast(1)}
55%{background-position:0% 0%; opacity:.85; filter:brightness(.75) contrast(1.25)}
}
@keyframes holoCard{
0%, 100%{transform:rotateZ(0deg) rotateX(0deg) rotateY(0deg)}
5%, 8%{transform:rotateZ(0deg) rotateX(6deg) rotateY(-20deg)}
13%, 16%{transform:rotateZ(0deg) rotateX(-9deg) rotateY(32deg)}
35%, 38%{transform:rotateZ(3deg) rotateX(12deg) rotateY(20deg)}
55%{transform:rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg)}
}
@media (max-width:640px) and (prefers-reduced-motion: no-preference){
.carta-zona{padding-block:18px}
@keyframes holoCardMovil{
0%, 100%{transform:rotateZ(0deg) rotateX(0deg) rotateY(0deg)}
5%, 8%{transform:rotateZ(0deg) rotateX(3deg) rotateY(-11deg)}
13%, 16%{transform:rotateZ(0deg) rotateX(-5deg) rotateY(17deg)}
35%, 38%{transform:rotateZ(1.5deg) rotateX(6deg) rotateY(11deg)}
55%{transform:rotateZ(-1.5deg) rotateX(-6deg) rotateY(-14deg)}
}
.carta.is-animated,
.carta--flip{animation-name:holoCardMovil}
}
@media (prefers-reduced-motion: reduce){
.carta,
.carta::before,
.carta::after{
animation:none!important;
transition:none!important;
transform:none!important;
}
.carta::after{opacity:.35}
.pack__art::after{opacity:.28}
.pack__shadow{opacity:.9}
.pack__info{transition:none!important}
}