/* ==================================================================
   Hecho Hoy — hoja de estilo única (rediseño 8 oct 2026).
   Dirección: "hoja impresa del día". Estilo Voiceless (blanco y negro
   puro, condensada pesada en mayúsculas, bordes rectos, bloques a sangre)
   + lo limpio de BTC2 v2 (metadatos y cifras en mono, sin tarjetas).
   Escala de espaciado: 4 8 12 16 24 32 48 64 96 128. Nada fuera de ahí.
   UN acento: verde resaltador. Solo como RELLENO con texto negro encima
   (como marcador sobre papel); nunca como color de texto sobre blanco.
   Dos familias: Archivo (con eje de ancho) + IBM Plex Mono.
   Cero border-radius.
   ================================================================== */

:root {
  /* espaciado */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px;

  /* color: dos tintas + un hueso + un acento */
  --negro:  #0A0A0A;
  --blanco: #FFFFFF;
  --hueso:  #F2F2F0;
  --gris:   #555555;   /* texto secundario sobre blanco/hueso: 7.4:1 */
  --gris-n: #A3A3A3;   /* texto secundario sobre negro: 8:1 */
  --linea-n:#2A2A2A;   /* reglas sobre negro */
  --acento:     #D4FF3A;
  --acento-osc: #BDE824;  /* mismo tono, menos luz: hover */

  /* tipografía */
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
}

body {
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--e5); }

/* Titulares: condensada pesada en mayúsculas. El contraste con el
   cuerpo normal ES el diseño. */
h1, h2, .marca, .precio-num, .ej-nombre, .lista-pasos h3 {
  font-family: var(--sans);
  font-variation-settings: "wdth" 66;
  font-weight: 900;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.01em;
}

mark {
  background: var(--acento);
  color: var(--negro);
  padding: 0 .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--negro); color: var(--blanco);
  padding: var(--e3) var(--e4); z-index: 10;
}
.saltar:focus { left: var(--e4); top: var(--e4); }

:focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; }
.ejemplos :focus-visible, .cinta :focus-visible { outline-color: var(--acento); }

/* metadatos en mono: kicker, números de sección, notas chicas */
.kicker, .num-seccion, .reloj, .vista-url, .ej-rubro, .ej-link, .plan-nombre,
.plan-tag, .paso-n, .lang, .disp, .campo label, .campo legend, .cinta, .micro {
  font-family: var(--mono);
}

/* ---------------- botones ---------------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-variation-settings: "wdth" 100;
  font-size: 16px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  padding: var(--e4) var(--e6);
  border-radius: 0;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-primario { background: var(--acento); color: var(--negro); box-shadow: inset 0 0 0 2px var(--negro); }
.btn-invertido { background: var(--negro); color: var(--blanco); }
.btn-secundario { background: transparent; color: var(--negro); box-shadow: inset 0 0 0 2px var(--negro); }
.btn-ancho { display: block; text-align: center; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn-primario:hover { background: var(--acento-osc); }
  .btn-invertido:hover { background: #262626; }
  .btn-secundario:hover { background: var(--negro); color: var(--blanco); }
}
.plan-destacado .btn-secundario { color: var(--blanco); box-shadow: inset 0 0 0 2px var(--blanco); }

/* ---------------- cinta de vista previa ---------------- */
.cinta { background: var(--negro); color: var(--acento); font-size: 12px; font-weight: 500;
         letter-spacing: .12em; text-transform: uppercase;
         text-align: center; padding: var(--e2) var(--e4); }

/* ---------------- nav ---------------- */
.nav { position: sticky; top: 0; z-index: 5; background: var(--blanco);
       border-bottom: 2px solid var(--negro); }
.nav-in { display: flex; justify-content: space-between; align-items: center; gap: var(--e5);
          padding-top: var(--e3); padding-bottom: var(--e3); }
.marca { font-size: 26px; }
.reloj { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
         font-variant-numeric: tabular-nums; margin-right: auto; padding-left: var(--e5);
         border-left: 2px solid var(--negro); line-height: 1.2; }
.reloj:empty { display: none; }
.nav-der { display: flex; align-items: center; gap: var(--e4); }
.nav-cta { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
           color: var(--negro); text-decoration: none;
           background-image: linear-gradient(var(--acento), var(--acento));
           background-size: 100% 6px; background-repeat: no-repeat; background-position: 0 88%;
           transition: background-size 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-cta:hover { background-size: 100% 100%; } }
.lang { font-size: 12px; font-weight: 500; letter-spacing: .1em;
        color: var(--negro); background: none; border: 2px solid var(--negro); border-radius: 0;
        padding: var(--e1) var(--e2); cursor: pointer;
        transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.lang:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .lang:hover { background: var(--negro); color: var(--blanco); } }

/* ---------------- hero ---------------- */
.hero { padding: var(--e9) 0 var(--e8); }
.kicker { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
          color: var(--gris); margin-bottom: var(--e5);
          display: flex; align-items: center; gap: var(--e3); }
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--negro); flex-shrink: 0; }
h1 { font-size: clamp(56px, 8.5vw, 124px); }
.hero-pie { display: flex; justify-content: space-between; align-items: flex-end;
            gap: var(--e7); margin-top: var(--e7); padding-top: var(--e5);
            border-top: 2px solid var(--negro); }
.bajada { font-size: clamp(18px, 2.2vw, 21px); color: var(--gris); max-width: 46ch; }
.hero-accion { flex-shrink: 0; }
@media (max-width: 900px) {
  .hero-pie { flex-direction: column; align-items: stretch; gap: var(--e6); }
}
.micro { font-size: 12px; letter-spacing: .04em; color: var(--gris); margin-top: var(--e3); }
.micro.centro { text-align: center; }

/* ---------------- ticker ---------------- */
.ticker { background: var(--negro); color: var(--blanco); overflow: hidden;
          border-top: 2px solid var(--negro); padding: var(--e4) 0; }
.ticker-in { display: flex; width: max-content; animation: correr 40s linear infinite; }
.ticker span { font-variation-settings: "wdth" 66; font-weight: 900; font-size: 28px;
               text-transform: uppercase; line-height: 1; padding: 0 var(--e5);
               display: flex; align-items: center; gap: var(--e5); }
.ticker span::after { content: ""; width: 12px; height: 12px; background: var(--acento); }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-in { animation: none; } }

/* ---------------- encabezados de sección ---------------- */
.num-seccion { font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--gris);
               margin-bottom: var(--e4); display: flex; align-items: center; gap: var(--e3); }
.num-seccion::before { content: ""; width: 34px; height: 2px; background: currentColor; }
h2 { font-size: clamp(44px, 7vw, 88px); max-width: 14ch; }
.seccion-sub { color: var(--gris); max-width: 52ch; font-size: 18px;
               margin-top: var(--e4); margin-bottom: var(--e7); }

/* ---------------- probador ---------------- */
.probador { padding: var(--e9) 0; background: var(--hueso); border-top: 2px solid var(--negro); }
.pb { display: grid; grid-template-columns: 360px 1fr; gap: var(--e7); align-items: start; }

.pb-form { display: flex; flex-direction: column; gap: var(--e6); }
.campo { display: flex; flex-direction: column; gap: var(--e2); border: none; min-width: 0; }
.campo label, .campo legend { font-size: 12px; font-weight: 500; letter-spacing: .14em;
                              text-transform: uppercase; color: var(--gris); padding: 0;
                              margin-bottom: var(--e1); }
.campo input {
  font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--negro);
  background: transparent; border: none; border-radius: 0;
  border-bottom: 2px solid var(--negro);
  padding: var(--e2) 0;
  transition: border-color 160ms ease;
}
.campo input:focus { outline: none; border-bottom-color: var(--negro);
                     box-shadow: 0 4px 0 0 var(--acento); }
.campo input::placeholder { color: #8A8A8A; font-weight: 400; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); }

.tipos { display: flex; flex-direction: column; border-top: 2px solid var(--negro); }
.tipo {
  text-align: left; font-family: var(--sans); cursor: pointer;
  background: transparent; border: none; border-radius: 0;
  border-bottom: 2px solid var(--negro);
  padding: var(--e3) var(--e3);
  transition: background-color 160ms ease, color 160ms ease;
}
.tipo b { display: block; font-size: 16px; font-weight: 800; text-transform: uppercase;
          letter-spacing: .02em; color: inherit; }
.tipo span { display: block; font-size: 14px; color: var(--gris); margin-top: var(--e1); }
@media (hover: hover) and (pointer: fine) { .tipo:hover { background: var(--blanco); } }
.tipo[aria-checked="true"] { background: var(--negro); color: var(--blanco); }
.tipo[aria-checked="true"] span { color: var(--gris-n); }
.tipo[aria-checked="true"] b::after { content: ""; display: inline-block; width: 10px; height: 10px;
                                      background: var(--acento); margin-left: var(--e2); }

.colores { display: flex; gap: var(--e3); flex-wrap: wrap; }
.color {
  width: 40px; height: 40px; border-radius: 0; border: none; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 2px var(--negro);
  transition: transform 160ms var(--ease-out), box-shadow 160ms ease;
}
.color:active { transform: scale(.94); }
.color[aria-checked="true"] { box-shadow: 0 0 0 2px var(--negro), 0 0 0 5px var(--hueso), 0 0 0 7px var(--negro); }

/* vista previa: una ventana de navegador recta, barra negra */
.pb-vista { position: sticky; top: 88px; }
.vista-barra { display: flex; justify-content: space-between; align-items: center;
               gap: var(--e4); background: var(--negro); padding: var(--e2) var(--e2) var(--e2) var(--e4); }
.vista-url { font-size: 12px; letter-spacing: .04em; color: var(--blanco);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             display: flex; align-items: center; gap: var(--e2); }
.vista-url::before { content: ""; width: 8px; height: 8px; background: var(--acento); flex-shrink: 0; }
.vista-disp { display: flex; gap: var(--e1); flex-shrink: 0; }
.disp { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
        color: var(--gris-n); background: none; border: none; border-radius: 0;
        padding: var(--e2) var(--e3); cursor: pointer;
        transition: background-color 160ms ease, color 160ms ease; }
.disp.on { background: var(--acento); color: var(--negro); }

.vista-marco { background: var(--blanco); border: 2px solid var(--negro); border-top: none;
               height: 620px; margin-bottom: var(--e4); display: flex; justify-content: center; overflow: hidden; }
.vista-marco iframe { width: 100%; height: 100%; border: none; display: block; background: #fff; }
.vista-marco.celu { background: var(--hueso); }
.vista-marco.celu iframe { width: 390px; max-width: 100%; border-left: 2px solid var(--negro);
                           border-right: 2px solid var(--negro); }

/* ---------------- planes ---------------- */
.precio { padding: var(--e9) 0; border-top: 2px solid var(--negro); }
.planes { display: grid; grid-template-columns: 1fr 1fr;
          margin-top: var(--e7); border: 2px solid var(--negro); }
.plan { padding: var(--e7); display: flex; flex-direction: column; background: var(--blanco);
        transition: box-shadow 160ms ease; }
.plan + .plan { border-left: 2px solid var(--negro); }
.plan .incluye { flex: 1; }
.plan-destacado { background: var(--negro); color: var(--blanco); }
.plan-nombre { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
               color: var(--gris); display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.plan-destacado .plan-nombre { color: var(--gris-n); }
.plan-tag { font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--negro);
            background: var(--acento); padding: var(--e1) var(--e2); }
.precio-num { font-size: clamp(72px, 11vw, 132px); margin-top: var(--e4);
              font-variant-numeric: tabular-nums; }
.precio-mes { font-size: .3em; font-variation-settings: "wdth" 100; font-weight: 600;
              letter-spacing: 0; text-transform: none; margin-left: var(--e1); color: var(--gris); }
.plan-destacado .precio-mes { color: var(--gris-n); }
.precio-nota { color: var(--gris); font-size: 16px; margin-top: var(--e3); }
.plan-destacado .precio-nota { color: var(--gris-n); }
.incluye { list-style: none; margin: var(--e6) 0; display: flex; flex-direction: column; }
.incluye li { position: relative; padding: var(--e3) 0 var(--e3) var(--e5); font-size: 16px;
              border-top: 1px solid #D9D9D6; }
.plan-destacado .incluye li { border-top-color: var(--linea-n); }
.incluye li::before { content: ""; position: absolute; left: 0; top: 21px;
                      width: 10px; height: 10px; background: var(--negro); }
.plan-destacado .incluye li::before { background: var(--acento); }
.plan[aria-checked="true"] { box-shadow: inset 0 0 0 6px var(--acento); }
.precio .micro { margin-top: var(--e4); }
.compara { font-size: 20px; font-weight: 700; margin-top: var(--e7); max-width: 40ch; line-height: 1.35; }

.honesto { margin-top: var(--e8); max-width: 68ch; }
.honesto h3 { font-variation-settings: "wdth" 66; font-weight: 900; text-transform: uppercase;
              font-size: 36px; line-height: .95; }
.honesto > p { color: var(--gris); margin-top: var(--e2); }
.honesto ul { list-style: none; margin-top: var(--e5); counter-reset: no; border-top: 2px solid var(--negro); }
.honesto li { color: var(--gris); padding: var(--e4) 0 var(--e4) var(--e7); position: relative;
              border-bottom: 1px solid #D9D9D6; counter-increment: no; }
.honesto li::before { content: counter(no, decimal-leading-zero); position: absolute; left: 0; top: var(--e4);
                      font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--negro);
                      line-height: 2.2; }
.honesto strong { color: var(--negro); }

/* ---------------- ejemplos: bloque negro a sangre ---------------- */
.ejemplos { padding: var(--e9) 0; background: var(--negro); color: var(--blanco); }
.ejemplos .num-seccion, .ejemplos .seccion-sub { color: var(--gris-n); }
.ej-grid { display: flex; flex-direction: column; margin-top: var(--e7); border-top: 1px solid var(--linea-n); }
.ej { display: grid; grid-template-columns: 220px 1fr auto; gap: var(--e2) var(--e6); align-items: baseline;
      text-decoration: none; color: var(--blanco); padding: var(--e6) 0;
      border-bottom: 1px solid var(--linea-n); position: relative; }
.ej-rubro { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-n); }
.ej-nombre { font-size: clamp(36px, 5vw, 64px); grid-column: 2; grid-row: 1;
             transition: transform 250ms var(--ease-out); }
.ej-nota { font-size: 16px; color: var(--gris-n); grid-column: 2; max-width: 52ch; }
.ej-link { font-size: 12px; color: var(--gris-n); grid-column: 3; grid-row: 1; white-space: nowrap; }
.ej-link::after { content: " \2197"; color: var(--acento); }
@media (hover: hover) and (pointer: fine) {
  .ej:hover .ej-nombre { transform: translateX(var(--e3)); }
  .ej:hover .ej-link { color: var(--blanco); }
}

/* ---------------- pasos ---------------- */
.pasos { padding: var(--e9) 0; }
.lista-pasos { list-style: none; margin-top: var(--e7);
               display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--negro); }
.lista-pasos li { padding: var(--e5) var(--e5) var(--e5) 0; }
.lista-pasos li + li { padding-left: var(--e5); border-left: 2px solid var(--negro); }
.paso-n { display: block; font-family: var(--sans); font-variation-settings: "wdth" 66; font-weight: 900;
          font-size: 96px; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--negro);
          margin-bottom: var(--e4); }
.lista-pasos li:last-child .paso-n { color: var(--acento); }
.lista-pasos h3 { font-size: 30px; }
.lista-pasos p { color: var(--gris); font-size: 16px; margin-top: var(--e3); }

/* ---------------- faq ---------------- */
.faq { padding: var(--e9) 0; background: var(--hueso); border-top: 2px solid var(--negro); }
.faq h2 { margin-bottom: var(--e7); }
.faq details { border-top: 2px solid var(--negro); max-width: 860px; }
.faq details:last-of-type { border-bottom: 2px solid var(--negro); }
.faq summary { font-size: 20px; font-weight: 700; cursor: pointer; list-style: none;
               padding: var(--e5) 0;
               display: flex; justify-content: space-between; align-items: center; gap: var(--e4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 24px; font-weight: 400;
                      width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0;
                      transition: transform 200ms var(--ease-out), background-color 160ms ease; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--acento); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover::after { background: var(--acento); } }
.faq details p { color: var(--gris); padding-bottom: var(--e5); max-width: 68ch; }

/* ---------------- cierre: el acento a sangre, una sola vez ---------------- */
.cierre { background: var(--acento); color: var(--negro); padding: var(--e10) 0;
          border-top: 2px solid var(--negro); }
.cierre h2 { font-size: clamp(64px, 12vw, 168px); max-width: none; }
.cierre p { font-size: 20px; margin-top: var(--e4); max-width: 40ch; }
.cierre .btn { margin-top: var(--e7); }

/* ---------------- pie ---------------- */
.pie { padding: var(--e6) 0; background: var(--negro); color: var(--blanco); }
.pie-in { display: flex; justify-content: space-between; align-items: center;
          gap: var(--e4); flex-wrap: wrap; }
.pie span { font-variation-settings: "wdth" 66; font-weight: 900; text-transform: uppercase; font-size: 22px; }
.pie a { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
         color: var(--acento); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { text-decoration: underline; } }

.h-inline { font-variant-numeric: tabular-nums; }

/* ==================================================================
   Móvil — una sola columna, el preview debajo de los controles.
   ================================================================== */
@media (max-width: 900px) {
  .pb { grid-template-columns: 1fr; gap: var(--e6); }
  .pb-vista { position: static; }
  .vista-marco { height: 480px; }
  .lista-pasos { grid-template-columns: 1fr 1fr; }
  .lista-pasos li:nth-child(3) { border-left: none; padding-left: 0; }
  .lista-pasos li:nth-child(n+3) { border-top: 2px solid var(--negro); }
  .ej { grid-template-columns: 1fr; }
  .ej-nombre, .ej-nota, .ej-link { grid-column: 1; grid-row: auto; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 var(--e4); }
  .reloj { display: none; }
  .nav-cta { display: none; }
  .hero { padding: var(--e8) 0 var(--e7); }
  .probador, .precio, .pasos, .faq, .ejemplos { padding: var(--e8) 0; }
  .cierre { padding: var(--e9) 0; }
  .planes { grid-template-columns: 1fr; }
  .plan { padding: var(--e6) var(--e5); }
  .plan + .plan { border-left: none; border-top: 2px solid var(--negro); }
  .dos { grid-template-columns: 1fr; }
  .hero .btn, .cierre .btn { display: block; text-align: center; }
  .ticker span { font-size: 22px; }
  .lista-pasos { grid-template-columns: 1fr; }
  .lista-pasos li, .lista-pasos li + li { padding: var(--e5) 0; border-left: none; }
  .lista-pasos li + li { border-top: 2px solid var(--negro); }
  .paso-n { font-size: 72px; }
  .vista-barra { padding-left: var(--e3); }
}