/* ============================================================ El Tarantin — Landing page Built on the El Tarantin Design System tokens (red #E62020 · green #97C12A · ink #141414 · cream #FBF6EE) Display: Poppins · Body: Mulish ============================================================ */ /* Fuentes cargadas vía en el (más rápido que @import) */ :root { /* ---- Brand: RED ---- */ --red-50:#FDECEC; --red-100:#FBD5D5; --red-400:#EC4F4F; --red-500:#E62020; --red-600:#C81C22; --red-700:#A1141A; /* ---- Brand: GREEN ---- */ --green-50:#F2F8E4; --green-100:#E2F0C5; --green-400:#97C12A; --green-500:#82A923; --green-600:#6A8A1C; --green-700:#526B15; /* ---- Neutral: cream → ink ---- */ --white:#FFFFFF; --cream-50:#FFFDF9; --cream-100:#FBF6EE; --cream-200:#F4ECDF; --stone-300:#E5DCCC; --stone-400:#CBC1AF; --stone-500:#9C937F; --stone-600:#6F6757; --ink-700:#423E36; --ink-800:#25231F; --ink-900:#141414; --amber-400:#F0B429; /* ---- Semantic ---- */ --color-bg:var(--cream-100); --color-surface:var(--white); --color-text:var(--ink-900); --color-text-muted:var(--stone-600); --color-primary:var(--red-500); --color-primary-hover:var(--red-600); --color-primary-active:var(--red-700); --color-accent:var(--green-400); --color-accent-hover:var(--green-500); --color-accent-active:var(--green-600); --color-border:var(--stone-300); /* ---- Type ---- */ --font-display:'Poppins','Segoe UI',system-ui,sans-serif; --font-body:'Mulish','Segoe UI',system-ui,sans-serif; /* ---- Spacing ---- */ --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; /* ---- Radius ---- */ --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-2xl:36px; --radius-pill:999px; /* ---- Shadows ---- */ --shadow-sm:0 2px 6px rgba(37,35,31,.07); --shadow-md:0 8px 20px -6px rgba(37,35,31,.12); --shadow-lg:0 18px 40px -12px rgba(37,35,31,.18); --shadow-xl:0 30px 60px -18px rgba(37,35,31,.22); --shadow-primary:0 12px 28px -8px rgba(230,32,32,.42); /* ---- Layout & motion ---- */ --container:1280px; --gutter:clamp(1.25rem,4vw,4rem); --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:140ms; --dur-base:220ms; } /* ---------------- Base ---------------- */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{margin:0;padding:0;} body{ background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none; transition:color var(--dur-fast) var(--ease-out);} h1,h2,h3,h4{font-family:var(--font-display); margin:0; line-height:1.1;} p{margin:0;} .container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;} /* ---------------- Buttons ---------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-display); font-weight:600; line-height:1; white-space:nowrap; border:none; border-radius:var(--radius-pill); cursor:pointer; transition:transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn--sm{padding:.55rem 1.05rem; font-size:.875rem;} .btn--md{padding:.72rem 1.4rem; font-size:.95rem;} .btn--lg{padding:.95rem 1.85rem; font-size:1.0625rem;} .btn .i{width:1.1em; height:1.1em;} .btn--primary{background:var(--color-primary); color:#fff; box-shadow:var(--shadow-primary);} .btn--primary:hover{background:var(--color-primary-hover); transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(230,32,32,.5); color:#fff;} .btn--primary:active{background:var(--color-primary-active); transform:translateY(0) scale(.98);} .btn--secondary{background:transparent; color:var(--color-primary); box-shadow:inset 0 0 0 1.5px var(--color-primary);} .btn--secondary:hover{background:var(--red-50); transform:translateY(-2px); color:var(--color-primary);} .btn--secondary:active{transform:scale(.98);} .btn--ghost{background:transparent; color:inherit;} .btn--ghost:hover{background:rgba(255,255,255,.1);} .btn--accent{background:var(--color-accent); color:var(--ink-900);} .btn--accent:hover{background:var(--color-accent-hover); transform:translateY(-2px); color:var(--ink-900);} .btn--accent:active{background:var(--color-accent-active); transform:scale(.98);} .icon-btn{ width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--color-surface); box-shadow:inset 0 0 0 1px var(--color-border); color:var(--color-text); transition:background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring); } .icon-btn:hover{background:var(--red-50); color:var(--color-primary); transform:translateY(-2px);} .icon-btn .i{width:20px; height:20px;} .sound-toggle{font-size:1.05rem; line-height:1; padding:0; cursor:pointer; border:none;} .sound-toggle[aria-pressed="false"]{opacity:.5;} /* ---------------- Badges ---------------- */ .badge{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.01em; padding:.35rem .75rem; border-radius:var(--radius-pill); } .badge .i{width:14px; height:14px;} .badge--patent{background:var(--red-50); color:var(--red-700); box-shadow:inset 0 0 0 1px var(--red-100);} .badge--natural{background:var(--green-50); color:var(--green-700); box-shadow:inset 0 0 0 1px var(--green-100);} .badge--star{background:var(--ink-900); color:#fff;} /* ---------------- Section heading ---------------- */ .eyebrow{ font-family:var(--font-display); font-weight:700; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-primary); } .section-head{max-width:46rem; margin-inline:auto; text-align:center; display:flex; flex-direction:column; gap:.75rem;} .section-head h2{font-size:clamp(2rem,4vw,2.875rem); font-weight:800; letter-spacing:-.02em;} .section-head .intro{color:var(--color-text-muted); font-size:1.125rem;} .section-head--left{text-align:left; margin-inline:0;} /* ---------------- Photo placeholders ---------------- */ .photo{ position:relative; width:100%; height:100%; background:var(--cream-200) url('assets/mark-color.png') center/86px no-repeat; box-shadow:inset 0 0 0 1px var(--color-border); display:flex; align-items:flex-end; justify-content:center; border-radius:var(--radius-2xl); overflow:hidden; min-height:240px; } .photo::before{content:''; position:absolute; inset:0; background:var(--cream-200); opacity:.55;} .photo span{ position:relative; z-index:2; margin-bottom:1rem; font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--stone-500); background:rgba(255,255,255,.7); padding:.3rem .7rem; border-radius:var(--radius-pill); } /* ---------------- Header ---------------- */ .site-header{position:sticky; top:0; z-index:50;} .site-header__bar{ background:rgba(251,246,238,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--color-border); } .header__inner{display:flex; align-items:center; justify-content:space-between; height:76px; gap:1rem;} .header__logo{position:relative; display:inline-flex; align-items:flex-start;} .header__logo img{height:62px; width:auto;} .header__reg{font-family:var(--font-display); font-weight:700; font-size:.62rem; color:var(--color-text); line-height:1; margin-top:4px; margin-left:2px;} .header__nav{display:flex; gap:2rem;} .header__nav a{font-family:var(--font-display); font-weight:500; font-size:.9rem;} .header__nav a:hover,.header__nav a.is-active{color:var(--color-primary);} .header__actions{display:flex; align-items:center; gap:.85rem;} /* ---------------- Hero ---------------- */ .hero{overflow:hidden;} .hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; padding:5rem 0;} .hero h1{font-size:clamp(2.6rem,6vw,4.75rem); font-weight:800; letter-spacing:-.025em; line-height:1.02; text-wrap:balance;} .hero h1 .accent{color:var(--color-primary);} .hero__kicker{display:block; font-family:var(--font-display); font-weight:700; font-size:.78rem; color:var(--color-primary); margin-bottom:.7rem; letter-spacing:.16em; text-transform:uppercase;} .hero__lead{font-size:1.125rem; color:var(--color-text-muted); max-width:46ch; margin-top:.25rem;} .hero__ctas{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem;} .hero__trust{display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1rem;} .hero__trust span{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem;} .hero__trust .i{width:18px; height:18px; color:var(--color-accent-active);} .hero__copy{display:flex; flex-direction:column; gap:1.5rem;} .hero__media{position:relative; aspect-ratio:1/1;} .hero__glow{position:absolute; inset:0; border-radius:var(--radius-2xl); background:radial-gradient(circle at 60% 40%, var(--green-100), transparent 62%);} .hero__chip{ position:absolute; bottom:22px; left:-16px; background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:.75rem 1rem; display:flex; align-items:center; gap:.6rem; } .hero__chip .i{width:18px; height:18px; color:var(--color-accent-active);} .hero__chip strong{font-family:var(--font-display); font-weight:600; font-size:.85rem;} /* ---------------- Real photos ---------------- */ .hero__img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg);} .hero__chip{z-index:3;} .spotlight__img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg);} .card__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .story__gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; max-width:920px; margin:2.5rem auto 0;} .story__gallery img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);} @media (max-width:700px){ .story__gallery{grid-template-columns:repeat(2,1fr);} } /* ---------------- Features ---------------- */ .features{background:var(--color-surface); padding:5rem 0;} .features__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:3rem;} .feature{display:flex; flex-direction:column; gap:.75rem;} .feature__ico{ width:54px; height:54px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; } .feature__ico .i{width:26px; height:26px;} .feature__ico--green{background:var(--green-50); color:var(--green-600);} .feature__ico--red{background:var(--red-50); color:var(--color-primary);} .feature h3{font-size:1.2rem; font-weight:600;} .feature p{color:var(--color-text-muted); font-size:.95rem;} /* ---------------- Spotlight ---------------- */ .spotlight{background:var(--ink-900); color:#fff; padding:5rem 0;} .spotlight__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:center;} .spotlight__media{position:relative; aspect-ratio:4/5;} .spotlight__media .badge{position:absolute; top:18px; left:18px;} .spotlight__copy{display:flex; flex-direction:column; gap:1.25rem;} .spotlight__copy .eyebrow{color:var(--color-accent);} .spotlight__copy h2{font-size:clamp(2rem,4vw,2.875rem); font-weight:800; letter-spacing:-.02em;} .spotlight__copy .intro{color:rgba(255,255,255,.78); font-size:1.0625rem;} .spotlight__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem;} .spotlight__list li{display:flex; gap:.6rem; align-items:center; color:rgba(255,255,255,.82);} .spotlight__list .i{width:18px; height:18px; color:var(--color-accent); flex:none;} .spotlight__ctas{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-top:.5rem;} /* Panel de prueba (números reales) dentro del spotlight */ .proof-panel{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-xl); padding:2rem 1.75rem; display:flex; flex-direction:column; gap:1.4rem; box-shadow:var(--shadow-lg);} .proof-panel__tag{font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent);} .proof-stat{display:flex; flex-direction:column; gap:.15rem; border-left:3px solid var(--color-accent); padding-left:1rem;} .proof-stat strong{font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1; color:#fff;} .proof-stat strong small{font-size:1rem; font-weight:700; color:var(--color-accent);} .proof-stat span{font-size:.9rem; color:rgba(255,255,255,.75); line-height:1.35;} .btn--ghost-light{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4);} .btn--ghost-light:hover{background:#fff; color:var(--ink-900);} /* CTA fijo en móvil (CRO) — aparece al salir el hero de pantalla */ .sticky-cta{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90; display:none; align-items:center; justify-content:center; gap:.5rem; background:var(--color-primary); color:#fff; text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:1rem; padding:.95rem 1.25rem; border-radius:var(--radius-pill); box-shadow:var(--shadow-lg); opacity:0; transform:translateY(140%); pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring); } .sticky-cta:hover{color:#fff;} @media (max-width:760px){ .sticky-cta{display:flex;} .sticky-cta.is-on{opacity:1; transform:translateY(0); pointer-events:auto;} } /* ---------------- Catalog ---------------- */ .catalog{padding:5rem 0;} .catalog__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem;} .card{ background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); } .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);} .card__media{position:relative; aspect-ratio:4/3; background:var(--cream-200) url('assets/mark-color.png') center/64px no-repeat;} .card__media .badge{position:absolute; top:12px; left:12px;} .card__ref{position:absolute; left:0; right:0; bottom:0; background:rgba(20,20,20,.72); color:#fff; font-size:.62rem; font-weight:600; letter-spacing:.03em; text-align:center; padding:.32rem .4rem;} .card__body{padding:1.25rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1;} .card__body h3{font-size:1.15rem; font-weight:600;} .card__body p{color:var(--color-text-muted); font-size:.9rem; flex:1;} .card__foot{display:flex; flex-direction:column; align-items:stretch; gap:.75rem; margin-top:.75rem;} .card__foot .btn{width:100%;} .card__price{font-family:var(--font-display); font-weight:700; font-size:1.05rem;} .card__price small{display:block; font-weight:500; font-size:.72rem; color:var(--stone-500);} /* ---------------- Combos / ofertas ---------------- */ .combos{ max-width:680px; margin:1.5rem auto 0; text-align:center; background:var(--green-50); color:var(--green-700); border:1px solid var(--green-100); border-radius:var(--radius-pill); padding:.6rem 1.25rem; font-family:var(--font-display); font-weight:600; font-size:.9rem; } /* ---------------- Trust / certifications ---------------- */ .trust{background:var(--color-surface); padding:5rem 0;} .trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem;} .cert{ background:var(--cream-50); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; } .cert__ico{width:44px; height:44px; border-radius:var(--radius-md); background:var(--green-50); color:var(--green-600); display:flex; align-items:center; justify-content:center;} .cert__ico .i{width:22px; height:22px;} .cert h3{font-size:1rem; font-weight:600;} .cert p{font-size:.85rem; color:var(--color-text-muted);} .cert code{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--ink-700);} /* ---------------- Newsletter / CTA ---------------- */ .newsletter{padding:5rem 0;} .newsletter__band{ position:relative; overflow:hidden; border-radius:var(--radius-2xl); background:var(--color-primary); color:#fff; padding:4rem; box-shadow:var(--shadow-primary); } .newsletter__inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;} .newsletter h2{font-size:clamp(1.8rem,3.5vw,2.25rem); font-weight:800; color:#fff; text-wrap:balance;} .newsletter p{color:rgba(255,255,255,.9); margin-top:.5rem;} .newsletter__form{display:flex; gap:.75rem; flex-wrap:wrap;} .newsletter__form input{ flex:1; min-width:220px; padding:.85rem 1.1rem; border:none; border-radius:var(--radius-pill); font-family:var(--font-body); font-size:1rem; color:var(--ink-900); background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); } .newsletter__form input:focus{outline:3px solid rgba(255,255,255,.5); outline-offset:1px;} .newsletter__note{font-size:.8rem; color:rgba(255,255,255,.8); margin-top:.6rem;} .newsletter__mark{position:absolute; right:-40px; bottom:-50px; width:260px; opacity:.12; z-index:1;} /* ---------------- Testimonials ---------------- */ .testimonials{padding:5rem 0; background:var(--color-bg);} .testimonials__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem;} .quote{ margin:0; background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); padding:1.75rem; display:flex; flex-direction:column; gap:1rem; } .quote__stars{font-size:.85rem; letter-spacing:1px;} .quote blockquote{margin:0; font-size:1.05rem; line-height:1.6; color:var(--color-text);} .quote figcaption{display:flex; align-items:center; gap:.75rem;} .quote__who{display:flex; flex-direction:column; gap:.2rem;} .quote__avatar{width:50px; height:50px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(37,35,31,.18);} .quote__avatar--ini{display:flex; align-items:center; justify-content:center; background:var(--green-100); color:var(--green-700); font-family:var(--font-display); font-weight:700; font-size:1.05rem;} .quote__name{font-family:var(--font-display); font-weight:600; color:var(--color-text);} .quote__role{font-size:.85rem; color:var(--color-text-muted);} .testimonials__note{text-align:center; margin-top:2rem; font-size:.9rem; color:var(--color-text-muted);} /* ---------------- i18n (toggle ES/EN, independiente del país) ---------------- */ html[data-lang="es"] .lang-en{display:none;} html[data-lang="en"] .lang-es{display:none;} /* ---------------- Country toggle ---------------- */ .country-toggle{ font-family:var(--font-display); font-weight:600; font-size:.82rem; line-height:1; padding:.45rem .7rem; border-radius:var(--radius-pill); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); cursor:pointer; white-space:nowrap; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .country-toggle:hover{background:var(--red-50); color:var(--color-primary);} .trust__fda{ max-width:760px; margin:1.5rem auto 0; text-align:center; font-size:.9rem; color:var(--color-text-muted); font-style:italic; } /* ---------------- Barra de autoridad (logos institucionales) ---------------- */ .authority{background:var(--color-surface); padding:2.5rem 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);} .authority__label{text-align:center; font-family:var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone-500); margin:0 0 1.6rem;} .authority__marquee{position:relative; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);} .authority__track{display:flex; align-items:center; gap:3.5rem; width:max-content; animation:authmarquee 30s linear infinite;} .authority__track img{height:64px; width:auto; object-fit:contain; flex:none; mix-blend-mode:multiply; filter:grayscale(1) opacity(.65); transition:filter var(--dur-base) var(--ease-out);} .authority__track img:hover{filter:grayscale(0) opacity(1);} .authority__track img.auth-lg{height:86px;} .authority__marquee:hover .authority__track{animation-play-state:paused;} @keyframes authmarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} @media (prefers-reduced-motion:reduce){ .authority__track{animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:2.5rem;} } /* ---------------- Story / Historia ---------------- */ .story{padding:5rem 0; background:var(--color-surface);} .story__media{margin:2.5rem auto 0; max-width:920px;} .story__media .photo{aspect-ratio:16/9; min-height:0;} .story__body{max-width:760px; margin:2.5rem auto 0; display:flex; flex-direction:column; gap:1.2rem; font-size:1.05rem; line-height:1.75;} .story__body p{margin:0;} .story__tagline{max-width:760px; margin:2rem auto 0; text-align:center; font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--color-primary); text-wrap:balance;} /* ---------------- Impact counters ---------------- */ .impact{background:var(--ink-900); color:#fff; padding:3.5rem 0;} .impact__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center;} .impact__item{display:flex; flex-direction:column; gap:.4rem;} .impact__num{font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,5vw,3rem); color:var(--color-accent); line-height:1;} .impact__label{font-size:.88rem; color:rgba(255,255,255,.8); line-height:1.4;} /* ---------------- Compromiso social ---------------- */ .compromiso{padding:5rem 0; background:var(--color-bg);} .compromiso__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem;} @media (max-width:980px){ .impact__grid{grid-template-columns:repeat(2,1fr);} .compromiso__grid{grid-template-columns:1fr;} } /* ---------------- FAQ ---------------- */ .faq{padding:5rem 0; background:var(--color-surface);} .faq__list{max-width:820px; margin:3rem auto 0; display:flex; flex-direction:column; gap:1rem;} .faq__item{background:var(--cream-50); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden;} .faq__item summary{cursor:pointer; list-style:none; padding:1.2rem 1.4rem; font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--color-text); display:flex; justify-content:space-between; align-items:center; gap:1rem;} .faq__item summary::-webkit-details-marker{display:none;} .faq__item summary::after{content:'+'; font-family:var(--font-display); font-size:1.5rem; line-height:1; color:var(--color-primary); flex:none;} .faq__item[open] summary{color:var(--color-primary);} .faq__item[open] summary::after{content:'–';} .faq__answer{padding:0 1.4rem 1.3rem; color:var(--color-text-muted); line-height:1.65;} .faq__answer p{margin:0;} /* ---------------- Footer ---------------- */ .site-footer{background:var(--ink-900); color:rgba(255,255,255,.7); padding-top:4rem;} .footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem;} .footer__brand{display:flex; flex-direction:column; gap:1rem;} .footer__brand img{width:64px; height:64px; align-self:flex-start;} .footer__brand p{font-size:.9rem; max-width:34ch;} .footer__social{display:flex; gap:.6rem;} .footer__social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; } .footer__social a:hover{border-color:var(--color-primary); background:rgba(230,32,32,.15);} .footer__social img, .footer__social svg{width:17px; height:17px;} .footer__col h4{color:#fff; font-size:.9rem; font-weight:600; margin-bottom:.4rem;} .footer__col a, .footer__col span{display:block; font-size:.9rem; color:rgba(255,255,255,.7); padding:.2rem 0;} .footer__col a:hover{color:#fff;} .footer__pay{ border-top:1px solid rgba(255,255,255,.12); padding:1.4rem 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem 1.1rem; } .footer__pay-label{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6);} .paylist{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; list-style:none; padding:0; margin:0;} .paylist img{height:34px; width:auto; display:block; border-radius:6px; box-shadow:0 1px 5px rgba(0,0,0,.22);} .paylist .paychip-text{display:flex; align-items:center; gap:.35rem; height:34px; padding:0 .6rem; background:#fff; border-radius:6px; box-shadow:0 1px 5px rgba(0,0,0,.22); color:#1f2937; font-size:.72rem; font-weight:700; line-height:1; white-space:nowrap;} .paylist .paychip-text svg{width:18px; height:18px; flex:none;} .footer__bar{ border-top:1px solid rgba(255,255,255,.12); padding:1.5rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; } .footer__credit{text-align:center; font-size:.72rem; color:rgba(255,255,255,.42); margin:.2rem 0 1.2rem;} .footer__credit a{color:inherit; text-decoration:underline;} /* ---------------- Toast ---------------- */ .toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(24px); opacity:0; pointer-events:none; transition:all var(--dur-base) var(--ease-spring); background:var(--ink-900); color:#fff; padding:.75rem 1.25rem; border-radius:var(--radius-pill); box-shadow:var(--shadow-xl); font-family:var(--font-display); font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:.6rem; z-index:100; } .toast.is-on{opacity:1; transform:translateX(-50%) translateY(0);} .toast .i{width:18px; height:18px; color:var(--color-accent);} /* ---------------- Announcement bar ---------------- */ .announce{ background:var(--red-700); color:#fff; text-align:center; padding:.5rem 1rem; font-family:var(--font-body); font-size:.8rem; line-height:1.4; } .announce p{margin:0;} .announce strong{font-weight:800;} .announce__count{font-weight:800;} /* ---------------- Sticky mobile CTA ---------------- */ .sticky-cta{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90; display:none; align-items:center; justify-content:center; gap:.5rem; background:var(--color-primary); color:#fff; text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:1rem; padding:.95rem 1.25rem; border-radius:var(--radius-pill); box-shadow:var(--shadow-lg); opacity:0; transform:translateY(140%); pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring); } .sticky-cta:hover{color:#fff;} @media (max-width:760px){ .sticky-cta{display:flex;} .sticky-cta.is-on{opacity:1; transform:translateY(0); pointer-events:auto;} .site-footer{padding-bottom:88px;} } /* ---------------- Responsive ---------------- */ @media (max-width:980px){ .hero__grid{grid-template-columns:1fr; gap:2.5rem; padding:3rem 0;} .hero__media{max-width:460px;} .features__grid{grid-template-columns:repeat(2,1fr);} .spotlight__grid{grid-template-columns:minmax(0,1fr); gap:2.5rem;} .catalog__grid{grid-template-columns:repeat(2,1fr);} .trust__grid,.testimonials__grid{grid-template-columns:repeat(2,1fr);} .newsletter__inner{grid-template-columns:1fr; gap:1.5rem;} .footer__grid{grid-template-columns:1fr 1fr;} .header__nav{display:none;} } @media (max-width:560px){ .features__grid, .catalog__grid, .trust__grid, .testimonials__grid{grid-template-columns:1fr;} .footer__grid{grid-template-columns:1fr;} .newsletter__band{padding:2.5rem 1.5rem;} .section-head h2{font-size:1.9rem;} .footer__bar{flex-direction:column;} /* --- Móvil: evitar desbordes horizontales --- */ .btn--lg{white-space:normal;} /* texto largo del CTA puede cortar, no desbordar */ .header__actions{gap:.4rem;} .header__actions a.icon-btn{display:none;} /* IG (ya está en el footer) para que quepan los toggles */ .newsletter__mark{display:none;} /* marca decorativa que se salía del ancho */ } @media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important; scroll-behavior:auto !important;} }