/* ══════════════════════════════════════════════════════════════
   AGP · Sección Agentes
   Páginas: /agentes/index.html · /agentes/boe.html

   POR QUÉ ES UNA HOJA APARTE Y NO SE REUTILIZA LA DE LA PORTADA
   -------------------------------------------------------------
   La portada (index.html) tiene su paleta oscura en un <style> de
   750 líneas incrustado dentro del propio HTML, encima de agp.css.
   Para reutilizarla habría dos caminos y los dos son peores:

     · copiar esas 750 líneas aquí — dos copias que se separan al
       primer retoque;
     · sacarlas de index.html a un fichero común — tocar la portada
       entera, que hoy funciona, para añadir una página nueva.

   Se hace lo mismo que ya se hizo con las páginas legales
   (css/legal.css): una hoja propia que HEREDA LOS MISMOS TOKENS y
   las mismas tres familias tipográficas. Los valores de abajo están
   copiados uno a uno del bloque de index.html, así que el color y la
   letra son literalmente los mismos.

   ⚠️ Si algún día cambia la paleta de la portada, cambia aquí también.
   ══════════════════════════════════════════════════════════════ */

:root {
  --black:   #0B0A09;
  --black-2: #131210;
  --paper:   #F2EFE9;
  --paper-2: #C9C4B8;
  --red:     #E8442E;
  --red-ink: #C9301C;
  --line:    rgba(242, 239, 233, 0.10);
  --line-2:  rgba(242, 239, 233, 0.18);
  --tenue:   rgba(245, 236, 215, 0.58);
  --tenue-2: rgba(245, 236, 215, 0.38);
  --serif:   'Playfair Display', Georgia, serif;
  --mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --sans:    'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--red); color: #fff; }

/* La misma retícula de fondo que la portada, tenue. Es DOM puro y no
   WebGL: estas páginas no necesitan la GPU para nada. */
.rejilla {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(246,245,242,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,245,242,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 100%);
}

.envoltorio {
  position: relative; z-index: 1;
  width: min(1100px, calc(100vw - 48px));
  margin: 0 auto;
}

/* ── Barra superior ─────────────────────────────────────────── */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--line);
}
.barra__marca {
  font-family: var(--serif); font-weight: 800; font-size: 20px;
  color: var(--paper); text-decoration: none; letter-spacing: 0.01em;
}
.barra__marca i { color: var(--paper-2); font-style: normal; }
.barra__enlaces { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.barra__enlaces a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--paper-2); text-decoration: none;
  transition: color 0.2s;
}
.barra__enlaces a:hover { color: var(--red); }

/* ── Piezas compartidas ─────────────────────────────────────── */
.etiqueta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red);
}
.etiqueta::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); animation: latido 2.2s infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

h1, h2, h3 { font-family: var(--serif); letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(38px, 6.5vw, 76px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; }
h3 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; letter-spacing: -0.02em; }

.entradilla {
  font-size: clamp(16px, 2vw, 19px); line-height: 1.6;
  color: var(--tenue); max-width: 62ch;
}

.boton {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border-radius: 100px; padding: 15px 28px;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.boton--rojo {
  background: var(--red); color: #fff;
  box-shadow: 0 10px 30px -10px rgba(232, 68, 46, 0.55);
}
.boton--rojo:hover { background: var(--red-ink); box-shadow: 0 14px 36px -8px rgba(232, 68, 46, 0.65); }
.boton--fantasma { border-color: var(--line-2); color: var(--paper); }
.boton--fantasma:hover { border-color: var(--paper); }
.boton .flecha { transition: transform 0.25s var(--ease); }
.boton:hover .flecha { transform: translateX(4px); }

/* ── Portada de la sección ──────────────────────────────────── */
.cabecera { padding: 84px 0 56px; }
.cabecera h1 { margin: 18px 0 22px; }

.rejilla-agentes {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding-bottom: 40px;
}

.tarjeta {
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 28px 28px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.tarjeta--viva:hover { border-color: var(--line-2); transform: translateY(-3px); }
/* Los que todavía no existen se ven distintos A PROPÓSITO: apagados, sin
   hover y sin botón. Prometer con la misma tarjeta que lo que ya funciona
   sería vender humo. */
.tarjeta--pronto { opacity: 0.55; }

.tarjeta__marca {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tarjeta--viva .tarjeta__marca { color: var(--red); }
.tarjeta--pronto .tarjeta__marca { color: var(--tenue-2); }
.tarjeta p { margin: 0; color: var(--tenue); font-size: 15px; }
.tarjeta__precio {
  font-family: var(--mono); font-size: 13px; color: var(--paper);
  padding-top: 6px;
}
.tarjeta__precio span { color: var(--tenue-2); }
.tarjeta .boton { margin-top: auto; align-self: flex-start; }

/* ── Página de producto ─────────────────────────────────────── */
.producto { padding: 76px 0 40px; }
.producto__titular { max-width: 22ch; margin: 18px 0 24px; }

.bloque { padding: 52px 0; border-top: 1px solid var(--line); }
.bloque > h2 { margin-bottom: 26px; }

.pasos { display: grid; gap: 0; }
.paso {
  display: flex; gap: 22px; align-items: flex-start;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.paso:last-child { border-bottom: 0; }
.paso__num {
  font-family: var(--mono); font-size: 12px; color: var(--red);
  padding-top: 4px; flex-shrink: 0; min-width: 28px;
}
.paso b { display: block; font-size: 16px; margin-bottom: 5px; color: var(--paper); }
.paso p { margin: 0; color: var(--tenue); font-size: 15px; }

.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lista li {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: 15.5px; color: var(--tenue);
}
.lista li::before {
  content: "→"; color: var(--red); font-family: var(--mono);
  font-size: 14px; flex-shrink: 0; line-height: 1.5;
}
.lista li b { color: var(--paper); font-weight: 600; }

/* El precio. Va en su propio bloque y con el número grande: es un producto
   cerrado y el precio es parte de lo que se enseña, no algo que se
   esconde hasta la llamada. */
.precio {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 30px 0 8px;
}
.precio__cifra {
  font-family: var(--serif); font-size: clamp(46px, 8vw, 76px);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
}
.precio__que { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tenue-2); }
.precio__nota { color: var(--tenue); font-size: 15px; margin: 14px 0 0; max-width: 60ch; }

/* ── El formulario ──────────────────────────────────────────── */
.compra {
  display: grid; gap: 44px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  padding: 52px 0 80px;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) { .compra { grid-template-columns: 1fr; } }

.ficha {
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(14, 9, 7, 0.94);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 34px 30px;
  box-shadow: 0 32px 72px -40px rgba(0, 0, 0, 0.65);
}
.ficha label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(245, 236, 215, 0.46);
  margin-bottom: -6px;
}
.ficha input,
.ficha select,
.ficha textarea {
  width: 100%;
  font-family: var(--mono); font-size: 13px; color: var(--paper);
  background: rgba(245, 236, 215, 0.05);
  border: 1px solid rgba(245, 236, 215, 0.12);
  border-radius: 8px;
  padding: 14px 15px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ficha textarea { resize: vertical; min-height: 92px; font-family: var(--sans); font-size: 14px; }
.ficha input::placeholder, .ficha textarea::placeholder {
  color: rgba(245, 236, 215, 0.28);
}
.ficha input:focus, .ficha select:focus, .ficha textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 68, 46, 0.15);
}
.ficha select option { background: #16100D; color: var(--paper); }
.ficha .boton { justify-content: center; margin-top: 10px; }

/* El cepo para bots. Se saca de la pantalla con posición absoluta en vez de
   display:none porque hay bots que se saltan lo que está oculto del todo. */
.cepo {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.consentimiento { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; }
.consentimiento input[type="checkbox"] {
  width: 16px; min-width: 16px; height: 16px;
  margin: 2px 0 0; padding: 0;
  accent-color: var(--red); cursor: pointer; flex-shrink: 0;
}
.consentimiento label {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.55;
  letter-spacing: 0; text-transform: none;
  color: rgba(245, 236, 215, 0.5); margin: 0; cursor: pointer;
}
.consentimiento a { color: var(--paper-2); }

.pie-ficha {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: rgba(245, 236, 215, 0.32); text-align: center; margin: 0;
}

/* Errores y confirmación */
.campo-mal { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(232,68,46,0.15) !important; }
.error-campo {
  display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--red); margin-top: 4px;
}
.ficha__hecho {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 44px 22px; text-align: center; min-height: 300px;
}
.ficha__hecho h3 { font-size: clamp(21px, 3vw, 27px); color: var(--paper); }
.ficha__hecho p { font-size: 14px; color: var(--tenue); line-height: 1.6; margin: 0; }

/* ── Preguntas ──────────────────────────────────────────────── */
.preguntas { display: grid; gap: 0; }
.pregunta { padding: 26px 0; border-bottom: 1px solid var(--line); }
.pregunta:last-child { border-bottom: 0; }
.pregunta h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin-bottom: 10px; letter-spacing: 0; }
.pregunta p { margin: 0; color: var(--tenue); font-size: 15px; }

/* ── Pie ────────────────────────────────────────────────────── */
.pie {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);
  padding: 34px 0 54px;
  display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--tenue-2);
}
.pie a { color: var(--tenue-2); text-decoration: none; }
.pie a:hover { color: var(--paper); }
.pie nav { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .cabecera, .producto { padding-top: 56px; }
  .ficha { padding: 26px 22px; }
}

/* 30-ago: el precio pasa a 475 € sin IVA — la coletilla va pequeña y al lado */
.precio__iva{font-size:.45em;color:var(--tinta-suave,#888);font-weight:400;letter-spacing:.02em}