/* Generado por build-guia.py: no editar a mano. Fuente: guia.src.css */
/* Estilos propios de la guía "Modelo de política de uso de IA para estudios jurídicos" (politica-de-ia.html, 25 sep 2026).
   Se suman a legal.css (compartido de arcilla.html + servicios.src.css + legal.src.css: nav, hero de servicio, preguntas
   frecuentes .l-q, cierre, pie, diálogo y campos .field). Armado: python3 build-guia.py -> arcilla-assets/guia.css. */

/* ============ Hero ============ */
.g-hero .s-lead{font-size:var(--text-lg)}
.g-hero .s-hero-media{max-width:480px;justify-self:end;width:100%}
.g-hero .s-hero-media img{object-position:18% 50%}  /* el sello está a la izquierda de la foto */
.g-note{margin:-12px 0 0;font-size:var(--text-sm);color:var(--text-subtle)}

/* ============ Por qué ============ */
.g-por .h2{font-size:clamp(32px,3.8vw,50px);line-height:var(--leading-tight);margin-bottom:var(--space-7)}
.g-cards{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.g-cards li{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:24px;background:var(--cream-100)}
.g-cards h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.15;letter-spacing:-.02em;color:var(--terracotta-600)}
.g-cards p{margin:0;font-size:16px;line-height:1.55;color:var(--text-muted);text-wrap:pretty}

/* ============ Armador: formulario fijo a la izquierda, el modelo como una hoja a la derecha ============ */
.g-armar{background:var(--band-cream)}
.g-armar-head{display:flex;flex-direction:column;gap:16px;margin-bottom:var(--space-7)}
.g-armar .h2{font-size:clamp(32px,3.8vw,50px);line-height:var(--leading-tight)}
.g-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.g-panel{position:sticky;top:calc(var(--nav-h) + 20px)}
.g-form{display:flex;flex-direction:column;gap:16px;padding:26px;border-radius:24px;background:var(--white);box-shadow:0 20px 50px -34px rgba(92,42,29,.45)}
.g-form-h{margin:0;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.02em}
.g-set{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.g-set legend{padding:0;margin-bottom:8px;font-size:var(--text-sm);font-weight:500;color:var(--text-body)}
.g-opts{display:flex;flex-wrap:wrap;gap:8px}
.g-opt{position:relative;display:inline-flex;cursor:pointer}
.g-opt input{position:absolute;opacity:0;width:1px;height:1px}
.g-opt span{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(34,20,15,.28);background:var(--white);font-size:15px;color:var(--text-body);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.g-opt:hover span{border-color:var(--terracotta-500)}
.g-opt input:checked+span{background:var(--terracotta-600);border-color:var(--terracotta-600);color:var(--cream-50)}
.g-opt input:focus-visible+span{outline:2px solid var(--terracotta-500);outline-offset:2px}
.g-otras{margin-top:6px}
.g-hint{margin:0;font-size:13px;line-height:1.4;color:var(--text-subtle)}
.g-form .field input{height:42px}
.g-acts{display:flex;flex-direction:column;gap:10px;margin-top:4px}
/* Escritorio: el formulario es más alto que muchas pantallas. Queda fijo al costado con su propio scroll y los botones
   siempre a la vista, pegados abajo. */
@media (min-width:1001px){
  .g-form{max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:0;scrollbar-width:thin;scrollbar-color:var(--cream-300) transparent}
  .g-acts{position:sticky;bottom:0;margin:0 -26px;padding:14px 26px 20px;background:var(--white);box-shadow:0 -14px 18px -12px rgba(92,42,29,.18)}
}
.g-acts .btn{width:100%}
.g-acts .btn .icon{width:18px;height:18px}
.g-priv{margin:0;font-size:13px;line-height:1.4;color:var(--text-subtle);text-align:center}

/* La hoja: el modelo tal como sale en Word (mismo orden y jerarquía). */
.pol-doc{padding:clamp(28px,5vw,64px);border-radius:10px;background:var(--white);box-shadow:0 30px 70px -40px rgba(58,24,16,.45);font-size:16px;line-height:1.65;color:var(--text-body);min-width:0}
.pol-doc [hidden]{display:none !important}
.pol-doc p{margin:0 0 12px;text-wrap:pretty}
.pol-doc ul{margin:0 0 14px;padding-left:22px}
.pol-doc li{margin-bottom:6px;text-wrap:pretty}
.pol-doc li::marker{color:var(--terracotta-500)}
.pol-kick{font-size:12px !important;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle)}
.pol-h1{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-.03em;color:var(--terracotta-600);text-wrap:balance}
.pol-org{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.02em;margin-bottom:6px !important}
.pol-meta{font-size:15px;color:var(--text-muted);padding-bottom:20px;margin-bottom:24px !important;border-bottom:1px solid var(--border-subtle)}
.pol-doc h2{margin:28px 0 10px;font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.02em;color:var(--text-body)}
.pol-pais-h{margin:16px 0 6px !important;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta-600)}
.pol-aviso{margin:0 0 14px;padding:16px 20px;border-left:3px solid var(--terracotta-300);border-radius:0 12px 12px 0;background:var(--cream-50)}
.pol-aviso p{margin:0}
.pol-cond{padding:12px 16px;border-radius:12px;background:var(--terracotta-100)}
.pol-nota{font-size:14px;color:var(--text-muted)}
.pol-firma{margin-bottom:18px !important}
.pol-pie{margin-top:28px !important;padding-top:16px;border-top:1px solid var(--border-subtle);font-size:13px;line-height:1.5;color:var(--text-subtle)}
/* Lo que falta completar se marca; lo completado queda como texto normal. */
.ph{padding:0 4px;border-radius:4px;background:var(--terracotta-100);color:var(--terracotta-700)}
.pol-doc li.ph{display:list-item;padding:0;background:none}
.pol-doc li.ph::before{content:none}

/* ============ Responsive ============ */
@media (max-width:1000px){
  .g-grid{grid-template-columns:1fr}
  .g-panel{position:static}
}
@media (max-width:900px){
  .g-cards{grid-template-columns:1fr}
  .g-hero .s-hero-media{justify-self:center}
}
@media (max-width:520px){
  .g-form{padding:20px}
  .pol-doc{padding:24px 20px}
}

/* ============ Impresión: solo la hoja ============ */
@media print{
  @page{margin:18mm}
  body{background:#fff}
  .nav,.dlg,.toast,.sr,main>section:not(#armar),.g-armar-head,.g-panel{display:none !important}
  .g-armar{padding:0;background:#fff}
  .g-grid{display:block}
  .pol-doc{padding:0;box-shadow:none;border-radius:0;font-size:11.5pt}
  .ph{background:none;color:inherit;padding:0}
  .pol-doc h2{break-after:avoid}
  .pol-aviso,.pol-doc li{break-inside:avoid}
}