/* ==========================================================================
   Tecnicus — hoja de estilos
   La paleta completa sale del archivo del logo (logotecnicus.jpg), muestreada
   con ImageMagick. Los valores de marca están marcados como tales.
   ========================================================================== */

/* ------------------------------- TOKENS ---------------------------------- */
:root {
  /* Escala de indigo: #2A296E es el color de marca, tomado del logo. */
  --indigo-950: #16143F;
  --indigo-900: #201D5C;
  --indigo-800: #26235B;
  --indigo-700: #2A296E;   /* MARCA */
  --indigo-600: #38356F;
  --indigo-500: #4E4A89;
  --indigo-400: #6760A5;   /* violeta del borde superior del logo */
  --indigo-450: #5B54A0;   /* el mismo violeta, oscurecido hasta pasar AA
                              sobre fondos claros (5.55:1 en vez de 4.71:1) */
  --indigo-300: #8F8EAD;
  --indigo-200: #B5B3CB;
  --indigo-100: #D1D1E0;
  --indigo-50:  #ECECF3;
  --blanco:     #FBFBFC;   /* blanco del logo */

  /* Semánticos */
  --fondo:            var(--blanco);
  --fondo-alt:        var(--indigo-50);
  --texto:            var(--indigo-950);
  --texto-suave:      #4A4870;
  --texto-invertido:  #E6E5F2;
  --borde:            #E2E1EE;
  --acento:           var(--indigo-600);
  --acento-fuerte:    var(--indigo-800);

  /* Tipografía */
  --fuente: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
  --escala-xs:   0.8125rem;
  --escala-sm:   0.9375rem;
  --escala-base: 1rem;
  --escala-md:   clamp(1.0625rem, 0.99rem + 0.35vw, 1.1875rem);
  --escala-lg:   clamp(1.375rem, 1.22rem + 0.7vw, 1.75rem);
  --escala-xl:   clamp(1.75rem, 1.42rem + 1.5vw, 2.5rem);
  --escala-2xl:  clamp(2.25rem, 1.66rem + 2.7vw, 3.75rem);

  /* Ritmo */
  --contenedor: 1140px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --seccion-y: clamp(4.5rem, 8vw, 8rem);
  --radio: 14px;
  --radio-lg: 22px;

  /* Sombras: hue indigo, nunca negro puro */
  --sombra-sm: 0 1px 2px rgba(22, 20, 63, .06),
               0 2px 6px rgba(22, 20, 63, .05);
  --sombra-md: 0 4px 12px rgba(22, 20, 63, .07),
               0 12px 28px rgba(22, 20, 63, .07);
  --sombra-lg: 0 10px 24px rgba(22, 20, 63, .10),
               0 28px 60px rgba(22, 20, 63, .12);

  --transicion: 180ms cubic-bezier(.2, .7, .3, 1);
  --altura-cabecera: 96px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecera) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--escala-md);
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acento-fuerte); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--indigo-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: min(100% - (var(--gutter) * 2), var(--contenedor));
  margin-inline: auto;
}

/* --------------------------- ENLACE SALTAR ------------------------------- */
.saltar {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -140%;
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--indigo-700);
  color: var(--blanco);
  border-radius: 0 0 var(--radio) var(--radio);
  text-decoration: none;
  font-weight: 600;
  transition: translate var(--transicion);
}
.saltar:focus { translate: -50% 0; color: var(--blanco); }

/* ------------------------------- BOTONES ---------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--indigo-700);
  --btn-borde: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.5rem;
  border: 1px solid var(--btn-borde);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--escala-sm);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicion), background-color var(--transicion),
              color var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

/* Durante el envío el botón queda deshabilitado: sin esto seguiría con el
   hover Elevated y el usuario podría mandar dos veces y gastar dos de las
   250 cuotas mensuales. Se anula también el transform del hover. */
.btn:disabled,
.btn[aria-busy="true"] {
  transform: none;
  cursor: progress;
  opacity: .62;
  box-shadow: none;
}

.btn--primario {
  --btn-bg: var(--indigo-700);
  --btn-fg: var(--blanco);
  box-shadow: 0 4px 14px rgba(42, 41, 110, .28);
}
.btn--primario:hover { --btn-bg: var(--indigo-800); box-shadow: var(--sombra-md); }

.btn--acento {
  --btn-bg: var(--blanco);
  --btn-fg: var(--indigo-800);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}
.btn--acento:hover { --btn-bg: #fff; }

.btn--fantasma {
  --btn-fg: var(--blanco);
  --btn-borde: rgba(251, 251, 252, .45);
}
.btn--fantasma:hover { --btn-borde: var(--blanco); --btn-bg: rgba(251, 251, 252, .1); }

.btn--sm { padding: .58rem 1.15rem; font-size: var(--escala-xs); }
.btn--bloque { width: 100%; }

/* ------------------------------- CABECERA --------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 251, 252, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion),
              background-color var(--transicion);
}
.cabecera.desplazada {
  border-bottom-color: var(--borde);
  box-shadow: var(--sombra-sm);
  background: rgba(251, 251, 252, .94);
}

.cabecera__inner {
  min-height: var(--altura-cabecera);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 0 0 auto;
  margin-right: auto;
  text-decoration: none;
}
/* El logo dice sólo "Tecnicus" (medido: wordmark de una sola línea, 738x211px),
   así que la razón social se completa con texto al lado. */
.marca img { width: 208px; height: auto; }
.marca__pais {
  padding-left: .75rem;
  border-left: 1px solid var(--borde);
  color: var(--indigo-500);
  font-size: var(--escala-sm);
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}

.nav-principal {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-lista {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav-lista a {
  position: relative;
  color: var(--texto);
  font-size: var(--escala-sm);
  font-weight: 500;
  text-decoration: none;
  padding: .4rem 0;
}
.nav-lista a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--indigo-700);
  border-radius: 2px;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--transicion);
}
.nav-lista a:hover::after,
.nav-lista a[aria-current="true"]::after { scale: 1 1; }
.nav-lista a[aria-current="true"] { color: var(--indigo-700); font-weight: 600; }

.hamburguesa {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--blanco);
  cursor: pointer;
  place-items: center;
  gap: 5px;
}
.hamburguesa span {
  display: block;
  width: 20px; height: 2px;
  background: var(--indigo-800);
  border-radius: 2px;
  transition: translate var(--transicion), opacity var(--transicion),
              rotate var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

.velo {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(22, 20, 63, .42);
  backdrop-filter: blur(2px);
  animation: aparecer 200ms ease-out;
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }

/* --------------------------------- HERO ----------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--texto-invertido);
  background: var(--indigo-900);
  overflow: hidden;
}
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 88% 8%,  rgba(103, 96, 165, .55) 0%, transparent 58%),
    radial-gradient(90% 80% at 4% 96%,   rgba(78, 74, 137, .40) 0%, transparent 60%),
    linear-gradient(160deg, var(--indigo-900) 0%, var(--indigo-800) 46%, var(--indigo-700) 100%);
}
/* Rejilla sutil: textura de fondo, sin imagen externa */
.hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(251, 251, 252, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 251, 252, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.25rem;
  padding: .4rem .95rem;
  border: 1px solid rgba(251, 251, 252, .26);
  border-radius: 999px;
  background: rgba(251, 251, 252, .08);
  color: var(--blanco);
  font-size: var(--escala-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero__titulo {
  font-size: var(--escala-2xl);
  color: #fff;
  margin-bottom: .6em;
}
.hero__titulo .resaltado {
  color: var(--indigo-200);
  position: relative;
  white-space: nowrap;
}
.hero__titulo .resaltado::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: .07em;
  background: var(--indigo-400);
  border-radius: 999px;
  opacity: .85;
}

.hero__bajada {
  max-width: 54ch;
  font-size: var(--escala-md);
  color: var(--indigo-100);
  margin-bottom: 2rem;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__garantias {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(251, 251, 252, .16);
  font-size: var(--escala-sm);
  color: var(--indigo-200);
}
.hero__garantias li { display: flex; align-items: center; gap: .5rem; }
.hero__garantias li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--indigo-300);
  flex: 0 0 auto;
}

.hero__tarjeta {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid rgba(251, 251, 252, .18);
  border-radius: var(--radio-lg);
  background: rgba(251, 251, 252, .07);
  backdrop-filter: blur(8px);
  box-shadow: var(--sombra-lg);
}
.hero__tarjeta img { width: min(100%, 240px); margin-inline: auto; }
.hero__linea {
  height: 1px;
  margin: 1.75rem 0;
  background: linear-gradient(90deg, rgba(251,251,252,.32), transparent);
}
.hero__datos { display: grid; gap: 1rem; margin: 0; }
.hero__datos > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .75rem;
  font-size: var(--escala-sm);
}
.hero__datos dt {
  color: var(--indigo-200);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .75rem;
  align-self: center;
}
.hero__datos dd { margin: 0; color: var(--blanco); }

/* ------------------------------- MÉTRICAS --------------------------------- */
.metricas {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}
.metricas__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--borde);
  margin-inline: calc(var(--gutter) * -1);
  border-block: 1px solid var(--borde);
}
.metrica {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  background: var(--blanco);
  text-align: center;
}
.metrica__cifra {
  display: block;
  font-size: var(--escala-xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--indigo-700);
  font-variant-numeric: tabular-nums;
}
.metrica__pie {
  display: block;
  margin-top: .6rem;
  font-size: var(--escala-sm);
  color: var(--texto-suave);
}

/* ------------------------------- SECCIONES -------------------------------- */
.seccion { padding-block: var(--seccion-y); }
.seccion__cabecera { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.seccion__kicker {
  margin: 0 0 .9rem;
  font-size: var(--escala-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo-450);
}
.seccion__titulo { font-size: var(--escala-xl); color: var(--indigo-900); }
.seccion__intro { font-size: var(--escala-md); color: var(--texto-suave); margin: 0; }

.areas { background: var(--fondo-alt); }

.areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.tarjeta {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-md);
  border-color: var(--indigo-200);
}
.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  background: var(--indigo-50);
  color: var(--indigo-700);
}
.tarjeta__icono svg { width: 26px; height: 26px; }
.tarjeta h3 { font-size: var(--escala-lg); color: var(--indigo-900); }
.tarjeta p { margin: 0; color: var(--texto-suave); }

/* -------------------------------- NOSOTROS -------------------------------- */
.nosotros { background: var(--blanco); }
.nosotros__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.nosotros__parrafo { color: var(--texto-suave); max-width: 62ch; }

.nosotros__pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}
.nosotros__pilares strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--indigo-800);
  font-size: var(--escala-base);
}
.nosotros__pilares span { color: var(--texto-suave); font-size: var(--escala-sm); }

.nosotros__ficha {
  position: sticky;
  top: calc(var(--altura-cabecera) + 2rem);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: var(--radio-lg);
  background: linear-gradient(165deg, var(--indigo-800), var(--indigo-950));
  color: var(--texto-invertido);
  box-shadow: var(--sombra-lg);
}
.nosotros__ficha-titulo {
  font-size: var(--escala-base);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo-200);
  margin-bottom: 1.5rem;
}
.pasos { display: grid; gap: 1.25rem; }
.pasos li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .9rem; }
.pasos span {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid rgba(251, 251, 252, .28);
  border-radius: 50%;
  font-size: var(--escala-xs);
  font-weight: 700;
  color: var(--blanco);
}
.pasos strong { display: block; color: #fff; }
.pasos div { font-size: var(--escala-sm); color: var(--indigo-200); }

/* -------------------------------- CONTACTO -------------------------------- */
.contacto {
  background: var(--fondo-alt);
  border-top: 1px solid var(--borde);
}
.contacto__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.contacto__intro { color: var(--texto-suave); max-width: 46ch; }

.contacto__datos {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.contacto__datos li { display: flex; align-items: center; gap: .9rem; }
.contacto__datos a { color: var(--indigo-800); font-weight: 600; text-decoration: none; }
.contacto__datos a:hover { text-decoration: underline; }
.contacto__datos span { color: var(--texto-suave); }
.contacto__icono {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  color: var(--indigo-700);
}
.contacto__icono svg { width: 20px; height: 20px; }

.contacto__formulario {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--blanco);
  box-shadow: var(--sombra-md);
}
.campo { margin-bottom: 1.25rem; }
.campo label {
  display: block;
  margin-bottom: .4rem;
  font-size: var(--escala-sm);
  font-weight: 600;
  color: var(--indigo-900);
}
.campo .opcional { font-weight: 400; color: var(--texto-suave); }

.campo input,
.campo textarea {
  width: 100%;
  padding: .78rem .9rem;
  border: 1px solid var(--borde);
  border-radius: 11px;
  background: var(--blanco);
  font-size: var(--escala-base);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input:hover,
.campo textarea:hover { border-color: var(--indigo-200); }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 3px rgba(103, 96, 165, .22);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

.campo__pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.error {
  margin: .4rem 0 0;
  font-size: var(--escala-xs);
  font-weight: 600;
  color: #C0392B;
}
.contador {
  margin-left: auto;
  font-size: var(--escala-xs);
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.form-nota { margin: 1rem 0 0; font-size: var(--escala-sm); font-weight: 600; }
.form-nota[data-estado="ok"]    { color: #1E6B4F; }
.form-nota[data-estado="error"] { color: #C0392B; }
.form-nota[data-estado="info"]  { color: var(--texto-suave); font-weight: 400; }

/* Confirmación para el visitante SIN JavaScript: Web3Forms lo redirige a
   /#gracias y `:target` lo muestra. Con JS nunca se ve (la nota del formulario
   lleva ese papel). Oculto por defecto para que en una visita normal, sin el
   ancla en la URL, no ocupe un hueco vacío. */
.gracias {
  display: none;
  margin: 1rem 0 0;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  background: rgba(30, 107, 79, .09);
  box-shadow: inset 0 0 0 1px rgba(30, 107, 79, .28);
  color: #1E6B4F;
  font-size: var(--escala-sm);
}
.gracias:target { display: block; }

/* ---------------------------------- PIE ----------------------------------- */
.pie {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  color: var(--indigo-200);
  background: var(--indigo-950);
}
.pie__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 3rem;
}
.pie__marca img { width: 168px; margin-bottom: 1rem; }
.pie__marca p { margin: 0; font-size: var(--escala-sm); max-width: 34ch; }

.pie__titulo {
  margin-bottom: 1rem;
  font-size: var(--escala-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo-300);
}
.pie__nav ul { display: grid; gap: .6rem; }
.pie__nav a {
  color: var(--indigo-100);
  font-size: var(--escala-sm);
  text-decoration: none;
}
.pie__nav a:hover { color: #fff; text-decoration: underline; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(251, 251, 252, .12);
  font-size: var(--escala-xs);
  color: var(--indigo-300);
}
.pie__legal p { margin: 0; }
.pie__nota { font-style: italic; }

/* ------------------------------- ARRIBA ----------------------------------- */
.arriba {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--indigo-700);
  box-shadow: var(--sombra-md);
  cursor: pointer;
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--transicion), translate var(--transicion),
              background-color var(--transicion);
}
.arriba svg { width: 20px; height: 20px; }
.arriba:hover { background: var(--indigo-50); }
.arriba[hidden] { display: none; }
.arriba.visible { opacity: 1; translate: 0 0; }

/* ------------------------- REVELADOS (retirados) --------------------------
   Auditoría frontend-design 2026-10-08: las entradas fade-and-slide-up eran
   "el default genérico que se lee como IA" y competían con el único momento
   que sí tiene sentido, el conteo de las métricas. Se quitaron; no ponerlas
   de vuelta sin mirar la skill. Los datos siguen visibles sin JS. */

/* ------------------------------- RESPONSIVE ------------------------------- */
@media (max-width: 980px) {
  .hero__inner,
  .nosotros__inner,
  .contacto__inner { grid-template-columns: minmax(0, 1fr); }

  .hero__arte { order: -1; }
  .hero__tarjeta img { width: min(100%, 200px); }
  .nosotros__ficha { position: static; }

  .metricas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pie__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* El menú cerrado queda en `translate: 100% 0`, o sea fuera de la pantalla a
     la derecha. Medido: eso hace que `scrollWidth` sea 718px con un viewport de
     390, y el documento se scrollea en horizontal dejando un hueco vacío.
     `clip` recorta sin crear contexto de scroll (a diferencia de `hidden`), así
     que el `position: sticky` de la cabecera sigue funcionando — verificado
     con 1200px de scroll. `visibility: hidden` NO sirve: no saca el elemento
     del área de scroll. */
  html { overflow-x: clip; }

  .hamburguesa { display: grid; }
  .cabecera__inner { gap: 1rem; }
  .marca img { width: 152px; }
  .marca__pais { font-size: var(--escala-xs); padding-left: .6rem; }

  .nav-principal {
    position: fixed;
    top: 0; right: 0;
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
    width: min(84vw, 340px);
    height: 100dvh;
    padding: calc(var(--altura-cabecera) + 1.5rem) 1.75rem 2rem;
    background: var(--blanco);
    box-shadow: var(--sombra-lg);
    translate: 100% 0;
    transition: translate 280ms cubic-bezier(.3, .8, .3, 1);
    overflow-y: auto;
  }
  .nav-principal.abierto { translate: 0 0; }

  .nav-lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-lista li + li { border-top: 1px solid var(--borde); }
  .nav-lista a {
    display: block;
    padding: 1rem .25rem;
    font-size: var(--escala-md);
  }
  .nav-lista a::after { display: none; }
  .nav-cta { align-self: stretch; }

  body.menu-abierto { overflow: hidden; }
}

/* ------------------------- MOVIMIENTO REDUCIDO ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-revelar] { opacity: 1; translate: none; }
  .btn:hover, .tarjeta:hover { transform: none; }
}

/* --------------------------------- IMPRESIÓN ------------------------------ */
@media print {
  .cabecera, .velo, .arriba, .hero__fondo { display: none !important; }
  body { color: #000; background: #fff; }
  .seccion { padding-block: 1.5rem; }
  .contacto__formulario { display: none; }
}