/* Tally — hoja de estilo única.
   Identidad fija: papel y tinta, un solo acento reservado a las acciones, y un único
   recurso gráfico (la línea de corte). Sin modo oscuro, sin imágenes, sin animaciones:
   la calma es el argumento. La versión modernizada añade esquinas suaves, sombras
   discretas, tarjetas y una barra fija, sin un color nuevo. */

@import url("tokens.css?v=336146daee");

/* Los tokens (color, tipos, escala, forma) viven en tokens.css, compartidos con la consola.
   Un @import cuesta una petición más; a cambio, una página nueva no puede olvidarse
   de la mitad de la identidad. */

@font-face{font-family:"Bitter";font-style:normal;font-weight:700;font-display:swap;
  src:url("fuentes/bitter-700.woff2?v=5d92d11e64") format("woff2")}
/* Only the wordmark uses 800: heavy enough to stand beside the tarja's two-module sticks. */
@font-face{font-family:"Bitter";font-style:normal;font-weight:800;font-display:swap;
  src:url("fuentes/bitter-800.woff2?v=0291356be4") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fuentes/public-sans-400.woff2?v=8bfa953ce9") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fuentes/public-sans-600.woff2?v=4ac7d0cd87") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fuentes/plex-mono-400.woff2?v=c36f509c0a") format("woff2")}

*{box-sizing:border-box}

/* ---- saltar al contenido -------------------------------------------- */
.salto{position:absolute;left:-9999px}
.salto:focus{position:static;display:inline-block;margin:12px 0 0 var(--gutter);
  padding:10px 16px;background:var(--accent);color:var(--on-accent);text-decoration:none;
  border-radius:var(--radius-s)}

html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-size:var(--t0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--gutter)}

::selection{background:var(--accent);color:var(--on-accent)}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-0.02em;margin:0}
p{margin:0 0 1em;max-width:62ch}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}

/* ---- el logotipo: palabra + tarja, en horizontal ---------------------- */
/* La tarja (18 × 5 módulos) a la izquierda de la palabra: pie en la línea base, borde
   superior a 0,5em, justo por debajo de la altura de x de Bitter (0,534em, medida en la 700). Palos de 2
   módulos, 1 módulo entre ellos, pie de 3. Módulo = 0,1em: 3 px a 30 px, el mínimo, así que
   la marca no se usa por debajo de 30 px, y los bordes caen en píxeles enteros en múltiplos
   de 10 px. Hueco con la palabra: 4 módulos. `order` coloca la tarja delante de la palabra,
   que el HTML pone primero. */
.marca{
  display:inline-flex;flex-direction:row;align-items:baseline;
  font-size:30px;gap:0.4em;                    /* 4 módulos */
  text-decoration:none;color:inherit;
}
.marca .palabra{
  font-family:var(--display);font-weight:800;font-size:1em;
  letter-spacing:-0.01em;line-height:1;color:var(--ink);
}
.marca svg{display:block;width:1.8em;height:0.5em;order:-1}   /* 18 × 5 módulos */

/* ---- botones ----------------------------------------------------------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ui);font-size:var(--t0);font-weight:600;line-height:1.2;
  padding:16px 28px;min-height:52px;text-decoration:none;cursor:pointer;
  background:var(--accent);color:var(--on-accent);border:1.5px solid var(--accent);
  border-radius:var(--radius-s);box-shadow:var(--shadow-1);
}
.boton::after{content:"→";font-weight:400}
.boton:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.boton-menor{padding:10px 18px;min-height:44px;font-size:15.5px}
.boton-menor::after{content:none}

/* ================= 0. barra fija ======================================= */
/* Lo único que se mueve es el scroll: la barra se queda arriba con la marca y la
   acción, para que pedir empezar esté siempre a un clic. */
.barra{
  position:sticky;top:0;z-index:10;
  background:rgba(250,248,245,.92);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--rule);
}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:72px}

/* ================= 1. portada ========================================= */
.portada{
  background:
    radial-gradient(1200px 520px at 85% -10%, var(--accent-wash), transparent 62%),
    var(--paper);
}

.portada-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);
  gap:64px;align-items:center;padding-block:72px 88px;
}

.portada h1{
  font-size:clamp(36px,5.2vw,var(--t4));line-height:1.06;
  max-width:16ch;margin-bottom:26px;
}
.problema{font-size:var(--t1);line-height:1.5;color:var(--muted);max-width:42ch;
  margin:0 0 20px}
.reclamo{font-size:var(--t1);line-height:1.5;color:var(--ink);max-width:42ch;margin-bottom:18px}
.reclamo-menor{font-size:16px;color:var(--muted);max-width:48ch;margin-bottom:8px}
.reclamo-menor b{font-weight:600;color:var(--ink)}

/* ---- sellos: tres garantías de valor bajo la acción ------------------ */
.sellos{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sellos li{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:999px;
  padding:7px 14px 7px 10px;box-shadow:var(--shadow-1);
}
.sellos li::before{
  content:"";width:18px;height:18px;border-radius:50%;flex:none;
  background:var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%231D5A56' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---- el especimen: la bandeja de entrada ---------------------------- */
.figura-titulo{
  font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:0;
  color:var(--muted);margin-bottom:12px;
}
.bandeja{
  margin:0;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-2);
  font-family:var(--correo);
}
/* Una barra de ventana de correo, sin iconos de marca: tres puntos y nada más. */
.bandeja::before{
  content:"";display:block;height:34px;background:var(--panel);
  border-bottom:1px solid var(--rule);
  background-image:
    radial-gradient(circle at 18px 17px, var(--rule-table) 5px, transparent 5.5px),
    radial-gradient(circle at 36px 17px, var(--rule-table) 5px, transparent 5.5px),
    radial-gradient(circle at 54px 17px, var(--rule-table) 5px, transparent 5.5px);
}
.bandeja-cab{padding:16px 24px 15px;border-bottom:1px solid var(--rule)}
.bandeja-cab .de{font-size:14px;font-weight:700}
.bandeja-cab .dir{font-size:12.5px;color:var(--muted)}
.bandeja-cab .asunto{font-size:15px;margin-top:9px}
.bandeja-cuerpo{padding:22px 24px 24px;font-size:14.5px;line-height:1.55}
.bandeja-cuerpo p{margin:0 0 15px;max-width:none}
/* The email is sent as plain text (resend.ts sends `text:`), so the example shows plain text:
   a URL is underlined the way a mail client shows one, but it is not a button. */
.bandeja-cuerpo .enlace{text-decoration:underline;text-underline-offset:2px;word-break:break-all}

.tercero{margin-top:20px}
.tercero summary{font-family:var(--ui);font-size:15.5px;font-weight:600;cursor:pointer;
  color:var(--ink);padding:4px 0}
.tercero summary:hover{color:var(--accent)}
.tercero .bandeja{margin-top:14px}

.pie-figura{font-size:14px;color:var(--muted);margin-top:16px;max-width:48ch}
.pie-figura b{color:var(--ink);font-weight:600}

/* ---- la línea de corte: el único recurso gráfico -------------------- */
.corte{border:0;border-top:1.5px dashed var(--rule-strong);opacity:.55;margin:0}

/* ================= secciones ========================================= */
.bloque{padding-block:96px}
.bloque.fondo{background:var(--panel)}
.bloque h2{font-size:clamp(28px,3.4vw,var(--t2));line-height:1.15;max-width:22ch;margin-bottom:16px}
.bloque .intro{font-size:var(--t1);color:var(--muted);max-width:58ch;line-height:1.5;margin-bottom:44px}
.bloque .intro:last-child{margin-bottom:0}

/* ---- tarjeta: la unidad de todas las rejillas ------------------------ */
.criterio,.paso,.reglas li{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}

/* ---- los pasos: lo único que sí es una secuencia --------------------- */
.secuencia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:paso}
.paso{padding:26px 26px 28px}
.paso .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;margin-bottom:16px;
  font-family:var(--ui);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;
  color:var(--accent);background:var(--accent-wash);
}
.paso h3{font-family:var(--ui);font-size:var(--th);font-weight:600;letter-spacing:-0.01em;
  line-height:1.25;margin-bottom:8px}
.paso p{font-size:15.5px;color:var(--muted);margin:0;max-width:none}
.secuencia-nota{margin-top:28px;font-size:16px;color:var(--muted);max-width:60ch}

/* ---- criterios ------------------------------------------------------ */
.criterios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.criterio{padding:26px 28px 28px}
.criterio h3{font-family:var(--ui);font-size:var(--th);font-weight:600;letter-spacing:-0.01em;
  line-height:1.25;margin-bottom:8px}
.criterio p{font-size:15.5px;color:var(--muted);margin:0;max-width:none}
.contrapunto{
  margin-top:40px;padding:22px 26px;background:var(--card);
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:var(--radius-s);font-size:16.5px;max-width:64ch;
}

/* ---- reglas: tarjetas con marca de verificación ---------------------- */
.reglas{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.reglas li{padding:22px 22px 24px 58px;line-height:1.5;position:relative}
.reglas li::before{
  content:"";position:absolute;left:20px;top:23px;width:24px;height:24px;border-radius:50%;
  background:var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%231D5A56' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.reglas li b{font-weight:600;display:block;font-size:17.5px;line-height:1.3;margin-bottom:5px}
.reglas li span{color:var(--muted);font-size:15px;display:block}

/* ---- precio: una cifra, y lo que la acompaña -------------------------- */
.precio-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:28px;align-items:stretch}
.precio{
  display:flex;flex-direction:column;gap:6px;padding:34px 32px;
  background:var(--ink);color:var(--paper);border-radius:var(--radius-l);box-shadow:var(--shadow-2);
}
.precio-etiqueta{font-size:15px;font-weight:600;color:#B8B2A6}
.precio-cifra{font-family:var(--display);font-weight:700;font-size:76px;line-height:1;
  letter-spacing:-0.03em;margin:6px 0 4px}
.precio-que{font-size:var(--t1);line-height:1.35;max-width:22ch}
.precio-sin{font-size:15.5px;color:#B8B2A6;margin:10px 0 26px}
.precio .boton{margin-top:auto;align-self:stretch;background:#46988F;border-color:#46988F;color:var(--ink)}
.precio .boton:hover{background:#57A39D;border-color:#57A39D}
.precio :focus-visible{outline:2px solid #46988F;outline-offset:3px}
.precio-grid .reglas{grid-template-columns:1fr;align-content:start}

/* ---- preguntas ------------------------------------------------------ */
.preguntas{max-width:820px;display:flex;flex-direction:column;gap:12px}
.preguntas details{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-1)}
.preguntas details[open]{border-color:var(--rule-table)}
.preguntas summary{
  cursor:pointer;padding:20px 56px 20px 24px;position:relative;
  font-weight:600;font-size:var(--t0);list-style:none;
}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{
  content:"";position:absolute;right:24px;top:50%;
  width:12px;height:1.5px;background:var(--ink);
}
.preguntas summary::before{
  content:"";position:absolute;right:29.25px;top:50%;
  width:1.5px;height:12px;background:var(--ink);margin-top:-5.25px;
}
.preguntas details[open] summary::before{display:none}
.preguntas details p{padding:0 56px 22px 24px;color:var(--muted);margin:0;max-width:none}
.preguntas details p+p{margin-top:-8px}

/* ---- la llamada: el elemento más visible de la página --------------- */
.llamada{background:var(--ink);color:var(--paper);padding-block:96px}
.llamada h2{color:var(--paper);max-width:18ch;font-size:clamp(30px,3.8vw,var(--t3));
  line-height:1.12;margin-bottom:16px}
.llamada .intro{color:#B8B2A6;font-size:var(--t1);line-height:1.5;
  max-width:44ch;margin-bottom:34px}
.llamada-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:64px;align-items:start}
.llamada .boton{background:#46988F;border-color:#46988F;color:var(--ink)}
.llamada .boton:hover{background:#57A39D;border-color:#57A39D}
.llamada-nota{margin-top:22px;font-size:15.5px;color:#B8B2A6;max-width:46ch}

/* ---- el formulario: una tarjeta oscura sobre la llamada ---------------- */
.cuestionario-form{display:flex;flex-direction:column;gap:18px;
  background:#2B2924;border:1px solid #4A463F;border-radius:var(--radius-l);padding:30px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:16px;font-weight:600;line-height:1.35;color:var(--paper)}
.campo .pista{font-size:14px;color:#B8B2A6;line-height:1.4}

/* A filled box with a real border, not an underline on transparent: the block must read
   as something you fill in. 1px of #8C867C on #2B2924 clears WCAG 2.2 SC 1.4.11. */
.campo input,.campo select{
  font-family:var(--ui);font-size:17px;color:var(--paper);
  background:var(--ink);border:1px solid #8C867C;
  padding:13px 14px;width:100%;border-radius:var(--radius-s);
  -webkit-appearance:none;appearance:none;
}
.campo input::placeholder{color:#9A9388}
/* appearance:none removes the native arrow, so a select was indistinguishable from an
   input — on the field that separates consumers from companies. Draw one back. */
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B8B2A6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  background-size:10px 6px;padding-right:36px;
}
/* the empty option is required, so :invalid greys it like a placeholder */
.campo select:invalid{color:#7C766C}
.campo input:focus,.campo select:focus{outline:0;border-color:#46988F;box-shadow:0 0 0 3px rgba(70,152,143,.25)}
/* The global :focus-visible is --accent #1D5A56, which on this section's --ink ground is
   2.05:1 — under the 3:1 SC 1.4.11 asks. #46988F is 4.76:1 here, and the same value also
   lifts this section's button and link colour. */
.llamada :focus-visible{outline:2px solid #46988F;outline-offset:3px}
.campo select option{background:var(--ink);color:var(--paper)}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cuestionario-form .boton{margin-top:6px;width:100%;font-size:17px}

.llamada a{color:#46988F}

/* ---- una salida más, repetida a media página -------------------------- */
.salida{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:40px}
.portada .salida{margin-top:28px}
.salida span{font-size:15.5px;color:var(--muted)}

/* ---- quiénes somos ----------------------------------------------------- */
.quienes-somos{margin-bottom:30px;padding:22px 24px;background:#2B2924;
  border:1px solid #4A463F;border-radius:var(--radius)}
.quienes-somos h3{font-family:var(--ui);font-size:var(--t0);font-weight:600;
  letter-spacing:0;color:var(--paper);margin-bottom:8px}
.quienes-somos p{font-size:15.5px;line-height:1.5;color:#B8B2A6;max-width:46ch;margin:0 0 8px}
.quienes-somos p:last-child{margin-bottom:0}
.quienes-somos b{color:var(--paper);font-weight:600}

.promesa{margin:0;font-size:14.5px;line-height:1.5;color:#B8B2A6;max-width:44ch}

/* ---- deudores -------------------------------------------------------- */
.deudores{padding-block:64px}
.deudores .wrap>*{max-width:760px}
.deudores h2{font-size:var(--t1);margin-bottom:12px;max-width:30ch}
.deudores p{font-size:16px;max-width:64ch;color:var(--muted)}

/* ---- hueco pendiente: nada con esta marca puede publicarse ----------- */
.hueco{
  font-family:var(--mono);font-size:13px;line-height:1.5;
  color:var(--clay);background:transparent;
  border:1.5px dashed var(--clay);padding:10px 14px;border-radius:var(--radius-s);
  display:block;max-width:62ch;margin:18px 0;
}
.hueco::before{content:"PENDIENTE · "}
span.hueco{display:inline-block;margin:0;padding:3px 8px;font-size:12.5px}
.llamada .hueco{color:#E8A08C;border-color:#E8A08C}

/* ================= páginas legales =================================== */
.legal{padding-block:40px 0;max-width:820px}
.legal h1{font-size:clamp(28px,4vw,var(--t3));line-height:1.15;margin:30px 0 8px;max-width:22ch}
.legal h2{font-size:var(--t1);margin:44px 0 10px;line-height:1.25}
.legal p,.legal li{font-size:16.5px}
.legal ul{max-width:64ch;padding-left:20px}
.legal li{margin-bottom:8px}
.fecha{font-size:15px;color:var(--muted);margin:0}
.fecha+.hueco{margin-top:24px}
.datos{border-collapse:collapse;width:100%;max-width:64ch;margin:14px 0 0;font-size:16px}
.datos th{text-align:left;font-weight:600;padding:10px 18px 10px 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.datos td{padding:10px 0;border-bottom:1px solid var(--rule);vertical-align:top}

/* ================= pie =============================================== */
.pie{padding-block:48px 64px;border-top:1px solid var(--rule)}
.pie .marca{font-size:30px}
.enlaces{display:flex;flex-wrap:wrap;gap:10px 26px;margin:24px 0 0;font-size:16px}
.sin-rastro{font-size:15px;color:var(--muted);margin:16px 0 0;max-width:58ch}

/* ================= adaptación ======================================== */
@media (max-width:1000px){
  .reglas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .portada-grid{grid-template-columns:1fr;gap:44px;padding-block:44px 64px}
  .llamada-grid{grid-template-columns:1fr;gap:36px}
  .precio-grid{grid-template-columns:1fr}
  :root{--th:19px}
  .criterios{grid-template-columns:1fr;gap:14px}
  .salida .boton{width:100%}
  .secuencia{grid-template-columns:1fr;gap:14px}
  .reglas{grid-template-columns:1fr;gap:12px}
}
@media (max-width:620px){
  :root{--t0:16px;--t1:18.5px;--t2:26px;--t3:30px;--t4:38px;--gutter:20px}
  .bloque,.llamada{padding-block:60px}
  .barra-in{min-height:64px}
  .barra .marca{font-size:30px}
  .boton-menor{padding:9px 14px;font-size:14.5px}
  .boton{width:100%}
  .barra .boton{width:auto}
  .precio-cifra{font-size:64px}
  .cuestionario-form{padding:22px}
}

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