/*
 Theme Name: MotoScreen Child
 Template: hello-elementor
 Version: 1.0
*/

/* ---------------------------------------------------------
   0.  GOOGLE FONT + VARIABLES
   --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root{
  --primary:       #f7c62f;
  --primary-dark:  #e5b800;

  --bg-dark:       #121417;   /* Fondo principal */
  --bg-light:      #1b1e22;   /* Bloques y tarjetas */

  --text-dark:     #f3f4f6;   /* Texto principal */
  --text-light:    #9ca3af;   /* Texto secundario */

  --radius-card:   12px;
  --shadow-card:   0 4px 12px rgba(0,0,0,.20);
}

html{scroll-behavior:smooth;}

body{
  font-family:'Poppins',sans-serif;
  color:var(--text-dark);
  line-height:1.6;
  background:var(--bg-dark);
  margin:0;
}

/* ---------------------------------------------------------
   HERO SECTION STYLES
--------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 850px;
  width: 100%;
  padding-top: 100px;
  overflow: hidden;
  background-color: #000; /* fallback si el video no carga */
}

/* Fondo de video */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Contenido por encima del video */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding-left: 40px;
  padding-right: 20px;
  text-align: left;
  color: var(--text-dark);
}

/* Caja semitransparente con blur */
.hero-box {
  background-color: rgba(18, 20, 23, 0.75);
  border-radius: 20px;
  padding: 50px 40px;
  max-width: 640px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255,255,255,0.08);
  animation: fadeInUp 0.8s ease-out;
  position: relative;
  padding-left: 30px;
}

/* Línea de acento a la izquierda */
.hero-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 30px;
  bottom: 30px;
  width: 6px;
  background: linear-gradient(to bottom, #219E9E, #f7c62f); /* colores del logo */
  border-radius: 3px;
  opacity: 0.9;
  animation: growBar 1s ease-out;
}

/* Título principal */
.hero-title {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  margin-bottom: 15px;
  animation: slideInLeft 0.8s ease-out;
}

/* Subtítulos */
.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  color: #ccc;
  margin-bottom: 12px;
  line-height: 1.5;
  animation: fadeIn 1.2s ease-out;
}

/* Botón CTA */
.cta-button {
  display: inline-block;
  background: transparent;
  color: #25D366;
  border: 2px solid #25D366;
  padding: 0.8rem 1.6rem;
  border-radius: 50px;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background: #25D366;
  color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* ─── Hero: degradado definitivo para TODAS las pantallas ─── */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,.85) 0%,     /* 80 % opacidad a la izq.  */
    rgba(0,0,0,.70) 25%,    /*         ↓                */
    rgba(0,0,0,.45) 55%,    /*         ↓                */
    rgba(0,0,0,.10) 75%,    /* casi transparente        */
    rgba(0,0,0,0.0) 100%    /* 100 % transparente       */
  ) !important;
  z-index:1;
}

/* (opcional) asegúrate de que el contenedor .hero es relativo */
.hero{ position:relative; }

/* Animaciones */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes growBar {
  from { height: 0; }
  to   { height: 100%; }
}

/* Responsividad */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }
  .hero-subtitle {
    font-size: 1.2rem;
  }
  .cta-button {
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
  }
}
/* HERO – desktop sin cambios */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:850px;        /* ← se mantiene para ≥ 992 px */
  padding-top:100px;
  overflow:hidden;
  background:#000;
}

/* —— breakpoints —— */
@media (max-width:991px){
  .hero{
    height:70vh;       /* 70 % de la altura de la ventana */
    min-height:420px;  /* para móviles muy “chatitos”      */
  }
}
@media (max-width:600px){
  .hero{
    height:60vh;
    min-height:340px;
  }
}

/* El vídeo rellena todo el contenedor */
.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;           /* ya lo tienes */
  object-position:center center;
}
/* -------------------------------------------
   HERO (móvil) – reajuste de posición del .hero‑box
   ------------------------------------------- */
@media (max-width:600px){

  /* ①  Devolver el cuadro a flujo normal
        y alinear al centro del contenedor */
  .hero-box{
    position:relative;   /* ya NO absoluto */
    top:auto; left:auto; /* anula valores previos */
    transform:none;      /* sin translateX */


    /* ③  Fondo “glass” con degradado a transparente */
    background:linear-gradient(to right,
                 rgba(18,20,23,.85)  0%,
                 rgba(18,20,23,.60) 40%,
                 rgba(18,20,23,0.0)100%);
    backdrop-filter:blur(2px);
  }
}

/* ---------------------------------------------------------
   2. CLIENTES
   --------------------------------------------------------- */
.clientes{
  padding:20px 20px 10px;        /* bottom 10 px → pegado a About */
  background:var(--bg-dark);
  text-align:center;
}
.sec-title{
  font-size:2.2rem;
  margin-bottom:40px;
  position:relative;
}
.sec-title::after{
  content:'';
  width:80px; height:4px;
  background:var(--primary);
  display:block;
  margin:10px auto 0;
}

/* — Tarjetas dentro del Swiper — */
.cliente-card{
  background:var(--bg-light);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .45s ease, box-shadow .45s ease;
  height:210px;
  display:flex; flex-direction:column; justify-content:flex-end;
  backface-visibility:hidden;
}
.cliente-card:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
.cliente-card img{ width:100%; height:460px; object-fit:cover; }
.cliente-card h3{ font-size:1rem; margin:12px 0 6px; color:var(--primary); }
.cliente-card p { padding:0 16px 20px; font-size:.85rem; color:var(--text-light); }

.clientes-wrapper{ perspective:1200px; overflow:visible; }
.clientes-wrapper .swiper-slide{ width:260px; }
@media(max-width:600px){
  .clientes-wrapper .swiper-slide{ width:200px; }
  .swiper-button-prev,.swiper-button-next{ display:none; }
}

/* ---------------------------------------------------------
   3. ABOUT – ¿Qué es MotoScreen?
   --------------------------------------------------------- */
.about{
  background:#1A1C20;
  padding:60px 20px 50px;
  margin-top:0;                  /* sin huecos extras               */
}
.about-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  align-items:center;
}
.about-video,
.about-text{ flex:1 1 100%; }    /* mobile: stack */

@media (min-width:992px){
  .about-inner{ flex-wrap:nowrap; align-items:center; gap:60px; }
  .about-video{ flex:0 0 48%; max-width:48%; }
  .about-text { flex:0 0 50%; max-width:50%; padding-left:40px; display:flex;
                flex-direction:column; justify-content:center; }
}

/* --- Vídeo --- */
.about-video{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.45);
}
.about-video video{
  display:block; width:100%; height:auto;
  cursor:pointer; filter:brightness(.75) contrast(1.1);
}
.play-toggle{
  position:absolute; bottom:18px; right:18px;
  width:56px; height:56px; border-radius:50%;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:28px; border:2px solid #fff; transition:.3s;
}
.play-toggle:hover{ background:rgba(0,0,0,.8); }

/* --- Texto --- */
.about-text h2{
  font-size:2.6rem; font-weight:700; margin:0 0 24px; line-height:1.2;
}
.about-text p{ margin-bottom:18px; }
.about-text ul{ list-style:none; padding:0; margin:0 0 24px; }
.about-text li{ margin-bottom:6px; }

/* ---------------------------------------------------------
   3‑bis. GALERÍA Swiper 3‑D
   --------------------------------------------------------- */
.gallery-wrapper{
  width:100%; max-width:1100px;
  margin:50px auto 0;
  overflow:visible;
  perspective:1200px;
}
/*.gallery-wrapper .swiper-slide{ width:240px; height:150px; transition:transform .6s; }
.gallery-card{
  position:relative; width:100%; height:100%;
  border-radius:14px; overflow:hidden;
  box-shadow:0 8px 16px rgba(0,0,0,.4);
  transition:transform .45s ease, box-shadow .45s ease;
  backface-visibility:hidden;
}*/
.gallery-card:hover{
  transform:translateY(-6px); box-shadow:0 12px 24px rgba(0,0,0,.5);
}
.gallery-card img{ width:100%; height:100%; object-fit:cover; }
.gallery-caption{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(18,20,23,.85); color:#fff; padding:20px; text-align:center;
  opacity:0; transform:rotateY(90deg); transition:.4s;
}
.gallery-card:hover .gallery-caption{ opacity:1; transform:rotateY(0); }

@media(max-width:600px){
  .about-inner{ padding:0 10px; }
  .gallery-wrapper .swiper-slide{ width:200px; height:120px; }
}

/* ---------------------------------------------------------
   4. SERVICES (sin cambios funcionales)
   --------------------------------------------------------- */
.services{
  background:var(--bg-light);
  padding:20px 20px;
  text-align:center;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
  max-width:1100px;
  margin:40px auto 0;
}
.service-card{
  background:var(--bg-dark);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:40px 20px;
  transition:transform .25s;
}
.service-card:hover{ transform:translateY(-8px); }
.service-card .icon{ font-size:2rem; margin-bottom:14px; color:var(--primary); }
.service-card h3{ font-size:1.1rem; margin-bottom:10px; }
.service-card p{ font-size:.95rem; color:var(--text-light); }


/* ---------------------------------------------------------
   5. CTA FINAL
   --------------------------------------------------------- */
.cta-band{background:var(--bg-dark);color:#fff;padding:60px 20px;text-align:center;}
.cta-band h2{font-size:1.8rem;margin:0 0 24px;}
.cta-band .cta-button{
  background:var(--primary);color:#000;padding:.8rem 2rem;border-radius:40px;font-weight:700;text-decoration:none;
  transition:transform .25s,box-shadow .25s,background .3s;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.cta-band .cta-button:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* ---------------------------------------------------------
   6. HEADER PEGAJOSO
   --------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:9999;
  background:rgba(18,20,23,.90);   /* mismo tono que --bg-dark, 90 % opac. */
  backdrop-filter:blur(4px);       /* sutil glass‑effect */
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.header-inner{background:transparent;}  /* quita la franja blanca interna */

/* quita el hueco y compensa con padding */
.hero{margin-top:0;padding-top:60px;}   /* 60 px = alto del header */

.site-logo{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:1.3rem;color:var(--text-dark);
  text-decoration:none;
}
.logo-img{
  height:60px;width:auto;object-fit:contain;
}
.primary-nav a{
  margin:0 14px;font-weight:600;color:var(--text-dark);
  text-decoration:none;position:relative;
}
.primary-nav {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-grow: 1;
  text-align: center;
}

.primary-nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}
.cta-nav:hover{background:var(--primary-dark);}
.burger{display:none;background:none;border:0;cursor:pointer;}
.burger span{display:block;width:22px;height:2px;background:var(--text-dark);margin:5px 0;transition:.3s;}
@media(max-width:768px){
  .burger{display:block;}
  .primary-nav{
    position:fixed;top:60px;right:-200px;width:180px;background:#fff;
    display:flex;flex-direction:column;align-items:flex-start;padding:20px;
    box-shadow:0 4px 10px rgba(0,0,0,.15);transition:right .3s;
  }
  .primary-nav a{margin:10px 0;}
  .primary-nav.open{right:0;}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* --- Texto claro global (solo para el modo dark) --- */
body,
.sec-title,
.about-text h2,
.about-text p,
.about-text li,
.service-card h3,
.service-card p,
.primary-nav a   { color:var(--text-dark); }

.primary-nav a:hover,
.primary-nav a.active{ color:#fff; }   /* links iluminados */

.service-card .icon,
.cliente-card h3  { color:var(--primary); }

/* sombra leve para títulos sobre fotos */
.logo,
.slogan,
.sec-title,
.about-text h2,
.service-card h3 { text-shadow:0 2px 4px rgba(0,0,0,.6); }

/* --- Corrige header fijo cuando hay admin-bar activa (sólo para admin logueado) --- */
body.admin-bar .site-header {
  top: 32px;               /* desplaza header bajo la barra */
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;             /* en móvil la barra es más alta */
  }
}
/* ---------------------------------------------------------
   7. FIXES FINALES (Espacio blanco superior y contraste)
   --------------------------------------------------------- */


/* 2. Reaplica el fondo oscuro correcto al header externo */
.site-header {
  background-color: var(--bg-dark) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* 3. Corregir header interno con logo */
.header-inner {
  background-color: transparent !important;
  padding: 0 !important;
}

/* 4. Forzar eliminación del espacio blanco al inicio */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. Asegurar espacio de compensación del header fijo */
.hero {
  padding-top: 100px !important;  /* Ajustar según alto real del header */
  margin-top: 0 !important;
}

/* 6. Mejorar contraste de todos los textos sobre fondo oscuro */
.hero-content,
.cliente-card,
.about-text,
.service-card,
.cta-band,
.site-header,
.primary-nav a,
.primary-nav a:hover,
.primary-nav a.active {
  color: var(--text-dark);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* 7. Asegurar visibilidad en el menú móvil también */
.primary-nav {
  background-color: var(--bg-dark) !important;
}
.primary-nav a {
  color: var(--text-dark) !important;
}
.primary-nav a:hover {
  color: #fff !important;
}
/* ---------------------------------------------------------
   8. EXTENSIÓN COMPLETA DEL HEADER SUPERIOR
   --------------------------------------------------------- */

/* Fuerza el fondo del primer contenedor del body */
body > div:first-child {
  background-color: var(--bg-dark) !important;
}

/* Elementor header wrapper si existe */
.elementor-location-header {
  background-color: var(--bg-dark) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Extiende el fondo completamente en caso de conflictos */
body, html {
  background-color: var(--bg-dark) !important;
}

/* Borra espacio del contenedor superior si quedara alguno */
body > div:first-child:before,
body > div:first-child:after {
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   10. EXTENSIÓN TOTAL DEL ENCABEZADO (SOLUCIÓN FINAL)
   --------------------------------------------------------- */

.site-header,
.header-inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important; /* Puedes ajustar o quitar si no quieres margen interno */
  background-color: var(--bg-dark) !important;
  box-shadow: none !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 9999;
}
/* ---------------------------------------------------------
   11. HERO ESTILO PORTAFOLIO MODERNO
   --------------------------------------------------------- */

/* Logo más chico si es necesario */
.logo {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

/* Botón un poco más sobrio */
.cta-button {
  margin-top: 1.5rem;
  padding: 0.7rem 1.8rem;
  font-size: 0.95rem;
  border: 2px solid var(--primary);
  background: transparent;
  color: var(--primary);
}

.cta-button:hover {
  background: var(--primary);
  color: #000;
}


/* ---------- Sección ABOUT refinada ---------- */
.about-video {position:relative;flex:1 1 840px;overflow:hidden;border-radius:16px;}
.about-video video {display:block;width:100%;height:auto;cursor:pointer;filter:brightness(.7) contrast(1.1);}
.play-toggle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;
  border:2px solid #fff;backdrop-filter:blur(4px);transition:.3s;
}
.play-toggle{
  top: auto;               /* quitamos centrar vertical */
  left: auto;              /* quitamos centrar horizontal */
  bottom: 20px;            /* pegado 20 px al borde inferior */
  right: 20px;             /* pegado 20 px al borde derecho */
  transform: none;         /* sin translate */
  width: 56px; height: 56px;           /* un poco menor */
  font-size: 28px;                      /* icono más proporcionado */
  border-radius: 50%;                  /* conserva forma circular */

}


/* ═══════════════ DIFERENCIAR SECCIONES ════════════════ */

/* Sección ABOUT con tono ligeramente más claro */
.about{
  background:#1A1C20;          /* ≈ var(--bg-dark) pero + 1 step */
  border-top:2px solid #282B30; /* línea divisoria con la zona anterior */
}

/* ═══════════   GALERÍA 3‑D  – tamaño más contenido  ═══════════ */
.gallery-card{
  width:240px;          /* antes 280 px  */
  height:150px;         /* antes 180 px  */
}

/* ════════════════   BREAKPOINT opcional   ═══════════════ */
@media(max-width:600px){
  .about-inner{padding:0 10px;}
  .gallery-card{width:200px;height:120px;}
}

/* — Centramos la línea de acento del hero‑box en pantallas pequeñas — */
@media (max-width: 600px) {
  .hero-box::before {
    top: 20px;
    bottom: 20px;
  }
}
/* Ancho fijo de cada slide para coverflow */
.clientes-wrapper .swiper-slide{
  width: 260px;      /* ajusta a gusto, mínimo 180 px */
}
@media(max-width:600px){
  .clientes-wrapper .swiper-slide{ width:200px; }
}
	
/* ————————— P U L I D O   F I N A L  ————————— */

/* 1 ▸ alineación perfecta video / texto en desktop */
@media (min-width:992px){
  .about-inner{
    flex-wrap:nowrap;           /* nunca se parte en dos filas        */
    align-items:center;         /* centra verticalmente ambas mitades */
    gap:60px;                   /* separación uniforme                */
  }
  .about-video{ flex:0 0 48% !important; max-width:48% !important; }
  .about-text { flex:0 0 50% !important; max-width:50% !important; padding-left:40px !important; }
}

/* 2 ▸ quita cualquier relleno/margen sobrante entre CLIENTES y ABOUT */
.clientes{ padding-bottom:10px !important; margin-bottom:0 !important; }
.clientes::after{ display:none !important; }   /* elimina la banda degradada completa */

/* 3 ▸ asegúrate que ABOUT no tenga margen arriba (por si Elementor lo añade) */
.about{ margin-top:0 !important; }

/* ————  MotoScreen en acción  ———— */
.motoscreen-gallery{background:#1A1C20;padding:60px 20px;}
.gallery-inner{
  max-width:1200px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:60px !important;
  align-items:center !important;
}

/*.gallery-text{flex:1 1 340px;display:flex;flex-direction:column;justify-content:center;}*/
.gallery-text p{margin:8px 0 0;max-width:460px;}

.gallery-wrapper{flex:1 1 0;min-width:0;overflow:visible;perspective:1200px;}
/* cada “tira” vertical */
/*.gallery-slice{
  width:140px; height:380px;          /* alto vertical estilo mock‑up    */
 /* overflow:hidden; border-radius:12px;
  box-shadow:0 8px 16px rgba(0,0,0,.35);
  transition:transform .35s ease, box-shadow .35s ease;
  backface-visibility:hidden;*/
}
.gallery-slice img{width:100%;height:100%;object-fit:cover;}

/* Efecto ampliar */
.gallery-slice:hover,
.gallery-slice:active{
  transform:translateY(-6px) scale(1.08);
  box-shadow:0 14px 28px rgba(0,0,0,.5);
  z-index:5;
}

/* Orden: texto izquierda, fotos derecha (reverse en móvil) */
/*@media(max-width:991px){
  .gallery-inner{flex-direction:column;}
  .gallery-text{text-align:center;align-items:center;}
  .gallery-wrapper{width:100%;}
  .gallery-slice{width:48vw; height:260px;}       /* tiras más anchas en móvil */
}*/

/* ——— MotoScreen en acción ——— */

/* 1 ▸ título centrado + textos aclarados */
.motoscreen-gallery .sec-title      { text-align:center; }
.motoscreen-gallery .gallery-text p { color:var(--text-light);
                                      text-align:center;
                                      max-width:420px; margin:8px auto; }

/* 2 ▸ aire inferior antes de “Nuestros servicios” */
.motoscreen-gallery{ margin-bottom:60px; }

/* 3 ▸ full‑width real: quita límites y padding laterales */
.motoscreen-gallery        { margin-left:0; margin-right:0; }
.motoscreen-gallery .gallery-inner{ max-width:none; padding:0; }
.gallery-wrapper           { width:100%; max-width:none; padding:0; }

/* 4 ▸ tiras verticales más grandes y sin bordes redondeados */
.gallery-wrapper .gallery-slice{
  width:450px; height:560px;       /* antes 180 × 280 */
  overflow:hidden; border-radius:0;
}
.gallery-slice img{
  width:100%; height:100%; object-fit:cover;
  transform-origin:center;
  transition:transform .3s ease;
}

/* 5 ▸ profundidad 3‑D y foto central destacada */
/*.swiper-slide{
  filter:brightness(.65) grayscale(.15);
  transition:transform .45s cubic-bezier(.23,1,.32,1), filter .3s;
}
.swiper-slide-active{
  transform:scale(1.12) translateZ(80px);
  filter:brightness(1) grayscale(0);
}
.swiper-slide-active img{ transform:scale(1.08); }

/* 6 ▸ hover / tap: zoom extra */
@media (hover:hover){
  .gallery-slice:hover img{ transform:scale(1.12); }
}

/* 7 ▸ ajuste móvil: tiras algo menores */
/*@media (max-width:600px){
  .gallery-wrapper .gallery-slice{ width:160px; height:260px; }
}*/

/* ─── Ajuste móvil: sube el cuadro del hero ─── */
@media (max-width:600px){
  .hero-box{
    margin:0 auto !important;                /* limpia márgenes extra */
    transform:translateY(-4vh) !important;  /* súbelo ~14 % de la altura de la pantalla */
  }
}

/* ─── Hero: degradado más suave en ≤ 600 px ─── */
@media (max-width:600px){
  .hero::after{
    /* 4‑5 stops = transición gradual */
    background: linear-gradient(
      to right,
      rgba(0,0,0,.90) 0%,
      rgba(0,0,0,.75) 35%,
      rgba(0,0,0,.55) 60%,
      rgba(0,0,0,.25) 85%,
      rgba(0,0,0,0)   100%
    ) !important;
  }
}
/* 1) Cierra correctamente el segundo bloque de .play-toggle */
.play-toggle{
  top: auto;
  left: auto;
  bottom: 20px;
  right: 20px;
  transform: none;
  width: 56px;
  height: 56px;
  font-size: 28px;
  border-radius: 50%;
} /* ← ESTA llave faltaba */

/* 2) Elimina la llave suelta “}” que tienes justo después de .gallery-inner{…} */
/* (No hace falta añadir nada aquí; solo BORRAR esa línea “}” extra en tu archivo) */

/* 3) Header: evita el reset agresivo */
.site-header { 
  background-color: var(--bg-dark) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* 4) Servicios: fuerza 3 columnas en desktop y baja por breakpoints */
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 40px auto 0;
}
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* (opcional) un poco más de aire antes del CTA si lo ves muy pegado */
.services{ padding-bottom: 40px; }
/* ——— NUESTROS SERVICIOS: SIEMPRE 3 EN UNA FILA EN ESCRITORIO ——— */
/* Aplica a la sección que tenga la clase `services` (ponla en Elementor > Avanzado > Clase CSS) */

.services .elementor-container,
.services .elementor-row,
.services-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  max-width: 1100px;
  margin: 40px auto 0;
}

/* Anula los anchos que Elementor pone a cada columna y deja que la grilla mande */
.services .elementor-column{ 
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
}

/* Que cada tarjeta estire igual */
.services .elementor-widget-wrap{ height: 100% !important; }
.services .service-card{ height: 100% !important; }

/* Responsivo: 2 columnas en tablet, 1 en móvil */
@media (max-width: 1024px){
  .services .elementor-container,
  .services .elementor-row,
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px){
  .services .elementor-container,
  .services .elementor-row,
  .services-grid{ grid-template-columns: 1fr !important; }
}

/* ===== SERVICES: 3 tarjetas SIEMPRE alineadas en desktop ===== */
#servicios .services-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:32px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  max-width:1100px !important;
  margin:40px auto 0 !important;
  box-sizing:border-box !important;
}
#servicios .service-card{
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  height:100% !important;
  text-align:left;
  float:none !important; width:auto !important; max-width:none !important; margin:0 !important;
}
@media (max-width:640px){
  #servicios .services-grid{ grid-template-columns:1fr !important; justify-items:center !important; }
  #servicios .service-card{ width:100% !important; max-width:560px !important; }
}

/* ===== ESPACIADO: separa About de la galería ===== */
.about{ padding-bottom:70px !important; }
.motoscreen-gallery{
  margin-top:40px !important;   /* respiro extra por si acaso */
  position:relative;
  z-index:1;
}

/* ===== GALERÍA: tamaños sanos y visibles en móvil ===== */
.motoscreen-gallery .gallery-wrapper.swiper{ width:100% !important; overflow:hidden !important; }
/*.motoscreen-gallery .swiper-wrapper{ align-items:stretch !important; } */

/* sobreescribe los tamaños gigantes previos */
/*.motoscreen-gallery .swiper-slide,
.motoscreen-gallery .gallery-slice{
  width:320px !important;
  height:200px !important;
}*/
/*@media (max-width:991px){
  .motoscreen-gallery .swiper-slide,
  .motoscreen-gallery .gallery-slice{
    width:78vw !important;      /* ocupa ancho cómodo en móvil */
  /*  height:50vw !important;     /* relación agradable 16:10 aprox */
 /* }
} */

/* (opcional) suaviza la sombra y eleva z-index de las fotos activas */
.motoscreen-gallery .swiper-slide{ filter:brightness(.85) grayscale(.08); }
.motoscreen-gallery .swiper-slide-active{
  transform:scale(1.06) translateZ(0);
  filter:brightness(1) grayscale(0);
}

/* ——— Espacio entre ABOUT y la galería ——— */
.about{ padding-bottom:72px !important; }
.motoscreen-gallery{ margin-top:40px !important; }

/* ——— Layout de la fila texto + galería ——— */
.motoscreen-gallery .gallery-inner{
  align-items:stretch !important;
}
/*.motoscreen-gallery .gallery-text{
  flex:1 0 42% !important;
  max-width:500px !important;
}
.motoscreen-gallery .gallery-wrapper{
  flex:1 0 52% !important;
  min-width:0 !important;
}*/

/* ——— Tamaño de slides: grande y CUADRADO en desktop ——— */
/*@media (min-width: 992px){
  .motoscreen-gallery .gallery-wrapper.swiper{ width:100% !important; }
  .motoscreen-gallery .swiper-slide,
  .motoscreen-gallery .gallery-slice{
    width: 580px !important;          /* ajústalo a gusto (380–520) */
 /*   aspect-ratio: 1 / 1 !important;   /* 1:1 real */
 /*   height: auto !important;
  }
}*/

/* ——— Móvil/tablet: que SIEMPRE se vea ——— */
.motoscreen-gallery .gallery-wrapper.swiper{
  display:block !important;
  overflow:hidden !important;
  min-height: 320px !important;       /* evita colapso */
}
.motoscreen-gallery .swiper-wrapper{ align-items:stretch !important; }

/*@media (max-width: 991px){
  .motoscreen-gallery .swiper-slide,
  .motoscreen-gallery .gallery-slice{
    width: 88vw !important;           /* ancho cómodo */
  /*  aspect-ratio: 1 / 1 !important;   /* cuadrado en móvil también */
  /*  height: auto !important;
  }
 /* .motoscreen-gallery .gallery-wrapper.swiper{
    min-height: 88vw !important;      /* casa con el aspect ratio */
 /* }*/
}

.motoscreen-gallery .gallery-slice img{
  width:100%; height:100%; object-fit:cover;
}

/* Contenedor de la rejilla (una fila real en desktop) */
#servicios .services-grid{
  display:flex !important;
  flex-wrap:nowrap !important;             /* ← una sola fila */
  gap:32px !important;
  justify-content:center !important;
  align-items:stretch !important;
  max-width:1100px !important;
  margin:40px auto 0 !important;
  box-sizing:border-box !important;
}

/* Tarjetas con la misma altura */
#servicios .service-card{
  flex:1 1 0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  height:100% !important;
  margin:0 !important; width:auto !important; max-width:none !important; float:none !important;
  text-align:left;
}

/* Responsivo sano: 2 columnas tablet, 1 columna móvil */
@media (max-width:1024px){
  #servicios .services-grid{ flex-wrap:wrap !important; }
  #servicios .service-card{ flex:1 1 calc(50% - 32px) !important; }
}
@media (max-width:640px){
  #servicios .service-card{ flex:1 1 100% !important; max-width:560px !important; }
  #servicios .services-grid{ justify-content:center !important; }
}

@media (max-width: 768px){
  .primary-nav{
    position: fixed;
    top: 60px;            /* alto del header */
    right: 0;
    width: 75vw;
    max-width: 320px;
    height: calc(100vh - 60px);
    background: var(--bg-dark);
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    /* Estado CERRADO por defecto */
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .30s ease, opacity .20s ease, visibility 0s .30s;
    z-index: 9998;
  }
  .primary-nav.open{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

/* ===== MOVIL — elimina franja/scroll horizontal derecho ===== */
@media (max-width: 768px){
  /* 1) Cerrar cualquier desborde del viewport */
  html, body{
    overflow-x: hidden !important;
    width: 100%;
  }

  /* 2) Off-canvas: que su ancho incluya el padding y no empuje el viewport */
  .primary-nav{
    box-sizing: border-box;      /* <-- clave para iOS */
    position: fixed;
    top: 60px;                   /* alto del header */
    right: 0; left: auto;
    width: 75vw;
    max-width: 320px;
    height: calc(100vh - 60px);
    padding: 20px;               /* si lo quitas aquí, quítalo también en el HTML/CSS anterior */
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* cerrado por defecto, sin afectar layout */
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s ease, opacity .2s ease, visibility 0s .3s;
    z-index: 9998;
    contain: layout paint;       /* aísla la capa; Safari no expande el viewport */
  }
  .primary-nav.open{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  /* 3) Cualquier carrusel que aún tuviera overflow visible */
  .clientes-wrapper,
  .motoscreen-gallery .gallery-wrapper.swiper{
    overflow: hidden !important;
  }

  /* 4) “Red cortafuegos”: nada debe medir más que el viewport */
  .site, .site-main, .elementor-section{
    max-width: 100vw !important;
  }
}

/* Extra seguro (global y sano) */
*, *::before, *::after { box-sizing: border-box; }

/* ===== GALERÍA – Parche seguro (no rompe Swiper) ===== */

/* 0) Evita barras laterales por desbordes en la sección */
.motoscreen-gallery { overflow: hidden; }

/* 1) Reset de reglas previas que metían mano a los slides */
.motoscreen-gallery .swiper-slide{
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
}

/* 2) Truco de “cuadrado” sin JS:
      – El slide conserva el width que Swiper calcula.
      – Creamos altura con ::before (padding-top:100%).
      – La imagen rellena con object-fit: cover. */
.motoscreen-gallery .swiper-slide{
  position: relative;
  display: grid;                 /* para superponer ::before e img */
  place-items: stretch;
  width: auto !important;        /* que Swiper decida el ancho */
}
.motoscreen-gallery .swiper-slide::before{
  content:"";
  grid-area: 1/1;
  padding-top: 100%;             /* 1:1 exacto */
}
.motoscreen-gallery .swiper-slide > img{
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* 3) Separación entre slides (sin tocar transforms de Swiper) */
.motoscreen-gallery .swiper-wrapper{
  gap: clamp(20px, 3vw, 40px);   /* separación “real” entre tarjetas */
}

/* 4) Tamaño visible en desktop: carrusel más protagonista */
@media (min-width: 992px){
  .motoscreen-gallery .gallery-text{
    flex: 0 0 40% !important; max-width: 40% !important;
  }
  .motoscreen-gallery .gallery-wrapper{
    flex: 0 0 60% !important; max-width: 60% !important;
  }

  /* “Tamaño visual” de cada tarjeta: pide más ancho a Swiper */
  .motoscreen-gallery .swiper-slide{
    /* ancho mínimo óptimo; Swiper lo respeta con slidesPerView:'auto' */
    min-width: clamp(360px, 42vw, 560px);
  }

  .motoscreen-gallery .gallery-text h2{ font-size: 3rem; }
  .motoscreen-gallery .gallery-text p { font-size: 1.08rem; line-height: 1.7; }
}

/* 5) Ajuste móvil: que la tarjeta use buen ancho y siga 1:1 */
@media (max-width: 991px){
  .motoscreen-gallery .swiper-slide{
    min-width: 86vw;            /* ocupa casi todo el viewport */
  }
  .motoscreen-gallery .gallery-text{ text-align:center; }
}

/* 6) Pulido visual de “profundidad” sin tocar el cálculo del carrusel */
.motoscreen-gallery .swiper-slide{ filter: brightness(.9) saturate(.98); }
.motoscreen-gallery .swiper-slide-active{ filter: brightness(1) saturate(1); z-index: 2; }

/* 7) Un poco más de aire entre ABOUT y galería */
.about{ padding-bottom: 90px !important; }

/* —— GALERÍA: desbloquea tamaño y aplica 1:1 confiable —— */
.motoscreen-gallery .swiper-slide,
.motoscreen-gallery .gallery-slice{
  width:auto !important;
  height:auto !important;                /* dejamos el alto al ::before */
}

/* Estructura del slide cuadrado (sirve aunque haya wrappers) */
.motoscreen-gallery .swiper-slide{
  position:relative;
  display:grid;
  place-items:stretch;
}
.motoscreen-gallery .swiper-slide::before{
  content:"";
  grid-area:1/1;
  padding-top:100%;                      /* 1:1 */
}
/* si hay wrappers extra (p. ej. .elementor-image), que todos rellenen */
.motoscreen-gallery .swiper-slide > *{ grid-area:1/1; }
.motoscreen-gallery .swiper-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:10px; box-shadow:0 10px 22px rgba(0,0,0,.35);
}

/* tamaño “visible” de cada tarjeta (Swiper debe estar en 'auto') */
@media (min-width:992px){
  .motoscreen-gallery .swiper-slide{ min-width: clamp(360px, 42vw, 560px); }
}
@media (max-width:991px){
  .motoscreen-gallery .swiper-slide{ min-width: 86vw; }
}

/* separación real entre tarjetas, sin tocar transforms de Swiper */
.motoscreen-gallery .swiper-wrapper{ gap: clamp(20px, 3vw, 40px); }

/* toque de brillo sin interferir */
.motoscreen-gallery .swiper-slide{ filter:brightness(.95) saturate(.98); }
.motoscreen-gallery .swiper-slide-active{ filter:brightness(1) saturate(1); z-index:2; }
/* === GALERÍA Swiper – tamaño sano sin romper nada === */

/* El slide manda su ANCHO; el ALTO se deduce por aspect-ratio */
.motoscreen-gallery .swiper-slide{
  width: auto !important;          /* Swiper puede calcular; nosotros solo MÍNIMO */
  height: auto !important;         /* nada fijo */
  aspect-ratio: 1 / 1 !important; /* o 1 / 1 si quieres cuadrado */
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  min-width: clamp(340px, 42vw, 560px);  /* desktop: visibles y protagonistas */
  filter: brightness(.95) saturate(.98);
}

/* Móvil: que ocupe casi todo el viewport */
@media (max-width: 991px){
  .motoscreen-gallery .swiper-slide{ min-width: 86vw; }
}

/* La imagen (o wrapper de Elementor) rellena el slide */
.motoscreen-gallery .swiper-slide img,
.motoscreen-gallery .swiper-slide picture,
.motoscreen-gallery .swiper-slide .elementor-image,
.motoscreen-gallery .swiper-slide > a,
.motoscreen-gallery .swiper-slide > div{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* Separación real entre tarjetas, sin tocar transforms del carrusel */
.motoscreen-gallery .swiper-wrapper{
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch !important;
}

/* Slide activo un pelín más “vivo” */
.motoscreen-gallery .swiper-slide.swiper-slide-active{
  filter: brightness(1) saturate(1);
  z-index: 2;
}

/* Evita cualquier scroll lateral de la sección */
.motoscreen-gallery{ overflow: hidden; }

/* Centrar el título “MotoScreen en acción” dentro de la sección */
.motoscreen-gallery > .sec-title,
.motoscreen-gallery .gallery-inner > .sec-title{
  flex: 0 0 100%;       /* si está dentro de un contenedor flex, ocupa toda la fila */
  text-align: center;   /* centra el texto */
  margin: 0 auto 16px !important; /* y su espacio inferior */
}

/* (opcional) centra también el párrafo introductorio bajo el título */
.motoscreen-gallery .gallery-text{
  text-align: center;
  max-width: 720px;
  margin: 8px auto 24px;
}
/* ——— 1) Eliminar el espacio vertical antes de la galería ——— */
.motoscreen-gallery .gallery-inner{
  display: flex !important;
  flex-wrap: nowrap !important;        /* una sola fila en desktop */
  align-items: center !important;
  gap: 0 clamp(32px,6vw,72px) !important; /* SIN separación vertical; sólo horizontal */
  margin-top: 0 !important;
}
.motoscreen-gallery .gallery-text{ 
  flex: 0 0 40% !important; 
  max-width: 560px !important; 
  margin: 0 !important;
}
.motoscreen-gallery .gallery-text p{
  margin: 8px auto 0 !important;
}
.motoscreen-gallery .gallery-wrapper{
  flex: 1 1 auto !important; 
  min-width: 0 !important;
}

/* En tablet/móvil vuelve a columna con un gap pequeño */
@media (max-width: 991px){
  .motoscreen-gallery .gallery-inner{
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
}

/* ——— 2) Profundidad y “desenfoque” para las fotos de atrás ——— */
/* No requiere cambiar tu JS de Swiper */
.motoscreen-gallery .swiper{
  perspective: 1200px;            /* habilita 3D */
}
.motoscreen-gallery .swiper-slide{
  transform-style: preserve-3d;
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
}

/* Activa: al frente, nítida y apenas más grande */
.motoscreen-gallery .swiper-slide-active{
  transform: translateZ(80px) scale(1.02);
  filter: none;
  opacity: 1;
}

/* Vecinas: un poco atrás, ladeadas y con blur suave */
.motoscreen-gallery .swiper-slide-prev{
  transform: translateX(-6%) translateZ(-60px) rotateY(-8deg) scale(.92);
  filter: blur(1.5px) brightness(.9);
  opacity: .9;
}
.motoscreen-gallery .swiper-slide-next{
  transform: translateX(6%) translateZ(-60px) rotateY(8deg) scale(.92);
  filter: blur(1.5px) brightness(.9);
  opacity: .9;
}

/* El resto: más lejos y más difuminadas */
.motoscreen-gallery .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next){
  transform: translateZ(-120px) scale(.86);
  filter: blur(3px) brightness(.75);
  opacity: .6;
}