@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap');

/* ════════════════════════════════════════════════
   VARIABLES
   ════════════════════════════════════════════════ */
:root {
  --pink:    #e85d9a;
  --pink2:   #f472b6;
  --lavender:#c084fc;
  --white:   #f5f5f5;
  --muted:   #a0a0a0;
}


/* ════════════════════════════════════════════════
   BASE GRID — hero (presentacion)
   4 columnas: cols 1-2 texto, cols 3-4 foto.
   Botones en col 1 y col 2 de la misma fila.
   ════════════════════════════════════════════════ */

.page-fields.fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
}

.page-fields.fields > .field {
  grid-column: 1 / 3;
}

.page-fields.fields > .field.foto {
  grid-column: 3 / 5;
  grid-row: 1 / span 20;
  align-self: stretch;
  padding-left: 3rem;
  display: flex;
  align-items: center;
}

.field.foto .value {
  width: 100%;
  height: 100%;
}

.field.foto .value img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: top center;
  border-radius: 24px;
  border: 1px solid rgba(232, 93, 154, .25);
  background: linear-gradient(160deg, #2a0d20, #1a1a2e);
  display: block;
  transition: box-shadow .3s;
}

.field.foto .value img:hover {
  box-shadow: 0 0 48px rgba(232, 93, 154, .2);
}

.field.titulo_de_la_seccion .value span p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 1rem;
}

.field.subtitulo .value span {
  display: block;
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.field.fecha,
.field.inversion,
.field.modalidad {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .9rem 0;
}

.field.fecha + .field.inversion,
.field.inversion + .field.modalidad {
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.field.fecha .label,
.field.inversion .label,
.field.modalidad .label {
  display: block;
  margin-bottom: .1rem;
}

.field.fecha .label .name,
.field.inversion .label .name,
.field.modalidad .label .name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: .09em;
}

.field.fecha .value span,
.field.inversion .value span,
.field.modalidad .value span {
  font-size: .92rem;
  color: var(--white);
  line-height: 1.4;
}

/* Scoped: solo el hero necesita margen inferior en modalidad */
.presentacion .field.modalidad {
  margin-bottom: 2.25rem;
}

.page-fields.fields > .field.boton_comprar {
  grid-column: 1;
  display: flex;
  align-items: center;
}

.page-fields.fields > .field.boton_mostrar_demo {
  grid-column: 2;
  display: flex;
  align-items: center;
  padding-left: 1rem;
}

.field.boton_comprar .value,
.field.boton_mostrar_demo .value {
  display: flex;
}

.field.boton_comprar .value a {
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  color: #fff;
  border-radius: 50px;
  padding: .85rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s, transform .15s;
}

.field.boton_comprar .value a:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.field.boton_mostrar_demo .value a {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50px;
  padding: .85rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

.field.boton_mostrar_demo .value a:hover {
  border-color: var(--pink);
  color: var(--pink);
}


/* ════════════════════════════════════════════════
   LANDING PAGE — dark theme + layout
   ════════════════════════════════════════════════ */

.page.landing_page {
  background: #0f0f1a;
  font-family: 'Inter', sans-serif;
}

/* Outer: grid 2 columnas para contacto + formulario lado a lado */
.landing_page > .page-fields.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Todas las secciones: ancho completo */
.landing_page > .page-fields.fields > .field {
  grid-column: 1 / 3;
}

/* Contacto izquierda, formulario derecha */
.landing_page > .page-fields.fields > .field.medios_de_contacto {
  grid-column: 1;
}

.landing_page > .page-fields.fields > .field.formulario_de_compra {
  grid-column: 2;
}

/* Metadata del CMS — ocultar */
.landing_page > .page-fields.fields > .field.nahual_title_field {
  display: none;
}

.landing_page > .page-fields.fields > .field > .label {
  display: none;
}

/* Excepción: label del formulario como título introductorio */
.landing_page > .page-fields.fields > .field.formulario_de_compra > .label {
  display: block;
  max-width: 520px;
  padding: 0;
  margin-bottom: 0;
  box-sizing: border-box;
}

.landing_page > .page-fields.fields > .field.formulario_de_compra > .label .name {
  display: block;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}


/* ════════════════════════════════════════════════
   HERO (presentacion)
   ════════════════════════════════════════════════ */
.page.presentacion {
  padding: 6rem 5vw 5rem;
  background: #0f0f1a;
}


/* ════════════════════════════════════════════════
   BENEFICIOS DE MEDITAR
   ════════════════════════════════════════════════ */
.page.beneficios_de_meditar {
  padding: 5rem 5vw;
  background: #13111f;
  text-align: center;
}

.beneficios_de_meditar .page-fields.fields {
  display: block;
  max-width: 760px;
  margin: 0 auto;
}

.beneficios_de_meditar .field.nahual_title_field .value span {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  margin-bottom: .75rem;
  line-height: 1.2;
}

.beneficios_de_meditar .field.subtitulo .value span {
  display: block;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.beneficios_de_meditar .field.descripcion_breve .value span {
  display: block;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
}


/* ════════════════════════════════════════════════
   ASÍ SON LAS SESIONES (demo_de_sesiones)
   ════════════════════════════════════════════════ */
.page.asi_son_las_sesiones {
  padding: 5rem 5vw;
  background: #0f0f1a;
  text-align: center;
}

/* Grid 3 columnas para stats; título/texto/video a ancho completo */
.asi_son_las_sesiones .page-fields.fields {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.5rem;
  row-gap: 0;
}

.asi_son_las_sesiones .page-fields.fields > .field.nahual_title_field,
.asi_son_las_sesiones .page-fields.fields > .field.subtitulo,
.asi_son_las_sesiones .page-fields.fields > .field.descripcion,
.asi_son_las_sesiones .page-fields.fields > .field.video_demostrativo {
  grid-column: 1 / 4;
}

.asi_son_las_sesiones .page-fields.fields > .field.comunidad,
.asi_son_las_sesiones .page-fields.fields > .field.cuando,
.asi_son_las_sesiones .page-fields.fields > .field.modalidad {
  grid-column: span 1;
}

.asi_son_las_sesiones .field.nahual_title_field .value span {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  margin-bottom: .75rem;
}

.asi_son_las_sesiones .field.subtitulo .value span {
  display: block;
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.asi_son_las_sesiones .field.descripcion .value span {
  display: block;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 2.5rem;
}

/* Tarjetas de stat */
.asi_son_las_sesiones .field.comunidad,
.asi_son_las_sesiones .field.cuando,
.asi_son_las_sesiones .field.modalidad {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 2rem 1.5rem;
}

.asi_son_las_sesiones .field.comunidad .value span p,
.asi_son_las_sesiones .field.cuando .value span p,
.asi_son_las_sesiones .field.modalidad .value span p {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* Número grande de cada stat */
.asi_son_las_sesiones .field.comunidad .value span p span,
.asi_son_las_sesiones .field.cuando .value span p span,
.asi_son_las_sesiones .field.modalidad .value span p span {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  margin-bottom: .2rem;
}

/* Video responsivo (ratio 16:9) */
.asi_son_las_sesiones .field.video_demostrativo {
  margin-top: 3rem;
}

.asi_son_las_sesiones .field.video_demostrativo .value {
  max-width: 640px;
  margin: 0 auto;
}

.asi_son_las_sesiones .field.video_demostrativo .value span {
  display: block;
}

.asi_son_las_sesiones .field.video_demostrativo .value span p {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 16px;
  border: 1px solid rgba(232, 93, 154, .2);
}

.asi_son_las_sesiones .field.video_demostrativo .value span p iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}


/* ════════════════════════════════════════════════
   SOBRE TU GUÍA (sobre_mi)
   Foto izquierda, texto derecha
   ════════════════════════════════════════════════ */
.page.sobre_mi {
  padding: 5rem 5vw;
  background: #13111f;
}

.sobre_mi .page-fields.fields {
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
  align-items: center;
}

.sobre_mi .page-fields.fields > .field.foto {
  grid-column: 1;
  grid-row: 1 / span 3;
  padding-left: 0;
  align-self: stretch;
}

.sobre_mi .field.foto .value {
  height: 100%;
  display: flex;
  align-items: center;
}

.sobre_mi .field.foto .value img,
.sobre_mi .field.foto .value image {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: top center;
  border-radius: 24px;
  border: 1px solid rgba(232, 93, 154, .25);
}

.sobre_mi .page-fields.fields > .field.nahual_title_field {
  grid-column: 2;
  grid-row: 1;
}

.sobre_mi .field.nahual_title_field .value span {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .75rem;
}

.sobre_mi .page-fields.fields > .field.nombre_del_instructor {
  grid-column: 2;
  grid-row: 2;
}

.sobre_mi .field.nombre_del_instructor .value span {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--white);
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.sobre_mi .page-fields.fields > .field.descripcion {
  grid-column: 2;
  grid-row: 3;
}

.sobre_mi .field.descripcion .value span {
  display: block;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.8;
  white-space: pre-line;
}


/* ════════════════════════════════════════════════
   CONTACTO (seccion_contacto)
   ════════════════════════════════════════════════ */
.page.seccion_contacto {
  padding: 5rem 5vw;
  background: #0f0f1a;
  text-align: left;
  height: 100%;
  box-sizing: border-box;
}

.seccion_contacto .page-fields.fields {
  display: block;
  max-width: 480px;
  margin: 0;
}

.seccion_contacto .field.nahual_title_field .value span {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  margin-bottom: .75rem;
}

.seccion_contacto .field.subtitulo .value span {
  display: block;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.seccion_contacto .field.descripcion_breve .value span {
  display: block;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.seccion_contacto .field.whatsapp,
.seccion_contacto .field.email,
.seccion_contacto .field.sesiones {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: .75rem;
}

.seccion_contacto .field.whatsapp .label,
.seccion_contacto .field.sesiones .label {
  display: block;
  margin-bottom: .25rem;
}

.seccion_contacto .field.whatsapp .label .name,
.seccion_contacto .field.sesiones .label .name {
  font-size: .7rem;
  font-weight: 600;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: .09em;
}

.seccion_contacto .field.whatsapp .value span,
.seccion_contacto .field.email .value span,
.seccion_contacto .field.sesiones .value span {
  display: block;
  color: var(--white);
  font-size: .95rem;
}


/* ════════════════════════════════════════════════
   FORMULARIO DE COMPRA
   ════════════════════════════════════════════════ */
.landing_page .field.formulario_de_compra > .value {
  max-width: 520px;
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}

.field.formulario_de_compra .fieldInContents.fields {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 2.5rem;
  margin: 0;
  float: none;
  background: rgba(255, 255, 255, .04);
}

.field.formulario_de_compra label {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .4rem;
  margin-top: 1.25rem;
}

.field.formulario_de_compra .form_compra_nombre label,
.field.formulario_de_compra .form_compra_email label,
.field.formulario_de_compra .form_compra_whatsapp > label {
  margin-top: 0;
}

.field.formulario_de_compra input.form-control,
.field.formulario_de_compra select.form-control {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: var(--white) !important;
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .95rem;
  width: 100%;
  margin-bottom: .5rem;
}

/* Select: fondo sólido oscuro + borde más visible + flecha nativa */
.field.formulario_de_compra select.form-control {
  background: #1e1b2e !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  appearance: auto;
}

.field.formulario_de_compra select.form-control option {
  background: #1e1b2e;
  color: var(--white);
}

.field.formulario_de_compra select.form-control option:disabled {
  color: var(--muted);
}

.field.formulario_de_compra input.form-control:focus,
.field.formulario_de_compra select.form-control:focus {
  outline: none;
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(232, 93, 154, .15);
}

/* Override color: black !important de css.css */
.field.formulario_de_compra .collection-element-item,
.field.formulario_de_compra .collection-element-item label {
  color: var(--muted) !important;
  display: block;
  margin-top: .75rem;
}

/* Solo el div contenedor de WhatsApp — no afecta input ni select */
.field.formulario_de_compra .form_compra_whatsapp div.form-control {
  background: transparent !important;
  border: none !important;
  padding: 0;
}

.field.formulario_de_compra .btn-pagar-con-mp {
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: .95rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  margin-top: 1.5rem;
  display: block;
}

.field.formulario_de_compra .btn-pagar-con-mp:hover {
  opacity: .88;
  transform: translateY(-1px);
}


/* ════════════════════════════════════════════════
   TABLET (max-width: 900px)
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Hero: 2 columnas, foto a ancho completo */
  .page-fields.fields {
    grid-template-columns: 1fr 1fr;
  }

  .page-fields.fields > .field {
    grid-column: 1 / 3;
  }

  .page-fields.fields > .field.foto {
    grid-column: 1 / 3;
    grid-row: auto;
    padding-left: 0;
    margin-bottom: 1.5rem;
  }

  .field.foto .value img {
    max-height: 380px;
    width: 100%;
  }

  .page-fields.fields > .field.boton_comprar { grid-column: 1; }
  .page-fields.fields > .field.boton_mostrar_demo { grid-column: 2; }

  /* Padding de secciones */
  .page.presentacion,
  .page.beneficios_de_meditar,
  .page.asi_son_las_sesiones,
  .page.sobre_mi,
  .page.seccion_contacto {
    padding: 4rem 5vw;
  }

  /* Contacto + formulario: columna única */
  .landing_page > .page-fields.fields > .field.medios_de_contacto,
  .landing_page > .page-fields.fields > .field.formulario_de_compra {
    grid-column: 1 / 3;
  }

  .landing_page > .page-fields.fields > .field.formulario_de_compra > .label {
    max-width: 100%;
  }

  .landing_page .field.formulario_de_compra > .value {
    padding: 3rem 5vw 4rem;
    max-width: 100%;
    height: auto;
  }

  .page.seccion_contacto {
    height: auto;
  }

  .seccion_contacto .page-fields.fields {
    max-width: 100%;
  }

  /* Stats en columna única */
  .asi_son_las_sesiones .page-fields.fields {
    grid-template-columns: 1fr;
  }

  .asi_son_las_sesiones .page-fields.fields > .field.nahual_title_field,
  .asi_son_las_sesiones .page-fields.fields > .field.subtitulo,
  .asi_son_las_sesiones .page-fields.fields > .field.descripcion,
  .asi_son_las_sesiones .page-fields.fields > .field.video_demostrativo {
    grid-column: 1;
  }

  .asi_son_las_sesiones .page-fields.fields > .field.comunidad,
  .asi_son_las_sesiones .page-fields.fields > .field.cuando,
  .asi_son_las_sesiones .page-fields.fields > .field.modalidad {
    grid-column: 1;
    margin-bottom: 1rem;
  }

  /* Sobre mi: foto arriba, texto abajo */
  .sobre_mi .page-fields.fields {
    grid-template-columns: 1fr;
  }

  .sobre_mi .page-fields.fields > .field.foto {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    margin-bottom: 2rem;
  }

  .sobre_mi .page-fields.fields > .field.nahual_title_field,
  .sobre_mi .page-fields.fields > .field.nombre_del_instructor,
  .sobre_mi .page-fields.fields > .field.descripcion {
    grid-column: 1;
    grid-row: auto;
  }

  .sobre_mi .field.foto .value img,
  .sobre_mi .field.foto .value image {
    max-height: 360px;
    height: auto;
  }
}


/* ════════════════════════════════════════════════
   MÓVIL (max-width: 600px)
   ════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Hero: columna única, botones apilados */
  .page-fields.fields {
    grid-template-columns: 1fr;
  }

  .field.titulo_de_la_seccion .value span p {
    font-size: 2rem;
  }

  .field.foto .value img {
    max-height: 280px;
    border-radius: 16px;
  }

  .page-fields.fields > .field.foto,
  .page-fields.fields > .field.boton_comprar,
  .page-fields.fields > .field.boton_mostrar_demo {
    grid-column: 1;
    grid-row: auto;
  }

  .page-fields.fields > .field.boton_mostrar_demo {
    padding-left: 0;
    margin-top: .75rem;
  }

  .field.boton_comprar .value a,
  .field.boton_mostrar_demo .value a {
    width: 100%;
    text-align: center;
    display: block;
  }

  /* Padding de secciones */
  .page.presentacion,
  .page.beneficios_de_meditar,
  .page.asi_son_las_sesiones,
  .page.sobre_mi,
  .page.seccion_contacto {
    padding: 3rem 1.25rem;
  }

  /* Sobre mi */
  .sobre_mi .field.foto .value img,
  .sobre_mi .field.foto .value image {
    max-height: 280px;
    border-radius: 16px;
  }

  /* Formulario */
  .landing_page > .page-fields.fields > .field.formulario_de_compra > .label {
    max-width: 100%;
  }

  .landing_page .field.formulario_de_compra > .value {
    padding: 1.5rem 1.25rem 3rem;
    height: auto;
  }

  .field.formulario_de_compra .fieldInContents.fields {
    padding: 1.5rem;
  }
}


/* ════════════════════════════════════════════════
   NAV — menu-2 (landing page meditaciones)
   Overrides the global blue .nav-bar.menu styles
   ════════════════════════════════════════════════ */
.nav-bar.menu.menu-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(15, 15, 26, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding: 1rem 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Logo */
.nav-bar.menu.menu-2 .item.logo .menu-link {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}

/* Lista de links */
.nav-bar.menu.menu-2 ul.menu {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  width: auto;
  height: auto;
}

.nav-bar.menu.menu-2 ul.menu .item a {
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: .5rem 1rem;
  border-radius: 50px;
  transition: color .2s;
  display: block;
}

.nav-bar.menu.menu-2 ul.menu .item a:hover {
  color: var(--white);
  font-size: .88rem;
}

/* Último ítem ("Inscribirme") como CTA */
.nav-bar.menu.menu-2 ul.menu .item:last-child a {
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  color: #fff;
  font-weight: 600;
  padding: .5rem 1.25rem;
}

.nav-bar.menu.menu-2 ul.menu .item:last-child a:hover {
  opacity: .88;
  color: #fff;
}

/* Compensar el nav fijo (el hero ya tiene 6rem de padding-top) */
html:has(.menu-2) {
  scroll-padding-top: 72px;
}

/* ════════════════════════════════════════════════
   NAV menu-2 — cancelar hamburger de css.css (992px)
   css.css convierte .nav-bar.menu en hamburger:
   font-size:3em, display:flow-root, ul oculta con
   icono de imagen, body {margin-top:15%}.
   Todo eso se revierte aquí solo para menu-2.
   ════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .nav-bar.menu.menu-2 {
    font-size: 1rem;
    display: flex;
    padding: .875rem 5vw;
  }

  .nav-bar.menu.menu-2 ul.menu {
    width: auto;
    height: auto;
    background-image: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    padding-left: 0;
    float: none;
    margin: 0;
    user-select: auto;
  }

  /* css.css oculta los li del menú en mobile — revertir */
  .nav-bar.menu.menu-2 ul.menu li {
    display: list-item;
    padding: 0;
    padding-bottom: 0;
    margin-left: 0;
  }

  .nav-bar.menu.menu-2 ul.menu:hover {
    width: auto;
    height: auto;
  }

  .nav-bar.menu.menu-2 ul.menu:hover > li {
    display: list-item;
    padding-bottom: 0;
    margin-left: 0;
  }
}

/* ── Tablet 900px — nav ── */
@media (max-width: 900px) {
  .nav-bar.menu.menu-2 {
    padding: .875rem 5vw;
  }
}

/* ════════════════════════════════════════════════
   FOOTER — .bloque.footer
   Overrides the global blue footer from css.css
   ════════════════════════════════════════════════ */
.bloque.footer {
  background: #08080f;
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 2.5rem 5vw;
  text-align: center;
  float: none;
  display: block;
  width: 100%;
  margin-top: 0;
  box-sizing: border-box;
}

.bloque.footer .footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 .4rem;
}

.bloque.footer .footer-note {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  color: var(--muted);
  margin: 0;
}

/* ── Tablet 900px — footer ── */
@media (max-width: 900px) {
  .bloque.footer {
    padding: 2rem 5vw;
  }
}

/* ── Móvil 600px — nav ── */
@media (max-width: 600px) {
  .nav-bar.menu.menu-2 {
    padding: .75rem 1.25rem;
  }

  .nav-bar.menu.menu-2 .item.logo .menu-link {
    font-size: 1rem;
  }

  .nav-bar.menu.menu-2 ul.menu .item a {
    padding: .45rem .75rem;
    font-size: .82rem;
  }

  .nav-bar.menu.menu-2 ul.menu .item:last-child a {
    padding: .45rem .9rem;
  }

  .bloque.footer {
    padding: 1.75rem 1.25rem;
  }
}