/*
===============================================================================
Ecosistema Verum — Capa "Folio" (solo inicio: body.home-folio)
Idea: la página es un expediente. Cada hecho se apoya en un folio.
Se carga después de tema.css. Mantiene navy + dorado + teal de la marca.
===============================================================================
*/

body.home-folio{
    --serif:"Literata",Georgia,"Times New Roman",serif;
    --sans:"Public Sans","Segoe UI",system-ui,sans-serif;
    --papel:#F2F4F7;
    --tinta:#0b1f3b;
    --hilo:#d4a62a;
    --verificado:#0f766e;
    --sello:#8c2f39;
    --linea-papel:#c9d0da;
    counter-reset:folio;
    background:var(--papel);
    font-family:var(--sans);
}
.home-folio h1,.home-folio h2,.home-folio h3{font-family:var(--serif);letter-spacing:-.005em;font-optical-sizing:auto}

/* Sin palabra acentuada en los títulos: el énfasis lo da la frase, no un adorno */
.home-folio h1 em,.home-folio h2 em,.home-folio h3 em{font-style:normal;color:inherit;font-weight:inherit}

/* Sin etiquetas sobre los títulos ni filete dorado decorativo */
.home-folio .seccion-titulo .sobretitulo,
.home-folio .seccion-titulo .linea-oro,
.home-folio .obra .sobretitulo,
.home-folio .cinta{display:none}

/* ---------------- Portada ---------------- */
.portada{
    background:var(--papel);
    padding:clamp(56px,8vw,112px) 0 clamp(48px,6vw,88px);
    border-bottom:1px solid var(--linea-papel);
}
.portada-rejilla{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(32px,5vw,96px);align-items:center;
}
.portada-texto h1{
    font-size:clamp(2.3rem,4.4vw,4.4rem);line-height:1.06;font-weight:700;
    color:var(--tinta);max-width:17ch;margin:0 0 24px;
}
.portada-texto>p{
    font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.7;color:#3b4a63;max-width:58ch;margin:0 0 30px;
}
.portada-texto .botones{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.portada-texto .boton-linea{color:var(--tinta);border:1.5px solid var(--tinta);background:transparent}
.portada-texto .boton-linea:hover{background:var(--tinta);color:#fff}
.portada-nota{
    font-size:.9rem;color:#52617a;border-left:3px solid var(--hilo);padding-left:14px;max-width:56ch;margin:0;
}

/* Hoja de dictamen: la jugada memorable */
.folio-hoja{
    position:relative;margin:0;background:#fff;color:var(--tinta);
    border:1px solid var(--linea-papel);border-radius:3px;
    padding:clamp(22px,2.4vw,38px) clamp(22px,2.6vw,42px) 30px;
    box-shadow:7px 7px 0 -1px #fff,7px 7px 0 0 var(--linea-papel),14px 14px 0 -1px #fff,14px 14px 0 0 var(--linea-papel);
    margin-right:14px;margin-bottom:14px;
}
.folio-hoja::before{ /* hilo del expediente */
    content:"";position:absolute;left:-1px;top:-28px;bottom:-28px;width:3px;background:var(--hilo);opacity:.9;
}
.folio-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding-bottom:12px;border-bottom:1px solid var(--linea-papel);margin-bottom:18px;
    font-size:.82rem;color:#52617a}
.folio-cab strong{font-family:var(--serif);font-size:1rem;color:var(--tinta);font-weight:600}
.folio-hallazgo{margin:0 0 20px}
.folio-hallazgo p{font-family:var(--serif);font-size:1.06rem;line-height:1.6;margin:0 0 8px;color:var(--tinta)}
.cita-folio{
    display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--verificado);
    background:#e6f3f1;border:1px solid #b7dcd7;border-radius:3px;padding:3px 9px;
}
.cita-folio::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verificado)}
.folio-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
    margin-top:6px;padding-top:14px;border-top:1px solid var(--linea-papel);font-size:.78rem;color:#6a778c}
.sello{
    position:absolute;right:clamp(18px,2vw,32px);bottom:56px;
    transform:rotate(-8deg);background:rgba(255,255,255,.7);border:2px solid var(--sello);color:var(--sello);
    font-family:var(--serif);font-weight:700;font-size:.72rem;line-height:1.25;text-align:center;
    padding:5px 9px;border-radius:3px;opacity:.82;
}

/* ---------------- Folios en el margen ---------------- */
.home-folio .seccion-titulo{counter-increment:folio;position:relative;max-width:62ch}
.home-folio .seccion-titulo h2{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:700;line-height:1.12;color:var(--tinta);text-align:left}
.home-folio .seccion-titulo p{color:#3b4a63;max-width:60ch}
.home-folio .seccion-titulo[style]{text-align:left!important;margin-inline:0!important}
@media (min-width:1560px){
    .home-folio .seccion-titulo::before{
        content:"Folio " counter(folio);
        position:absolute;left:-118px;top:.55em;width:88px;text-align:right;
        font-family:var(--serif);font-size:.82rem;color:#7a879c;
        border-right:2px solid var(--hilo);padding-right:12px;line-height:1.2;
    }
}

/* ---------------- Superficies: hojas, no tarjetas blandas ---------------- */
.home-folio .cifras{background:#fff;border-block:1px solid var(--linea-papel)}
.home-folio .cifras .contenedor,.home-folio .cifras-fila{box-shadow:none!important;border-radius:0!important;background:transparent!important}
.home-folio .cifra strong{font-family:var(--serif);color:var(--tinta)}
.home-folio .producto,.home-folio .panel,.home-folio .paso{border-radius:3px}
.home-folio .producto{
    background:#fff;border:1px solid var(--linea-papel);
    box-shadow:5px 5px 0 -1px #fff,5px 5px 0 0 var(--linea-papel);
}
.home-folio .camino .paso .num{
    font-family:var(--serif);border-radius:3px;background:var(--tinta);color:#fff;
}
.home-folio .banda-final{background:var(--tinta)}
.home-folio .banda-final h2{font-family:var(--serif);font-weight:700;max-width:22ch}

/* Foco visible y movimiento reducido */
.home-folio a:focus-visible,.home-folio button:focus-visible{outline:3px solid var(--hilo);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.home-folio *{animation:none!important;transition:none!important}}

/* ---------------- Móvil ---------------- */
@media (max-width:900px){
    .portada-rejilla{grid-template-columns:1fr}
    .portada-texto h1{max-width:none}
    .folio-hoja{margin-right:8px;margin-bottom:8px}
    .sello{position:static;display:inline-block;transform:none;margin-bottom:12px}
}

/* ---------------- Confianza (qué pasa con tus documentos) ---------------- */
.confianza-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;margin-top:34px;border-top:1px solid var(--linea-papel)}
.confianza-item{padding:26px 28px 26px 0;border-bottom:1px solid var(--linea-papel)}
.confianza-item+.confianza-item{padding-left:28px;border-left:1px solid var(--linea-papel)}
.confianza-item h3{font-size:1.15rem;font-weight:700;color:var(--tinta);margin:0 0 8px}
.confianza-item p{font-size:.98rem;line-height:1.65;color:#3b4a63;margin:0;max-width:44ch}
.confianza-enlace{margin-top:18px}
.confianza-enlace a{font-weight:600;color:var(--tinta);text-decoration:underline;text-decoration-color:var(--hilo);text-underline-offset:4px}
@media (max-width:760px){.confianza-item+.confianza-item{padding-left:0;border-left:0}}
.home-folio .portada-nota a{color:var(--tinta);font-weight:600}
.home-folio .portada .chips-especialidades span{background:#fff;color:var(--tinta);border:1px solid var(--linea-papel);border-radius:3px}

/* ---------------- Índice del expediente (inicio) ---------------- */
.indice ol{list-style:none;margin:0;padding:0}
.indice li+li{border-top:1px solid var(--linea-papel)}
.indice a{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:baseline;padding:14px 4px;color:var(--tinta);text-decoration:none}
.indice a:hover .indice-cuerpo strong{text-decoration:underline;text-decoration-color:var(--hilo);text-underline-offset:4px;text-decoration-thickness:2px}
.indice-folio{font-family:var(--serif);font-size:.82rem;color:#7a879c}
.indice-cuerpo strong{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:600}
.indice-cuerpo small{display:block;font-size:.86rem;line-height:1.45;color:#52617a;margin-top:2px}
.indice-estado{font-size:.76rem;font-weight:600;color:var(--verificado);white-space:nowrap}
.indice-estado.en-camino{color:#8a6a12}
@media (max-width:520px){.indice a{grid-template-columns:44px 1fr}.indice-estado{grid-column:2}}

/* ---- Versión que se descarga, bajo el botón ---- */
.home-folio .version-descarga{
    margin:12px 0 0;
    font-size:.88rem;
    color:#52617a;
}
.home-folio .version-descarga strong{color:var(--tinta);font-weight:600}

/* ---- Logo animado de VerumIA (HUD) en el hero de verumia.html ---- */
.home-folio .hud-panel{
    background:#0b1f3b;
    border-radius:16px;
    padding:18px 18px 14px;
    margin:0;
}
.home-folio .hud-panel .hud{width:100%}

/* Franja de la hoja de cronología, debajo del hero */
.home-folio .folio-demo-rejilla{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:clamp(28px,5vw,80px);
    align-items:center;
}
@media (max-width:900px){
    .home-folio .folio-demo-rejilla{grid-template-columns:1fr}
}

/* ---- Elección de versión en la ventana de descarga ---- */
.version-opciones{border:1px solid var(--borde,#d8dee8);border-radius:10px;padding:12px 14px;margin:0 0 14px}
.version-opciones legend{font-size:.9rem;font-weight:600;color:var(--marca-oscuro,#0b1f3b);padding:0 6px}
.version-opcion{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;cursor:pointer;font-weight:400}
.version-opcion+.version-opcion{border-top:1px solid #eef1f5}
.version-opcion input{margin-top:4px}
.version-opcion strong{display:block;font-size:.95rem;color:var(--marca-oscuro,#0b1f3b)}
.version-opcion small{display:block;font-size:.82rem;line-height:1.4;color:#52617a;margin-top:2px}
.version-ayuda{font-size:.8rem;color:#52617a;margin:8px 0 0}

/* ---- Ventana de descarga: más ancha y menos alta ---- */
.demo-modal-caja{
    background:var(--superficie);
    border-radius:var(--radio);
    width:min(940px,100%);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    padding:22px 26px 24px;
    position:relative;
    box-shadow:var(--sombra-alta);
}
.demo-modal-rejilla{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:22px 28px;
    align-items:start;
}
.demo-modal-caja .version-opciones{margin:0}
.demo-col-datos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 14px;
    align-content:start;
}
.demo-col-datos > p{grid-column:1 / -1;margin:0 !important;font-size:.88rem !important}
.demo-col-datos > label{margin-top:0 !important}
.demo-col-datos > label:last-child{grid-column:1 / -1}
.demo-modal-legal{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 22px;
    margin-top:14px;
}
.demo-modal-legal > label{margin-top:0 !important}
#demo-modal-mensaje{margin:8px 0 0 !important}
#demo-modal-boton{margin-top:8px !important}
@media (max-width:760px){
    .demo-modal-caja{padding:18px 16px 20px}
    .demo-modal-rejilla,.demo-modal-legal{grid-template-columns:1fr}
    .demo-col-datos{grid-template-columns:1fr}
}

/* Ajuste fino: que quepa completa en pantallas bajas (laptops de ~650 px de alto) */
.demo-modal-caja{padding:16px 24px 18px}
.demo-modal-caja h3{font-size:1.15rem}
.demo-modal-caja .version-opciones{padding:6px 12px 8px}
.demo-modal-caja .version-opcion{padding:6px 4px}
.demo-modal-caja .version-opcion small{font-size:.8rem;line-height:1.35}
.demo-modal-caja .version-ayuda{font-size:.78rem;margin-top:4px}
.demo-modal-legal{margin-top:10px;gap:8px 22px}
.demo-modal-legal > label{font-size:.8rem !important;line-height:1.3 !important}
.demo-modal-caja .version-descarga{margin:6px 0 0 !important}

/* ---- Anuncio: VerumIA funciona mejor con Claude Desktop y Google ---- */
.anuncio-integraciones{background:#0b1f3b;color:#fff;border-left:6px solid #d4a62a;padding:26px 0 74px}  /* el bloque de cifras de abajo se monta sobre este */
.anuncio-rejilla{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px 34px;align-items:center}
.anuncio-logos{display:flex;align-items:center;gap:14px}
.anuncio-logo{width:68px;height:68px;border-radius:16px;background:#fff;display:grid;place-items:center;padding:13px;box-sizing:border-box}
.anuncio-logo svg{width:100%;height:100%;display:block}
.anuncio-logo-claude{width:auto;min-width:104px;padding:0 16px}
.anuncio-nombre-claude{font-family:var(--serif);font-weight:700;font-size:1.28rem;color:#c15f3c;letter-spacing:-.01em}
.anuncio-mas{font-size:1.6rem;font-weight:300;color:#d4a62a;line-height:1}
.anuncio-texto h2{margin:0 0 6px;font-size:clamp(1.25rem,2.1vw,1.7rem);color:#fff;font-weight:700;line-height:1.2}
.anuncio-texto p{margin:0;font-size:.96rem;line-height:1.6;color:#d6e0ef;max-width:78ch}
.anuncio-texto strong{color:#fff}
.anuncio-marcas{margin:16px auto 0;font-size:.74rem;line-height:1.45;color:#8ea3c0}
@media (max-width:900px){
    .anuncio-rejilla{grid-template-columns:1fr}
    .anuncio-accion{justify-self:start}
}

/* ---- Tabla de requisitos del equipo ---- */
.tabla-requisitos{width:100%;border-collapse:collapse;min-width:760px;background:#fff;border:1px solid var(--linea-papel);border-radius:10px;overflow:hidden}
.tabla-requisitos th,.tabla-requisitos td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid #eef1f5;font-size:.93rem;line-height:1.45}
.tabla-requisitos thead th{background:var(--tinta);color:#fff;font-family:var(--serif);font-size:1rem;font-weight:700;border-bottom:3px solid var(--hilo)}
.tabla-requisitos tbody th{width:17%;font-weight:600;color:var(--tinta);background:#f6f8fb}
.tabla-requisitos tbody tr:last-child th,.tabla-requisitos tbody tr:last-child td{border-bottom:none}
.tabla-requisitos td{width:27.6%}
.req-si{color:var(--verificado);font-weight:700;margin-right:4px}
.req-no{color:#9aa5b8;font-weight:700;margin-right:4px}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}