@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fuentes/archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/ibmplexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fuentes/ibmplexmono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/ibmplexmono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/plusjakartasans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/plusjakartasans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fuentes/plusjakartasans-800.woff2') format('woff2');
}

          * {
            box-sizing: border-box;
          }
          body {
            margin: 0;
            background: #f6f8f7;
            color: #10233a;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
          }
          h1,
          h2,
          h3,
          h4,
          p,
          figure,
          blockquote {
            margin: 0;
          }
          h1,
          h2,
          h3,
          h4,
          blockquote {
            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
          }
          a {
            color: inherit;
            text-decoration: none;
          }
          a:hover {
            color: #0e5c43;
          }
          @keyframes blip {
            0%,
            100% {
              opacity: 1;
            }
            50% {
              opacity: 0.25;
            }
          }
          dialog::backdrop {
            background: rgba(20, 22, 19, 0.62);
          }

          /* Tokens Quiet Ops. El cuerpo de esta página viene de una exportación con
     los hex escritos en cada atributo style; no hay build ni Tailwind donde
     resolverlos. Las reglas nuevas de aquí abajo sí usan los tokens, para no
     seguir sembrando hex sueltos. */
          :root {
            --ink: #10233a;
            --green: #0e5c43;
            --mint: #dff0e7;
            --surface: #ffffff;
            --paper: #f6f8f7;
            --line: #dce4e0;
            --ink-72: rgba(16, 35, 58, 0.72);
            --ink-56: rgba(16, 35, 58, 0.56);
            --shadow: 0 8px 24px rgba(16, 35, 58, 0.1);
          }

          /* La cabecera es sticky, así que un ancla aterrizaba debajo de ella y el
     título de la sección quedaba tapado. */
          section[id],
          span[id] {
            scroll-margin-top: 88px;
          }

          /* En «El problema» el título se queda a la vista mientras se recorre la
     columna de la derecha. Abajo de 768px el grid cae a una sola columna, así
     que ese mismo bloque se quedaría fijo tapando el texto que ahora va debajo:
     en vertical no hay nada al lado que acompañar. */
          .section-sticky {
            position: sticky;
            top: 96px;
          }
          @media (max-width: 768px) {
            .section-sticky {
              position: static;
            }
          }

          /* Focus visible en todo control — Quiet Ops: borde green + anillo mint. */
          a:focus-visible,
          button:focus-visible,
          summary:focus-visible,
          dialog:focus-visible {
            outline: 2px solid var(--green);
            outline-offset: 2px;
            box-shadow: 0 0 0 3px var(--mint);
            border-radius: 4px;
          }

          /* --- Navegación móvil -------------------------------------------------
     Antes, #mainnav simplemente se ocultaba abajo de 1080px: las secciones
     quedaban inalcanzables en teléfono y tablet. Ahora el mismo índice vive
     en un <details>, que abre y cierra sin JavaScript. Esa es la regla y no
     una casualidad: el contenido de esta página no depende de scripts, y lo
     poco que sí (los diálogos legales) va inline al final del documento. */
          .navmenu {
            display: none;
            position: static;
          }
          .navmenu-btn {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            flex: 0 0 auto;
            cursor: pointer;
            color: var(--ink);
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--surface);
          }
          .navmenu-btn::-webkit-details-marker {
            display: none;
          }
          .navmenu[open] .navmenu-btn {
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink);
          }
          .navmenu-panel {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--surface);
            border-bottom: 1px solid var(--line);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            padding: 8px clamp(20px, 4vw, 48px) 16px;
            font-family: 'IBM Plex Mono', ui-monospace, monospace;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
          }
          .navmenu-panel a {
            display: flex;
            align-items: center;
            min-height: 48px;
            border-bottom: 1px solid var(--line);
            color: var(--ink-72);
          }
          .navmenu-panel .navmenu-cta {
            justify-content: center;
            margin-top: 12px;
            border-bottom: 0;
            background: var(--ink);
            color: var(--paper);
            border-radius: 10px;
            font-weight: 600;
          }

          @media (max-width: 1080px) {
            #mainnav {
              display: none !important;
            }
            .navmenu {
              display: block;
            }
          }

          /* --- Móvil: legibilidad y área táctil ---------------------------------
     El documento trae los estilos en línea, así que los ajustes móviles se
     imponen desde aquí. Todo va acotado por ancho para no tocar escritorio. */
          @media (max-width: 768px) {
            /* Áreas táctiles: los enlaces de pie y de tabla medían 18px de alto. */
            footer a,
            footer button {
              min-height: 44px;
              display: flex;
              align-items: center;
            }
            footer h5 {
              min-height: 0;
            }

            /* El logo de cabecera a 45px no deja sitio para el botón de menú. */
            .hdr-logo svg {
              height: 32px !important;
            }
            .hdr-logo {
              min-height: 44px;
            }
            .hdr-bar {
              gap: 12px !important;
            }
            .hdr-cta {
              display: flex;
              align-items: center;
              min-height: 44px;
            }

            /* Escalas mono de 9.5–12.5px: legibles sin zoom en pantalla de mano. */
            [style*='font-size:10.5px'] {
              font-size: 12px !important;
            }
            [style*='font-size:9.5px'] {
              font-size: 11px !important;
            }
            [style*='font-size:11px'],
            [style*='font-size: 11px'] {
              font-size: 12.5px !important;
            }
            [style*='font-size:12px'],
            [style*='font-size: 12px'] {
              font-size: 13px !important;
            }
            [style*='font-size:12.5px'] {
              font-size: 13.5px !important;
            }

            /* En una sola columna, el bloque de marca del pie ya no puede pedir dos. */
            .footer-intro {
              grid-column: 1/-1 !important;
            }
          }

          /* Medido a 375px: logo 105 + menú 44 + CTA 189 + huecos 24 = 362px para
     una barra de 335px. Encogerla 27px exige bajar el texto por debajo del
     piso tipográfico, así que abajo de 420px la cabecera se queda con logo
     y menú: la misma llamada es el último renglón del panel y el botón
     primario del hero, visible sin hacer scroll. */
          @media (max-width: 419px) {
            .hdr-cta {
              display: none;
            }
          }

          /* En escritorio la comparativa mide 640px y cabe entera. */
          .plans-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
          }

          /*
     En móvil la comparativa deja de ser tabla: cada plan se lee como una
     tarjeta, una debajo de otra. Una tabla de tres columnas en 375px obliga a
     arrastrar en horizontal —hay que recordar la columna mientras se busca el
     renglón— y reordenarla por renglones dejaba las palomitas lejos del plan
     al que pertenecen. En una tarjeta el nombre va arriba y todo lo que sigue
     es suyo, sin ambigüedad.

     Las tarjetas son marcado propio y no la tabla transpuesta con CSS: pasar
     una columna a tarjeta exige repetir el concepto en cada plan, y eso no se
     puede hacer sin duplicar el texto. El precio es que la comparativa vive en
     dos sitios — al tocar un renglón de la tabla hay que tocar la tarjeta.
     Se prefiere eso a generar las tarjetas con JavaScript: el contenido de
     esta página no depende de scripts.
  */
          .plans-cards {
            display: none;
          }

          @media (max-width: 768px) {
            .plans-scroll {
              display: none;
            }
            .plans-cards {
              display: grid;
              gap: 16px;
              margin-top: 28px;
            }
            .plan-card {
              border: 1px solid var(--line);
              border-radius: 12px;
              background: var(--surface);
              padding: 22px 20px;
            }
            /* Pro es el plan que se quiere vender; el borde lo distingue sin gritar. */
            .plan-card-featured {
              border-color: var(--green);
            }
            .plan-card-name {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              gap: 10px;
              font-family: Archivo, system-ui, sans-serif;
              font-size: 22px;
              font-weight: 600;
              letter-spacing: -0.02em;
            }
            .plan-card-featured .plan-card-name {
              color: var(--green);
            }
            .plan-card-badge {
              font-family: 'IBM Plex Mono', ui-monospace, monospace;
              font-size: 11px;
              font-weight: 500;
              letter-spacing: 0.12em;
              text-transform: uppercase;
              color: var(--green);
              border: 1px solid var(--green);
              padding: 3px 6px;
            }
            .plan-card-desc {
              font-family: Archivo, system-ui, sans-serif;
              font-size: 16px;
              line-height: 1.45;
              color: var(--ink-72);
              margin-top: 10px;
            }
            /* «Incluye» y «No incluye» encabezan sus listas: dicho con palabras, una
       raya suelta ya no tiene que cargar con el significado de la ausencia. */
            .plan-card-group {
              font-family: 'IBM Plex Mono', ui-monospace, monospace;
              font-size: 12px;
              font-weight: 500;
              letter-spacing: 0.16em;
              text-transform: uppercase;
              color: var(--ink-56);
              margin: 0 0 12px;
              padding-top: 18px;
              margin-top: 18px;
              border-top: 1px solid var(--line);
            }
            .plan-card-list {
              list-style: none;
              margin: 0;
              padding: 0;
              display: grid;
              gap: 11px;
              font-family: 'IBM Plex Mono', ui-monospace, monospace;
              font-size: 13.5px;
              line-height: 1.4;
              color: var(--ink-72);
            }
            .plan-card-list li {
              display: grid;
              grid-template-columns: 17px 1fr;
              gap: 10px;
              align-items: start;
            }
            .plan-card-check {
              width: 17px;
              height: 17px;
              margin-top: 2px;
              fill: none;
              stroke: var(--green);
              stroke-width: 1.5;
              stroke-linecap: round;
              stroke-linejoin: round;
            }
            /* Lo que el plan no trae se lee atenuado y sin palomita: es una ausencia,
       no un dato más de la lista. */
            .plan-card-list-off {
              color: rgba(16, 35, 58, 0.42);
            }
            .plan-card-list-off li {
              grid-template-columns: 1fr;
            }
            .plan-card-cta {
              display: block;
              margin-top: 22px;
              min-height: 44px;
              padding: 14px;
              text-align: center;
              border: 1px solid var(--ink);
              border-radius: 10px;
              font-family: 'IBM Plex Mono', ui-monospace, monospace;
              font-size: 12px;
              font-weight: 600;
              letter-spacing: 0.1em;
              text-transform: uppercase;
            }
            .plan-card-featured .plan-card-cta {
              background: var(--ink);
              color: var(--paper);
              border-color: var(--ink);
            }
          }

          @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              transition-duration: 0.01ms !important;
              scroll-behavior: auto !important;
            }
          }

/* ---------------------------------------------------------------------------
   Piezas de las páginas nuevas. El monolito resolvía todo con style="" inline
   porque era un documento; con veinte páginas eso deja de escalar.
   --------------------------------------------------------------------------- */
.env { max-width: 1220px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.migas {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(16, 35, 58, 0.5); padding: 20px 0 0;
}
.migas a { color: rgba(16, 35, 58, 0.5); }
.migas a:hover { color: #0e5c43; }
.pg-hero { border-bottom: 1px solid #dce4e0; }
.pg-hero .env { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(40px, 5vw, 64px); }
.pg-ceja {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #0e5c43; display: block; margin-bottom: 18px;
}
.pg-hero h1 {
  font-size: clamp(32px, 5.4vw, 62px); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.02; max-width: 19ch; margin: 0 0 22px; text-wrap: balance;
}
.pg-entradilla {
  font-size: clamp(17px, 2vw, 21px); line-height: 1.55;
  color: rgba(16, 35, 58, 0.72); max-width: 58ch; margin: 0;
}
.pg { border-bottom: 1px solid #dce4e0; }
.pg .env { padding-top: clamp(40px, 5vw, 68px); padding-bottom: clamp(40px, 5vw, 68px); }
.pg.claro { background: #ffffff; }
.pg h2 {
  font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; letter-spacing: -0.028em;
  line-height: 1.1; max-width: 24ch; margin: 0 0 20px; text-wrap: balance;
}
.pg h3 {
  font-size: 19px; font-weight: 600; letter-spacing: -0.018em;
  margin: 26px 0 8px;
}
.pg p { font-size: 17px; line-height: 1.6; color: rgba(16, 35, 58, 0.76); max-width: 66ch; margin: 0 0 14px; }
.pg ul, .pg ol { max-width: 66ch; padding-left: 20px; margin: 0 0 16px; }
.pg li { font-size: 17px; line-height: 1.6; color: rgba(16, 35, 58, 0.76); margin-bottom: 8px; }
.pg strong { color: #10233a; font-weight: 600; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.tarjeta { border: 1px solid #dce4e0; border-radius: 14px; padding: 22px; background: #ffffff; }
.tarjeta h3 { margin-top: 0; }
.tarjeta p { font-size: 16px; margin-bottom: 0; }
.tarjeta a { color: #0e5c43; font-weight: 600; }
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; }
table.tabla { border-collapse: collapse; width: 100%; min-width: 560px; background: #ffffff; }
table.tabla th, table.tabla td {
  border: 1px solid #dce4e0; padding: 12px 14px; text-align: left;
  font-size: 15.5px; line-height: 1.5; vertical-align: top;
}
table.tabla th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: #10233a; color: #f6f8f7;
}
table.tabla td:first-child { font-weight: 600; color: #10233a; }
.nota {
  border-left: 3px solid #0e5c43; padding: 4px 0 4px 16px; margin: 0 0 18px;
  color: rgba(16, 35, 58, 0.76); font-size: 16px; line-height: 1.6; max-width: 64ch;
}
.cinta {
  background: #0e5c43; color: #f6f8f7;
}
.cinta .env { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: clamp(36px, 4.5vw, 56px); }
.cinta h2 { color: #f6f8f7; margin-bottom: 14px; }
.cinta p { color: rgba(246, 248, 247, 0.82); }
.boton {
  display: inline-block; background: #10233a; color: #f6f8f7;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 15px 24px; border-radius: 10px; margin-top: 8px;
}
.cinta .boton { background: #f6f8f7; color: #10233a; }
.enlaces-rel {
  display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; margin: 0; list-style: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.enlaces-rel a { color: #0e5c43; font-weight: 600; }
.borrador {
  background: #fff4e2; border: 1px solid #b25e09; border-radius: 12px;
  padding: 16px 18px; margin: 0 0 24px; color: #7a4106; max-width: 66ch;
  font-size: 15.5px; line-height: 1.55;
}