:root {
    --red: #9A0002;
    --red-dark: #780002;
    --beige: #EFE6DE;
    --cream: #F3E9B5;
    --white: #F8F8F8;
    --yellow: #F5CB58;
    --ink: #1A1A1A;
    --muted: #5e5550;
    --rule: rgba(26, 26, 26, 0.14);
    --font: "Figtree", Arial, sans-serif;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 112px; -webkit-text-size-adjust: 100%; }
html.lenis { scroll-behavior: auto; height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .panel-title, .stat-number { font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
h2 { font-size: clamp(28px, 3.1vw, 44px); }

.wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 160ms ease-out, background-color 220ms ease, color 220ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-red { background: var(--red); color: var(--white); }
.btn-go { gap: 14px; min-height: 54px; padding: 7px 8px 7px 24px; font-size: 16px; }
.btn-go-light { background: #fff; color: var(--red); box-shadow: 0 10px 24px rgba(40, 0, 0, 0.28); }
.btn-go-dark { background: var(--red-dark); color: var(--white); box-shadow: inset 0 0 0 1px rgba(248, 248, 248, 0.22); }
.btn-go-red { background: var(--red); color: var(--white); }
.btn-arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: transform 280ms var(--ease-soft);
}
.btn-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-arrow-wa svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.btn-go-light .btn-arrow { background: var(--red); color: #fff; }
.btn-go-dark .btn-arrow, .btn-go-red .btn-arrow { background: var(--white); color: var(--red); }
@media (hover: hover) and (pointer: fine) {
    .btn-red:hover { background: var(--red-dark); }
    .btn-go-light:hover { background: var(--beige); }
    .btn-go-dark:hover { background: #5f0002; }
    .btn-go:hover .btn-arrow { transform: translateX(3px); }
}

/* Menú flotante */
.nav-wrap {
    position: fixed;
    inset: 16px 0 auto;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding-inline: 16px;
    pointer-events: none;
}
.nav {
    --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-time: 520ms;
    --shift: max(0px, calc((min(100vw - 32px, 1040px) - 920px) / 2));
    position: relative;
    isolation: isolate;
    pointer-events: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1040px;
    padding: 10px 12px;
}
/* Se encoge moviendo dos mitades que se solapan: solo translate y opacity */
.nav-fill, .nav-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    pointer-events: none;
    will-change: translate;
    transition: translate var(--nav-time) var(--nav-ease), opacity 320ms ease;
}
.nav-fill { z-index: -1; background: var(--white); transition: translate var(--nav-time) var(--nav-ease), background-color 320ms ease; }
.nav-shadow { z-index: -2; opacity: 0; box-shadow: 0 10px 28px rgba(50, 5, 5, 0.3); }
.nav-l { left: 0; border-radius: 999px 0 0 999px; }
.nav-fill.nav-l { width: calc(50% + 1px); }
.nav-r { right: 0; border-radius: 0 999px 999px 0; }
.nav-shadow.nav-l { clip-path: inset(-44px var(--shift) -44px -44px); }
.nav-shadow.nav-r { clip-path: inset(-44px -44px -44px var(--shift)); }
.nav.is-compact .nav-shadow { opacity: 1; }
.nav.is-compact .nav-fill { background: var(--red); }
.nav.is-compact .nav-l { translate: var(--shift) 0; }
.nav.is-compact .nav-r { translate: calc(var(--shift) * -1) 0; }
.nav-logo, .nav-right {
    will-change: translate;
    transition: translate var(--nav-time) var(--nav-ease), transform 160ms ease-out;
}
.nav.is-compact .nav-logo { translate: var(--shift) 0; }
.nav.is-compact .nav-right, .nav.is-compact .nav-toggle { translate: calc(var(--shift) * -1) 0; }
.nav-logo { display: block; justify-self: start; margin-left: 14px; }
.nav-logo:active { transform: scale(0.97); }
.nav-logo img { width: auto; height: 54px; transition: filter 320ms ease; }
.nav.is-compact .nav-logo img { filter: brightness(0) invert(1); }
.nav-right { display: flex; align-items: center; justify-self: end; }
.nav-links { display: flex; gap: 24px; font-size: 15px; font-weight: 500; }
.nav-links a { text-decoration: none; white-space: nowrap; transition: color 320ms ease; }
.nav.is-compact .nav-links a { color: var(--white); }
.btn-nav { min-height: 50px; padding: 0 24px; font-size: 15px; transition: color 320ms ease, background-color 320ms ease, transform 160ms ease-out; }
.nav.is-compact .btn-nav { background: #fff; color: var(--red); }
@media (hover: hover) and (pointer: fine) {
    .nav-links a:hover { color: var(--red); }
    .nav.is-compact .nav-links a:hover { color: var(--yellow); }
    .nav.is-compact .btn-nav:hover { background: var(--beige); }
}

.nav-toggle {
    display: none;
    position: relative;
    flex: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--red);
    cursor: pointer;
    transition: translate var(--nav-time) var(--nav-ease), background-color 320ms ease;
}
.nav.is-compact .nav-toggle { background: #fff; }
.nav-toggle span {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 2px;
    background: var(--white);
    transition: transform 240ms var(--ease-out), background-color 320ms ease;
}
.nav.is-compact .nav-toggle span { background: var(--red); }
.nav-toggle span:nth-child(1) { top: 19px; }
.nav-toggle span:nth-child(2) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav {
    position: absolute;
    top: 84px;
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 18px 44px rgba(60, 10, 10, 0.18);
    font-size: 16px;
    font-weight: 500;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 180ms ease-out, transform 220ms var(--ease-out), visibility 220ms;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a:not(.btn) { padding: 12px; text-decoration: none; }
.mobile-nav .btn { margin-top: 8px; }

/* Primera pantalla */
.hero { overflow: hidden; background: var(--red); color: var(--white); }
.hero-inner { display: flex; flex-direction: column; align-items: center; padding-top: 132px; text-align: center; }
.hero-label { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--cream); font-size: 15px; font-weight: 500; animation: fade-up 1000ms 460ms var(--ease-soft) both; }
.hero-label svg { width: 16px; height: 16px; fill: currentColor; }
h1 { font-size: clamp(34px, 4vw, 56px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; }
.line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line > span { display: block; animation: rise 1100ms var(--ease-soft) both; }
.line-accent { color: var(--yellow); }
.line-accent > span { animation-delay: 110ms; }
.hero-description {
    max-width: 480px;
    margin-top: 18px;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.42;
    animation: fade-up 1000ms 280ms var(--ease-soft) both;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    animation: fade-up 1000ms 380ms var(--ease-soft) both;
}
.hero-visual {
    position: relative;
    margin-top: 36px;
    margin-bottom: -270px;
    animation: hero-visual 1300ms 180ms var(--ease-soft) both;
}
.phone-wrap { will-change: transform; }
.phone {
    display: block;
    width: clamp(230px, 21vw, 300px);
    padding: 8px;
    border-radius: 40px;
    background: #140404;
    box-shadow: 0 34px 70px rgba(30, 0, 0, 0.42);
    transition: transform 420ms var(--ease-soft);
}
.phone img { width: 100%; border-radius: 33px; }
.float { position: absolute; will-change: transform; }
.float-card {
    --tilt: 0deg;
    display: block;
    border-radius: 16px;
    transform: rotate(var(--tilt));
    transition: transform 420ms var(--ease-soft);
}
.float-card img { border-radius: 16px; box-shadow: 0 22px 48px rgba(30, 0, 0, 0.32); transition: box-shadow 320ms ease; }
.float-card.is-tracking { transition: transform 120ms ease-out; }
.float-a { z-index: 2; top: 5%; right: calc(100% + 22px); width: 248px; }
.float-a .float-card { --tilt: -5deg; }
.float-b { z-index: 2; top: 13%; left: calc(100% + 22px); width: 248px; }
.float-b .float-card { --tilt: 4deg; }
.float-c { z-index: 1; top: 19%; right: calc(100% + 280px); width: 218px; }
.float-c .float-card { --tilt: 3deg; }
.float-d { z-index: 1; top: 3%; left: calc(100% + 280px); width: 218px; }
.float-d .float-card { --tilt: -4deg; }
.float:hover, .float:focus-within { z-index: 5; }
.float-card:focus-visible { transform: rotate(0deg) scale(1.08); }
@media (hover: hover) and (pointer: fine) {
    .phone:hover { transform: translateY(-8px); }
    .float-card:hover { transform: rotate(0deg) scale(1.1); }
    .float-card:hover img { box-shadow: 0 30px 64px rgba(30, 0, 0, 0.48); }
}
.float-card:active { transform: rotate(0deg) scale(1.04); }

@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-visual { from { transform: translateY(90px); } to { transform: none; } }

/* Entradas al hacer scroll: solo se ocultan si hay JS */
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1000ms var(--ease-soft) var(--delay, 0ms), transform 1000ms var(--ease-soft) var(--delay, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Datos */
.stats { padding-block: clamp(56px, 6.5vw, 88px); text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.js .reveal.stat { opacity: 1; transform: none; transition: none; }
.stat-number { overflow: hidden; color: var(--red); font-size: clamp(42px, 4.4vw, 62px); font-weight: 800; }
.stat-number span { display: block; }
.stat-number [data-count] { position: relative; width: max-content; margin-inline: auto; font-variant-numeric: tabular-nums; }
.stat-number .is-counting { color: transparent; }
.stat-number .is-counting::after { content: attr(data-live); position: absolute; left: 50%; top: 0; color: var(--red); translate: -50% 0; white-space: nowrap; }
.js .stat .stat-number span:not([data-count]) { transform: translateY(102%); transition: transform 1100ms var(--ease-soft) 120ms; }
.js .stat.is-in .stat-number span:not([data-count]) { transform: none; }
.stat p { max-width: 290px; margin: 10px auto 0; font-size: 15px; color: var(--muted); }

/* Establecimientos */
.allies { padding-block: clamp(44px, 5vw, 68px); background: var(--red); color: var(--white); text-align: center; }
.allies-title { margin-bottom: 30px; font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.01em; }
.ticker {
    display: flex;
    overflow: hidden;
    padding-block: 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track { flex: none; display: flex; gap: 18px; padding-right: 18px; animation: ticker 64s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ally { display: block; border-radius: 20px; transition: transform 280ms var(--ease-soft); }
.ally img { width: 148px; height: 148px; border-radius: 20px; object-fit: cover; }
@keyframes ticker { to { transform: translateX(-100%); } }
@media (hover: hover) and (pointer: fine) {
    .ally:hover { transform: translateY(-4px); }
}

/* Por qué usar Bocati */
.why { padding-block: clamp(60px, 7vw, 100px); background: var(--beige); text-align: center; }
.kicker { margin-bottom: 12px; color: var(--red); font-size: 15px; font-weight: 600; }
.section-head { max-width: 640px; margin-inline: auto; }
.why-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1140px; margin: clamp(28px, 3.4vw, 44px) auto 0; }
.why-group { padding: clamp(20px, 2.2vw, 30px); border-radius: 24px; }
.why-group-users { background: #fff; }
.why-group-business { background: var(--red); color: var(--white); }
.why-audience {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.why-group-business .why-audience { background: #fff; color: var(--red); }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.why-photo { position: relative; overflow: hidden; border-radius: 18px; }
.why-photo img { width: 100%; transition: transform 900ms var(--ease-soft); }
.why-card h3 { margin-top: 14px; font-size: clamp(18px, 1.5vw, 20px); }
.why-card p { max-width: 220px; margin: 6px auto 0; font-size: 15px; color: var(--muted); }
.why-group-business .why-card p { color: rgba(248, 248, 248, 0.86); }
.discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 62px;
    height: 62px;
    filter: drop-shadow(0 6px 12px rgba(40, 0, 0, 0.35));
    transform: rotate(-12deg);
    transition: transform 420ms var(--ease-soft);
}
.discount-badge svg { display: block; width: 100%; height: 100%; }
.discount-badge .burst { fill: var(--red); }
.discount-badge text { fill: #fff; font-family: var(--font); font-size: 28px; font-weight: 800; }
.js .why-group .discount-badge { transform: rotate(-30deg) scale(0.7); opacity: 0; transition: transform 800ms var(--ease-soft) 420ms, opacity 300ms ease 420ms; }
.js .why-group.is-in .discount-badge { transform: rotate(-12deg); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .why-card:hover .why-photo img { transform: scale(1.05); }
    .js .why-group.is-in .why-card:hover .discount-badge { transform: rotate(0deg) scale(1.12); transition-delay: 0ms; }
}

/* Descarga y negocios */
.closing { padding-top: clamp(40px, 5vw, 64px); }
.closing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding: clamp(28px, 3.2vw, 44px);
    border-radius: 24px;
    text-align: center;
}
.panel h2, .panel-title { font-size: clamp(26px, 2.6vw, 36px); }
.panel p:not(.panel-title) { max-width: 400px; margin: 10px auto 0; }
.panel-red { background: var(--red); color: var(--white); }
.panel-soft { justify-content: center; background: var(--beige); }
.store-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 158px;
    height: 58px;
    padding: 0 16px 0 13px;
    border-radius: 9px;
    background: #fff;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.05;
    text-align: left;
    text-decoration: none;
    transition: transform 160ms ease-out, box-shadow 220ms ease;
}
.store-btn:active { transform: scale(0.97); }
.store-btn svg { flex: none; width: 28px; height: 28px; }
.store-btn small { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.store-btn small.caps { font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
    .store-btn:hover { box-shadow: 0 10px 24px rgba(40, 0, 0, 0.3); }
}

/* Preguntas frecuentes */
.faq { padding-block: clamp(60px, 7vw, 100px); }
.faq-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.faq h2 { text-align: center; }
.faq-list { width: min(760px, 100%); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 17px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: clamp(16px, 1.2vw, 17px);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: color 200ms ease;
}
.faq-icon { position: relative; flex: none; width: 14px; height: 14px; transition: transform 320ms var(--ease-soft); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: currentColor; }
.faq-icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq-icon::after { top: 0; left: 6px; width: 2px; height: 14px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 1fr; }
.js .faq-answer { grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-soft); }
.js .faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; min-height: 0; }
.faq-answer p { padding-bottom: 20px; font-size: 15px; color: var(--muted); }
.faq-answer a { color: var(--red); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
    .faq-question:hover { color: var(--red); }
}

/* Pie de página */
.footer { padding-block: 8px 40px; font-size: 14px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-logo { width: auto; height: 62px; margin-bottom: 14px; }
.footer-contact { text-decoration: none; }
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block: 22px; }
.social-links a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--red); color: #fff; transition: background-color 220ms ease, transform 160ms ease-out; }
.social-links a:active { transform: scale(0.95); }
.social-links svg { width: 24px; height: 24px; fill: currentColor; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.footer-links a { text-decoration: none; }
.footer-copy { margin-top: 10px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
    .social-links a:hover { background: var(--red-dark); }
    .footer-links a:hover, .footer-contact:hover { color: var(--red); }
}

/* Páginas de establecimientos y usuarios */
.page-b2c .hero-visual { margin-bottom: -170px; }
.hero-kicker { margin-bottom: 16px; color: var(--cream); font-size: 15px; font-weight: 500; animation: fade-up 1000ms 60ms var(--ease-soft) both; }
.hero-actions-stores { align-items: center; margin-top: 26px; }
.store-btn-web { justify-content: center; font-size: 18px; font-weight: 600; }
.store-btn-web svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linejoin: round; }
.hero-visual-panel { width: min(880px, 100%); margin-top: 40px; margin-bottom: -120px; }
.browser { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 34px 70px rgba(30, 0, 0, 0.42); will-change: transform; }
.browser-bar { display: flex; gap: 6px; padding: 12px 14px; background: #f1ece7; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(26, 26, 26, 0.18); }
.hero-visual-panel .float-a { top: 20%; right: calc(100% - 70px); width: 212px; }
.hero-visual-panel .float-b { top: 32%; left: calc(100% - 70px); width: 212px; }

.overview { padding-block: clamp(60px, 7vw, 100px) clamp(36px, 4vw, 56px); text-align: center; }
.about { position: relative; isolation: isolate; overflow: hidden; max-width: 920px; margin: 16px auto 0; border-radius: 24px; background: var(--beige); }
.about-photo { position: absolute; inset: 0; z-index: -1; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0.07; }
.about-copy { max-width: 680px; margin-inline: auto; padding: clamp(36px, 4.4vw, 56px) clamp(20px, 3vw, 32px); }
.about-copy .kicker { margin-bottom: 10px; }
.about-title { font-size: clamp(23px, 2.3vw, 30px); line-height: 1.14; }
.about-text { display: grid; grid-template-rows: 1fr; text-align: left; }
.js .about-text { grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease-soft); }
.js .about-text.is-open { grid-template-rows: 1fr; }
.about-text > div { overflow: hidden; min-height: 0; }
.about-text p { padding-top: 16px; font-size: 16px; line-height: 1.5; }
.about-toggle { display: none; align-items: center; gap: 6px; min-height: 44px; margin-top: 20px; padding: 0 16px 0 20px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 220ms ease, transform 160ms ease-out; }
.js .about-toggle { display: inline-flex; }
.about-toggle:active { transform: scale(0.97); }
.about-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--ease-soft); }
.about-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
    .about-toggle:hover { background: var(--red-dark); }
}
.benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; }
.benefit { display: inline-flex; align-items: center; gap: 7px; color: var(--red); font-size: 14px; }
.benefit strong { font-weight: 600; }
.benefit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin-inline: auto; }
.type-card { padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(24px, 2.6vw, 32px); border-radius: 24px; }
.type-card-soft { background: var(--beige); }
.type-card-red { background: var(--red); color: var(--white); }
.type-photo { overflow: hidden; margin-bottom: 18px; border-radius: 18px; aspect-ratio: 16 / 10; }
.type-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); }
.type-card .why-audience { margin-bottom: 12px; }
.type-card-red .why-audience { background: #fff; color: var(--red); }
.type-card h3 { font-size: clamp(20px, 1.8vw, 24px); }
.type-card p { max-width: 340px; margin: 8px auto 0; font-size: 15px; color: var(--muted); }
.type-card-red p { color: rgba(248, 248, 248, 0.86); }
@media (hover: hover) and (pointer: fine) {
    .type-card:hover .type-photo img { transform: scale(1.05); }
}

.stats-tight { padding-block: clamp(36px, 4vw, 56px) clamp(56px, 6.5vw, 88px); }
.stats-note { margin-top: 26px; color: var(--muted); font-size: 13px; }
.stat-solo p { max-width: 380px; }

.how { padding-block: clamp(60px, 7vw, 100px); background: var(--beige); text-align: center; }
.how-title { margin-bottom: clamp(32px, 4vw, 48px); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 980px; margin-inline: auto; }
.steps::before { content: ""; position: absolute; top: 23px; left: 16.66%; right: 16.66%; height: 2px; background: var(--red); transform-origin: left; }
.step { position: relative; }
.step-badge { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; background: var(--red); color: #fff; font-size: 18px; font-weight: 700; }
.step h3 { max-width: 270px; margin-inline: auto; font-size: clamp(18px, 1.5vw, 20px); }
.step p { max-width: 280px; margin: 8px auto 0; color: var(--muted); font-size: 15px; }
.js .steps.reveal { opacity: 1; transform: none; transition: none; }
.js .steps::before { transform: scaleX(0); transition: transform 1400ms var(--ease-soft) 150ms; }
.js .steps.is-in::before { transform: none; }
.js .step { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft); transition-delay: calc(var(--i) * 170ms); }
.js .steps.is-in .step { opacity: 1; transform: none; }

.workflow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 740px; margin: clamp(40px, 5vw, 64px) auto 0; }
.workflow-card { display: flex; flex-direction: column; overflow: hidden; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px) 0; border-radius: 24px; background: #fff; }
.workflow-copy .kicker { display: block; margin-bottom: 8px; }
.workflow-copy h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.16; }
.workflow-copy p { max-width: 340px; margin: 10px auto 0; color: var(--muted); font-size: 15px; }
.workflow-shot { margin: auto calc(clamp(20px, 3vw, 36px) * -1) 0; padding-top: 24px; }
.workflow-shot img { width: 100%; }

.how-shot { margin-top: clamp(36px, 4vw, 52px); }
.how-shot img { width: clamp(150px, 14vw, 190px); margin-inline: auto; filter: drop-shadow(0 22px 34px rgba(50, 5, 5, 0.22)); }

.voices { padding-block: clamp(52px, 6vw, 80px) clamp(12px, 2vw, 24px); text-align: center; }
.voices-title { margin-bottom: clamp(22px, 2.6vw, 32px); font-size: clamp(22px, 2.2vw, 30px); }
.ticker-quotes { align-items: stretch; }
.ticker-quotes .ticker-track { align-items: stretch; gap: 12px; padding-right: 12px; animation-duration: 70s; }
.quote { display: flex; flex-direction: column; width: 248px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 16px; background: #fff; text-align: left; }
.quote-stars { color: var(--yellow); font-size: 12px; letter-spacing: 0.08em; }
.quote h3 { margin-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.quote p { margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.quote-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; color: var(--muted); font-size: 12px; }
.quote-meta strong { flex: none; font-weight: 500; }

.closing-single { grid-template-columns: minmax(0, 1fr); }
.panel-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.faq-title { font-size: clamp(28px, 3.1vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }

/* Menú: página actual */
.nav-links a[aria-current="page"] { color: var(--red); font-weight: 600; }
.nav.is-compact .nav-links a[aria-current="page"] { color: var(--yellow); }
.mobile-nav a[aria-current="page"] { color: var(--red); font-weight: 600; }

/* Páginas interiores */
.page-doc main { padding-bottom: clamp(48px, 6vw, 80px); }
.hero-page .hero-inner { padding-bottom: clamp(84px, 8vw, 112px); }
.hero-page h1 { max-width: 820px; font-size: clamp(32px, 3.6vw, 50px); }
.hero-page .hero-description { max-width: 640px; }
.btn-white { background: #fff; color: var(--red); }
.btn-line { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); color: #fff; }
.btn-line-red { box-shadow: inset 0 0 0 1px rgba(154, 0, 2, 0.35); color: var(--red); }
.doc { width: min(920px, 100% - 40px); margin-inline: auto; }
.doc-photos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(920px, 100% - 40px); margin: -56px auto 16px; }
.doc-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.doc-section { padding-block: clamp(30px, 3.6vw, 48px); }
.doc-section + .doc-section { border-top: 1px solid var(--rule); }
.doc-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; }
.doc-row-wide { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.doc-section h2, .doc-panel h2 { font-size: clamp(23px, 2.3vw, 30px); line-height: 1.14; }
.doc-body p + p, .doc-body p + ul, .doc-body ul + p { margin-top: 12px; }
.doc-body a { color: var(--red); font-weight: 600; }
.about-list { display: grid; gap: 10px; margin-top: 12px; }
.about-list li { position: relative; padding-left: 18px; }
.about-list li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.about-fact { padding: 16px 18px; border-radius: 16px; background: var(--beige); }
.about-fact dt { color: var(--muted); font-size: 13px; }
.about-fact dd { margin: 3px 0 0; font-weight: 600; line-height: 1.3; }
.founder-card { padding: clamp(20px, 2.4vw, 28px); border-radius: 20px; background: var(--beige); }
.founder-card h3 { font-size: 20px; }
.founder-role { margin-top: 4px; color: var(--red); font-size: 15px; font-weight: 600; }
.founder-card .founder-role + p { margin-top: 12px; }
.doc-panel { margin-top: clamp(14px, 2vw, 24px); padding: clamp(32px, 4vw, 48px) clamp(20px, 3vw, 40px); border-radius: 24px; background: var(--red); color: var(--white); text-align: center; }
.doc-panel p { max-width: 620px; margin: 12px auto 0; }
.doc-panel p a { color: inherit; font-weight: 600; }
.about-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.doc-lift { position: relative; display: flex; justify-content: center; width: min(560px, 100% - 40px); margin: -56px auto 0; }
.whatsapp-card, .legal-card, .manual-links { width: 100%; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 24px; background: #fff; box-shadow: 0 18px 44px rgba(60, 10, 10, 0.1); text-align: center; }
.whatsapp-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--red); }
.whatsapp-icon svg { width: 26px; height: 26px; fill: #fff; }
.whatsapp-card h3 { font-size: 22px; }
.whatsapp-card p { margin: 8px 0 18px; }
.btn-whatsapp { gap: 10px; }
.btn-whatsapp svg { width: 20px; height: 20px; fill: currentColor; }
.account-deletion-section { max-width: 720px; margin: clamp(40px, 5vw, 64px) auto 0; }
.account-deletion-section h3 { font-size: clamp(23px, 2.3vw, 30px); line-height: 1.14; }
.account-deletion-section > p { margin-top: 12px; color: var(--muted); }
.deletion-info { margin-top: 20px; padding: clamp(20px, 2.4vw, 28px); border-radius: 20px; background: var(--beige); }
.deletion-info h4 { margin: 0 0 10px; font-size: 17px; }
.deletion-info ul { display: grid; gap: 6px; padding-left: 20px; list-style: disc; font-size: 15px; }
.deletion-info p { margin-top: 16px; color: var(--muted); font-size: 14px; }
.legal-card { display: flex; flex-direction: column; align-items: center; }
.language-selector { display: inline-flex; gap: 4px; margin-bottom: 24px; padding: 4px; border-radius: 999px; background: var(--beige); }
.language-btn { min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 220ms ease, color 220ms ease; }
.language-btn.active { background: var(--red); color: #fff; }
.pdf-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pdf-icon { width: 44px; height: 44px; color: var(--red); }
.pdf-actions > p { font-size: 18px; font-weight: 600; line-height: 1.25; }
.pdf-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.download-link { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--red); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color 220ms ease, transform 160ms ease-out; }
.download-link:active { transform: scale(0.97); }
.download-link svg { width: 17px; height: 17px; }
.download-link[download] { background: transparent; box-shadow: inset 0 0 0 1px rgba(154, 0, 2, 0.35); color: var(--red); }
.download-logo-wrap { margin-bottom: 14px; }
.download-logo-wrap img { width: auto; height: 64px; filter: brightness(0) invert(1); }
.spinner { width: 38px; height: 38px; margin-top: 22px; border: 3px solid rgba(255, 255, 255, 0.28); border-top-color: #fff; border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.manual-links { display: none; }
.manual-links.show { display: block; }
.manual-links .store-buttons { flex-direction: column; align-items: center; margin-top: 14px; }
.manual-links .store-buttons .btn { width: min(280px, 100%); }
@media (hover: hover) and (pointer: fine) {
    .btn-white:hover { background: var(--beige); }
    .btn-line:hover { background: rgba(255, 255, 255, 0.12); }
    .btn-line-red:hover, .download-link[download]:hover { background: var(--beige); }
    .download-link:not([download]):hover { background: var(--red-dark); }
}
@media (max-width: 760px) {
    .doc-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -48px; }
    .doc-photos img:nth-child(n + 3) { display: none; }
}

/* Pantallas medianas */
@media (max-width: 1290px) {
    .float-c, .float-d { display: none; }
}
@media (max-width: 1000px) {
    .nav { grid-template-columns: minmax(0, 1fr) auto auto; }
    .nav-links { display: none; }
    .nav-toggle { display: block; }
    .mobile-nav { display: flex; }
    .float-a, .float-b { width: 190px; }
    .float-a { right: calc(100% - 8px); }
    .float-b { left: calc(100% - 8px); }
}
@media (max-width: 1160px) {
    .hero-visual-panel .float-a { right: calc(100% - 160px); width: 172px; }
    .hero-visual-panel .float-b { left: calc(100% - 160px); width: 172px; }
}
@media (max-width: 900px) {
    .why-groups { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .types { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .workflow { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
    .about { max-width: 520px; }
}

/* Móvil */
@media (max-width: 680px) {
    .wrap { width: calc(100% - 32px); }
    .nav { gap: 8px; padding: 7px 8px; }
    .nav-logo { margin-left: 10px; }
    .nav-logo img { height: 46px; }
    .btn-nav { min-height: 44px; padding: 0 16px; font-size: 14px; }
    .nav-toggle { width: 44px; height: 44px; }
    .nav-toggle span { left: 13px; }
    .nav-toggle span:nth-child(1) { top: 18px; }
    .nav-toggle span:nth-child(2) { top: 25px; }
    .mobile-nav { top: 72px; }
    .hero-inner { padding-top: 108px; }
    h1 { font-size: clamp(32px, 9.4vw, 52px); }
    .hero-label { margin-top: 16px; }
    .hero-description { margin-top: 14px; font-size: 16px; }
    .hero-actions { margin-top: 20px; width: 100%; }
    .hero-actions .btn { flex: 0 0 auto; }
    .hero-visual { margin-top: 28px; margin-bottom: -180px; }
    .phone { width: 210px; border-radius: 34px; padding: 6px; }
    .phone img { border-radius: 29px; }
    .float-a { top: 3%; right: calc(100% - 44px); width: 128px; }
    .float-b { top: 3%; left: calc(100% - 44px); width: 128px; }
    .float-card, .float-card img { border-radius: 11px; }
    .stats-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .ticker-track { gap: 12px; padding-right: 12px; }
    .ally, .ally img { border-radius: 16px; }
    .ally img { width: 112px; height: 112px; }
    .why-photo { border-radius: 14px; }
    .why-card p { font-size: 14px; }
    .discount-badge { width: 50px; height: 50px; top: 6px; left: 6px; }
    .closing-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-visual-panel { margin-top: 28px; margin-bottom: -40px; }
    .hero-visual-panel .float-a { top: 16%; right: calc(100% - 104px); width: 112px; }
    .hero-visual-panel .float-b { top: 24%; left: calc(100% - 104px); width: 112px; }
    .hero-actions-stores .store-buttons { width: 100%; }
    .hero-actions-stores .store-btn-web { flex: 0 0 auto; min-width: 180px; }
    .page-b2c .hero-visual { margin-bottom: -110px; }
    .browser { border-radius: 12px; }
    .browser-bar { padding: 8px 10px; }
    .browser-bar i { width: 7px; height: 7px; }
    .panel-actions { width: 100%; }
    .workflow { max-width: 310px; }
    .panel .panel-actions .btn { width: auto; }
    .steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .steps::before { display: none; }
    .quote { width: 230px; }
    .panel .btn { width: 100%; }
    .store-buttons { width: 100%; }
    .store-btn { flex: 1 1 150px; justify-content: center; }
}

/* Movimiento reducido: quita desplazamientos, conserva cambios de opacidad */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .line > span, .hero-label, .hero-kicker, .hero-description, .hero-actions, .hero-visual { animation: none; }
    .ticker { overflow-x: auto; }
    .ticker-track { animation: none; }
    .js .reveal { transform: none; }
    .js .stat .stat-number span:not([data-count]) { transform: none; transition: none; }
    .nav-fill, .nav-shadow, .nav-logo, .nav-right, .nav-toggle { transition: none; }
    .why-photo img, .float-card, .phone { transition: none; }
    .js .why-group .discount-badge { transform: rotate(-12deg); opacity: 1; transition: none; }
    .js .step { transform: none; }
    .js .about-text { transition: none; }
    .js .steps::before { transform: none; transition: none; }
    .type-photo img { transition: none; }
    .spinner { animation-duration: 2.4s; }
}