/* ==========================================================
   AMERICA FETISH WEB V2 — BLOC 01 / LAYOUT GLOBAL
   ----------------------------------------------------------
   Este archivo contiene la base visual común para TODA la web.
   La idea es que en los siguientes bloques solo tengamos que
   añadir secciones nuevas, sin rehacer colores, botones, header,
   footer ni responsive.

   Dirección visual: Black Bondage Editorial.
   Regla: Sexy sí. Barato no. Agresivo sí. Caótico no.
   ========================================================== */

/* ----------------------------------------------------------
   01. VARIABLES GENERALES
   Cambia aquí los colores globales si America quiere ajustar
   el tono rojo/negro más adelante.
   ---------------------------------------------------------- */
:root {
  --bg-main: #050505;
  --bg-soft: #100708;
  --bg-card: #12090a;
  --bg-card-strong: #1a090c;

  --red-blood: #8b000d;
  --red-impact: #d0001b;
  --red-latex: #4a050b;

  --text-main: #f2e8e2;
  --text-muted: #8a7a78;
  --text-soft: #c8bab6;

  --border-red: rgba(208, 0, 27, 0.42);
  --border-soft: rgba(242, 232, 226, 0.12);
  --shadow-red: 0 24px 80px rgba(139, 0, 13, 0.24);
  --shadow-dark: 0 24px 80px rgba(0, 0, 0, 0.7);

  --font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  --header-height: 78px;
  --container: 1180px;
  --radius: 0px; /* Estética más seca: botones y tarjetas rectangulares. */
  --section-pad: clamp(72px, 9vw, 132px);
}

/* ----------------------------------------------------------
   02. RESET BÁSICO
   ---------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg-main);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text-main);
  background:
    radial-gradient(circle at 20% 0%, rgba(139, 0, 13, 0.28), transparent 34rem),
    radial-gradient(circle at 90% 12%, rgba(74, 5, 11, 0.35), transparent 30rem),
    linear-gradient(180deg, #050505 0%, #080304 48%, #050505 100%);
  line-height: 1.6;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

/* ----------------------------------------------------------
   03. UTILIDADES REUTILIZABLES
   Estas clases se usarán en todas las páginas.
   ---------------------------------------------------------- */
.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.section {
  padding: var(--section-pad) 0;
  position: relative;
}

.section--soft {
  background:
    linear-gradient(180deg, rgba(16, 7, 8, 0.96), rgba(5, 5, 5, 0.96)),
    radial-gradient(circle at 90% 20%, rgba(208, 0, 27, 0.18), transparent 32rem);
  border-block: 1px solid rgba(208, 0, 27, 0.14);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--text-soft);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--red-impact);
}

.section-title,
.page-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.page-title {
  max-width: 900px;
  font-size: clamp(4rem, 9vw, 8.5rem);
}

.section-title {
  max-width: 760px;
  font-size: clamp(2.8rem, 6vw, 6rem);
}

.lead {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--text-soft);
  font-size: clamp(1.04rem, 1.6vw, 1.25rem);
}

.muted {
  color: var(--text-muted);
}

.red-line {
  width: min(160px, 42vw);
  height: 2px;
  margin: 28px 0;
  background: linear-gradient(90deg, var(--red-impact), transparent);
}

/* ----------------------------------------------------------
   04. BOTONES GLOBALES
   CTA principal: "Presenta tu invitación".
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: var(--text-main);
  background: linear-gradient(135deg, var(--red-blood), var(--red-latex));
  border-color: rgba(208, 0, 27, 0.72);
  box-shadow: 0 18px 46px rgba(139, 0, 13, 0.32);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--red-impact), var(--red-blood));
  border-color: rgba(242, 232, 226, 0.22);
}

.btn-ghost {
  color: var(--text-main);
  background: rgba(5, 5, 5, 0.42);
  border-color: var(--border-red);
}

.btn-ghost:hover {
  border-color: var(--red-impact);
  background: rgba(139, 0, 13, 0.16);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* ----------------------------------------------------------
   05. HEADER GLOBAL
   Se repite en todas las páginas hasta que usemos una plantilla.
   ---------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  min-height: var(--header-height);
  color: var(--text-main);
  background: rgba(5, 5, 5, 0.68);
  border-bottom: 1px solid rgba(208, 0, 27, 0.28);
  backdrop-filter: blur(14px);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    min-height 220ms ease;
}

.site-header.is-scrolled {
  min-height: 66px;
  background: rgba(5, 5, 5, 0.94);
  border-bottom-color: rgba(208, 0, 27, 0.48);
}

.header-inner {
  width: min(100% - 30px, 1320px);
  min-height: inherit;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border: 1px solid rgba(208, 0, 27, 0.36);
  background: #070707;
}

.brand-text {
  display: grid;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-title);
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-subtitle {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.45vw, 22px);
}

.nav-link {
  position: relative;
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--text-main);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--red-impact);
  transition: transform 180ms ease;
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

.header-cta {
  min-height: 40px;
  padding-inline: 16px;
  font-size: 0.68rem;
}

/* Selector de idioma preparado para la versión bilingüe.
   De momento traduce textos comunes de la maqueta. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(242, 232, 226, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.lang-btn {
  min-width: 36px;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  color: var(--text-muted);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.lang-btn.is-active {
  color: var(--text-main);
  background: rgba(139, 0, 13, 0.46);
}

.mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(208, 0, 27, 0.42);
  background: rgba(5, 5, 5, 0.7);
}

.mobile-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  margin: 6px auto;
  background: var(--text-main);
  transition: transform 180ms ease, opacity 180ms ease;
}

body.nav-open .mobile-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.nav-open .mobile-toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .mobile-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------------
   06. HERO / PAGE HEADER BASE
   En Bloc 02 lo adaptaremos a Home real.
   ---------------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 82vh;
  display: grid;
  align-items: end;
  padding: calc(var(--header-height) + 90px) 0 86px;
  overflow: hidden;
  background: #050505;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.93) 0%, rgba(5, 5, 5, 0.72) 42%, rgba(5, 5, 5, 0.32) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.18), #050505 100%),
    var(--hero-image, url("../img/hero-america.jpg"));
  background-size: cover;
  background-position: center;
  filter: saturate(0.9) contrast(1.08);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-impact), transparent);
}

.page-hero-content {
  position: relative;
  z-index: 1;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-kicker::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--red-impact);
}

/* ----------------------------------------------------------
   07. TARJETAS Y GRID BASE
   Se usarán para las tres puertas de Home y otros bloques.
   ---------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}

.card {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid rgba(208, 0, 27, 0.22);
  background: var(--bg-card);
  box-shadow: var(--shadow-dark);
  isolation: isolate;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-image, linear-gradient(135deg, #190507, #050505));
  background-size: cover;
  background-position: center;
  opacity: 0.72;
  transform: scale(1.02);
  transition: transform 260ms ease, opacity 260ms ease;
  z-index: -2;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.78) 55%, rgba(5, 5, 5, 0.98) 100%);
  z-index: -1;
}

.card:hover::before {
  transform: scale(1.06);
  opacity: 0.9;
}

.card-content {
  padding: 26px;
}

.card-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 0.95;
}

.card-text {
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 0.96rem;
}

.card-link {
  display: inline-flex;
  margin-top: 20px;
  color: var(--text-main);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-link::after {
  content: "→";
  margin-left: 8px;
  color: var(--red-impact);
}

/* ----------------------------------------------------------
   08. BLOQUES INFORMATIVOS / NOTAS
   ---------------------------------------------------------- */
.panel {
  border: 1px solid rgba(208, 0, 27, 0.24);
  background:
    linear-gradient(135deg, rgba(16, 7, 8, 0.92), rgba(5, 5, 5, 0.96)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.16), transparent 22rem);
  box-shadow: var(--shadow-dark);
}

.panel-inner {
  padding: clamp(28px, 4vw, 52px);
}

.panel-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(2.1rem, 4vw, 4.2rem);
  line-height: 1;
}

.panel-text {
  max-width: 780px;
  margin: 18px 0 0;
  color: var(--text-soft);
}

/* ----------------------------------------------------------
   09. FOOTER GLOBAL
   Footer limpio: no repetir toda la navegación como una segunda web.
   ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid rgba(208, 0, 27, 0.22);
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.96), #030303),
    radial-gradient(circle at 10% 0%, rgba(139, 0, 13, 0.2), transparent 26rem);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.9fr 0.85fr;
  gap: 30px;
  padding: 54px 0 42px;
}

.footer-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 2.5rem;
  line-height: 1;
}

.footer-text {
  max-width: 450px;
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.footer-heading {
  margin: 0 0 14px;
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list a,
.footer-list span {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-list a:hover {
  color: var(--text-main);
}

.fake-warning {
  padding: 18px 0;
  border-block: 1px solid rgba(208, 0, 27, 0.2);
  color: var(--text-soft);
  background: rgba(139, 0, 13, 0.08);
  font-size: 0.9rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.footer-bottom a:hover {
  color: var(--text-main);
}

@media (max-width: 1100px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------
   10. WARNING +18
   Usa localStorage, no cookies. En main.js está la lógica.
   ---------------------------------------------------------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 30% 0%, rgba(208, 0, 27, 0.22), transparent 34rem),
    rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
}

.age-gate.is-visible {
  display: flex;
}

.age-modal {
  width: min(100%, 680px);
  border: 1px solid rgba(208, 0, 27, 0.44);
  background:
    linear-gradient(135deg, rgba(16, 7, 8, 0.98), rgba(5, 5, 5, 0.98)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.2), transparent 18rem);
  box-shadow: var(--shadow-red);
}

.age-modal-inner {
  padding: clamp(30px, 6vw, 58px);
}

.age-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.9;
}

.age-text {
  margin: 22px 0 0;
  color: var(--text-soft);
}

.age-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ----------------------------------------------------------
   11. PLACEHOLDER PAGES
   Usado en Bloc 01 para que todas las páginas existan.
   En los siguientes bloques se reemplazará el contenido.
   ---------------------------------------------------------- */
.placeholder-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}

.placeholder-media {
  min-height: 480px;
  border: 1px solid rgba(208, 0, 27, 0.26);
  background: var(--placeholder-image, url("../img/hero-america.jpg"));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-dark);
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 24px;
  color: var(--text-soft);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  background: var(--red-impact);
}

/* ----------------------------------------------------------
   12. ANIMACIONES SUAVES
   Nada de neón, flashes ni efectos baratos.
   ---------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 520ms ease, transform 520ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   13. RESPONSIVE
   Móvil desde el primer bloque.
   ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .header-cta {
    display: none;
  }

  .primary-nav {
    gap: 14px;
  }

  .nav-link {
    font-size: 0.68rem;
  }
}

@media (max-width: 920px) {
  :root {
    --header-height: 72px;
  }

  .mobile-toggle {
    display: inline-block;
  }

  .nav-wrap {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    display: grid;
    gap: 0;
    padding: 18px 20px 24px;
    background: rgba(5, 5, 5, 0.98);
    border-bottom: 1px solid rgba(208, 0, 27, 0.28);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  body.nav-open .nav-wrap {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .primary-nav {
    display: grid;
    gap: 0;
    width: 100%;
  }

  .nav-link {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid rgba(242, 232, 226, 0.08);
    font-size: 0.78rem;
  }

  .nav-link::after {
    display: none;
  }

  .lang-switch {
    margin-top: 16px;
    justify-self: start;
  }

  .card-grid,
  .footer-main,
  .placeholder-layout {
    grid-template-columns: 1fr;
  }

  .page-hero {
    min-height: 76vh;
  }

  .placeholder-media {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 28px, var(--container));
  }

  .brand-logo {
    width: 38px;
    height: 38px;
  }

  .brand-name {
    font-size: 1.12rem;
  }

  .brand-subtitle {
    display: none;
  }

  .page-hero {
    min-height: 72vh;
    padding-bottom: 58px;
  }

  .page-title {
    font-size: clamp(3.3rem, 18vw, 5rem);
  }

  .btn-row,
  .age-actions {
    display: grid;
  }

  .btn {
    width: 100%;
  }

  .card {
    min-height: 240px;
  }

  .footer-bottom {
    display: grid;
  }
}

/* ==========================================================
   BLOC 02 — HOME V2
   ----------------------------------------------------------
   Estas clases son específicas de la Home.
   Mantienen la portada breve: hero, posicionamiento, tres puertas,
   seguridad y CTA final.
   ========================================================== */

.home-hero {
  min-height: 92vh;
  align-items: center;
  padding-bottom: 64px;
}

.home-hero::before {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.95) 0%, rgba(5, 5, 5, 0.74) 42%, rgba(5, 5, 5, 0.24) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.06), #050505 100%),
    radial-gradient(circle at 72% 45%, rgba(208, 0, 27, 0.2), transparent 28rem),
    var(--hero-image, url("../img/hero-america.jpg"));
  background-size: cover;
  background-position: center;
}

.home-hero-content {
  max-width: 860px;
}

.home-hero-claim {
  max-width: 740px;
  margin: 24px 0 0;
  color: var(--text-main);
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.home-official-note {
  max-width: 720px;
  margin-top: 18px;
  padding: 15px 18px;
  border: 1px solid rgba(208, 0, 27, 0.28);
  color: var(--text-soft);
  background: rgba(139, 0, 13, 0.12);
  font-size: 0.88rem;
  line-height: 1.55;
}

.home-official-label {
  display: inline-flex;
  margin-right: 10px;
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.home-positioning {
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.98), rgba(7, 2, 3, 0.98)),
    radial-gradient(circle at 10% 10%, rgba(139, 0, 13, 0.16), transparent 28rem);
}

.home-split {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(32px, 7vw, 92px);
  align-items: start;
}

.home-copy {
  padding-top: 10px;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.home-copy p {
  margin: 0 0 22px;
}

.home-copy-strong {
  color: var(--text-main);
  font-weight: 800;
}

.home-card-grid .card {
  min-height: 340px;
}

.card--featured {
  border-color: rgba(208, 0, 27, 0.5);
  box-shadow: var(--shadow-red);
}

.card-tag {
  display: block;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-safety {
  padding-block: clamp(58px, 7vw, 96px);
}

.safety-panel {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 4.8vw, 56px);
  border: 1px solid rgba(208, 0, 27, 0.28);
  background:
    linear-gradient(135deg, rgba(16, 7, 8, 0.82), rgba(5, 5, 5, 0.96)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.18), transparent 22rem);
  box-shadow: var(--shadow-dark);
}

.safety-text {
  color: var(--text-soft);
}

.safety-text p {
  margin: 0;
}

.safety-text p + p {
  margin-top: 16px;
  color: var(--text-main);
  font-weight: 700;
}

.home-final-cta {
  position: relative;
  overflow: hidden;
}

.home-final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.78) 54%, rgba(74, 5, 11, 0.4) 100%),
    url("../img/contact-red-room.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.24;
  z-index: 0;
}

.home-final-cta .panel-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 920px) {
  .home-split,
  .safety-panel {
    grid-template-columns: 1fr;
  }

  .home-hero {
    min-height: 86vh;
  }
}

@media (max-width: 640px) {
  .home-hero {
    min-height: 82vh;
  }

  .home-hero-claim {
    font-size: clamp(1.65rem, 9vw, 2.5rem);
  }

  .home-card-grid .card {
    min-height: 300px;
  }
}

/* ==========================================================
   BLOC 03 — AMERICA + SESIONES
   ----------------------------------------------------------
   Estilos para páginas internas reales: America y Sesiones.
   Mantienen la misma dirección roja/negra, pero con bloques
   más editoriales y legibles.
   ========================================================== */

/* Reposición solicitada del aviso de canales oficiales en Home:
   debajo del header / línea roja de navegación y encima del descriptor. */
.home-official-note--top {
  margin: 0 0 22px;
}

.inner-hero {
  min-height: 78vh;
}

.inner-hero .lead {
  max-width: 760px;
}

.content-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 7vw, 88px);
  align-items: center;
}

.content-split--media-left {
  grid-template-columns: 0.92fr 1.08fr;
}

.editorial-media {
  position: relative;
  min-height: 560px;
  border: 1px solid rgba(208, 0, 27, 0.28);
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.06), rgba(5, 5, 5, 0.72)),
    var(--media-image, url('../img/hero-america.jpg'));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}

.editorial-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 25%, rgba(208, 0, 27, 0.18), transparent 22rem),
    linear-gradient(90deg, rgba(5, 5, 5, 0.34), transparent 55%);
  pointer-events: none;
}

.editorial-media--tall {
  min-height: 640px;
}

.media-caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
  display: inline-flex;
  padding: 10px 12px;
  border: 1px solid rgba(208, 0, 27, 0.38);
  color: var(--text-main);
  background: rgba(5, 5, 5, 0.72);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.text-stack {
  color: var(--text-soft);
  font-size: clamp(1rem, 1.32vw, 1.14rem);
}

.text-stack p {
  margin: 0 0 22px;
}

.text-stack p:last-child {
  margin-bottom: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}

.feature-card {
  min-height: 250px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(208, 0, 27, 0.24);
  background:
    linear-gradient(135deg, rgba(18, 9, 10, 0.94), rgba(5, 5, 5, 0.94)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.14), transparent 16rem);
  box-shadow: var(--shadow-dark);
}

.feature-number {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--red-impact);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.feature-card h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 0.95;
}

.feature-card p {
  margin: 18px 0 0;
  color: var(--text-soft);
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.rule-panel {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(208, 0, 27, 0.24);
  background:
    linear-gradient(135deg, rgba(16, 7, 8, 0.92), rgba(5, 5, 5, 0.96)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.12), transparent 20rem);
  box-shadow: var(--shadow-dark);
}

.rule-panel--dark {
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.96), rgba(16, 7, 8, 0.92)),
    radial-gradient(circle at top left, rgba(139, 0, 13, 0.16), transparent 20rem);
}

.ruled-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ruled-list li {
  position: relative;
  padding: 0 0 14px 22px;
  color: var(--text-soft);
  border-bottom: 1px solid rgba(242, 232, 226, 0.08);
}

.ruled-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 8px;
  background: var(--red-impact);
}

.ruled-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-cta {
  overflow: hidden;
}

.feature-band {
  position: relative;
}

.check-list--compact {
  margin-top: 24px;
}

.practice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.practice-card {
  min-height: 280px;
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 7vw, 88px);
  align-items: start;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(208, 0, 27, 0.2);
  background: rgba(16, 7, 8, 0.62);
}

.faq-item h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1;
}

.faq-item p {
  margin: 14px 0 0;
  color: var(--text-soft);
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}

.quote-card {
  margin: 0;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(208, 0, 27, 0.24);
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.9), rgba(16, 7, 8, 0.88)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.12), transparent 16rem);
  box-shadow: var(--shadow-dark);
}

.quote-card blockquote {
  margin: 0;
  font-family: var(--font-title);
  color: var(--text-main);
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  line-height: 1;
}

.quote-card blockquote::before {
  content: "“";
  color: var(--red-impact);
}

.quote-card blockquote::after {
  content: "”";
  color: var(--red-impact);
}

.quote-card figcaption {
  margin-top: 22px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .content-split,
  .content-split--media-left,
  .comparison-grid,
  .feature-grid,
  .practice-grid,
  .faq-layout,
  .quote-grid {
    grid-template-columns: 1fr;
  }

  .editorial-media,
  .editorial-media--tall {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .inner-hero {
    min-height: 72vh;
  }

  .editorial-media,
  .editorial-media--tall {
    min-height: 340px;
  }

  .feature-card,
  .practice-card {
    min-height: auto;
  }

  .quote-card blockquote {
    font-size: clamp(1.85rem, 10vw, 2.7rem);
  }
}

/* ==========================================================
   BLOC 04 — FLY ME TO YOU + VIAJES
   ----------------------------------------------------------
   Estilos para invitaciones privadas, pasos, agenda y destinos.
   ========================================================== */

.fly-feature-grid .feature-card {
  min-height: 300px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}

.step-card {
  position: relative;
  min-height: 270px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(208, 0, 27, 0.24);
  background:
    linear-gradient(180deg, rgba(16, 7, 8, 0.88), rgba(5, 5, 5, 0.96)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.12), transparent 15rem);
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}

.step-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--red-impact), transparent);
}

.step-number,
.travel-meta {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--red-impact);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.step-card h3,
.travel-card h3 {
  margin: 0;
  font-family: var(--font-title);
  color: var(--text-main);
  font-size: clamp(1.9rem, 2.7vw, 2.8rem);
  line-height: 0.96;
}

.step-card p,
.travel-card p {
  margin: 18px 0 0;
  color: var(--text-soft);
}

.travel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.travel-card {
  min-height: 285px;
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid rgba(208, 0, 27, 0.26);
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.93), rgba(16, 7, 8, 0.86)),
    radial-gradient(circle at 75% 15%, rgba(139, 0, 13, 0.18), transparent 16rem);
  box-shadow: var(--shadow-dark);
}

.travel-card--private {
  border-color: rgba(208, 0, 27, 0.45);
  background:
    linear-gradient(135deg, rgba(74, 5, 11, 0.78), rgba(5, 5, 5, 0.92)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.2), transparent 18rem);
}

@media (max-width: 1100px) {
  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .travel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .step-card,
  .travel-card,
  .fly-feature-grid .feature-card {
    min-height: auto;
  }
}


/* ==========================================================
   BLOC 05 — CONTACTO + DESTINOS FRECUENTES + MÁS IMÁGENES
   ----------------------------------------------------------
   Añadimos más espacios preparados para fotografías reales sin
   saturar la web. Todos los fondos son placeholders editables.
   ========================================================== */

.home-destinations {
  padding: clamp(34px, 5vw, 64px) 0;
  border-block: 1px solid rgba(208, 0, 27, 0.12);
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.98), rgba(16, 7, 8, 0.7)),
    radial-gradient(circle at 88% 50%, rgba(208, 0, 27, 0.12), transparent 24rem);
}

.home-destinations-inner {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(22px, 5vw, 56px);
  align-items: center;
}

.home-destinations-copy h2 {
  margin: 0;
  max-width: 650px;
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.home-destinations-copy p:last-child {
  margin: 16px 0 0;
  color: var(--text-soft);
}

.destination-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.destination-chip {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 116px;
  padding: 14px;
  border: 1px solid rgba(208, 0, 27, 0.24);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.14), rgba(5, 5, 5, 0.82)),
    var(--destination-image, url('../img/travel-city.jpg'));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-dark);
}

.destination-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(208, 0, 27, 0.22), transparent 12rem);
  pointer-events: none;
}

.destination-chip span {
  position: relative;
  z-index: 1;
  color: var(--text-main);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}

.destination-card {
  position: relative;
  min-height: 420px;
  border: 1px solid rgba(208, 0, 27, 0.26);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.05), rgba(5, 5, 5, 0.82)),
    var(--destination-image, url('../img/travel-city.jpg'));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-dark);
}

.destination-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.05), rgba(5, 5, 5, 0.92)),
    radial-gradient(circle at 78% 20%, rgba(208, 0, 27, 0.22), transparent 18rem);
}

.destination-card-content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: clamp(22px, 3vw, 30px);
}

.destination-card-kicker {
  color: var(--red-impact);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.destination-card-title {
  font-family: var(--font-title);
  color: var(--text-main);
  font-size: clamp(2.2rem, 3.4vw, 3.8rem);
  line-height: 0.92;
}

.destination-card-text {
  color: var(--text-soft);
  font-size: 0.95rem;
}

.official-link-grid {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.official-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(208, 0, 27, 0.24);
  color: var(--text-main);
  background: rgba(5, 5, 5, 0.55);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.official-link-card::after {
  content: "→";
  color: var(--red-impact);
}

.form-layout {
  display: grid;
  grid-template-columns: 0.74fr 1.26fr;
  gap: clamp(30px, 6vw, 78px);
  align-items: start;
}

.form-layout--reverse {
  grid-template-columns: 1.26fr 0.74fr;
}

.form-layout--reverse .form-intro {
  order: 2;
}

.contact-form {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(208, 0, 27, 0.28);
  background:
    linear-gradient(135deg, rgba(16, 7, 8, 0.92), rgba(5, 5, 5, 0.96)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.14), transparent 18rem);
  box-shadow: var(--shadow-dark);
}

.contact-form--dark {
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.96), rgba(16, 7, 8, 0.9)),
    radial-gradient(circle at top left, rgba(208, 0, 27, 0.14), transparent 18rem);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-field {
  display: grid;
  gap: 8px;
  color: var(--text-main);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  border: 1px solid rgba(242, 232, 226, 0.13);
  border-radius: 0;
  color: var(--text-main);
  background: rgba(5, 5, 5, 0.62);
  padding: 14px 14px;
  outline: none;
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: rgba(208, 0, 27, 0.7);
  box-shadow: 0 0 0 3px rgba(208, 0, 27, 0.12);
}

.form-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.form-check input {
  margin-top: 5px;
  accent-color: var(--red-impact);
}

.form-note {
  margin: -4px 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.testimonial-submit {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(208, 0, 27, 0.24);
  background:
    linear-gradient(135deg, rgba(16, 7, 8, 0.74), rgba(5, 5, 5, 0.94)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.16), transparent 20rem);
}

@media (max-width: 1100px) {
  .destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .home-destinations-inner,
  .form-layout,
  .form-layout--reverse,
  .testimonial-submit {
    grid-template-columns: 1fr;
  }

  .form-layout--reverse .form-intro {
    order: initial;
  }
}

@media (max-width: 640px) {
  .destination-strip,
  .destination-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .destination-card {
    min-height: 340px;
  }
}

/* ==========================================================
   BLOC 06 — LEGAL / REVISION FINAL
   ----------------------------------------------------------
   Estilos mínimos para páginas legales placeholder.
   Mantienen la estética global sin crear una página nueva
   visualmente distinta.
   ========================================================== */
.legal-section {
  background:
    radial-gradient(circle at 20% 10%, rgba(139, 0, 13, 0.12), transparent 35%),
    var(--color-bg);
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.legal-grid .glass-panel {
  min-height: 100%;
}

@media (max-width: 760px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   BLOC 08 — CORRECCIONES VISUALES + EMAIL
   ----------------------------------------------------------
   Más imágenes editoriales, hero a dos columnas, testimonios
   largos y formularios preparados para envío por email.
   ========================================================== */

.home-hero-layout,
.inner-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.62fr);
  gap: clamp(32px, 6vw, 78px);
  align-items: center;
  width: 100%;
}

.home-hero-content {
  max-width: var(--container);
}

.home-hero-text,
.inner-hero-text {
  min-width: 0;
}

.hero-side-image {
  position: relative;
  min-height: clamp(420px, 58vh, 720px);
  margin: 0;
  border: 1px solid rgba(208, 0, 27, 0.34);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.05), rgba(5, 5, 5, 0.78)),
    var(--media-image, url('../img/hero-america.jpg'));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-red);
}

.hero-side-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 18%, rgba(208, 0, 27, 0.24), transparent 18rem),
    linear-gradient(180deg, transparent 52%, rgba(5, 5, 5, 0.88));
  pointer-events: none;
}

.hero-side-image .media-caption {
  position: absolute;
  inset: auto 18px 18px 18px;
  z-index: 1;
}

.home-presence-single {
  display: block;
  max-width: 980px;
}

.home-presence-single .section-title {
  max-width: 980px;
}

.home-presence-single .home-copy {
  max-width: 820px;
  margin-top: 34px;
  padding-top: 0;
}

.card-text {
  display: block;
  margin-bottom: 18px;
}

.card-tag {
  margin-top: 0;
}

.image-break-section {
  padding: clamp(34px, 5vw, 68px) 0;
  background: rgba(5, 5, 5, 0.98);
}

.image-break-section--soft {
  background: linear-gradient(180deg, rgba(16, 7, 8, 0.95), rgba(5, 5, 5, 0.98));
}

.wide-image-break {
  position: relative;
  min-height: clamp(280px, 42vw, 520px);
  margin: 0;
  border: 1px solid rgba(208, 0, 27, 0.28);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.12), rgba(5, 5, 5, 0.72)),
    var(--media-image, url('../img/hero-america.jpg'));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-dark);
}

.wide-image-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(208, 0, 27, 0.2), transparent 24rem);
  pointer-events: none;
}

.wide-image-break .media-caption {
  position: absolute;
  inset: auto 18px 18px 18px;
  z-index: 1;
}

.btn-small {
  width: fit-content;
  min-height: 42px;
  margin-top: 18px;
  padding-inline: 18px;
  font-size: 0.68rem;
}

.testimonials-long-section .lead {
  max-width: 900px;
}

.testimonial-long-grid {
  display: grid;
  gap: 22px;
  margin-top: 44px;
}

.testimonial-long-card {
  padding: clamp(28px, 4.6vw, 56px);
  border: 1px solid rgba(208, 0, 27, 0.26);
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.92), rgba(16, 7, 8, 0.88)),
    radial-gradient(circle at top right, rgba(208, 0, 27, 0.14), transparent 18rem);
  box-shadow: var(--shadow-dark);
}

.testimonial-long-text {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.85;
}

.testimonial-long-text::before {
  content: "“";
  color: var(--red-impact);
  font-family: var(--font-title);
  font-size: 2.8rem;
  line-height: 0;
  vertical-align: -0.35em;
}

.testimonial-long-text::after {
  content: "”";
  color: var(--red-impact);
  font-family: var(--font-title);
}

.testimonial-long-author {
  margin: 24px 0 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.legal-grid--simple {
  grid-template-columns: 1fr;
  max-width: 900px;
}

@media (max-width: 980px) {
  .home-hero-layout,
  .inner-hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-side-image {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .hero-side-image {
    min-height: 340px;
  }

  .wide-image-break {
    min-height: 260px;
  }
}


/* ==========================================================
   BLOC 09 — COOKIE CONSENT / ANALÍTICA
   ----------------------------------------------------------
   Banner pequeño, sobrio y separado del warning +18.
   No carga analítica hasta aceptación en JS.
   ========================================================== */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9000;
  color: var(--color-text);
}

.cookie-consent[hidden] {
  display: none !important;
}

.cookie-consent-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  background: rgba(5, 5, 5, 0.94);
  border: 1px solid rgba(139, 0, 13, 0.72);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
}

.cookie-consent-copy strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-title);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.cookie-consent-copy p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5;
  font-size: 0.92rem;
}

.cookie-consent-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-small {
  min-height: auto;
  padding: 10px 14px;
  font-size: 0.74rem;
}

.cookie-link {
  color: var(--color-text);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid rgba(208, 0, 27, 0.45);
}

.cookie-link:hover {
  color: var(--color-red-impact);
}

@media (max-width: 780px) {
  .cookie-consent-inner {
    grid-template-columns: 1fr;
  }

  .cookie-consent-actions {
    justify-content: flex-start;
  }
}