:root{--brand:#0a6a7a;--accent:#2dd4bf;--bg:#f7fbfc;--text:#0f172a;--muted:#667085;--surface:#fff;--radius:14px;--shadow:0 10px 28px rgba(2,6,23,.08);--max:1220px;--ui:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif}
@media (prefers-color-scheme: dark){:root{--bg:#0c1114;--text:#e6edf3;--surface:#0f1519;--shadow:0 18px 40px rgba(0,0,0,.55)}}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--ui)}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:24px}
.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(8px);background:linear-gradient(to bottom,rgba(255,255,255,.75),rgba(255,255,255,.35));border-bottom:1px solid rgba(2,6,23,.06)}
@media (prefers-color-scheme: dark){.header{background:linear-gradient(to bottom, rgba(15,21,25,.65), rgba(15,21,25,.35));border-bottom:1px solid rgba(255,255,255,.08)}}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px}
.brand{display:flex;align-items:center;gap:12px}.brand .title{font-weight:800;letter-spacing:.2px}.badge{background:var(--brand);color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;box-shadow:var(--shadow)}
nav.menu{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
nav.menu a{padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid rgba(2,6,23,.08);box-shadow:0 2px 10px rgba(2,6,23,.06)}
nav.menu a.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.hero{margin-top:18px;background:radial-gradient(1100px 300px at 20% -10%,#eef6f8,transparent),radial-gradient(900px 260px at 80% -10%,#e8f6f7,transparent);border:1px solid rgba(2,6,23,.06);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 28px}

/* HOME: evita el efecto "caja" en la cabecera principal (queremos que respire sobre el fondo) */
#home-root .hero{background:transparent;border:0;box-shadow:none;padding:26px 0 12px}
.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Grid 3 columnas (usado en /recursos/) */
.grid.three{grid-template-columns:1fr}
@media(min-width:860px){.grid.three{grid-template-columns:1fr 1fr}}
@media(min-width:1150px){.grid.three{grid-template-columns:1fr 1fr 1fr}}

/* Hero con imagen de fondo (usado en /recursos/) */
.hero.hero-cover{position:relative;overflow:hidden;min-height:260px;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;border-radius:var(--radius)}
.hero-cover-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(2,6,23,.55), rgba(2,6,23,.08))}
.hero-cover-inner{position:relative;max-width:820px;background:rgba(255,255,255,.92);
  border:1px solid rgba(2,6,23,.10);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
@media (prefers-color-scheme: dark){
  .hero-cover-overlay{background:linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.18))}
  .hero-cover-inner{background:rgba(15,21,25,.85);border-color:rgba(255,255,255,.10)}
}

/* Barra de búsqueda (recursos) */
.guidebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.input{flex:1 1 260px;min-width:220px;padding:12px 14px;border-radius:12px;border:1px solid rgba(2,6,23,.12);
  background:var(--surface);color:var(--text);box-shadow:0 2px 10px rgba(2,6,23,.06)}
.input:focus{outline:2px solid rgba(10,106,122,.35);outline-offset:2px}
.card{background:var(--surface);border:1px solid rgba(2,6,23,.06);border-radius:var(--radius);padding:18px;box-shadow:0 2px 10px rgba(2,6,23,.06)}
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.footer{margin-top:24px;padding:20px 24px;border-top:1px solid rgba(2,6,23,.08);color:var(--muted)}
.muted{color:var(--muted)}


/* ==== HOME V6 COMPONENTES (botones + layout portada + adopciones + CTA + CER) ==== */

/* Botones */
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.btn-main,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:999px;font-weight:700;text-decoration:none;cursor:pointer;
  border:1px solid rgba(2,6,23,.10);transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn-main{background:var(--brand);color:#fff;border-color:rgba(2,6,23,.0);box-shadow:0 8px 18px rgba(10,106,122,.22)}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(10,106,122,.26)}
.btn-ghost{background:#fff;color:var(--text)}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(2,6,23,.10)}
.btn-small{padding:8px 12px;font-size:.92rem}

/* HERO portada */
.hero-inner{display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.hero-main{flex:1 1 360px}
.hero-side{flex:0 0 260px;display:flex;justify-content:center}
.hero-title-line{width:72px;height:3px;border-radius:999px;background:var(--brand);margin:6px 0 10px}
.hero-text{max-width:62ch}
.hero-sub{color:var(--muted);font-size:.96rem}
.hero-photo-main{width:220px;height:220px;border-radius:999px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(2,6,23,.06);background:#fff}
.hero-photo-main img{width:100%;height:100%;display:block;object-fit:cover}

/* Intro */
.section-std.home-intro{text-align:center}
.home-intro-text{max-width:1120px;margin:0 auto 12px;padding-inline:8px}
.home-intro-text p{max-width:none;margin-left:auto;margin-right:auto}
.home-intro-img-wide{max-width:1020px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(2,6,23,.06)}
.home-intro-img-wide img{width:100%;height:auto;display:block;object-fit:cover}

/* CER */
.cer-steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cer-step{position:relative;background:#fff;border:1px solid rgba(2,6,23,.08);border-radius:var(--radius);
  padding:14px;box-shadow:0 10px 22px rgba(2,6,23,.06)}
.cer-step::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:rgba(10,106,122,.55)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;
  background:rgba(10,106,122,.10);border:1px solid rgba(10,106,122,.22);color:var(--brand);font-weight:800;margin-bottom:8px}
.cer-step-img{display:flex;justify-content:center;margin:2px 0 10px}
.cer-step-img img{width:92px;height:92px;object-fit:contain;border-radius:999px;background:#fff;
  box-shadow:0 6px 14px rgba(2,6,23,.08);border:1px solid rgba(2,6,23,.06)}

/* Adopciones teaser */
.home-adopt-teaser{margin:18px auto;padding:18px;border-radius:var(--radius);background:var(--surface);
  border:1px solid rgba(2,6,23,.06);box-shadow:0 10px 22px rgba(2,6,23,.06);max-width:var(--max)}
.home-adopt-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.home-adopt-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cat-mini{padding:14px}
.cat-mini h3{margin:8px 0 4px}
.cat-mini .muted{margin:0}
.cat-mini-img-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(2,6,23,.06);background:#fff}
.cat-mini-img-wrap img{width:100%;height:170px;object-fit:cover;display:block}

/* CTA tarjetas */
.home-cta{margin:14px auto 10px;max-width:var(--max)}
.home-cta-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.home-cta-card{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit}
.home-cta-thumb{flex:0 0 72px;height:72px;border-radius:999px;overflow:hidden;border:1px solid rgba(2,6,23,.06);background:#fff}
.home-cta-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.home-cta-icon{font-size:18px;margin-bottom:2px}
.home-cta-body h3{margin:0 0 4px}
.home-cta-body p{margin:0}

/* Franja */
.home-strip{margin:10px 0 0}
.home-strip img{width:100%;max-height:150px;object-fit:cover;display:block;border-top:1px solid rgba(2,6,23,.06);opacity:.94}

/* CER desc */
.home-cer-desc{max-width:1120px;margin:10px auto 0;padding-inline:8px;line-height:1.6}

@media (max-width:768px){
  .hero-inner{flex-direction:column;text-align:center}
  .hero-side{order:-1}
  .hero-photo-main{width:185px;height:185px}
  .cer-step-img img{width:78px;height:78px}
  .cat-mini-img-wrap img{height:160px}
}
/* ==== V6 HOME — PARCHE INFOGRAFIA (solo CSS) ==== */

/* 1) HERO: menos aire + círculo mejor equilibrado */
.hero { padding-top: 16px; padding-bottom: 10px; }
.hero-inner { gap: 18px; align-items: center; }
.hero-main { flex: 1 1 420px; }
.hero-side { flex: 0 0 240px; justify-content: center; }
.hero-photo-main { width: 200px; height: 200px; }
@media (max-width: 768px){
  .hero { padding-top: 14px; padding-bottom: 8px; }
  .hero-inner { gap: 12px; }
  .hero-photo-main { width: 175px; height: 175px; }
}

/* 2) “Qué puedes hacer hoy”: iconos más grandes + centrado */
.home-actions { margin-top: 14px; }
.home-actions .home-action { text-align: center; }
.home-action-icon { font-size: 34px; margin: 2px 0 8px; }
.home-actions .home-action h3 { margin-top: 6px; }

/* 3) CER tipo infografía: círculos grandes + sin redundancias */
.section-alt { padding-top: 18px; padding-bottom: 18px; }
.cer-steps { gap: 16px; }
.cer-steps > div { text-align: center; padding-top: 14px; }

.cer-step-img { margin-bottom: 10px; }
.cer-step-img img{
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,0.10);
}

/* Si hay imagen, quitamos redundancias visuales */
.cer-steps .step-num { display: none; }        /* la letra C/E/R sobra */
.cer-steps h3 { display: none; }               /* “Captura/Esterilización/Retorno” sobra */

/* Texto más compacto (infografía) */
.cer-steps p.muted{
  margin: 0;
  line-height: 1.35;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
}

@media (max-width: 768px){
  .cer-step-img img{ width: 108px; height: 108px; }
  .cer-steps p.muted{ max-width: 38ch; }
}

/* 4) Adopciones: compactar aire entre CER y adopciones */
.home-adopt-teaser { margin-top: 14px; margin-bottom: 14px; }

/* 5) CTA final: si hay imagen, el icono sobra */
.home-cta { margin-top: 10px; }
.home-cta-icon { display: none; }
/* =========================================================
   V6 HOME — FIX FINAL HERO + MÉTODO CER (sin romper el resto)
   Pega este bloque AL FINAL de styles.css
   ========================================================= */

/* 1) HERO: equilibrio texto ↔ círculo */
.hero-inner{ gap:18px; align-items:center; }
.hero-main{ flex:1 1 520px; }
.hero-text{ max-width:70ch; }

/* 2) HERO: círculo centrado en su columna y con filete verde */
.hero-side{ flex:0 0 240px; display:flex; justify-content:center; align-items:center; }
.hero-photo-main{
  width: 220px;
  height: 220px;
  border-radius: 9999px;
  border: 6px solid var(--brand);
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  overflow: hidden;
  margin: 0 auto;
}
.hero-photo-main img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 3) MÉTODO CER: quita la “raya” superior y aplica filete a los 3 círculos */
.cer-step::before{ display:none !important; }
.cer-step-img{
  width: 124px;
  height: 124px;
  border-radius: 9999px;
  border: 6px solid var(--brand);
  background:#fff;
  overflow:hidden;
  margin: 0 auto 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.cer-step-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 4) Acciones (“¿Qué puedes hacer hoy?”): iconos un poco más grandes */
.home-action-icon{ font-size: 42px; margin: 2px 0 10px; }

/* 5) Responsive: en móvil, que el círculo vaya ARRIBA (no abajo/izq) y centrado */
@media (max-width: 860px){
  .hero-inner{ flex-direction: column; align-items: center; text-align: center; }
  .hero-side{ order:-1; width:100%; }
  .hero-photo-main{ width: 185px; height: 185px; }
  .hero-actions{ justify-content: center; }
  .hero-kicker{ justify-content: center; }
}


/* =============================
   HOTFIX (Home): acciones + método CER
   - Subrayado solo en el título (no en el icono)
   - Círculos del método CER más grandes (sin tocar el HERO)
   ============================= */

/* Acciones: evita que el :hover subraye el icono/emojis */
.home-actions a.home-action { text-decoration: none; }
.home-actions a.home-action:hover { text-decoration: none; }
.home-actions a.home-action:hover h3 { text-decoration: underline; }

/* Refuerzo: aunque algún estilo global subraye <a>, el icono queda limpio */
.home-actions .home-action-icon { text-decoration: none !important; }

/* Método CER: aumenta el tamaño de los círculos */
.cer-step-img { width: 140px; height: 140px; }
.cer-step-img img { width: 140px; height: 140px; }

@media (max-width: 720px){
  .cer-step-img { width: 112px; height: 112px; }
  .cer-step-img img { width: 112px; height: 112px; }
}

/* =============================
   Recursos: “chips” (tags)
   ============================= */
.rtag{display:inline-flex;align-items:center;gap:8px;border:1px solid #94a3b8;border-radius:999px;padding:6px 10px;background:#e2e8f0;color:#0f172a;font-size:14px;font-weight:800;line-height:1}
.rtag.ok{background:#dcfce7;border-color:#22c55e;color:#14532d}
.rtag.no{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}
.rtag.info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}
/* Estado intermedio: advertencia (mejor legibilidad que el gris por defecto) */
.rtag.warn{background:#ffedd5;border-color:#f59e0b;color:#7c2d12}

/* Mejor contraste en modo oscuro */
@media (prefers-color-scheme: dark){
  .rtag{background:rgba(148,163,184,.18);border-color:rgba(148,163,184,.55);color:#e2e8f0}
  .rtag.ok{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.7);color:#bbf7d0}
  .rtag.no{background:rgba(239,68,68,.28);border-color:rgba(239,68,68,.75);color:#ffffff}
  .rtag.info{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.7);color:#bfdbfe}
  .rtag.warn{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.7);color:#fed7aa}
}

/* =========================================================
   V7 — PULIDO GLOBAL (asociación)
   Objetivo: mejorar legibilidad y coherencia visual sin romper estructura.
   ========================================================= */

/* Tipografía y ritmo */
body{line-height:1.55}
main p, main li{line-height:1.55}
main p{max-width:75ch}

h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.3px;line-height:1.12;margin:10px 0 10px}
h2{font-size:clamp(20px,2.6vw,28px);letter-spacing:-.2px;line-height:1.18;margin:0 0 10px}
h3{font-size:clamp(16px,2.2vw,20px);line-height:1.25;margin:0 0 8px}

/* Contenedor de páginas largas (recursos/guías) */
.page{max-width:980px;margin:0 auto;padding:24px}

/* Botón “pill” para enlaces de acción (muchas páginas usan .btn) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:999px;font-weight:800;text-decoration:none;
  background:var(--surface);color:var(--text);
  border:1px solid rgba(2,6,23,.10);box-shadow:0 6px 16px rgba(2,6,23,.08);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px);text-decoration:none;box-shadow:0 10px 22px rgba(2,6,23,.12)}
.btn.primary{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(10,106,122,.22)}
.btn.primary:hover{box-shadow:0 14px 28px rgba(10,106,122,.26)}

/* Grid 2 columnas para guías (sin afectar a .grid.cards) */
.grid.two{grid-template-columns:1fr}
@media(min-width:900px){.grid.two{grid-template-columns:1fr 1fr}}

/* Callouts y estados para tarjetas */
.card.callout{background:#f8fafc;border-color:#e2e8f0}
.card.danger{background:#fff7ed;border-color:#fed7aa}
.card.ok{background:#f0fdf4;border-color:#bbf7d0}
.card.callout .muted,.card.danger .muted,.card.ok .muted{color:rgba(15,23,42,.86)}
@media (prefers-color-scheme: dark){
  .card.callout{background:rgba(226,232,240,.06);border-color:rgba(226,232,240,.18)}
  .card.danger{background:rgba(255,237,213,.06);border-color:rgba(254,215,170,.24)}
  .card.ok{background:rgba(220,252,231,.06);border-color:rgba(187,247,208,.24)}
  .card.callout .muted,.card.danger .muted,.card.ok .muted{color:var(--muted)}
}

/* Mejor foco accesible */
a:focus-visible,button:focus-visible{outline:3px solid rgba(45,212,191,.65);outline-offset:3px;border-radius:10px}

/* Secciones: menos inline styles */
.section{margin-top:18px}
.section-lg{margin-top:28px}


/* FAQ: detalles desplegables */
details{border:1px solid rgba(148,163,184,.55);border-radius:14px;padding:12px 14px;background:var(--surface)}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:900;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] summary{margin-bottom:8px}


/* Recursos: enlaces de referencia */
.refs{margin:0;padding-left:18px}
.refs li{margin:6px 0}
.smallnote{font-size:.92rem;color:#6b7280;margin:10px 0 0}
@media (prefers-color-scheme: dark){
  .smallnote{color:#9ca3af}
}

/* =============================
   Recursos (hub + tarjetas)
   ============================= */

.hero.hero-split{display:flex;gap:18px;align-items:center;justify-content:space-between}
.hero.hero-split .hero-copy{flex:1;min-width:260px}
.hero.hero-split .hero-media{flex:0 0 auto}
.hero.hero-split .hero-media img{display:block;width:min(520px,100%);height:auto;border-radius:18px;border:1px solid rgba(148,163,184,.35);box-shadow:0 18px 40px rgba(2,6,23,.10)}

.guide-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.guide-toolbar input[type="search"]{min-width:260px;max-width:420px;flex:1;border:1px solid rgba(148,163,184,.55);border-radius:14px;padding:10px 12px;background:var(--surface);color:var(--text)}
.guide-toolbar input[type="search"]::placeholder{color:rgba(100,116,139,.95)}

.guide-card{display:block;color:inherit;text-decoration:none}
.guide-card:hover{text-decoration:none}
.guide-card h3{margin:10px 0 6px}
.guide-card p{margin:0;color:var(--muted)}
.guide-card .tag{display:inline-flex;margin-top:0}

/* Recursos: tarjetas con miniatura (para que no sea todo “texto a mogollón”) */
.guide-card{background:var(--surface);border:1px solid rgba(2,6,23,.06);border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(2,6,23,.06);padding:16px;transition:transform .12s ease, box-shadow .12s ease}
.guide-card:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(2,6,23,.10)}

.guide-card.has-thumb{padding:0;overflow:hidden;position:relative}
.guide-card.has-thumb .guide-thumb{width:100%;height:140px;object-fit:cover;display:block;
  border-bottom:1px solid rgba(2,6,23,.06)}
/* El tag encima de la imagen */
.guide-card.has-thumb > .rtag{position:absolute;top:12px;left:12px;z-index:2;
  box-shadow:0 10px 22px rgba(2,6,23,.18)}
/* Separación interna para texto */
.guide-card.has-thumb > h3,
.guide-card.has-thumb > p{padding:0 16px}
.guide-card.has-thumb > h3{margin:14px 0 6px}
.guide-card.has-thumb > p{padding-bottom:16px}

/* Imagen en cabecera de guía */
.guide-hero .guide-thumb-hero{width:min(520px,100%);height:auto}

/* Para que los anchors no queden debajo del header fijo */
main.page.guide h2{scroll-margin-top:90px}

/* Índice visual dentro de guías (chips clicables) */
.guide-index{margin-top:18px}
.guide-index-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chip{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 12px;border-radius:999px;font-weight:800;text-decoration:none;
  background:rgba(148,163,184,.18);border:1px solid rgba(148,163,184,.55);
  color:var(--text);transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.chip:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(2,6,23,.10);text-decoration:none}
@media (prefers-color-scheme: dark){
  .chip{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.35)}
}

@media (max-width: 920px){
  .hero.hero-split{flex-direction:column;align-items:flex-start}
  .hero.hero-split .hero-media img{width:100%}
}

/* =============================
   Guías: “resumen rápido”
   (reduce bloques largos al inicio)
   ============================= */

.guide-quick{margin-top:18px}
.guide-quick .card{height:100%}
.guide-quick h3{margin:0 0 10px}
.guide-quick ul{margin:0;padding-left:18px}
.guide-quick li{margin:6px 0}

.guide-quick .card.ok h3,
.guide-quick .card.danger h3,
.guide-quick .card.callout h3{font-size:1.05rem}

/* =============================
   Guías: notas, figuras y utilidades
   (para unificar estilo y evitar inline styles)
   ============================= */

.note{margin:14px 0;padding:12px 14px;border:1px solid rgba(2,6,23,.12);border-radius:12px;background:rgba(2,6,23,.03)}
.note--gold{background:rgba(212,175,55,.08)}
.note--info{background:rgba(45,212,191,.12)}
.note strong{font-weight:800}
.note ul{margin:8px 0 0 18px}
.note li{margin:6px 0}

.mt-16{margin-top:16px}
.mt-24{margin-top:24px}

.links{margin:0;padding-left:18px}
.links li{margin:6px 0}

.figure-frame{margin:14px 0;padding:12px;border:1px dashed rgba(2,6,23,.18);border-radius:12px;background:rgba(2,6,23,.02)}
.figure-frame img{width:100%;border-radius:10px;border:1px solid rgba(2,6,23,.08)}
.figure-frame figcaption{margin-top:8px;color:var(--muted)}

.table-wrap{overflow:auto;margin-top:10px}
.table-basic{border-collapse:collapse;width:100%;min-width:680px}
.table-basic th{ text-align:left;border-bottom:1px solid rgba(2,6,23,.20);padding:10px }
.table-basic td{ padding:10px;border-bottom:1px solid rgba(2,6,23,.08) }
@media (prefers-color-scheme: dark){
  .note{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.06)}
  .note--gold{background:rgba(212,175,55,.12)}
  .note--info{background:rgba(45,212,191,.14)}
  .figure-frame{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
  .figure-frame img{border-color:rgba(255,255,255,.12)}
  .table-basic th{border-bottom:1px solid rgba(255,255,255,.18)}
  .table-basic td{border-bottom:1px solid rgba(255,255,255,.10)}
}


/* ============================
   FAQ: legibilidad y jerarquía
   (solo afecta a faq.html)
   ============================ */
.faq-page { font-weight: 400; }
.faq-page p, .faq-page li { font-weight: 400; }
.faq-page strong, .faq-page b { font-weight: 650; }

.faq-page details.faq summary{
  font-weight: 800;
}

.faq-page details.faq summary::before{
  content:"?";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin-right:10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  color: var(--brand);
  font-weight: 800;
}


/* Mini publicación 22-03-26: menú hamburguesa */
.site-header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 0;position:relative}.site-brand{display:flex;align-items:flex-start;gap:10px;text-decoration:none;color:#111;min-width:0;flex:1 1 auto}.site-brand-logo{height:36px;object-fit:contain;flex:0 0 auto}.menu-toggle{display:none;appearance:none;border:1px solid rgba(2,6,23,.12);background:#fff;border-radius:14px;padding:10px 12px;min-width:46px;min-height:46px;cursor:pointer;box-shadow:0 2px 10px rgba(2,6,23,.06);position:relative;z-index:41;color:#0f172a;gap:10px}.menu-toggle-icon{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;min-width:20px}.menu-toggle-icon span{display:block;width:20px;height:2px;background:#0f172a;border-radius:999px;transition:transform .18s ease, opacity .18s ease}.menu-toggle-text{font-size:14px;font-weight:700;line-height:1;white-space:nowrap}.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.menu-toggle[aria-expanded="true"] .menu-toggle-text{content:"Cerrar"}.site-menu{display:flex;flex-wrap:wrap;gap:12px}.site-menu a{display:inline-flex;align-items:center}@media (max-width:860px){body.menu-open{overflow:hidden}.site-header-inner{align-items:center}.site-brand strong{font-size:16px !important}.site-brand small{font-size:13px !important}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.menu-toggle[aria-expanded="true"]{background:#f8fafc;border-color:rgba(10,106,122,.22)}.menu-toggle[aria-expanded="true"] .menu-toggle-text{display:none}nav.site-menu{display:none;position:absolute;right:0;left:auto;top:calc(100% + 10px);z-index:40;flex-direction:column;flex-wrap:nowrap;gap:0;padding:8px;width:min(280px, calc(100vw - 24px));max-height:calc(100vh - 96px);overflow:auto;background:rgba(255,255,255,.985);border:1px solid rgba(2,6,23,.08);border-radius:18px;box-shadow:0 18px 40px rgba(2,6,23,.16)}nav.site-menu.is-open{display:flex}nav.site-menu a{display:flex;align-items:center;justify-content:flex-start;width:100%;padding:14px 16px;margin:0;background:transparent !important;border:0 !important;border-radius:12px !important;box-shadow:none !important;text-decoration:none}nav.site-menu a + a{border-top:1px solid rgba(2,6,23,.06)}nav.site-menu a:hover,nav.site-menu a:focus-visible{background:rgba(10,106,122,.08) !important;text-decoration:none}nav.site-menu a[style*="underline"]{text-decoration:none !important;color:var(--brand);font-weight:700}}


/* Mobile menu current link */
.site-menu a.is-current{color:var(--brand);font-weight:700;text-decoration:none}

@media (max-width: 768px){
  .home-intro-text{max-width:100%;padding-inline:8px}
  .home-intro-text p{max-width:none}
  .home-cer-desc{max-width:100%;padding-inline:8px}
}


/* ===== HOME INDEX ACCUMULADO ===== */
#home-root .hero{
  padding-top: 6px;
  padding-bottom: 8px;
  margin-top: 4px;
}
#home-root .hero-main{
  flex: 1 1 560px;
}
#home-root .hero-text{
  max-width: 68ch;
}
#home-root .hero-sub{
  margin-top: 10px;
}
.home-actions h2{
  margin-bottom: 14px;
}
.home-cer-desc{
  max-width: 1120px;
}
.cer-step{
  text-align: center;
}
.cer-step-title{
  display: block !important;
  margin: 0 0 10px;
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 800;
  color: var(--text);
}
.cer-step-initial{
  color: var(--brand);
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1;
  margin-right: 1px;
}
.cer-step-desc{
  margin-top: 2px !important;
}
@media (max-width: 860px){
  #home-root .hero{
    padding-top: 2px;
  }
  .cer-step-title{
    font-size: 1.08rem;
  }
}


/* ===== FIX ROBUSTO BLOQUE PROXIMAMENTE / ADOPCIONES ===== */
.home-upcoming,
.home-next{
  max-width:min(860px, calc(100% - 32px)) !important;
  margin:14px auto 10px !important;
  padding:0 !important;
}
.home-upcoming-card,
.home-next-card{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  padding:18px 22px !important;
  text-align:center !important;
}
.home-upcoming-card .kicker,
.home-upcoming-card .home-next-kicker,
.home-next-card .kicker,
.home-next-card .home-next-kicker,
.home-next-kicker{
  display:block !important;
  width:100% !important;
  margin:0 0 8px !important;
  text-align:center !important;
}
.home-upcoming-card h2,
.home-upcoming-card h3,
.home-next-card h2,
.home-next-card h3{
  width:100% !important;
  margin:0 0 8px !important;
  text-align:center !important;
}
.home-upcoming-card p,
.home-next-card p,
.home-next-text,
.home-upcoming-card .muted,
.home-next-card .muted{
  width:100% !important;
  max-width:62ch !important;
  margin:0 auto !important;
  text-align:center !important;
  line-height:1.6;
  overflow-wrap:anywhere;
}
@media (max-width: 768px){
  .home-upcoming,
  .home-next{
    max-width:min(100%, calc(100% - 24px)) !important;
    margin:12px auto 8px !important;
  }
  .home-upcoming-card,
  .home-next-card{
    padding:14px 16px !important;
  }
  .home-upcoming-card p,
  .home-next-card p,
  .home-next-text,
  .home-upcoming-card .muted,
  .home-next-card .muted{
    max-width:34ch !important;
  }
}


/* ===== FORZAR FONDO BLANCO Y MODO CLARO EN PRODUCCIÓN MÍNIMA ===== */
:root{color-scheme:light !important;--bg:#ffffff !important;--surface:#ffffff !important;}
html,body{background:#ffffff !important;color:var(--text) !important;}
.header,.site-header,.footer,main,.section-std,.section-alt,.card,.hero{color-scheme:light !important;}
@media (prefers-color-scheme: dark){html,body,.header,.site-header,.footer,main,.section-std,.section-alt,.card,.hero{background:#ffffff !important;color:var(--text) !important;} .header{border-bottom:1px solid rgba(2,6,23,.06) !important;}}
.form-actions .helper{display:none !important;}