/* =====================================================================
   site.css — Landing page pública de TEO-CALLY.

   Autocontenida: NO usa tema.css/app.css del sistema (que ahora vive
   en /taller/sistema/). Reproduce aquí la misma paleta negro + dorado
   champagne, la misma tipografía Montserrat Light y la textura de
   grano, para que la portada y el sistema se sientan de la misma marca.

   Índice:
     1. Fuente, reset y tokens
     2. Utilidades (contenedor, secciones, greca, "reveal")
     3. Barra de progreso + grano
     4. Botones (dorado metálico / fantasma)
     5. Encabezado y navegación
     6. Hero
     7. Letrero de marcas en movimiento
     8. Servicios
     9. Banda "Presupuestos sin costo"
    10. Nosotros / valores
    11. Contacto + mapa CSS
    12. Pie
    13. Botón "subir"
    14. Animaciones (keyframes)
    15. Responsivo
    16. prefers-reduced-motion
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FUENTE, RESET Y TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Tipografía tipo ferrari.com: una sola familia geométrica (Poppins,
     lo más cercano libre a "Ferrari Sans") para titulares y texto.
     Se carga desde Google Fonts en el <head>. */
  --fuente-texto: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;
  --fuente-display: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;
  /* superficies, de más oscura a más clara (mismos valores que tema.css) */
  --negro: #050506;
  --negro-2: #0b0b0d;
  --negro-3: #131316;
  --gris-campo: #17171a;

  /* dorado champagne tomado del logo */
  --oro-sombra: #a08040;
  --oro-base: #c9a86a;
  --oro-medio: #e0c080;
  --oro-brillo: #f0d8a0;
  --oro-texto: #3a2a00;

  /* cromo/plata para el subtítulo tipo "AUTOMOTRIZ" del flyer */
  --cromo-1: #6b6f78;
  --cromo-2: #e8e9ec;
  --cromo-3: #a7abb3;

  --texto: #f4f3f0;
  --texto-tenue: rgba(244,243,240,0.52);
  --texto-debil: rgba(244,243,240,0.34);

  --borde: rgba(255,255,255,0.12);
  --borde-oro: rgba(201,168,106,0.36);

  --radio-card: 14px;
  --radio-pill: 999px;

  --ancho: 1160px;
  --cab-alto: 74px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
[hidden]{ display: none !important; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--cab-alto);
  -webkit-text-size-adjust: 100%;
}

body{
  background: var(--negro);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
svg{ display: block; }

/* Selección y foco con el dorado de la marca (igual que el sistema). */
::selection{ background: rgba(201,168,106,0.32); }
:focus-visible{ outline: 2px solid var(--oro-brillo); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------------
   2. UTILIDADES
   --------------------------------------------------------------------- */
.seccion{
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 78px) clamp(20px, 5vw, 40px);
}

.seccion-cab{ max-width: 640px; margin-bottom: clamp(22px, 3.5vw, 40px); }
.seccion-kicker{
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--oro-base);
  margin-bottom: 14px;
}
.seccion-titulo{
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.1px;
}
.seccion-titulo em{
  font-style: normal;
  background: linear-gradient(120deg, var(--oro-sombra), var(--oro-brillo) 45%, var(--oro-base));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Estado inicial de los bloques que aparecen al hacer scroll. site.js
   les quita .reveal (o les pone .visible) vía IntersectionObserver. */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.visible{ opacity: 1; transform: none; }
/* Salvavidas: si el JS no cargó (o el IntersectionObserver falló), el
   contenido NUNCA se queda invisible -- esta regla lo muestra igual. */
.no-js .reveal{ opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   3. BARRA DE PROGRESO + GRANO
   Sin box-shadow: un halo sobre un elemento de ancho 0 dejaba una
   marca tenue en la esquina aunque la barra estuviera "vacía".
   --------------------------------------------------------------------- */
.progreso{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--oro-sombra), var(--oro-brillo));
  transition: width .12s linear;
}

.grano{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Sin mix-blend-mode: sobre una capa fija a pantalla completa
     rompe el compositor en algunos navegadores al hacer scroll (y es
     caro en móviles). Con opacidad baja sobre el negro basta para que
     el fondo no se vea "plano" de CSS. */
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Todo el contenido va por encima del grano. */
header, main, footer, .subir{ position: relative; z-index: 2; }

/* ---------------------------------------------------------------------
   4. BOTONES
   --------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radio-pill);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease, border-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn svg{ width: 18px; height: 18px; flex: none; }

/* Dorado metálico: mismo barrido que el botón "Entrar" del login. */
.btn-oro{
  color: var(--oro-texto);
  background: linear-gradient(135deg,
    var(--oro-sombra) 0%, var(--oro-medio) 30%, var(--oro-brillo) 47%,
    var(--oro-medio) 64%, var(--oro-sombra) 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
}
.btn-oro:hover{
  background-position: 100% 0%;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(224,192,128,0.28);
}
.btn-oro:active{ transform: translateY(0); box-shadow: none; }

.btn-fantasma{
  color: var(--texto);
  border-color: var(--borde-oro);
  background: rgba(255,255,255,0.02);
}
.btn-fantasma:hover{
  border-color: var(--oro-base);
  color: var(--oro-brillo);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* ---------------------------------------------------------------------
   5. ENCABEZADO
   --------------------------------------------------------------------- */
.cab{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--cab-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 40px);
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
/* Al bajar, el encabezado se "posa": fondo translúcido + filo. site.js
   le pone .cab-scroll pasados unos px. */
.cab-scroll{
  background: rgba(5,5,6,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--borde);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.cab-marca{ display: flex; align-items: center; }
.cab-marca img{
  height: 46px;
  width: auto;
  display: block;
}

.cab-nav{ display: flex; align-items: center; gap: 34px; }
.cab-nav a{
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto-tenue);
  transition: color .2s ease;
  position: relative;
}
.cab-nav a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--oro-base);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.cab-nav a:hover{ color: var(--texto); }
.cab-nav a:hover::after{ transform: scaleX(1); transform-origin: left; }

/* Botón hamburguesa (solo móvil). */
.cab-menu{
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}
.cab-menu span{
  display: block;
  width: 18px; height: 1.5px;
  margin: 4px auto;
  background: var(--texto);
  transition: transform .3s ease, opacity .2s ease;
}
.cab-menu[aria-expanded="true"] span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.cab-menu[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.cab-menu[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 86vh;
  min-height: 86svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--cab-alto) + 26px) clamp(20px, 5vw, 40px) 44px;
  overflow: hidden;
  isolation: isolate;
}
/* Degradados de fondo: negro plano + una nube cálida arriba a la
   derecha, como la luz sobre el motor en la foto del flyer. */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 78% 12%, rgba(201,168,106,0.16), transparent 70%),
    radial-gradient(80% 60% at 20% 100%, rgba(201,168,106,0.06), transparent 70%),
    var(--negro);
}
.hero-glow{
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,192,128,0.20), transparent 65%);
  filter: blur(40px);
  z-index: -1;
  top: 8%; left: 62%;
  transform: translate(-50%, -50%);
  animation: derivaGlow 16s ease-in-out infinite alternate;
  transition: transform .6s ease-out;
}
.hero-cuerpo{ max-width: 800px; }

.hero-logo{
  width: clamp(280px, 46vw, 480px);
  height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 10px 50px rgba(201,168,106,0.28));
}

.hero-titulo{
  font-size: clamp(30px, 5.6vw, 60px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.5px;
  margin-bottom: 34px;
}
.hero-titulo span{ display: block; }
.linea-oro{
  background: linear-gradient(120deg, var(--oro-sombra) 0%, var(--oro-brillo) 45%, var(--oro-base) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* "COMO SI FUERA NUESTRO": acabado cromado como el "AUTOMOTRIZ" del
   flyer -- degradado plata con una franja de brillo angosta. */
.linea-cromo{
  background: linear-gradient(180deg, var(--cromo-2) 0%, var(--cromo-3) 42%, var(--cromo-1) 55%, var(--cromo-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(255,255,255,0.08);
}

.hero-sub{
  font-size: clamp(14px, 1.9vw, 17px);
  color: var(--texto-tenue);
  max-width: 560px;
  margin: 0 auto 34px;
}
.hero-sub strong{ color: var(--oro-base); font-weight: 500; }

.hero-ctas{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.hero-chips{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-tenue);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: rgba(255,255,255,0.02);
}
.chip svg{ width: 15px; height: 15px; color: var(--oro-base); flex: none; }

.hero-scroll{
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--texto-tenue);
  animation: rebote 2.4s ease-in-out infinite;
}
.hero-scroll svg{ width: 18px; height: 18px; }
.hero-scroll:hover{ color: var(--oro-base); border-color: var(--borde-oro); }

/* ---------------------------------------------------------------------
   7. LETRERO DE MARCAS EN MOVIMIENTO
   --------------------------------------------------------------------- */
.marcas{
  background: var(--negro-2);
  padding: 26px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marcas-pista{
  display: flex;
  width: max-content;
  animation: correrMarcas 42s linear infinite;
}
.marcas:hover .marcas-pista{ animation-play-state: paused; }
.marcas-lista{
  display: flex;
  align-items: center;
  list-style: none;
  gap: clamp(38px, 6vw, 64px);
  padding-right: clamp(38px, 6vw, 64px);
}
.marcas-lista li{ flex: none; }

/* Cada logo es un SVG monocromo (simple-icons) pintado por CSS con
   mask: así se recolorean todos igual (gris tenue -> dorado al pasar
   el mouse) sin tener 18 archivos de color distintos. El --logo lo
   pone el HTML por marca. */
.marca-logo{
  display: block;
  width: clamp(104px, 14vw, 168px);
  height: 52px;
  background-color: rgba(244,243,240,0.5);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: background-color .25s ease, transform .25s ease;
}
.marcas-lista li:hover .marca-logo{
  background-color: var(--oro-base);
  transform: scale(1.08);
}

/* ---------------------------------------------------------------------
   8. SERVICIOS
   --------------------------------------------------------------------- */
/* Tarjetas solo ícono + nombre (como el flyer). El ícono manda: va
   grande y centrado; el nombre debajo. */
.rejilla-servicios{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.tarjeta-servicio{
  position: relative;
  padding: 38px 22px 30px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 60%),
    var(--negro-3);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.tarjeta-servicio::after{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--oro-sombra), var(--oro-brillo));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.tarjeta-servicio:hover{
  transform: translateY(-6px);
  border-color: var(--borde-oro);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.tarjeta-servicio:hover::after{ transform: scaleX(1); }

.tarjeta-icono{
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border: 1px solid var(--borde-oro);
  border-radius: 18px;
  color: var(--oro-base);
  background: rgba(201,168,106,0.06);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.tarjeta-icono svg{ width: 46px; height: 46px; }
.tarjeta-servicio:hover .tarjeta-icono{
  transform: scale(1.08);
  background: rgba(201,168,106,0.16);
  color: var(--oro-brillo);
}

.tarjeta-servicio h3{
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.3;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   9. BANDA "PRESUPUESTOS SIN COSTO"
   Un bloque a todo lo ancho, con corte diagonal arriba y abajo como
   las cintas anguladas del flyer.
   --------------------------------------------------------------------- */
.banda{
  position: relative;
  margin: clamp(24px, 4vw, 48px) 0;
  padding: clamp(52px, 8vw, 92px) clamp(20px, 5vw, 40px);
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(201,168,106,0.16), transparent 70%),
    linear-gradient(180deg, var(--negro-3), var(--negro-2));
  /* El corte diagonal (arriba y abajo) imita las cintas anguladas del
     flyer. No lleva border-block: la línea recta se vería cortada por
     el clip; el contraste del degradado ya separa la banda. */
  clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
  overflow: hidden;
}
.banda::before{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.banda-cuerpo{ position: relative; max-width: 720px; margin: 0 auto; }
.banda-mini{
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--oro-base);
  margin-bottom: 16px;
}
.banda-grande{
  font-size: clamp(34px, 7vw, 74px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 1px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,243,240,0.55);
  margin-bottom: 8px;
}
.banda-grande span{
  display: block;
  -webkit-text-stroke: 0;
  background: linear-gradient(135deg,
    var(--oro-sombra) 0%, var(--oro-medio) 30%, var(--oro-brillo) 47%,
    var(--oro-medio) 64%, var(--oro-sombra) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: brilloTexto 5s linear infinite;
}
.banda-texto{
  font-size: clamp(14px, 1.9vw, 17px);
  color: var(--texto-tenue);
  max-width: 520px;
  margin: 18px auto 30px;
}

/* ---------------------------------------------------------------------
   10. NOSOTROS / VALORES
   --------------------------------------------------------------------- */
.rejilla-valores{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.valor{
  padding: 30px 22px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
  background: var(--negro-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: transform .35s ease, border-color .35s ease;
}
.valor:hover{ transform: translateY(-4px); border-color: var(--borde-oro); }
.valor-icono{
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--borde-oro);
  color: var(--oro-base);
}
.valor-icono svg{ width: 26px; height: 26px; }
.valor h3{
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 1.35;
}

/* ---------------------------------------------------------------------
   11. CONTACTO + MAPA CSS
   --------------------------------------------------------------------- */
.contacto-rejilla{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: stretch;
}
.contacto-datos{ list-style: none; display: grid; gap: 20px; margin: 26px 0 30px; }
.contacto-datos li{ display: flex; gap: 15px; align-items: flex-start; }
.contacto-icono{
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--borde-oro);
  border-radius: 10px;
  color: var(--oro-base);
}
.contacto-icono svg{ width: 19px; height: 19px; }
.dato-rotulo{
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-debil);
  margin-bottom: 3px;
}
.contacto-datos a{ color: var(--texto); transition: color .2s ease; }
.contacto-datos a:hover{ color: var(--oro-base); }
.dato-horario{ line-height: 1.5; }

.contacto-ctas{ display: flex; gap: 12px; flex-wrap: wrap; }

/* Mapa real de Google Maps (iframe con output=embed, sin API key).
   Va enmarcado en dorado para que combine con el resto; el mapa en sí
   se atenúa un poco (saturate/contrast) para que no reviente de luz
   sobre el fondo negro, sin dejar de ser legible. */
.contacto-mapa{
  position: relative;
  min-height: 360px;
  border: 1px solid var(--borde-oro);
  border-radius: var(--radio-card);
  overflow: hidden;
  background: var(--negro-3);
}
.contacto-mapa iframe{
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  display: block;
  /* "Modo oscuro" para el mapa: invert + hue-rotate deja las calles
     oscuras y las etiquetas claras, para que no reviente de blanco
     sobre el negro de la página. Truco conocido, sin API de estilos. */
  filter: invert(0.92) hue-rotate(180deg) saturate(0.7) brightness(0.95);
}
.mapa-abrir{
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto);
  background: rgba(5,5,6,0.9);
  border: 1px solid var(--borde-oro);
  padding: 8px 14px;
  border-radius: var(--radio-pill);
}
.mapa-abrir svg{ width: 15px; height: 15px; color: var(--oro-base); }
.mapa-abrir:hover{ color: var(--oro-brillo); border-color: var(--oro-base); }

/* ---------------------------------------------------------------------
   12. PIE
   --------------------------------------------------------------------- */
.pie{
  position: relative;
  background: var(--negro);
  padding: clamp(36px, 6vw, 52px) clamp(20px, 5vw, 40px) 28px;
}
.pie-cuerpo{
  max-width: var(--ancho);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.pie-cuerpo img{ width: clamp(150px, 30vw, 190px); height: auto; }
.pie-slogan{ font-size: 13px; color: var(--texto-tenue); letter-spacing: 0.5px; }
.pie-legal{
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: 1px;
  color: var(--texto-debil);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   13. BOTÓN "SUBIR"
   --------------------------------------------------------------------- */
.subir{
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 40;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--oro-texto);
  background: linear-gradient(135deg, var(--oro-sombra), var(--oro-medio) 50%, var(--oro-sombra));
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.9);
  transition: opacity .3s ease, transform .3s ease;
}
.subir svg{ width: 20px; height: 20px; transform: rotate(180deg); }
.subir.visible{ opacity: 1; pointer-events: auto; transform: none; }
.subir:hover{ transform: translateY(-3px); }

/* ---------------------------------------------------------------------
   14. ANIMACIONES
   --------------------------------------------------------------------- */
@keyframes flotar{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
@keyframes derivaGlow{
  0%{ transform: translate(-50%, -50%) scale(1); opacity: .8; }
  100%{ transform: translate(-42%, -38%) scale(1.15); opacity: 1; }
}
@keyframes rebote{
  0%, 100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(7px); }
}
@keyframes correrMarcas{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes brilloTexto{
  to{ background-position: 200% center; }
}

/* ---------------------------------------------------------------------
   15. RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width: 860px){
  /* En móvil el encabezado es más alto y suma la safe-area (muesca /
     barra de estado del teléfono) a su altura. Como TODO lo que usa
     var(--cab-alto) —el propio header, el hero, el menú desplegable—
     toma este valor, el logo y la hamburguesa nunca quedan tapados ni
     pegados al borde. El contenido se ancla abajo del header. */
  :root{ --cab-alto: calc(80px + env(safe-area-inset-top, 0px)); }
  .cab{ align-items: flex-end; padding-bottom: 16px; }
  .cab-marca img{ height: 38px; }

  .cab-nav{
    position: fixed;
    top: var(--cab-alto); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(5,5,6,0.96);
    backdrop-filter: blur(12px);
    padding: 8px 0 18px;
    /* Cerrado: se esconde ENTERO hacia arriba (su propia altura + la del
       header). Con -130% fijo, en un menú corto la parte de abajo del
       panel se asomaba en el header como una línea. */
    transform: translateY(calc(-100% - var(--cab-alto)));
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .cab-nav.abierto{ transform: translateY(0); }
  .cab-nav a{
    width: 100%;
    padding: 15px clamp(20px, 5vw, 40px);
    font-size: 14px;
  }
  .cab-nav a::after{ display: none; }
  .cab-menu{ display: block; }
  .cab-marca img{ height: 40px; }

  .contacto-rejilla{ grid-template-columns: 1fr; }
  .contacto-mapa, .contacto-mapa iframe{ min-height: 300px; }
}

@media (max-width: 560px){
  .hero-ctas .btn{ width: 100%; justify-content: center; }
  .banda-grande{ -webkit-text-stroke-width: 0.6px; }
}

/* ---------------------------------------------------------------------
   16. prefers-reduced-motion
   Si el sistema operativo pide menos movimiento, se apagan animaciones
   y parallax; el contenido aparece de una vez, sin transiciones.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity: 1; transform: none; }
  .hero-glow{ display: none; }
}