/* ════════════════════════════════════════════════════════════════════════
   PHOENIX 39 · PORTADA  (landing.css)
   12-oct-2026 · opus-5-planner-1

   REGLA ÚNICA DE ESTE FICHERO
   Aquí NO se escribe ni un color a mano. Todo sale de los tokens de
   f39-skin.css (--gold, --bg, --surface, --r, --density…). El motivo es
   práctico: el día que la portada tenga que vestirse de otra piel para una
   feria, una campaña o un cliente, basta cambiar data-skin en el <html> y
   esta hoja entera se adapta sola. Si se cuela un #hexadecimal suelto, ese
   trozo se queda anclado para siempre y rompe la marca.

   Se carga DESPUÉS de f39-skin.css: aquí se pone la anatomía de la portada
   (rejilla, ritmo, tamaños). La piel pone la materia.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: #e9eef7;
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-weight: var(--w-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: var(--w-title); letter-spacing: var(--tracking); line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

main { display: block; }

section {
  max-width: 1080px;
  margin: 0 auto;
  padding: calc(72px * var(--density)) 24px;
}

/* ── Marca y cabecera ──────────────────────────────────────────────────── */
.marca {
  font-weight: var(--w-bold);
  letter-spacing: .02em;
  background: linear-gradient(100deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--top);
  padding: 0 24px;
  border-bottom: var(--line-w) solid rgba(255, 255, 255, .08);
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}

.barra-cta {
  font-size: .9rem;
  color: #aab6c8;
  transition: color var(--t-fast) var(--ease);
}
.barra-cta:hover { color: var(--gold-2); }

/* ── Entrada ───────────────────────────────────────────────────────────── */
.entrada {
  text-align: center;
  padding-top: calc(96px * var(--density));
  padding-bottom: calc(88px * var(--density));
}

.antetitulo {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 14px;
  border: var(--line-w) solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: var(--r-pill);
  color: var(--gold-2);
  font-size: .78rem;
  font-weight: var(--w-medium);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.entrada h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  max-width: 17ch;
  margin: 0 auto;
}

.entradilla {
  max-width: 56ch;
  margin: 22px auto 0;
  color: #9fb0c6;
  font-size: clamp(1rem, 1.7vw, 1.16rem);
}

.entrada .boton { margin-top: 34px; }

.apunte {
  margin-top: 14px;
  color: #7f8ea4;
  font-size: .88rem;
}

/* ── Sello Fénix · marca de agua de la entrada ──────────────────────────
   LAS DOS VARIABLES VAN JUNTAS, A PROPÓSITO (así se pidió):

       --fenix-opacidad   .04 casi invisible · .06 por defecto · .08 se nota
       --fenix-sello      la silueta; cualquiera de las cinco de logos/

   ESTADO HOY: APAGADO (--fenix-sello: none). No es un olvido.
   En esta carpeta no hay ninguna silueta: `find` de *fenix*.svg y de la
   carpeta logos/ devuelve vacío en todo el proyecto. Dejarlo apuntando a un
   fichero inexistente llenaría la consola de 404 en la portada. Con `none`
   no se pinta nada y no se queja nadie; el día que lleguen los SVG se
   enciende cambiando UNA línea:

       --fenix-sello: url("logos/fenix-elite.svg");

   POR QUÉ background-image Y NO mask-image
   Con `mask` la silueta tomaría el oro de la piel activa y cambiaría sola al
   cambiar data-skin, que sería más elegante. No se usa por el reparto de
   daños: si el fichero falta, una máscara rota puede pintar el RECTÁNGULO
   dorado entero sobre la portada, y eso es un desastre en la página que
   vende. Con background-image, si falta el fichero no se pinta nada. Se
   elige el fallo inofensivo. El SVG ya viene en oro de fábrica, así que a
   esta opacidad no se nota la diferencia.
   (Si algún día se prefiere lo otro: cambiar las dos líneas marcadas abajo
   por  -webkit-mask-image: var(--fenix-sello);  mask-image: …;  y añadir
   background: var(--gold-2);  mask-size: contain;  mask-repeat: no-repeat.)

   REGLAS DEL MANUAL, RESPETADAS Y VIGILADAS
   · sin girarlo      → no hay rotate en ninguna parte
   · sin deformarlo   → background-size: contain (encaja, nunca estira)
   · sin sombras      → ni box-shadow ni filter, y no los añadas luego

   POR QUÉ AQUÍ Y NO "a la derecha del titular"
   La indicación original describe una portada con el titular a la izquierda
   y una pantalla de demo a la derecha. Esta portada NO es esa: el titular va
   CENTRADO y no hay demo, así que ese hueco concreto no existe. El
   equivalente honesto es el margen derecho libre de la entrada, y da de
   sobra — medido, no supuesto, a 960 px (el ancho más apretado en que se
   muestra): el titular ocupa ~440 px de los ~912 disponibles, deja ~236 px
   de margen a cada lado, y el sello mide ~134 px. Nunca se tocan.

   POR DEBAJO DE 960 px NO APARECE
   No hay margen libre y acabaría bajo el texto, que es justo lo que el
   manual llama invadir su área de protección. Se enciende con min-width,
   no se apaga con max-width: así el caso seguro es el de por defecto.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --fenix-opacidad: .06;
  --fenix-sello: none;
}

@media (min-width: 960px) {
  .entrada { position: relative; }

  .entrada::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);          /* centrado vertical, NO es un giro */
    width: clamp(120px, 14vw, 190px);
    aspect-ratio: 1 / 1;
    background-image: var(--fenix-sello); /* ← línea 1 si se pasa a mask */
    background-size: contain;             /* ← línea 2 si se pasa a mask */
    background-repeat: no-repeat;
    background-position: center;
    opacity: var(--fenix-opacidad);
    pointer-events: none;                 /* jamás roba un clic al botón */
    z-index: 0;
  }

  /* El contenido siempre por encima del sello, pase lo que pase. */
  .entrada > * { position: relative; z-index: 1; }
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(46px * var(--density));
  padding: 0 28px;
  border: var(--line-w) solid color-mix(in srgb, var(--gold) 46%, transparent);
  border-radius: var(--r-sm);
  color: var(--gold-2);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking);
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.boton:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  transform: translateY(calc(-1px * var(--motion)));
}

.boton-fuerte {
  border-color: transparent;
  background: linear-gradient(100deg, var(--gold), var(--gold-2));
  color: var(--gold-ink);
  box-shadow: 0 calc(14px * var(--shadow-depth)) calc(34px * var(--shadow-depth))
              color-mix(in srgb, var(--gold) calc(22% * var(--glow)), transparent);
}
.boton-fuerte:hover {
  background: linear-gradient(100deg, var(--gold-2), var(--gold));
  border-color: transparent;
}

/* ── Franja de promesa ─────────────────────────────────────────────────── */
.franja {
  text-align: center;
  border-top: var(--line-w) solid rgba(255, 255, 255, .07);
  border-bottom: var(--line-w) solid rgba(255, 255, 255, .07);
}
.franja h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.franja p {
  max-width: 62ch;
  margin: 18px auto 0;
  color: #9fb0c6;
}

/* ── Precios ───────────────────────────────────────────────────────────── */
.titulo-seccion {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: calc(44px * var(--density));
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--pad-lg);
  padding-top: calc(28px * var(--density));
  border: var(--line-w) solid rgba(255, 255, 255, .09);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.plan:hover {
  border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  transform: translateY(calc(-2px * var(--motion)));
}

.plan-destacado {
  border-color: color-mix(in srgb, var(--gold) 46%, transparent);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.plan-sello {
  position: absolute;
  top: calc(-11px * var(--density));
  left: var(--pad-lg);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--gold), var(--gold-2));
  color: var(--gold-ink);
  font-size: .72rem;
  font-weight: var(--w-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.plan-nombre { font-size: 1.12rem; }

.plan-precio {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cifra {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: var(--w-bold);
  background: linear-gradient(100deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.periodo { color: #7f8ea4; font-size: .92rem; }

/* La línea que explica qué es una mesa. Va bajo CADA precio, con las palabras
   exactas acordadas: nadie debería tener que adivinar qué compra. */
.plan-mesa {
  color: #aab6c8;
  font-size: .9rem;
  padding-bottom: 12px;
  border-bottom: var(--line-w) solid rgba(255, 255, 255, .07);
}

.plan-detalle {
  color: #8fa0b6;
  font-size: .92rem;
  flex: 1;
}

.plan .boton { margin-top: 6px; width: 100%; }

/* "+ IVA": una sola vez, bajo el bloque entero, en letra pequeña. */
.iva {
  margin-top: 26px;
  text-align: center;
  color: #7f8ea4;
  font-size: .84rem;
}

/* ── Cierre ────────────────────────────────────────────────────────────── */
.cierre {
  text-align: center;
  border-top: var(--line-w) solid rgba(255, 255, 255, .07);
}
.cierre h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cierre p { margin-top: 12px; color: #9fb0c6; }
.cierre .boton { margin-top: 28px; }

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 34px 24px calc(48px);
  border-top: var(--line-w) solid rgba(255, 255, 255, .07);
  font-size: .9rem;
}
.pie-dominio { color: #7f8ea4; }

/* ── Accesibilidad y respeto al usuario ────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

@media (max-width: 640px) {
  section { padding-left: 18px; padding-right: 18px; }
  .entrada { padding-top: calc(60px * var(--density)); }
}