/* =====================================================================
   Propuestas GBP · sistema de diseño
   La marca del cliente se define SOLO en el bloque :root del index.html
   (colores y tipografías). Este archivo no se toca por cliente.
   ===================================================================== */
:root{
  /* Valores por defecto (se sobreescriben en index.html) */
  --marca:#0e2362;          /* color oscuro principal: hero y secciones oscuras */
  --marca-2:#16307f;        /* variante un poco más clara */
  --acento:#59b5a7;         /* acento suave: etiquetas sobre fondo oscuro */
  --acento-vivo:#12a6b1;    /* botones, checks, burbujas del agente */
  --sobre-acento:#ffffff;   /* texto encima del acento vivo */
  --suave:#f4f6f5;          /* fondo claro de tarjetas y secciones */
  --tinta:#16202b;          /* texto principal */
  --gris:#6b7580;           /* texto secundario */
  --borde:#e3e8e6;
  --f-titulos:'Space Grotesk', sans-serif;
  --f-texto:'Inter', sans-serif;
  --radio:16px;
  --sombra:0 20px 50px -25px color-mix(in srgb, var(--marca) 45%, transparent);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--f-texto); color:var(--tinta); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--f-titulos); font-weight:600; line-height:1.15; color:var(--marca);}
h2{font-size:clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom:1rem;}
h3{font-size:1.25rem; margin-bottom:.5rem;}
p{color:var(--gris);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1080px; margin:0 auto; padding:0 24px;}
.container--center{text-align:center; display:flex; flex-direction:column; align-items:center;}

/* ===== Barra de progreso y animaciones ===== */
.progress-bar{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--acento-vivo); z-index:200; transition:width .1s linear;}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.stagger-item{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.stagger-item.is-visible{opacity:1; transform:translateY(0);}

/* ===== Nav ===== */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:transparent; transition:background .3s ease, box-shadow .3s ease, padding .3s ease;}
.nav.is-scrolled{background:rgba(255,255,255,.92); backdrop-filter:blur(10px); box-shadow:0 8px 30px -20px rgba(0,0,0,.3); padding:10px 32px;}
.nav__brand{display:grid;}
.nav__brand-logo{grid-area:1/1; height:34px; width:auto; transition:opacity .2s ease;}
.nav__brand-logo--color{opacity:0;}
.nav.is-scrolled .nav__brand-logo--claro{opacity:0;}
.nav.is-scrolled .nav__brand-logo--color{opacity:1;}
.nav__links{display:flex; align-items:center; gap:28px; font-size:.92rem; font-weight:500; color:#fff;}
.nav.is-scrolled .nav__links{color:var(--marca);}
.nav__links a{opacity:.85; transition:opacity .2s;}
.nav__links a:hover{opacity:1;}
.nav__cta{background:var(--acento-vivo); color:var(--sobre-acento) !important; padding:9px 18px; border-radius:999px; opacity:1 !important;}

/* ===== Hero ===== */
.hero{position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--marca); color:#fff; overflow:hidden; padding:120px 24px 60px;}
.hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22;}
.hero__texture{position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--marca) 75%, transparent), color-mix(in srgb, var(--marca) 96%, transparent) 70%), radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--acento) 35%, transparent), transparent 45%);}
.hero__content{position:relative; z-index:2; max-width:780px;}
.eyebrow{font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--acento); font-weight:600; margin-bottom:22px;}
.hero__logo{max-height:96px; max-width:280px; width:auto; margin:0 auto 28px;}
.hero__logo--tarjeta{max-height:none; max-width:200px; border-radius:var(--radio); box-shadow:0 30px 60px -30px rgba(0,0,0,.6);}
.hero__title{color:#fff; font-size:clamp(2rem, 4.2vw, 3.4rem); margin-bottom:18px;}
.hero__subtitle{font-size:1.15rem; color:rgba(255,255,255,.82); max-width:640px; margin:0 auto 28px;}
.hero__meta{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:44px;}
.hero__meta span{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); padding:8px 16px; border-radius:999px; font-size:.88rem;}
.hero__scroll{display:inline-flex; flex-direction:column; align-items:center; gap:10px; font-size:.85rem; color:rgba(255,255,255,.7);}
.hero__scroll-line{width:1px; height:36px; background:linear-gradient(180deg, var(--acento), transparent);}
.hero__credit{position:relative; z-index:2; margin-top:40px; font-size:.85rem; color:rgba(255,255,255,.55);}

/* ===== Secciones ===== */
.section{padding:110px 0; scroll-margin-top:84px;}
.section--blanco{background:#fff;}
.section--suave{background:var(--suave);}
.section--oscura{background:var(--marca); color:#fff;}
.section--oscura h2, .section--oscura h3{color:#fff;}
.section--oscura-2{background:var(--marca-2);} /* para separar dos secciones oscuras seguidas */
.tag{display:inline-block; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--acento-vivo); margin-bottom:14px;}
.tag--light{color:var(--acento);}
.section__lead{font-size:1.1rem; max-width:680px; color:var(--gris); margin-bottom:20px;}
.section__lead--light{color:rgba(255,255,255,.78);}

/* ===== Te escuchamos (checklist) ===== */
.checklist{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:36px;}
.checklist__item{display:flex; gap:14px; align-items:flex-start; background:var(--suave); border-radius:12px; padding:18px 20px;}
.section--suave .checklist__item{background:#fff;}
.checklist__mark{flex:none; width:26px; height:26px; border-radius:50%; background:var(--acento-vivo); color:var(--sobre-acento); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;}
.checklist__item p{color:var(--tinta); font-size:.98rem;}
.cita{margin-top:34px; padding:20px 24px; border-left:4px solid var(--acento-vivo); background:var(--suave); border-radius:0 12px 12px 0; font-size:1.05rem; color:var(--tinta); font-style:italic;}
.cita span{display:block; margin-top:8px; font-style:normal; font-size:.85rem; color:var(--gris);}

/* ===== Comparación (rentar vs tener) ===== */
.comparison{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;}
.comparison__col{border-radius:var(--radio); padding:32px;}
.comparison__col--bad{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);}
.comparison__col--good{background:color-mix(in srgb, var(--acento) 14%, transparent); border:1px solid color-mix(in srgb, var(--acento) 40%, transparent);}
.comparison__title{font-family:var(--f-titulos); font-weight:700; font-size:1.05rem; margin-bottom:22px; color:#fff;}
.comparison__item{display:flex; gap:14px; align-items:flex-start; margin-bottom:16px;}
.comparison__item:last-child{margin-bottom:0;}
.comparison__item p{color:rgba(255,255,255,.75); font-size:.95rem;}
.comparison__col--good .comparison__item p{color:rgba(255,255,255,.92);}
.comparison__mark{flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; margin-top:1px;}
.comparison__mark--bad{background:rgba(255,255,255,.1); color:rgba(255,255,255,.55);}
.comparison__mark--good{background:var(--acento-vivo); color:var(--sobre-acento);}
.comparison__punchline{margin-top:40px; text-align:center; font-family:var(--f-titulos); font-size:1.35rem; font-weight:600; color:#fff;}

/* ===== Identidad (brandboard) ===== */
.brandboard{display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:center; margin-top:40px;}
.brandboard__logo{background:#fff; border-radius:var(--radio); padding:36px; display:flex; align-items:center; justify-content:center; min-height:180px;}
.brandboard__logo--oscuro{background:var(--marca-2);}
.brandboard__logo img{max-height:110px; width:auto;}
.swatch-row{display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap;}
.swatch{flex:1; min-width:90px; height:70px; border-radius:10px; display:flex; align-items:flex-end; padding:8px; font-size:.72rem; color:#fff; font-weight:600; border:1px solid rgba(255,255,255,.12);}
.swatch--light{color:var(--tinta);}
.brandboard__list{list-style:none; display:flex; flex-direction:column; gap:10px;}
.brandboard__list li{color:rgba(255,255,255,.82); font-size:.95rem;}
.brandboard__list strong{color:#fff;}

/* ===== Quiénes somos (GBP, fijo) ===== */
.about{display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:center; margin-bottom:56px;}
.about__photo img{border-radius:var(--radio);}
.about__gbp-logo{height:34px; margin-bottom:18px; filter:invert(1); opacity:.85;}
.about__text p{margin-bottom:14px; color:var(--tinta);}
.stats{display:flex; gap:36px; margin-top:24px; flex-wrap:wrap;}
.stat{display:flex; flex-direction:column;}
.stat__num{font-family:var(--f-titulos); font-size:2rem; font-weight:700; color:var(--marca);}
.stat__label{font-size:.82rem; color:var(--gris);}
.referentes__title{font-weight:600; color:var(--marca); margin-bottom:20px; text-align:center;}
.referentes__title--ribbon{margin-top:48px;}
.referente-people{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-bottom:20px;}
.referente-card{text-align:center; width:96px;}
.referente-card__photo{width:88px; height:88px; border-radius:50%; overflow:hidden; margin:0 auto 8px; border:2px solid #fff; box-shadow:0 8px 18px -8px rgba(0,0,0,.25);}
.referente-card__photo img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.referente-card__name{font-size:.78rem; color:var(--tinta); font-weight:500;}
.logo-ribbon{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.logo-ribbon__track{display:flex; gap:20px; width:max-content; animation:ribbon 32s linear infinite;}
.logo-chip{flex:none; width:100px; height:56px; background:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:10px; box-shadow:0 6px 16px -10px rgba(0,0,0,.25);}
.logo-chip img{max-height:100%; max-width:100%; object-fit:contain;}
.logo-img--fix{filter:invert(1) opacity(.8);}
.referentes__note{text-align:center; font-size:.8rem; color:var(--gris); margin-top:14px;}
@keyframes ribbon{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ===== Piezas de la propuesta ===== */
.pillars{display:flex; flex-direction:column; gap:28px; margin-top:44px;}
.pillar{background:var(--suave); border-radius:var(--radio); padding:36px 40px; position:relative;}
.pillar__num{position:absolute; top:28px; right:36px; font-family:var(--f-titulos); font-size:2.4rem; font-weight:700; color:color-mix(in srgb, var(--marca) 12%, transparent);}
.pillar h3{max-width:80%;}
.pillar p{max-width:660px; margin-bottom:24px;}
.pillar__note{font-size:.82rem; color:var(--gris); margin-top:14px;}
.demo{background:#fff; border-radius:12px; padding:24px; display:flex; gap:24px; flex-wrap:wrap; box-shadow:var(--sombra);}
.demo__note{font-size:.82rem; color:var(--gris); margin-top:14px; width:100%;}

/* demo: web/landing + agente (de Bien Perro) */
.demo--web{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:stretch;}
.demo__browser{border-radius:12px; overflow:hidden; border:1px solid var(--borde); background:#fff;}
.demo__browser-bar{background:var(--suave); padding:10px 12px; display:flex; gap:6px; align-items:center;}
.demo__browser-bar span{width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, var(--gris) 40%, transparent);}
.demo__browser-bar p{margin-left:10px; font-size:.72rem; color:var(--gris); font-family:monospace;}
.demo__browser-body{padding:26px; background:linear-gradient(160deg, var(--marca), var(--marca-2)); color:#fff; min-height:220px;}
.demo__site-logo{max-height:34px; width:auto; margin-bottom:16px;}
.demo__site-title{font-family:var(--f-titulos); font-size:1.35rem; color:#fff; margin-bottom:4px; line-height:1.2;}
.demo__site-sub{color:rgba(255,255,255,.82); font-size:.85rem; margin-bottom:18px;}
.demo__form{display:flex; flex-direction:column; gap:8px;}
.demo__field{background:rgba(255,255,255,.14); padding:10px 14px; border-radius:8px; font-size:.85rem; color:rgba(255,255,255,.9);}
.demo__btn{background:var(--acento-vivo); color:var(--sobre-acento); text-align:center; padding:10px; border-radius:8px; font-weight:600; font-size:.85rem;}
.demo--web .demo__field, .demo--web .demo__btn{opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease;}
.demo.is-active .demo__field, .demo.is-active .demo__btn{opacity:1; transform:none;}
.demo__form > :nth-child(2){transition-delay:.15s}
.demo__form > :nth-child(3){transition-delay:.3s}
.demo__form > :nth-child(4){transition-delay:.45s}

/* demo: dashboard */
.demo--dashboard{flex-direction:column;}
.dash-grid{display:flex; gap:16px; flex-wrap:wrap;}
.dash-card{flex:1; min-width:130px; background:var(--suave); border-radius:10px; padding:16px;}
.dash-card__label{font-size:.78rem; color:var(--gris); margin-bottom:6px;}
.dash-card .stat__num{font-size:1.6rem;}
.dash-bars{display:flex; align-items:flex-end; gap:10px; height:100px; margin-top:20px; margin-bottom:22px;}
.dash-bars__bar{flex:1; height:2px; background:linear-gradient(180deg, var(--acento-vivo), var(--acento)); border-radius:6px 6px 0 0; display:flex; align-items:flex-end; justify-content:center; position:relative; transition:height 1s cubic-bezier(.2,.8,.2,1);}
.dash-bars__bar span{position:absolute; bottom:-22px; font-size:.72rem; color:var(--gris);}
.demo.is-active .dash-bars__bar{height:var(--h);}
.dash-bars__bar:nth-child(2){transition-delay:.08s}.dash-bars__bar:nth-child(3){transition-delay:.14s}.dash-bars__bar:nth-child(4){transition-delay:.2s}.dash-bars__bar:nth-child(5){transition-delay:.26s}.dash-bars__bar:nth-child(6){transition-delay:.32s}.dash-bars__bar:nth-child(7){transition-delay:.38s}

/* demo: embudo de campañas */
.demo--campaigns{flex-direction:column;}
.funnel{display:flex; flex-direction:column; gap:10px;}
.funnel__step{width:0; background:linear-gradient(90deg, var(--marca), var(--acento-vivo)); color:#fff; border-radius:8px; padding:10px 16px; display:flex; justify-content:space-between; font-size:.85rem; white-space:nowrap; overflow:hidden; transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
.demo.is-active .funnel__step{width:var(--w);}
.funnel__step:nth-child(2){transition-delay:.22s}.funnel__step:nth-child(3){transition-delay:.39s}.funnel__step:nth-child(4){transition-delay:.56s}

/* demo: pipeline */
.demo--pipeline{overflow-x:auto;}
.kanban{display:flex; gap:14px; min-width:560px; width:100%;}
.kanban__col{flex:1; background:var(--suave); border-radius:10px; padding:12px;}
.kanban__title{font-size:.78rem; font-weight:600; color:var(--marca); margin-bottom:10px; text-transform:uppercase; letter-spacing:.03em;}
.kanban__card{background:#fff; border-radius:8px; padding:10px 12px; font-size:.82rem; margin-bottom:8px; box-shadow:0 4px 10px -6px rgba(0,0,0,.2); color:var(--tinta); opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease;}
.kanban__card--warm{border-left:3px solid #dc9202;}
.kanban__card--won{border-left:3px solid var(--acento-vivo);}
.demo.is-active .kanban__card{opacity:1; transform:translateY(0);}
.kanban__col:nth-child(2) .kanban__card{transition-delay:.2s}.kanban__col:nth-child(3) .kanban__card{transition-delay:.35s}.kanban__col:nth-child(4) .kanban__card{transition-delay:.5s}

/* demo: contactos */
.demo--contacts{overflow-x:auto;}
.contacts-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.contacts-table th{text-align:left; color:var(--gris); font-weight:600; padding:8px 10px; border-bottom:2px solid var(--borde); font-size:.75rem; text-transform:uppercase; letter-spacing:.03em;}
.contacts-table td{padding:10px; border-bottom:1px solid var(--borde); color:var(--tinta);}
.contacts-table tbody tr{opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease;}
.demo.is-active .contacts-table tbody tr{opacity:1; transform:translateY(0);}
.contacts-table tbody tr:nth-child(2){transition-delay:.18s}.contacts-table tbody tr:nth-child(3){transition-delay:.31s}.contacts-table tbody tr:nth-child(4){transition-delay:.44s}
.badge{font-size:.72rem; padding:4px 10px; border-radius:999px; font-weight:600; white-space:nowrap;}
.badge--new{background:color-mix(in srgb, var(--marca) 10%, #fff); color:var(--marca);}
.badge--mid{background:#fdf1d8; color:#a86a00;}
.badge--won{background:color-mix(in srgb, var(--acento-vivo) 18%, #fff); color:color-mix(in srgb, var(--acento-vivo) 70%, #000);}
.badge--hot{background:#fde3e3; color:#a52a2a;}

/* demo: chat del agente */
.demo--chat{flex-direction:column;}
.demo__chat{width:100%; max-width:440px; margin:0 auto; border:1px solid var(--borde); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; background:#fafbfb;}
.demo--web .demo__chat{max-width:none; margin:0;}
.demo__chat-head{background:var(--marca); color:#fff; padding:12px 16px; font-size:.85rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.demo__chat-body{padding:16px; display:flex; flex-direction:column; gap:10px; flex:1;}
.bubble{max-width:82%; padding:10px 14px; border-radius:14px; font-size:.85rem; opacity:0; transform:translateY(10px) scale(.97); transition:opacity .4s ease, transform .4s ease;}
.bubble--in{align-self:flex-start; background:#eef1f0; color:var(--tinta); border-bottom-left-radius:4px;}
.bubble--out{align-self:flex-end; background:var(--acento-vivo); color:var(--sobre-acento); border-bottom-right-radius:4px;}
.bubble--sys{align-self:center; background:transparent; color:var(--gris); font-size:.75rem; padding:2px 8px;}
.demo.is-active .bubble{opacity:1; transform:translateY(0) scale(1);}
.bubble:nth-child(2){transition-delay:.6s}.bubble:nth-child(3){transition-delay:1.3s}.bubble:nth-child(4){transition-delay:1.8s}.bubble:nth-child(5){transition-delay:2.4s}.bubble:nth-child(6){transition-delay:2.9s}
.channels{display:flex; gap:10px; justify-content:center; margin-top:4px; width:100%; flex-wrap:wrap;}
.channel-chip{background:var(--suave); padding:6px 14px; border-radius:999px; font-size:.78rem; color:var(--marca); font-weight:500;}

/* demo: flujo entre sistemas */
.demo--flow{flex-direction:column; align-items:center; text-align:center;}
.sync-flow{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px 20px; margin-bottom:6px;}
.sync-flow__node{background:var(--suave); padding:14px 22px; border-radius:10px; font-weight:600; color:var(--marca); font-size:.9rem; opacity:0; transform:scale(.92); transition:opacity .5s ease, transform .5s ease;}
.sync-flow__node--brand{background:var(--marca); color:#fff;}
.sync-flow__arrow{font-size:1.4rem; color:var(--acento-vivo); display:inline-block; opacity:0; transition:opacity .3s ease;}
.demo.is-active .sync-flow__node{opacity:1; transform:scale(1);}
.demo.is-active .sync-flow__node:nth-child(3){transition-delay:.25s}.demo.is-active .sync-flow__node:nth-child(5){transition-delay:.5s}.demo.is-active .sync-flow__node:nth-child(7){transition-delay:.75s}
.demo.is-active .sync-flow__arrow{opacity:1; transition-delay:.15s; animation:syncPulse 1.4s ease-in-out .5s infinite;}
@keyframes syncPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.3);}}

/* ===== Cómo trabajamos ===== */
.timeline{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; margin-top:44px;}
.timeline__item{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:24px;}
.timeline__month{display:inline-block; font-size:.78rem; font-weight:700; color:var(--acento); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;}
.timeline__item h3{font-size:1.05rem;}
.timeline__item p{color:rgba(255,255,255,.75); font-size:.88rem;}
.timeline__item ul{margin:10px 0 0 18px; color:rgba(255,255,255,.75); font-size:.86rem;}
.timeline__item--highlight{background:var(--acento-vivo); border-color:transparent; grid-column:1/-1; display:flex; align-items:center; gap:36px; flex-wrap:wrap;}
.timeline__item--highlight h3, .timeline__item--highlight .timeline__month{color:var(--sobre-acento);}
.timeline__item--highlight p{color:color-mix(in srgb, var(--sobre-acento) 90%, transparent); margin:0; flex:1; min-width:260px;}
.timeline__highlight-head h3{margin-bottom:0;}

/* ===== Proyección ===== */
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px;}
.chart-card{background:var(--suave); border-radius:var(--radio); padding:24px; height:280px; display:flex; flex-direction:column;}
.chart-card canvas{flex:1; min-height:0;}
.chart-card__title{font-size:.85rem; font-weight:600; color:var(--marca); margin-bottom:12px;}

/* ===== Inversión ===== */
.offers{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; align-items:start;}
.offers--single{grid-template-columns:1fr; max-width:540px; margin:40px auto 0;}
.offer-card{background:var(--suave); border-radius:var(--radio); padding:32px; position:relative;}
.offer-card--highlight{background:var(--marca); color:#fff;}
.offer-card__badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--acento-vivo); color:var(--sobre-acento); font-size:.75rem; font-weight:700; padding:5px 14px; border-radius:999px; white-space:nowrap; text-transform:uppercase; letter-spacing:.04em;}
.offer-card__label{font-weight:600; color:var(--marca); margin-bottom:18px; font-size:1rem;}
.offer-card--highlight .offer-card__label{color:#fff;}
.offer-card__items{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.offer-card__items li{display:flex; justify-content:space-between; font-size:.9rem; color:var(--tinta); gap:16px;}
.offer-card--highlight .offer-card__items li{color:rgba(255,255,255,.85);}
.offer-card__strike{text-decoration:line-through; color:var(--gris); white-space:nowrap;}
.offer-card--highlight .offer-card__strike{color:rgba(255,255,255,.45);}
.offer-card__total{display:flex; align-items:baseline; justify-content:center; gap:12px; padding-top:16px; border-top:1px solid rgba(0,0,0,.1); flex-wrap:wrap;}
.offer-card--highlight .offer-card__total{border-color:rgba(255,255,255,.18);}
.offer-card__total-strike{text-decoration:line-through; color:var(--gris); font-size:1rem;}
.offer-card--highlight .offer-card__total-strike{color:rgba(255,255,255,.45);}
.offer-card__total-price{font-family:var(--f-titulos); font-size:2.2rem; font-weight:700;}
.offer-card__per{font-size:1rem; font-weight:400;}
.offer-card__save{margin-top:10px; font-size:.85rem; color:var(--acento-vivo); font-weight:600; text-align:center;}
.offer-card--highlight .offer-card__save{color:var(--acento);}
.offer-card__detail{margin-top:8px; font-size:.85rem; text-align:center; color:var(--gris);}
.offer-card--highlight .offer-card__detail{color:rgba(255,255,255,.7);}
.pago-opciones{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:28px auto 0; max-width:760px;}
.pago{background:#fff; border:2px solid var(--borde); border-radius:var(--radio); padding:26px; text-align:center; position:relative;}
.pago--recomendado{border-color:var(--acento-vivo); box-shadow:var(--sombra);}
.pago__nombre{font-weight:600; color:var(--marca); margin-bottom:6px;}
.pago__precio{font-family:var(--f-titulos); font-size:2.3rem; font-weight:700; color:var(--marca); line-height:1.1;}
.pago__detalle{font-size:.88rem; color:var(--gris); margin-top:6px;}
.pricing__note{margin-top:24px; max-width:720px; font-size:.95rem;}
.pricing__footnote{margin-top:10px; font-size:.85rem; color:var(--gris); max-width:760px;}
.invest-breakdown{margin-top:48px; background:var(--suave); border-radius:var(--radio); padding:32px;}
.invest-breakdown__title{font-weight:600; color:var(--marca); margin-bottom:20px;}
.invest-breakdown__chart{height:260px;}

/* ===== Preguntas ===== */
.faq{margin-top:36px; display:flex; flex-direction:column; gap:12px; max-width:820px;}
.faq details{background:var(--suave); border-radius:12px; padding:18px 22px;}
.faq summary{cursor:pointer; font-weight:600; color:var(--marca); list-style:none; display:flex; justify-content:space-between; gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--acento-vivo); font-size:1.3rem; line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details p{margin-top:10px; color:var(--tinta);}

/* ===== CTA / Footer ===== */
.cta-row{display:flex; gap:16px; margin-top:8px; flex-wrap:wrap; justify-content:center;}
.btn{padding:14px 28px; border-radius:999px; font-weight:600; font-size:.95rem; display:inline-block;}
.btn--primary{background:var(--acento-vivo); color:var(--sobre-acento);}
.btn--ghost{border:1px solid rgba(255,255,255,.3); color:#fff;}
.vigencia{margin-top:22px; font-size:.85rem; color:rgba(255,255,255,.6);}
.footer{padding:40px 24px; text-align:center; background:#fff;}
.footer__logo{height:26px; margin:0 auto 10px; filter:invert(1); opacity:.6;}
.footer p{font-size:.8rem;}

/* ===== Responsive ===== */
@media (max-width:900px){
  .brandboard, .about{grid-template-columns:1fr; text-align:center;}
  .brandboard__logo{max-width:260px; margin:0 auto;}
  .about__photo{max-width:220px; margin:0 auto;}
  .stats{justify-content:center;}
  .timeline{grid-template-columns:1fr 1fr;}
  .chart-grid, .offers, .comparison, .demo--web, .pago-opciones{grid-template-columns:1fr;}
  .checklist{grid-template-columns:1fr;}
  .nav__links{gap:14px; font-size:.82rem;}
}
@media (max-width:600px){
  .section{padding:80px 0;}
  .timeline{grid-template-columns:1fr;}
  .pillar{padding:26px 20px;}
  .pillar h3{max-width:100%; padding-right:44px;}
  .pillar__num{top:22px; right:20px; font-size:2rem;}
  .demo{padding:16px;}
  .nav{padding:12px 16px;}
  .nav__links a:not(.nav__cta){display:none;}
}

/* ===== Vista completa (?vista=todo) e impresión a PDF ===== */
.vista-todo .reveal, .vista-todo .stagger-item{opacity:1 !important; transform:none !important; transition:none !important;}
.vista-todo .hero{min-height:auto;}
@media print{
  .nav, .progress-bar, .hero__scroll{display:none !important;}
  .reveal, .stagger-item, .bubble, .kanban__card, .contacts-table tbody tr, .demo__field, .demo__btn, .sync-flow__node, .sync-flow__arrow{opacity:1 !important; transform:none !important;}
  .hero{min-height:auto; padding:80px 24px;}
  .section{padding:60px 0; break-inside:avoid-page;}
  .pillar, .offer-card, .pago, .timeline__item{break-inside:avoid;}
  .logo-ribbon__track{animation:none; flex-wrap:wrap; width:auto;}
  body{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}

/* =====================================================================
   OFERTAS DE TEMPORADA (Black Friday): chip del hero, tarjeta con bonos,
   cuenta regresiva y cupos. Colores: --bf y --sobre-bf (en el :root del cliente).
   ===================================================================== */
:root{--bf:#111111; --sobre-bf:#ffffff;}
.bf-chip{display:inline-block; line-height:1.45; text-align:center; background:var(--bf); color:var(--sobre-bf); font-weight:700; font-size:.85rem; padding:8px 18px; border-radius:999px; margin-bottom:22px; box-shadow:0 12px 30px -14px rgba(0,0,0,.5);}
.bf-chip b{font-weight:800;}
.offer-card__ribbon{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--bf); color:var(--sobre-bf); font-size:.78rem; font-weight:800; padding:6px 18px; border-radius:999px; white-space:nowrap; text-transform:uppercase; letter-spacing:.06em;}
.bf-incluye{list-style:none; display:flex; flex-direction:column; gap:12px; margin:8px 0 22px;}
.bf-incluye li{display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color:rgba(255,255,255,.9);}
.bf-incluye li::before{content:"✓"; flex:none; width:22px; height:22px; border-radius:50%; background:var(--acento-vivo); color:var(--sobre-acento); font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.bf-bonos{border:1px dashed rgba(255,255,255,.3); border-radius:12px; padding:16px 18px; margin-bottom:22px;}
.bf-bonos__title{font-weight:700; color:#fff; font-size:.9rem; margin-bottom:10px;}
.bf-bonos ul{list-style:none; display:flex; flex-direction:column; gap:8px;}
.bf-bonos li{display:flex; justify-content:space-between; gap:14px; font-size:.88rem; color:rgba(255,255,255,.85);}
.bf-bono__valor{white-space:nowrap; color:rgba(255,255,255,.5);}
.bf-bono--rapido{border-top:1px solid rgba(255,255,255,.14); padding-top:10px; margin-top:4px;}
.bf-bono--rapido strong{color:var(--acento);}
.bf-regular{font-size:.82rem; color:rgba(255,255,255,.6); text-align:center; margin-top:8px;}
.bf-pago{font-size:.85rem; text-align:center; margin-top:6px; color:rgba(255,255,255,.75);}
.cuenta{max-width:540px; margin:28px auto 0; background:#fff; border-radius:var(--radio); padding:22px 24px; text-align:center; box-shadow:var(--sombra);}
.cuenta__title{font-weight:700; color:var(--marca); margin-bottom:12px;}
.cuenta__grid{display:flex; justify-content:center; gap:12px;}
.cuenta__unidad{min-width:68px; background:var(--marca); color:#fff; border-radius:12px; padding:10px 6px;}
.cuenta__unidad b{display:block; font-family:var(--f-titulos); font-size:1.8rem; line-height:1.1;}
.cuenta__unidad small{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; opacity:.75;}
.cuenta__cupos{margin-top:14px; font-size:.88rem; color:var(--tinta);}
.cuenta__fin{display:none; font-weight:700; color:var(--marca);}
.cuenta.is-terminada .cuenta__grid, .cuenta.is-terminada .cuenta__title{display:none;}
.cuenta.is-terminada .cuenta__fin{display:block;}
@media (max-width:600px){ .cuenta__unidad{min-width:58px;} .cuenta__unidad b{font-size:1.45rem;} }

/* =====================================================================
   TEMA OPCIONAL «playa»: <body data-tema="playa">
   Para turismo, hoteles, posadas y actividades de playa. Usa los colores del :root:
   cielo y mar con --marca, --marca-2 y --acento-vivo; arena con --suave.
   Olas entre secciones: <div class="ola" style="--ola:#fff"></div> como último hijo
   de una sección (con el color de la sección que viene después).
   Con la clase ola--arriba va como primer hijo y toma el color de la sección anterior.
   En el hero: <div class="olas"><div class="ola"></div><div class="ola"></div><div class="ola"></div></div>
   ===================================================================== */
[data-tema="playa"]{--radio:22px;}
[data-tema="playa"] .hero, [data-tema="playa"] .section{position:relative;}
[data-tema="playa"] .hero{background:linear-gradient(180deg, var(--marca) 0%, var(--marca-2) 52%, color-mix(in srgb, var(--acento-vivo) 60%, var(--marca-2)) 100%); padding-bottom:150px;}
[data-tema="playa"] .hero__texture{background:
  radial-gradient(circle at 80% 18%, rgba(255,226,150,.95) 0, rgba(255,200,110,.75) 4.5%, rgba(255,170,90,.25) 10%, transparent 26%),
  radial-gradient(circle at 12% 85%, color-mix(in srgb, var(--acento) 28%, transparent), transparent 45%);}
[data-tema="playa"] .hero__logo{max-height:150px; max-width:250px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));}
[data-tema="playa"] .tag{background:color-mix(in srgb, var(--acento-vivo) 14%, transparent); padding:5px 14px; border-radius:999px;}
[data-tema="playa"] .tag:not(.tag--light){color:color-mix(in srgb, var(--acento-vivo) 35%, var(--marca));}
[data-tema="playa"] .tag--light{background:rgba(255,255,255,.1);}
[data-tema="playa"] .section--suave{background-color:var(--suave); background-image:radial-gradient(color-mix(in srgb, var(--marca) 7%, transparent) 1px, transparent 1.3px); background-size:18px 18px;}
[data-tema="playa"] .pillar{border:1px solid color-mix(in srgb, var(--marca) 8%, transparent);}
[data-tema="playa"] .demo__browser-body{background:linear-gradient(180deg, var(--marca) 0%, var(--marca-2) 60%, color-mix(in srgb, var(--acento-vivo) 55%, var(--marca-2)) 100%);}
[data-tema="playa"] .btn--primary{box-shadow:0 12px 26px -12px color-mix(in srgb, var(--acento-vivo) 80%, transparent);}
.ola{position:absolute; left:0; right:0; bottom:-1px; height:70px; pointer-events:none; z-index:1; background:var(--ola, #fff);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 32 C200 2 400 2 600 32 S1000 62 1200 32 V70 H0Z'/%3E%3C/svg%3E") repeat-x 0 100% / 1200px 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 32 C200 2 400 2 600 32 S1000 62 1200 32 V70 H0Z'/%3E%3C/svg%3E") repeat-x 0 100% / 1200px 100%;}
.ola--arriba{top:-1px; bottom:auto; transform:scaleY(-1);}
.olas{position:absolute; left:0; right:0; bottom:-1px; height:110px; pointer-events:none; z-index:1;}
.olas .ola{animation:olaVaiven 18s linear infinite;}
.olas .ola:nth-child(1){opacity:.22; height:110px; animation-duration:24s; -webkit-mask-size:1500px 100%; mask-size:1500px 100%;}
.olas .ola:nth-child(2){opacity:.42; height:88px; animation-duration:18s; animation-direction:reverse; -webkit-mask-size:1100px 100%; mask-size:1100px 100%;}
.olas .ola:nth-child(3){height:62px; animation-duration:28s;}
@keyframes olaVaiven{from{-webkit-mask-position:0 100%; mask-position:0 100%;} to{-webkit-mask-position:1200px 100%; mask-position:1200px 100%;}}
@media (prefers-reduced-motion:reduce){ .olas .ola{animation:none;} }
@media print{ .ola, .olas{display:none;} }