:root{
    --bg:#FFFFFF;
    --bg-alt:#FBF3F4;
    --bg-alt-2:#FDF8F6;
    --ink:#221417;
    --muted:#8A797B;
    --muted-2:#B8A7A9;
    --red:#C41E3A;
    --red-dark:#8F1226;
    --red-soft:#F7DCE1;
    --red-wash:#FDEFF1;
    --border:#F0E1E4;
    --border-strong:#E6CDD2;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:26px;
    --shadow-sm: 0 2px 10px -4px rgba(34,20,23,.10);
    --shadow-md: 0 14px 36px -18px rgba(34,20,23,.28);
    --font-display:'Fraunces', serif;
    --font-body:'Manrope', sans-serif;
    --footer-bg:#3A0F1A;
  }
  :root[data-theme="dark"]{
    --bg:#171012;
    --bg-alt:#221619;
    --bg-alt-2:#1D1416;
    --ink:#F5EBEC;
    --muted:#B9A6A9;
    --muted-2:#7C6668;
    --red:#FF6B85;
    --red-dark:#FF8FA3;
    --red-soft:#3A1D24;
    --red-wash:#2A171B;
    --border:#3A282B;
    --border-strong:#4A3237;
  }
  .cdl-wrapper *{box-sizing:border-box;}
  .cdl-wrapper{scroll-behavior:smooth;}
  .cdl-wrapper{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    transition:background .25s ease, color .25s ease;
  }
  .theme-toggle{
    position:fixed;bottom:20px;right:20px;top:auto;z-index:999999;
    width:46px;height:46px;border-radius:50%;
    border:1.5px solid var(--border-strong);background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;box-shadow:0 6px 20px -4px rgba(0,0,0,.35);
    transition:transform .15s, border-color .15s;
  }
  .theme-toggle:hover{border-color:var(--red);transform:scale(1.06);}
  html.admin-bar .theme-toggle{bottom:20px;}
  @media (max-width:782px){ html.admin-bar .theme-toggle{top:56px;} }
  
  .cdl-wrapper img{max-width:100%;display:block;}
  .cdl-wrapper a{color:inherit;}
  .cdl-wrapper button{font-family:inherit;cursor:pointer;}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
  .wrap-wide{max-width:1160px;}
  .cdl-wrapper :focus-visible{outline:2.5px solid var(--red);outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    .cdl-wrapper *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }

  .logo{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.28rem;
    letter-spacing:-0.01em;
  }
  .logo em{color:var(--red);font-style:italic;font-weight:500;}

  /* ---------- Hero ---------- */
  .hero{padding:0;text-align:center;}
  .hero-band{
    background:
      radial-gradient(circle at 1px 1px, rgba(255,255,255,.22) 1.5px, transparent 0),
      linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    background-size: 20px 20px, 100% 100%;
    padding:38px 24px 46px;
  }
  h1.hero-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.9rem, 4.6vw, 2.9rem);
    line-height:1.1;
    letter-spacing:-0.015em;
    margin:0 0 10px;
    color:#fff;
  }
  .hero-band p.sub{
    max-width:540px;margin:0 auto;
    color:rgba(255,255,255,.92);font-size:1rem;
  }
  .demo-strip{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin-top:26px;flex-wrap:wrap;
  }
  .demo-box{
    background:var(--bg-alt);
    border:1.5px solid var(--border-strong);
    border-radius:14px;
    padding:12px 20px;
    font-size:1.05rem;font-weight:600;color:var(--ink);
  }
  .demo-box.demo-after{
    background:#fff;color:var(--red);
    font-family:var(--font-display);font-style:italic;font-weight:600;
    border-color:var(--red);
    box-shadow:var(--shadow-sm);
  }
  .demo-arrow{flex-shrink:0;opacity:.85;}
  @media (max-width:480px){ .demo-arrow{transform:rotate(90deg);} }
  .demo-showcase{
    background:var(--bg);
    padding:40px 24px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .demo-showcase .demo-strip{margin-top:0;}
  .tool-zone{background:var(--bg-alt-2);padding:28px 0 48px;}

  /* ---------- Tool card ---------- */
  .tool-card{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:24px;
    margin:-46px auto 28px;
    max-width:820px;
    position:relative;
    z-index:2;
  }
  .input-row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
  .input-row label{font-size:.82rem;font-weight:700;color:var(--ink);}
  .input-shell{
    position:relative;
    border:1.5px solid var(--border-strong);
    border-radius:var(--radius-md);
    transition:border-color .15s, box-shadow .15s;
    background:var(--bg-alt-2);
  }
  .input-shell:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--red-wash);}
  .input-shell .edit-icon{
    position:absolute;left:16px;top:50%;transform:translateY(-50%);
    color:var(--red);opacity:.8;pointer-events:none;
  }
  textarea#text-input{
    width:100%;resize:none;border:none;background:transparent;
    font-family:var(--font-body);font-size:1.05rem;font-weight:600;color:var(--ink);
    padding:14px 60px 14px 42px;min-height:48px;max-height:48px;overflow:hidden;border-radius:var(--radius-md);
    white-space:nowrap;
  }
  textarea#text-input:focus{outline:none;}
  .char-count{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    font-size:.72rem;color:var(--muted-2);font-weight:700;
  }

  .filters-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2px;}
  .pill{
    border:1.5px solid var(--border-strong);
    background:var(--bg);
    color:var(--muted);
    padding:8px 16px;border-radius:99px;
    font-size:.88rem;font-weight:700;
    transition:all .15s;
    font-family:var(--font-display);
  }
  .pill:hover{border-color:var(--red);color:var(--red);}
  .pill[aria-pressed="true"]{
    background:var(--red-wash);border-color:var(--red);color:var(--red);
    font-weight:800;
  }

  /* ---------- Style list ---------- */
  ul.style-list{list-style:none;margin:0;padding:0;}
  li.style-row{
    border-top:1px solid var(--border);
    padding:16px 4px;
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  }
  li.style-row:last-child{border-bottom:1px solid var(--border);}
  .style-row-main{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:220px;}
  .style-index{
    flex-shrink:0;width:26px;height:26px;border-radius:8px;
    background:var(--bg-alt);color:var(--muted);
    display:flex;align-items:center;justify-content:center;
    font-size:.74rem;font-weight:800;margin-top:2px;
  }
  .style-text-wrap{min-width:0;}
  .style-label{display:block;font-size:.72rem;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
  .style-output{
    margin:0;font-size:1.18rem;font-weight:600;color:var(--ink);
    word-break:break-word;
  }
  .style-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;margin-left:auto;}
  .btn-copy{
    border:none;background:var(--red);color:#fff;
    padding:10px 18px;border-radius:99px;font-size:.82rem;font-weight:800;
    box-shadow:0 6px 14px -6px rgba(196,30,58,.5);
    transition:transform .12s, background .15s;
    min-width:96px;
  }
  .btn-copy:hover{background:var(--red-dark);}
  .btn-copy:active{transform:scale(.96);}
  .btn-copy.copied{background:#1E7A46;}

  .load-more-wrap{text-align:center;margin-top:22px;}
  .btn-outline{
    border:1.5px solid var(--border-strong);background:var(--bg);color:var(--ink);
    padding:11px 22px;border-radius:99px;font-size:.86rem;font-weight:700;
  }
  .btn-outline:hover{border-color:var(--red);color:var(--red);}
  .empty-note{color:var(--muted);font-size:.9rem;padding:24px 4px;text-align:center;}

  /* ---------- Recent history ---------- */
  .history-strip{display:none;margin-bottom:52px;}
  .history-strip.show{display:block;}
  .history-strip h2{font-family:var(--font-display);font-size:1rem;font-weight:600;margin:0 0 12px;}
  .history-chips{display:flex;gap:8px;flex-wrap:wrap;}
  .history-chip{
    border:1px solid var(--border-strong);background:var(--bg-alt);color:var(--ink);
    padding:8px 14px;border-radius:99px;font-size:.85rem;font-weight:600;
    max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .history-chip:hover{border-color:var(--red);}

  /* ---------- Cómo funciona ---------- */
  .divider-visual{display:block;margin:8px auto 0;width:100%;max-width:520px;height:auto;opacity:.9;}
  .steps{padding:8px 0 56px;}
  .steps h2, .ventajas h2, .seo-content h2:first-of-type{
    font-family:var(--font-display);font-weight:600;
    font-size:clamp(1.5rem,3.2vw,2rem);text-align:center;margin:0 0 40px;letter-spacing:-.01em;
  }
  .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  @media (max-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.steps-grid{grid-template-columns:1fr;}}
  .step{background:var(--bg-alt-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 18px;text-align:center;}
  .step-mock{width:100%;max-width:150px;height:auto;margin:0 auto 14px;filter:drop-shadow(0 8px 16px rgba(34,20,23,.12));}
  .step .num{font-family:var(--font-display);font-style:italic;font-size:1.4rem;color:var(--red);margin-bottom:6px;}
  .step h3{font-size:1.02rem;margin:0 0 6px;}
  .step p{margin:0;color:var(--muted);font-size:.9rem;}

  /* ---------- Ventajas ---------- */
  .ventajas{background:var(--bg-alt);padding:56px 0;}
  .vent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  @media (max-width:760px){.vent-grid{grid-template-columns:repeat(2,1fr);}}
  .vent{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 18px;text-align:center;}
  .vent .icon{width:38px;height:38px;margin:0 auto 12px;color:var(--red);}
  .vent h3{font-size:.94rem;margin:0 0 6px;}
  .vent p{font-size:.82rem;color:var(--muted);margin:0;}

  /* ---------- SEO content ---------- */
  .seo-content{padding:60px 0;max-width:760px;margin:0 auto;}
  .seo-content h2{font-family:var(--font-display);font-weight:600;font-size:1.4rem;margin:38px 0 12px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;}
  .seo-content h2 svg{flex-shrink:0;width:22px;height:22px;color:var(--red);}
  .seo-content h2:first-child{margin-top:0;}
  .seo-content p{color:var(--ink);opacity:.86;margin:0 0 14px;font-size:.98rem;}
  .seo-content ul{padding-left:20px;color:var(--ink);opacity:.86;font-size:.98rem;}
  .seo-content li{margin-bottom:6px;}
  .updated-note{font-size:.78rem;color:var(--muted-2);font-weight:700;text-align:center;margin-top:30px;}

  /* ---------- FAQ ---------- */
  .faq{padding:20px 0 64px;max-width:760px;margin:0 auto;}
  .faq h2{font-family:var(--font-display);font-weight:600;font-size:1.6rem;text-align:center;margin:0 0 30px;}
  .faq-item{border-bottom:1px solid var(--border);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;
    padding:18px 4px;display:flex;justify-content:space-between;align-items:center;
    font-family:var(--font-display);font-size:1.02rem;font-weight:600;color:var(--ink);
  }
  .faq-q svg{transition:transform .2s;flex-shrink:0;color:var(--red);}
  .faq-item[data-open="true"] .faq-q svg{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
  .faq-item[data-open="true"] .faq-a{max-height:220px;}
  .faq-a p{margin:0 0 18px;padding:0 4px;color:var(--muted);font-size:.92rem;}

  /* ---------- Footer ---------- */
  footer.site{background:var(--footer-bg) !important;color:#fff !important;padding:44px 0 26px;margin-top:20px;}
  .footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px;}
  .footer-grid .logo{color:#fff;}
  .footer-grid .logo em{color:#FF6B85;}
  .footer-grid p{color:#c9b8bb;font-size:.85rem;max-width:280px;margin:10px 0 0;}
  footer.site nav{display:flex;gap:40px;}
  footer.site nav h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#c9b8bb;margin:0 0 12px;}
  footer.site nav a{display:block;text-decoration:none;color:#e9dfe0;font-size:.88rem;margin-bottom:8px;}
  footer.site nav a:hover{color:#FF6B85;}
  .social-links{display:flex;gap:12px;margin-top:4px;margin-bottom:14px;}
  .social-links a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(0,0,0,.25);}
  .social-links a:hover{transform:translateY(-3px) scale(1.08);box-shadow:0 6px 14px rgba(0,0,0,.35);}
  .social-links a.social-facebook{background:#1877F2;}
  .social-links a.social-whatsapp{background:#25D366;}
  .social-links a.social-instagram{background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}
  .social-links a.social-pending{background:transparent !important;border:1.5px dashed rgba(255,255,255,.35);color:rgba(255,255,255,.55);pointer-events:none;box-shadow:none;position:relative;}
  .social-links a.social-pending:hover{transform:none;}
  .social-links a.social-pending::after{content:'Pronto';position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:.6rem;font-weight:700;color:rgba(255,255,255,.5);white-space:nowrap;}
  .footer-bottom{border-top:1px solid #3a2a2d;padding-top:20px;text-align:center;font-size:.78rem;color:#8a787a;}

  /* ---------- Mobile refinements ---------- */
  @media (max-width:640px){
    .hero-band{padding:30px 20px 40px;}
    .tool-card{margin-top:-26px;padding:18px;max-width:100%;}
    .demo-strip{gap:10px;}
    .demo-box{padding:10px 16px;font-size:.92rem;}
    .style-row-main{min-width:100%;}
    .style-actions{margin-left:0;width:100%;justify-content:flex-end;}
    li.style-row{padding:14px 2px;}
    .step{padding:16px 12px;}
    .step-mock{max-width:110px;}
    .steps-grid{gap:14px;}
  }