/* Tars · estilo nuevo para las páginas internas (servicios, contacto, blog,
   artículos, privacidad, 404 y gracias). Se carga DESPUÉS de riso.css y lo
   lleva al mismo mundo que la portada: barra superior, tinta casi negra,
   rosa como único acento, botones redondeados y sin adornos de imprenta.
   No cambia el HTML ni el JS: el cotizador y los formularios siguen igual. */

:root,
[data-theme="dark"],
[data-theme="light"] {
  color-scheme: dark;
  --ink: #0e0e10;
  --paper: #f3efe7;
  --bg: #0e0e10;
  --fg: #f3efe7;
  --muted: #a7a29a;
  --accent: #ff48b0;
  --bg2: #17171a;
  --line: rgb(243 239 231 / 0.14);
  --layer-blend: screen;
  --grain-opacity: 0;
  --margin-w: 0px;
  --rx: 0px;
  --ry: 0px;
}

html { background: var(--bg); }
body { padding-left: 0; padding-top: 68px; background: var(--bg); color: var(--fg); }
body::after { display: none; } /* sin grano de papel */
::selection { background: var(--accent); color: var(--bg); }

/* --- Barra superior (escritorio) ------------------------------------------ */
@media (min-width: 861px) {
  .margin {
    inset: 0 0 auto 0;
    width: auto;
    height: 68px;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0 clamp(16px, 3vw, 40px);
    border: 0;
    background: rgb(14 14 16 / 0.86);
    backdrop-filter: saturate(140%) blur(12px);
    box-shadow: 0 1px 0 var(--line);
  }
  .margin-brand { grid-auto-flow: column; margin-right: auto; font-size: 28px; letter-spacing: 0.03em; }
  .margin-links { order: 2; flex-direction: row; gap: 26px; }
  .margin-links a {
    writing-mode: horizontal-tb;
    transform: none;
    min-width: 0;
    padding: 6px 0;
    font: 600 14px var(--text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
  }
  .margin-links a:hover,
  .margin-links a.is-active,
  .margin-links a[aria-current="page"] { color: var(--fg); text-shadow: none; }
  .margin-actions { order: 3; margin: 0; flex-direction: row; }
}

/* --- Barra superior (celular): mismo fondo; el menú abierto, oscuro -------- */
@media (max-width: 860px) {
  body { padding-top: 64px; }
  /* Fondo sólido (sin backdrop-filter): el desenfoque haría que el menú desplegable,
     que es position: fixed, quede atrapado dentro de la barra. */
  .margin { border-bottom: 0; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
  .margin-links { background: var(--bg); color: var(--fg); }
  .margin-links a:hover,
  .margin-links a.is-active { color: var(--accent); text-shadow: none; }
}

.theme-toggle,
.reg-mark { display: none; }

/* --- Botones --------------------------------------------------------------- */
.btn { border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-pink { color: #120a10; box-shadow: none; border: 0 !important; }
.btn-ink { background: var(--fg); color: var(--bg); box-shadow: none; border: 0 !important; }
@media (hover: hover) {
  .btn-pink:hover { background: var(--fg); color: var(--bg); }
  .btn-line:hover { background: var(--bg2); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
  .btn-ink:hover { background: var(--accent); color: #120a10; }
}

/* --- Fuera los adornos de imprenta ----------------------------------------- */
.stamp,
.colophon-word,
.tape { display: none !important; }
.riso-word::before,
.riso-word::after,
[data-text]::before,
[data-text]::after { display: none !important; }
.display { letter-spacing: 0; }

/* Líneas gruesas de tinta -> filetes finos */
main section,
main header,
main article,
.page-hero,
.colophon { border-color: var(--line) !important; }
main section,
.page-hero { border-top-width: 1px !important; border-bottom-width: 1px !important; }

/* Cajas y tarjetas: esquinas redondeadas como en la portada */
.note, .demo, .key-cap, .ticket, .ticket-rail, .poster-sheet, .faq details, .contact-form, form fieldset,
input:not([type="checkbox"]):not([type="radio"]), textarea, select { border-radius: 14px; }

/* --- Encabezado de página: aire bajo la barra ------------------------------ */
.page-hero { padding-top: clamp(3.5rem, 9vw, 7.5rem); }
.page-hero .hero-text { color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; }

/* --- Lista de servicios: título y descripción alineados arriba -------------- */
.work-list li { align-items: start; gap: 1rem 3rem; padding-block: 1.75rem; border-top-width: 1px; border-color: var(--line); }
.work-list li:last-child { border-bottom: 1px solid var(--line); }
.work-list h3 { font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 0.9; }
.spec .work-list p { padding-top: 0.4rem; font-size: 1.08rem; line-height: 1.55; }
@media (hover: hover) { .work-list li:hover h3 { text-shadow: none; } }

/* --- Precios: tarjetas planas como en la portada (sin carteles torcidos) --- */
.prices { align-items: stretch; }
.price-flyer { display: flex; flex-direction: column; gap: 0.25rem; padding: clamp(1.6rem, 2.4vw, 2.2rem); border-radius: 26px; background: var(--bg2) !important; color: var(--fg); transform: none !important; margin-top: 0 !important; box-shadow: none; border: 0 !important; }
.price-flyer--b { background: var(--accent) !important; color: #120a10; }
.price-flyer h3 { font-size: clamp(1.6rem, 2.2vw, 2.2rem); }
.price-flyer .price { margin: 0.4rem 0 0.2rem; line-height: 0.9; }
.price-flyer > p:not(.price) { color: var(--muted); }
.price-flyer--b > p:not(.price) { color: #3b0a26; }
.price-flyer ul,
.includes ul { border-top: 1px solid var(--line) !important; font-weight: 600; }
.price-flyer--b ul { border-color: rgb(18 10 16 / 0.25) !important; }
.price-flyer li::before { background: var(--accent); }
.price-flyer--b li::before { background: #120a10; }

/* --- Siempre incluido: tarjetas en vez de tabla de imprenta --------------- */
.includes { gap: 14px; }
.includes article,
.includes article + article { border: 0 !important; border-radius: 22px; background: var(--bg2); padding: clamp(1.4rem, 2.2vw, 2rem); }
.includes li::before { background: var(--accent); }

/* --- Blog: artículos en tres tarjetas parejas (sin zigzag) ----------------- */
.zine-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.zine-entry,
.zine-entry:nth-child(n) { grid-column: auto; margin-top: 0; position: relative; display: flex; flex-direction: column; padding: clamp(1.4rem, 2.2vw, 2rem); border: 0; border-radius: 22px; background: var(--bg2); transition: background-color 200ms var(--ease-out, ease-out); }
.zine-entry h3 { font-size: clamp(1.6rem, 2.3vw, 2.3rem); line-height: 0.95; }
.zine-entry h3 a { text-decoration: none; }
.zine-entry h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* toda la tarjeta es el link */
.zine-entry h3 a:focus-visible { outline: none; }
.zine-entry:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .zine-entry:hover { background: #1f1f24; } .zine-entry:hover h3 { color: var(--accent); } }
@media (max-width: 860px) { .zine-list { grid-template-columns: minmax(0, 1fr); } }

/* --- Consejos: tarjetas planas; solo la primera en rosa -------------------- */
.note,
.note--pink, .note--paper, .note--yellow { transform: none !important; margin-top: 0 !important; border-radius: 22px; background: var(--bg2); color: var(--fg); }
.note--pink { background: var(--accent); color: #120a10; }
.note p { color: var(--muted); }
.note--pink p { color: #3b0a26; }

/* --- Formulario de contacto: tarjeta oscura, derecha y campos redondeados -- */
.form-sheet { transform: none; border: 0; border-radius: 26px; background: var(--bg2); color: var(--fg); }
.form-sheet .contact-form input,
.form-sheet .contact-form textarea { color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.form-sheet .contact-form input::placeholder,
.form-sheet .contact-form textarea::placeholder { color: #8d887f; }
.form-sheet .contact-form input:focus,
.form-sheet .contact-form textarea:focus { border-color: var(--accent); outline: 3px solid rgb(255 72 176 / 0.35); outline-offset: 1px; }
.form-sheet .form-consent { color: var(--muted); }
.form-sheet .form-consent a { color: var(--fg); }
.form-sheet .btn-pink { border: 0; }

/* --- WhatsApp flotante: píldora rosa -------------------------------------- */
.wa-stamp {
  width: auto;
  height: auto;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  transform: none;
  font: 800 14px var(--text);
  letter-spacing: 0;
  text-transform: none;
}
/* Borde oscuro y sombra: se distingue aunque pase por encima de algo rosa. */
.wa-stamp { box-shadow: 0 0 0 3px var(--bg), 0 12px 30px rgb(0 0 0 / 0.45); }
@media (hover: hover) { .wa-stamp:hover { transform: translateY(-2px); } }

/* --- Pie: links legales ---------------------------------------------------- */
.colophon { background: var(--bg); border-top: 1px solid var(--line); }
.colophon-copy a { color: var(--muted); }
.colophon-copy .regret { color: var(--accent); font-weight: 700; }

/* --- Cotizador de servicios: link al armado completo de la portada -------- */
.register-more { margin-top: 1rem; color: var(--muted); }
.register-more a { color: var(--fg); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 4px; }

/* --- Teclas del cotizador: tarjetas oscuras; elegida = borde rosa ---------- */
.key-cap { background: var(--bg2); color: var(--fg); border: 0; border-radius: 20px; box-shadow: 0 6px 0 #26262c; }
.key-name { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.key-price { color: var(--muted); }
@media (hover: hover) { .key:hover .key-cap { box-shadow: 0 8px 0 #26262c; } }
.key:active .key-cap { box-shadow: 0 1px 0 #26262c; }
.key input:checked + .key-cap { background: #1d1219; box-shadow: inset 0 0 0 1.5px var(--accent), 0 2px 0 #3a1a2c; }
.key input:checked + .key-cap .key-price { color: var(--accent); }

/* --- Botones dentro del ticket de papel: tinta oscura, que se vean -------- */
.ticket .btn-ink { background: #120a10; color: var(--paper); }
.ticket .btn-ink[aria-disabled="true"] { background: #d9d3c8; color: #6b655a; }
.ticket .btn-line { color: #120a10; box-shadow: inset 0 0 0 1.5px #120a10; }
.ticket .btn-line:disabled { color: #8d877c; box-shadow: inset 0 0 0 1.5px #c9c2b6; }
@media (hover: hover) {
  .ticket .btn-ink:not([aria-disabled="true"]):hover { background: var(--accent); color: #120a10; }
  .ticket .btn-line:not(:disabled):hover { background: #120a10; color: var(--paper); }
}

/* --- Títulos de página: un poco más de interlineado, para que los signos
       (¡, ¿) y los acentos de mayúsculas (Á, É) no se pisen entre líneas. -- */
.riso-title { line-height: 1; padding-top: 0.04em; font-size: clamp(3.2rem, 8.5vw, 8.5rem); text-wrap: balance; }

/* --- Tarjetas de consejos / próximos pasos: columnas parejas, sin huecos --- */
.tips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tips:not(:has(.note:nth-of-type(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .tips, .tips:not(:has(.note:nth-of-type(3))) { grid-template-columns: minmax(0, 1fr); } }
.tips .note { grid-column: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.tips .note p:last-child:has(a) { margin-top: auto; padding-top: 0.6rem; }

/* --- Pantallas grandes: el contenido no pasa de 1400 px y queda centrado
       (riso.css usa --gutter también para separaciones, por eso no se toca). */
@media (min-width: 1500px) {
  main > section, main > header:not(.page-hero--article), .colophon { padding-inline: max(var(--gutter), calc((100% - 1400px) / 2)) !important; }
}

/* --- Contacto: canales con filetes finos y etiqueta centrada al valor ----- */
.channels { border-top: 1px solid var(--line); }
.channels li { align-items: center; border-bottom: 1px solid var(--line); }
.channels a { font-size: clamp(2rem, 4.2vw, 3.6rem); transition: color 160ms ease-out; }
@media (hover: hover) { .channels a:hover { color: var(--accent); } }

/* --- Menú: la página actual en rosa liso (sin la sombra azul de imprenta) - */
.margin-links a[aria-current="page"] { text-shadow: none !important; }
@media (max-width: 860px) { .margin-links a[aria-current="page"] { color: var(--accent); } }

/* --- Artículos del blog: columna de lectura centrada (~70 caracteres) ---- */
.page-hero--article,
.legal.article-body { box-sizing: content-box; max-width: 44rem; margin-inline: auto; }
.page-hero--article { border-bottom: 0 !important; padding-bottom: 1rem; }
.page-hero--article .hero-text { max-width: none; }
.legal.article-body { padding-top: 2.5rem; font-size: 1.15rem; line-height: 1.7; }
.article-body h2 { margin-top: 3.2rem; }
.article-body ul li::marker { color: var(--accent); }
.riso-title.riso-title--article { max-width: none; font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 0.98; }

/* --- Servicios: resumen a la derecha del encabezado (abajo en celular) ---- */
.hero-facts { list-style: none; display: grid; gap: 10px; margin-top: 2.5rem; }
.hero-facts li { display: grid; gap: 2px; padding: 18px 22px; border-radius: 20px; background: var(--bg2); }
.hero-facts li:first-child { background: var(--accent); color: #120a10; }
.hero-facts b { font: 900 clamp(2rem, 3vw, 2.6rem)/1 var(--display); text-transform: uppercase; }
.hero-facts span { color: var(--muted); font-weight: 600; }
.hero-facts li:first-child span { color: #3b0a26; }
@media (min-width: 1100px) {
  .page-hero:has(.hero-facts) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); column-gap: 4rem; align-items: end; }
  .page-hero:has(.hero-facts) > :not(.hero-facts) { grid-column: 1; }
  .hero-facts { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

/* --- Privacidad: recuadros legales obligatorios como tarjetas suaves ------ */
.legal-notice { border: 0 !important; border-radius: 16px; background: var(--bg2); padding: 1.1rem 1.3rem; }

/* --- 404: sin alto de pantalla completa, para que se vean los atajos ------ */
.page-hero--error { min-height: 0 !important; }
.page-hero--error .big-number { font-size: clamp(6rem, 16vw, 13rem); line-height: 0.85; }