/*
 * INDESY eFact: hoja única del sitio. Reproduce el sistema de las páginas
 * legales de indesy.app (src/components/legal/LegalLayout.tsx de la landing):
 * barra oscura fija, franja clara con el título, índice "Contenido" fijo a la
 * izquierda, texto a 16/28, franja de contacto y pie oscuro. Lato se sirve
 * desde el propio sitio: ninguna página llama a un tercero.
 */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fuentes/lato-300.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fuentes/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fuentes/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fuentes/lato-900.woff2") format("woff2"); }

:root {
  --ink-50: #f7f8fc;
  --ink-700: #2a2a49;
  --ink-900: #2a2a49;
  --ink-950: #2a2a49;
  --linea: #e5e7f0;
  --texto: #475569;
  --tenue: #64748b;
  --vineta: #94a3b8;
  --acento: #514dff;
  --acento-hover: #413eff;
  --barra: 72px;
  /* Tokens del sistema Indesy Human Design que usa la portada */
  --suave: #565d76;
  --linea-plano: #b6bbcd;
  --indigo-texto: #3533b3;
  --ok-texto: #00805c;
  --ok-punto: #00a878;
  --aviso-texto: #8a5a00;
  --aviso-punto: #d4a857;
  --alerta-texto: #b53a3a;
  --alerta-punto: #ef5a5a;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 24px); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink-700);
  font-family: "Lato", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

a:focus-visible, button:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

main { flex: 1; }

.saltar {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 200;
  padding: 8px 16px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink-900);
  font-weight: 700;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

.ancho { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- Barra superior (fija, blanca, como Plemsi) ----------
 * Logo en color a la izquierda, enlaces al centro (el de la página actual en
 * azul) y un solo botón relleno a la derecha. En el teléfono, los enlaces se
 * abren desde un <details>: sin scripts. */
.barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Sin soporte de animaciones atadas al scroll: el mismo gris claro de la
     portada y de la franja de las páginas legales, sin línea. */
  background: var(--ink-50);
  border-bottom: 1px solid transparent;
}
/* Con soporte: arriba la barra es transparente y se funde con lo que tiene
   detrás; al bajar 120 px pasa al índigo de Indesy (#2A2A49), con
   desenfoque, y el logo cambia a su versión para fondo oscuro. Una sola
   variable, --barra-oscura (de 0 a 1), mueve el fondo, los enlaces, el
   ícono del menú y el cruce de los dos logos. Sin soporte se queda en 0:
   la barra clara de siempre. */
@property --barra-oscura { syntax: "<number>"; inherits: true; initial-value: 0; }
@supports (animation-timeline: scroll()) {
  .barra {
    background: transparent;
    animation: barra-solida linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120px;
  }
  @keyframes barra-solida {
    from { --barra-oscura: 0; background: rgba(42, 42, 73, 0); border-bottom-color: rgba(255, 255, 255, 0); -webkit-backdrop-filter: none; backdrop-filter: none; }
    to { --barra-oscura: 1; background: rgba(42, 42, 73, 0.96); border-bottom-color: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
  }
}
.barra {
  --barra-tinta: color-mix(in srgb, #ececf6 calc(var(--barra-oscura) * 100%), var(--ink-700));
  --barra-acento: color-mix(in srgb, #aca7ff calc(var(--barra-oscura) * 100%), var(--acento));
}
.barra-dentro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: var(--barra);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { display: block; height: 20px; width: auto; }
/* En la barra, los dos logos van uno sobre otro y se cruzan al bajar. */
.barra .marca { display: inline-grid; }
.barra .marca img { grid-area: 1 / 1; }
.barra .marca-clara { opacity: calc(1 - var(--barra-oscura)); }
.barra .marca-oscura { opacity: var(--barra-oscura); }
.barra-enlaces { display: flex; justify-content: center; align-items: center; gap: 32px; }
.barra-enlaces a, .barra-movil nav a:not(.boton) {
  color: var(--ink-700);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease;
}
.barra-enlaces a { color: var(--barra-tinta); }
.barra-enlaces a:hover, .barra-enlaces a[aria-current="page"] { color: var(--barra-acento); }
.barra-movil nav a:not(.boton):hover, .barra-movil nav a[aria-current="page"] { color: var(--acento); }
.barra .barra-cta { padding: 11px 20px; font-size: 14.5px; }
.barra-movil { display: none; }
.barra-movil summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--barra-tinta);
}
.barra-movil summary::-webkit-details-marker { display: none; }
.barra-movil summary svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.barra-movil[open] summary { background: color-mix(in srgb, rgba(255, 255, 255, 0.12) calc(var(--barra-oscura) * 100%), var(--ink-50)); }
.barra-movil nav {
  position: absolute;
  top: var(--barra);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 12px 24px 20px;
  background: #fff;
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 20px 30px -20px rgba(16, 15, 50, 0.25);
}
.barra-movil nav a:not(.boton) { padding: 12px 0; border-bottom: 1px solid var(--ink-50); }
.barra-movil nav .boton { margin-top: 12px; }
@media (max-width: 999px) {
  .barra-enlaces, .barra .barra-cta { display: none; }
  .barra-movil { display: block; justify-self: end; }
  .barra-dentro { grid-template-columns: auto 1fr; }
}
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--acento);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 15, 50, 0.22), 0 4px 12px -6px rgba(81, 77, 255, 0.3);
  transition: background 0.2s ease;
}
.boton:hover { background: #5b57ff; }
.boton.grande { padding: 12px 24px; border-radius: 8px; font-size: 16px; line-height: 24px; }
.boton.claro { background: #fff; color: var(--ink-700); border: 1px solid var(--linea); box-shadow: none; }
.boton.claro:hover { background: var(--ink-50); }

/* ---------- Franja del título ---------- */
.banda { background: var(--ink-50); border-bottom: 1px solid var(--linea); }
.banda .ancho { padding-top: 112px; padding-bottom: 64px; }
.volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tenue);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: color 160ms ease;
}
.volver:hover { color: var(--acento); }
.volver svg { width: 16px; height: 16px; }
h1 {
  margin: 24px 0 0 0;
  color: var(--ink-900);
  font-size: 48px;
  line-height: 48px;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.banda .volver + h1 { margin-top: 24px; }
.banda > .ancho > h1:first-child { margin-top: 0; }
.datos {
  margin: 16px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--tenue);
  font-size: 14px;
  line-height: 20px;
}
.lead { margin: 20px 0 0 0; max-width: 40rem; color: var(--tenue); font-size: 18px; line-height: 28px; }
.lead a { color: var(--acento); font-weight: 700; text-underline-offset: 3px; }
.acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Cuerpo: índice + texto ---------- */
.cuerpo {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.indice { display: none; }
.indice nav { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.indice p {
  margin: 0 0 16px 0;
  color: var(--tenue);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.indice ul { list-style: none; margin: 0; padding: 0; }
.indice li + li { margin-top: 8px; }
.indice a {
  display: block;
  color: var(--texto);
  font-size: 14px;
  line-height: 1.375;
  text-decoration: none;
  transition: color 160ms ease;
}
.indice a:hover { color: var(--acento); }

/* El texto (equivale a "prose prose-slate" de la landing) */
.prosa { min-width: 0; color: var(--texto); font-size: 16px; line-height: 28px; }
.prosa > section + section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--linea); }
.prosa h2 { margin: 0 0 16px 0; color: var(--ink-700); font-size: 24px; line-height: 32px; font-weight: 700; }
.prosa h3 { margin: 32px 0 12px 0; color: var(--ink-700); font-size: 18px; line-height: 28px; font-weight: 700; }
.prosa p { margin: 20px 0; }
.prosa h2 + p, .prosa h3 + p, .prosa h2 + ul, .prosa h2 + ol, .prosa h3 + ul { margin-top: 0; }
.prosa section > :last-child { margin-bottom: 0; }
.prosa ul, .prosa ol { margin: 20px 0; padding-left: 26px; }
.prosa ul { list-style: disc; }
.prosa li { margin: 8px 0; padding-left: 6px; }
.prosa li::marker { color: var(--vineta); }
.prosa ol > li::marker { color: var(--tenue); }
.prosa li > ul { margin: 8px 0; }
.prosa strong { color: var(--ink-700); font-weight: 700; }
.prosa a { color: var(--acento); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prosa a:hover { color: var(--acento-hover); }
.prosa .nota { color: var(--tenue); font-size: 14px; line-height: 24px; }

.tabla { overflow-x: auto; margin: 24px 0; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.prosa th, .prosa td { text-align: left; vertical-align: top; padding: 12px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.prosa th { background: var(--ink-50); color: var(--ink-700); font-weight: 700; }
.prosa td { color: var(--texto); }
/* Tabla de varias columnas: en pantallas angostas se desplaza de lado en vez de aplastar columnas. */
.prosa table.ancha { min-width: 600px; }

/* Ficha de canales de soporte (portada) */
.canales { list-style: none; margin: 0 0 20px 0; padding: 0; }
.prosa ul.canales { padding-left: 0; list-style: none; }
.canales li { display: grid; grid-template-columns: 10rem 1fr; gap: 16px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.canales li:first-child { border-top: 1px solid var(--linea); }
.canales .canal { color: var(--ink-700); font-weight: 700; }

/* ---------- Franja de contacto ---------- */
.contacto { background: var(--ink-50); border-top: 1px solid var(--linea); }
.contacto .ancho { max-width: 720px; padding-top: 64px; padding-bottom: 64px; text-align: center; }
.contacto h2 { margin: 0; color: var(--ink-900); font-size: 24px; line-height: 32px; font-weight: 700; }
.contacto p { margin: 12px 0 0 0; color: var(--tenue); }
.contacto .boton { margin-top: 24px; }

/* ---------- Pie ---------- */
.pie { padding: 48px 0 28px; background: var(--ink-950); color: #c4c5d5; }
.pie a { transition: color 160ms ease; }
.pie a:focus-visible { outline-color: #aca7ff; }
.pie-identidad { display: flex; flex-direction: column; align-items: center; padding-bottom: 40px; text-align: center; }
.pie-identidad .marca img { height: 18px; }
.pie-producto { margin: 10px 0 0 0; color: #a3a3c6; font-size: 13px; line-height: 1.5; }
.pie-producto a { color: #ededf5; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.pie-producto a:hover { color: #fff; text-decoration-color: currentColor; }
.pie-frase {
  margin: 20px 0 0 0;
  color: #ededf5;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.pie-navegacion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px));
  justify-content: center;
}
.pie-columna { min-width: 0; padding: 24px 30px; }
.pie-columna h3 { margin: 0 0 16px 0; color: #dcdde9; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; }
.pie-columna ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pie-columna a { display: flex; min-height: 40px; align-items: center; padding: 8px 0; color: #b0b2c9; font-size: 13px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.pie-columna a:hover { color: #fff; }
/* Banner mini de Indesy ERP en "Enlaces de interés". */
.pie-columna a.pie-indesy {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: center;
  min-height: 0; margin-top: 4px; padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.04);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.pie-indesy img { width: 28px; height: 28px; border-radius: 7px; }
.pie-indesy span, .pie-indesy em { grid-column: 1 / -1; }
.pie-indesy span { margin-top: 4px; }
.pie-indesy strong { color: #fff; font-size: 13px; line-height: 1.3; }
.pie-indesy span { color: #a3a3c6; font-size: 12px; line-height: 1.4; }
.pie-indesy em { color: #aca7ff; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.4; }
.pie-columna a.pie-indesy:hover { border-color: rgba(143, 139, 255, 0.55); background: rgba(81, 77, 255, 0.14); }
.pie-base {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 26px;
  color: #a3a3c6;
  font-size: 11px;
  line-height: 1.5;
}
.pie-base p { margin: 0; }
.pie-base .lugar { text-align: center; }
.pie-base nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; }
.pie-base nav a { display: inline-flex; min-height: 36px; align-items: center; color: #a7a9c0; text-decoration: none; white-space: nowrap; }
.pie-base nav a:hover { color: #fff; }

@media (max-width: 1023px) {
  .pie-navegacion { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-columna { padding: 26px 20px; }
  .pie-base { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 3px; }
  .pie-base .lugar { grid-column: 1; grid-row: 2; text-align: left; }
  .pie-base nav { grid-column: 2; grid-row: 1 / 3; gap: 16px; }
}

/* ---------- Pantallas ---------- */
@media (min-width: 1024px) {
  .cuerpo { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; }
  .indice { display: block; }
}

@media (max-width: 767px) {
  .banda .ancho { padding-top: 96px; padding-bottom: 48px; }
  h1 { font-size: 36px; line-height: 40px; }
  .lead { font-size: 16px; line-height: 26px; }
  .marca img { height: 18px; }
  .canales li { grid-template-columns: 1fr; gap: 2px; }
  .pie { padding-top: 40px; padding-bottom: 24px; }
  .pie-identidad { padding-bottom: 30px; }
  .pie-navegacion { width: min(100%, 520px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-inline: auto; }
  .pie-columna:last-child { grid-column: 1 / -1; }
  .pie-columna { padding: 20px 12px; }
  .pie-columna h3 { margin-bottom: 12px; font-size: 9px; letter-spacing: 0.12em; }
  .pie-columna a { font-size: 12px; }
  .pie-base { grid-template-columns: 1fr; gap: 6px; padding-top: 22px; text-align: center; }
  .pie-base .lugar { grid-column: auto; grid-row: auto; text-align: center; }
  .pie-base nav { grid-column: auto; grid-row: auto; justify-content: center; gap: 0 20px; }

  /* En el teléfono, cada fila de una tabla apilable se lee como una ficha. */
  table.apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.apilable, table.apilable tbody, table.apilable tr, table.apilable td { display: block; width: 100%; }
  table.apilable tr { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  table.apilable tr:first-child { border-top: 1px solid var(--linea); }
  .prosa table.apilable td { padding: 2px 0; border: 0; }
  table.apilable td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    margin-top: 8px;
    color: var(--ink-700);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Portada: antetítulo en lugar del enlace "Volver" */
.antetitulo {
  margin: 0;
  color: #3533b3;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.banda .antetitulo + h1 { margin-top: 20px; }
.sc { white-space: nowrap; }

/* ---------- /contacto (sigue /contacto/soporte de indesy.app) ---------- */
.contacto-pagina { padding: 164px 32px 144px; }
.contacto-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(56px, 7vw, 112px);
  max-width: 1064px;
  margin: 0 auto;
}
.contacto-contexto, .contacto-acceso { min-width: 0; }
.contacto-antetitulo { margin: 0 0 24px 0; color: var(--tenue); font-size: 13px; line-height: 1.5; }
.contacto-contexto h1 {
  max-width: 9.5em;
  margin: 0;
  color: var(--ink-700);
  font-size: clamp(42px, 4.2vw, 56px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.07;
  text-wrap: balance;
}
.contacto-intro { max-width: 37ch; margin: 26px 0 0 0; color: var(--tenue); font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.contacto-horario { margin: 44px 0 0 0; }
.contacto-horario div + div { margin-top: 16px; }
.contacto-horario dt { color: var(--ink-700); font-size: 14px; line-height: 1.6; font-weight: 700; }
.contacto-horario dd { margin: 2px 0 0 0; max-width: 42ch; color: var(--tenue); font-size: 14px; line-height: 1.6; }
.contacto-enlace {
  display: inline-block;
  margin-top: 20px;
  color: var(--acento);
  font-size: 14px;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #8b89ff66;
}
.contacto-enlace:hover { color: #3631d4; text-decoration-color: currentColor; }
.contacto-acceso h2 { margin: 0 0 26px 0; color: var(--ink-700); font-size: 22px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.3; }
.contacto-panel { padding: 32px; border: 1px solid #e8eaf0; border-radius: 12px; background: var(--ink-50); text-align: center; }
.contacto-panel p { max-width: 36ch; margin: 0 auto 26px; color: var(--tenue); font-size: 15px; line-height: 1.7; text-wrap: pretty; }
.contacto-panel .contacto-numero { margin: 14px auto 0; color: var(--ink-700); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.contacto-ayuda { margin: 18px 0 0 0; color: var(--tenue); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.contacto-ayuda a { color: var(--ink-700); text-decoration: underline; text-decoration-color: #c5c8d3; text-underline-offset: 3px; }
.contacto-ayuda a:hover { color: var(--acento); }

@media (max-width: 760px) {
  .contacto-pagina { padding: 116px 24px 80px; }
  .contacto-rejilla { grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: 520px; }
  .contacto-antetitulo { margin-bottom: 18px; }
  .contacto-contexto h1 { max-width: 11em; font-size: clamp(36px, 8vw, 44px); }
  .contacto-intro { margin-top: 20px; font-size: 15px; }
  .contacto-horario { margin-top: 28px; }
  .contacto-acceso h2 { margin-bottom: 22px; font-size: 21px; }
  .contacto-panel { padding: 24px; }
}

/* ---------- /solicitud y /solicitud-recibida ----------
 * Una sola columna en computadora y en teléfono: título, formulario y "Qué pasa después".
 * El formulario va por tarjetas, un paso a la vez (public/js/solicitud.js); sin ese archivo,
 * las tarjetas se ven una debajo de otra y el formulario funciona igual.
 */
.solicitud { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeza" "form" "despues"; gap: 32px; max-width: 744px; margin: 0 auto; padding: 152px 32px 144px; }
.solicitud-contexto { display: contents; }
.solicitud-cabeza { grid-area: cabeza; min-width: 0; text-align: center; }
.solicitud-cabeza .contacto-intro { max-width: 52ch; margin-left: auto; margin-right: auto; }
.solicitud .formulario { grid-area: form; min-width: 0; }
.solicitud-despues { grid-area: despues; min-width: 0; padding-top: 28px; border-top: 1px solid var(--linea); }
.solicitud.recibida { grid-template-areas: "cabeza" "despues"; }
.solicitud-cabeza h1 { margin: 0; color: var(--ink-700); font-size: clamp(40px, 4vw, 48px); font-weight: 400; letter-spacing: -0.045em; line-height: 1.07; text-wrap: balance; }
.solicitud-despues h2 { margin: 0; color: var(--ink-700); font-size: 17px; font-weight: 700; line-height: 1.4; }
.recibida .solicitud-despues h2 { font-size: 22px; font-weight: 400; letter-spacing: -0.025em; }
.solicitud-despues > .boton { margin-top: 28px; }
.solicitud-pasos { list-style: none; counter-reset: paso; margin: 20px 0 0 0; padding: 0; display: grid; gap: 18px; }
.solicitud-pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; }
.solicitud-pasos li::before {
  content: counter(paso);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #eeedff;
  color: var(--acento);
  font-size: 14px;
  font-weight: 700;
}
.solicitud-pasos strong { color: var(--ink-700); font-size: 15px; line-height: 1.5; }
.solicitud-pasos span { color: var(--tenue); font-size: 14px; line-height: 1.6; text-wrap: pretty; }

/* Formulario por tarjetas */
.formulario { display: grid; gap: 20px; align-content: start; }
.pasos-indicador { display: none; }
.por-pasos .pasos-indicador { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: indicador; }
.pasos-indicador li { counter-increment: indicador; padding-top: 10px; border-top: 3px solid #dfe2ee; color: var(--tenue); font-size: 12px; font-weight: 700; line-height: 1.4; }
.pasos-indicador li::before { content: counter(indicador) ". "; }
.pasos-indicador li.hecho { border-top-color: #8b89ff; color: var(--ink-700); }
.pasos-indicador li[aria-current] { border-top-color: var(--acento); color: var(--acento); }
.pasos-aviso { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tarjeta {
  min-width: 0;
  margin: 0;
  padding: 32px;
  border: 1px solid #e8eaf0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 48px -32px rgba(42, 42, 73, 0.28);
  scroll-margin-top: calc(var(--barra) + 24px);
}
.tarjeta[hidden] { display: none; }
.tarjeta:focus { outline: none; }
.tarjeta legend { float: left; width: 100%; margin: 0 0 22px 0; padding: 0; color: var(--ink-700); font-size: 22px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.3; }
.tarjeta-paso { display: block; margin-bottom: 4px; color: var(--acento); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.tarjeta legend + .campos { clear: both; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo.completo { grid-column: 1 / -1; }
.campo label { color: var(--ink-700); font-size: 13px; font-weight: 700; line-height: 1.4; }
.oblig { color: var(--acento); }
.campo input, .campo select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #dfe2ee;
  border-radius: 8px;
  background: var(--ink-50);
  color: var(--ink-700);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}
.campo input:focus-visible, .campo select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); background: #fff; }
.campo input:user-invalid, .campo select:user-invalid { border-color: var(--alerta-texto); }
.ayuda { color: var(--tenue); font-size: 12px; line-height: 1.5; }
.acepto { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; color: var(--texto); font-size: 14px; line-height: 1.6; cursor: pointer; }
.acepto input { flex: none; width: 18px; height: 18px; margin: 3px 0 0 0; accent-color: var(--acento); }
.acepto a { color: var(--ink-700); text-decoration: underline; text-decoration-color: #c5c8d3; text-underline-offset: 3px; }
.acepto a:hover { color: var(--acento); }
.tarjeta-acciones { display: flex; gap: 12px; align-items: center; margin-top: 28px; }
.tarjeta-acciones .boton { border: 0; cursor: pointer; font-family: inherit; }
.tarjeta-acciones .boton.claro { border: 1px solid var(--linea); }
.tarjeta-acciones .boton:not(.claro) { margin-left: auto; }
.tarjeta-acciones .boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.formulario:not(.por-pasos) [data-paso-siguiente], .formulario:not(.por-pasos) [data-paso-atras] { display: none; }
.formulario-nota { margin: 0; color: var(--tenue); font-size: 12px; line-height: 1.5; }
/* Al enviar la solicitud (public/js/solicitud.js): el botón gira y el aviso dice qué pasa. */
.envio-aviso { margin: 14px 0 0 0; color: var(--ink-700); font-size: 14px; font-weight: 700; line-height: 1.5; }
.envio-aviso:empty { display: none; }
.formulario.enviando button[type="submit"]::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-right: 10px; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%;
}
.formulario.enviando button[type="submit"] { cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
  .formulario.enviando button[type="submit"]::before { animation: giro-envio 0.8s linear infinite; }
  @keyframes giro-envio { to { transform: rotate(360deg); } }
}
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 760px) {
  .solicitud { padding: 104px 20px 72px; gap: 28px; }
  .solicitud-cabeza h1 { font-size: clamp(32px, 8.5vw, 40px); }
  .solicitud-cabeza .contacto-antetitulo { margin-bottom: 14px; }
  .solicitud-cabeza .contacto-intro { margin-top: 16px; font-size: 15px; }
  .tarjeta { padding: 22px 18px; border-radius: 14px; }
  .tarjeta legend { margin-bottom: 18px; font-size: 20px; }
  .campos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .campo input, .campo select { min-height: 48px; font-size: 16px; }
  .tarjeta-acciones { flex-direction: column-reverse; align-items: stretch; }
  .tarjeta-acciones .boton { min-height: 52px; justify-content: center; text-align: center; margin-left: 0; }
  .tarjeta-acciones .boton:not(.claro) { margin-left: 0; }
}

/* ---------- Portada (/) ----------
 * Al estilo de plemsi.com, con la paleta de Indesy: portada centrada sobre
 * gris muy claro, el portal de administración en movimiento (entra una factura
 * nueva y pasa de "En proceso" a "Aceptado"), beneficios y pasos que aparecen
 * al hacer scroll, y una banda azul con el soporte crítico y las preguntas.
 * Sin cuadrículas en los fondos azules. Solo CSS: las entradas al hacer scroll
 * usan animation-timeline: view() y, donde no existe, todo se ve estático.
 * Clases pl-…; sus tokens viven en .inicio. Los datos de muestra dicen "Ejemplo". */
@property --pl-n { syntax: "<integer>"; inherits: false; initial-value: 248; }
.inicio {
  --i-50: #f7f8fc;
  --i-100: #eef0f7;
  --i-200: #dfe2ee;
  --i-300: #b6bbcd;
  --i-400: #80869c;
  --i-500: #565d76;
  --i-700: #2a2a49;
  --i-800: #1e1e3a;
  --i-900: #2a2a49;
  --navy: #1e1e3a;
  --superficie: #2a2a4a;
  --acento: #514dff;
  --acento-1: #5b54ff;
  --acento-2: #423bd6;
  --acento-claro: #8b89ff;
  --acento-suave: #eeedff;
  --acento-hondo: #3631d4;
  --lavanda: #8f8bff;
  --exito: #00a878;
  --ok-texto: #00805c;
  --menta: #c6f4d9;
  --menta-texto: #0d5132;
  --oro: #d4a857;
  --aviso-texto: #8a5a00;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--i-900);
  line-height: 1.6;
}
.inicio a:not(.pl-boton):not(.pl-whatsapp) { color: var(--acento-hondo); text-underline-offset: 3px; }
.pl-oculto { position: absolute; width: 0; height: 0; overflow: hidden; }
.pl-ancho { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.pl-centro { text-align: center; margin-left: auto; margin-right: auto; }
.pl-icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Botones */
.pl-boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 13px 28px; border-radius: 10px;
  background: var(--acento); color: #fff; font-weight: 700; font-size: 15px; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 15, 50, 0.22), 0 8px 18px -8px rgba(81, 77, 255, 0.5);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pl-boton:hover { background: var(--acento-1); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 15, 50, 0.2), 0 14px 26px -10px rgba(81, 77, 255, 0.55); }
.pl-boton.secundario { background: #fff; color: var(--i-900); border: 1px solid var(--i-200); box-shadow: none; }
.pl-boton.secundario:hover { border-color: var(--acento-claro); color: var(--acento-hondo); }
.pl-boton.blanco { background: #fff; color: var(--acento-hondo); box-shadow: 0 10px 24px -10px rgba(42, 42, 73, 0.45); }
.pl-boton.blanco:hover { background: var(--acento-suave); }
.pl-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.pl-centro .pl-acciones, .pl-acciones.pl-centro { justify-content: center; }

/* Títulos: la firma de pesos 900 + 300 */
.pl-cabeza { max-width: 46rem; margin-bottom: 56px; }
.pl-cabeza h2, .pl-final h2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.pl-cabeza h2 strong, .pl-final h2 strong { font-weight: 900; }
.pl-cabeza h2 > span { font-weight: 300; color: var(--i-700); }
.pl-cabeza p { margin: 16px auto 0; color: var(--i-500); font-size: 18px; line-height: 1.6; max-width: 40rem; }
.pl-cabeza:not(.pl-centro) p { margin-left: 0; }
.pl-cabeza .pl-boton { margin-top: 28px; }
.pl-cabeza .pl-acciones { margin-top: 28px; }
.pl-cabeza .pl-acciones .pl-boton { margin-top: 0; }

/* ---------- Portada ---------- */
.pl-portada { background: var(--i-50); padding-top: calc(var(--barra) + 72px); overflow: hidden; }
.pl-portada h1 { margin: 0 auto; max-width: 14em; font-size: clamp(40px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.pl-portada h1 strong { display: block; font-weight: 900; color: var(--i-900); }
.pl-portada h1 span { display: block; font-weight: 300; color: var(--i-700); }
.pl-entrada { margin: 24px auto 0; max-width: 36rem; color: var(--i-500); font-size: 19px; line-height: 1.6; }
.pl-portada .pl-acciones { margin-top: 32px; justify-content: center; }

.pl-escena { position: relative; margin-top: 64px; padding-bottom: 0; }
.pl-ventana {
  position: relative; max-width: 1040px; margin: 0 auto;
  background: #fff; border-radius: 18px 18px 0 0; overflow: hidden;
  border: 1px solid var(--i-200); border-bottom: 0;
  box-shadow: 0 40px 80px -30px rgba(16, 15, 50, 0.35);
  font-size: 13px;
}
.pl-ventana-barra { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--i-100); background: #fff; }
.pl-puntos { display: inline-flex; gap: 6px; }
.pl-puntos i { width: 10px; height: 10px; border-radius: 9999px; background: var(--i-200); }
.pl-ventana-titulo { font-weight: 700; color: var(--i-700); }
.pl-ejemplo { margin-left: auto; padding: 2px 9px; border-radius: 9999px; background: var(--i-50); color: var(--i-500); font-size: 11px; }
.pl-ventana-cuerpo { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 360px; }
.pl-lateral { display: grid; align-content: start; gap: 4px; padding: 18px 12px; background: var(--i-50); border-right: 1px solid var(--i-100); }
.pl-lateral span { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--i-500); font-weight: 700; }
.pl-lateral .pl-icono { width: 16px; height: 16px; }
.pl-lateral .activo { background: var(--acento-suave); color: var(--acento-hondo); }
.pl-panel { padding: 20px 22px 0; min-width: 0; }
.pl-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pl-cifras div { border: 1px solid var(--i-100); border-radius: 12px; padding: 12px 14px; }
.pl-cifras span { display: block; color: var(--i-500); font-size: 12px; }
.pl-cifras b { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pl-cuenta em { font-style: normal; counter-reset: pl-n var(--pl-n); animation: pl-contar 9s steps(1, end) infinite; }
.pl-cuenta em::after { content: counter(pl-n); }
.pl-tabla { margin-top: 16px; border: 1px solid var(--i-100); border-radius: 12px; overflow: hidden; }
.pl-fila { display: grid; grid-template-columns: 1.15fr 1.35fr 0.9fr 0.9fr; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--i-100); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-fila > span { overflow: hidden; text-overflow: ellipsis; }
.pl-fila.cabeza { border-top: 0; background: var(--i-50); color: var(--i-500); font-size: 12px; }
.pl-fila .num { text-align: right; }
.pl-estado, .pl-estado-vivo em { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-style: normal; }
.pl-estado::before, .pl-estado-vivo em::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; background: currentColor; }
.pl-estado.ok, .pl-estado-vivo .despues { color: var(--ok-texto); }
.pl-estado-vivo { display: grid; }
.pl-estado-vivo em { grid-area: 1 / 1; }
.pl-estado-vivo .antes { color: var(--aviso-texto); }
.pl-estado-vivo .antes::before { background: var(--oro); }
.pl-estado-vivo .despues { opacity: 1; }
.pl-estado-vivo .antes { opacity: 0; }


/* ---------- Secciones ---------- */
.pl-seccion { padding-block: 112px; background: #fff; }
.pl-seccion.gris { background: var(--i-50); }
/* Dos secciones blancas seguidas (la portada sin la banda del e-CF de prueba): la segunda no repite el aire de arriba. */
.pl-seccion:not(.gris) + .pl-seccion:not(.gris) { padding-top: 0; }
.pl-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 80px; align-items: start; }
.pl-burbuja { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--acento-suave); color: var(--acento); }
.pl-burbuja .pl-icono { width: 24px; height: 24px; }

.pl-beneficios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 48px; }
.pl-beneficios li { display: grid; gap: 10px; align-content: start; }
.pl-beneficios strong { font-size: 19px; margin-top: 8px; }
.pl-beneficios p { margin: 0; color: var(--i-500); }

/* Así funciona */
.pl-funciona { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 72px; align-items: center; }
.pl-codigo { border-radius: 18px; overflow: hidden; background: var(--i-900); color: var(--i-200); box-shadow: 0 30px 60px -30px rgba(16, 15, 50, 0.5); }
.pl-codigo-barra { display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: var(--i-800); color: var(--i-300); font-family: var(--mono); font-size: 12.5px; }
.pl-codigo-barra .pl-puntos i { background: var(--superficie); }
.pl-codigo pre { margin: 0; padding: 20px 22px 24px; font-family: var(--mono); font-size: 13px; line-height: 1.7; white-space: pre; overflow-x: auto; }
.pl-codigo .s { color: var(--menta); }
.pl-codigo .v { color: var(--oro); }
.pl-codigo .c { color: var(--i-400); }
.pl-respuesta { color: var(--acento-claro); font-weight: 700; }
.pl-cursor { display: inline-block; width: 8px; height: 16px; margin-left: 6px; vertical-align: -3px; background: var(--acento-claro); animation: pl-parpadeo 1.1s steps(1, end) infinite; }
.pl-pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 32px; }
.pl-pasos li { position: relative; padding-left: 64px; counter-increment: paso; }
.pl-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: 9999px; display: grid; place-items: center; background: var(--acento); color: #fff; font-weight: 900; font-size: 17px; box-shadow: 0 8px 18px -8px rgba(81, 77, 255, 0.6); }
.pl-pasos strong { display: block; font-size: 19px; }
.pl-pasos p { margin: 6px 0 0; color: var(--i-500); }

/* Capacidades */
.pl-capacidades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pl-capacidades li { display: grid; gap: 10px; align-content: start; padding: 28px; border: 1px solid var(--i-100); border-radius: 20px; background: #fff; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.pl-capacidades li:hover { transform: translateY(-4px); border-color: var(--acento-claro); box-shadow: 0 20px 40px -24px rgba(81, 77, 255, 0.45); }
.pl-capacidades strong { font-size: 18px; margin-top: 6px; }
.pl-capacidades p { margin: 0; color: var(--i-500); font-size: 15px; }

/* Certificación */
.pl-etapas { list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.pl-etapas li { position: relative; padding: 0 0 28px 60px; counter-increment: etapa; }
.pl-etapas li::before { content: counter(etapa); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 9999px; background: #fff; border: 2px solid var(--acento); color: var(--acento); display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.pl-etapas li::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: 4px; border-left: 2px solid var(--i-200); }
.pl-etapas li:last-child::after { display: none; }
.pl-etapas strong { display: block; font-size: 18px; padding-top: 7px; }
.pl-etapas span { color: var(--i-500); }
.pl-pequeno { margin: 4px 0 0 60px; color: var(--i-500); font-size: 14px; }

/* Banda azul: soporte crítico y preguntas (sin cuadrícula) */
.pl-banda { padding-block: 112px; background: linear-gradient(160deg, var(--acento-1), var(--acento-2)); color: #fff; }
.pl-banda .pl-cabeza h2 strong { color: #fff; }
.pl-banda .pl-cabeza p { color: var(--acento-suave); }
.pl-garantias { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pl-garantias li { display: grid; gap: 10px; align-content: start; justify-items: center; text-align: center; padding: 32px 28px; border-radius: 20px; background: rgba(255, 255, 255, 0.1); transition: background 0.25s ease, transform 0.25s ease; }
.pl-garantias li:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-4px); }
.pl-burbuja-clara { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--acento); box-shadow: 0 12px 24px -12px rgba(42, 42, 73, 0.5); }
.pl-burbuja-clara .pl-icono { width: 26px; height: 26px; }
.pl-garantias strong { margin-top: 8px; font-size: 19px; color: #fff; }
.pl-garantias p { margin: 0; color: var(--acento-suave); max-width: 22rem; }
.pl-preguntas { margin-top: 96px; padding-top: 72px; border-top: 1px solid rgba(255, 255, 255, 0.2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 56px; }
.pl-preguntas-titulo { margin: 0 0 8px; font-size: clamp(28px, 3vw, 36px); font-weight: 900; letter-spacing: -0.02em; text-align: center; }
.pl-pregunta { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: start; }
.pl-q { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; background: var(--menta); color: var(--menta-texto); }
.pl-q .pl-icono { width: 17px; height: 17px; }
.pl-pregunta h3 { margin: 2px 0 6px; font-size: 18px; line-height: 1.35; }
.pl-pregunta p { margin: 0; color: var(--acento-suave); font-size: 15px; }

/* Llamado final */
.pl-final { padding-block: 96px; }
.pl-final-dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.pl-final p { margin: 12px 0 0; color: var(--i-500); font-size: 18px; max-width: 34rem; }

/* WhatsApp flotante */
.pl-whatsapp {
  position: fixed; z-index: 90; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 9999px; display: grid; place-items: center;
  background: var(--acento); color: #fff; box-shadow: 0 12px 28px -8px rgba(81, 77, 255, 0.6);
  transition: transform 0.2s ease, background 0.2s ease;
}
.pl-whatsapp:hover { background: var(--acento-1); transform: scale(1.06); }
.pl-whatsapp .pl-icono { width: 28px; height: 28px; fill: currentColor; stroke: none; }

/* ---------- Movimiento ---------- */
@keyframes pl-sube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pl-parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pl-contar { 0% { --pl-n: 247; } 6%, 100% { --pl-n: 248; } }
@keyframes pl-fila-nueva { 0% { opacity: 0; transform: translateY(-10px); background: var(--acento-suave); } 6% { opacity: 1; transform: none; background: var(--acento-suave); } 45% { background: var(--acento-suave); } 60%, 100% { opacity: 1; background: #fff; } }
@keyframes pl-antes { 0%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes pl-despues { 0%, 38% { opacity: 0; } 42%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .pl-portada h1 { animation: pl-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .pl-entrada { animation: pl-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
  .pl-portada .pl-acciones { animation: pl-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
  .pl-ventana { animation: pl-sube 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
      .pl-fila.nueva { animation: pl-fila-nueva 9s ease infinite; }
  .pl-estado-vivo .antes { animation: pl-antes 9s ease infinite; }
  .pl-estado-vivo .despues { animation: pl-despues 9s ease infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-cuenta em, .pl-cursor { animation: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pl-aparece { animation: pl-sube linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    .pl-aparece.d1 { animation-range: entry 8% cover 28%; }
    .pl-aparece.d2 { animation-range: entry 16% cover 34%; }
    .pl-aparece.d3 { animation-range: entry 22% cover 38%; }
    .pl-aparece.d4 { animation-range: entry 28% cover 42%; }
  }
}

/* Portal en movimiento: el cursor abre un comprobante y descarga su PDF (sin GIF, solo CSS) */
.pl-detalle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 72px; align-items: center; }
.pl-ventana-sola { border-radius: 18px; border-bottom: 1px solid var(--i-200); }
.pl-detalle-cuerpo { position: relative; height: 340px; overflow: hidden; }
.pl-detalle-cuerpo .pl-panel { padding: 20px 22px; }
.pl-buscar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border: 1px solid var(--i-200); border-radius: 9px; color: var(--i-400); }
.pl-buscar .pl-icono { width: 16px; height: 16px; }
.pl-tabla.tres { margin-top: 14px; }
.pl-tabla.tres .pl-fila { grid-template-columns: 1.3fr 1fr 0.9fr; }
.pl-ficha {
  position: absolute; top: 14px; right: 14px; bottom: 14px; width: 48%;
  display: grid; align-content: start; gap: 10px; padding: 16px;
  background: #fff; border: 1px solid var(--i-200); border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(16, 15, 50, 0.35);
}
.pl-ficha b { font-size: 15px; font-weight: 900; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.pl-ficha dl { display: grid; gap: 6px; margin: 0; }
.pl-ficha dl div { display: flex; justify-content: space-between; gap: 12px; }
.pl-ficha dt { color: var(--i-500); }
.pl-ficha dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pl-ficha-botones { display: flex; gap: 8px; margin-top: 4px; }
.pl-descarga { padding: 8px 12px; border-radius: 9px; background: var(--acento); color: #fff; font-style: normal; font-weight: 700; }
.pl-descarga.claro { background: var(--acento-suave); color: var(--acento-hondo); }
.pl-aviso-descarga {
  position: absolute; left: 22px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 9px; background: var(--i-800); color: #fff; font-weight: 700; opacity: 0;
}
.pl-aviso-descarga .pl-icono { width: 16px; height: 16px; color: var(--menta); }
.pl-mano { --x1: 22%; --y1: 39%; --x2: 60%; --y2: 67%; position: absolute; left: var(--x2); top: var(--y2); width: 22px; height: 22px; opacity: 0; }
.pl-mano svg { width: 22px; height: 22px; fill: var(--i-800); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.pl-lista-iconos { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.pl-lista-iconos li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
.pl-lista-iconos strong { display: block; margin-top: 4px; font-size: 18px; }
.pl-lista-iconos p { margin: 4px 0 0; color: var(--i-500); }
.pl-detalle-texto .pl-cabeza { margin-bottom: 36px; }
@media (prefers-reduced-motion: no-preference) {
  .pl-mano { animation: pl-mano 9s ease-in-out infinite; }
  .pl-fila-elegida { animation: pl-elegida 9s ease infinite; }
  .pl-ficha { animation: pl-ficha 9s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
  .pl-aviso-descarga { animation: pl-aviso 9s ease infinite; }
  @keyframes pl-mano {
    0% { left: 70%; top: 92%; opacity: 0; transform: scale(1); }
    8% { opacity: 1; }
    26% { left: var(--x1); top: var(--y1); transform: scale(1); }
    30% { left: var(--x1); top: var(--y1); transform: scale(0.8); }
    34% { left: var(--x1); top: var(--y1); transform: scale(1); }
    52% { left: var(--x2); top: var(--y2); transform: scale(1); }
    56% { left: var(--x2); top: var(--y2); transform: scale(0.8); }
    60% { left: var(--x2); top: var(--y2); transform: scale(1); opacity: 1; }
    90% { left: var(--x2); top: var(--y2); opacity: 1; }
    100% { left: 70%; top: 92%; opacity: 0; }
  }
  @keyframes pl-elegida { 0%, 30% { background: transparent; } 33%, 92% { background: var(--acento-suave); } 100% { background: transparent; } }
  @keyframes pl-ficha { 0%, 33% { opacity: 0; transform: translateX(24px); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(24px); } }
  @keyframes pl-aviso { 0%, 58% { opacity: 0; transform: translateY(8px); } 62%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .pl-fila-elegida { background: var(--acento-suave); }
}
/* Teléfonos estrechos (hasta 380 px): la tabla del hero se compacta para que el e-NCF y el estado quepan enteros. */
@media (max-width: 380px) {
  .pl-portada .pl-panel { padding: 14px 10px 0; }
  .pl-portada .pl-fila { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; gap: 6px; padding: 10px 8px; font-size: 11px; }
}

/* Planes: capacidad, sin precios (Rafael, 12-11-2026). Cada plan lleva a un asesor, que envía la cotización. */
.pl-planes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pl-planes li {
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 28px;
  border: 1px solid var(--i-100); border-radius: 20px; background: #fff;
}
.pl-planes h3 { margin: 0; color: var(--i-800); font-size: 18px; font-weight: 700; line-height: 1.3; }
.pl-plan-cupo { margin: 0; color: var(--i-500); font-size: 15px; line-height: 1.45; }
.pl-plan-cupo b { display: block; margin: 2px 0; color: var(--i-800); font-size: 40px; font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pl-planes .pl-boton { justify-self: stretch; margin-top: 8px; }
.pl-planes li.pl-plan-medida { border-color: var(--i-700); background: var(--i-700); }
.pl-plan-medida h3, .pl-plan-medida .pl-plan-cupo b { color: #fff; }
.pl-plan-medida .pl-plan-cupo { color: #c4c5d5; }
.pl-plan-medida .pl-plan-cupo b { font-size: 32px; }
.pl-incluye { margin-top: 40px; padding: clamp(24px, 4vw, 40px); border-radius: 20px; background: var(--i-50); }
.pl-incluye h3 { margin: 0; color: var(--i-800); font-size: 18px; font-weight: 700; }
.pl-incluye ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 32px; }
.pl-incluye li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--i-700); font-size: 15px; line-height: 1.45; }
.pl-incluye .pl-icono { margin-top: 1px; color: var(--ok-texto); }
.pl-incluye p { margin: 24px 0 0; color: var(--i-500); font-size: 14px; line-height: 1.6; }

/* Banda "Vea un e-CF real antes de decidir" */
.pl-prueba {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; align-items: center;
  padding: clamp(28px, 5vw, 56px); border: 1px solid var(--i-200); border-radius: 24px; background: #fff;
  box-shadow: 0 40px 80px -48px rgba(16, 15, 50, 0.35);
}
.pl-prueba h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.pl-prueba h2 strong { font-weight: 900; }
.pl-prueba h2 > span { font-weight: 300; color: var(--i-700); }
.pl-prueba-texto p { margin: 16px 0 0; color: var(--i-500); font-size: 17px; line-height: 1.6; max-width: 36rem; }
.pl-prueba-texto .pl-boton { margin-top: 28px; }
.pl-prueba-texto .pl-prueba-nota { margin-top: 12px; color: var(--i-400); font-size: 13px; }
.pl-prueba-escena { position: relative; min-height: 260px; }
.pl-flota {
  position: absolute; display: grid; gap: 4px; padding: 14px 16px; font-size: 13px;
  background: #fff; border: 1px solid var(--i-200); border-radius: 16px; box-shadow: 0 24px 48px -24px rgba(16, 15, 50, 0.35);
}
.pl-flota-de { color: var(--i-400); font-size: 12px; }
.pl-flota-correo { left: 0; top: 10px; width: min(330px, 92%); }
.pl-flota-correo strong { margin-bottom: 6px; font-size: 14px; }
.pl-adjuntos { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-adjuntos i { padding: 4px 10px; border-radius: 8px; background: var(--acento-suave); color: var(--acento-hondo); font-style: normal; font-size: 12px; font-weight: 700; }
.pl-flota-estado { right: 0; top: 130px; width: min(250px, 80%); }
.pl-flota-estado b { font-size: 15px; font-weight: 900; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.pl-prueba-ejemplo { position: absolute; left: 0; bottom: 0; }
/* Con el envío automático (fragmentos/ecf-prueba.html): correo, autorización y botón, uno debajo del otro. */
.pl-prueba-form { margin-top: 28px; max-width: 30rem; }
.pl-prueba-etiqueta { display: block; margin-bottom: 8px; color: var(--i-800); font-size: 14px; font-weight: 700; }
.pl-prueba-correo {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--i-300); border-radius: 10px; background: #fff; color: var(--i-800); font: inherit; font-size: 16px;
}
.pl-prueba-correo::placeholder { color: var(--i-400); }
.pl-prueba-correo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.pl-prueba-correo:user-invalid { border-color: var(--alerta-texto); }
.pl-prueba-form .acepto { margin-top: 14px; color: var(--i-500); }
.pl-prueba-form .cf-turnstile { margin-top: 12px; }
.pl-prueba-texto .pl-prueba-form .pl-boton { margin-top: 20px; border: 0; font-family: inherit; cursor: pointer; }
.pl-prueba-form .pl-boton:disabled { cursor: progress; opacity: 0.75; transform: none; }
.pl-prueba-texto .pl-prueba-espera { margin-top: 12px; color: var(--i-700); font-size: 14px; font-weight: 700; }
.pl-prueba-espera:empty { display: none; }
/* Mientras se emite (public/js/ecf-prueba.js): el botón gira y una barra recorre el ancho del formulario. */
.pl-prueba-form.emitiendo .pl-boton::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-right: 10px; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%;
}
.pl-prueba-form.emitiendo .pl-boton:disabled { opacity: 1; }
.pl-prueba-form.emitiendo .pl-prueba-espera::before {
  content: ""; display: block; height: 4px; margin-bottom: 12px; border-radius: 2px;
  background: linear-gradient(90deg, var(--acento-suave) 0%, var(--acento) 50%, var(--acento-suave) 100%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .pl-prueba-form.emitiendo .pl-boton::before { animation: pl-giro 0.8s linear infinite; }
  .pl-prueba-form.emitiendo .pl-prueba-espera::before { animation: pl-barra 1.4s linear infinite; }
  @keyframes pl-giro { to { transform: rotate(360deg); } }
  @keyframes pl-barra { from { background-position: 100% 0; } to { background-position: -100% 0; } }
}
.pl-prueba-nota a { color: var(--i-700); text-decoration: underline; text-decoration-color: var(--i-300); text-underline-offset: 3px; }
.pl-prueba-nota a:hover { color: var(--acento); }
@media (prefers-reduced-motion: no-preference) {
  .pl-flota-correo { animation: pl-llega 7s ease-in-out infinite; }
  .pl-flota-estado { animation: pl-llega 7s ease-in-out 0.7s infinite; }
  @keyframes pl-llega { 0%, 6% { opacity: 0; transform: translateY(14px); } 14%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
}

/* ---------- Pantallas ---------- */
@media (min-width: 1000px) {
  .pl-beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-funciona { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pl-capacidades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-dos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pl-garantias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-preguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-preguntas-titulo { grid-column: 1 / -1; }
  .pl-final-dentro { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-detalle { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pl-prueba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pl-planes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pl-incluye ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .pl-beneficios, .pl-capacidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-planes, .pl-incluye ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  }
@media (max-width: 767px) {
  .pl-portada { padding-top: calc(var(--barra) + 48px); }
  /* Hero en el teléfono: texto sin palabras sueltas al final, botones del mismo ancho y cifras alineadas. */
  .pl-portada .pl-entrada { max-width: 34ch; text-wrap: pretty; }
  .pl-portada .pl-acciones { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-left: auto; margin-right: auto; }
  .pl-entrada, .pl-cabeza p, .pl-final p { font-size: 16px; }
  .pl-escena { margin-top: 48px; padding-left: 0; padding-right: 0; }
  .pl-ventana { border-radius: 14px 14px 0 0; margin: 0 16px; }
  .pl-ventana-cuerpo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pl-lateral { display: none; }
  .pl-panel { padding: 16px 14px 0; }
  .pl-cifras { gap: 8px; }
  .pl-cifras div { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 10px; }
  .pl-cifras span { line-height: 1.3; }
  .pl-portada .pl-puntos { display: none; }
  .pl-ventana-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pl-cifras b { font-size: 19px; }
  .pl-fila { grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 10px 12px; font-size: 12px; }
  .pl-fila > span:nth-child(2) { display: none; }
  .pl-seccion, .pl-banda { padding-block: 72px; }
  .pl-cabeza { margin-bottom: 40px; }
  .pl-preguntas { margin-top: 64px; padding-top: 48px; }
  .pl-final { padding-block: 64px; }
  .pl-detalle-texto { order: -1; }
  .pl-ventana-sola { margin: 0; }
  .pl-ventana-sola .pl-puntos { display: none; }
  .pl-detalle-cuerpo { height: 300px; }
  .pl-detalle-cuerpo .pl-panel { padding: 14px; }
  .pl-tabla.tres .pl-fila > span:nth-child(2) { display: block; }
  .pl-ficha { top: 10px; right: 10px; bottom: auto; width: 68%; gap: 8px; padding: 12px; font-size: 12px; }
  .pl-ficha dl div:nth-child(2), .pl-ficha dl div:nth-child(3) { display: none; }
  .pl-descarga { padding: 7px 10px; white-space: nowrap; }
  .pl-aviso-descarga { left: 14px; bottom: 14px; }
  .pl-mano { --x1: 26%; --y1: 41%; --x2: 47%; --y2: 52%; }
  .pl-lista-iconos li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .pl-lista-iconos .pl-burbuja { width: 44px; height: 44px; }
  .pl-prueba-escena { min-height: 230px; }
  .pl-prueba-texto .pl-prueba-form .pl-boton { width: 100%; }
}

/* ---------- /empezar ---------- */
/*
 * Guía de inicio de INDESY eFact. Diseño editorial: cada etapa abre con una franja azul marino
 * (con las tarjetas flotantes de la marca) y la línea del trayecto con «Usted está aquí»;
 * sigue con el texto, sus viñetas y sus notas al margen, y cierra con «Listo cuando».
 * Todas las clases llevan el prefijo empezar-. Sin estilos en línea ni scripts (CSP).
 * El bloque @media print arma el PDF que se envía al cliente (tamaño carta); va acotado con
 * :where(body.empezar) para no tocar la impresión de las otras páginas ni subir la especificidad.
 */
body.empezar {
  --empezar-navy: #1e1e3a;
  --empezar-superficie: #2a2a4a;
  --empezar-azul-1: #5b54ff;
  --empezar-azul-2: #423bd6;
  --empezar-azul-texto: #3533b3;
  --empezar-lavanda: #8f8bff;
  --empezar-gris-lavanda: #a3a3c6;
  --empezar-niebla: #f3f3fb;
  --empezar-menta: #c6f4d9;
  --empezar-menta-texto: #0d5132;
  --empezar-verde: #1f9d57;
}

/* Fondo de marca: azul marino con brillo azul */
.empezar-oscuro { position: relative; isolation: isolate; overflow: hidden; background: var(--empezar-navy); color: #fff; }
.empezar-oscuro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 78% 18%, rgba(81, 77, 255, 0.3), transparent 55%);
}
.empezar-portada { display: none; }

/* ---------- Inicio: fondo claro y uniforme, que se funde con la barra transparente ---------- */
.empezar-hero { background: var(--ink-50); border-bottom: 1px solid var(--linea); }
.empezar-hero .empezar-hero-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
  padding-top: calc(var(--barra) + 66px);
  padding-bottom: 80px;
}
.empezar-capitulo-meta { margin: 0; color: var(--empezar-gris-lavanda); font-size: 15px; line-height: 22px; }
.empezar-capitulo-meta strong { color: #fff; font-weight: 700; }
.empezar-hero h1 { margin: 16px 0 0 0; color: var(--ink-900); font-size: 56px; line-height: 1.02; letter-spacing: -0.03em; }
.empezar-hero-lead { margin: 20px 0 0 0; max-width: 34rem; color: var(--suave); font-size: 19px; line-height: 30px; }
.empezar-hero .acciones { margin-top: 32px; }
.empezar-hero .empezar-capitulo-meta { color: var(--tenue); }
.empezar-hero .empezar-tarjeta { box-shadow: 0 26px 50px -22px rgba(42, 42, 73, 0.35); }
.empezar-hero .empezar-tarjeta-blanca { border: 1px solid var(--linea); }

/* ---------- Escenas: tarjetas flotantes ---------- */
.empezar-escena { position: relative; min-height: 300px; }
.empezar-tarjeta {
  position: absolute;
  margin: 0;
  padding: 14px 16px;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.38);
  font-size: 13px;
  line-height: 18px;
}
.empezar-tarjeta small { display: block; font-size: 11.5px; line-height: 16px; opacity: 0.85; }
.empezar-tarjeta b { display: block; margin-top: 2px; font-size: 16px; line-height: 21px; font-weight: 900; }
.empezar-tarjeta-blanca { background: #fff; color: var(--empezar-navy); }
.empezar-tarjeta-azul { background: linear-gradient(135deg, var(--empezar-azul-1), var(--empezar-azul-2)); color: #fff; }
.empezar-tarjeta-menta { background: var(--empezar-menta); color: var(--empezar-menta-texto); }
.empezar-tarjeta-oscura { background: var(--empezar-superficie); color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); }
.empezar-ventana-barra { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; color: var(--tenue); font-size: 11px; line-height: 14px; font-weight: 700; }
.empezar-ventana-barra i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #d3d5e2; }
.empezar-ventana-barra span { margin-left: 4px; }
.empezar-tarjeta-dato { margin: 0 0 8px 0; font-size: 15px; font-weight: 900; }
.empezar-fila-ok { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; font-weight: 700; }
.empezar-fila-ok i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--empezar-verde); }
.empezar-fila-ok i::after { content: ""; width: 4px; height: 7px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.empezar-boton-mini { display: inline-block; margin: 12px 0 0 0; padding: 4px 14px; border-radius: 6px; background: var(--empezar-navy); color: #fff; font-size: 11.5px; font-weight: 700; }
.empezar-campo { margin: 0 0 4px 0; padding: 6px 9px; border: 1px solid #c9cbd8; border-radius: 6px; color: var(--tenue); font-size: 11.5px; }
.empezar-opcion { display: flex; align-items: center; gap: 8px; margin: 9px 0 0 0; font-size: 12.5px; font-weight: 700; }
.empezar-opcion i { display: block; width: 15px; height: 15px; border: 1.5px solid #b7bacb; border-radius: 4px; }
.empezar-opcion-si i { border-color: var(--acento); background: var(--acento); box-shadow: inset 0 0 0 3px var(--acento), inset 0 0 0 6px #fff; }
.empezar-opcion-tenue { color: #a0a4b8; font-weight: 400; }
.empezar-menu-item { margin: 0; padding: 6px 9px; border-radius: 6px; color: var(--tenue); font-size: 12px; }
.empezar-menu-activo { background: #eeeeff; color: var(--empezar-azul-texto); font-weight: 900; }
.empezar-progreso { height: 6px; margin-top: 12px; border-radius: 3px; background: #e3e4ee; overflow: hidden; }
.empezar-progreso span { display: block; width: 40%; height: 100%; background: var(--acento); }
.empezar-qr { display: grid; grid-template-columns: repeat(3, 12px); gap: 3px; margin-top: 12px; }
.empezar-qr span { width: 12px; height: 12px; border-radius: 2px; background: var(--empezar-navy); }
.empezar-qr span:nth-child(2), .empezar-qr span:nth-child(4), .empezar-qr span:nth-child(9) { background: #d6d5fb; }

/* Posiciones de las tarjetas, escena por escena */
.empezar-escena-hero { min-height: 360px; }
.empezar-th1 { left: 8%; top: 20px; width: 290px; }
.empezar-th2 { right: 0; top: 0; width: 200px; }
.empezar-th3 { right: 6%; bottom: 0; width: 210px; }
.empezar-t1 { left: 0; top: 0; width: 270px; }
.empezar-t2 { right: 0; top: 44px; width: 172px; }
.empezar-t3 { left: 20%; bottom: 0; width: 220px; }

/* ---------- La ruta completa ---------- */
.empezar-ruta { border-bottom: 1px solid var(--linea); }
.empezar-ruta .ancho { padding-top: 64px; padding-bottom: 64px; }
.empezar-ruta h2 { margin: 0; color: var(--ink-900); font-size: 32px; line-height: 38px; font-weight: 900; letter-spacing: -0.02em; }
.empezar-ruta-intro { margin: 12px 0 0 0; max-width: 44rem; color: var(--tenue); font-size: 17px; line-height: 28px; }
.empezar-estaciones-ruta {
  list-style: none;
  margin: 36px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
.empezar-estaciones-ruta li { position: relative; padding: 0 14px 0 0; }
.empezar-estaciones-ruta li::before {
  content: "";
  position: absolute;
  top: 82px;
  left: 17px;
  right: -17px;
  height: 4px;
  border-radius: 2px;
  background: #d6d5fb;
}
.empezar-estaciones-ruta li:last-child::before { display: none; }
.empezar-icono { display: block; width: 56px; height: 56px; }
.empezar-estacion-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: 12px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 0 0 5px #fff;
}
.empezar-estaciones-ruta a {
  display: block;
  margin-top: 14px;
  color: var(--ink-900);
  font-size: 16px;
  line-height: 21px;
  font-weight: 900;
  text-decoration: none;
}
.empezar-estaciones-ruta a:hover { color: var(--acento); }
.empezar-estaciones-ruta p { margin: 6px 0 0 0; color: var(--tenue); font-size: 13.5px; line-height: 20px; }
.empezar-estaciones-ruta .empezar-quien-t { color: var(--ink-700); font-size: 13px; }
.empezar-chip {
  display: inline-block;
  margin: 8px 0 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eeeeff;
  color: var(--empezar-azul-texto);
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Apertura de cada etapa ---------- */
.empezar-capitulo { scroll-margin-top: -24px; }
.empezar-apertura-dentro { position: relative; padding-top: 48px; padding-bottom: 56px; }
.empezar-apertura-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 44px;
}
.empezar-apertura h2 { margin: 14px 0 0 0; color: #fff; font-size: 48px; line-height: 1.04; font-weight: 900; letter-spacing: -0.025em; }
.empezar-apertura-lead { margin: 16px 0 0 0; max-width: 32rem; color: #c9c9e0; font-size: 17px; line-height: 28px; }
.empezar-gigante {
  position: absolute;
  z-index: -1;
  left: 4px;
  bottom: -0.3em;
  margin: 0;
  color: rgba(255, 255, 255, 0.045);
  font-size: 320px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  pointer-events: none;
}

/* Línea del trayecto con «Usted está aquí» */
.empezar-trayecto { list-style: none; margin: 26px 0 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.empezar-trayecto li { position: relative; padding-top: 34px; text-align: center; font-size: 13px; line-height: 18px; }
.empezar-trayecto li::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.empezar-trayecto li:last-child::after { display: none; }
.empezar-trayecto li::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: var(--empezar-navy);
  box-sizing: border-box;
}
.empezar-trayecto a { color: var(--empezar-gris-lavanda); font-weight: 700; text-decoration: none; }
.empezar-trayecto a:hover { color: #fff; }
.empezar-trayecto .empezar-hecha::before { border-color: var(--acento); background: var(--acento); }
.empezar-trayecto .empezar-hecha::after { background: var(--acento); }
.empezar-trayecto [aria-current="step"]::before {
  top: 1px;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border: 6px solid var(--acento);
  background: #fff;
  box-shadow: 0 0 0 8px rgba(81, 77, 255, 0.25);
}
.empezar-trayecto [aria-current="step"] a { color: #fff; font-weight: 900; }
.empezar-aqui {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--empezar-navy);
  font-size: 11px;
  line-height: 16px;
  font-weight: 900;
  white-space: nowrap;
}

/* ---------- Texto de cada etapa ---------- */
.empezar-texto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 0 56px;
  align-items: start;
  padding-top: 56px;
  padding-bottom: 72px;
  color: var(--texto);
  font-size: 16.5px;
  line-height: 28px;
}
.empezar-principal { min-width: 0; }
.empezar-principal > :first-child { margin-top: 0; }
.empezar-principal p { margin: 16px 0; }
.empezar-principal strong { color: var(--ink-700); }
.empezar-principal h3 { margin: 40px 0 12px 0; color: var(--ink-900); font-size: 21px; line-height: 28px; font-weight: 900; }
.empezar-principal a { color: var(--acento); font-weight: 700; }
.empezar-lista { margin: 12px 0; padding-left: 22px; }
.empezar-lista li { margin: 8px 0; padding-left: 4px; }
.empezar-lista li::marker { color: var(--vineta); }

/* Notas al margen */
.empezar-margen { position: sticky; top: calc(var(--barra) + 34px); }
.empezar-margen dl { margin: 0; }
.empezar-nota { margin: 0 0 22px 0; padding: 0 0 0 14px; border-left: 3px solid #d6d5fb; font-size: 13.5px; line-height: 21px; color: var(--tenue); }
.empezar-nota dt { color: var(--ink-900); font-weight: 900; }
.empezar-nota dd { margin: 3px 0 0 0; }
.empezar-nota-provisional { border-left-style: dashed; border-left-color: var(--acento); }
.empezar-nota-provisional dt { color: var(--empezar-azul-texto); }
.empezar-nota-mano { padding: 12px 14px; border-left: 0; border-radius: 12px; background: var(--empezar-niebla); }

/* Ruta de menú: OFV, Solicitudes… */
.empezar-principal .empezar-menu { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px 0; font-size: 13px; line-height: 20px; }
.empezar-menu span { padding: 3px 10px; border: 1px solid var(--linea); border-radius: 6px; background: var(--empezar-niebla); color: var(--ink-700); font-weight: 700; }
.empezar-menu span:first-child { border-color: var(--empezar-navy); background: var(--empezar-navy); color: #fff; }

/* Pasos numerados en el texto */
.empezar-pasos { counter-reset: empezar-paso; list-style: none; margin: 16px 0; padding: 0; }
.empezar-pasos > li { counter-increment: empezar-paso; position: relative; margin: 0; padding: 10px 0 10px 46px; border-bottom: 1px solid var(--linea); }
.empezar-pasos > li::before {
  content: counter(empezar-paso);
  position: absolute;
  left: 0;
  top: 10px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--acento);
  border-radius: 50%;
  color: var(--acento);
  font-size: 14px;
  line-height: 26px;
  font-weight: 900;
  text-align: center;
}

/* Requisitos como fichas */
.empezar-requisitos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.empezar-requisitos li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border: 1.5px solid var(--linea); border-radius: 16px; }
.empezar-requisitos svg { width: 40px; height: 40px; }
.empezar-requisitos strong { display: block; color: var(--ink-900); font-size: 15.5px; line-height: 21px; font-weight: 900; }
.empezar-requisitos p { margin: 6px 0 0 0; font-size: 14px; line-height: 22px; }

/* Viñetas: la pantalla dibujada y la acción */
.empezar-vinetas { counter-reset: empezar-vineta; list-style: none; margin: 0 0 28px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.empezar-vineta { counter-increment: empezar-vineta; overflow: hidden; border: 1.5px solid var(--linea); border-radius: 16px; background: #fff; }
.empezar-vineta-dibujo { position: relative; padding: 18px 10px 8px; background: var(--empezar-niebla); }
.empezar-vineta-dibujo::before {
  content: counter(empezar-vineta);
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--empezar-navy);
  color: #fff;
  font-size: 14px;
  line-height: 28px;
  font-weight: 900;
  text-align: center;
}
.empezar-vineta-dibujo svg { display: block; width: 100%; height: auto; }
.empezar-vineta-texto { padding: 12px 16px 16px; }
.empezar-vineta h4 { margin: 0; color: var(--ink-900); font-size: 15.5px; line-height: 21px; font-weight: 900; }
.empezar-principal .empezar-vineta p { margin: 6px 0 0 0; font-size: 14px; line-height: 22px; }

.empezar-vinetas-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.empezar-vinetas-cuatro .empezar-vineta-texto { padding: 10px 12px 14px; }
.empezar-vinetas-cuatro .empezar-vineta h4 { font-size: 14.5px; line-height: 19px; }
.empezar-principal .empezar-vinetas-cuatro .empezar-vineta p { font-size: 13px; line-height: 20px; }

/* Juntos, sin claves (etapa 5) */
.empezar-trio { list-style: none; margin: 20px 0 8px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.empezar-trio li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--empezar-niebla); font-size: 14px; line-height: 21px; }
.empezar-trio svg, .empezar-trio img { grid-row: span 2; display: block; width: 40px; height: 40px; border-radius: 50%; }
.empezar-trio strong { color: var(--ink-900); font-weight: 900; }
.empezar-trio span { color: var(--tenue); }

/* Así sí, así no */
.empezar-comparar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.empezar-caso { padding: 16px 20px; border-radius: 16px; font-size: 14.5px; line-height: 22px; }
.empezar-principal .empezar-caso p { margin: 0; }
.empezar-principal .empezar-caso-t { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 16px; line-height: 22px; font-weight: 900; }
.empezar-caso-t svg { width: 22px; height: 22px; flex: none; }
.empezar-si { background: var(--empezar-menta); color: var(--empezar-menta-texto); }
.empezar-si strong { color: var(--empezar-menta-texto); }
.empezar-no { background: #ededf4; color: #4b4e66; }
.empezar-no strong { color: #33364d; }
.empezar-principal .empezar-fila { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(13, 81, 50, 0.14); }
.empezar-no .empezar-fila { border-top-color: rgba(75, 78, 102, 0.14); }
.empezar-fila del { text-decoration-thickness: 2px; }

.empezar-principal .empezar-porque { margin: -12px 0 28px 0; color: var(--tenue); font-size: 15px; line-height: 24px; }
.empezar-principal .empezar-porque strong { color: var(--ink-900); font-weight: 900; }

/* Cita destacada */
.empezar-cita { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; margin: 36px 0; padding: 0; }
.empezar-cita svg { width: 44px; height: 36px; margin-top: 4px; }
.empezar-principal .empezar-cita p { margin: 0; color: var(--ink-900); font-size: 25px; line-height: 32px; font-weight: 900; letter-spacing: -0.01em; }
.empezar-cita span { display: block; margin-top: 10px; color: var(--tenue); font-size: 14.5px; line-height: 23px; font-weight: 400; letter-spacing: 0; }

/* Usted y Spedis */
.empezar-reparto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.empezar-quien { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; border-radius: 16px; background: var(--empezar-niebla); }
.empezar-quien svg, .empezar-quien img { display: block; width: 40px; height: 40px; border-radius: 50%; }
.empezar-principal .empezar-quien p { margin: 4px 0 0 0; font-size: 14.5px; line-height: 23px; }
.empezar-principal .empezar-quien-t { margin: 0; color: var(--ink-900); font-size: 15px; font-weight: 900; }

/* Listo cuando */
.empezar-listo { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: center; margin: 32px 0 0 0; padding: 18px 22px; border-radius: 16px; background: var(--empezar-menta); color: var(--empezar-menta-texto); }
.empezar-listo svg { width: 34px; height: 34px; }
.empezar-principal .empezar-listo p { margin: 0; font-size: 15.5px; line-height: 24px; }
.empezar-listo strong { color: var(--empezar-menta-texto); font-weight: 900; }

/* Orden de los trámites (etapa 3) */
.empezar-orden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 8px 0; }
.empezar-orden-paso {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 22px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--empezar-niebla);
  color: var(--ink-900);
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 700;
}
.empezar-orden-paso::after {
  content: "";
  position: absolute;
  right: -17px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -7px;
  border-left: 10px solid var(--empezar-azul-texto);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.empezar-orden-paso span {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.empezar-orden-fin { margin-right: 0; background: var(--empezar-menta); color: var(--empezar-menta-texto); }
.empezar-orden-fin::after { display: none; }
.empezar-orden-fin span { background: var(--empezar-verde); }

/* Formulario de la postulación (etapa 5) */
.empezar-formulario { max-width: 640px; margin: 20px 0 24px 0; padding: 14px 18px 16px; border: 1px solid #dfe1ec; border-radius: 16px; background: #fff; box-shadow: 0 22px 44px -30px rgba(15, 15, 37, 0.45); }
.empezar-formulario dl { margin: 0; }
.empezar-formulario dl > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; }
.empezar-formulario dt { color: var(--tenue); font-size: 13px; line-height: 18px; font-weight: 700; }
.empezar-formulario dd { margin: 0; padding: 5px 10px; border: 1px solid #d4d6e3; border-radius: 6px; color: var(--ink-900); font-size: 14px; line-height: 20px; font-weight: 700; }
.empezar-formulario figcaption { margin-top: 12px; color: var(--tenue); font-size: 13.5px; line-height: 21px; }
.empezar-url { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; word-break: break-all; }
.empezar-url em { color: var(--acento); font-style: normal; font-weight: 700; }

/* Pasos 2 al 15 como tramos de una línea */
.empezar-tramo { margin: 26px 0 0 0; }
.empezar-principal .empezar-tramo-t { margin: 0 0 6px 0; color: var(--empezar-azul-texto); font-size: 15px; line-height: 22px; font-weight: 900; }
.empezar-estaciones { list-style: none; margin: 0; padding: 0; }
.empezar-estaciones > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; }
.empezar-estaciones > li::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 4px; background: #d6d5fb; }
.empezar-estaciones > li:first-child::before { top: 24px; }
.empezar-estaciones > li:last-child::before { bottom: auto; height: 24px; }
.empezar-estaciones > li:only-child::before { display: none; }
.empezar-estacion-n {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 30px;
  border-radius: 999px;
  background: var(--empezar-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.empezar-estaciones h4 { margin: 4px 0 0 0; color: var(--ink-900); font-size: 16px; line-height: 22px; font-weight: 900; }
.empezar-principal .empezar-estaciones p { margin: 4px 0 0 0; font-size: 14.5px; line-height: 23px; }
.empezar-estaciones b { color: var(--ink-700); }
.empezar-estaciones .empezar-chip { margin-top: 4px; }
.empezar-estacion-final .empezar-estacion-n { background: var(--empezar-verde); }

/* Diagramas */
.empezar-diagrama { margin: 20px 0; }
.empezar-diagrama svg { display: block; width: 100%; max-width: 700px; height: auto; }
.empezar-diagrama figcaption { margin-top: 10px; color: var(--tenue); font-size: 14px; line-height: 22px; }

/* Etapas sin apertura (proveedor y ayuda) */
.empezar-capitulo-claro { border-top: 1px solid var(--linea); }
.empezar-titulo-claro { margin: 0 0 16px 0; color: var(--ink-900); font-size: 32px; line-height: 38px; font-weight: 900; letter-spacing: -0.02em; }
.empezar-principal .empezar-entrada { font-size: 17.5px; line-height: 29px; }
.empezar-tabla-comparar { margin: 24px 0 8px 0; overflow-x: auto; }
.empezar-tabla-comparar table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 22px; }
.empezar-tabla-comparar th, .empezar-tabla-comparar td { padding: 10px 12px; border-bottom: 1px solid var(--linea); text-align: left; }
.empezar-tabla-comparar thead th { color: var(--ink-900); font-weight: 900; border-bottom: 2px solid var(--ink-900); }
.empezar-tabla-comparar tbody th { color: var(--ink-700); font-weight: 700; }
.empezar-tabla-comparar td { width: 24%; }
.empezar-punto-si, .empezar-punto-no { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.empezar-punto-si::before, .empezar-punto-no::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.empezar-punto-si::before { background: var(--acento); }
.empezar-punto-no { color: #9a9db2; font-weight: 400; }
.empezar-punto-no::before { border: 2px solid #c9cbd8; box-sizing: border-box; }
.empezar-principal .empezar-nota-pie { color: var(--tenue); font-size: 14px; line-height: 22px; }
.empezar-ayuda .canales { list-style: none; margin: 0 0 20px 0; padding: 0; }
.empezar-ayuda h3 { margin-top: 32px; }

/* ---------- Pantallas medianas y teléfonos ---------- */
@media screen and (max-width: 1023px) {
  .empezar-texto { grid-template-columns: minmax(0, 1fr); }
  .empezar-margen { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--linea); }
  .empezar-margen dl { display: contents; }
  .empezar-estaciones-ruta { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .empezar-estaciones-ruta li:nth-child(3)::before { display: none; }
  .empezar-vinetas-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .empezar-hero .empezar-hero-rejilla, .empezar-apertura-rejilla { grid-template-columns: minmax(0, 1fr); }
  .empezar-escena { max-width: 520px; }
}
@media screen and (max-width: 767px) {
  .empezar-hero .empezar-hero-rejilla { padding-top: calc(var(--barra) + 42px); padding-bottom: 56px; }
  .empezar-hero h1 { font-size: 40px; }
  .empezar-hero-lead { font-size: 17px; line-height: 28px; }
  .empezar-apertura h2 { font-size: 36px; }
  .empezar-apertura-dentro { padding-top: 40px; padding-bottom: 44px; }
  .empezar-gigante { font-size: 220px; }
  .empezar-escena { min-height: 280px; }
  .empezar-th1, .empezar-t1 { width: 250px; }
  .empezar-th2, .empezar-t2 { width: 160px; }
  .empezar-trayecto li { font-size: 10.5px; line-height: 14px; }
  .empezar-trayecto li:not([aria-current="step"]) a { color: transparent; }
  .empezar-texto { padding-top: 40px; padding-bottom: 56px; font-size: 16px; }
  .empezar-margen { grid-template-columns: minmax(0, 1fr); }
  .empezar-estaciones-ruta { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .empezar-estaciones-ruta li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding: 0; }
  .empezar-estaciones-ruta li::before { display: none; }
  .empezar-estaciones-ruta .empezar-icono { grid-row: span 6; }
  .empezar-estacion-num { display: none; }
  .empezar-estaciones-ruta a { margin-top: 0; }
  .empezar-requisitos, .empezar-vinetas, .empezar-vinetas-cuatro, .empezar-comparar, .empezar-reparto, .empezar-orden, .empezar-trio { grid-template-columns: minmax(0, 1fr); }
  .empezar-orden { gap: 22px; }
  .empezar-orden-paso { margin-right: 0; }
  .empezar-orden-paso::after { right: auto; top: auto; left: 30px; bottom: -17px; margin-top: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--empezar-azul-texto); border-bottom: 0; }
  .empezar-formulario dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .empezar-estaciones > li { grid-template-columns: 48px minmax(0, 1fr); }
  .empezar-estaciones .empezar-chip { grid-column: 2; margin-top: 0; justify-self: start; }
  .empezar-principal .empezar-cita p { font-size: 21px; line-height: 28px; }
}

/* ---------- PDF (tamaño carta) ---------- */
@page empezar { size: Letter; margin: 14mm 15mm 15mm 15mm; }
@page empezar-portada { size: Letter; margin: 0; }

@media print {
  body.empezar { page: empezar; display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :where(body.empezar) .barra, :where(body.empezar) .saltar, :where(body.empezar) .pie, :where(body.empezar) .contacto,
  :where(body.empezar) .empezar-hero, :where(body.empezar) .acciones { display: none !important; }

  /* Portada a sangre */
  :where(body.empezar) .empezar-portada {
    page: empezar-portada;
    display: flex;
    flex-direction: column;
    height: 279.4mm;
    padding: 22mm 20mm 18mm;
    break-after: page;
  }
  :where(body.empezar) .empezar-portada-logo { width: 64mm; height: auto; }
  :where(body.empezar) .empezar-portada-meta { margin: 40mm 0 0 0; color: var(--empezar-gris-lavanda); font-size: 12pt; }
  :where(body.empezar) .empezar-portada-titulo { margin: 4mm 0 0 0; max-width: 150mm; color: #fff; font-size: 40pt; line-height: 1.02; font-weight: 900; letter-spacing: -0.02em; }
  :where(body.empezar) .empezar-portada-lead { margin: 7mm 0 0 0; max-width: 135mm; color: #c9c9e0; font-size: 12.5pt; line-height: 1.5; }
  :where(body.empezar) .empezar-portada-etapas { counter-reset: empezar-portada; list-style: none; margin: 14mm 0 0 0; padding: 0; max-width: 150mm; }
  :where(body.empezar) .empezar-portada-etapas li {
    counter-increment: empezar-portada;
    display: grid;
    grid-template-columns: 10mm minmax(0, 1fr) auto;
    align-items: center;
    padding: 2.6mm 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 11.5pt;
    font-weight: 700;
  }
  :where(body.empezar) .empezar-portada-etapas li::before {
    content: counter(empezar-portada);
    display: grid;
    place-items: center;
    width: 7mm;
    height: 7mm;
    border-radius: 50%;
    background: var(--acento);
    font-size: 9.5pt;
    font-weight: 900;
  }
  :where(body.empezar) .empezar-portada-etapas em { color: var(--empezar-lavanda); font-size: 10pt; font-style: normal; font-weight: 700; }
  :where(body.empezar) .empezar-portada-pie { margin-top: auto; color: var(--empezar-gris-lavanda); font-size: 8.5pt; line-height: 1.6; }
  :where(body.empezar) .empezar-portada-pie p { margin: 0; }
  :where(body.empezar) .empezar-portada-pie strong { color: #fff; }

  /* La ruta, en una página */
  :where(body.empezar) .empezar-ruta { border: 0; break-after: page; }
  :where(body.empezar) .ancho { max-width: none; padding: 0; }
  :where(body.empezar) .empezar-ruta .ancho { padding: 4mm 0 0; }
  :where(body.empezar) .empezar-ruta h2 { font-size: 28pt; line-height: 1.1; }
  :where(body.empezar) .empezar-ruta-intro { font-size: 12pt; line-height: 1.55; }
  :where(body.empezar) .empezar-estaciones-ruta { grid-template-columns: minmax(0, 1fr); margin-top: 8mm; }
  :where(body.empezar) .empezar-estaciones-ruta li {
    display: grid;
    grid-template-columns: 16mm 9mm minmax(0, 1fr) 38mm;
    grid-template-rows: auto auto;
    column-gap: 4mm;
    align-items: center;
    padding: 6.5mm 0;
    border-bottom: 1px solid var(--linea);
  }
  :where(body.empezar) .empezar-estaciones-ruta li::before { display: none; }
  :where(body.empezar) .empezar-icono { grid-row: span 2; width: 15mm; height: 15mm; }
  :where(body.empezar) .empezar-estacion-num { grid-row: span 2; margin: 0; width: 8mm; height: 8mm; font-size: 10pt; box-shadow: none; }
  :where(body.empezar) .empezar-estaciones-ruta a { margin: 0; font-size: 14pt; }
  :where(body.empezar) .empezar-estaciones-ruta p { margin: 1mm 0 0 0; grid-column: 3; font-size: 10.5pt; line-height: 1.4; }
  :where(body.empezar) .empezar-estaciones-ruta .empezar-quien-t { grid-column: 4; grid-row: 1; margin: 0; text-align: right; font-size: 9.5pt; }
  :where(body.empezar) .empezar-estaciones-ruta .empezar-chip { grid-column: 4; grid-row: 2; justify-self: end; margin: 0; font-size: 8.5pt; }

  /* Cada etapa en página nueva; la apertura como bloque */
  :where(body.empezar) .empezar-capitulo { break-before: page; }
  :where(body.empezar) .empezar-capitulo-claro { break-before: auto; border: 0; }
  :where(body.empezar) #proveedor { break-before: page; }
  :where(body.empezar) .empezar-ayuda { break-before: page; }
  :where(body.empezar) .empezar-apertura { border-radius: 5mm; break-inside: avoid; }
  :where(body.empezar) .empezar-apertura-dentro { padding: 6mm 7mm 6mm; }
  :where(body.empezar) .empezar-trayecto { margin-top: 6mm; }
  :where(body.empezar) .empezar-trayecto li { font-size: 7.5pt; line-height: 1.2; padding-top: 28px; }
  :where(body.empezar) .empezar-apertura-rejilla { grid-template-columns: minmax(0, 1fr) 72mm; gap: 6mm; margin-top: 4mm; }
  :where(body.empezar) .empezar-capitulo-meta { font-size: 9.5pt; line-height: 1.4; }
  :where(body.empezar) .empezar-apertura h2 { margin-top: 2mm; font-size: 23pt; }
  :where(body.empezar) .empezar-apertura-lead { margin-top: 2.5mm; font-size: 10pt; line-height: 1.45; }
  :where(body.empezar) .empezar-gigante { font-size: 190pt; }
  :where(body.empezar) .empezar-escena { min-height: 290px; zoom: 0.54; }
  :where(body.empezar) .empezar-tarjeta { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35); }

  :where(body.empezar) .empezar-texto { grid-template-columns: minmax(0, 1fr) 38mm; gap: 0 5mm; padding: 5mm 0 0; font-size: 9.2pt; line-height: 1.48; }
  :where(body.empezar) .empezar-margen { position: static; }
  :where(body.empezar) .empezar-nota-mano { padding: 2.5mm 3mm; }
  :where(body.empezar) .empezar-nota { margin-bottom: 3.5mm; padding-left: 3mm; font-size: 8pt; line-height: 1.42; break-inside: avoid; }
  :where(body.empezar) .empezar-principal p { margin: 2.5mm 0; }
  :where(body.empezar) .empezar-principal h3 { margin: 5mm 0 1.5mm; font-size: 12pt; break-after: avoid; }
  :where(body.empezar) .empezar-principal .empezar-menu { margin: 2mm 0 3mm; font-size: 8.5pt; }
  :where(body.empezar) .empezar-requisitos { gap: 3mm; }
  :where(body.empezar) .empezar-requisitos li { padding: 2.5mm 3mm; gap: 3mm; grid-template-columns: 8mm minmax(0, 1fr); }
  :where(body.empezar) .empezar-requisitos svg { width: 8mm; height: 8mm; }
  :where(body.empezar) .empezar-requisitos strong { font-size: 9.4pt; line-height: 1.25; }
  :where(body.empezar) .empezar-requisitos p { margin-top: 1mm; font-size: 8.4pt; line-height: 1.4; }
  :where(body.empezar) .empezar-vinetas { gap: 3mm; margin-bottom: 4mm; }
  :where(body.empezar) .empezar-vineta-dibujo { padding: 2.5mm 7mm 0.5mm; }
  :where(body.empezar) .empezar-vinetas-cuatro { gap: 2.5mm; }
  :where(body.empezar) .empezar-vinetas-cuatro .empezar-vineta-dibujo { padding: 2.5mm 1.5mm 0.5mm; }
  :where(body.empezar) .empezar-vinetas-cuatro .empezar-vineta-dibujo::before { top: 1.5mm; left: 1.5mm; width: 5mm; height: 5mm; font-size: 8pt; line-height: 5mm; }
  :where(body.empezar) .empezar-vinetas-cuatro .empezar-vineta-texto { padding: 2mm 2.5mm 2.5mm; }
  :where(body.empezar) .empezar-vinetas-cuatro .empezar-vineta h4 { font-size: 8.8pt; }
  :where(body.empezar) .empezar-principal .empezar-vinetas-cuatro .empezar-vineta p { font-size: 7.9pt; line-height: 1.38; }
  :where(body.empezar) .empezar-trio { gap: 2.5mm; margin: 3mm 0 2mm; }
  :where(body.empezar) .empezar-trio li { grid-template-columns: 8mm minmax(0, 1fr); column-gap: 2.5mm; padding: 2.5mm 3mm; font-size: 8.6pt; line-height: 1.4; break-inside: avoid; }
  :where(body.empezar) .empezar-trio svg, :where(body.empezar) .empezar-trio img { width: 8mm; height: 8mm; }
  :where(body.empezar) .empezar-vineta-texto { padding: 2.5mm 3mm 3mm; }
  :where(body.empezar) .empezar-vineta h4 { font-size: 9.5pt; line-height: 1.3; }
  :where(body.empezar) .empezar-principal .empezar-vineta p { margin-top: 1mm; font-size: 8.2pt; line-height: 1.4; }
  :where(body.empezar) .empezar-comparar, :where(body.empezar) .empezar-reparto { gap: 3mm; margin: 4mm 0; }
  :where(body.empezar) .empezar-caso, :where(body.empezar) .empezar-quien { padding: 3mm 3.5mm; font-size: 9pt; line-height: 1.4; }
  :where(body.empezar) .empezar-principal .empezar-quien p { font-size: 8.6pt; line-height: 1.42; }
  :where(body.empezar) .empezar-principal .empezar-porque { margin: -2mm 0 4mm; font-size: 9pt; line-height: 1.45; }
  :where(body.empezar) .empezar-cita { margin: 4mm 0; grid-template-columns: 9mm minmax(0, 1fr); gap: 3mm; }
  :where(body.empezar) .empezar-cita svg { width: 9mm; height: auto; }
  :where(body.empezar) .empezar-principal .empezar-cita p { font-size: 13.5pt; line-height: 1.25; }
  :where(body.empezar) .empezar-cita span { font-size: 9pt; line-height: 1.45; }
  :where(body.empezar) .empezar-listo { margin-top: 4mm; padding: 3mm 4mm; grid-template-columns: 7mm minmax(0, 1fr); gap: 3mm; }
  :where(body.empezar) .empezar-listo svg { width: 7mm; height: 7mm; }
  :where(body.empezar) .empezar-principal .empezar-listo p { font-size: 9.4pt; line-height: 1.4; }
  :where(body.empezar) .empezar-orden-paso { padding: 3mm; font-size: 9pt; line-height: 1.3; }
  :where(body.empezar) .empezar-pasos > li { padding: 1.4mm 0 1.4mm 9mm; }
  :where(body.empezar) .empezar-pasos > li::before { top: 1.4mm; width: 6mm; height: 6mm; font-size: 8.5pt; line-height: 5.3mm; }
  :where(body.empezar) .empezar-formulario { margin: 3mm 0 4mm; padding: 3mm 4mm; box-shadow: none; }
  :where(body.empezar) .empezar-formulario dl > div { padding: 1mm 0; grid-template-columns: 34mm minmax(0, 1fr); }
  :where(body.empezar) .empezar-formulario dt, :where(body.empezar) .empezar-formulario dd { font-size: 8.8pt; line-height: 1.35; }
  :where(body.empezar) .empezar-formulario figcaption { font-size: 8.5pt; }
  :where(body.empezar) .empezar-tramo { margin-top: 3mm; }
  :where(body.empezar) .empezar-estaciones > li { padding: 1.3mm 0; gap: 3mm; break-inside: avoid; }
  :where(body.empezar) .empezar-estaciones h4 { font-size: 10pt; line-height: 1.3; }
  :where(body.empezar) .empezar-principal .empezar-estaciones p { font-size: 9pt; line-height: 1.45; }
  :where(body.empezar) .empezar-chip { font-size: 8pt; line-height: 1.6; }
  :where(body.empezar) .empezar-diagrama { margin: 4mm 0; break-inside: avoid; }
  :where(body.empezar) .empezar-diagrama figcaption { font-size: 8.5pt; }
  :where(body.empezar) .empezar-titulo-claro { font-size: 20pt; line-height: 1.15; }
  :where(body.empezar) .empezar-principal .empezar-entrada { font-size: 10.5pt; line-height: 1.55; }
  :where(body.empezar) .empezar-tabla-comparar table { font-size: 9.5pt; line-height: 1.4; }
  :where(body.empezar) .empezar-tabla-comparar th, :where(body.empezar) .empezar-tabla-comparar td { padding: 1.8mm 2.5mm; }
  :where(body.empezar) .empezar-principal .empezar-nota-pie { font-size: 8.5pt; line-height: 1.45; }
  :where(body.empezar) .canales li { grid-template-columns: 34mm 1fr; gap: 4mm; padding: 2mm 0; font-size: 9.5pt; line-height: 1.4; }
  :where(body.empezar) .empezar-requisitos li, :where(body.empezar) .empezar-vineta, :where(body.empezar) .empezar-caso,
  :where(body.empezar) .empezar-quien, :where(body.empezar) .empezar-listo, :where(body.empezar) .empezar-cita,
  :where(body.empezar) .empezar-formulario, :where(body.empezar) .empezar-orden { break-inside: avoid; }
  :where(body.empezar) .empezar-principal a { color: inherit; text-decoration: none; }
}