/* Capa de fondo global detrás de TODO el contenido — solo en page-id-32 */
.page-id-32 #parallax-bg{
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.page-id-32 #parallax-bg-inner{
  position: absolute; left: 0; right: 0; top: 0;
  background-image: url('https://offsidersports.com/wp-content/uploads/2025/08/FONDO.jpg');
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  will-change: transform;
}

/* Esta página debe ser transparente para que se vea el fondo */
.page-id-32,
.page-id-32 .elementor,
.page-id-32 .elementor-section-wrap,
.page-id-32 .elementor-container,
.page-id-32 .elementor-column{ background: transparent !important; }

/* El footer (del theme o Elementor) también transparente SOLO aquí */
.page-id-32 footer,
.page-id-32 .site-footer,
.page-id-32 .elementor-location-footer{
  background: transparent !important;
  box-shadow: none !important; border: 0 !important;
}

/* Alturas de secciones a pantalla completa, seguras en todos los dispositivos */
.page-id-32 .hero,
.page-id-32 .practica-overlay{ min-height: 100svh; }
@supports (min-height: 100dvh){
  .page-id-32 .hero,
  .page-id-32 .practica-overlay{ min-height: 100dvh; }
}

/* Respeto por accesibilidad: si el usuario pide menos movimiento */
@media (prefers-reduced-motion: reduce){
  .page-id-32 #parallax-bg-inner{ transform: none !important; }
}


/* ====== TABLET (<=1024px) ====== */
@media (max-width: 1024px){

  /* Tipos un pelín más contenidos */
  .page-id-32 h1{ font-size: clamp(2.2rem, 4vw, 3rem); }
  .page-id-32 h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }

  /* Secciones de dos columnas -> una encima de otra */
  .page-id-32 .formacion .formacion-grid{ display:flex; flex-direction: column; gap: 28px; }
  .page-id-32 .formacion .formacion-imagen{ max-width: 100%; }
  .page-id-32 .formacion .formacion-texto{ padding: 0 20px; }

  /* Grid “¿Qué vas a aprender?” → 3 col */
  .page-id-32 .aprendizaje-grid{ grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .page-id-32 .aprendizaje-grid .card{ padding:16px; font-size:.95rem; }

  /* Duración: espaciado más compacto */
  .page-id-32 .duracion{ padding: 80px 20px; }
  .page-id-32 .duracion h1{ font-size: clamp(2.2rem, 6vw, 3rem); }

  /* Práctica: centra contenido y da aire */
  .page-id-32 .practica-inner{ padding: 80px 20px; }
  .page-id-32 .practica-contenido{ max-width: 640px; margin: 0 auto; text-align: center; }
  .page-id-32 .practica-contenido h2{ font-size: clamp(2rem, 4vw, 2.4rem); }
  .page-id-32 .practica-contenido ul{ margin: 10px 0 24px; }
  .page-id-32 .practica-contenido ul li{ margin-bottom: 8px; }

  /* Formulario: campo + botón con buen gap */
  .page-id-32 .contacto-cta .wpcf7-form,
  .page-id-32 .formulario-contacto{
    display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  }
}

/* ====== MÓVIL (<=767px) ====== */
@media (max-width: 767px){

  .page-id-32 body{ line-height: 1.6; }

  /* Hero */
  .page-id-32 .hero .hero-texto h1{ font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.15; }
  .page-id-32 .hero .hero-texto h3{ font-size: 0.95rem; }

  /* Formación (2 y 5) */
  .page-id-32 .formacion{ padding: 60px 16px !important; }
  .page-id-32 .formacion .formacion-texto h2{ font-size: 1.6rem; margin-bottom: 20px; }
  .page-id-32 .formacion .formacion-item h3{ font-size: 1.05rem; }
  .page-id-32 .formacion .formacion-item p{ font-size: 0.95rem; }

  /* ¿Qué vas a aprender? → 2 col y luego 1 */
  .page-id-32 .aprendizaje-overlay{ padding: 70px 16px !important; }
  .page-id-32 .aprendizaje-grid{ grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
}

/* ====== Extra pequeño (<=480px) — separada para compatibilidad */
@media (max-width: 480px){
  .page-id-32 .aprendizaje-grid{ grid-template-columns: 1fr !important; }
}

/* ====== Micro-phones (<=380px) ====== */
@media (max-width: 380px){
  .page-id-32 .hero .hero-texto h1{ font-size: 1.7rem; }
  .page-id-32 .practica-contenido h2{ font-size: 1.7rem; }
}
/* ————— Transparencias SOLO en page 32 para secciones “planas” ————— */
.page-id-32 .formacion,
.page-id-32 .duracion,
.page-id-32 .modulos-oml,
.page-id-32 .contacto-cta{
  background: transparent !important;
}

/* Quita fondo del wrapper de Elementor SOLO si dentro lleva esas clases */
.page-id-32 .elementor-section:has(.formacion),
.page-id-32 .elementor-section:has(.duracion),
.page-id-32 .elementor-section:has(.modulos-oml),
.page-id-32 .elementor-section:has(.contacto-cta){
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* No tocar las secciones con foto de fondo */
.page-id-32 .aprendizaje-overlay,
.page-id-32 .practica-overlay,
.page-id-32 .hero{ /* tu héroe con la foto de Messi */
  /* se quedan como están */
}
/* Evita scroll horizontal por el 100vw */
.page-id-32{ overflow-x: hidden; }

/* 1) El propio bloque de cada sección a full-bleed */
.page-id-32 .hero,
.page-id-32 .aprendizaje-overlay,
.page-id-32 .practica-overlay{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* opcional: elimina rellenos si los hubiera */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Si el bloque está dentro de una sección "boxed" de Elementor,
      forzamos que esa sección también sea full-bleed */
.page-id-32 .elementor-section:has(.hero),
.page-id-32 .elementor-section:has(.aprendizaje-overlay),
.page-id-32 .elementor-section:has(.practica-overlay){
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Y que su contenedor interno no limite el ancho */
.page-id-32 .elementor-section:has(.hero) > .elementor-container,
.page-id-32 .elementor-section:has(.aprendizaje-overlay) > .elementor-container,
.page-id-32 .elementor-section:has(.practica-overlay) > .elementor-container{
  max-width: none !important;
  width: 100% !important;
}
.page-id-32 {
  --accent: #f8a3f5;
  --header-h: 72px;
  overflow-x: hidden;
}
.page-id-32 html { scroll-behavior: smooth; }
/* que los anclajes no queden escondidos tras el header fijo */
.page-id-32 [id]{ scroll-margin-top: var(--header-h); }

/* ===== Header ===== */
.page-id-32 .oml-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(11,14,30,.55);           /* vidrio oscuro */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  height: var(--header-h);
}
.page-id-32 .oml-wrap{
  max-width: 1200px; margin: 0 auto; padding: 0 16px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.page-id-32 .oml-brand{
  display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
  font-weight: 700; letter-spacing: .02em;
}
.page-id-32 .oml-brand img{ height: 28px; width: auto; display:block; }
.page-id-32 .oml-brand span{ font-size: 0.95rem; opacity: .95; }

/* nav desktop */
.page-id-32 .oml-nav{ display: flex; align-items: center; gap: 18px; }
.page-id-32 .oml-nav a{
  color: #ffffff; text-decoration: none; font-weight: 600; opacity: .9;
  padding: 8px 10px; border-radius: 8px; transition: opacity .2s ease, background-color .2s ease;
}
.page-id-32 .oml-nav a:hover{ opacity: 1; background: rgba(255,255,255,.06); }

/* CTA */
.page-id-32 .oml-nav .btn-cta{
  border: 2px solid var(--accent);
  color: #0b0e1e; background: #fff; font-weight: 800;
  padding: 10px 14px; transition: all .25s ease;
}
.page-id-32 .oml-nav .btn-cta:hover{
  background: var(--accent); color: #fff;
}

/* burger (móvil) */
.page-id-32 #oml-nav-toggle{ display: none; }
.page-id-32 .oml-burger{
  display: none; width: 40px; height: 40px; border-radius: 10px;
  align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
}
.page-id-32 .oml-burger span,
.page-id-32 .oml-burger span::before,
.page-id-32 .oml-burger span::after{
  content:""; display:block; width: 18px; height: 2px; background:#fff; border-radius: 2px;
  position: relative; transition: transform .2s ease, opacity .2s ease;
}
.page-id-32 .oml-burger span::before{ position:absolute; top:-6px; }
.page-id-32 .oml-burger span::after{ position:absolute; top:6px; }

/* ===== Footer ===== */
.page-id-32 .oml-footer{
  background: rgba(11,14,30,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 30px 16px; color:#fff; margin-top: 40px;
}
.page-id-32 .f-flex{
  display:grid; gap:16px; align-items:center;
  grid-template-columns: 1fr auto auto;
}
.page-id-32 .f-brand{ display:flex; align-items:center; gap:10px; }
.page-id-32 .f-brand img{ height:26px; width:auto; display:block; }
.page-id-32 .f-links a, .page-id-32 .f-social a{
  color:#fff; opacity:.9; text-decoration:none; margin-right:14px; font-size:.95rem;
}
.page-id-32 .f-links a:hover, .page-id-32 .f-social a:hover{ color: var(--accent); opacity:1; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .page-id-32 .oml-burger{ display: inline-flex; }
  .page-id-32 .oml-nav{
    position: absolute; top: var(--header-h); right: 8px; left: 8px;
    background: rgba(11,14,30,.92); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 10px; display: none; flex-direction: column; gap: 6px;
  }
  .page-id-32 #oml-nav-toggle:checked ~ .oml-burger span{ background: transparent; }
  .page-id-32 #oml-nav-toggle:checked ~ .oml-burger span::before{ transform: translateY(6px) rotate(45deg); }
  .page-id-32 #oml-nav-toggle:checked ~ .oml-burger span::after{ transform: translateY(-6px) rotate(-45deg); }
  .page-id-32 #oml-nav-toggle:checked ~ .oml-nav{ display: flex; }

  .page-id-32 .f-flex{ grid-template-columns: 1fr; text-align:center; }
  .page-id-32 .f-links a, .page-id-32 .f-social a{ margin: 6px 10px; display:inline-block; }
}
/* Ocultar header del theme y títulos SOLO en la landing (ID 32) */
.page-id-32 .site-header,
.page-id-32 header.wp-block-template-part,   /* block themes */
.page-id-32 .entry-header,
.page-id-32 .page-header,
.page-id-32 .wp-block-post-title,
.page-id-32 h1.entry-title,
.page-id-32 .page-title{ display:none !important; }

/* Quitar el padding/margen superior que deja el theme */
.page-id-32 .wp-site-blocks,
.page-id-32 .site-content{ padding-top:0 !important; margin-top:0 !important; }
/* =========================
   1) Declaración de WEBFONTS
   Reemplaza cada URL por la de tu biblioteca (las que ves en Medios)
   ========================= */
@font-face{
  font-family:"Akira Expanded";
  src:
    url("https://offsidermedialab.com/wp-content/uploads/2025/08/subset-AkiraExpanded-SuperBold.woff") format("woff"),
    url("https://offsidermedialab.com/wp-content/uploads/2025/08/AkiraExpanded-SuperBold-800.otf") format("opentype");
  font-weight: 800; /* SuperBold */
  font-style: normal;
  font-display: swap;
}

/* Helvetica Now Text (solo tienes Bold y Black, con/ sin italic) */
@font-face{
  font-family:"Helvetica Now Text";
  src: url("https://offsidermedialab.com/wp-content/uploads/2025/08/subset-HelveticaNowText-Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Helvetica Now Text";
  src: url("https://offsidermedialab.com/wp-content/uploads/2025/08/subset-HelveticaNowText-BoldItalic.woff") format("woff");
  font-weight:700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Helvetica Now Text";
  src: url("https://offsidermedialab.com/wp-content/uploads/2025/08/subset-HelveticaNowText-Black.woff") format("woff");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Helvetica Now Text";
  src: url("https://offsidermedialab.com/wp-content/uploads/2025/08/subset-HelveticaNowText-BlackItalic.woff") format("woff");
  font-weight:900; font-style:italic; font-display:swap;
}

/* Smoothing para que se vean nítidas en todos los navegadores */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* =========================
   2) Aplicación (scope: SOLO página 32)
   Si las quieres globales, elimina ".page-id-32" en estas reglas.
   ========================= */
.page-id-32{
  --heading-font: "Akira Expanded", "Arial Black", system-ui, sans-serif;
  --text-font: "Helvetica Now Text", "Helvetica Neue", Arial, sans-serif;
}

.page-id-32 body,
.page-id-32 p,
.page-id-32 li,
.page-id-32 .formacion-item p,
.page-id-32 .contacto-cta p{
  font-family: var(--text-font);
  font-weight: 400; /* NOTA: no tienes Regular (400); usará el fallback "Helvetica Neue".
                      Si quieres que TODO el párrafo sea Helvetica Now, súbenos la variante Regular (400). */
}

/* Titulares principales con Akira */
.page-id-32 h1,
.page-id-32 h2,
.page-id-32 .hero .hero-texto h1,
.page-id-32 .aprendizaje-contenido h2,
.page-id-32 .duracion h2,
.page-id-32 .modulos-oml .modulos-center h2{
  font-family: var(--heading-font);
  font-weight: 800; /* Akira SuperBold */
  letter-spacing:.02em;
}

/* Subtítulos/énfasis con Helvetica Now Text en bold o black */
.page-id-32 .hero .hero-texto h3,
.page-id-32 .formacion-item h3,
.page-id-32 .practica-contenido h2 span,
.page-id-32 .oml-nav a,
.page-id-32 .btn, 
.page-id-32 .formulario-contacto button{
  font-family: var(--text-font);
  font-weight: 700; /* usa 900 si quieres más contundencia */
}

/* Opcional: versión muy pesada para bloques destacados */
.page-id-32 .rosa-strong,
.page-id-32 .fechas{
  font-family: var(--text-font);
  font-weight: 900;
}
/* === CONTACTO (CF7) — PÁGINA 32 === */
.page-id-32 .contacto-cta{
  --brand: #f8a3f5;
  color:#fff;
  background: transparent;
  text-align:center;
  padding: clamp(80px,10vw,120px) 20px;
}

/* Contenedores del formulario */
.page-id-32 .contacto-cta .two-cols,
.page-id-32 .contacto-cta .two-cols2{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;                   /* ← separación entre campos */
  max-width: 720px;
  margin: 0 auto;
}

/* Campos (email y teléfono) con el MISMO estilo */
.page-id-32 .contacto-cta .wpcf7 input[type="email"],
.page-id-32 .contacto-cta .wpcf7 input[type="tel"]{
  width: 100%;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: #fff;
  color: #0b0e1e;
  font-size: 1rem;
  outline: none;
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.page-id-32 .contacto-cta .wpcf7 input::placeholder{ color:#7c8399; }
.page-id-32 .contacto-cta .wpcf7 input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent);
}

/* Botón */
.page-id-32 .contacto-cta .wpcf7 input[type="submit"]{
  justify-self: center;        /* centra el botón bajo los campos */
  padding: 14px 28px;
  border-radius: 14px;
  border: 2px solid var(--brand);
  background: transparent;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s, transform .12s;
}
.page-id-32 .contacto-cta .wpcf7 input[type="submit"]:hover{
  background: var(--brand);
  color: #0b0e1e;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 28%, transparent);
  transform: translateY(-1px);
}
.page-id-32 .contacto-cta .wpcf7 input[type="submit"]:focus{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 45%, transparent);
}

/* Mensajes de CF7 y validación con color de marca */
.page-id-32 .contacto-cta .wpcf7-not-valid{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent) !important;
}
.page-id-32 .contacto-cta .wpcf7-not-valid-tip{ color: var(--brand); }
.page-id-32 .contacto-cta .wpcf7 form .wpcf7-response-output{
  border: 2px solid var(--brand) !important;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: #fff;
}

/* Móvil: el botón a ancho completo si quieres */
@media (max-width: 600px){
  .page-id-32 .contacto-cta .wpcf7 input[type="submit"]{ width: 100%; }
}