/* ============================================================
  styles.css — PRONK Printed Designs (Landing)
  STYLES DE MENU INICIO
============================================================ */

/* =========================
  0) VARIABLES / BASE
========================= */
:root{
  --bg: #1a2a6c;

  --grad-a: #0bcff1;
  --grad-b: #faff12;

  --text: #ffffff;
  --text-dark: #000000;

  --shadow-soft: 0 10px 25px rgba(0,0,0,.25);
  --shadow-text: 0 2px 10px rgba(0,0,0,.65);

  --radius-pill: 999px;

  --header-h: 92px;
  --header-h-compact: 72px;

  --container: 1200px;

  --slogan-yellow: #faff12;
  --slogan-blue: #0bcff1;

  --ease: cubic-bezier(.2,.8,.2,1);

  /* ✅ NAV FLUIDA (para que no haya “brinco”) */
  --nav-pad-y: clamp(10px, 0.9vw, 12px);
  --nav-pad-x: clamp(12px, 1.2vw, 18px);

  --nav-gap: clamp(8px, 0.9vw, 10px);
  --nav-row-gap: clamp(8px, 0.9vw, 10px);

  --nav-link-pad-y: clamp(8px, 0.75vw, 10px);
  --nav-link-pad-x: clamp(10px, 0.9vw, 14px);
  --nav-font: clamp(12px, 0.95vw, 14px);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

/* =========================
  1) FONDO: MANCHAS / SPLASHES
========================= */
.bg-splashes{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.splash{
  position: absolute;
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.25));
}

.splash-top-right{
  top: -30px;
  right: -40px;
  width: min(520px, 60vw);
}

.splash-bottom-left{
  bottom: -40px;
  left: -40px;
  width: min(520px, 60vw);
}

/* Mancha curva (reveal) */
.splash-curve{
  top: 108%;
  right: -6%;
  left: auto;
  width: min(520px, 58vw);
  opacity: 0;
  transform: translateY(6%) scale(.92);
}

.splash--reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: watercolorPop .85s var(--ease) both;
}

@keyframes watercolorPop{
  0%   { transform: translateY(8%) scale(.85); filter: blur(1.5px); }
  55%  { transform: translateY(-2%) scale(1.06); filter: blur(0); }
  80%  { transform: translateY(1%) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}

/* =========================
  2) HEADER (2 ESTADOS)
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;

  /* ✅ altura/padding FLUIDOS: se siente “gradual” */
  height: auto;
  padding: clamp(10px, 1.1vw, 14px) 0 clamp(10px, 1.0vw, 12px);

  display: flex;
  align-items: center;

  transition:
    background .25s var(--ease),
    backdrop-filter .25s var(--ease);
}

/* glass al scrollear */
body.scrolled .site-header{
  background: rgba(26,42,108,.55);
  backdrop-filter: blur(10px);
}

/* Solo cuando se reduce la pantalla (tu ajuste original, pero suave) */
@media (max-width: 1100px){
  .site-header{
    padding-top: clamp(14px, 2.2vw, 1.2%);
    padding-bottom: 10px;
  }
}

.header-inner{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

/* =========================
  3) LOGOS
========================= */
.brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo{ display: block; height: auto; }

.brand__logo--small{
  width: 74px;
  max-width: 74px;
  transition: transform .25s var(--ease), width .25s var(--ease);
}


.brand__logo--hero{
  width: min(520px, 80vw);
  max-width: 520px;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
}

/* =========================
  4) SLOGAN (TOP Y HERO)
========================= */
.slogan,
.hero__slogan{
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-shadow: var(--shadow-text);
  line-height: 1.1;
  letter-spacing: .2px;
}

.top-slogan{
  justify-self: center;
  text-align: center;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

body.scrolled .top-slogan{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.top-slogan .slogan{
  margin: 0;
  font-size: clamp(13px, 1.4vw, 18px);
}

.word-yellow{ color: var(--slogan-yellow); }
.word-blue{ color: var(--slogan-blue); }

/* =========================
  5) NAV — GLASS NEON + PINTURA (FLUIDA + 2 FILAS SUAVE)
========================= */
.main-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  min-width: 0;
}

/* Cápsula */
.main-nav__list{
  list-style: none;
  margin: 0;
  padding: var(--nav-pad-y) var(--nav-pad-x);

  display: flex;
  align-items: center;
  justify-content: center;

  /* ✅ Por defecto: permite WRAP (para que nunca se “corte”).
     En pantallas realmente amplias lo forzamos a 1 fila abajo. */
  flex-wrap: wrap;

  column-gap: var(--nav-gap);
  row-gap: var(--nav-row-gap);

  /* ✅ ancho FLUIDO: se adapta sin brincar */
  width: min(100%, 1100px);

  border-radius: 999px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);

  box-shadow:
    0 18px 30px rgba(0,0,0,.22),
    0 0 28px rgba(11, 207, 241, .25),
    0 0 18px rgba(250, 255, 18, .16);

  overflow: visible;
  min-width: 0;
}

/* ✅ Solo en pantallas MUY amplias (donde sí cabe): 1 fila */
@media (min-width: 1500px){
  .main-nav__list{ flex-wrap: nowrap; }
}

/* ✅ Quitamos el “corrimiento” en scrolled para evitar recortes con zoom */
body.scrolled .main-nav__list{
  transform: none;
  transition: padding .25s var(--ease);
}

.main-nav__item{ margin: 0; }

/* Botones */
.main-nav__link{
  position: relative;
  display: inline-block;

  padding: var(--nav-link-pad-y) var(--nav-link-pad-x);
  border-radius: 999px;
  text-decoration: none;

  color: #000;
  font-weight: 800;
  font-size: var(--nav-font);
  letter-spacing: .2px;
  white-space: nowrap;

  background: linear-gradient(
    90deg,
    rgba(11, 207, 241, .72) 0%,
    rgba(250, 255, 18, .72) 100%
  );

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 16px rgba(0,0,0,.12);

  transition:
    transform .18s var(--ease),
    box-shadow .18s var(--ease),
    filter .18s var(--ease),
    color .18s var(--ease),
    text-shadow .18s var(--ease),
    background .18s var(--ease);
}

.main-nav__link:hover{
  transform: translateY(-4px);
  filter: brightness(1.08);
  box-shadow:
    0 16px 24px rgba(0,0,0,.18),
    0 0 18px rgba(11, 207, 241, .22);
}

.main-nav__link.active{
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.70);

  background: rgba(26,42,108,.38);
  border: 1px solid rgba(255,255,255,.28);

  box-shadow:
    0 18px 30px rgba(0,0,0,.22),
    0 0 26px rgba(11, 207, 241, .40),
    0 0 18px rgba(250, 255, 18, .22);
}

.main-nav__link.active::after{
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -20%;
  height: 6px;
  border-radius: 999px;

  background: linear-gradient(90deg, #0bcff1 0%, #faff12 100%);
  filter: blur(.1rem);

  box-shadow:
    0 0 14px rgba(11, 207, 241, .35),
    0 0 12px rgba(250, 255, 18, .25);

  transform-origin: left center;
  animation: paintSwipe .22s var(--ease) both;
}

@keyframes paintSwipe{
  0%   { transform: scaleX(.2); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* ✅ Ajustes aún más graduales (sin “brinco”):
   vamos apretando la cápsula y los botones poco a poco */
@media (max-width: 1700px){
  :root{
    --nav-pad-x: clamp(10px, 1.0vw, 14px);
    --nav-gap: clamp(7px, 0.8vw, 9px);
    --nav-link-pad-x: clamp(9px, 0.8vw, 12px);
  }
}
@media (max-width: 1150px){
  :root{
    --nav-font: clamp(12px, 0.9vw, 13px);
    --nav-link-pad-y: clamp(8px, 0.7vw, 9px);
  }
}

/* =========================
  6) HAMBURGUESA + MENÚ MÓVIL
========================= */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  cursor: pointer;

  background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);
  box-shadow: var(--shadow-soft);

  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
}

.nav-toggle span{
  display: block;
  width: 22px;
  height: 3px;
  background: #000;
  border-radius: 999px;
}

.mobile-nav{
  display: none;
  width: min(var(--container), calc(100% - 32px));
  margin: 10px auto 0 auto;
  padding: 12px;
  border-radius: 18px;

  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
}

.mobile-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.mobile-nav__link{
  display: block;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 14px;

  background: linear-gradient(
    90deg,
    rgba(11, 207, 241, .72) 0%,
    rgba(250, 255, 18, .72) 100%
  );

  color: #000;
  font-weight: 800;
  letter-spacing: .2px;

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 16px rgba(0,0,0,.12);

  transition: transform .18s var(--ease), color .18s var(--ease), text-shadow .18s var(--ease), filter .18s var(--ease);
}

.mobile-nav__link:hover{
  transform: translateY(-3px);
  filter: brightness(1.06);
}

.mobile-nav__link.active{
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
  background: rgba(26,42,108,.38);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    0 16px 26px rgba(0,0,0,.22),
    0 0 22px rgba(11, 207, 241, .32);
}

/* =========================
  7) HERO (INICIO)
========================= */
.hero{
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-content: start;
  padding: 0 0 32px;
}

.hero__content{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 18px;
  padding-top: 22px;
}

.hero__slogan{
  margin: 0;
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 800;
  max-width: 980px;
}

/* =========================
  8) VIDEO HOME
========================= */
.home-video{
  width: min(var(--container), calc(100% - 32px));
  margin: 24px auto 0;
  z-index: 1;
}

.home-video__frame{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);

  background: rgba(0,0,0,.2);
  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,.12);
}

.home-video__video{
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
  9) BLOQUE “2ª SECCIÓN”
========================= */
.home-next-block{
  position: relative;
  z-index: 1;
  width: min(var(--container), calc(100% - 32px));
  margin: 60px auto 0;
  padding-bottom: 60px;
}

.home-next-block__inner{
  padding: 26px 24px;
  border-radius: 22px;

  background: rgba(0,0,0,.14);
  backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-soft);
}

.home-next-block__title{
  margin: 0 0 12px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
}

.home-next-block__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  opacity: .95;
}

/* =========================
  10) FOOTER
========================= */
.site-footer{
  position: relative;
  z-index: 1;
  padding: 24px 0 34px;
}

.site-footer p{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  text-align: center;
  opacity: .9;
}

/* =========================
  11) RESPONSIVE
========================= */
@media (max-width: 1024px){
  .splash-curve{
    right: -10%;
    width: min(480px, 64vw);
    top: 112%;
  }
}

/* ✅ Punto “ya muy chico” → hamburguesa (móvil) */
@media (max-width: 900px){
  .header-inner{
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  .main-nav{ justify-content: flex-end; }

  .main-nav__list{ display: none; }
  .nav-toggle{ display: inline-flex; }

  .top-slogan .slogan{ font-size: 14px; }

  .mobile-nav{ display: none; }
  .mobile-nav.is-open{ display: block; }

  .hero{
    padding: 26px 0 40px;
    min-height: auto;
  }

  .brand__logo--hero{
    width: min(360px, 78vw);
    max-width: 360px;
  }

  .hero__slogan{
    font-size: 20px;
    padding: 0 6px;
  }

  .splash-top-right{
    top: -20px;
    right: -30px;
    width: min(380px, 70vw);
    opacity: .95;
  }

  .splash-bottom-left{
    bottom: -30px;
    left: -30px;
    width: min(380px, 70vw);
    opacity: .95;
  }

  .splash-curve{
    top: 120%;
    right: -14%;
    width: min(420px, 78vw);
  }

  .home-next-block{
    margin-top: 40px;
    padding-bottom: 40px;
  }

  .home-next-block__inner{
    padding: 20px 18px;
  }
}

@media (max-width: 420px){
  .brand__logo--small{ width: 58px; }
  .top-slogan{ display: none; }

  .nav-toggle{ width: 42px; height: 42px; }

  .home-video__frame{ border-radius: 18px; }
  .home-next-block__inner{ border-radius: 18px; }

  .splash-curve{
    top: 124%;
    right: -18%;
    width: min(380px, 86vw);
  }
}
/* ✅ Reduce el espacio arriba del menú */
.site-header{
  padding: clamp(6px, 0.7vw, 10px) 0 clamp(8px, 0.8vw, 12px);
}

/* === COMPACTAR ESPACIO HEADER → HERO === */
/* =========================================================
   PROPORCIONES (override) — Pegar al FINAL del CSS
   Controla: logo pequeño, ancho del menú, padding header, hero arriba
========================================================= */

/* Valores base (sirven para tamaños intermedios) */
:root{
  /* logo del menú (ancho) */
 --logo-small-w: clamp(74px, 4.5vw, 255px);

  /* ancho máximo de cápsula del menú (rectángulo) */
  --menu-area-w: 1100px;

  /* padding vertical del header */
  --header-pad-top: clamp(6px, 0.7vw, 10px);
  --header-pad-bot: clamp(8px, 0.8vw, 12px);

  /* subir/bajar el contenido del hero */
  --hero-content-top: 8px;
}

/* aplicar variables (sin cambiar tu estructura) */
.site-header{
  padding-top: var(--header-pad-top);
  padding-bottom: var(--header-pad-bot);
}

/* tamaño logo pequeño (menú) */
.brand__logo--small{
  width: var(--logo-small-w);
  max-width: var(--logo-small-w);
}

/* ancho del menú/cápsula */
.main-nav__list{
  width: min(100%, var(--menu-area-w));
}

/* subir el hero (lo que pediste) */
.hero__content{
  padding-top: var(--hero-content-top);
}


/* =========================================================
   AJUSTE ESPECÍFICO ~1245x672 (rango similar)
   - Logo menú más grande y menos pegado a la izquierda
   - Hero un poco más abajo (sin afectar otras medidas)
========================================================= */
@media (max-width: 1300px) and (min-width: 1180px) and (max-height: 720px){

  /* 1) Aumenta logo del menú (estaba muy pequeño) */
  :root{
    --logo-small-w: clamp(95px, 10vw, 130px);
  /* ajusta si quieres más grande */
    --hero-content-top: 14px;                  /* baja el contenido del hero */
  }

  /* 2) Evita que el logo del menú se pegue demasiado a la izquierda */
  .header-inner{
    /* más “margen” interno, ayuda a que no se vea aplastado */
    width: min(var(--container), calc(100% - 44px));
    gap: 18px; /* separa más columnas */
  }

  /* 3) Dale un pequeño empujón a la derecha al logo pequeño */
  .brand.brand--small{
    margin-left: clamp(6px, 1.2vw, 14px);
  }

  /* 4) Si el menú se siente muy encima del hero, añade un pelín de padding abajo */
  .site-header{
    padding-bottom: clamp(10px, 1.2vw, 14px);
  }

  /* 5) Bajar el hero completo un poco más (opcional, pero ayuda en pantallas bajitas) */
  .hero{
    padding-top: 10px;
  }

  @media (min-width: 1301px){
  :root{
    --logo-small-w: clamp(90px, 3.2vw, 255px);
  }
}

}


/* =========================================================
   FIX REAL: LOGO MENÚ NO SE ACHICA EN GRANDE
   1) scrolled no debe forzar 62px fijo
   2) NO anidar @media (sacar el min-width:1301 afuera)
========================================================= */

/* base: el logo crece con pantalla */
:root{
  --logo-small-w: clamp(95px, 4.5vw, 255px);           /* normal */
  --logo-small-w-scrolled: clamp(80px, 3.2vw, 210px);  /* cuando haces scroll */
}

/* aplica variables */
.brand__logo--small{
  width: var(--logo-small-w);
  max-width: var(--logo-small-w);
  height: auto;
}

/* scrolled: YA NO 62px fijo */
body.scrolled .brand__logo--small{
  width: var(--logo-small-w-scrolled);
  max-width: var(--logo-small-w-scrolled);
}

/* ====== ajuste específico ~1245x672 ====== */
@media (max-width: 1300px) and (min-width: 1180px) and (max-height: 720px){
  :root{
    --logo-small-w: clamp(110px, 10vw, 150px);
    --logo-small-w-scrolled: clamp(95px, 8vw, 130px);
    --hero-content-top: 14px;
  }

  .header-inner{
    width: min(var(--container), calc(100% - 44px));
    gap: 18px;
  }

  .brand.brand--small{
    margin-left: clamp(6px, 1.2vw, 14px);
  }

  .site-header{
    padding-bottom: clamp(10px, 1.2vw, 14px);
  }

  .hero{ padding-top: 10px; }
}

/* ====== pantallas GRANDES: refuerzo (NO anidado) ====== */
@media (min-width: 1301px){
  :root{
    --logo-small-w: clamp(120px, 3.6vw, 255px);
    --logo-small-w-scrolled: clamp(100px, 2.8vw, 210px);
  }
}
/* ============================================================
  
  STYLES DE OTRO MENU
============================================================ */
/* =========================================================
   MENÚ MÓVIL OVERLAY (ENCIMA DE TODO + BLUR SIN RECORRER NADA)
========================================================= */

.mobile-nav{
  position: fixed;
  inset: 0;               /* top:0 right:0 bottom:0 left:0 */
  z-index: 9999;          /* encima del header y todo */
  display: none;          /* cerrado */
}

/* abierto */
.mobile-nav.is-open{
  display: block;
}

/* overlay: cubre TODO y desenfoca */
.mobile-nav__overlay{
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* panel del menú: la caja */
.mobile-nav__panel{
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(14px, 3vw, 24px);
  left: clamp(14px, 3vw, 24px);

  max-width: 520px;
  margin-left: auto; /* lo pega más a la derecha visualmente */
  
  border-radius: 22px;
  padding: 16px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 18px 40px rgba(0,0,0,.35);

  transform: translateY(-8px);
  opacity: 0;

  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    opacity .22s cubic-bezier(.2,.8,.2,1);
}

/* animación al abrir */
.mobile-nav.is-open .mobile-nav__panel{
  transform: translateY(0);
  opacity: 1;
}

/* botón cerrar arriba */
.mobile-nav__close{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 42px;
  height: 42px;
  border: none;
  border-radius: 14px;
  cursor: pointer;

  background: linear-gradient(90deg, rgba(11, 207, 241, .8), rgba(250, 255, 18, .8));
  color: #000;
  font-weight: 900;

  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

/* evita “scroll” dentro del overlay si no se requiere */
.mobile-nav__list{
  margin-top: 46px; /* para que no choque con el botón cerrar */
}

/* cuando esté abierto, bloquea scroll del body */
body.menu-open{
  overflow: hidden;
}



/* =========================
  6) WHATSAPP FLOAT
========================= */
.whatsapp-float{
  position: fixed;
  right: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 999;

  width: clamp(54px, 4.2vw, 76px);
  height: clamp(54px, 4.2vw, 76px);

  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 30px rgba(0,0,0,.25);

  transition: transform .18s var(--ease), filter .18s var(--ease);
}

.whatsapp-float:hover{
  transform: translateY(-4px);
  filter: brightness(1.08);
}

.whatsapp-float img{
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

/* =========================================
  WHATSAPP — EXCEPCIÓN MÓVIL (más grande y más “fluido”)
  - En móvil crece más con el ancho (vw)
  - Inicia un poco más grande
========================================= */

/* Base (todas las pantallas): un poco más grande */
.whatsapp-float{
  width: clamp(60px, 4.8vw, 82px);
  height: clamp(60px, 4.8vw, 82px);
}

/* Móvil: que crezca más conforme aumenta la pantalla (hasta 900px) */
@media (max-width: 900px){
  .whatsapp-float{
    width: clamp(64px, 12vw, 96px);
    height: clamp(64px, 12vw, 96px);
  }

  .whatsapp-float__icon{
    width: 74%;
    height: 74%;
  }
}

/* Móvil pequeño: que no se pase (pero siga grande) */
@media (max-width: 420px){
  .whatsapp-float{
    width: clamp(62px, 16vw, 88px);
    height: clamp(62px, 16vw, 88px);
  }
}
/* =========================
  BOTONES MENÚ MÓVIL — SÓLIDOS (sin transparencia)
========================= */
.mobile-nav__link{
  /* ✅ fondo sólido (sin rgba) */
  background: linear-gradient(90deg, #0bcff1 0%, #faff12 100%) !important;

  /* ✅ texto bien visible */
  color: #000 !important;
  font-weight: 900;
  letter-spacing: .3px;
  text-shadow: none;

  /* ✅ que no “se lave” con blur o filtros */
  opacity: 1 !important;
  filter: none !important;

  /* ✅ borde y sombra como botón real */
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 10px 18px rgba(0,0,0,.20);
}

/* Hover (solo efecto, sin cambiar visibilidad del texto) */
.mobile-nav__link:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 24px rgba(0,0,0,.22);
}

/* Activo: sólido también */
.mobile-nav__link.active{
  background: rgba(26,42,108,.95) !important; /* sólido */
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.28);
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}
/* ✅ FIX: texto del menú móvil menos “grueso/remarcado” */
.mobile-nav__link{
  font-weight: 800 !important;     /* antes 900 */
  letter-spacing: .15px !important; /* antes .3 */
  text-shadow: none !important;     /* por si algo lo fuerza */
  -webkit-text-stroke: 0 !important;
}

/* Activo: que no se vea pesado */
.mobile-nav__link.active{
  font-weight: 700 !important;
  text-shadow: none !important;     /* quita el remarcado */
}


/*APARTADO CSS VIDEO*/

.hero-video{
  position: relative;
  width: 100vw;          /* hasta orillas */
  height: 100vh;         /* pantalla completa */
  overflow: hidden;
}

.hero-video__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* llena la pantalla (sin bordes) */
  object-position: center;
}

/* Overlay para colocar el botón */
.hero-video__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(18px, 4vw, 42px);
  z-index: 2;
  pointer-events: none; /* para que el click solo sea del botón */
}

.hero-video__btn{
  pointer-events: auto;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: 999px;

  background: linear-gradient(90deg, #0bcff1 0%, #faff12 100%);
  color: #000;
  font-weight: 800;
  letter-spacing: .2px;

  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 18px 35px rgba(0,0,0,.28);

  transition: transform .2s ease, filter .2s ease;
}

.hero-video__btn:hover{
  transform: translateY(-3px);
  filter: brightness(1.05);
}

.hero-video{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  /* ✅ ESTE ES EL ESPACIO */
  margin-top: clamp(60px, 12vw, 70px);
}



/* =========================================================
   SECCIÓN: ABOUT PROINK (estilo como "Siguiente sección")
   - Glass oscuro + texto blanco con sombra
   - Recuadro llega casi hasta la imagen de pasos
========================================================= */
.about-proink{
  position: relative;
  z-index: 1;
  width: 100%;
   padding: 30px 0 0;
}

/* Contenedor principal */
.about-proink__inner{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  align-items: center;
  gap: clamp(18px, 4vw, 42px);
}

/* Imagen izquierda (empleada) */
.about-proink__image{
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.about-proink__image img{
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.28));
}

/* Columna derecha */
.about-proink__content{
  position: relative;
}

/* ===== CARD GLASS (igual estilo al placeholder) ===== */
.about-proink__card{
  position: relative;
  z-index: 2;

  /* 🔥 le damos más espacio abajo para "abrazar" la imagen */
  padding: clamp(22px, 2.6vw, 30px);
  padding-bottom: clamp(52px, 6vw, 88px);

  border-radius: 22px;

  /* igual vibe que tu home-next-block__inner */
  background: rgba(0,0,0,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* Texto blanco + sombra */
.about-proink__text{
  margin: 0;
  color: #fff;

  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  font-weight: 500;

  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Resaltar nombre sin meter negro (se mantiene blanco) */
.about-proink__text strong{
  color: #fff;
  font-weight: 800;
}

/* ===== Imagen pasos (pegada al borde inferior del recuadro) ===== */
.about-proink__steps{
  position: absolute;

  /* aquí está el "pegado": sube poquito para que parezca que sale del recuadro */
  bottom: clamp(-24px, -2.2vw, -18px);

  /* alineación derecha como en referencia */
  right: clamp(10px, 2.6vw, 26px);

  z-index: 3;
  pointer-events: none;
}

.about-proink__steps img{
  width: min(900px, 92%);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.34));
}

.about-proink__steps img{
  transform: translateY(12vw);
}


/* =========================
   RESPONSIVE
========================= */
/* =========================
   RESPONSIVE (MÓVIL) — CORREGIDO
   - Muchacha más pegada al recuadro
   - “Marcos” más anchos (padding) para que el texto no quede a la orilla
   - Steps (idea/diseño/impresión) centrado y estable en móvil
========================= */
@media (max-width: 980px){

  .about-proink__inner{
    grid-template-columns: 1fr;
    gap: 12px; /* antes 30px: esto pegó más la imagen al recuadro */
  }

  /* Imagen chica: más cerca del recuadro */
  .about-proink__image{
    margin-bottom: -18px; /* ⬅️ pega la imagen al card */
    display: flex;
    justify-content: center;
  }

  .about-proink__image img{
    max-width: 420px;
    width: min(420px, 92vw);
    height: auto;
    display: block;
  }

  /* Card más ancho + más padding (marcos) */
  .about-proink__card{
    width: min(92vw, 760px);
    margin: 0 auto;
    padding: 20px 18px 12px; /* ⬅️ marcos más anchos */
  }

  /* Texto con buen respiro */
  .about-proink__text{
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.55;
  }

  /* Steps: NO flotante, centrado y que no “salte” */
  .about-proink__steps{
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .about-proink__steps img{
    width: min(420px, 92vw);
    height: auto;
    display: block;
    transform: translateY(-6px);
  }
}

@media (max-width: 520px){

  .about-proink{
    padding: 22px 0 42px;
  }

  /* Aún más pegado en móvil chico */
  .about-proink__image{
    margin-bottom: -22px;
  }

  /* Card más compacto pero con padding suficiente */
  .about-proink__card{
    border-radius: 18px;
    width: min(94vw, 520px);
   padding: 20px 18px 12px; /* ⬅️ evita texto pegado a la orilla */
  }

  .about-proink__text{
    font-size: clamp(14px, 4.1vw, 16px);
  }

  .about-proink__steps img{
    width: min(380px, 94vw);
    transform: translateY(-6px);
  }
}


/*DISEÑO SECCION DE TEXTO PARA TU NEGOCIO Y ESAS

/* =========================================================
   SECCIÓN: VIDA A TUS IDEAS (CSS) — v2 (como pediste)
   ✅ Marco / glass SOLO en el bloque de TEXTO (título + párrafo)
   ✅ La IMAGEN NO tiene marco (va “suelta”)
   ✅ Imagen pegada al bloque de texto (gap pequeño)
   ✅ El degradado VA EN EL MISMO RECTÁNGULO DEL TÍTULO (tipo etiqueta)
   ✅ Colores degradados estilo menú (azul + amarillo)
   ✅ Responsive: alterna izq/der en desktop, apila en móvil
========================================================= */

/* =========================
   VARIABLES (AJUSTES RÁPIDOS)
========================= */
:root{
  --vida-max: 1200px;

  /* glass del bloque texto */
  --vida-textbox-bg: rgba(255,255,255,.07);
  --vida-textbox-border: rgba(255,255,255,.14);
  --vida-textbox-blur: 12px;
  --vida-textbox-radius: 24px;

  /* sombras */
  --vida-shadow: 0 18px 45px rgba(0,0,0,.30);

  /* textos */
  --vida-text: rgba(255,255,255,.92);
  --vida-text-soft: rgba(255,255,255,.84);

  /* etiqueta (título) degradado estilo menú */
  --vida-tag-grad: linear-gradient(
    90deg,
    rgba(11, 207, 241, .90) 0%,
    rgba(250, 255, 18, .90) 100%
  );
  --vida-tag-text: #000;

  /* espacios */
  --vida-pad-y: clamp(26px, 4vw, 70px);
  --vida-gap: clamp(10px, 1.2vw, 14px); /* 👈 más pegado imagen-texto */
  --vida-card-pad: clamp(14px, 2vw, 22px);

  /* tipografías */
  --vida-title: clamp(22px, 3vw, 40px);
  --vida-p: clamp(14px, 1.2vw, 17px);
}

/* =========================
   CONTENEDOR GENERAL
========================= */
.vida-ideas{
  position: relative;
  z-index: 2;
  padding: var(--vida-pad-y) 0;
}

.vida-ideas__header,
.vida-ideas__bloque-inner,
.vida-ideas__cierre{
  width: min(var(--vida-max), calc(100% - 32px));
  margin: 0 auto;
}

/* =========================
   HEADER (TÍTULO + TEXTO + IMAGEN CENTRAL)
========================= */
.vida-ideas__header{
  text-align: center;
  display: grid;
  gap: 14px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.vida-ideas__titulo{
  margin: 0;
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: var(--vida-title);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.vida-ideas__titulo--amarillo{
  color: var(--slogan-yellow, #faff12);
}

.vida-ideas__descripcion{
  margin: 0 auto;
  max-width: 980px;
  font-size: var(--vida-p);
  line-height: 1.7;
  color: var(--vida-text-soft);
  text-shadow: 0 2px 10px rgba(0,0,0,.40);
}

.vida-ideas__imagen-central{
  margin-top: clamp(8px, 1.6vw, 14px);
  display: grid;
  place-items: center;
}

.vida-ideas__imagen-central img{
  width: min(980px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}

/* =========================
   BLOQUES (3) + LISTA DE TARJETAS
========================= */
.vida-ideas__bloque{
  margin-top: clamp(16px, 3vw, 26px);
}

.vida-ideas__bloque-inner{
  display: grid;
  gap: clamp(14px, 2vw, 20px);
}

/* =========================
   TARJETA SERVICIO
   - NO marco en imagen
   - marco SOLO en texto (contenido)
========================= */
.tarjeta-servicio{
  display: grid;
  grid-template-columns: 1fr 1.05fr; /* imagen + texto */
  align-items: center;
  gap: var(--vida-gap);
}

/* Imagen suelta */
.tarjeta-servicio__media{
  min-height: clamp(220px, 22vw, 340px);
  display: grid;
  place-items: center;
}

.tarjeta-servicio__media img{
  width: 100%;
  height: 100%;
  max-height: 360px;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.30));
}

/* Caja de texto (glass) */
.tarjeta-servicio__contenido{
  background: var(--vida-textbox-bg);
  border: 1px solid var(--vida-textbox-border);
  border-radius: var(--vida-textbox-radius);

  backdrop-filter: blur(var(--vida-textbox-blur));
  -webkit-backdrop-filter: blur(var(--vida-textbox-blur));

  box-shadow: var(--vida-shadow);

  padding: var(--vida-card-pad);
  display: grid;
  gap: 12px;
}

/* Etiqueta del título (degradado tipo menú) */
.tarjeta-servicio__titulo{
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  max-width: 100%;

  padding: 10px 18px;
  border-radius: 999px;

  background: var(--vida-tag-grad);
  color: var(--vida-tag-text);
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(18px, 2.2vw, 28px);

  box-shadow: 0 12px 22px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.14);
}

/* Resaltado dentro del título (OFICINA/EVENTOS/etc.) */
.tarjeta-servicio__titulo-resaltado{
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

/* Texto */
.tarjeta-servicio__texto{
  margin: 0;
  color: var(--vida-text);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.65;
  text-shadow: 0 2px 10px rgba(0,0,0,.30);
}

/* Alternancia imagen izq/der */
.tarjeta-servicio--imagen-izq .tarjeta-servicio__media{ order: 0; }
.tarjeta-servicio--imagen-izq .tarjeta-servicio__contenido{ order: 1; }

.tarjeta-servicio--imagen-der .tarjeta-servicio__contenido{ order: 0; }
.tarjeta-servicio--imagen-der .tarjeta-servicio__media{ order: 1; }

/* =========================
   CIERRE (ALIADO + IMG + FRASE + LOGO)
   (Puedes dejarlo “glass” o quitarlo si lo quieres sin marco)
========================= */
.vida-ideas__cierre{
  margin-top: clamp(26px, 4vw, 46px);
  text-align: center;

  padding: clamp(18px, 3vw, 30px);
}

.vida-ideas__aliado{
  margin: 0 0 10px;
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(20px, 2.4vw, 34px);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.vida-ideas__aliado-resaltado{
  background: var(--vida-tag-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vida-ideas__cierre-texto{
  margin: 0 auto;
  max-width: 900px;
  font-size: var(--vida-p);
  line-height: 1.7;
  color: var(--vida-text-soft);
  text-shadow: 0 2px 10px rgba(0,0,0,.40);
}

.vida-ideas__cierre-imagen{
  margin-top: clamp(14px, 2vw, 20px);
  display: grid;
  place-items: center;
}

.vida-ideas__cierre-imagen img{
  width: min(520px, 92%);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.35));
}

.vida-ideas__frase-final{
  margin: clamp(14px, 2vw, 18px) 0 0;
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(18px, 2.4vw, 34px);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.vida-ideas__frase-final--gradiente{
  background: var(--vida-tag-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.vida-ideas__logo-final{
  margin-top: clamp(10px, 1.6vw, 14px);
  display: grid;
  place-items: center;
}

.vida-ideas__logo-final img{
  width: clamp(90px, 12vw, 150px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.30));
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .tarjeta-servicio{
    grid-template-columns: 1fr;
    gap: 12px; /* 👈 más pegado */
  }

  .tarjeta-servicio__media{
    min-height: clamp(220px, 48vw, 320px);
  }

  /* En móvil: siempre imagen arriba + texto abajo */
  .tarjeta-servicio--imagen-der .tarjeta-servicio__contenido{ order: 1; }
  .tarjeta-servicio--imagen-der .tarjeta-servicio__media{ order: 0; }

  .tarjeta-servicio__titulo{
    justify-self: center; /* etiqueta centrada */
    text-align: center;
  }
}

@media (max-width: 520px){
  .vida-ideas{
    padding: clamp(18px, 7vw, 30px) 0;
  }

  .vida-ideas__header,
  .vida-ideas__bloque-inner,
  .vida-ideas__cierre{
    width: min(var(--vida-max), calc(100% - 22px));
  }

  .tarjeta-servicio__contenido{
    padding: 16px 16px 18px;
    border-radius: 18px;
  }

  /* texto más cómodo */
  .tarjeta-servicio__texto{
    font-size: 4.1vw;
    line-height: 1.65;
  }
}

/* =========================================================
   SECCIÓN FINAL: CONTACTO / COTIZA (ProINK)
   - Estilo glass + brillo azul/amarillo
   - Íconos con “rebote goma” (CSS) + realce al click
   - Responsive
========================================================= */

/* Variables (si ya las tienes en :root, puedes omitir este bloque) */
:root{
  --contact-max: 1100px;
  --contact-radius: 22px;
  --contact-blur: 14px;

  --contact-glass: rgba(255,255,255,.10);
  --contact-border: rgba(255,255,255,.18);

  --neon-a: rgba(11,207,241,.30);
  --neon-b: rgba(250,255,18,.18);

  --contact-shadow:
    0 18px 40px rgba(0,0,0,.28),
    0 0 26px var(--neon-a),
    0 0 18px var(--neon-b);

  --contact-text-shadow: 0 2px 10px rgba(0,0,0,.65);

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* =========================
   SECCIÓN CONTENEDOR
========================= */
.contacto-proink{
  position: relative;
  z-index: 1;
  padding: clamp(36px, 5vw, 70px) 0 clamp(34px, 5vw, 64px);
}

.contacto-proink__inner{
  width: min(var(--contact-max), calc(100% - 32px));
  margin: 0 auto;

  border-radius: var(--contact-radius);
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);

  padding: clamp(18px, 2.8vw, 34px);
  text-align: center;
}

/* =========================
   TÍTULOS
========================= */
.contacto-proink__title{
  margin: 0 0 10px;
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
  text-shadow: var(--contact-text-shadow);
}

.contacto-proink__sub{
  margin: 0 auto clamp(18px, 2.5vw, 26px);
  max-width: 820px;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.55;
  opacity: .92;
  text-shadow: var(--contact-text-shadow);
}

/* =========================
   GRID ICONOS
========================= */
.contacto-proink__icons{
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: clamp(12px, 2.2vw, 22px);
  align-items: stretch;
}

/* =========================
   BOTÓN ICONO (LINK)
========================= */
.contacto-proink__icon{
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;

  text-decoration: none;
  color: #fff;

  border-radius: 20px;
  padding: clamp(14px, 2vw, 18px);

  /* glass neon */
  background: var(--contact-glass);
  border: 1px solid var(--contact-border);
  backdrop-filter: blur(var(--contact-blur));
  -webkit-backdrop-filter: blur(var(--contact-blur));

  box-shadow: var(--contact-shadow);

  /* animaciones */
  transform: translateZ(0) scale(1);
  transition:
    transform .34s var(--ease),
    box-shadow .34s var(--ease),
    filter .34s var(--ease);
}

/* brillo suave extra */
.contacto-proink__icon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 20px;
  pointer-events:none;
  background: linear-gradient(
    135deg,
    rgba(11,207,241,.14),
    rgba(250,255,18,.10)
  );
  opacity: .85;
}

/* imagen */
.contacto-proink__icon img{
  width: clamp(52px, 5.4vw, 78px);
  height: clamp(52px, 5.4vw, 78px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.25));
}

/* label */
.contacto-proink__label{
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: var(--contact-text-shadow);
  font-size: clamp(13px, 1.2vw, 15px);
  opacity: .98;
}

/* =========================
   HOVER “REBOTE GOMA” (CSS)
   - más notorio + duración cómoda
========================= */
.contacto-proink__icon:hover{
  animation: contactoGoma .62s var(--ease) both;
  filter: brightness(1.06);
  box-shadow:
    0 22px 48px rgba(0,0,0,.32),
    0 0 30px rgba(11,207,241,.36),
    0 0 22px rgba(250,255,18,.22);
}

@keyframes contactoGoma{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  65%  { transform: scale(.98); }
  100% { transform: scale(1.02); }
}

/* =========================
   CLICK / ACTIVE (realce)
========================= */
.contacto-proink__icon:active{
  transform: scale(.98);
  filter: brightness(1.10);
}

/* Para el realce por JS (clase temporal) */
.contacto-proink__icon.is-pressed{
  filter: brightness(1.12);
  box-shadow:
    0 26px 56px rgba(0,0,0,.36),
    0 0 34px rgba(11,207,241,.46),
    0 0 26px rgba(250,255,18,.26);
  transform: scale(1.03);
}

/* =========================
   FOOTER FINAL
========================= */
.site-footer{
  position: relative;
  z-index: 1;
  padding: 26px 0 34px;
}

.site-footer__inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  text-align: center;

  border-radius: 18px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  padding: 16px 14px;
  box-shadow: 0 14px 26px rgba(0,0,0,.20);
}

.site-footer__text{
  margin: 0;
  opacity: .95;
  text-shadow: var(--contact-text-shadow);
  font-weight: 600;
}

.site-footer__credit{
  margin: 10px 0 0;
  opacity: .92;
  text-shadow: var(--contact-text-shadow);
  font-weight: 500;
}

.site-footer__credit strong{
  font-weight: 800;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .contacto-proink__icons{
    grid-template-columns: 1fr;
  }

  .contacto-proink__icon{
    max-width: 520px;
    margin: 0 auto;
  }

  .site-footer__inner{
    padding: 16px 12px;
  }
}

@media (max-width: 420px){
  .contacto-proink__inner{
    padding: 16px 14px;
    border-radius: 18px;
  }

  .contacto-proink__icon{
    border-radius: 18px;
  }
}


/*DISEÑO PARA ULTIMA SECCION Y FOOTER

/* ============================================================
  SECCIÓN: CONTACTO PROINK + FOOTER SIMPLE
  (pegar AL FINAL de tu styles.css)
============================================================ */

/* =========================
  CONTACTO (sección)
========================= */
.contacto-proink{
  position: relative;
  z-index: 2; /* encima de splashes */
  padding: clamp(44px, 5vw, 70px) 0 clamp(26px, 4vw, 46px);
}

.contacto-proink__inner{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  text-align: center;
}

.contacto-proink__title{
  margin: 0 0 10px;
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;

  color: #fff;
  text-shadow: var(--shadow-text);
}

.contacto-proink__sub{
  margin: 0 auto 18px;
  max-width: 880px;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.6;
  opacity: .95;
}

/* =========================
  ICONOS (cards clicables)
========================= */
.contacto-proink__icons{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 18px);
  align-items: stretch;
}

.contacto-proink__icon{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: clamp(14px, 1.6vw, 18px);
  cursor: pointer;

  display: grid;
  place-items: center;
  gap: 10px;

  text-decoration: none;
  color: #fff;

  box-shadow: 0 18px 30px rgba(0,0,0,.22);
  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    filter .22s var(--ease),
    border-color .22s var(--ease);
}

/* Para que el <button> se vea igual que <a> */
.contacto-proink__icon--email{
  width: 100%;
  font-family: inherit;
}

/* Imagen del icono */
.contacto-proink__icon img{
  width: clamp(54px, 5.8vw, 78px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.28));
}

/* Etiqueta */
.contacto-proink__label{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(13px, 1.2vw, 16px);
  text-shadow: var(--shadow-text);
}

/* Hover (rebote suave + “aluzado”) */
.contacto-proink__icon:hover{
  transform: translateY(-6px) scale(1.02);
  filter: brightness(1.06);
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 22px 40px rgba(0,0,0,.28),
    0 0 24px rgba(11, 207, 241, .20),
    0 0 18px rgba(250, 255, 18, .12);
}

/* Click (remarca) */
.contacto-proink__icon:active{
  transform: translateY(-2px) scale(0.99);
  filter: brightness(1.12);
  box-shadow:
    0 18px 30px rgba(0,0,0,.22),
    0 0 22px rgba(11, 207, 241, .26),
    0 0 18px rgba(250, 255, 18, .18);
}

/* Accesibilidad: focus visible */
.contacto-proink__icon:focus-visible{
  outline: 3px solid rgba(250, 255, 18, .65);
  outline-offset: 4px;
}

/* =========================
  MINI MODAL EMAIL
========================= */
.email-mini{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none; /* cerrado */
}

.email-mini.is-open{
  display: block;
}

.email-mini__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.email-mini__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: min(520px, calc(100% - 36px));

  border-radius: 20px;
  padding: 18px 16px 16px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 26px 60px rgba(0,0,0,.38);
  animation: emailPop .22s var(--ease) both;
}

@keyframes emailPop{
  0%   { transform: translate(-50%, -50%) scale(.96); opacity: 0; }
  100% { transform: translate(-50%, -52%) scale(1); opacity: 1; }
}

.email-mini__close{
  position: absolute;
  right: 10px;
  top: 10px;

  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: none;
  cursor: pointer;

  background: linear-gradient(90deg, rgba(11,207,241,.85), rgba(250,255,18,.85));
  color: #000;
  font-weight: 900;

  box-shadow: 0 12px 22px rgba(0,0,0,.28);
  transition: transform .18s var(--ease), filter .18s var(--ease);
}

.email-mini__close:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.email-mini__title{
  margin: 6px 0 10px;
  text-align: center;
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  text-shadow: var(--shadow-text);
}

.email-mini__mail{
  margin: 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(15px, 2.8vw, 18px);
  color: #fff;
  text-shadow: var(--shadow-text);

  padding: 12px 10px;
  border-radius: 16px;

  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.14);
}

/* =========================
  RESPONSIVE
========================= */
@media (max-width: 900px){
  .contacto-proink__icons{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contacto-proink__icon{
    border-radius: 18px;
  }
}

/* =========================
  FOOTER SIMPLE
========================= */
.footer-simple{
  position: relative;
  z-index: 2;
  padding: 18px 0 22px;
}

.footer-simple__text{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  text-align: center;

  color: rgba(255,255,255,.92);
  font-size: 12.5px;
  line-height: 1.45;
}

.footer-simple__text + .footer-simple__text{
  margin-top: 6px;
}

.footer-simple__text strong{
  font-weight: 800;
  color: rgba(255,255,255,.98);
}



/* =========================
  EMAIL COPIADO – FEEDBACK
========================= */
.contacto-proink__icon--email.is-copied{
  transform: scale(1.08);
  box-shadow:
    0 0 18px rgba(11, 207, 241, .45),
    0 0 26px rgba(250, 255, 18, .35);
}

.contacto-proink__icon--email.is-copied img{
  filter: brightness(1.15);
}