/* ============================================================
   Hero rediseñado · portado desde wt-rediseno

   Va en un fichero aparte y no en output.css a propósito: output.css es un
   build de Tailwind generado desde otro proyecto, y cualquier cosa escrita
   ahí a mano se pierde en la siguiente compilación. Este archivo se carga
   después, así que gana por orden sin tener que pelear con !important.

   Usa los tokens que el sitio ya define (--obsidian, --on-surface, --outline,
   --laser-green). Solo añade los que no existían.
   ============================================================ */

:root {
  /* El fondo en componentes, para poder componer rgba() sin repetir el hex.
     Sin esto, un cambio de marca deja degradados con el color viejo detrás. */
  --hero-bg-rgb: 9, 9, 11;
  --hero-nav-h: 76px;

  /* Vidrio translúcido de los botones: se tiñe de lo que tiene detrás en vez
     de taparlo. La saturación alta evita que el desenfoque los deje grisáceos. */
  --hero-btn-glass: rgba(255, 255, 255, .10);
  --hero-btn-glass-hover: rgba(255, 255, 255, .16);
  --hero-btn-glass-border: rgba(255, 255, 255, .18);
}

/* ---------- Estructura ---------- */

#paradox.hero-redesign {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.hero-rd-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Red de seguridad: si el video no carga o el navegador no lo reproduce,
     lo que queda no es un rectángulo plano. */
  background:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255, 255, 255, .07), transparent 70%),
    radial-gradient(ellipse 60% 50% at 75% 70%, rgba(255, 255, 255, .05), transparent 70%),
    var(--obsidian, #09090b);
}

.hero-rd-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El velo cierra en el color exacto del fondo al 100 %. Si no coincidiera,
   quedaría una costura visible justo al pie del hero.

   Los valores están atados al brillo del video, no elegidos a ojo, y se
   comprueban muestreando el clip entero y no un fotograma suelto: un video
   puede tener media baja y aun asi un instante claro justo detras del titular.
   Con este, el reparto anterior (.20 hasta el 50 %) dejaba el titular en 2,0:1
   en su peor momento — por debajo del 4,5:1 de AA. Cerrando antes la rampa
   sube a 5,8:1 sin apagar la mitad superior, que es donde el video se ve y
   donde las piezas forman la marca.

   Si se cambia el video, hay que volver a medir esto. */
.hero-rd-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(var(--hero-bg-rgb), .55) 0%,
    rgba(var(--hero-bg-rgb), .22) 22%,
    rgba(var(--hero-bg-rgb), .38) 42%,
    rgba(var(--hero-bg-rgb), .88) 62%,
    rgb(var(--hero-bg-rgb)) 100%);
}

.hero-rd-inner {
  position: relative;
  z-index: 10;
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--hero-nav-h) + 34px) 20px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.hero-rd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-rd-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.hero-rd-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 640px;
}

/* ---------- Tipografía ---------- */

.hero-rd-copy h1 {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #fff;
  max-width: 600px;
  margin: 0;
}

/* Fijo y no theme-aware a proposito. El video del hero nunca cambia de tono
   con el tema -- solo el shader original lo hacia, via su uniforme u_theme.
   Usar var(--on-surface) aqui invertia el texto a casi-negro en tema claro,
   sobre un fondo que seguia siendo oscuro: texto invisible. */
.hero-rd-sub {
  max-width: 460px;
  font-size: clamp(16px, 1.5vw, 18px);
  letter-spacing: -.02em;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin: 0;
}

/* .chip es del sitio y esta pensado para un fondo que cambia de tono con el
   tema (el shader original). Sobre el video, que no cambia, sus tokens
   (--titanium-highlight, etc.) invertian el texto a oscuro y lo hacian
   desaparecer en tema claro. Se fija aqui sin importar el tema. */
#paradox.hero-redesign .chip {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .92);
}
#paradox.hero-redesign .chip:hover {
  border-color: rgba(16, 185, 129, .35);
  background: rgba(16, 185, 129, .08);
}

.hero-rd-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Riel de especificación. Los tres datos salen del modelo de trabajo publicado;
   no son métricas inventadas. Rompe la simetría de "cuatro esquinas ocupadas". */
.hero-rd-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 4px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  max-width: 640px;
  list-style: none;
}

.hero-rd-spec li {
  position: relative;
  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-weight: 700;
  /* .18em partia la fila en dos lineas: la columna de texto mide 538 px y con
     ese apretado la cadena pedia 558. Se cierra el tracking en vez de bajar el
     cuerpo, que a 11px ya esta en el limite de lo comodo. */
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  /* Mismo motivo que .hero-rd-sub: fijo, no theme-aware. var(--outline) se
     invertia a gris oscuro en tema claro y desaparecia sobre el video. */
  color: rgba(255, 255, 255, .55);
}

.hero-rd-spec li + li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
}

/* ---------- Botones de vidrio ---------- */
/* El primario era blanco sólido y tapaba el video justo donde más se ve. */

#paradox.hero-redesign .btn-primary {
  background: var(--hero-btn-glass);
  color: #fff;
  border: 1px solid var(--hero-btn-glass-border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 8px 24px -12px rgba(0, 0, 0, .7);
}

#paradox.hero-redesign .btn-primary:hover {
  background: var(--hero-btn-glass-hover);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}

#paradox.hero-redesign .btn-ghost {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  /* .btn-ghost usa var(--on-surface), que en tema claro se invierte a casi
     negro. Se me paso al escribir la regla: fijaba fondo y borde pero no la
     tinta, asi que el texto seguia al tema y desaparecia sobre el video. */
  color: rgba(255, 255, 255, .92);
}

#paradox.hero-redesign .btn-ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .25);
}

/* ---------- Nav transparente sobre el hero ---------- */
/* La barra tintada se leía como una banda pegada encima del video, porque el
   velo del hero ya oscurece esa franja y la barra añadía un segundo escalón de
   color. El fondo aparece al desplazarse, que es cuando hace falta. */

body.home-redesign > header:not(.scrolled) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-rd-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  /* En vertical el hero acumulaba dos insignias, titular, parrafo, dos botones,
     el riel de tres datos y la tarjeta: demasiadas voces compitiendo en una
     pantalla. La primera insignia repite lo que ya dicen el titular y el
     parrafo, asi que se retira; la de "sistema en linea" se queda porque
     aporta algo que el texto no dice y ademas esta viva. */
  .hero-rd-top .chip:first-child { display: none; }
  .hero-rd-inner { gap: 24px; }
  .hero-rd-copy { gap: 20px; }

  /* El riel baja de tamano y se aprieta: sigue estando, pero deja de pelear
     con los botones por la atencion. */
  .hero-rd-spec {
    padding-top: 14px;
    gap: 8px 16px;
  }
  .hero-rd-spec li { font-size: 10px; letter-spacing: .14em; }
  .hero-rd-spec li + li::before { left: -9px; }

  /* Ya no hace falta encajar el fotograma entero a mano: aquí se sirve una
     version vertical propia (ver el <source media> en la vista), así que cover
     vuelve a ser lo correcto y el video llena la pantalla sin perder la marca. */

  /* El velo está calibrado para el hero alto de escritorio, donde el texto cae
     en la banda oscura del 75-100 %. En móvil el contenido arranca arriba,
     sobre la zona iluminada del video, y el subtítulo quedaba ilegible. */
  .hero-rd-overlay {
    background: linear-gradient(
      rgba(var(--hero-bg-rgb), .60) 0%,
      rgba(var(--hero-bg-rgb), .72) 18%,
      rgba(var(--hero-bg-rgb), .74) 60%,
      rgba(var(--hero-bg-rgb), .86) 82%,
      rgb(var(--hero-bg-rgb)) 100%);
  }
}

@media (max-width: 560px) {
  .hero-rd-inner {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* Antes: `.hero-rd-cta > * { width: 100% }`. Dos botones a ancho completo
     apilados leian como un formulario, no como una eleccion, y el primario
     -- con etiqueta larga -- se convertia en una franja enorme a media
     pantalla. En fila comparten el peso y ninguno domina. */
  .hero-rd-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .hero-rd-cta > * {
    flex: 1 1 auto;
    min-height: 46px;
    padding-inline: 14px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* La tarjeta pasa a ancho completo: aqui no hay sitio para que flote.
     Las reglas base de .bot-card viven mas abajo en este archivo, asi que
     los ajustes moviles se repiten alli dentro de su propio @media -- si
     se quedaran solo aqui, la cascada los perderia. */

  .bot-card-face { width: 62px; height: 62px; }
  .bot-card-title { font-size: 15px; }
  .bot-card-cta { min-height: 36px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rd-bg video { display: none; }
}

/* ============================================================
   ZONA DE VIDRIO SOBRE EL VIDEO

   El hero original resolvía el tema claro con un shader que cambiaba de
   paleta (uniforme u_theme): fondo claro, tinta oscura, todo coherente.
   Aquí el fondo es un video que NO cambia con el tema — siempre es oscuro.

   Así que en vez de ir parcheando token por token, la regla es una sola:
   todo lo que se apoya sobre el video se pinta como vidrio oscuro, en los
   dos temas. Es lo que el tema claro del sitio no puede saber por sí solo,
   porque desde su punto de vista esto debería ser una zona clara.

   Fuera del hero el tema claro sigue funcionando intacto.
   ============================================================ */

/* ---------- Barra de navegación mientras flota sobre el hero ---------- */
/* Solo en reposo. Al desplazarse la barra recupera su fondo propio y detrás
   ya pasa la página — ahí el tema del sitio manda y no hay que tocar nada. */

body.home-redesign > header:not(.scrolled) a,
body.home-redesign > header:not(.scrolled) button {
  color: rgba(255, 255, 255, .92);
}

/* Los enlaces secundarios van algo más apagados que el activo, igual que en
   el diseño original — lo que cambia es la base, no la jerarquía. */
body.home-redesign > header:not(.scrolled) nav a {
  color: rgba(255, 255, 255, .62);
}

body.home-redesign > header:not(.scrolled) nav a:hover,
body.home-redesign > header:not(.scrolled) nav a.is-active {
  color: #fff;
}

/* Trazos de los iconos (hamburguesa, sol/luna): heredan currentColor donde
   se puede, pero los que traen stroke fijo hay que forzarlos. */
body.home-redesign > header:not(.scrolled) svg {
  stroke: currentColor;
}

body.home-redesign > header:not(.scrolled) #theme-toggle,
body.home-redesign > header:not(.scrolled) .btn-primary,
body.home-redesign > header:not(.scrolled) [href*="wa.me"] {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* ============================================================
   TARJETA DEL BOT — reemplaza al mini-chat del hero
   Patron de "tarjeta de contacto": retrato + nombre + rol + accion.
   Toda la superficie es un enlace, asi que no hay un boton diminuto
   dentro de una tarjeta que ya es pulsable.
   ============================================================ */
.bot-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  padding: 14px 20px 14px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(12, 13, 16, .72);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 24px 48px -28px rgba(0, 0, 0, .9);
  text-decoration: none;
  transition:
    transform 140ms cubic-bezier(.2, 0, 0, 1),
    border-color 220ms ease,
    background-color 220ms ease;
}

/* El retrato sale de la escena Spline, que es casi negra: sin un fondo
   propio algo mas claro el robot se disolveria dentro de la tarjeta. */
.bot-card-face {
  width: 74px;
  height: 74px;
  flex: none;
  border-radius: 14px;
  object-fit: cover;
  object-position: center 22%;
  background: #16181d;
}

.bot-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bot-card-title {
  margin: 0;
  font-family: var(--font-display), sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
}

.bot-card-role {
  margin: 0;
  font-family: var(--font-display), sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* Blanco solido: en la referencia es el unico elemento claro de la
   composicion, y es lo que lo hace legible como accion y no como texto. */
.bot-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: 7px;
  padding: 0 16px;
  border-radius: 9px;
  background: #fff;
  color: #0a0a0a;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: background-color 220ms ease;
}

.bot-card:focus-visible {
  outline: 3px solid var(--laser-green);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .bot-card:hover {
    border-color: rgba(255, 255, 255, .26);
    background: rgba(16, 18, 23, .82);
  }
  .bot-card:hover .bot-card-cta { background: #f0f0f0; }
}

.bot-card:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .bot-card { transition: none; }
  .bot-card:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .bot-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(16, 18, 23);
  }
}

@media (prefers-contrast: more) {
  .bot-card {
    background: rgb(9, 9, 11);
    border-color: rgba(255, 255, 255, .48);
  }
  .bot-card-role { color: rgba(255, 255, 255, .82); }
}

/* Ajustes moviles de la tarjeta. Van aqui, despues de las reglas base,
   porque el bloque @media de mas arriba en este archivo pierde la cascada
   frente a ellas: mismo peso de selector, pero definidas antes. */
@media (max-width: 560px) {
  .bot-card {
    width: 100%;
    gap: 13px;
    padding: 12px 14px;
  }

  .bot-card-face { width: 62px; height: 62px; }
  .bot-card-title { font-size: 15px; }
  .bot-card-role { font-size: 9px; }
  .bot-card-cta { min-height: 36px; font-size: 12px; }

  /* El riel de tres datos repite lo que ya dicen la seccion de proceso y el
     CTA final. En vertical era la linea que empujaba la tarjeta fuera de la
     primera pantalla, y ahora la tarjeta importa mas que el riel. */
  .hero-rd-spec { display: none; }
}

/* ============================================================
   PASADA DE OFICIO — criterios de Apple (Designing Fluid Interfaces)

   Este archivo solo se carga en la portada, asi que todo lo de aqui se
   queda en ella y no toca las paginas interiores.
   ============================================================ */

/* ---------- 1. Respuesta al toque ----------
   El sitio anima transform en 250 ms, y ese mismo transform es el que hace
   de acuse de pulsacion (:active). 250 ms es una eternidad para un toque:
   la mano ya solto y el boton sigue encogiendose. La regla es que el acuse
   sea inmediato y el resto (hover, color, sombra) puede tomarse su tiempo.

   Se separa: transform en 110 ms, lo demas se queda como estaba. */

#paradox.hero-redesign .btn-primary,
#paradox.hero-redesign .btn-ghost,
#paradox.hero-redesign .chip,
body.home-redesign > header .btn-primary,
body.home-redesign > header #theme-toggle,
body.home-redesign > header [href*="wa.me"] {
  transition:
    transform 110ms cubic-bezier(.2, 0, 0, 1),
    background-color 250ms ease,
    border-color 250ms ease,
    color 250ms ease,
    box-shadow 250ms ease;
}

/* Al soltar vuelve algo mas lento que al pulsar: bajar es la accion del
   usuario y tiene que ser instantanea; subir es la respuesta del sistema y
   una vuelta seca se lee como un rebote mecanico. */
#paradox.hero-redesign .btn-primary:active,
#paradox.hero-redesign .btn-ghost:active {
  transition-duration: 60ms;
}

/* ---------- 2. Sin transparencia ----------
   Hay nueve backdrop-filter en la portada. Quien pide menos transparencia
   normalmente lo hace porque el desenfoque le dificulta leer, asi que la
   respuesta correcta no es quitar el desenfoque y dejar el fondo al 10 %:
   es volver opacas las superficies. */

@media (prefers-reduced-transparency: reduce) {
  #paradox.hero-redesign .btn-primary,
  #paradox.hero-redesign .btn-ghost,
  #paradox.hero-redesign .chip,
  body.home-redesign > header:not(.scrolled) #theme-toggle,
  body.home-redesign > header:not(.scrolled) .btn-primary,
  body.home-redesign > header:not(.scrolled) [href*="wa.me"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 22, 27, .92);
    border-color: rgba(255, 255, 255, .28);
  }

  /* El velo sube para que el texto no dependa de lo que haga el video. */
  .hero-rd-overlay {
    background: linear-gradient(
      rgba(var(--hero-bg-rgb), .78) 0%,
      rgba(var(--hero-bg-rgb), .70) 30%,
      rgba(var(--hero-bg-rgb), .92) 62%,
      rgb(var(--hero-bg-rgb)) 100%);
  }
}

/* ---------- 3. Mas contraste ----------
   Fondos casi solidos y bordes definidos, que es lo que pide la senal. */

@media (prefers-contrast: more) {
  #paradox.hero-redesign .btn-primary,
  #paradox.hero-redesign .btn-ghost,
  #paradox.hero-redesign .chip {
    background: rgba(9, 9, 11, .94);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
  }

  .hero-rd-sub { color: #fff; }
  .hero-rd-spec li { color: rgba(255, 255, 255, .85); }
}

/* ---------- 4. Borde de la barra sobre el hero ----------
   Mientras flota sobre el video, la barra llevaba una linea de 1 px cruzando
   la imagen. Una linea dura sobre contenido marca una frontera que en
   realidad no existe: ahi no empieza otra seccion, es la misma imagen
   siguiendo por debajo. Se cambia por un desvanecido corto, que separa lo
   justo para que se lea el nav sin partir la escena.

   Al desplazarse la barra recupera su borde: ahi si separa dos cosas
   distintas -- la barra y el contenido que pasa por debajo. */

body.home-redesign > header:not(.scrolled) {
  border-bottom-color: transparent;
}

body.home-redesign > header:not(.scrolled)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(rgba(var(--hero-bg-rgb), .22), transparent);
}