/* ===== Variables base: 2 tipografías + 3 tamaños ===== */
:root{
  /* Colores */
  --azul:#1a73e8; --gris:#6b7280; --borde:#e5e7eb; --bg:#f8fafc; --amarillo:#F4B400;

  /* Radio y espaciamiento */
  --radius:12px;
  --gap-s:8px; --gap-m:12px; --gap-l:16px;

  /* Tipografías (solo 2 familias nominales) */
  --font-1:"Segoe UI", Arial, sans-serif;

  /* Tipos: solo 3 tamaños */
  --fs-sm:.875rem;     /* ~14px */
  --fs-base:.9375rem;  /* ~15px */
  --fs-lg:1.35rem;     /* ~21.6px */
  --lh:1.3;
  --lh-tight:1.2;

  /* Sticky */
  --sticky-top:86px;
}

/* ===== Reset mínimo ===== */
*{ box-sizing:border-box }
html{ font-size:15px }
body{
  margin:0;
  font: var(--fs-base)/var(--lh) var(--font-1);
  background:#fff; color:#1f2937;
}
a{ color:var(--azul); text-decoration:none }
img{ display:block; max-width:100%; height:auto }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

/* ===== Top strip + header ===== */
header.site{ background:#0b3d91; color:#fff }
.topbar{
  width:min(80%,1200px);   /* centrado como el resto */
  margin:0 auto;
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ font-weight:800; letter-spacing:.2px }
nav a{ color:#eaf0ff; margin-left:16px }
nav a:hover{ color:#fff; text-decoration:underline }

/* ===== Contenedor global (80%) ===== */
.container-80{ width:min(80%,1200px); margin-inline:auto; }
@media (max-width:1023.98px){ .container-80{ width:94%; } }

/* ===== Hero compacto (1 columna) ===== */
.hero{ background:linear-gradient(180deg,#f6fbff,#fff) }
.hero-wrap{ padding:16px 0 }
.hero .intro{ display:block }

/* Titulares y texto (3 tamaños forzados) */
h1,.hero h1,.section h2,.coci-title,.coci-form-title{
  font-size:var(--fs-lg) !important; line-height:var(--lh-tight); margin:0 0 6px; font-weight:700;
}
p,li,label,input,select,textarea,.docs-table,.faq-item,.coci-btn,.doc-link,.coci-radio label{
  font-size:var(--fs-base) !important; line-height:var(--lh);
}
.pill,.doc-note,.pdf-caption,.consent-mini,.docs-table td::before{
  font-size:var(--fs-sm) !important; line-height:var(--lh-tight);
}

/* Pills */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  background:#eef2ff; color:#1f2a44;
  border:1px solid #d4dcff; font-weight:600; letter-spacing:.02em
}

/* ===== PDF destacado ===== */
.pdf-hero{ margin-top:10px }
.pdf-caption{ color:#666; margin-top:6px }
.pdf-frame{ width:100%; height:min(68vh, 680px); border:0; display:block }
@media (max-width:1023.98px){ .pdf-frame{ height:75vh } }

/* ===== Botón ===== */
.coci-btn{
  display:inline-block; padding:8px 12px; border-radius:10px;
  background:#1a73e8; color:#fff; border:0; cursor:pointer
}
.coci-btn:hover{ filter:brightness(.95) }

/* ===== Media / banners ===== */
.media{ position:relative; border-radius:10px; overflow:hidden; background:#f3f4f6 }
.media img{ width:100%; height:100%; object-fit:cover; object-position:center }
.ar-16x9{ aspect-ratio:16/9 }
.banner{ aspect-ratio:16/6; max-height:360px }
@media (max-width:900px){ .banner{ aspect-ratio:16/9; max-height:240px } }

/* ===== Cuerpo principal ===== */
.coci-wrap{ margin:14px 0 0 }
.section{ margin:12px 0 } /* un poco más apretado */
.coci-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0
}
@media (max-width:920px){ .coci-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.coci-card{ border:1px solid var(--borde); border-radius:10px; overflow:hidden; background:#fff }
.coci-card img{ height:112px; object-fit:cover }

.specs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
@media (max-width:920px){ .specs{ grid-template-columns:1fr 1fr } }
.spec{ border:1px solid var(--borde); border-radius:10px; padding:10px; background:#fff }
ul.clean{ margin:6px 0 0 18px; padding:0 }
ul.clean li{ margin:4px 0 }

/* ===== Tabla de documentos ===== */
.table-wrap{ margin-top:12px; border:1px solid var(--borde); border-radius:10px; overflow:hidden; background:#fff }
.docs-table{ width:100%; border-collapse:collapse }
.docs-table th,.docs-table td{ padding:8px 12px; border-bottom:1px solid var(--borde); text-align:left; vertical-align:top }
.docs-table thead{ background:#f1f5f9 }
.docs-table tbody tr:last-child td{ border-bottom:none }
.docs-actions-header{text-align:right}
.docs-thumb-header{text-align:center;width:120px}
.docs-actions-cell{ display:flex; justify-content:flex-end; align-items:center; gap:12px }
.docs-thumb-cell{ display:flex; align-items:center; justify-content:center }
.doc-thumb{
  width:64px; height:64px; border-radius:10px; border:1px solid var(--borde);
  background:#f8fafc; object-fit:cover; box-shadow:0 2px 6px rgba(15,23,42,.08)
}
.doc-note{ display:block; margin-top:3px; color:#64748b }
.doc-link{ color:#1a73e8; font-weight:600; position:relative }
.doc-link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:rgba(26,115,232,.4); transform:scaleX(0); transform-origin:left; transition:transform .2s ease
}
.doc-link:hover::after{ transform:scaleX(1) }
@media (max-width:720px){
  .docs-table{ display:block }
  .docs-table thead{ display:none }
  .docs-table tbody{ display:block }
  .docs-table tr{ display:block; padding:12px 14px; border-bottom:1px solid var(--borde) }
  .docs-table tr:last-child{ border-bottom:none }
  .docs-table td{ display:block; border:0; padding:6px 0 }
  .docs-table td::before{
    content:attr(data-label); display:block; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8
  }
  .docs-actions-cell{ justify-content:flex-start; gap:12px }
  .docs-thumb-cell{ justify-content:flex-start; margin-bottom:6px }
}

/* ===== Formulario (debajo del PDF) ===== */
.coci-form-wrap{
  border:1px solid var(--borde); border-radius:10px; padding:12px; background:#fff; box-shadow:0 6px 18px rgba(15,23,42,.06)
}
.coci-form-title{ margin:0 0 6px }
.coci-form-note{ margin:0 0 8px; color:#6b7280 }

.coci-form .coci-form-grid{ display:grid; grid-template-columns:1fr; gap:10px }
@media (min-width:1024px){ .coci-form .coci-form-grid{ grid-template-columns:1fr 1fr; gap:12px } }
.coci-form .span-2{ grid-column:1 / -1 }

.coci-form label, .coci-form fieldset{ display:block; width:100%; margin:0 }

.coci-form input[type="text"],
.coci-form input[type="email"],
.coci-form input[type="tel"],
.coci-form select,
.coci-form textarea{
  width:100%; border:1px solid var(--borde); border-radius:8px; padding:7px 8px;
  font-size:var(--fs-base) !important; line-height:var(--lh-tight)
}
.coci-form textarea{ min-height:84px }

/* Radios compactos */
.coci-radio{ display:flex; align-items:center; gap:10px; margin:0 }
.coci-radio legend{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.coci-radio label{ display:inline-flex; align-items:center; gap:6px }
.coci-radio input{ transform:scale(.95) }

/* Acciones */
.form-actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:2px }
.form-actions .coci-submit{
  padding:8px 12px; border-radius:9px; border:0; background:#1a73e8; color:#fff; font-weight:700; cursor:pointer
}

/* ===== Consent banner (tipografía forzada a 2 familias) ===== */
.consent-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:2147483647;
  pointer-events:auto; max-width:860px; margin:0 auto; background:#0b1220; color:#e5e7eb;
  border:1px solid #23304a; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.35); padding:14px;
  font-family:var(--font-1) !important;
}
.consent-banner h4{ margin:0 0 6px; font-weight:600 }
.consent-banner p{ margin:0 0 10px }
.consent-actions{ display:flex; gap:.5rem; flex-wrap:wrap }
.consent-actions button{ cursor:pointer; border:0; border-radius:8px; padding:.6rem 1rem; font-weight:700 }
.consent-accept{ background:#22c55e; color:#071b0c }
.consent-deny{ background:#374151; color:#fff }
.consent-manage{ background:#0ea5e9; color:#042233 }
.consent-mini{ opacity:.9; margin-left:auto }
.consent-prefs{ display:none; margin:.5rem 0 0; padding:.6rem; border-radius:8px; background:#0f1b31 }
.consent-prefs label{ display:inline-flex; align-items:center; gap:.4rem; margin-right:10px }

/* ===== WhatsApp flotante ===== */
body{ --wa-size:56px }
@media (max-width:420px){ body{ --wa-size:48px } }
#wa-container{ position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px }
#wa-bubble{ width:var(--wa-size);height:var(--wa-size);border-radius:50%;background:#25d366;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:calc(var(--wa-size)*.5);box-shadow:0 6px 18px rgba(0,0,0,.15) }
#wa-form{ display:none;background:#fff;border:1px solid var(--borde);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:10px;min-width:270px;flex-direction:column;gap:6px }
#wa-form.wa-open{ display:flex }
#wa-form input,#wa-form textarea{border:1px solid var(--borde);border-radius:8px;padding:7px;width:100%}
#wa-form button{background:#25d366;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer}
.grecaptcha-badge{z-index:999;left:12px !important;right:auto !important;bottom:14px !important}

/* ===== Footer ===== */
footer.site, footer{
  margin-top:28px; border-top:1px solid var(--borde); background:#fafafa;
}
.foot-wrap, footer p{
  padding:14px 16px; color:#4b5563;
  font-size:var(--fs-base); line-height:var(--lh); text-align:center;
}

/* ===== Forzar tipografías dentro de áreas con estilos antiguos ===== */
.consent-banner *,.docs-table *,#wa-form *,header.site *,nav *,footer *{
  font-family:var(--font-1) !important;
}