/*
 * Parte de abajo del inicio (28 sep 2026) con design-systems/discord/ en los colores de la web:
 * titulares en mayúsculas de peso 800 (Poppins, sustituto de ABC Ginto Nord), paneles de 24px
 * con su propio fondo y sin sombras, tarjetas de 16px y botones de 12px. El Blurple se cambia por
 * el naranja de TWINS y el fondo índigo por la página blanca (la web es solo clara).
 */
:root{
  --dc-snow:#ffffff; --dc-off-white:#f6f6f6; --dc-ink:#23272a; --dc-charcoal:#2c2f33; --dc-graphite:#333333;
  --dc-void:#000000; --dc-fog:#babcd9; --dc-greyple:#99aab5; --dc-dim:#50555f; --dc-ember:#fda220;
  --dc-accent:#ff4500; --dc-cta:#d63a00; --dc-wa:#25d366;
  --dc-display:'Poppins','Outfit',ui-sans-serif,system-ui,sans-serif;
  --dc-ui:'DM Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --dc-r-btn:12px; --dc-r-btn-lg:16px; --dc-r-card:16px; --dc-r-panel:24px; --dc-r-pill:104px;
}

.dc-why,.dc-reviews,.dc-policies,.dc-cta{padding:40px 0;background:var(--dc-snow);color:var(--dc-ink);font-family:var(--dc-ui);font-size:16px;line-height:1.5;letter-spacing:.016em}
.dc-why{padding-top:80px}
.dc-cta{padding-bottom:80px}

/* Tipografía */
.dc-h{margin:0;font-family:var(--dc-display);font-size:48px;font-weight:800;line-height:.93;letter-spacing:-.48px;text-transform:uppercase;overflow-wrap:break-word}
.dc-h-sm{font-size:36px;font-weight:700;line-height:1.2;letter-spacing:-.36px}
.dc-kicker{display:inline-block;margin-bottom:16px;color:var(--dc-accent);font-size:16px;font-weight:500;line-height:1.2;letter-spacing:.016em}
.dc-lead{max-width:560px;margin:20px 0 0;font-size:20px;line-height:1.38;letter-spacing:.013em}

/* Botones: primario naranja, secundario blanco con borde, oscuro para WhatsApp */
.dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin:0;padding:15px 24px;border:1px solid transparent;border-radius:var(--dc-r-btn);font-family:var(--dc-ui);font-size:16px;font-weight:500;line-height:1.2;letter-spacing:.016em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,filter .15s}
.dc-btn-primary{padding:19.5px 24px;background:var(--dc-cta);color:var(--dc-snow)}
.dc-btn-primary:hover{filter:brightness(.9)}
.dc-btn-light{border-color:var(--dc-ink);background:var(--dc-snow);color:var(--dc-ink)}
.dc-btn-light:hover{background:var(--dc-off-white)}
.dc-btn-dark{background:var(--dc-ink);color:var(--dc-snow)}
.dc-btn-dark:hover{background:var(--dc-charcoal)}
.dc-btn-dark svg{color:var(--dc-wa)}
.dc-btn:focus-visible,.dc-arrow:focus-visible{outline:2px solid var(--dc-accent);outline-offset:3px}
.dc-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}

/* ¿Por qué elegirnos? — escenario oscuro con las cuatro razones */
.dc-stage{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;padding:56px;border-radius:var(--dc-r-panel);background:var(--dc-ink);color:var(--dc-snow)}
.dc-watermark{position:absolute;left:-10px;bottom:-34px;font-family:var(--dc-display);font-size:176px;font-weight:800;line-height:.86;letter-spacing:-1.76px;color:var(--dc-charcoal);pointer-events:none;user-select:none}
.dc-stage-head{position:relative;align-self:start}
.dc-stage .dc-h{color:var(--dc-snow)}
.dc-stage .dc-lead{color:var(--dc-fog)}
.dc-stage .dc-btn-light{border-color:var(--dc-snow)}
.dc-reasons{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dc-reason{display:grid;align-content:start;gap:12px;min-width:0;padding:28px;border-radius:var(--dc-r-card);background:var(--dc-charcoal)}
.dc-reason-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dc-reason-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--dc-r-btn);background:var(--dc-accent);color:var(--dc-snow)}
.dc-reason-num{font-family:var(--dc-display);font-size:20px;font-weight:800;line-height:1;color:var(--dc-dim)}
.dc-reason h3{margin:0;color:var(--dc-snow);font-size:20px;font-weight:500;line-height:1.2;letter-spacing:.013em}
.dc-reason p{margin:0;color:var(--dc-fog)}

/* Reseñas — panel claro con la fuente de Google y las tarjetas */
.dc-panel{padding:56px;border-radius:var(--dc-r-panel);background:var(--dc-off-white)}
.dc-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.dc-reviews .dc-lead{color:var(--dc-graphite)}
.dc-arrows{display:flex;flex:none;gap:8px}
.dc-arrow{display:grid;place-items:center;width:52px;height:52px;margin:0;padding:0;border:1px solid var(--dc-ink);border-radius:var(--dc-r-btn);background:var(--dc-snow);color:var(--dc-ink);cursor:pointer;transition:background-color .15s,color .15s}
.dc-arrow:hover{background:var(--dc-ink);color:var(--dc-snow)}
.dc-source{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;margin:36px 0 16px;padding:20px 24px;border-radius:var(--dc-r-card);background:var(--dc-snow)}
.dc-source-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--dc-r-btn);background:var(--dc-ink);color:var(--dc-snow)}
.dc-source strong{display:block;font-weight:700;line-height:1.2}
.dc-source div>span{display:block;margin-top:4px;color:var(--dc-graphite)}
.dc-reviews .ab-review-track{grid-auto-columns:calc((100% - 32px)/3);gap:16px}
.dc-reviews .ab-review{gap:16px;padding:28px;border:0;border-radius:var(--dc-r-card);background:var(--dc-snow)}
.dc-reviews .ab-stars{gap:4px;color:var(--dc-ember)}
.dc-reviews .ab-stars svg{width:16px;height:16px}
.dc-reviews .ab-review-text{color:var(--dc-ink);font-size:16px;line-height:1.5}
.dc-reviews .ab-more{margin:-8px 0 0;color:var(--dc-cta);font-size:16px;font-weight:500}
.dc-reviews .ab-avatar{width:44px;height:44px;border-radius:var(--dc-r-btn);background:var(--dc-accent);color:var(--dc-snow);font-family:var(--dc-display);font-size:16px;font-weight:800}
.dc-reviews .ab-review-author a{color:var(--dc-ink);font-weight:700}
.dc-reviews .ab-review-author a.ab-review-source{margin-top:6px;padding:4px 12px;border:0;border-radius:var(--dc-r-pill);background:var(--dc-off-white);color:var(--dc-graphite);font-weight:500}

/* Políticas — acordeón en tarjetas */
.dc-policies-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:start;gap:48px}
.dc-acc{display:grid;gap:8px}
.dc-acc .ab-acc-item{padding:0 24px;border:1px solid transparent;border-radius:var(--dc-r-card);background:var(--dc-off-white);transition:background-color .15s,border-color .15s}
.dc-acc .ab-acc-item[open]{border-color:var(--dc-ink);background:var(--dc-snow)}
.dc-acc summary{padding:20px 0;font-size:16px;font-weight:500;letter-spacing:.016em}
.dc-acc .ab-acc-item p{max-width:65ch;margin:0 0 20px;color:var(--dc-graphite);font-size:16px;line-height:1.5}

/* Cierre — panel naranja con la llamada a la acción */
.dc-cta-panel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:36px;padding:56px;border-radius:var(--dc-r-panel);background:linear-gradient(135deg,var(--dc-accent),var(--dc-cta));color:var(--dc-snow)}
.dc-cta-panel::after{content:"";position:absolute;top:-96px;right:-96px;width:320px;height:320px;border:36px solid rgba(255,255,255,.12);border-radius:50%;pointer-events:none}
.dc-cta-panel>*{position:relative;z-index:1}
.dc-cta-panel .dc-h{max-width:640px;color:var(--dc-snow)}
.dc-cta-panel p{max-width:520px;margin:20px 0 0;font-size:20px;line-height:1.38;letter-spacing:.013em}
.dc-cta-panel .dc-ctas{flex:none;margin-top:0}
.dc-cta-panel .dc-btn-light{border-color:var(--dc-snow)}

/* Pie — fondo negro, columnas sin divisores y la marca en grande */
.dc-footer{padding:80px 0 calc(112px + env(safe-area-inset-bottom,0px));border-top:0;background:var(--dc-void);color:var(--dc-snow);font-family:var(--dc-ui);font-size:16px;line-height:1.5;letter-spacing:.016em}
.dc-foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:36px 32px}
.dc-foot-brand a{display:inline-block;line-height:0}
.dc-foot-brand img{width:120px;height:auto}
.dc-foot-brand p{margin:16px 0 0;color:var(--dc-fog)}
.dc-foot-brand strong{display:block;color:var(--dc-snow);font-weight:700}
.dc-foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.dc-foot-col h2{margin:0 0 8px;color:var(--dc-snow);font-size:16px;font-weight:500;line-height:1.2;letter-spacing:.013em}
.dc-foot-col a,.dc-foot-col span,.dc-foot-col .ab-link{margin:0;padding:0;border:0;background:none;color:var(--dc-fog);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:color .15s}
.dc-foot-col span{cursor:default}
.dc-foot-col a:hover,.dc-foot-col .ab-link:hover{color:var(--dc-snow)}
.dc-foot-word{margin:56px 0 0;font-family:var(--dc-display);font-size:112px;font-weight:800;line-height:.86;letter-spacing:-1.12px;color:var(--dc-charcoal);white-space:nowrap;overflow:hidden;user-select:none}
.dc-foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:24px;padding-top:24px;border-top:1px solid var(--dc-dim);color:var(--dc-greyple)}
.dc-foot-bottom a{color:inherit;text-decoration:none}
.dc-foot-bottom a:hover{color:var(--dc-snow)}

@media (max-width:1100px){
  .dc-stage{grid-template-columns:minmax(0,1fr)}
  .dc-foot-word{font-size:80px}
  .dc-reviews .ab-review-track{grid-auto-columns:calc((100% - 16px)/2)}
}
@media (max-width:760px){
  .dc-why,.dc-reviews,.dc-policies,.dc-cta{padding:12px 0}
  .dc-why{padding-top:48px}
  .dc-cta{padding-bottom:48px}
  .dc-h{font-size:36px;line-height:1.2;letter-spacing:-.36px}
  .dc-lead,.dc-cta-panel p{font-size:16px;line-height:1.5}
  .dc-stage,.dc-panel,.dc-cta-panel{padding:36px 20px}
  .dc-stage{gap:36px}
  .dc-watermark{font-size:112px;bottom:-20px}
  .dc-reasons{grid-template-columns:minmax(0,1fr);gap:12px}
  .dc-reason{padding:24px}
  .dc-ctas{margin-top:28px}
  .dc-ctas{flex-direction:column;align-items:stretch}
  .dc-ctas .dc-btn{width:100%}
  .dc-panel-head{flex-direction:column;align-items:flex-start}
  .dc-arrows{display:none}
  .dc-source{grid-template-columns:48px minmax(0,1fr);margin-top:28px;padding:20px}
  .dc-source .dc-btn{grid-column:1/-1;width:100%}
  .dc-reviews .ab-review-track{grid-auto-columns:85%;gap:12px}
  .dc-reviews .ab-review{padding:24px}
  .dc-policies-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .dc-acc .ab-acc-item{padding:0 20px}
  .dc-cta-panel{flex-direction:column;align-items:stretch;gap:28px}
  .dc-cta-panel::after{top:-120px;right:-140px}
  .dc-footer{padding-top:56px}
  .dc-foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc-foot-brand{grid-column:1/-1}
  .dc-foot-word{margin-top:40px;font-size:36px;line-height:1.2;letter-spacing:-.36px}
}