/*
 * assets/css/sivlo.css — página de producto (sivlo/index.html): hero de producto,
 * usos, funciones, cómo está construido, seguridad, planes, prueba, cierre.
 * Colores SOLO por var(--…): ver tokens.css. Lo compartido con index.html (reset,
 * cabecera, botones, tarjetas, kicker/h2/lede, FAQ, pie, marcos de dispositivo)
 * vive en site.css: no se repite aquí.
 */

/* Acento de página: /sivlo/ usa el azul/cian de Sivlo en vez del índigo de TaskFlowOps.
   .kicker, .seg[aria-pressed=true] y .btn-primary (en site.css) lo toman solo con esto. */
body.page-sivlo { --accent: var(--sivlo-blue); --accent-strong: var(--sivlo-cyan); --accent-soft: var(--sivlo-tint); }

/* ===== Cabecera: miga "/ Sivlo" ===== */
.crumb { color: var(--muted); display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.crumb span { color: var(--sivlo-blue); }

/* ===== Marca de Sivlo (spec 2026-10-01 §4) =====
 * Un solo sprite con dos símbolos (#sivlo-mark y #sfc-mark). No se oculta con display:none: los degradados
 * de un SVG oculto así dejan de pintarse en los navegadores. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== Hero de producto ===== */
.hero { padding: 4rem 0 3.5rem; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; }
.mark { display: flex; align-items: center; gap: 0.7rem; }
.mark svg { width: 52px; height: 52px; }
.mark b { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.mark small { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sivlo-blue); font-weight: 600; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.06; margin-top: 1.4rem; font-weight: 700; }
.hero .lede { margin-top: 1.1rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.facts { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem; color: var(--muted); font-size: 0.95rem; }
.facts b { color: var(--ink); font-family: var(--display); font-weight: 600; }

/* Escena del hero: portátil (tablero) + teléfono (app del equipo) con capturas reales.
   .laptop/.screen-wrap/.laptop-base/.phone/.phone-screen viven en site.css. */
.stage { position: relative; padding-bottom: 8%; }

/* ===== Para quién es ===== */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.use { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem; box-shadow: var(--shadow); }
.use h3 { font-size: 1.05rem; }
.use p { color: var(--ink-soft); font-size: 0.97rem; margin-top: 0.4rem; }

/* ===== Qué hace ===== */
/* Nueve módulos en 3 × 3 (spec 2026-10-01 §7). */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.mod { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem; box-shadow: var(--shadow); display: grid; gap: 0.5rem; align-content: start; }
.mod .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--sivlo-tint); color: var(--sivlo-blue); display: grid; place-items: center; }
.mod .ic svg { width: 20px; height: 20px; }
.mod h3 { font-size: 1.05rem; }
.mod p { color: var(--ink-soft); font-size: 0.95rem; }
/* Ícono del portal: la marca morada de Sivlo for Clients, un poco más grande que los íconos de línea. */
.mod .ic.ic-sfc { background: var(--sfc-tint); }
.mod .ic.ic-sfc svg { width: 28px; height: 28px; }

/* ===== Cómo está construido: tres columnas conectadas ===== */
.arch { margin-top: 2rem; display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; gap: 0.8rem; align-items: stretch; }
.arch .col { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.3rem; box-shadow: var(--shadow); display: grid; gap: 0.6rem; align-content: start; }
.arch .col.core { border-color: var(--sivlo-blue); }
.arch h3 { font-size: 1rem; }
.arch .who { font-size: 0.8rem; color: var(--sivlo-blue); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.arch ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; font-size: 0.95rem; color: var(--ink-soft); }
.arch li b { color: var(--ink); font-weight: 600; }
.arch .link { align-self: center; color: var(--line-strong); font-size: 1.6rem; }
.arch-note { margin-top: 1rem; color: var(--muted); font-size: 0.92rem; max-width: 70ch; }

/* ===== Seguridad y tus datos ===== */
.security { margin-top: 2rem; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.2rem; }
.sec-list { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem; box-shadow: var(--shadow); }
.sec-list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.sec-list li { display: grid; grid-template-columns: 26px 1fr; gap: 0.6rem; align-items: start; }
.sec-list li svg { width: 22px; height: 22px; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 4px; }
.sec-list li b { display: block; font-family: var(--display); font-weight: 600; font-size: 0.98rem; }
.sec-list li span { color: var(--ink-soft); font-size: 0.95rem; }
.sec-side { display: grid; gap: 1.2rem; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.4rem; box-shadow: var(--shadow); }
.fact b { display: block; font-family: var(--display); font-size: 2.2rem; font-weight: 600; color: var(--sivlo-blue); line-height: 1; font-variant-numeric: tabular-nums; }
.fact span { display: block; margin-top: 0.4rem; color: var(--ink-soft); font-size: 0.95rem; }
.fact.legal b { font-size: 1.1rem; }
.fact.legal a { color: var(--sivlo-blue); font-weight: 600; text-decoration: none; }
.fact.legal ul { margin: 0.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; font-size: 0.95rem; }

/* ===== Precio: un solo plan + tarjeta de la prueba (spec 2026-10-01 §6) ===== */
.plan-one { margin-top: 2rem; border-radius: 24px; padding: 2px; background: linear-gradient(135deg, var(--sivlo-blue), var(--sivlo-cyan)); box-shadow: var(--shadow-lift); }
.plan-in { background: var(--surface); border-radius: 22px; padding: 1.8rem; height: 100%; display: grid; gap: 0.8rem; align-content: start; }
.plan-in .pfor { font-size: 0.88rem; font-weight: 600; color: var(--sivlo-blue); }
.plan-in h3 { font-size: 1.5rem; }
.plan-in .price { font-family: var(--display); font-size: 2.6rem; font-weight: 600; letter-spacing: -0.02em; }
.plan-in .price small { font-family: var(--body); font-size: 1rem; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 0.3rem; }
.plan-in ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.98rem; }
.plan-in li { display: flex; gap: 0.5rem; }
.plan-in li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.plan-in .cta-row { margin-top: 0.4rem; }
/* Una tarjeta ancha: a la izquierda el precio y el botón, a la derecha lo que incluye. */
.plan-one .plan-in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem; align-items: start; }
.plan-head { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.plan-head .per-use { color: var(--ink-soft); font-weight: 600; }
.plan-name { display: flex; align-items: center; gap: 0.55rem; }
.plan-name svg { width: 36px; height: 36px; flex: none; }
.plan-one ul { min-width: 0; }
.trial { margin-top: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.6rem 1.8rem; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.trial h3 { grid-column: 1 / -1; font-size: 1.15rem; }
.trial p { color: var(--ink-soft); font-size: 0.98rem; }
.plans-note { margin-top: 1rem; color: var(--muted); font-size: 0.95rem; max-width: 70ch; }

/* ===== Cierre =====
 * .final es un bloque navy fijo (--sivlo-navy no sigue el tema, como el chasis de los
 * marcos de dispositivo): el texto usa --on-navy/--frame-base-a, que tampoco siguen el
 * tema, en vez de --on-indigo (que acompaña a --indigo/--accent y SÍ cambia con el tema:
 * emparejado con --sivlo-navy perdería el contraste en modo oscuro). */
.final { margin-top: 0; background: var(--sivlo-navy); color: var(--on-navy); border-radius: 26px; padding: 3rem 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.final h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--on-navy); max-width: 22ch; }
.final p { color: var(--frame-base-a); margin-top: 0.5rem; max-width: 48ch; }
/* El cierre ya es una tarjeta: no suma su relleno superior al de las preguntas (antes quedaban 176 px vacíos). */
section.block.block-final { padding-top: 0; }

/* ===== Pie: una fila, marca + enlaces (más simple que el pie de la portada) ===== */
body.page-sivlo footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
/* Los enlaces del pie se parten en celular; antes el correo quedaba cortado (oculto por overflow-x: hidden). */
.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; min-width: 0; }
.foot-links a { overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .hero .wrap, .security, .trial, .plan-one .plan-in { grid-template-columns: 1fr; }
  .uses, .modules { grid-template-columns: 1fr 1fr; }
  /* En dos columnas el noveno ocupa la fila entera para no quedar solo a media fila. */
  .modules .mod:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .arch { grid-template-columns: 1fr; }
  .arch .link { transform: rotate(90deg); justify-self: center; }
  .phone { right: 2%; }
  /* En una columna el portátil ocupa todo el ancho y su base (margen de -4 %) sobresalía más que el margen de la
     página: a 900 px quedaba 3 px fuera, oculta solo por overflow-x: hidden. Tope de 14 px de saliente. */
  .laptop-base { margin: 0 max(-4%, -1.5rem); }
}
@media (max-width: 560px) {
  .uses, .modules { grid-template-columns: 1fr; }
  .final { padding: 2rem 1.4rem; }
  /* Tarjetas con menos relleno: a 320 px el texto quedaba en una columna de 218 px. */
  .plan-in, .trial { padding: 1.3rem; }
  .crumb { display: none; }
}

/* Medidos en el mock (spec 2026-10-01 §9): entre 961 y 1200 px el teléfono del encabezado se salía 9 px por la
   derecha; entre 961 y 1100 px, en español, la cabecera no cabía y el botón de prueba se salía 30 px. */
@media (min-width: 961px) and (max-width: 1200px) { .hero .phone { right: 0; } }
@media (min-width: 961px) and (max-width: 1100px) { .crumb { display: none; } }

/* El selector ES/EN (.seg, de site.css, con overflow: hidden) es un ítem flex que se encogía y recortaba el botón EN: en
   español a 961 px medía 67 px en vez de 88, y lo mismo pasaba entre 561 y 620 px (es y en) y entre 1101 y 1140 px (es).
   No debe encogerse en ningún ancho. */
.seg { flex: none; }
/* Entre 561 y 680 px la miga "/ Sivlo" no deja espacio al selector ES/EN (hasta 560 px ya estaba oculta, más arriba). */
@media (max-width: 680px) { .crumb { display: none; } }