/* =============================================================================
 * salvatudominio.cl — hoja de estilo unica
 *
 * Sigue el estandar del portafolio fijado en gobernia.cl (24-ago-2026):
 * CSS propio servido desde el mismo origen, sin CDN, sin tipografias remotas y
 * sin analitica. No es una preferencia estetica: la CSP de netlify.toml es
 * `default-src 'self'` y cualquier recurso externo quedaria bloqueado.
 *
 * POR QUE NO SE USA TAILWIND POR CDN
 * hmlegal.cl lo carga desde cdn.tailwindcss.com. Aqui no se puede: ese sitio
 * no tiene CSP restrictiva y este si. Ademas el CDN de Tailwind compila en el
 * navegador, lo que exige 'unsafe-eval'. Se descarto.
 *
 * TIPOGRAFIA
 * Pila del sistema. Inter va primero por continuidad con el resto del
 * portafolio, pero NO se descarga: si el visitante no la tiene, cae en la
 * tipografia del sistema y la pagina se ve igual de bien.
 *
 * -----------------------------------------------------------------------------
 * LA PALETA, Y POR QUE ES ESTA
 *
 * El sitio se llamaba salvatudominio.cl y era azul marino sobre gris frio: correcto
 * y distante, el aspecto de un estudio que le va a cobrar caro. El encargo
 * cambio a un tono mas cercano, asi que la paleta cambio con el:
 *
 *   - el fondo pasa de gris frio (#f5f4f0) a crema calido (#faf6ef). Es el
 *     cambio que mas se nota y el que menos se ve: baja la temperatura de toda
 *     la pagina sin que nadie sepa por que;
 *   - el azul institucional pasa a violeta indigo (#5546bd), que es amable sin
 *     ser infantil y no lo usa ningun otro sitio del portafolio;
 *   - se anade un ambar (--acento) para los guinos y los detalles ludicos.
 *
 * CADA COLOR EN SU SITIO, QUE ES LA UNICA REGLA QUE NO SE NEGOCIA:
 *
 *   --marca    violeta. Solo sobre fondo claro: da 6,4:1 sobre --paper.
 *              Sobre fondo oscuro desaparece; ahi va --marca-claro (7,8:1).
 *   --alerta   naranja quemado. RESERVADO para plazos y advertencias. Si se usa
 *              de adorno pierde su funcion, que es que el visitante distinga de
 *              un vistazo lo urgente de lo informativo.
 *   --acento   ambar. Para el tono ludico: senales, numeros, subrayados. NUNCA
 *              para texto corrido ni para nada que haya que leer: sobre crema
 *              no llega a 4,5:1.
 *   --ok       verde. Solo para lo que efectivamente salio bien.
 * ========================================================================== */

:root {
  --tinta: #1e1b33;
  --tinta-suave: #3c3a5c;
  --paper: #faf6ef;
  --paper-2: #f0e9dd;
  --white: #fffdf8;
  --marca: #5546bd;
  --marca-oscuro: #3f3494;
  --marca-claro: #b3a8f5;
  --alerta: #bf4519;
  --alerta-fondo: #fdeee3;
  --alerta-claro: #f0b48d;
  --ok: #17795e;
  --ok-fondo: #e2f2ec;
  --acento: #e0921f;
  --acento-fondo: #fdf0d9;
  --line: #ded5c6;
  --muted: #6b6480;
  --radius-sm: .6rem;
  --radius: 1rem;
  --radius-lg: 1.6rem;
  --shadow: 0 22px 60px rgba(18, 27, 38, .10);
  --max: 1160px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--tinta);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.032em; text-wrap: balance; }
p { text-wrap: pretty; }

/* Respeta a quien pidio menos animacion en su sistema. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- estructura ---------------------------------------------------------- */

.skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 999;
  background: var(--marca); color: var(--white); padding: .8rem 1rem;
  border-radius: var(--radius-sm); font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.container { width: min(calc(100% - 2.25rem), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 2.25rem), 780px); margin-inline: auto; }
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section-compact { padding: 2.75rem 0; }
.surface { background: var(--white); }
.surface-alt { background: var(--paper-2); }
.dark { background: var(--tinta); color: var(--white); }
.dark p, .dark li { color: #ddd8ec; }
.text-center { text-align: center; }
.max-760 { max-width: 760px; }
.max-900 { max-width: 900px; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* --- cabecera ------------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  backdrop-filter: blur(14px);
}
.header-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-name { font-size: 1.2rem; font-weight: 900; letter-spacing: -.045em; display: block; }
.brand-name span { color: var(--marca); }
.brand-backing { display: block; color: var(--muted); font-size: .63rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
.site-nav { display: flex; align-items: center; gap: 1.05rem; }
.site-nav a { color: var(--tinta-suave); font-size: .855rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--marca); }
/* ---------------------------------------------------------------------------
 * GUARDA DE COLOR DE LOS BOTONES
 *
 * Un boton casi siempre es un <a>, y cualquier regla de contexto que pinte los
 * enlaces —`.site-nav a`, `.article-cuerpo a`, `.lista-espera a`— tiene
 * especificidad 0,2,0 y le gana a `.button`, que es 0,1,0. Resultado: el texto
 * del boton toma el color de enlace y desaparece sobre su propio fondo.
 *
 * Paso dos veces antes de detectarlo:
 *   - en el menu, texto gris sobre violeta: 1,54:1;
 *   - en el pie de los articulos y de las condiciones, violeta sobre violeta:
 *     ratio 1, literalmente invisible.
 *
 * Por eso la guarda es una sola y lista los contextos, en vez de parchear cada
 * uno cuando aparece. Si se anade un contexto que pinte enlaces, va aqui.
 * ------------------------------------------------------------------------- */
.site-nav a.button,
.article-cuerpo a.button,
.lista-espera a.button,
.prosa a.button { color: var(--white); }
.site-nav a.button:hover,
.site-nav a.button[aria-current="page"] { color: var(--white); }

.article-cuerpo a.button-outline,
.prosa a.button-outline { color: var(--tinta); }
.dark .article-cuerpo a.button-outline,
.dark .prosa a.button-outline { color: var(--white); }
.menu-button { display: none; border: 1px solid var(--line); background: var(--white); border-radius: var(--radius-sm); padding: .5rem .7rem; color: var(--tinta); font-weight: 800; }

@media (max-width: 900px) {
  .menu-button { display: inline-flex; align-items: center; gap: .4rem; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: .5rem 1.1rem 1.1rem; box-shadow: var(--shadow);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a { padding: .85rem .2rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .site-nav .button { margin-top: .9rem; border-bottom: 0; }
}

/* --- aviso de independencia ---------------------------------------------
 * No va solo en el pie. El riesgo real de este dominio es que alguien crea
 * que es un servicio de NIC Chile, y para desmentirlo hay que decirlo donde
 * se ve, no donde nadie mira. Va bajo la cabecera y ademas en el pie.
 * ------------------------------------------------------------------------ */
.aviso-independencia {
  background: var(--tinta); color: #d8d2e8;
  font-size: .78rem; letter-spacing: .01em; text-align: center;
  padding: .55rem 1rem;
}
.aviso-independencia strong { color: var(--white); font-weight: 700; }

/* --- botones ------------------------------------------------------------- */

.button {
  display: inline-flex; justify-content: center; align-items: center; gap: .5rem;
  min-height: 48px; padding: .78rem 1.25rem; border: 1px solid transparent;
  border-radius: .75rem; background: var(--tinta); color: var(--white);
  text-decoration: none; font-weight: 800; letter-spacing: -.01em;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--marca) 55%, transparent); outline-offset: 3px;
}
.button-primary { background: var(--marca); }
.button-primary:hover { background: var(--marca-oscuro); }
.button-alerta { background: var(--alerta); }
.button-outline { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.dark .button-outline { color: var(--white); border-color: #6f688f; }
.button-small { min-height: 40px; padding: .55rem .9rem; font-size: .86rem; }
.button[disabled] { opacity: .55; cursor: wait; transform: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .9rem;
  color: var(--marca); font-weight: 850; font-size: .75rem;
  letter-spacing: .11em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }
.dark .eyebrow { color: var(--marca-claro); }

/* --- hero ---------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding: clamp(3.25rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero::after {
  content: ""; position: absolute; width: 40rem; height: 40rem; right: -19rem; top: -17rem;
  border: 1px solid color-mix(in srgb, var(--marca) 28%, transparent); border-radius: 50%;
  pointer-events: none;
}
.hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); margin-bottom: 1.1rem; }
.hero .bajada { font-size: clamp(1.02rem, 2.1vw, 1.2rem); color: var(--tinta-suave); max-width: 62ch; }

/* --- rutas (las dos puertas de entrada) ---------------------------------- */

.rutas { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 2.4rem; }
.ruta {
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; text-decoration: none; box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease;
}
.ruta:hover { transform: translateY(-3px); border-color: var(--marca); }
.ruta h2 { font-size: 1.28rem; margin-bottom: 0; letter-spacing: -.03em; }
.ruta p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.ruta .ruta-cta { color: var(--marca); font-weight: 800; font-size: .9rem; margin-top: auto; padding-top: .6rem; }
.ruta-icono { width: 40px; height: 40px; color: var(--marca); }

/* --- franja de plazo ----------------------------------------------------- */

.franja-plazo {
  background: var(--alerta-fondo); border-top: 1px solid var(--alerta-claro);
  border-bottom: 1px solid var(--alerta-claro);
}
.franja-plazo .container { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; padding-block: 1.15rem; }
.franja-plazo p { margin-bottom: 0; color: #7a3210; font-weight: 600; font-size: .96rem; }
.franja-plazo .etiqueta {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  background: var(--alerta); color: var(--white); font-weight: 800;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 999px;
}

/* --- tarjetas y rejillas ------------------------------------------------- */

.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
}
.card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.dark .card { background: #282544; border-color: #454168; }

.numero-paso {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; margin-bottom: .8rem;
  background: var(--marca); color: var(--white); font-weight: 900; font-size: .9rem;
}

/* --- cifras -------------------------------------------------------------- */

.cifra { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.cifra .valor { display: block; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -.05em; color: var(--marca); line-height: 1; }
.cifra .rotulo { display: block; margin-top: .6rem; font-size: .9rem; color: var(--tinta-suave); }
.dark .cifra { background: #282544; border-color: #454168; }
.dark .cifra .valor { color: var(--marca-claro); }
.dark .cifra .rotulo { color: #cec8e2; }

.nota-metodo {
  font-size: .82rem; color: var(--muted); border-left: 3px solid var(--line);
  padding-left: .9rem; margin-top: 1.6rem;
}
.dark .nota-metodo { color: #a79fc2; border-color: #454168; }

/* --- tabla --------------------------------------------------------------- */

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .93rem; }
caption { text-align: left; padding: 1rem 1.1rem 0; color: var(--muted); font-size: .85rem; }
th, td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--paper-2); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-suave); }
tbody tr:last-child td { border-bottom: 0; }
td.precio { white-space: nowrap; font-weight: 800; }

/* --- diagnostico --------------------------------------------------------- */

.diagnostico { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 4vw, 2.6rem); box-shadow: var(--shadow); }
.campo { margin-bottom: 1.5rem; }
.campo > label, .campo > legend, .campo .pregunta { display: block; font-weight: 750; margin-bottom: .55rem; font-size: .98rem; }
.campo .ayuda { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; margin-top: .2rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
legend { padding: 0; }

.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span {
  display: inline-block; padding: .55rem .95rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper); font-size: .9rem; font-weight: 650;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.opcion input:checked + span { background: var(--marca); border-color: var(--marca); color: var(--white); }
.opcion input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--marca) 55%, transparent); outline-offset: 2px; }

input[type="text"], input[type="email"], input[type="date"], input[type="tel"], select, textarea {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--paper); color: var(--tinta);
}
textarea { min-height: 7rem; resize: vertical; }

.resultado { margin-top: 2rem; border: 1px solid var(--marca); border-radius: var(--radius); padding: 1.6rem; background: #f4f1fd; }
.resultado h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.resultado .perfil { color: var(--marca-oscuro); font-weight: 900; }
.resultado ul { padding-left: 1.15rem; margin-bottom: 1rem; }
.resultado li { margin-bottom: .35rem; }
.lista-favor li::marker { color: var(--ok); }
.lista-contra li::marker { color: var(--alerta); }
.resultado .plazo-aviso { background: var(--alerta-fondo); border: 1px solid var(--alerta-claro); border-radius: var(--radius-sm); padding: .85rem 1rem; color: #7a3210; font-weight: 650; }

.descargo {
  font-size: .84rem; color: var(--muted); background: var(--paper-2);
  border-radius: var(--radius-sm); padding: .9rem 1.05rem; margin-top: 1.2rem;
}

.form-status { margin-top: 1rem; font-weight: 700; font-size: .92rem; min-height: 1.2rem; }
.form-status.success { color: var(--ok); }
.form-status.error { color: var(--alerta); }

.consentimiento { display: flex; gap: .65rem; align-items: flex-start; font-size: .88rem; color: var(--tinta-suave); }
.consentimiento input { width: auto; margin-top: .28rem; flex: none; }

/* --- preguntas frecuentes ------------------------------------------------ */

.faq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem; font-weight: 750; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--marca); font-size: 1.4rem; line-height: 1; flex: none; transition: transform .18s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .respuesta { padding: 0 1.25rem 1.25rem; color: var(--tinta-suave); }
.faq .respuesta p:last-child { margin-bottom: 0; }

/* --- pie ----------------------------------------------------------------- */

.site-footer { background: var(--tinta); color: #cec8e2; padding: 3rem 0 2rem; font-size: .9rem; }
.site-footer a { color: var(--marca-claro); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.site-footer h4 { color: var(--white); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.footer-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #3a3560; font-size: .82rem; color: #9a92b5; }

/* --- prosa (paginas legales) --------------------------------------------- */

.prosa { max-width: 72ch; }
.prosa h2 { font-size: 1.35rem; margin-top: 2.5rem; }
.prosa h3 { font-size: 1.08rem; margin-top: 1.8rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: .45rem; }
.prosa table { min-width: 0; }

/* Utilidades que existen para NO usar estilos en linea: la CSP declara
   style-src-attr 'none' y un style="" en el HTML quedaria bloqueado. */
.eyebrow-centrado { justify-content: center; }
.texto-menor { font-size: .92rem; color: var(--muted); }
.ayuda-inline { display: inline; }

/* =============================================================================
 * REVELACIONES — los desplegables de "La base de decisiones"
 *
 * La seccion tenia cuatro bloques de texto seguidos sobre fondo oscuro y
 * saturaba. Ahora son <details>: se ve un titular grande y una pista, y el
 * cuerpo aparece solo si a la persona le interesa.
 *
 * Se usa <details> nativo y no un acordeon en JavaScript por tres razones:
 * funciona sin scripts, el navegador ya gestiona el foco y el teclado, y el
 * buscador de la pagina encuentra el texto de dentro incluso cerrado en los
 * navegadores modernos.
 * ========================================================================== */

.revelaciones-intro {
  margin: 2.6rem 0 1rem;
  color: var(--marca-claro);
  font-weight: 700;
  font-size: .95rem;
}
.revelaciones { display: grid; gap: .8rem; }

.revelacion {
  background: #282544;
  border: 1px solid #454168;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease;
}
.revelacion:hover { border-color: var(--marca-claro); }
.revelacion[open] { background: #2e2a4e; border-color: var(--marca-claro); }

.revelacion > summary {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 1.5rem;
  cursor: pointer;
  list-style: none;
}
.revelacion > summary::-webkit-details-marker { display: none; }

.revelacion-indice {
  flex: none;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.05em;
  color: var(--marca-claro);
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.revelacion-texto { flex: 1 1 auto; min-width: 0; }
.revelacion-titulo {
  display: block;
  font-size: clamp(1.15rem, 2.6vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
  color: var(--white);
  text-wrap: balance;
}
.revelacion-pista {
  display: block;
  margin-top: .3rem;
  font-size: .86rem;
  color: #a79fc2;
}

/* El signo se dibuja en CSS para poder girarlo al abrir. Es decorativo y lleva
   aria-hidden en el HTML: quien use lector de pantalla ya recibe el estado
   abierto o cerrado del propio elemento details. */
.revelacion-signo {
  flex: none;
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid #5b5484;
  transition: transform .22s ease, background .18s ease, border-color .18s ease;
}
.revelacion-signo::before,
.revelacion-signo::after {
  content: "";
  position: absolute;
  inset: 50% 25%;
  border-top: 2px solid var(--marca-claro);
  transform: translateY(-1px);
}
.revelacion-signo::after { transform: translateY(-1px) rotate(90deg); }
.revelacion[open] .revelacion-signo { transform: rotate(135deg); background: var(--marca); border-color: var(--marca); }
.revelacion[open] .revelacion-signo::before,
.revelacion[open] .revelacion-signo::after { border-color: var(--white); }

.revelacion-cuerpo { padding: 0 1.5rem 1.6rem; }
.revelacion-cuerpo > :first-child { margin-top: 0; }
.revelacion-cuerpo p:last-child { margin-bottom: 0; }
.revelacion-cuerpo .tabla-envoltura { background: var(--white); }
.revelacion-cuerpo .tabla-envoltura td,
.revelacion-cuerpo .tabla-envoltura th { color: var(--tinta); }
.revelacion-cuerpo .tabla-envoltura caption { color: var(--muted); }

@media (max-width: 600px) {
  .revelacion > summary { padding: 1.1rem; gap: .8rem; }
  .revelacion-indice { font-size: 1.1rem; }
  .revelacion-cuerpo { padding: 0 1.1rem 1.3rem; }
}

/* =============================================================================
 * TARIFAS
 * Cuatro tarjetas en vez de la tabla de siete filas que habia antes. Cada una
 * lleva el valor en UF y su equivalente aproximado en pesos, porque la UF le
 * dice poco a quien no trabaja con ella a diario.
 * ========================================================================== */

.tarifas { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.tarifa {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.tarifa h3 { font-size: 1.2rem; margin-bottom: .45rem; letter-spacing: -.03em; }
.tarifa-variante {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--marca);
}
.tarifa-para { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }

.tarifa-monto { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: 1rem; }
.tarifa-uf { font-size: 1.7rem; font-weight: 900; letter-spacing: -.045em; color: var(--marca); line-height: 1; }
.tarifa-clp { font-size: .95rem; font-weight: 700; color: var(--muted); }

.tarifa-incluye { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .92rem; }
.tarifa-incluye li { position: relative; padding-left: 1.35rem; margin-bottom: .4rem; }
.tarifa-incluye li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--marca);
}
.tarifa-nota { margin-top: auto; font-size: .84rem; color: var(--muted); padding-top: .3rem; }
.tarifa-nota-fuerte {
  background: var(--alerta-fondo);
  border: 1px solid var(--alerta-claro);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  color: #7a3210;
}
.tarifa-destacada { border-color: var(--marca); box-shadow: var(--shadow); }
.tarifa-sello {
  align-self: flex-start;
  background: var(--marca);
  color: var(--white);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 999px;
  margin-bottom: .8rem;
}

/* =============================================================================
 * DIAGNOSTICO POR PASOS
 *
 * Las ocho preguntas estan TODAS en el HTML y visibles por defecto. Es el
 * script el que oculta las que no tocan. Asi, sin JavaScript, el formulario
 * sigue siendo un formulario normal de ocho preguntas en vez de una pagina
 * rota, y el buscador ve el contenido completo.
 * ========================================================================== */

.progreso { margin-bottom: 1.8rem; }
.progreso-cabecera {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-bottom: .55rem;
}
.progreso-contador { font-size: .85rem; font-weight: 700; color: var(--muted); }
.progreso-contador strong { color: var(--marca); font-variant-numeric: tabular-nums; }
.progreso-aliento { font-size: .85rem; font-weight: 700; color: var(--marca); }
.progreso-riel { height: 6px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.progreso-barra {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--marca), var(--marca-claro));
  border-radius: 999px;
  transition: width .35s cubic-bezier(.22, .61, .36, 1);
}

.paso { animation: pasoEntra .32s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes pasoEntra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.paso fieldset, .paso .campo { margin-bottom: 0; }
.paso .pregunta, .paso > .campo > label {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .9rem;
}

.paso-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.8rem; }
.paso-nav [data-atras] { margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .paso { animation: none; }
  .progreso-barra { transition: none; }
}

/* =============================================================================
 * INFORME DE EJEMPLO
 * Se presenta como un documento, no como una seccion mas de la pagina: fondo
 * propio, margenes de papel y un sello que deja claro que es ficticio.
 * ========================================================================== */

.informe {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* El sello va arriba del todo y en el color de advertencia, que en este sitio
   esta reservado para lo que la persona no debe pasar por alto. Que alguien
   confunda una maqueta con un informe real seria el peor resultado posible. */
.informe-sello {
  margin: 0;
  background: var(--alerta);
  color: var(--white);
  text-align: center;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6rem 1rem;
}

.informe-cabecera {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border-bottom: 2px solid var(--tinta);
}
.informe-tipo {
  margin: 0 0 .3rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--marca);
}
.informe-dominio { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.04em; }

.informe-meta { display: grid; grid-template-columns: repeat(2, auto); gap: .7rem 1.6rem; margin: 0; }
.informe-meta dt {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.informe-meta dd { margin: .15rem 0 0; font-size: .92rem; font-weight: 700; }

.informe-cuerpo { padding: clamp(1.4rem, 4vw, 2.4rem); }
.informe-seccion { padding-bottom: 1.8rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.informe-seccion:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.informe-seccion h4 { font-size: 1.15rem; letter-spacing: -.03em; margin-bottom: .7rem; }
.informe-seccion ul { padding-left: 1.25rem; }
.informe-seccion li { margin-bottom: .45rem; }

.informe-destacado {
  background: var(--paper-2);
  border-left: 3px solid var(--marca);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .85rem 1rem;
  font-weight: 650;
}
.informe-nota-cita { font-size: .86rem; color: var(--muted); }

.informe-balance { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.informe-columna { border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; }
.informe-columna h5 {
  margin: 0 0 .6rem;
  font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.informe-columna ul { margin: 0; padding-left: 1.15rem; font-size: .92rem; }
.informe-columna li:last-child { margin-bottom: 0; }
.informe-favor { background: var(--ok-fondo); }
.informe-favor h5 { color: var(--ok); }
.informe-favor li::marker { color: var(--ok); }
.informe-contra { background: var(--alerta-fondo); }
.informe-contra h5 { color: var(--alerta); }
.informe-contra li::marker { color: var(--alerta); }

.informe-reco { background: var(--paper); border-radius: var(--radius); padding: 1.4rem; }
.informe-reco h4 { color: var(--marca); }

.informe-pie {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding: 1.2rem clamp(1.4rem, 4vw, 2.4rem);
}
.informe-pie p { margin: 0; font-size: .84rem; color: var(--muted); }

@media (max-width: 520px) {
  .informe-meta { grid-template-columns: 1fr; }
}


/* ANCHO DE LA BARRA SIN ESTILO EN LINEA
 *
 * La version anterior hacia barra.style.width = "37.5%" desde JavaScript. NO
 * FUNCIONA en este sitio: la CSP declara style-src-attr 'none' y el navegador
 * descarta el atributo style. Comprobado sirviendo la pagina con la cabecera
 * real: la propiedad quedaba fijada en el objeto ("25%") pero el ancho
 * calculado seguia siendo 0px, y sin ningun error en consola. La barra no se
 * habria movido nunca en produccion.
 *
 * Ahora el script escribe dos atributos —data-total y data-hecho— y el ancho
 * sale de aqui. Hay dos totales posibles: 8 preguntas para el titular y 7 para
 * el revocante, al que no se le pregunta la fecha del correo. Si alguna vez se
 * anade o quita una pregunta, hay que anadir aqui el bloque del total nuevo o
 * la barra se quedara quieta. */

.progreso-barra[data-total="7"][data-hecho="0"] { width: 0.0%; }
.progreso-barra[data-total="7"][data-hecho="1"] { width: 14.2857%; }
.progreso-barra[data-total="7"][data-hecho="2"] { width: 28.5714%; }
.progreso-barra[data-total="7"][data-hecho="3"] { width: 42.8571%; }
.progreso-barra[data-total="7"][data-hecho="4"] { width: 57.1429%; }
.progreso-barra[data-total="7"][data-hecho="5"] { width: 71.4286%; }
.progreso-barra[data-total="7"][data-hecho="6"] { width: 85.7143%; }
.progreso-barra[data-total="7"][data-hecho="7"] { width: 100.0%; }
.progreso-barra[data-total="8"][data-hecho="0"] { width: 0.0%; }
.progreso-barra[data-total="8"][data-hecho="1"] { width: 12.5%; }
.progreso-barra[data-total="8"][data-hecho="2"] { width: 25.0%; }
.progreso-barra[data-total="8"][data-hecho="3"] { width: 37.5%; }
.progreso-barra[data-total="8"][data-hecho="4"] { width: 50.0%; }
.progreso-barra[data-total="8"][data-hecho="5"] { width: 62.5%; }
.progreso-barra[data-total="8"][data-hecho="6"] { width: 75.0%; }
.progreso-barra[data-total="8"][data-hecho="7"] { width: 87.5%; }
.progreso-barra[data-total="8"][data-hecho="8"] { width: 100.0%; }

/* =============================================================================
 * BLOG
 *
 * Las paginas del blog las escribe herramientas/generar-blog.py a partir de
 * _blog/. Si algo se ve mal, se corrige aqui y se vuelve a generar; editar a
 * mano un archivo de blog/ es tirar el cambio a la basura en la siguiente
 * ejecucion.
 * ========================================================================== */

.blog-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--marca);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.blog-card-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.blog-card-meta span { color: var(--marca); }
.blog-card h3 { margin: .9rem 0 .7rem; font-size: 1.28rem; letter-spacing: -.032em; }
.blog-card h3 a { text-decoration: none; }
.blog-card h3 a:hover { color: var(--marca); }
.blog-card p { color: var(--muted); font-size: .95rem; }
.blog-card-pie {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--muted);
}
.blog-card-pie a { color: var(--marca); font-weight: 800; text-decoration: none; }

/* --- articulo ------------------------------------------------------------ */

.article-hero { padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.article-volver {
  display: inline-block; margin-bottom: 1.4rem;
  color: var(--marca-claro); font-weight: 700; font-size: .88rem; text-decoration: none;
}
.article-hero h1 { font-size: clamp(1.85rem, 4.6vw, 3.1rem); margin-bottom: 1rem; }
.article-bajada { font-size: clamp(1rem, 2vw, 1.18rem); color: #d8d2e8; max-width: 62ch; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem;
  margin-top: 1.5rem; font-size: .78rem; color: #a79fc2;
}
.article-meta time, .article-meta span { padding-right: 1rem; border-right: 1px solid #454168; }
.article-meta :last-child { border-right: 0; padding-right: 0; }

/* El cuerpo del articulo es prosa larga: interlineado algo mayor y una medida
   de linea corta, que es lo que hace legible un texto de siete minutos. */
.article-cuerpo { line-height: 1.72; }
.article-cuerpo p, .article-cuerpo li { max-width: 68ch; }
.article-cuerpo a { color: var(--marca); font-weight: 650; }
.article-cuerpo ul, .article-cuerpo ol { padding-left: 1.3rem; }
.article-cuerpo li { margin-bottom: .55rem; }
.article-cuerpo .tabla-envoltura { margin-block: 1.5rem; }

.blog-section { margin-top: 2.8rem; }
.blog-section h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); margin-bottom: .9rem; }
.blog-section h3 { font-size: 1.1rem; margin-top: 1.8rem; margin-bottom: .6rem; }

/* Aviso destacado dentro de la prosa. Reutiliza el mismo lenguaje visual que
   el resto del sitio: azul para lo informativo, terracota para lo que la
   persona no debe pasar por alto. */
.notice {
  background: #f2effc;
  border: 1px solid #cec7f0;
  border-left: 4px solid var(--marca);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-block: 1.6rem;
  max-width: none;
}
.notice p:last-child { margin-bottom: 0; }
.notice-warning { background: var(--alerta-fondo); border-color: var(--alerta-claro); border-left-color: var(--alerta); color: #7a3210; }

.article-fuentes {
  margin-top: 3rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--marca);
  border-radius: var(--radius-sm);
  padding: 1.3rem 1.5rem;
}
.article-fuentes h2 { font-size: 1.1rem; margin-bottom: .8rem; }
.article-fuentes ol { margin-bottom: 1rem; }
.article-fuentes li { font-size: .92rem; }
.article-fuentes p { font-size: .85rem; color: var(--muted); margin-bottom: 0; }

.article-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  background: var(--white);
  border: 1px solid var(--marca);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow);
}
.article-cta h2 { font-size: 1.35rem; margin-bottom: .5rem; }
.article-cta p { margin-bottom: 0; color: var(--muted); font-size: .95rem; max-width: 46ch; }

/* =============================================================================
 * SALVATE SOLO (CON IA) — la plataforma y Aro
 *
 * El rotulo "en desarrollo" usa el ambar (--acento) y no el naranja de alerta.
 * La distincion importa y es la regla de color del sitio: el naranja avisa de
 * algo que le puede costar el dominio; esto solo avisa de que la cosa todavia
 * no esta abierta. Mezclarlos gastaria la unica senal urgente que tenemos.
 * ========================================================================== */

.etiqueta-desarrollo {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--acento-fondo);
  border: 1px solid var(--acento);
  color: #7a4d05;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.etiqueta-desarrollo::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--acento); flex: none;
}

.titulo-producto { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: 1rem; }
.titulo-producto span { color: var(--marca); }

/* --- Aro ----------------------------------------------------------------- */

.aro {
  display: grid; gap: 1.8rem;
  grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  box-shadow: var(--shadow);
}
.aro-retrato svg { width: 100%; height: auto; display: block; }
.aro-nombre { font-size: 1.3rem; letter-spacing: -.03em; margin-bottom: .6rem; }
.aro-nombre strong { color: var(--marca); }

.aro-reglas { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .8rem; }
.aro-reglas li {
  position: relative; padding-left: 1.7rem; font-size: .95rem;
}
/* La marca de verificacion es la forma del argumento: cada regla de Aro es una
   promesa que el motor cumple por construccion, no una intencion. */
.aro-reglas li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .7rem; height: .38rem;
  border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok);
  transform: rotate(-45deg);
}

@media (max-width: 640px) {
  .aro { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .aro-retrato { width: 96px; }
}

/* --- limites -------------------------------------------------------------- */

.card-limites ul { padding-left: 1.2rem; margin-bottom: 0; font-size: .95rem; }
.card-limites li { margin-bottom: .45rem; }
.card-limites li::marker { color: var(--marca); }

/* --- lista de espera ------------------------------------------------------ */

.lista-espera {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--tinta); color: #ddd8ec;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.6rem);
}
.lista-espera h3 { color: var(--white); font-size: 1.45rem; margin-bottom: .7rem; }
.lista-espera p { color: #ddd8ec; }
.lista-espera p:last-child { margin-bottom: 0; }
.lista-espera strong { color: var(--white); }
.lista-espera label { color: var(--white); }
.lista-espera .consentimiento { color: #c7c0dd; }
/* Los enlaces de dentro de la caja oscura. Sin esta regla heredan el violeta
   de .article-cuerpo a, que esta pensado para fondo claro, y quedan en 2,38:1
   sobre la tinta: ilegibles. Aplica a TODOS los enlaces de la caja, no solo a
   los del consentimiento, que era el unico caso que se habia previsto. */
.lista-espera a { color: var(--marca-claro); font-weight: 700; }
.lista-espera input[type="email"] {
  background: #2e2a4e; border-color: #454168; color: var(--white);
}
.lista-espera input[type="email"]::placeholder { color: #8f87ad; }

.tarifa-sello-acento { background: var(--acento); color: #2b1a00; }

/* --- pagina de la plataforma --------------------------------------------- */

.paso-plataforma {
  display: grid; gap: 1.2rem;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: start;
  padding-bottom: 1.6rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.paso-plataforma:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.paso-plataforma h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.paso-plataforma p:last-child { margin-bottom: 0; }

.dialogo {
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 1.2rem 1.35rem;
  margin-top: 1rem;
  display: grid; gap: .8rem;
}
.dialogo p { margin: 0; font-size: .94rem; }
.dialogo .de-usted, .dialogo .de-aro {
  padding: .7rem .95rem; border-radius: var(--radius-sm); max-width: 92%;
}
.dialogo .de-usted { background: var(--white); border: 1px solid var(--line); justify-self: start; }
.dialogo .de-aro { background: #efecfb; border: 1px solid #cec7f0; justify-self: end; }
.dialogo .quien {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.dialogo .de-aro .quien { color: var(--marca); }

/* =============================================================================
 * SALVATE SOLO — pagina limpia: entregables, pasos, precio y la puerta
 * ========================================================================== */

.entrega {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; text-align: center;
}
.entrega-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--marca); color: var(--white);
  font-weight: 900; font-size: 1.1rem; margin-bottom: .9rem;
}
.entrega h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.entrega p { color: var(--muted); font-size: .94rem; margin-bottom: 0; }

.pasos-simples { display: grid; gap: 1rem; }
.paso-simple {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1.1rem;
  align-items: start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
}
.paso-simple-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--acento-fondo); border: 1px solid var(--acento);
  color: #7a4d05; font-weight: 900;
}
.paso-simple h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.paso-simple p { margin-bottom: 0; color: var(--muted); font-size: .95rem; }

/* --- precio --------------------------------------------------------------- */

.precio-caja {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: center;
  background: var(--tinta); color: #ddd8ec;
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.4rem);
}
.precio-caja-valor {
  margin: 0; font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 900;
  letter-spacing: -.05em; color: var(--white); line-height: 1;
}
.precio-caja-valor span {
  display: block; font-size: 1rem; font-weight: 700; color: var(--marca-claro);
  letter-spacing: -.01em; margin-top: .4rem;
}
.precio-caja-nota { margin: .9rem 0 0; font-size: .88rem; color: #b8b0d2; }
.precio-caja-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.precio-caja-lista li { position: relative; padding-left: 1.7rem; }
.precio-caja-lista strong { color: var(--white); }
.precio-caja-lista li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .7rem; height: .38rem;
  border-left: 2.5px solid var(--acento); border-bottom: 2.5px solid var(--acento);
  transform: rotate(-45deg);
}

.aro-reglas-sueltas { max-width: 720px; margin-inline: auto; }

/* --- la puerta ------------------------------------------------------------
 * Es el punto de la pagina, asi que se ve como tal: recuadro propio, borde de
 * marca y separada de todo lo demas.
 * ------------------------------------------------------------------------- */

.puerta {
  background: var(--white);
  border: 2px solid var(--marca);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: var(--shadow);
}
.puerta h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.puerta-enlaces { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .6rem; }
.puerta-enlaces li {
  padding: .8rem 1rem; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: .93rem; color: var(--muted);
}
.puerta-enlaces a { color: var(--marca); font-weight: 800; }

.puerta-casilla {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem;
  align-items: flex-start; font-size: .93rem; color: var(--tinta-suave);
}
.puerta-casilla input { margin-top: .3rem; }

.puerta-aviso { margin-top: .6rem; font-size: .88rem; font-weight: 700; color: var(--muted); }
.puerta-aviso[data-listo="si"] { color: var(--ok); }

.puerta-desarrollo {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--muted);
}
.puerta-desarrollo strong { color: var(--alerta); }

.acento-claro { color: var(--acento); }

/* =============================================================================
 * FOTOS DEL BLOG
 * Las descarga herramientas/fotos-blog.py a /assets/blog/. Se sirven desde el
 * propio dominio y no desde Pexels: la CSP declara img-src 'self' data:, y una
 * imagen remota quedaria bloqueada sin ningun aviso visible. Ademas, una imagen
 * remota le cuenta al banco de fotos quien visita este sitio, y aqui entra
 * gente a la que le acaban de reclamar un dominio.
 *
 * width y height van en el HTML para que el navegador reserve el hueco antes de
 * cargarlas y el texto no salte.
 * ========================================================================== */

.blog-card-foto {
  display: block; width: 100%; height: 170px; object-fit: cover;
  border-radius: var(--radius-sm); margin-bottom: 1rem; background: var(--paper-2);
}
.article-foto {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); margin-bottom: .6rem; background: var(--paper-2);
}
.foto-credito {
  font-size: .78rem; color: var(--muted); margin-bottom: 1.8rem; max-width: none;
}
.foto-credito a { color: var(--muted); }