/* ==========================================================================
   Cambia Ya · cy_theme.css · Sistema de diseño v4 (aprobado 2026-06-03)
   Monocromo premium + acento coral (pelo de Donna) + modo claro/oscuro.
   Tipografía: General Sans. Carga la fuente desde header.php (Fontshare).
   ========================================================================== */

:root{
  --bg:#FFFFFF; --bg-soft:#FAFAF9; --bg-deep:#F4F4F3;
  --ink:#0A0A0A; --ink-2:#52525B; --ink-3:#A1A1AA;
  --line:#E7E5E4; --line-soft:#F0EFEE;
  --accent:#D8412A; --accent-ink:#B23018; --accent-soft:#FBEEEA;
  --ok:#16A34A; --ok-soft:#F0FDF4;
  --warn:#B45309; --warn-soft:#FEF3E2;
  --pill:#0A0A0A; --pill-ink:#FFFFFF;
  --grain:.022;
  --sans:'General Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius:16px; --radius-lg:24px;
}
html.dark{
  --bg:#0A0A0A; --bg-soft:#111111; --bg-deep:#161616;
  --ink:#FAFAFA; --ink-2:#A1A1AA; --ink-3:#71717A;
  --line:#262626; --line-soft:#1C1C1C;
  --accent:#F2654A; --accent-ink:#FF7E66; --accent-soft:rgba(242,101,74,.12);
  --ok:#22C55E; --ok-soft:rgba(34,197,94,.10);
  --warn:#FBBF24; --warn-soft:rgba(251,191,36,.10);
  --pill:#FFFFFF; --pill-ink:#0A0A0A;
  --grain:.045;
}

/* ---- base ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;transition:background .4s,color .4s;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}
a{color:inherit;text-decoration:none}
.cy-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.cy-narrow{max-width:760px;margin:0 auto;padding:0 32px}
.tnum{font-variant-numeric:tabular-nums}
.cy-accent{color:var(--accent)}
.donna-light{display:block}.donna-dark{display:none}
html.dark .donna-light{display:none}html.dark .donna-dark{display:block}

/* ---- nav ---- */
.cy-nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft)}
.cy-nav-in{max-width:1200px;margin:0 auto;padding:15px 32px;display:flex;align-items:center;justify-content:space-between}
.cy-brand{font-family:'Poppins',var(--sans);font-weight:600;font-size:20px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.cy-brand .mk{width:30px;height:30px;display:block;flex:none}
.cy-brand .ya{color:var(--accent)}
.cy-nav-links{display:flex;gap:30px;align-items:center;font-size:14.5px;color:var(--ink-2)}
.cy-nav-links a{position:relative;transition:color .2s}
.cy-nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--accent);transition:width .25s}
.cy-nav-links a:hover{color:var(--ink)}.cy-nav-links a:hover::after{width:100%}
.cy-nav-right{display:flex;gap:14px;align-items:center}
.cy-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:.2s}
.cy-toggle:hover{border-color:var(--ink-3);color:var(--ink)}.cy-toggle svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* ---- buttons ---- */
.cy-pill{background:var(--pill);color:var(--pill-ink);font-weight:500;font-size:14.5px;padding:10px 20px;border-radius:999px;transition:transform .2s,opacity .2s;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer}
.cy-pill:hover{transform:translateY(-1px);opacity:.9}
.cy-btn{font-weight:500;font-size:16px;padding:15px 26px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;transition:transform .2s,opacity .2s,background .2s;cursor:pointer;border:none}
.cy-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.cy-btn-fill{background:var(--accent);color:#fff}.cy-btn-fill:hover{transform:translateY(-2px);background:var(--accent-ink)}
.cy-btn-line{border:1px solid var(--line);color:var(--ink);background:transparent}.cy-btn-line:hover{border-color:var(--ink-3);background:var(--bg-soft)}
.cy-btn-dark{background:var(--pill);color:var(--pill-ink)}
.cy-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- inputs / fields ---- */
.cy-field{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--bg);transition:border-color .2s,box-shadow .2s}
.cy-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.cy-label{font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:7px;display:block}

/* ---- cards / sections ---- */
.cy-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.cy-card-soft{background:var(--bg-soft)}
section.cy-blk{padding:92px 0;border-top:1px solid var(--line-soft)}
.cy-kick{font-size:13px;letter-spacing:.05em;color:var(--accent-ink);font-weight:500;margin-bottom:13px}
.cy-h{font-weight:600;font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;line-height:1.06;max-width:740px}
.cy-sub{font-size:17px;color:var(--ink-2);max-width:560px;margin-top:16px}
.cy-prose{max-width:720px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.cy-prose h2{font-weight:600;font-size:24px;color:var(--ink);letter-spacing:-.02em;margin:34px 0 12px}
.cy-prose h3{font-weight:600;font-size:18px;color:var(--ink);margin:24px 0 8px}
.cy-prose p{margin-bottom:14px}.cy-prose ul{margin:0 0 14px 20px}.cy-prose li{margin-bottom:7px}
.cy-prose a{color:var(--accent-ink);text-decoration:underline}
.cy-prose strong{color:var(--ink);font-weight:600}

/* ---- badges ---- */
.cy-badge{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:13px;padding:6px 12px;border-radius:999px}
.cy-badge svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none}
.cy-badge-accent{background:var(--accent-soft);color:var(--accent-ink)}
.cy-badge-ok{background:var(--ok-soft);color:var(--ok)}

/* ---- offers ---- */
.cy-offers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cy-off{border:1px solid var(--line);border-radius:20px;padding:26px;background:var(--bg);transition:transform .25s,box-shadow .25s}
.cy-off:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(0,0,0,.3)}
.cy-off.best{border-color:var(--accent)}
.cy-off .brand{font-weight:600;font-size:18px}.cy-off .plan{font-size:13px;color:var(--ink-2);margin-top:3px}
.cy-off .price{font-weight:600;font-size:33px;letter-spacing:-.03em;margin-top:18px}.cy-off .price small{font-size:15px;color:var(--ink-2);font-weight:400}
.cy-off .save{margin-top:15px;padding:13px 15px;border-radius:13px;background:var(--accent-soft);display:flex;justify-content:space-between;align-items:center}
.cy-off .save .l{font-size:13px;color:var(--ink-2)}.cy-off .save .a{font-weight:600;font-size:18px;color:var(--accent)}
.cy-off .cta{margin-top:17px;width:100%;text-align:center;padding:13px;border-radius:12px;font-weight:500;font-size:15px;background:var(--bg-deep);color:var(--ink);transition:.2s;cursor:pointer;border:none}
.cy-off.best .cta{background:var(--accent);color:#fff}.cy-off .cta:hover{opacity:.85}

/* ---- stats / steps ---- */
.cy-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cy-stat{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--bg)}
.cy-stat .n{font-weight:600;font-size:44px;letter-spacing:-.03em;line-height:1}
.cy-stat .n .u{color:var(--accent);font-size:28px}
.cy-stat .t{font-size:14px;color:var(--ink-2);margin-top:9px}
.cy-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cy-step{border:1px solid var(--line);border-radius:22px;padding:30px;background:var(--bg-soft);transition:.25s}
.cy-step:hover{transform:translateY(-4px);border-color:var(--ink-3)}
.cy-step .num{font-weight:600;font-size:14px;color:var(--accent);border:1px solid var(--accent);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.cy-step h4{font-weight:600;font-size:19px;letter-spacing:-.01em}.cy-step p{font-size:15px;color:var(--ink-2);margin-top:9px;line-height:1.55}

/* ---- testimonials ---- */
.cy-tst{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cy-tst .q{border-left:2px solid var(--accent);padding-left:22px}
.cy-tst .q p{font-size:17px;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.cy-tst .q .who{margin-top:16px;font-size:14px;color:var(--ink-2)}.cy-tst .q .who b{color:var(--ink);font-weight:600;display:block}

/* ---- CTA band ---- */
.cy-band{padding:100px 0;text-align:center;background:var(--ink);color:var(--bg);position:relative;overflow:hidden}
.cy-band::after{content:"";position:absolute;left:50%;top:50%;width:700px;height:400px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,var(--accent-soft) 0%,transparent 70%);opacity:.5}
.cy-band .cy-wrap{position:relative;z-index:1}
.cy-band h2{font-weight:600;font-size:clamp(32px,5vw,58px);letter-spacing:-.035em;line-height:1.02}
.cy-band p{font-size:18px;color:var(--ink-3);margin-top:18px}
.cy-band .cy-btn{margin-top:32px;background:var(--accent);color:#fff}.cy-band .cy-btn:hover{background:var(--accent-ink)}

/* ---- footer ---- */
.cy-foot{background:var(--bg-soft);border-top:1px solid var(--line)}
.cy-foot-top{padding:70px 0 46px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.cy-foot-brand .cy-brand{font-size:23px;margin-bottom:15px}
.cy-foot-brand p{font-size:14.5px;color:var(--ink-2);max-width:280px;line-height:1.6}
.cy-fcol h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:15px}
.cy-fcol a{display:block;font-size:14.5px;color:var(--ink-2);margin-bottom:11px;transition:color .2s}.cy-fcol a:hover{color:var(--ink)}
.cy-foot-word{font-weight:600;font-size:clamp(60px,16vw,210px);letter-spacing:-.05em;line-height:.8;color:var(--line);text-align:center;padding:24px 0 46px;user-select:none}
.cy-foot-word .ya{color:var(--accent);opacity:.55}
.cy-foot-bot{padding:22px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-3);flex-wrap:wrap;gap:12px}

/* ---- effects ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:920px){
  .cy-offers,.cy-stats,.cy-steps,.cy-tst,.cy-foot-top{grid-template-columns:1fr}
  .cy-nav-links{display:none}
}

/* ===== Formulario de lead compartido (chat + comparador clásico) + modal ===== */
.cy-leadform{ display:flex; flex-direction:column; gap:10px; }
.cy-leadform .lf-title{ font-weight:600; font-size:15.5px; color:var(--ink); }
.cy-leadform .lf-modes{ display:flex; gap:8px; }
.cy-leadform .lf-mode{ flex:1; text-align:left; border:1.5px solid var(--line); background:var(--bg); border-radius:12px; padding:10px 12px; cursor:pointer; font-family:var(--sans); transition:.18s; }
.cy-leadform .lf-mode b{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.cy-leadform .lf-mode span{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.cy-leadform .lf-mode.active{ border-color:var(--accent); background:var(--accent-soft); }
.cy-leadform .lf-mode.active b{ color:var(--accent-ink); }
.cy-leadform .lf-note{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--ink-2); }
.cy-leadform .lf-note svg{ width:14px; height:14px; stroke:var(--accent); stroke-width:2; fill:none; flex:none; margin-top:2px; }
.cy-leadform input{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--bg); }
.cy-leadform input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.cy-leadform .lf-online{ display:flex; flex-direction:column; gap:10px; }
.cy-leadform .lf-online[hidden]{ display:none; }
.cy-leadform .lf-send{ margin-top:4px; padding:13px; border:none; border-radius:12px; background:var(--accent); color:#fff; font-family:var(--sans); font-weight:600; font-size:15px; cursor:pointer; transition:background .2s; }
.cy-leadform .lf-send:hover{ background:var(--accent-ink); }
.cy-leadform .lf-send:disabled{ opacity:.5; cursor:default; }
.cy-leadform .lf-err{ font-size:12.5px; color:#DC2626; min-height:14px; }
html.dark .cy-leadform .lf-mode, html.dark .cy-leadform input{ background:#17191C; border-color:#34383D; }

.cy-lf-overlay{ position:fixed; inset:0; background:rgba(10,10,14,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:9999; animation:cylf-in .2s ease; }
@keyframes cylf-in{ from{opacity:0} to{opacity:1} }
.cy-lf-panel{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:22px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; box-shadow:0 40px 90px -30px rgba(0,0,0,.5); padding:28px 24px 24px; }
html.dark .cy-lf-panel{ background:#17191C; border-color:#2D3035; }
.cy-lf-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--bg-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cy-lf-close svg{ width:16px; height:16px; stroke:var(--ink-2); stroke-width:2; fill:none; }
.cy-lf-close:hover{ border-color:var(--accent); }

.cy-lead-confirm{ display:flex; gap:12px; align-items:flex-start; }
.cy-lead-confirm .lc-ico{ width:34px; height:34px; border-radius:50%; background:var(--ok); display:flex; align-items:center; justify-content:center; flex:none; }
.cy-lead-confirm .lc-ico svg{ width:17px; height:17px; stroke:#fff; stroke-width:3; fill:none; }
.cy-lead-confirm .lc-txt{ font-size:14.5px; line-height:1.5; color:var(--ink); }
.cy-lead-confirm .lc-acct{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:10px 16px; border-radius:12px; background:var(--accent); color:#fff !important; font-weight:600; font-size:14px; text-decoration:none; }
.cy-lead-confirm .lc-acct svg{ width:15px; height:15px; stroke:#fff; stroke-width:2; fill:none; }

/* chips en tarjetas del comparador clásico */
.cy-off .cy-off-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; }
.cy-off .cy-off-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
.cy-off .cy-off-chip svg{ width:12px; height:12px; stroke:var(--ok); stroke-width:2.6; fill:none; flex:none; }
html.dark .cy-off .cy-off-chip{ background:#202327; border-color:#34383D; }
.cy-leadform .lf-consent{ display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.45; color:var(--ink-2); cursor:pointer; margin-top:2px; }
.cy-leadform .lf-consent input{ margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--accent); }
.cy-leadform .lf-consent a{ color:var(--accent-ink); font-weight:600; }

/* Vertical: bloque Donna + por qué (componente cy_vertical_extra) */
.cy-vx-donna{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:48px; align-items:center; }
.cy-vx-fig{ display:flex; justify-content:center; }
.cy-vx-fig img{ width:100%; max-width:300px; height:auto; }
.cy-vx-copy h3{ font-weight:600; font-size:clamp(24px,3vw,34px); letter-spacing:-.02em; line-height:1.12; margin-top:6px; }
.cy-vx-feats{ display:flex; flex-direction:column; gap:16px; margin-top:22px; }
.cy-vx-feat{ display:flex; gap:13px; align-items:flex-start; }
.cy-vx-feat svg{ width:22px; height:22px; flex:none; stroke:var(--accent); stroke-width:2; fill:none; margin-top:2px; }
.cy-vx-feat b{ display:block; font-size:16px; font-weight:600; color:var(--ink); }
.cy-vx-feat span{ display:block; font-size:14.5px; color:var(--ink-2); margin-top:2px; line-height:1.5; }
@media(max-width:860px){ .cy-vx-donna{ grid-template-columns:1fr; gap:26px; text-align:center; } .cy-vx-fig img{ max-width:200px; } .cy-vx-feat{ text-align:left; } }

/* Chat-first: fila de bienvenida de Donna + chips de inicio (cy_chat_page) */
.cy-chat-welcome{ display:flex; align-items:center; gap:22px; margin-bottom:22px; padding:20px 22px; background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:20px; }
html.dark .cy-chat-welcome{ background:#202327; border-color:#34383D; }
.cy-chat-welcome-fig{ flex:none; width:84px; height:84px; border-radius:18px; overflow:hidden; background:#FFF1EC; border:1px solid var(--line); position:relative; }
html.dark .cy-chat-welcome-fig{ background:#2A2D31; }
.cy-chat-welcome-fig img{ position:absolute; width:118%; left:-9%; top:-6%; max-width:none; }
.cy-chat-welcome-copy{ flex:1; min-width:0; }
.cy-chat-welcome-copy p{ font-size:15px; line-height:1.5; color:var(--ink-2); margin:0 0 12px; }
.cy-chat-welcome-copy p b{ color:var(--ink); font-weight:600; }
.cy-startchips{ display:flex; flex-wrap:wrap; gap:9px; }
.cy-startchip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent); border-radius:999px; padding:9px 15px; cursor:pointer; transition:background .18s ease, color .18s ease, transform .12s ease; }
.cy-startchip:hover{ background:var(--accent); color:#fff; transform:translateY(-1px); }
.cy-startchip svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.4; fill:none; flex:none; }
/* CTA visible al comparador clásico bajo el chat */
.cy-chat-classic{ margin-top:18px; text-align:center; padding:18px; border:1px dashed var(--line); border-radius:16px; }
html.dark .cy-chat-classic{ border-color:#34383D; }
.cy-chat-classic p{ font-size:14px; color:var(--ink-2); margin:0 0 12px; }
@media(max-width:640px){
  .cy-chat-welcome{ flex-direction:column; align-items:flex-start; gap:14px; padding:16px; }
  .cy-chat-welcome-fig{ width:60px; height:60px; border-radius:14px; }
  .cy-startchips{ width:100%; }
  .cy-startchip{ width:100%; justify-content:center; }
}