/* =========================================================
   wopi – ideas en movimiento
   Hoja de estilos general (compartida por las 5 páginas)
   ========================================================= */

/* ---------- 1. Variables de marca ---------- */
:root {
  --azul:     #5665F3;
  --salmon:   #FF4D67;
  --celeste:  #26DDDD;
  --amarillo: #FFCB63;
  --negro:    #000;
  --blanco:   #fff;

  --degrade-celeste-amarillo: linear-gradient(90deg, var(--celeste), var(--amarillo));
  /* Degradé circular: nace azul en la esquina inferior derecha y se abre a salmón */
  --degrade-azul-salmon: radial-gradient(ellipse 52% 110% at 100% 100%,
                         var(--azul) 0%, #9a5fc4 35%, #d4568e 68%, var(--salmon) 100%);

  /* Sombra dura negra, sello gráfico de wopi */
  --sombra-dura: 8px;

  --font-titulos: "Righteous", system-ui, sans-serif;
  --font-texto:   "Source Code Pro", ui-monospace, Menlo, Consolas, monospace;

  /* Altura de la cabecera: la recalcula main.js. Este valor es el de respaldo */
  --header-h: 140px;
}

/* ---------- 2. Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  padding-top: var(--header-h);   /* evita que la cabecera fija tape el contenido */
  font-family: var(--font-texto);
  color: var(--negro);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* Texto sólo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   3. CABECERA FIJA
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }

/* --- 3.1 Barra superior negra --- */
.topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 34px;
  background: var(--negro);
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--blanco);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-decoration: none;
}
.topbar__link:hover { color: var(--celeste); }
.icon { width: 1.05em; height: 1.05em; flex-shrink: 0; }

/* --- 3.2 Franja azul con logo y menú --- */
.navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.8vw, 34px);
  padding: clamp(18px, 1.7vw, 32px) 24px clamp(12px, 1.1vw, 20px);
  background: var(--azul);
  transition: padding .3s ease, gap .3s ease;
}

.navbar__logo img {
  width: clamp(170px, 14.8vw, 284px);
  transition: width .3s ease;
}

/* Versión compacta al hacer scroll (sólo escritorio) */
@media (min-width: 821px) {
  .is-scrolled .navbar { padding-top: 12px; padding-bottom: 10px; gap: 12px; }
  .is-scrolled .navbar__logo img { width: 150px; }
}

/* --- 3.3 Menú --- */
.menu__list {
  display: flex;
  align-items: center;
}
.menu__list li { display: flex; align-items: center; }

/* Puntos separadores entre ítems */
.menu__list li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 clamp(22px, 3.3vw, 62px);
  border-radius: 50%;
  background: var(--negro);
}

.menu__link {
  position: relative;
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 22px);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--negro);
  padding: 4px 0;
}

/* Subrayado animado con el degradé celeste→amarillo */
.menu__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--degrade-celeste-amarillo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.menu__link:hover::after,
.menu__link:focus-visible::after,
.menu__link[aria-current="page"]::after { transform: scaleX(1); }

.menu__link:focus-visible { outline: 2px dashed var(--blanco); outline-offset: 4px; }

/* --- 3.4 Botón hamburguesa (oculto en escritorio) --- */
.navbar__toggle { display: none; }

/* =========================================================
   CABECERA – MÓVIL Y TABLET (≤ 820px)
   ========================================================= */
@media (max-width: 820px) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    padding: 14px 20px;
    position: relative;
  }
  .navbar__logo img { width: 150px; }

  .navbar__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0 9px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .navbar__toggle span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--negro);
    transition: transform .3s ease, opacity .2s ease;
  }
  /* Hamburguesa → X */
  .navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* Panel desplegable */
  .menu {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--azul);
    border-top: 2px solid var(--negro);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .35s ease, visibility 0s linear .35s;
  }
  .menu.is-open {
    clip-path: inset(0 0 -20px 0);
    visibility: visible;
    transition: clip-path .35s ease;
  }

  .menu__list { flex-direction: column; padding: 8px 0 16px; }
  .menu__list li { width: 100%; justify-content: center; }
  .menu__list li + li::before { display: none; }
  .menu__link { display: block; padding: 14px 0; font-size: 17px; }
  .menu__link::after { bottom: 8px; }
}

/* =========================================================
   4. HERO DE CONTACTO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(391px, 29.24vw, 561px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(41px, 4.67vw, 85px) 17px clamp(48px, 4.67vw, 85px);
  background: var(--salmon) var(--degrade-azul-salmon);
}

/* Trama cuadriculada (asoma por la izquierda, abajo) */
.hero__trama {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: clamp(128px, 18.19vw, 348px);
  height: clamp(110px, 13.09vw, 252px);
  background: url("../img/trama-fondo.png") right top / auto 183% no-repeat;
}

/* Estrella negra cortada en el borde derecho, girando lento */
.hero__estrella {
  position: absolute;
  z-index: -1;
  top: clamp(34px, 5.02vw, 97px);
  right: clamp(-66px, -3.4vw, -34px);
  width: clamp(94px, 10.2vw, 196px);
  animation: girar 40s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.hero__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(31px, 3.31vw, 64px);
}

.hero__titulo {
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: clamp(22px, 2.46vw, 48px);
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--blanco);
  text-shadow: clamp(2px, .22vw, 4px) clamp(2px, .22vw, 4px) 0 var(--negro);
}

/* --- Lista de contactos --- */
.contactos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(15px, 1.95vw, 37px);
}

.contacto {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.27vw, 24px);
  text-decoration: none;
  color: var(--negro);
}

.contacto__icono {
  width: clamp(41px, 4.04vw, 77px);
  flex-shrink: 0;
  transition: transform .25s ease;
}

.contacto__texto {
  display: block;
  padding: .08em .4em .14em;
  font-family: var(--font-titulos);
  font-size: clamp(19px, 2.29vw, 44px);
  line-height: 1.15;
  white-space: nowrap;
  background: var(--blanco);
  border: clamp(2px, .16vw, 3px) solid var(--negro);
  box-shadow: var(--sombra-dura) var(--sombra-dura) 0 var(--negro);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Efecto "botón apretado" al pasar el mouse */
.contacto:hover .contacto__texto,
.contacto:focus-visible .contacto__texto {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 var(--negro);
  background: var(--celeste);
}
.contacto:hover .contacto__icono { transform: rotate(-8deg) scale(1.06); }
.contacto:active .contacto__texto { transform: translate(var(--sombra-dura), var(--sombra-dura)); box-shadow: 0 0 0 var(--negro); }
.contacto:focus-visible { outline: none; }
.contacto:focus-visible .contacto__texto { outline: 3px dashed var(--blanco); outline-offset: 5px; }

@media (max-width: 820px) {
  :root { --sombra-dura: 4px; }
}

/* Hero en móvil: titular más grande y menos aire alrededor */
@media (max-width: 600px) {
  .hero {
    min-height: 0;
    padding: 30px 16px 40px;
  }
  .hero__contenido { gap: 22px; }
  .hero__titulo {
    font-size: min(32px, 8.4vw);            /* ≈ 31px en un celular de 375px */
    text-wrap: balance;                     /* reparte el texto parejo en 2 líneas */
  }
  .contactos { gap: 14px; }
  .contacto__texto { font-size: min(21px, 5.4vw); }  /* entra el mail hasta en 320px */
  .contacto__icono { width: min(42px, 11vw); }
  .hero__estrella { top: auto; bottom: -26px; width: 90px; }
}

/* =========================================================
   5. FORMULARIO
   ========================================================= */
.formulario {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: clamp(48px, 4.67vw, 92px) 17px clamp(54px, 4.25vw, 82px);
  background: #0d0d0d url("../img/fondo-textura-negro.jpg") center / cover;
}

/* --- Stickers --- */
.sticker {
  position: absolute;
  pointer-events: none;
  animation: flotar 6s ease-in-out infinite;
}
.sticker--impulsamos {
  left: 11%;
  top: clamp(34px, 3.82vw, 73px);
  width: clamp(102px, 10.2vw, 196px);
}
.sticker--despegar {
  right: 7.3%;
  top: clamp(255px, 19.55vw, 374px);
  width: clamp(144px, 16.66vw, 320px);
  animation-delay: -3s;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-2deg); }
}

/* --- Campos --- */
.form {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 454px;
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 1.15vw, 22px);
}

.form__input {
  display: block;
  width: 100%;
  min-height: clamp(44px, 2.85vw, 54px);
  padding: .9em 1.4em;
  font-family: var(--font-texto);
  font-size: clamp(13px, 0.81vw, 15px);
  color: var(--negro);
  background: var(--blanco);
  border: 3px solid var(--blanco);
  border-radius: 0;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder { color: #b5b5b5; font-weight: 600; opacity: 1; }
.form__input--area { min-height: clamp(144px, 9.18vw, 177px); resize: vertical; line-height: 1.5; }

.form__input:focus {
  border-color: var(--celeste);
  box-shadow: 6px 6px 0 var(--celeste);
}
.form__input[aria-invalid="true"] {
  border-color: var(--salmon);
  box-shadow: 6px 6px 0 var(--salmon);
}

/* Campo trampa anti-spam: fuera de la pantalla */
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Mensajes de estado --- */
.form__estado {
  margin: 0;
  min-height: 1.5em;
  line-height: 1.5;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--blanco);
}
.form__estado.is-ok    { color: var(--celeste); }
.form__estado.is-error { color: var(--salmon); }

/* --- Botón Enviar --- */
.form__boton {
  align-self: center;
  margin-top: clamp(3px, 1.06vw, 20px);
  min-width: 136px;
  padding: .3em 1.5em .35em;
  font-family: var(--font-titulos);
  font-size: clamp(17px, 1.06vw, 20px);
  color: var(--negro);
  background: var(--azul);
  border: 3px solid var(--blanco);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--blanco);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form__boton:hover,
.form__boton:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--blanco);
  background: var(--celeste);
  outline: none;
}
.form__boton:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--blanco); }
.form__boton:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: 5px 5px 0 var(--blanco); }

/* --- Formulario en tablet y móvil --- */
@media (max-width: 1100px) {
  .sticker--impulsamos { left: 3%; }
  .sticker--despegar   { right: 2%; }
}
@media (max-width: 900px) {
  /* Los stickers dejan de estar a los costados: uno arriba, otro abajo */
  .formulario {
    flex-direction: column;
    align-items: center;
    padding-top: 110px;
    padding-bottom: 178px;
  }
  .form__input { font-size: 16px; }   /* con menos de 16px el iPhone hace zoom al tocar el campo */
  .sticker--impulsamos { top: 17px; left: 50%; margin-left: -128px; width: 110px; }
  .sticker--despegar   { top: auto; bottom: 17px; right: 50%; margin-right: -128px; width: 162px; }
}

/* =========================================================
   6. PIE (compartido por todas las páginas)
   ========================================================= */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding: 22px clamp(20px, 2.2vw, 42px);
  background: var(--negro);
  color: var(--blanco);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
}

.footer__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.footer__contacto a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  text-decoration: none;
  transition: color .2s ease;
}
.footer__contacto a:hover,
.footer__contacto a:focus-visible { color: var(--celeste); outline: none; }

.footer__firma { margin: 0; }

@media (max-width: 600px) {
  .site-footer {
    flex-direction: column;
    justify-content: center;
    padding: 24px 16px;
    font-size: 14px;
    text-align: center;
  }
  .footer__contacto { justify-content: center; }
  .footer__firma { font-weight: 600; opacity: .8; }
}


/* =========================================================
   8. PIEZAS COMPARTIDAS POR LAS PÁGINAS DE CONTENIDO
   --m = 1 píxel de la maqueta (captura a 960px de ancho),
         ya reducido al 85% y proporcional al ancho de pantalla.
         En 1920px vale 1.7px; en 1366px, 1.2px.
   ========================================================= */
:root { --m: clamp(.75px, .0885vw, 1.7px); }

#contenido { overflow-x: hidden; }   /* los elementos que asoman por los bordes no generan scroll lateral */

/* Botón a WhatsApp: caja + ícono */
.boton-wa {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--m));
  text-decoration: none;
  color: var(--negro);
}
.boton-wa__texto {
  padding: calc(2 * var(--m)) calc(9 * var(--m)) calc(4 * var(--m));
  font-family: var(--font-titulos);
  font-size: max(15px, calc(17 * var(--m)));
  line-height: 1.2;
  background: var(--blanco);
  border: 2px solid var(--negro);
  box-shadow: calc(4 * var(--m)) calc(4 * var(--m)) 0 var(--negro);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.boton-wa__icono { width: max(28px, calc(30 * var(--m))); transition: transform .25s ease; }
.boton-wa:hover .boton-wa__texto,
.boton-wa:focus-visible .boton-wa__texto {
  transform: translate(2px, 2px);
  box-shadow: calc(2 * var(--m)) calc(2 * var(--m)) 0 var(--negro);
  background: var(--celeste);
}
.boton-wa:hover .boton-wa__icono { transform: rotate(-8deg) scale(1.06); }
.boton-wa:focus-visible { outline: none; }
.boton-wa:focus-visible .boton-wa__texto { outline: 3px dashed var(--negro); outline-offset: 4px; }


/* ---------- Componentes reutilizables (Inicio, Páginas web, Publicidad) ---------- */

/* Contenedor centrado del ancho de la maqueta */
.in-wrap {
  position: relative;
  width: calc(960 * var(--m));
  max-width: 100%;
  margin: 0 auto;
}

/* Botón con WhatsApp, versión chica: el ícono mide lo mismo que la caja */
.boton-wa--chico {
  --bw-fs: max(16px, calc(15 * var(--m)));
  --bw-alto: calc(var(--bw-fs) * 1.2 + 6 * var(--m) + 4px);   /* texto + relleno + borde */
  gap: calc(7 * var(--m));
}
.boton-wa--chico .boton-wa__texto {
  font-size: var(--bw-fs);
  line-height: 1.2;
  padding: calc(3 * var(--m)) calc(9 * var(--m));
  box-shadow: calc(4 * var(--m)) calc(4 * var(--m)) 0 var(--negro);
}
.boton-wa--chico .boton-wa__icono { width: calc(var(--bw-alto) * 1.1); }   /* la imagen trae su sombra */

/* Botón verde "Quiero empezar" */
.boton-verde {
  display: inline-block;
  padding: calc(4 * var(--m)) calc(14 * var(--m)) calc(5 * var(--m));
  font-family: var(--font-titulos);
  font-size: max(17px, calc(17 * var(--m)));
  line-height: 1.2;
  color: var(--negro);
  text-decoration: none;
  background: #25d366;
  border: 2px solid var(--negro);
  box-shadow: calc(5 * var(--m)) calc(5 * var(--m)) 0 var(--negro);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.boton-verde:hover,
.boton-verde:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--negro);
  background: var(--celeste);
  outline: none;
}

/* Caja blanca con borde y sombra dura (títulos) */
.caja-titulo {
  margin: 0;
  padding: calc(14 * var(--m)) calc(28 * var(--m)) calc(16 * var(--m));
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(25 * var(--m));
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  background: var(--blanco);
  border: max(2px, calc(2.5 * var(--m))) solid var(--negro);
  box-shadow: calc(7 * var(--m)) calc(7 * var(--m)) 0 var(--negro);
}

/* Corazones de "me gusta" */
.like {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .24em;
  padding: .2em .48em .2em .38em;
  font-family: var(--font-titulos);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--blanco);
  background: #ff4d67;
  border-radius: .26em;
  animation: flotar 5s ease-in-out infinite;
}
.like::after {                       /* piquito del globo */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.3em;
  margin-left: -.32em;
  border: .32em solid transparent;
  border-bottom: 0;
  border-top-color: #ff4d67;
}
.like svg { width: 1.12em; height: 1.03em; fill: var(--blanco); }
.like b { display: inline-block; min-width: 1.85em; font-weight: 400; font-variant-numeric: tabular-nums; }   /* ancho fijo: no salta mientras cuenta */

.pastilla {
  padding: calc(3 * var(--m)) calc(13 * var(--m)) calc(5 * var(--m));
  font-family: var(--font-titulos);
  font-size: max(16px, calc(17 * var(--m)));
  line-height: 1.2;
  text-decoration: none;
  color: var(--negro);
  border: 2px solid var(--negro);
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.pastilla--llena { background: var(--negro); color: var(--blanco); }
.pastilla:hover,
.pastilla:focus-visible { background: var(--negro); color: var(--celeste); transform: translateY(-2px); outline: none; }

/* =========================================================
   Bloque CASOS DE ÉXITO (Páginas web y Redes sociales)
   ========================================================= */
.pw-casos {
  padding: calc(40 * var(--m)) 20px;
  text-align: center;
  background: linear-gradient(90deg, var(--amarillo) 30%, #9ad8b9 100%);
}

.pw-casos__titulo {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(40 * var(--m));
  line-height: 1.05;
  text-transform: uppercase;
}
.pw-casos__contorno {
  color: transparent;
  -webkit-text-stroke: max(1px, calc(1.3 * var(--m))) var(--negro);
}
.pw-casos__de { text-transform: none; }

.pw-casos__botones {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(14 * var(--m));
  margin-top: calc(18 * var(--m));
}

.pw-casos__puntero {
  position: absolute;
  right: calc(-22 * var(--m));
  bottom: calc(-32 * var(--m));
  width: calc(30 * var(--m));
  pointer-events: none;
  animation: clic 2.4s ease-in-out infinite;
}
@keyframes clic {
  0%, 70%, 100% { transform: translate(0, 0); }
  80% { transform: translate(-3px, -3px) scale(.92); }
}

@media (max-width: 820px) {
  /* 4. Casos */
  .pw-casos { padding: 44px 20px 52px; }
  .pw-casos__titulo { font-size: min(36px, 9.4vw); }
  .pw-casos__contorno { -webkit-text-stroke-width: 1.3px; }
  .pw-casos__botones { gap: 12px; margin-top: 20px; }
  .pastilla { font-size: 18px; padding: 4px 16px 6px; }
  .pw-casos__puntero { width: 30px; right: -14px; bottom: -30px; }

}

/* Ventana de video (la crea main.js) */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .85);
}
.video-modal__caja { position: relative; width: min(960px, 100%); }
.video-modal__caja iframe,
.video-modal__caja video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--blanco);
  background: var(--negro);
}
.video-modal__cerrar {
  position: absolute;
  top: -48px; right: 0;
  width: 42px; height: 42px;
  font-size: 30px;
  line-height: 1;
  color: var(--negro);
  background: var(--celeste);
  border: 2px solid var(--negro);
  box-shadow: 3px 3px 0 var(--negro);
  cursor: pointer;
}

/* Usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   7. PÁGINA PROVISORIA "MUY PRONTO"
   (se borra cuando estén las 5 páginas)
   ========================================================= */
.proximamente {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: calc(100vh - var(--header-h) - 70px);
  padding: 60px 20px;
  text-align: center;
  background: var(--salmon) var(--degrade-azul-salmon);
  color: var(--blanco);
}
.proximamente__estrella {
  position: absolute;
  z-index: -1;
  right: -60px; top: 30px;
  width: clamp(140px, 16vw, 260px);
  animation: girar 40s linear infinite;
}
.proximamente__titulo {
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 72px);
  text-transform: uppercase;
  text-shadow: 4px 4px 0 var(--negro);
}
.proximamente__texto { margin: 0; font-size: 17px; font-weight: 600; }
.proximamente__boton {
  margin-top: 10px;
  padding: .3em 1.4em .35em;
  font-family: var(--font-titulos);
  font-size: 22px;
  color: var(--negro);
  text-decoration: none;
  background: var(--blanco);
  border: 3px solid var(--negro);
  box-shadow: 6px 6px 0 var(--negro);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.proximamente__boton:hover,
.proximamente__boton:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--negro);
  background: var(--celeste);
  outline: none;
}