/* ============================================================
   MS Coaching — style.css
   Diseño mobile-first. Variables CSS reutilizables.
   Paleta cálida, sobria y profesional.
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES
   Valores reutilizables. Para cambios globales, editar aquí.
   ============================================================ */
:root {

  /* ---------- Paleta de colores ---------- */
  /* Primario: terracota cálido — transmite confianza, cercanía humana */
  --color-primary:           #f1a186;
  --color-primary-hover:     #8d5140;
  --color-primary-soft:      #f6ebe5; /* Fondo suave para acentos */

  /* Secundario: verde salvia apagado — equilibrio, crecimiento */
  --color-secondary:         #7a8a6e;
  --color-secondary-hover:   #637358;

  /* Neutrales — escala de grises cálidos */
  --color-bg:                #fbf9f6;  /* Fondo general (no blanco puro) */
  --color-surface:           #ffffff;  /* Tarjetas, superficies */
  --color-surface-alt:       #f4f1ec;  /* Superficie alternativa suave */
  --color-text:              #485fe9;  /* Texto principal (casi negro cálido) */
  --color-text-muted:        #6b6560;  /* Texto secundario */
  --color-text-soft:         #9a938b;  /* Texto auxiliar */
  --color-border:            #e8e2db;  /* Bordes y divisores */
  --color-border-soft:       #f0ebe5;  /* Bordes muy sutiles */

  /* Estados */
  --color-focus:             #c97f65;
  --color-success:           #2f7d57;
  --color-error:             #b94a4a;

  /* ---------- Tipografía ---------- */
  --font-sans:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-base:    16px;
  --line-height:  1.6;

  /* Tamaños de fuente fluidos (responsive sin media queries) */
  --fs-xs:    clamp(0.7rem,   0.68rem + 0.10vw, 0.78rem);
  --fs-sm:    clamp(0.8rem,   0.78rem + 0.10vw, 0.875rem);
  --fs-base:  clamp(0.88rem,  0.85rem + 0.15vw, 0.95rem);
  --fs-md:    clamp(0.95rem,  0.92rem + 0.15vw, 1.05rem);
  --fs-lg:    clamp(1.1rem,   1.05rem + 0.25vw, 1.25rem);
  --fs-xl:    clamp(1.3rem,   1.18rem + 0.60vw, 1.6rem);
  --fs-2xl:   clamp(1.55rem,  1.30rem + 1.25vw, 2.25rem);
  --fs-3xl:   clamp(1.85rem,  1.50rem + 1.75vw, 3rem);

  /* ---------- Espaciados (escala modular) ---------- */
  --space-0:    0;
  --space-px:   1px;
  --space-xs:   0.25rem;   /* 4px  */
  --space-sm:   0.5rem;    /* 8px  */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */
  --space-5xl:  8rem;      /* 128px */

  /* ---------- Layout ---------- */
  --container-max:   1200px;
  --container-pad:   var(--space-lg);

  /* ---------- Bordes y sombras ---------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 999px;

  --shadow-xs:  0 1px 2px rgba(20, 16, 12, 0.04);
  --shadow-sm:  0 2px 8px rgba(20, 16, 12, 0.05);
  --shadow-md:  0 6px 20px rgba(20, 16, 12, 0.07);
  --shadow-lg:  0 12px 40px rgba(20, 16, 12, 0.10);

  /* ---------- Transiciones ---------- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:     150ms var(--ease);
  --t-normal:   250ms var(--ease);
  --t-slow:     400ms var(--ease);

  /* ---------- Z-index ---------- */
  --z-base:     1;
  --z-nav:      50;
  --z-nav-menu: 60;
  --z-modal:    80;
  --z-toast:    100;
}

/* ============================================================
   2. RESET MÍNIMO MODERNO
   Eliminamos inconsistencias entre navegadores sin ser agresivos
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: var(--font-base);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* Evita scroll horizontal */
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

button {
  font: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  text-align: justify;
}






/* ============================================================
   3. UTILIDADES BASE
   ============================================================ */

/* Contenedor centrado con ancho máximo */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Padding vertical estándar para secciones */
.section {
  padding-block: var(--space-3xl);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-4xl);
  }
}

/* Fondo alternativo para secciones destacadas (ej: Método) */
.section--alt {
  background-color: var(--color-surface-alt);
  position: relative;
}

.section--alt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse at 10% 20%,
      var(--color-primary-soft) 0%,
      transparent 45%
    );
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.section--alt > .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   7. SOBRE MÍ
   2 columnas en desktop, 1 en mobile
   ============================================================ */
.sobre-mi__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 960px) {
  .sobre-mi__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-4xl);
  }
}

/* ---------- Columna visual / imagen ---------- */
.sobre-mi__image-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

@media (max-width: 639px) {
  .sobre-mi__image-wrapper {
    max-width: 300px;
  }
}

@media (min-width: 960px) {
  .sobre-mi__image-wrapper {
    max-width: 100%;
    margin-inline: 0;
    justify-self: start;
  }
}

.sobre-mi__image-frame {
  position: absolute;
  top: -16px;
  left: -16px;
  right: 20px;
  bottom: 20px;
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-primary-soft);
  z-index: 0;
  pointer-events: none;
}

.sobre-mi__image {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  background-color: var(--color-surface-alt);
}

/* Placeholder visual cuando la imagen no existe todavía */
.sobre-mi__image-wrapper--no-image .sobre-mi__image {
  visibility: hidden;
}

.sobre-mi__image-wrapper--no-image::after {
  content: '[ Espacio para foto de la profesional ]\A\A Reemplazar:\A assets/images/sobre-mi-portrait.jpg';
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.7;
  white-space: pre-line;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-primary-soft) 100%);
  border: 2px dashed var(--color-border);
}

/* ---------- Columna de contenido ---------- */
.sobre-mi__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 960px) {
  .sobre-mi__content {
    gap: var(--space-xl);
  }
}

.sobre-mi__eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.sobre-mi__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

@media (min-width: 768px) {
  .sobre-mi__title {
    font-size: var(--fs-2xl);
  }
}

.sobre-mi__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.75;
  font-weight: 500;
  max-width: 58ch;
}

.sobre-mi__text {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 58ch;
}

.sobre-mi__cta {
  margin-top: var(--space-sm);
}

/* ============================================================
   8. MÉTODO ORDEN Y CORAZÓN
   Sección con mayor peso visual: fondo alternativo,
   bloques de contenido espaciados y tarjetas de conceptos.
   ============================================================ */
.metodo__header {
  text-align: center;
  max-width: 68ch;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

#logo {
  width: clamp(72px, 10vw, 96px);
  height: auto;
  max-height: 56px;
  display: block;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.logo:has(> img) {
  align-items: center;
  padding: 2px 0;
}




@media (min-width: 768px) {
  .metodo__header {
    margin-bottom: var(--space-4xl);
  }
}

.metodo__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.metodo__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .metodo__title {
    font-size: var(--fs-3xl);
  }
}

.metodo__title-accent {
  color: var(--color-primary);
}

.metodo__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 60ch;
  margin-inline: auto;
}

/* ---------- Bloque de explicación detallada ---------- */
.metodo__explanation {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl);
  margin-bottom: var(--space-3xl);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
}

@media (min-width: 768px) {
  .metodo__explanation {
    padding: var(--space-3xl);
    margin-bottom: var(--space-4xl);
  }
}

@media (min-width: 960px) {
  .metodo__explanation {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-3xl);
  }
}

.metodo__explanation-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.metodo__subtitle {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.metodo__subtitle--center {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.metodo__text {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: 1.75;
}

.metodo__text + .metodo__text {
  margin-top: calc(var(--space-sm) * -1);
}

.metodo__subtitle-sm {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-primary);
  margin: var(--space-lg) 0 var(--space-sm) 0;
  line-height: 1.3;
  letter-spacing: 0.005em;
}

.metodo__subtitle-sm:first-of-type {
  margin-top: var(--space-md);
}

.metodo__list {
  margin: var(--space-sm) 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}



.metodo__list > li {
  position: relative;
  padding-left: var(--space-xl);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.metodo__list > li::before {
  content: '';
  position: absolute;
  left: var(--space-sm);
  top: 0.6rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
  opacity: 0.8;
}

.metodo__concepts-lead {
  max-width: 62ch;
  margin: 0 auto var(--space-2xl) auto;
  text-align: center;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* ---------- Visual del método ---------- */
.metodo__visual-wrapper {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (max-width: 639px) {
  .metodo__visual-wrapper {
    max-width: 420px;
    margin-inline: auto;
  }
}

.metodo__visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-alt);
  display: block;
}

/* Placeholder visual cuando la imagen no existe */
.metodo__visual-wrapper--no-image .metodo__visual {
  visibility: hidden;
}

.metodo__visual-wrapper--no-image::after {
  content: '[ Espacio para imagen del Método ]\A\A Reemplazar:\A assets/images/metodo-visual.jpg';
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.7;
  white-space: pre-line;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-primary-soft) 100%);
  border: 2px dashed var(--color-border);
}

/* ---------- Tarjetas de conceptos / principios ---------- */
.metodo__concepts {
  width: 100%;
}

.metodo__concepts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .metodo__concepts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
  .metodo__concepts-grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .metodo__concepts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .metodo__concepts-grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.concept-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  padding-top: calc(var(--space-xl) + var(--space-lg));
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--t-normal),
    box-shadow var(--t-normal),
    border-color var(--t-normal);
}

.concept-card:hover,
.concept-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-soft);
}

.concept-card__number {
  position: absolute;
  top: var(--space-md);
  right: var(--space-lg);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-primary);
  opacity: 0.85;
  line-height: 1;
}

.concept-card__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  font-family: var(--font-serif);
}

.concept-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* ---------- Focus visible (accesibilidad) ---------- */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ============================================================
   4. BOTONES / CTAs
   Sistema reutilizable de botones
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.9rem 1.6rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--t-normal),
    color var(--t-normal),
    border-color var(--t-normal),
    transform var(--t-fast),
    box-shadow var(--t-normal);
  user-select: none;
  white-space: nowrap;
}

.btn--sm {
  padding: 0.65rem 1.2rem;
  font-size: var(--fs-xs);
}

.btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--color-surface-alt);
  border-color: var(--color-text-muted);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-primary-soft);
}

/* ============================================================
   5. HEADER / NAVBAR
   Sticky, se compacta suavemente al hacer scroll
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modal);
  background-color: rgba(251, 249, 246, 0.85);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-normal),
    border-color var(--t-normal),
    box-shadow var(--t-normal);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #F2F2F2;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  z-index: 0;
  pointer-events: none;
}

.header--scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--color-border-soft);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F2F2F2;
  padding: 0 25px;
  height: 72px;
  gap: var(--space-lg);
  position: relative;
  z-index: 1;
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  padding: var(--space-xs) 0;
  border-radius: var(--radius-sm);
}

.logo__mark {
  font-size: 1.35rem;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.logo__text {
  font-size: 1.1rem;
  color: var(--color-text);
}

/* ---------- Botón hamburguesa (mobile) ---------- */
.nav-toggle {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast);
  z-index: calc(var(--z-modal) + 1);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background-color: var(--color-surface-alt);
}

.nav-toggle__bar {
  position:absolute;
  display: block;
  left: 50%;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition:
    transform var(--t-normal),
    opacity var(--t-fast),
    top var(--t-normal);
  transform-origin: center;
  transform: translateX(-50%);
}

.nav-toggle__bar:nth-child(1) {
  top: calc(50% - 7px);
}

.nav-toggle__bar:nth-child(2) {
  top: 50%;
}

.nav-toggle__bar:nth-child(3) {
  top: calc(50% + 7px);
}

/* Estado "abierto": animación a X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  top: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  top: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

/* ---------- Navegación ---------- */
.nav {
  position: fixed;
  inset: 0;
  background-color: rgba(251, 249, 246, 0.985);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  padding: 96px var(--container-pad) var(--space-xl);
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition:
    opacity var(--t-normal),
    visibility var(--t-normal);
  overflow-y: auto;
  z-index: var(--z-modal);
  isolation: isolate;
}

.nav--open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-sm);
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-text);
  background-color: transparent;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  box-shadow: none;
  transition:
    color var(--t-fast),
    background-color var(--t-fast),
    border-color var(--t-fast),
    transform var(--t-fast);
}

.nav__link:hover,
.nav__link:focus-visible {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-hover);
  border-color: rgba(199, 154, 108, 0.2);
  transform: translateX(2px);
  outline: none;
}

.nav__item--cta {
  margin-top: var(--space-md);
}

.nav__cta {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

/* ---------- Tablet ≥768px ---------- */
@media (min-width: 768px) {
  .nav {
    padding: 110px var(--space-2xl) var(--space-2xl);
  }
  .nav__list {
    gap: var(--space-md);
  }
  .nav__link {
    min-height: 52px;
    padding: 0.85rem 1.35rem;
    font-size: var(--fs-base);
  }
  .nav__cta {
    min-height: 52px;
  }
  .nav__item--cta {
    margin-top: var(--space-lg);
  }
}

/* ---------- Desktop: ≥1024px ---------- */
@media (min-width: 1024px) {

  .nav-toggle {
    display: none;
  }

  .nav {
    position: static;
    inset: auto;
    top: auto;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
  }

  .nav__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
    max-width: none;
    margin-inline: 0;
    padding: 0;
  }

  .nav__link {
    min-height: 0;
    padding: 0.55rem 0.95rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: none;
    position: relative;
    transform: none;
  }

  .nav__link::after {
    content: '';
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.25rem;
    height: 1.5px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-normal);
  }

  .nav__link:hover,
  .nav__link:focus-visible {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
    border-color: transparent;
    transform: none;
    box-shadow: none;
    outline: none;
  }

  .nav__link:hover::after,
  .nav__link:focus-visible::after {
    transform: scaleX(1);
  }

  .nav__item--cta {
    margin-top: 0;
    margin-left: var(--space-sm);
  }

  .nav__cta {
    width: auto;
    min-height: 0;
    border-color: var(--color-primary);
    padding: 0.55rem 1.1rem;
  }

  .nav__cta:hover,
  .nav__cta:focus-visible {
    transform: translateY(-1px);
    background-color: var(--color-primary-hover);
    color: var(--color-surface);
  }
}

/* ============================================================
   6. HERO
   2 columnas en desktop, 1 en mobile
   ============================================================ */
.hero {
  position: relative;
  padding-block: var(--space-2xl);
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--space-3xl);
  }
}

/* Fondo decorativo sutil (sin imágenes externas) */
.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -20%;
  width: 80%;
  height: 70%;
  background:
    radial-gradient(
      ellipse at top right,
      var(--color-primary-soft) 0%,
      transparent 60%
    );
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-4xl);
  }
}

/* ---------- Contenido textual ---------- */
.hero__content {
  order: 2;
  text-align: left;
}

@media (min-width: 960px) {
  .hero__content {
    order: 1;
  }
}

.hero__badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  margin-bottom: var(--space-xl);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
  border-radius: var(--radius-full);
}

.hero__title {
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.hero__subtitle-accent {
  display: block;
  margin-top: var(--space-md);
  font-size: var(--fs-xl);
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-primary);
  line-height: 1.35;
}

.hero__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ---------- Imagen del hero ---------- */
.hero__image-wrapper {
  order: 1;
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  z-index: 1;
  isolation: isolate;
}

@media (max-width: 639px) {
  .hero__image-wrapper {
    max-width: 300px;
  }
}

@media (min-width: 640px) and (max-width: 959px) {
  .hero__image-wrapper {
    max-width: 380px;
  }
}


@media (min-width: 960px) {
  .hero__image-wrapper {
    order: 2;
    max-width: 100%;
    margin-inline: 0;
    justify-self: end;
    width: 100%;
  }
}

/* Marco decorativo detrás de la foto */
.hero__image-frame {
  position: absolute;
  top: 20px;
  left: 20px;
  right: -12px;
  bottom: -12px;
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-primary-soft);
  z-index: 0;
  pointer-events: none;
}

.hero__image {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 600px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  background-color: var(--color-surface-alt);
}

/* ---------- Placeholder visual cuando la imagen no existe ---------- */
/* Se activa mediante JS agregando la clase .hero__image-wrapper--no-image al wrapper */
.hero__image-wrapper--no-image .hero__image {
  visibility: hidden;
}

.hero__image-wrapper--no-image::after {
  background-image: url('../images/telly.png');
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.5;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-primary-soft) 100%);
}

/* ============================================================
   9. FOOTER BÁSICO ESTRUCTURAL
   Contenido visual mínimo; se completa en etapa posterior
   ============================================================ */
.footer {
  margin-top: var(--space-2xl);
  background-color: var(--color-surface-alt);
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "brand brand"
    "links socials";
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-md);
  align-items: start;
}

@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas: "brand links socials";
    gap: var(--space-lg);
    padding-block: var(--space-xl) var(--space-md);
  }
}

.footer__brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__brand .logo {
  font-size: var(--fs-base);
}

.footer__tagline {
  font-size: var(--fs-xs);
  line-height: 1.4;
  max-width: 52ch;
  color: var(--color-text-muted);
}

.footer__nav {
  grid-area: links;
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-sm);
  font-size: var(--fs-xs);
}

.footer__links li {
  margin: 0;
}

.footer__links a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
  line-height: 1.4;
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--color-primary);
}

.footer__socials {
  grid-area: socials;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: auto auto;
  gap: var(--space-xs);
  align-items: start;
  justify-content: start;
}

.footer__socials-label {
  grid-column: 1 / -1;
  font-size: calc(var(--fs-xs) - 1px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.footer__socials a {
  color: var(--color-text-muted);
  transition: color var(--t-fast);
  display: inline-flex;
  line-height: 1;
}

.footer__socials a i {
  font-size: 20px !important;
}

.footer__socials a:hover,
.footer__socials a:focus-visible {
  color: var(--color-primary);
}

.footer__bottom {
  border-top: 1px solid var(--color-border-soft);
  padding-block: var(--space-sm);
  font-size: calc(var(--fs-xs) - 1px);
  color: var(--color-text-soft);
  text-align: center;
}

/* ============================================================
   10. SERVICIOS
   Componente reutilizable: service-card
   Grilla responsive: 1 col mobile, 2 tablet, 3 desktop
   ============================================================ */

/* ---------- Cabecera de la sección ---------- */
.servicios__header {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .servicios__header {
    margin-bottom: var(--space-4xl);
  }
}

.servicios__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.servicios__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .servicios__title {
    font-size: var(--fs-3xl);
  }
}

.servicios__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 58ch;
  margin-inline: auto;
}

/* ---------- Grilla de tarjetas de servicios ---------- */
.servicios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .servicios__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
  .servicios__grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}



/* ---------- Tarjeta de servicio (componente reutilizable) ---------- */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-2xl);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--t-normal),
    box-shadow var(--t-normal),
    border-color var(--t-normal);
  height: 100%;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-soft);
}

/* Variante destacada: resalta el servicio principal */
.service-card--highlight {
  border-color: var(--color-primary);
  background:
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-primary-soft) 100%);
  box-shadow: var(--shadow-sm);
}

.service-card--highlight:hover,
.service-card--highlight:focus-within {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

/* Badge "Recomendado" para la tarjeta destacada */
.service-card__badge {
  position: absolute;
  top: -12px;
  right: var(--space-xl);
  padding: 0.35rem 0.85rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #ffffff;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  line-height: 1;
}

/* Etiqueta de categoría (chip) */
.service-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-secondary);
  background-color: rgba(122, 138, 110, 0.10);
  border-radius: var(--radius-full);
  line-height: 1.2;
}

.service-card__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

.service-card__description {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
  flex-grow: 1;
}

/* Información adicional (modalidad, formato, duración) */
.service-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin: 0;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  list-style: none;
}

.service-card--highlight .service-card__info {
  background-color: rgba(255, 255, 255, 0.6);
}

.service-card__info > li {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.service-card__info-label {
  font-weight: 600;
  color: var(--color-text);
  margin-right: 0.35rem;
}

/* CTA de la tarjeta */
.service-card__cta {
  margin-top: var(--space-sm);
}

.service-card__cta .btn {
  width: 100%;
}

@media (min-width: 1024px) {
  
  .service-card__cta .btn {
    width: auto;
  }
}

/* Adjust service card sizing for mobile to prevent full screen width */
@media (max-width: 639px) {
  .service-card {
    padding: var(--space-xl);
    gap: var(--space-sm);
  }
  
  .service-card__title {
    font-size: var(--fs-lg);
  }
  
  .service-card__description {
    font-size: var(--fs-xs);
    line-height: 1.6;
  }
  
  .service-card__info {
    padding: var(--space-sm);
  }
  
  .service-card__info > li {
    font-size: calc(var(--fs-xs) - 1px);
  }
  
  .service-card__cta .btn {
    padding: 0.7rem 1.3rem;
    font-size: var(--fs-xs);
  }
}


@media (min-width: 1024px) {
  .service-card__cta .btn {
    width: auto;
  }
}

/* ---------- Pie de sección Servicios ---------- */
.servicios__footer {
  text-align: center;
  margin-top: var(--space-3xl);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
}

.servicios__footer p {
  text-align: center;
}

.cupos{
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .servicios__footer {
    margin-top: var(--space-4xl);
    padding: var(--space-3xl);
  }
}

.servicios__footer-text {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 54ch;
  margin-inline: auto;
}

/* ============================================================
   11. TESTIMONIOS
   Componente reutilizable: testimonial-card
   Grilla responsive: 1 col mobile, 2 tablet, 3 desktop
   Comillas SVG decorativas (solo visual, aria-hidden)
   ============================================================ */

/* ---------- Cabecera de la sección ---------- */
.testimonios__header {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .testimonios__header {
    margin-bottom: var(--space-4xl);
  }
}

.testimonios__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.testimonios__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .testimonios__title {
    font-size: var(--fs-3xl);
  }
}

.testimonios__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 58ch;
  margin-inline: auto;
}

/* ---------- Grilla de testimonios ---------- */
.testimonios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

@media (min-width: 768px) {
  .testimonios__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
  .testimonios__grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}


/* ---------- Tarjeta de testimonio (componente reutilizable) ---------- */
.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-2xl);
  padding-top: calc(var(--space-2xl) + var(--space-md));
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  height: 100%;
  transition:
    transform var(--t-normal),
    box-shadow var(--t-normal);
}

.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Comilla decorativa (solo visual) */
.testimonial-card__quote {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-xl);
  flex-shrink: 0;
}

/* Bloque de cita */
.testimonial-card__quote-text {
  margin: 0;
  padding: 0;
  position: relative;
}

.testimonial-card__quote-text p {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}

@media (min-width: 768px) {
  .testimonial-card__quote-text p {
    font-size: var(--fs-md);
    line-height: 1.8;
  }
}

/* Autor del testimonio */
.testimonial-card__author {
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-soft);
}

.testimonial-card__author-name {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0 0 var(--space-xs) 0;
}

.testimonial-card__author-context {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   12. MEDIOS — HERO SECUNDARIO
   Más compacto que el hero principal. Sin imagen, solo texto.
   ============================================================ */
.medios-hero {
  position: relative;
  padding-block: var(--space-2xl);
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 10% 10%,
      var(--color-primary-soft) 0%,
      transparent 55%
    );
}

@media (min-width: 768px) {
  .medios-hero {
    padding-block: var(--space-3xl);
  }
}

.medios-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}

.medios-hero__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .medios-hero__title {
    font-size: var(--fs-3xl);
  }
}

.medios-hero__lead {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
}

@media (min-width: 768px) {
  .medios-hero__lead {
    font-size: var(--fs-md);
  }
}

/* ============================================================
   13. PRENSA — GRILLA EDITORIAL Y TARJETAS
   Componente: press-card
   Grilla responsive: 1 col mobile, 2 tablet, 3 desktop
   ============================================================ */

/* ---------- Cabecera de la sección ---------- */
.prensa__header {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .prensa__header {
    margin-bottom: var(--space-4xl);
  }
}

.prensa__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.prensa__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .prensa__title {
    font-size: var(--fs-3xl);
  }
}

/* ---------- Grilla de tarjetas de prensa ---------- */
.prensa__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

@media (min-width: 768px) {
  .prensa__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .prensa__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Tarjeta editorial de prensa (press-card) ---------- */
.press-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-2xl);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--t-normal),
    box-shadow var(--t-normal),
    border-color var(--t-normal);
  height: 100%;
}

.press-card:hover,
.press-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-soft);
}

/* Nombre del medio (chip sutil) */
.press-card__source {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-secondary);
  background-color: rgba(122, 138, 110, 0.10);
  border-radius: var(--radius-full);
  line-height: 1.2;
}

/* Título del artículo: permite varias líneas sin overflow */
.press-card__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-serif);
  flex-grow: 1;
  text-wrap: balance;
}

/* CTA: alineado al pie de la tarjeta */
.press-card__cta {
  align-self: flex-start;
  margin-top: auto;
  min-height: 40px; /* Touch friendly en mobile */
}

/* ============================================================
   15. MEDIOS — ENTREVISTAS / VIDEOS (YouTube embeds)
   Video-wrapper responsive 16:9, sin altura fija.
   Sin autoplay ni loops. El usuario decide cuándo reproducir.
   PARA AGREGAR / MODIFICAR VIDEOS: editar el <iframe> en
   medios.html dentro de <section id="entrevistas">.
   ============================================================ */

/* ---------- Cabecera de sección Entrevistas ---------- */
.entrevistas__header {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .entrevistas__header {
    margin-bottom: var(--space-4xl);
  }
}

.entrevistas__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.entrevistas__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .entrevistas__title {
    font-size: var(--fs-3xl);
  }
}

/* ---------- Grilla de videos ---------- */
.entrevistas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

@media (min-width: 768px) {
  .entrevistas__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
}

/* ---------- Tarjeta de video (YouTube embed) ---------- */
.media-video-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--t-normal),
    box-shadow var(--t-normal),
    border-color var(--t-normal);
  height: 100%;
}

.media-video-card:hover,
.media-video-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-soft);
}

/* ---------- Wrapper responsive 16:9 para iframe ---------- */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 = 9 / 16 * 100 */
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #000000;
  flex-shrink: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Contenido editorial bajo el video ---------- */
.media-video-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-grow: 1;
}

.media-video-source {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-secondary);
  background-color: rgba(122, 138, 110, 0.10);
  border-radius: var(--radius-full);
  line-height: 1.2;
}

.media-video-date {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  font-weight: 500;
}

.media-video-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-serif);
  text-wrap: balance;
}

.media-video-meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   16. MEDIOS — APARICIONES / REDES (Instagram)
   Se usan enlaces externos a publicaciones originales.
   SIN API de Instagram, SIN scripts externos, SIN embeds.
   PARA AGREGAR / MODIFICAR APARICIONES: editar <li> dentro
   de <section id="apariciones"> en medios.html.
   ============================================================ */

/* ---------- Cabecera de sección Apariciones ---------- */
.apariciones__header {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .apariciones__header {
    margin-bottom: var(--space-4xl);
  }
}

.apariciones__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.apariciones__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .apariciones__title {
    font-size: var(--fs-3xl);
  }
}

/* ---------- Grilla de apariciones ---------- */
.apariciones__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

@media (min-width: 640px) {
  .apariciones__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
}

@media (min-width: 960px) {  
  .apariciones__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-inline: auto;
  }
}

/* ---------- Tarjeta de aparición (Instagram) ---------- */
.appearance-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-primary-soft);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  height: 100%;
  transition:
    transform var(--t-normal),
    box-shadow var(--t-normal),
    border-color var(--t-normal);
}







.appearance-card:hover,
.appearance-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-soft);
}

/* ---------- Placeholder visual de portada ---------- */
/* Para agregar imagen local real: colocar archivo en assets/
   y reemplazar la clase .appearance-card__cover--placeholder
   por un <img> con la misma clase. */
.appearance-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* background-color: var(--color-surface-alt); */
}

.appearance-card__cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.6;
  background:
    linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-primary-soft) 100%);
  border-bottom: 1px dashed var(--color-border);
}

.appearance-card__cover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.appearance-card__cover-text {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ---------- Contenido editorial de la aparición ---------- */
.appearance-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  flex-grow: 1;
}

.appearance-card__platform {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
  border-radius: var(--radius-full);
  line-height: 1.2;
}

.appearance-card__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-serif);
  text-wrap: balance;
}

.appearance-card__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.appearance-card__cta {
  margin-top: auto;
  align-self: flex-start;
  min-height: 40px;
}

/* ---------- Badge visual para identificar reconocimientos ---------- */
/* Diferencia el Premio Fortuna sin duplicar contenido */
.appearance-card--recognition {
  border-color: var(--color-primary-soft);
  background:
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-primary-soft) 100%);
}

.appearance-card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #ffffff;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  line-height: 1;
}

/* ============================================================
   18. MEDIOS — REVISTA FORTUNA
   Contenido pendiente. Estructura: portada + datos de la nota.
   Placeholder visual mientras llega el archivo real del cliente.
   ============================================================ */

/* ---------- Cabecera de sección Revista Fortuna ---------- */
.fortuna__header {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .fortuna__header {
    margin-bottom: var(--space-4xl);
  }
}

.fortuna__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.fortuna__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .fortuna__title {
    font-size: var(--fs-3xl);
  }
}

/* ---------- Grilla / layout de revista ---------- */
.fortuna__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 880px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .fortuna__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Tarjeta de nota en Revista Fortuna ---------- */
.fortuna-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

@media (min-width: 768px) {
  .fortuna-card {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
    align-items: center;
  }
}

/* ---------- Portada / imagen de la revista ---------- */
.fortuna-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  overflow: hidden;
  display: block;
}

@media (min-width: 768px) {
  .fortuna-card__cover {
    aspect-ratio: auto;
    max-height: 420px;
    object-fit: contain;
  }
}

/* ---------- Placeholder visual (mientras llega imagen real) ---------- */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.6;
  background:
    linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-primary-soft) 100%);
  border: 2px dashed var(--color-border);
}

.media-placeholder > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.media-placeholder__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-xl);
  box-shadow: var(--shadow-sm);
}

.media-placeholder__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ---------- Datos / cuerpo de la nota ---------- */
.fortuna-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.fortuna-card__source {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-secondary);
  background-color: rgba(122, 138, 110, 0.10);
  border-radius: var(--radius-full);
  line-height: 1.2;
}

.fortuna-card__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
  font-family: var(--font-serif);
  text-wrap: balance;
}

.fortuna-card__date {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  font-weight: 500;
  margin: 0;
}

.fortuna-card__description {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

.fortuna-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-top: var(--space-sm);
}

@media (min-width: 480px) {
  .fortuna-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.fortuna-card__cta {
  align-self: flex-start;
  min-height: 40px;
}

/* ============================================================
   19. INDEX — MEDIOS DESTACADOS (Home)
   Sección breve que introduce la presencia en medios SIN cargar
   iframes de YouTube (rendimiento). Contenido completo en medios.html.
   ============================================================ */

/* ---------- Cabecera de sección Medios Destacados ---------- */
.medios-destacados__header {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .medios-destacados__header {
    margin-bottom: var(--space-4xl);
  }
}

.medios-destacados__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.medios-destacados__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .medios-destacados__title {
    font-size: var(--fs-3xl);
  }
}

.medios-destacados__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 58ch;
  margin: var(--space-lg) auto 0 auto;
}

/* ---------- Grilla de medios destacados ---------- */
/* IMPORTANTE: No se cargan iframes de YouTube para mantener la home ligera.
   Los videos completos solo se embeben en medios.html. */
.medios-destacados__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

@media (min-width: 768px) {
  .medios-destacados__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .medios-destacados__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .medios-destacados__grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- Tarjeta compacta de medio destacado (Home) ---------- */
.featured-media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--t-normal),
    box-shadow var(--t-normal),
    border-color var(--t-normal);
  height: 100%;
}

.featured-media-card:hover,
.featured-media-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-soft);
}

/* Chip / categoría del medio (Prensa / Entrevista / Reconocimiento) */
.featured-media-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
  border-radius: var(--radius-full);
  line-height: 1.2;
}

.featured-media-card__tag--press {
  color: var(--color-secondary);
  background-color: rgba(122, 138, 110, 0.10);
}

.featured-media-card__tag--video {
  color: #b84a4a;
  background-color: rgba(184, 74, 74, 0.08);
}

.featured-media-card__tag--recognition {
  color: var(--color-primary-hover);
  background-color: var(--color-primary-soft);
}

/* Título del medio destacado */
.featured-media-card__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-serif);
  text-wrap: balance;
  flex-grow: 1;
}

/* Nombre del medio origen */
.featured-media-card__source {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  font-weight: 500;
  margin: 0;
}

/* CTA: ver en medios.html (no carga iframes en home) */
.featured-media-card__cta {
  align-self: flex-start;
  margin-top: var(--space-sm);
  min-height: 40px;
}

/* ---------- Pie de sección Medios Destacados ---------- */
.medios-destacados__footer {
  text-align: center;
  margin-top: var(--space-3xl);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
}

@media (min-width: 768px) {
  .medios-destacados__footer {
    margin-top: var(--space-4xl);
    padding: var(--space-3xl);
  }
}

.medios-destacados__footer-text {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 54ch;
  margin-inline: auto;
}

/* ============================================================
   20. UTILIDADES AUXILIARES
   ============================================================ */

/* Ocultar visualmente pero mantener accesible para screen readers */
.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;
}

/* Evita scroll del body cuando el menú mobile está abierto */
.body--menu-open {
  overflow: hidden;
}

/* ============================================================
   21. NEWSLETTERS — HERO SECUNDARIO
   Compacto, sobrio, solo texto.
   ============================================================ */
.newsletters-hero {
  position: relative;
  padding-block: var(--space-2xl);
  overflow: hidden;
}


@media (min-width: 768px) {
  .newsletters-hero {
    padding-block: var(--space-3xl);
  }
}

.newsletters-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}

.newsletters-hero__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .newsletters-hero__title {
    font-size: var(--fs-3xl);
  }
}

.newsletters-hero__lead {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 58ch;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .newsletters-hero__lead {
    font-size: var(--fs-md);
  }
}

/* ============================================================
   22. NEWSLETTERS — LISTADO DE TARJETAS EDITORIALES
   3 bloques grandes con disposición alternada.
   Mobile: 1 columna (imagen arriba, contenido abajo).
   Desktop ≥960px: 2 columnas por tarjeta, layout alternado.
   ============================================================ */

.newsletters__header {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .newsletters__header {
    margin-bottom: var(--space-4xl);
  }
}

.newsletters__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.newsletters__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .newsletters__title {
    font-size: var(--fs-3xl);
  }
}

.newsletters__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .newsletters__list {
    gap: var(--space-4xl);
  }
}

/* ---------- Tarjeta editorial de newsletter ---------- */
.newsletter-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition:
    transform var(--t-normal),
    box-shadow var(--t-normal),
    border-color var(--t-normal);
}

.newsletter-card:hover,
.newsletter-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-soft);
}

@media (min-width: 960px) {
  .newsletter-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    min-height: 420px;
  }

  /* Layout A: portada izquierda, contenido derecha */
  .newsletter-card--layout-a .newsletter-card__cover-wrapper {
    order: 1;
  }
  .newsletter-card--layout-a .newsletter-card__content {
    order: 2;
  }

  /* Layout B: contenido izquierda, portada derecha (invertido) */
  .newsletter-card--layout-b .newsletter-card__cover-wrapper {
    order: 2;
  }
  .newsletter-card--layout-b .newsletter-card__content {
    order: 1;
  }
}

/* ---------- Portada / imagen del newsletter ---------- */
.newsletter-card__cover-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-alt);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.newsletter-card__cover-wrapper::after {
  content: '';
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: inherit;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 960px) {
  .newsletter-card__cover-wrapper {
    aspect-ratio: auto;
    height: 100%;
    min-height: 420px;
    max-height: 500px;
  }
}

/* ---------- Portadas específicas de cada newsletter ---------- */
.newsletter-card__cover--sinanestesia {
  background-color: #0E121E;
  background-image: url('../assets/images/Sin%20anestesia%20gpt.png');
}

.newsletter-card__cover--herederos {
  background-color: #121B16;
  background-image: url('../assets/images/Herederosdelexito.png');
}

.newsletter-card__cover--amorconsciente {
  background-color: #898272;
  background-image: url('../assets/images/linkedin%20portada%20(2).png');
}

/* Placeholder visual cuando la imagen no existe todavía */
.newsletter-card__cover-wrapper--no-image,
.newsletter-card__cover-wrapper--no-image::after {
  background-image: none !important;
}

.newsletter-card__cover-wrapper--no-image::after {
  content: '[ Espacio para portada del newsletter ]\A\A Ruta esperada:\A assets/images/newsletters/';
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.7;
  white-space: pre-line;
  background:
    linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-primary-soft) 100%);
  border: 2px dashed var(--color-border);
  z-index: 2;
  filter: none;
  opacity: 1;
  transform: none;
}

/* ---------- Contenido / cuerpo de la tarjeta ---------- */
.newsletter-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  justify-content: center;
}

@media (min-width: 768px) {
  .newsletter-card__content {
    padding: var(--space-2xl);
    gap: var(--space-lg);
  }
}

@media (min-width: 960px) {
  .newsletter-card--layout-a .newsletter-card__content {
    padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) var(--space-2xl);
  }
  .newsletter-card--layout-b .newsletter-card__content {
    padding: var(--space-3xl) var(--space-2xl) var(--space-3xl) var(--space-3xl);
  }
}

/* Chip de plataforma / origen */
.newsletter-card__platform {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #0a66c2;
  background-color: rgba(10, 102, 194, 0.08);
  border-radius: var(--radius-full);
  line-height: 1.2;
}

.newsletter-card__platform svg {
  flex-shrink: 0;
}

/* Título del newsletter */
.newsletter-card__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
  font-family: var(--font-serif);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .newsletter-card__title {
    font-size: var(--fs-2xl);
  }
}

/* Descripción breve */
.newsletter-card__description {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
  max-width: 55ch;
}

/* ---------- Acciones / CTAs ---------- */
.newsletter-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: stretch;
  margin-top: var(--space-sm);
}

@media (min-width: 480px) {
  .newsletter-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.newsletter-card__cta {
  width: 100%;
  min-height: 44px;
}

@media (min-width: 480px) {
  .newsletter-card__cta {
    width: auto;
  }
}

/* ============================================================
   23. PREFERENCIAS DEL USUARIO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   24. TEXTURAS DE FONDO — CÁLIDAS Y SUTILES
   Patrones SVG inline (sin archivos externos).
   Textura papel en body + textura grain en secciones alternas.
   ============================================================ */

/* ---------- Textura papel cálido en todo el body ---------- */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.94 0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23paper)' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
}

/* ---------- Textura grain sutil sobre section--alt ---------- */
.section--alt::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.87 0 0 0 0 0.82 0 0 0 0 0.76 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23grain)' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  mix-blend-mode: multiply;
}

.section--alt > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Manchas suaves de color en fondo general (sutil) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 90% -5%, rgba(241, 161, 134, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 35% at -10% 110%, rgba(122, 138, 110, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

main, .footer {
  position: relative;
  z-index: 1;
}

/* ============================================================
   25. COMPONENTE HERO-PHOTO (reutilizable en ambos heroes)
   Galería editorial con marcos cálidos, rotaciones sutiles
   y placeholders limpios cuando la imagen no existe.
   ============================================================ */

.hero-photo {
  position: relative;
  margin: 0;
  width: 100%;
  transition: transform var(--t-normal);
}

/* Dos variantes de marco cálido */


.hero-photo--a {
  padding: 10px;
  background: #fff; 
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 32px rgba(72, 58, 46, 0.10),
    0 2px 6px rgba(72, 58, 46, 0.05);
  border: 1px solid var(--color-border-soft);
}

.hero-photo--b {
  padding: 10px ;
  background: var(--color-primary-soft);
  border-radius: var(--radius-xl);
  box-shadow:
    0 14px 36px rgba(201, 127, 101, 0.16),
    0 2px 6px rgba(72, 58, 46, 0.05);
  border: 1px solid rgba(241, 161, 134, 0.3);
}

.hero-photo__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-alt);
  display: block;
}

.hero-photo__caption {
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0.02em;
  padding-inline: 4px;
}

/* Placeholder cuando no existe la imagen todavía */
.hero-photo--no-image .hero-photo__img {
  visibility: hidden;
}

.hero-photo--no-image::after {
  content: '[ Espacio para foto ]\A\A Ruta a colocar:\A assets/images/...';
  position: absolute;
  inset: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.8;
  white-space: pre-line;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(246, 235, 229, 0.6),
      rgba(246, 235, 229, 0.6) 12px,
      rgba(255, 255, 255, 0.6) 12px,
      rgba(255, 255, 255, 0.6) 24px
    ),
    linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-primary-soft) 100%);
  border: 2px dashed var(--color-border);
}

/* ============================================================
   26. NEWSLETTERS — HERO CON GALERÍA DE FOTOS
   Layout actualizado: texto + galería editorial asimétrica.
   Mobile: primero texto, luego galería.
   Desktop ≥ 960px: 2 columnas.
   ============================================================ */

.newsletters-hero {
  padding-block: var(--space-2xl);
  background:
    radial-gradient(ellipse 70% 60% at 5% 0%, rgba(241, 161, 134, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 50% at 100% 100%, rgba(122, 138, 110, 0.10), transparent 55%);
  
}

.newsletters-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='linen'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.89 0 0 0 0 0.84 0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23linen)' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: multiply;
}

.newsletters-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
  max-width: none;
  margin-inline: 0;
  text-align: left;
  position: relative;
  z-index: 1;
}

@media (min-width: 960px) {
  .newsletters-hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-4xl);
  }
}

.newsletters-hero__text {
  max-width: 55ch;
}

.newsletters-hero__title {
  text-align: left;
}

.newsletters-hero__lead {
  text-align: left;
  margin-inline: 0;
}

/* Galería tipo collage editorial para newsletters */
.newsletters-hero__gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(14, 1fr);
  aspect-ratio: 5 / 6;
  max-width: 540px;
  margin-inline: auto;
  width: 100%;
}

.newsletters-hero__photo--1 {
  grid-column: 1 / span 7;
  grid-row: 1 / span 9;
  transform: rotate(-2deg);
  z-index: 1;
}

.newsletters-hero__photo--2 {
  grid-column: 6 / span 7;
  grid-row: 5 / span 9;
  transform: rotate(2.5deg);
  z-index: 3;
}

.newsletters-hero__photo--3 {
  grid-column: 3 / span 6;
  grid-row: 10 / span 5;
  transform: rotate(-1deg);
  z-index: 4;
}

#newsletters-hero-title {
  margin-bottom: var(--space-md);
}

#fotolarga .newsletters-hero__photo--1 {
  height: 280px;
}


@media (hover: hover) and (pointer: fine) {
  .newsletters-hero__photo:hover {
    transform: rotate(0deg) translateY(-4px);
  }
}

/* Responsive hero photo heights for smaller screens */
@media (max-width: 640px) {
  .newsletters-hero__photo--1,
  .newsletters-hero__photo--2,
  .newsletters-hero__photo--3 {
    max-height: 220px;
  }

  .newsletters-hero__gallery {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 480px) {
  .newsletters-hero__photo--1,
  .newsletters-hero__photo--2,
  .newsletters-hero__photo--3 {
    max-height: 180px;
  }
  
  .newsletters-hero__gallery {
    aspect-ratio: 3 / 4;
  }
}


/* ============================================================
   27. MEDIOS — HERO CON GALERÍA DE FOTOS
   Mismo patrón editorial, disposición distinta para
   diferenciar la página.
   ============================================================ */

.medios-hero {
  padding-block: var(--space-2xl);
  background:
    radial-gradient(ellipse 65% 55% at 100% 0%, rgba(122, 138, 110, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 55% at 0% 100%, rgba(241, 161, 134, 0.15), transparent 55%);
}

.medios-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='weave'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0 0.82 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23weave)' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: multiply;
}

.medios-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
  max-width: none;
  margin-inline: 0;
  text-align: left;
  position: relative;
  z-index: 1;
}

@media (min-width: 960px) {
  .medios-hero__inner {
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-4xl);
  }
}

.medios-hero__text {
  max-width: 55ch;
}

@media (min-width: 960px) {
  .medios-hero__text {
    order: 2;
  }
  .medios-hero__gallery {
    order: 1;
  }
}

.medios-hero__title {
  text-align: left;
}

.medios-hero__lead {
  text-align: left;
  margin-inline: 0;
}

/* Galería tipo collage editorial para medios — disposición distinta */
.medios-hero__gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(14, 1fr);
  aspect-ratio: 5 / 6;
  max-width: 540px;
  margin-inline: auto;
  width: 100%;
}

.medios-hero__photo--1 {
  grid-column: 4 / span 8;
  grid-row: 1 / span 8;
  transform: rotate(2deg);
  z-index: 1;
}

.medios-hero__photo--2 {
  grid-column: 1 / span 7;
  grid-row: 4 / span 8;
  transform: rotate(-2.5deg);
  z-index: 3;
}

.medios-hero__photo--3 {
  grid-column: 5 / span 7;
  grid-row: 9 / span 6;
  transform: rotate(1.5deg);
  z-index: 4;
}

@media (hover: hover) and (pointer: fine) {
  .medios-hero__photo:hover {
    transform: rotate(0deg) translateY(-4px);
  }
}

/* Ajuste de spacing para pantallas pequeñas */
@media (max-width: 480px) {
  .newsletters-hero__gallery,
  .medios-hero__gallery {
    aspect-ratio: 4 / 5;
  }

  .hero-photo {
    padding: 7px;
  }
  .hero-photo--no-image::after {
    inset: 7px;
    font-size: var(--fs-xs);
  }

  .hero__image-wrapper {
    max-width: 240px;
  }
  .sobre-mi__image-wrapper {
    max-width: 260px;
  }
  .metodo__visual-wrapper {
    max-width: 340px;
  }

  .section {
    padding-block: var(--space-3xl);
  }

  .hero {
    padding-block: var(--space-2xl);
  }

  .hero__title {
    font-size: clamp(1.65rem, 1.30rem + 1.75vw, 1.9rem);
  }
  .hero__subtitle-accent {
    font-size: clamp(1.1rem, 1.00rem + 0.50vw, 1.2rem);
  }
  .hero__lead {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-xl);
  }

  .sobre-mi__title,
  .testimonios__title,
  .prensa__title,
  .entrevistas__title,
  .medios-destacados__title,
  .newsletters__title,
  .medios-hero__title,
  .newsletters-hero__title {
    font-size: clamp(1.45rem, 1.20rem + 1.25vw, 1.65rem);
  }

  .fortuna-card__title {
    font-size: var(--fs-lg);
  }

  .concept-card {
    padding: var(--space-lg);
    padding-top: calc(var(--space-lg) + var(--space-md));
  }
  .concept-card__title {
    font-size: var(--fs-md);
  }
  .concept-card__text {
    font-size: var(--fs-xs);
  }
  .concept-card__number {
    font-size: var(--fs-md);
  }

  .press-card,
  .testimonial-card,
  .featured-media-card,
  .media-video-card {
    padding: var(--space-lg);
    gap: var(--space-md);
  }

  .press-card__title,
  .newsletter-card__title,
  .media-video-title {
    font-size: var(--fs-md);
  }

  .btn {
    padding: 0.75rem 1.3rem;
  }
}

.form-message[hidden] {
  display: none !important;
}

.form-message {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
}

.form-message__text {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--fs-base);
  line-height: 1.6;
}

.form-message--success {
  background-color: #e9f5ec;
  color: #2f5e3a;
  border: 1px solid #b8dcc1;
}

.form-message--error {
  background-color: #fdecea;
  color: #7a2b2b;
  border: 1px solid #f0b8b4;
}

.form-message__btn {
  margin-top: var(--space-sm);
}

/* ============================================================
   28. DECORACIONES DE FONDO VARIADAS POR SECCIÓN
   Cada sección tiene una identidad visual única:
   - Patrones SVG inline diferentes
   - Blobs de colores en posiciones distintas
   - Combinaciones únicas pero coherentes
   ============================================================ */

/* ---------- HERO PRINCIPAL: Múltiples blobs + puntos dispersos ---------- */
.hero::before {
  background:
    radial-gradient(ellipse 55% 45% at 95% 0%, rgba(241, 161, 134, 0.22), transparent 65%),
    radial-gradient(ellipse 40% 35% at 0% 90%, rgba(122, 138, 110, 0.15), transparent 60%),
    radial-gradient(circle 120px at 80% 85%, rgba(241, 161, 134, 0.10), transparent 70%);
  opacity: 1;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(241, 161, 134, 0.18) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(122, 138, 110, 0.12) 1px, transparent 1px);
  background-size: 48px 48px, 32px 32px;
  background-position: 0 0, 24px 16px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

/* ---------- SOBRE MÍ: Líneas diagonales suaves + blob orgánico ---------- */
.sobre-mi {
  position: relative;
  overflow: hidden;
}

.sobre-mi::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0px,
      transparent 80px,
      rgba(241, 161, 134, 0.06) 80px,
      rgba(241, 161, 134, 0.06) 81px
    );
  pointer-events: none;
  z-index: 0;
}

.sobre-mi::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  right: -150px;
  top: -100px;
  background: radial-gradient(circle, rgba(122, 138, 110, 0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.sobre-mi > .container {
  position: relative;
  z-index: 1;
}

/* ---------- MÉTODO (section--alt): Cuadrícula sutil + blob diagonal inverso ---------- */
.metodo::before {
  background:
    radial-gradient(ellipse at 90% 80%, rgba(122, 138, 110, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 20%, rgba(241, 161, 134, 0.16) 0%, transparent 45%);
  opacity: 1;
}

.metodo::after {
  background-image:
    linear-gradient(rgba(72, 95, 233, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 95, 233, 0.03) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.87 0 0 0 0 0.82 0 0 0 0 0.76 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23grain)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 56px 56px, 56px 56px, 120px 120px;
}

/* ---------- SERVICIOS: Ondas suaves + círculos pequeños ---------- */
.servicios {
  position: relative;
  overflow: hidden;
}

.servicios::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%23f6ebe5' fill-opacity='0.55' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,117.3C672,107,768,117,864,138.7C960,160,1056,192,1152,186.7C1248,181,1344,139,1392,117.3L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.servicios::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 3px at 10% 20%, rgba(241, 161, 134, 0.22), transparent 70%),
    radial-gradient(circle 4px at 85% 35%, rgba(122, 138, 110, 0.18), transparent 70%),
    radial-gradient(circle 2.5px at 50% 75%, rgba(241, 161, 134, 0.18), transparent 70%),
    radial-gradient(circle 3.5px at 25% 85%, rgba(122, 138, 110, 0.14), transparent 70%),
    radial-gradient(circle 2px at 75% 60%, rgba(241, 161, 134, 0.16), transparent 70%),
    radial-gradient(circle 3px at 95% 90%, rgba(122, 138, 110, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.servicios > .container {
  position: relative;
  z-index: 1;
}

/* ---------- TESTIMONIOS (section--alt): Patrón de hexágonos sutiles + blob curvo ---------- */
.testimonios::before {
  background:
    radial-gradient(ellipse at 20% 85%, rgba(241, 161, 134, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 15%, rgba(122, 138, 110, 0.14) 0%, transparent 45%);
  opacity: 1;
}

.testimonios::after {
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L58 16v20L30 52 2 36V16z' fill='none' stroke='%237a8a6e' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.90 0 0 0 0 0.85 0 0 0 0 0.78 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23grain2)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 60px 52px, 120px 120px;
  background-position: 0 0, 30px 26px;
}

/* ---------- MEDIOS DESTACADOS: Patrón de rombos + blob esquina ---------- */
.medios-destacados {
  position: relative;
  overflow: hidden;
}

.medios-destacados::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20 20 40 0 20z' fill='none' stroke='%23f1a186' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.medios-destacados::after {
  content: '';
  position: absolute;
  width: 450px;
  height: 450px;
  left: -120px;
  bottom: -100px;
  background: radial-gradient(circle, rgba(241, 161, 134, 0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.medios-destacados > .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   29. DECORACIONES ESPECIALES — HEROES SECUNDARIOS
   ============================================================ */

/* ---------- NEWSLETTERS HERO: Patrón floral orgánico + blobs ---------- */
.newsletters-hero {
  position: relative;
  overflow: hidden;
}

.newsletters-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(241, 161, 134, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(122, 138, 110, 0.14), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.newsletters-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 2.5px at 15% 25%, rgba(241, 161, 134, 0.28), transparent 70%),
    radial-gradient(circle 1.8px at 80% 18%, rgba(122, 138, 110, 0.24), transparent 70%),
    radial-gradient(circle 3px at 60% 80%, rgba(241, 161, 134, 0.22), transparent 70%),
    radial-gradient(circle 2px at 25% 70%, rgba(122, 138, 110, 0.18), transparent 70%),
    radial-gradient(circle 1.5px at 90% 55%, rgba(241, 161, 134, 0.20), transparent 70%),
    radial-gradient(circle 2.5px at 45% 40%, rgba(122, 138, 110, 0.16), transparent 70%),
    radial-gradient(circle 1.8px at 70% 30%, rgba(241, 161, 134, 0.22), transparent 70%),
    radial-gradient(circle 2px at 10% 85%, rgba(122, 138, 110, 0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.newsletters-hero > .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   30. FOOTER — Decoración cálida con onda superior
   ============================================================ */

.footer {
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 80px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23fbf9f6' fill-opacity='0.45' d='M0,32L60,37.3C120,43,240,53,360,58.7C480,64,600,64,720,58.7C840,53,960,43,1080,42.7C1200,43,1320,53,1380,58.7L1440,64L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(241, 161, 134, 0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(241, 161, 134, 0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(122, 138, 110, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(122, 138, 110, 0.035) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

.footer__inner,
.footer__bottom {
  position: relative;
  z-index: 1;
}

/* ============================================================
   31. SECCIONES DE PÁGINAS INTERNAS — Prensa, Apariciones, Contacto
   ============================================================ */

/* ---------- PRENSA / MEDIOS: Patrón de líneas onduladas ---------- */
.prensa,
.apariciones,
.fortuna {
  position: relative;
  overflow: hidden;
}

.prensa::before,
.apariciones::before,
.fortuna::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      160deg,
      transparent 0px,
      transparent 120px,
      rgba(241, 161, 134, 0.045) 120px,
      rgba(241, 161, 134, 0.045) 121px
    ),
    repeating-linear-gradient(
      20deg,
      transparent 0px,
      transparent 100px,
      rgba(122, 138, 110, 0.04) 100px,
      rgba(122, 138, 110, 0.04) 101px
    );
  pointer-events: none;
  z-index: 0;
}

.prensa > .container,
.apariciones > .container,
.fortuna > .container {
  position: relative;
  z-index: 1;
}

/* ---------- NEWSLETTERS (listado): Patrón de círculos concéntricos ---------- */
.newsletters {
  position: relative;
  overflow: hidden;
}

.newsletters::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 90% 10%, rgba(241, 161, 134, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(122, 138, 110, 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.newsletters::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='90' cy='90' r='20' fill='none' stroke='%23f1a186' stroke-opacity='0.07' stroke-width='1'/%3E%3Ccircle cx='90' cy='90' r='40' fill='none' stroke='%23f1a186' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='90' cy='90' r='60' fill='none' stroke='%23f1a186' stroke-opacity='0.035' stroke-width='1'/%3E%3Ccircle cx='90' cy='90' r='80' fill='none' stroke='%237a8a6e' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.newsletters > .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   32. PIE DE SECCIONES — Decoraciones entre bloques
   ============================================================ */

/* Ajuste: asegurar z-index en todos los containers directos de section */
.section > .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   33. BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */
.whatsapp-float {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  width: clamp(52px, 12vw, 64px);
  height: clamp(52px, 12vw, 64px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #25D366;
  color: #ffffff;
  font-size: clamp(26px, 6vw, 32px);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  isolation: isolate;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: translateY(-2px) scale(1.06);
  background-color: #1ebe5d;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
  outline: none;
}

.whatsapp-float:active {
  transform: translateY(0) scale(1.02);
}

@media (max-width: 479px) {
  .whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .metodo__title,
  .servicios__title,
  .testimonios__title,
  .medios-hero__title,
  .prensa__title,
  .entrevistas__title,
  .apariciones__title,
  .fortuna__title,
  .medios-destacados__title,
  .newsletters-hero__title,
  .newsletters__title {
    font-size: var(--fs-2xl);
  }
}

@media (max-width: 639px) {
  .newsletters-hero__gallery,
  .medios-hero__gallery {
    max-width: 420px;
  }
  .hero__lead {
    font-size: var(--fs-sm);
  }
  .sobre-mi__lead,
  .metodo__lead,
  .servicios__lead,
  .testimonios__lead,
  .prensa__lead,
  .medios-destacados__lead,
  .medios-hero__lead,
  .newsletters-hero__lead {
    font-size: var(--fs-sm);
  }
  .sobre-mi__text,
  .metodo__text {
    font-size: var(--fs-sm);
  }
  .sobre-mi__title {
    font-size: var(--fs-xl);
  }
  .newsletter-card__description {
    font-size: var(--fs-sm);
  }
}