/* Tema único de Viste-m: fondos blancos con acentos de color en modo claro,
   y su equivalente oscuro cuando el sistema está en modo oscuro (prefers-color-scheme).
   Se carga después de style.css y usa variables para que ambos modos compartan las mismas reglas. */

:root {
  color-scheme: light dark;

  /* Acentos (incluye el naranja del logotipo) */
  --c-naranja: #ec6608; --c-amarillo: #ffc93c; --c-verde: #0f9d8a;
  --c-azul: #2b7de9; --c-violeta: #6d28d9; --c-rosa: #c2185b;
  --franja: linear-gradient(90deg, var(--c-naranja), var(--c-amarillo), var(--c-verde), var(--c-azul), var(--c-violeta), var(--c-rosa));

  /* Modo claro */
  --paper: #ffffff; --paper-2: #ffffff; --line: #ebe7f0; --ink: #24172b; --muted: #5a4d61;
  --surface: #ffffff;
  --tone-peach: #fff1e4; --tone-mint: #e6f7f2; --tone-lilac: #efe8ff;
  --ti1: #ffe6d5; --ti2: #d4f4ee; --ti3: #e9defd; --ti4: #fff0b8; --ti5: #ffdbe8; --ti6: #dbe9ff; --ti7: #ffe1cc; --ti8: #e1f4cc;
  --card-c1: var(--c-naranja); --card-c2: var(--c-verde); --card-c3: var(--c-violeta); --card-c4: #d99a00;
  --card-c5: var(--c-rosa); --card-c6: var(--c-azul); --card-c7: #d9480f; --card-c8: #4c9a12;
  --sheet-shadow: 0 -12px 32px rgb(36 23 43 / 7%);
  --nav-hover: #fff3e0;
  --eyebrow-ink: var(--c-violeta);
  --step2: #ffb3cf; --step3: #9be3d6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1220; --paper-2: #1a1220; --line: #3c2c46; --ink: #fdf3ea; --muted: #d0c0d4;
    --surface: #251b2c;
    --tone-peach: #2b1f27; --tone-mint: #17302d; --tone-lilac: #251f3f;
    --ti1: #4a2c1c; --ti2: #174038; --ti3: #33264f; --ti4: #4a3d12; --ti5: #4a2236; --ti6: #1b3454; --ti7: #4a2a17; --ti8: #2b4115;
    --card-c1: #ff8a3d; --card-c2: #2bd1b8; --card-c3: #a98bff; --card-c4: #ffc93c;
    --card-c5: #ff8fba; --card-c6: #6aa8ff; --card-c7: #ff7a45; --card-c8: #8fd14f;
    --sheet-shadow: 0 -12px 32px rgb(0 0 0 / 45%);
    --nav-hover: #3a2a33;
    --eyebrow-ink: #c4b5fd;
    --step2: #ff8fba; --step3: #2bd1b8;
  }
}

/* ---------- Cabecera ---------- */
.topbar::before { content: ""; display: block; height: 6px; background: var(--franja); }
.site-nav a:hover { background: var(--nav-hover); }
.btn-ghost { background: var(--surface); }
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .topbar { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
  .site-header { border-bottom: 1px solid var(--line); }
}

/* ---------- Portada ---------- */
.eyebrow { background: var(--surface); border: 2px solid var(--eyebrow-ink); color: var(--eyebrow-ink); }
.chips li, .chips li:nth-child(n) { background: var(--surface); border: 2px solid var(--ink); color: var(--ink); }
.chips li:nth-child(1) { box-shadow: 0 3px 0 var(--c-naranja); }
.chips li:nth-child(2) { box-shadow: 0 3px 0 var(--c-verde); }
.chips li:nth-child(3) { box-shadow: 0 3px 0 var(--c-azul); }
.chips li:nth-child(4) { box-shadow: 0 3px 0 var(--c-violeta); }
.hero-art::before { background: var(--c-amarillo); }
.hero-art::after { background: var(--ti5); }

.ribbon { background: var(--c-amarillo); color: #24172b; border-block: 2px solid var(--ink); box-shadow: none; transform: rotate(-1deg); position: relative; z-index: 3; margin-bottom: 0; }
.ribbon span::after { content: "✦"; color: #c2185b; }
.ribbon span:last-child::after { content: none; }

/* ---------- Secciones: hojas apiladas con esquinas redondeadas ---------- */
main > .section, main > .related {
  position: relative; background: var(--surface); border-radius: 2.5rem 2.5rem 0 0; margin-top: -2.5rem;
  padding-top: calc(clamp(2.75rem, 6vw, 5rem) + 2.5rem); box-shadow: var(--sheet-shadow); border-block: 0;
}
main > .ribbon + .section { margin-top: -1rem; padding-top: calc(clamp(2.75rem, 6vw, 5rem) + 1rem); }
main > .section.tone-peach, main > .related { background: var(--tone-peach); }
main > .section.tone-mint { background: var(--tone-mint); }
main > .section.tone-lilac { background: var(--tone-lilac); }
.hero { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.media-logos li { background: var(--surface); }

/* ---------- Tarjetas de servicios ---------- */
.cards .card { background: var(--surface); overflow: hidden; --c: var(--card-c1); --tinte: var(--ti1); }
.cards .card:nth-child(8n+1) { background: var(--surface); --c: var(--card-c1); --tinte: var(--ti1); }
.cards .card:nth-child(8n+2) { background: var(--surface); --c: var(--card-c2); --tinte: var(--ti2); }
.cards .card:nth-child(8n+3) { background: var(--surface); --c: var(--card-c3); --tinte: var(--ti3); }
.cards .card:nth-child(8n+4) { background: var(--surface); --c: var(--card-c4); --tinte: var(--ti4); }
.cards .card:nth-child(8n+5) { background: var(--surface); --c: var(--card-c5); --tinte: var(--ti5); }
.cards .card:nth-child(8n+6) { background: var(--surface); --c: var(--card-c6); --tinte: var(--ti6); }
.cards .card:nth-child(8n+7) { background: var(--surface); --c: var(--card-c7); --tinte: var(--ti7); }
.cards .card:nth-child(8n+8) { background: var(--surface); --c: var(--card-c8); --tinte: var(--ti8); }
.card { box-shadow: 0 5px 0 var(--c, var(--ink)); }
.card:hover { box-shadow: 0 9px 0 var(--c, var(--ink)); }
.card::before { content: ""; display: block; height: 10px; background: var(--c, var(--c-naranja)); border-bottom: 2px solid var(--ink); }
.card-emoji { background: var(--tinte, var(--surface)); }
.card .price { color: var(--ink); }
.card .price::after { color: var(--c); font-weight: 800; }

/* ---------- Páginas interiores ---------- */
.page-head { background: var(--tone-peach); border-bottom: 2px solid var(--ink); border-radius: 0 0 2.5rem 2.5rem; }
.page-head::before { background: var(--c-amarillo); }
.page-head::after { background: var(--ti2); }
.page-head .wrap::after { content: ""; display: block; height: 6px; width: 100%; margin-top: 1.75rem; background: var(--franja); border-radius: 999px; }
.page-head .lead { opacity: 1; color: var(--muted); }
.panel { background: var(--surface); box-shadow: 0 5px 0 var(--c-naranja); }
.aside .panel + .panel { background: var(--surface); box-shadow: 0 5px 0 var(--c-verde); }
.panel .price-big { color: var(--accent); }
.prose blockquote { background: var(--surface); border-left: 8px solid var(--c-violeta); box-shadow: 4px 5px 0 var(--c-violeta); }
.figure-lead img { box-shadow: 6px 8px 0 var(--c-amarillo); }

/* ---------- Tarifas, packs, FAQ, contacto, pasos ---------- */
.price-list li, .price-list li:nth-child(odd), .price-list li:nth-child(even) { background: var(--surface); border-left-width: 10px; }
.price-list li:nth-child(6n+1) { border-left-color: var(--c-naranja); }
.price-list li:nth-child(6n+2) { border-left-color: var(--c-verde); }
.price-list li:nth-child(6n+3) { border-left-color: var(--c-azul); }
.price-list li:nth-child(6n+4) { border-left-color: var(--c-violeta); }
.price-list li:nth-child(6n+5) { border-left-color: var(--c-rosa); }
.price-list li:nth-child(6n+6) { border-left-color: var(--c-amarillo); }

.pack, .pack:nth-child(1), .pack:nth-child(2), .pack:nth-child(3), .pack.is-featured { background: var(--surface); border-top-width: 10px; }
.pack:nth-child(1) { border-top-color: var(--c-verde); box-shadow: 0 5px 0 var(--c-verde); }
.pack:nth-child(2) { border-top-color: var(--c-azul); box-shadow: 0 5px 0 var(--c-azul); }
.pack:nth-child(3) { border-top-color: var(--c-violeta); box-shadow: 0 5px 0 var(--c-violeta); }
.pack.is-featured { border-top-color: var(--c-rosa); box-shadow: 0 5px 0 var(--c-rosa); }
.pack.is-featured .tag { background: var(--accent); color: var(--accent-ink); }

.faq, .faq:nth-child(odd), .faq:nth-child(even) { background: var(--surface); border-left-width: 10px; }
.faq:nth-child(4n+1) { border-left-color: var(--c-naranja); }
.faq:nth-child(4n+2) { border-left-color: var(--c-verde); }
.faq:nth-child(4n+3) { border-left-color: var(--c-azul); }
.faq:nth-child(4n+4) { border-left-color: var(--c-violeta); }

.contact-card, .contact-card:nth-child(n) { background: var(--surface); }
.contact-card:nth-child(1) { box-shadow: 0 5px 0 #25d366; }
.contact-card:nth-child(2) { box-shadow: 0 5px 0 var(--c-naranja); }
.contact-card:nth-child(3) { box-shadow: 0 5px 0 var(--c-azul); }
.contact-card:nth-child(4) { box-shadow: 0 5px 0 var(--c-violeta); }

.steps li { background: var(--surface); }
.steps li:nth-child(1)::before { background: var(--c-amarillo); }
.steps li:nth-child(2)::before { background: var(--step2); }
.steps li:nth-child(3)::before { background: var(--step3); }
.ticks li { background: var(--surface); }
.press-assets figcaption { background: #fff8e1; }
.err-paths a { background: var(--surface); }
.err-paths li:nth-child(6n+1) a { box-shadow: 0 5px 0 var(--c-naranja); }
.err-paths li:nth-child(6n+2) a { box-shadow: 0 5px 0 var(--c-verde); }
.err-paths li:nth-child(6n+3) a { box-shadow: 0 5px 0 var(--c-violeta); }
.err-paths li:nth-child(6n+4) a { box-shadow: 0 5px 0 var(--c-amarillo); }
.err-paths li:nth-child(6n+5) a { box-shadow: 0 5px 0 var(--c-rosa); }
.err-paths li:nth-child(6n+6) a { box-shadow: 0 5px 0 var(--c-azul); }

/* ---------- Banda final y pie ---------- */
.cta-band { background: transparent; color: var(--ink); overflow: visible; margin-top: 1rem; }
.cta-band::before, .cta-band::after { content: none; }
.cta-band .wrap {
  position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  background: linear-gradient(135deg, #c2185b 0%, #6d28d9 100%); color: #fff;
  border: 2px solid var(--ink); border-radius: 32px; box-shadow: 0 6px 0 var(--ink);
}
.cta-band .wrap::before { content: ""; position: absolute; width: 14rem; aspect-ratio: 1; left: -5rem; top: -6rem; border-radius: 50%; background: var(--c-amarillo); }
.cta-band .wrap::after { content: ""; position: absolute; width: 10rem; aspect-ratio: 1; right: -3rem; bottom: -5rem; border-radius: 50%; background: var(--c-naranja); }
.cta-band .wrap > * { position: relative; z-index: 1; }
.cta-band h2, .cta-band p { color: #fff; }
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--franja); }