/* ==========================================================================
   HERO DE LA PORTADA - REITOR
   --------------------------------------------------------------------------
   Rediseno del bloque de entrada de index.html. Sale del paquete
   "hero-reitor-video", adaptado a este sitio en tres cosas:

   1. NO trae cabecera. El paquete incluia una barra de navegacion de mentira;
      aqui manda la de siempre, con su submenu de calculadoras -que escribe
      generar-seo.py-, su campana y su menu orbital.

   2. La cabecera de este sitio es FIJA. El hero empieza en y=0 y lleva el
      desplazamiento en el padding de su propio contenido, no en un margen.
      Asi el fondo azul pasa por debajo de la barra -que tambien es azul- y no
      puede aparecer la linea blanca que ya nos salio una vez en el blog.

   3. El video es el que ya habia: assets/videos/reitorvideo.mp4, con su
      poster. No se anade JavaScript: reproduce solo, en bucle y sin sonido.

   Esta hoja la carga UNICAMENTE index.html. No entra en css/paginas.css
   porque ninguna pagina generada tiene hero.
   ========================================================================== */

.rv-hero {
  /* El mismo azul que la cabecera (--azul-oscuro de css/styles.css).
     Tienen que ser el mismo valor para que el marco parezca salir de la
     barra en vez de ser una pieza pegada debajo. */
  --rv-navy: #0b1e3b;
  --rv-navy-2: #0b2b54;
  --rv-lime: #8bcb28;
  --rv-lime-dark: #69b20a;
  --rv-ink: #092348;
  --rv-line: #dce5ed;
  --rv-claro: #f9fbfc;
  --rv-suave: #5a6b83;

  /* Alto de la cabecera fija. El marco y el video arrancan por debajo, igual
     que en la referencia del disenador, donde la barra era estatica y el
     dibujo empezaba justo debajo. El FONDO del hero si sigue empezando en
     y=0, para que el azul pase por detras de la barra -que tambien es azul-
     y no pueda aparecer una linea clara entre las dos. */
  --rv-cabecera: 82px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--rv-navy);

  /* El marco es un SVG de 1600x840 -relacion 1.905- con
     preserveAspectRatio="none": se estira a lo que mida el hero. Con
     min-height:100svh a secas, una pantalla de 1440x900 lo estiraba un 19%
     y una de 1280x1024 un 52%: el octogono se alargaba y el grosor de la
     banda dejaba de ser uniforme, que es justo el defecto que se veia.

     Atando el alto al ancho, la relacion se queda en 1.85 en cualquier
     pantalla y la deformacion no pasa del 3%. El min() evita que en una
     pantalla muy ancha el hero sea mas alto que la ventana. */
  min-height: min(100svh, max(660px, 54vw));
}

/* ------------------------------------------------------------ El video */

/* El contenedor cubre TODO el hero y se recorta a la ventana definida por
   #rvVentana (esta en index.html). Asi el video vive dentro del marco en vez
   de ocupar el rectangulo entero y depender de que el trazo del SVG lo tape:
   el borde del video y el del marco son ahora la misma linea a cualquier
   tamano de ventana. */
.rv-hero__media {
  position: absolute;
  z-index: 0;
  inset: var(--rv-cabecera) 0 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, #0b315f, #06182f);
  clip-path: url(#rvVentana);
}

/* El video sigue encuadrado desde el 48%: el recorte de arriba solo le quita
   los bordes, no cambia como se ve la imagen. */
.rv-hero__video,
.rv-hero__fallback,
.rv-hero__tint {
  position: absolute;
  inset: 0 0 0 48%;
  width: 52%;
  height: 100%;
}

.rv-hero__video {
  z-index: 1;
  display: block;
  object-fit: cover;
}

/* Lo que se ve mientras el video decodifica, y si no llega a cargar. */
.rv-hero__fallback {
  z-index: 0;
  background:
    radial-gradient(circle at 72% 30%, rgba(139, 203, 40, 0.18), transparent 28%),
    linear-gradient(135deg, #0c376a, #06172f);
  background-size: 140% 140%;
  animation: rvFondo 8s ease-in-out infinite alternate;
}

.rv-hero__fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* El tinte del paquete oscurecia el video de izquierda a derecha. Justo el
   borde que toca la banda quedaba mas oscuro, que es donde MENOS conviene:
   la banda y el video se confundian. Ahora aclara un poco ese lado y deja
   la caida oscura para el extremo derecho, lejos del marco. */
.rv-hero__tint {
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(150, 185, 225, 0.14) 0%,
    rgba(11, 30, 59, 0) 22%,
    rgba(11, 30, 59, 0.3) 100%
  );
}

@keyframes rvFondo {
  to {
    background-position: 100% 80%;
  }
}

/* ------------------------------------------------------------- El marco

   La pieza clara con la cuadricula y la columna curva. Es un SVG estirado
   (preserveAspectRatio="none") que se recorta solo al ancho que haya. Va por
   encima del video y por debajo del texto, y no captura el raton. */

.rv-hero__marco {
  position: absolute;
  z-index: 3;
  /* La MISMA caja que .rv-hero__media: el recorte del video va en unidades
     objectBoundingBox, asi que las dos figuras solo encajan si comparten
     caja exactamente. */
  /* En un <img> -elemento reemplazado- poner top y bottom con height:auto
     NO estira la caja: se usa la altura intrinseca y se ignora bottom. Hay
     que calcular el alto a mano. */
  top: var(--rv-cabecera);
  left: 0;
  width: 100%;
  height: calc(100% - var(--rv-cabecera));
  pointer-events: none;

  /* Sombra sobre el video, para que la banda no se pierda.
     ------------------------------------------------------------------
     La banda es #071B36 y el fondo del plato del video es (6,14,34): una
     diferencia de 20 sobre 255. Medido, se leian como una sola mancha y la
     linea lima parecia flotar sin banda alrededor -de ahi la sensacion de
     desalineado, porque la geometria estaba exacta al pixel-.

     drop-shadow sigue la silueta recortada, no la caja, asi que la sombra
     cae exactamente por el borde interior del marco sea cual sea el video
     que se ponga manana. */
  /* Sombra suave sobre el video, para dar profundidad al marco como en la
     maqueta. drop-shadow sigue la silueta recortada, no la caja.

     Se probo tambien un filo claro de 1.5px para separar la banda del video
     cuando el video es oscuro: con la banda estrecha ayudaba, pero al
     ensancharla a 83 el filo se veia como un borde blanco dentado sobre la
     diagonal. Peor el remedio; queda solo la sombra. */
  filter: drop-shadow(5px 0 14px rgba(2, 10, 24, 0.6));
}

/* ---------------------------------------------------------- El contenido */

.rv-hero__contenido {
  position: relative;
  z-index: 5;
  /* 52% y no 49%, y el margen izquierdo algo mas corto: con los valores del
     paquete, entre 1200 y 1500px de ancho la columna se quedaba en 602px
     utiles y "para hacer crecer" se partia en dos lineas. El titular tiene
     que caber en tres lineas exactas, como en el diseno. */
  width: min(52%, 810px);
  /* 96px de hueco para la cabecera fija. Va aqui y no como margen del hero
     para que el fondo siga empezando en y=0. */
  padding: calc(var(--rv-cabecera) + clamp(28px, 6vh, 60px)) 0 42px clamp(32px, 6.2vw, 150px);
}

.rv-hero__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  color: var(--rv-lime-dark);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rv-hero__kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--rv-lime-dark);
}

.rv-hero h1 {
  max-width: 690px;
  margin: 0;
  color: var(--rv-ink);
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.rv-hero h1 span {
  position: relative;
  display: inline-block;
  color: var(--rv-lime-dark);
}

.rv-hero h1 span img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  width: 100%;
  height: 14px;
}

.rv-hero__lead {
  max-width: 560px;
  margin: 30px 0 0;
  color: var(--rv-ink);
  font-size: 19px;
  line-height: 1.6;
}

/* -------------------------------------------------------------- Botones */

.rv-hero__acciones {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-top: 32px;
}

.rv-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 34px;
  border-radius: 6px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.rv-boton:hover {
  transform: translateY(-2px);
}

.rv-boton--primario {
  color: #fff;
  background: linear-gradient(100deg, var(--rv-lime-dark), var(--rv-lime));
  box-shadow: 0 10px 26px rgba(105, 178, 10, 0.2);
}

.rv-boton--texto {
  padding-inline: 0;
  color: var(--rv-ink);
}

.rv-boton--texto svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}

.rv-boton--texto:hover svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------- Garantias */

.rv-garantias {
  width: min(660px, 100%);
  margin-top: 30px;
  padding: 15px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border: 1px solid var(--rv-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11, 30, 59, 0.08);
}

.rv-garantias > div {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-right: 1px solid var(--rv-line);
  color: var(--rv-ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.rv-garantias > div:last-child {
  border-right: 0;
}

.rv-garantias svg {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--rv-lime-dark);
}

.rv-confianza {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  color: var(--rv-ink);
  font-size: 14px;
  font-weight: 600;
}

.rv-confianza svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--rv-lime-dark);
}

/* ------------------------------------------------------------- La prueba */

/* La tarjeta del +300 es la hermana pequena de la barra de garantias: mismo
   borde, mismo radio, mismos iconos lima con su filete separador. Antes tenia
   radio 18, sombra de 55px y un icono de 52: pesaba mas que ningun otro
   elemento de la pagina y encima tapaba media cara del video.

   Ahora ocupa la mitad y se apoya en el mismo lenguaje que el resto. */
.rv-prueba {
  position: absolute;
  z-index: 6;
  /* La esquina inferior derecha de la VENTANA la ocupan tres elementos
     position:fixed -boton de WhatsApp, burbuja del asistente y su globo-.
     La tarjeta se aparta por los dos lados. Medido: el mas alto de los tres
     empieza a 160px del borde inferior de la ventana. Con 16% -o 120px- la
     tarjeta queda por encima con holgura en todas las resoluciones que se
     probaron; con 14% se quedaba a 5px en pantallas de 1670 de ancho. */
  right: clamp(120px, 10%, 220px);
  bottom: max(16%, 120px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--rv-line);
  border-radius: 12px;
  /* Algo mas marcada que la de las garantias (.08): esta se apoya sobre el
     video, no sobre el fondo claro. */
  box-shadow: 0 14px 34px rgba(11, 30, 59, 0.22);
}

.rv-prueba > svg {
  flex: none;
  width: 30px;
  height: 30px;
  padding-right: 14px;
  border-right: 1px solid var(--rv-line);
  color: var(--rv-lime-dark);
}

.rv-prueba span {
  color: var(--rv-suave, #5a6b83);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.rv-prueba strong {
  display: block;
  margin-bottom: 1px;
  color: var(--rv-ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ========================================================== Pantallas medias */

@media (max-width: 1200px) {
  .rv-hero__contenido {
    padding-left: 54px;
  }

  .rv-hero h1 {
    font-size: 58px;
  }

  .rv-garantias {
    max-width: 430px;
  }

  .rv-prueba {
    transform: scale(0.88);
    transform-origin: right bottom;
  }
}

/* ================================================================== Movil

   Por debajo de 900px la columna no cabe al lado: el contenido pasa arriba a
   ancho completo y el video baja, con el borde superior curvado igual que en
   el diseno. El marco vectorial se esconde porque su silueta solo tiene
   sentido en dos columnas. */

@media (max-width: 900px) {
  .rv-hero {
    min-height: 0;
    overflow: hidden;
    background: var(--rv-claro);
    /* El video es el PRIMER hijo en el marcado porque en escritorio va
       absoluto de fondo. Al pasarlo a flujo normal aparecia encima del
       titular; con flex y order se coloca debajo sin mover el marcado, que
       en escritorio tiene que seguir estando delante. */
    display: flex;
    flex-direction: column;
  }

  .rv-hero__contenido {
    order: 1;
  }

  .rv-hero__media {
    order: 2;
  }

  .rv-hero__marco {
    display: none;
  }

  .rv-hero__contenido {
    width: 100%;
    padding: calc(var(--rv-cabecera) + 32px) 24px 36px;
  }

  /* En telefono la cabecera mide menos y el marco no se pinta. */
  .rv-hero {
    --rv-cabecera: 76px;
  }

  .rv-hero h1 {
    font-size: clamp(38px, 11vw, 60px);
  }

  .rv-hero__lead {
    font-size: 17px;
  }

  /* En telefono el bloque del video deja de ser el fondo de dos columnas y
     pasa a ser una pieza propia, a lo ancho.

     Hay que APAGAR dos cosas de escritorio que se colaban:
       - el clip-path, que recorta con la silueta del marco y en una caja
         apaisada dejaba un corte diagonal sin sentido;
       - el encuadre del video a partir del 48%, que dejaba la mitad
         izquierda del bloque con el degradado de fondo y el video espachurrado
         en la derecha (medido: 203px de video en un bloque de 390). */
  .rv-hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(78vw, 440px);
    clip-path: none;
    /* La curva del diseno. Con border-radius en vez de clip-path porque una
       elipse asi no se puede describir con polygon(). */
    border-radius: 58% 0 0 0 / 24% 0 0 0;
    overflow: hidden;
    background: var(--rv-navy);
  }

  /* El video se mete 13px por el lado curvo para que asome el azul del
     bloque: asi en telefono tambien hay banda y filete lima entre el marco y
     la imagen, igual que en escritorio, en vez de que el video llegue pelado
     hasta el borde.

     Las medidas van explicitas -no inset con height:auto- porque en un
     elemento reemplazado como <video> el navegador ignora "bottom" y usa la
     altura intrinseca. */
  .rv-hero__video,
  .rv-hero__fallback,
  .rv-hero__tint {
    top: 13px;
    left: 13px;
    width: calc(100% - 13px);
    height: calc(100% - 13px);
    border-radius: 56% 0 0 0 / 22% 0 0 0;
    overflow: hidden;
  }

  /* De frente y sin tanto oscurecido: en un movil el video es el unico
     elemento grafico que hay, no el fondo de un titular. */
  .rv-hero__tint {
    background: linear-gradient(
      180deg,
      rgba(11, 30, 59, 0.28) 0%,
      rgba(11, 30, 59, 0) 32%
    );
  }

  /* La linea lima que recorre el borde curvo */
  /* El filete lima recorriendo la curva, como en escritorio. Va por dentro
     del borde, no encima, para que se lea como parte del marco. */
  .rv-hero__media::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 6px 0 auto 6px;
    height: 34%;
    border-top: 3px solid var(--rv-lime);
    border-left: 3px solid var(--rv-lime);
    border-radius: 58% 0 0 0 / 100% 0 0 0;
    pointer-events: none;
  }

  /* En movil la tarjeta deja de ser absoluta y entra en la columna, entre el
     texto y el video, tirada hacia abajo para montarse sobre el arranque del
     azul igual que en el diseno. Absoluta no valia: al pasar el hero a flex
     su "bottom" caia al final de todo el bloque, no encima del video. */
  /* A la IZQUIERDA, no a la derecha como en la maqueta de escritorio: en
     telefono la esquina inferior derecha la ocupa el boton del menu orbital
     (.orbit-nav__trigger, z-index 11003), que es la navegacion principal del
     movil y tiene que poder pulsarse siempre. La tarjeta cede el sitio. */
  .rv-prueba {
    position: relative;
    z-index: 7;
    order: 2;
    inset: auto;
    align-self: flex-start;
    width: 220px;
    min-height: 110px;
    margin: 0 auto -58px 20px;
    padding: 18px;
    transform: none;
  }

  .rv-hero__media {
    order: 3;
  }

  /* En movil las tres garantias van en fila, con el icono encima del texto:
     es lo que pide el diseno y ademas es lo unico que cabe. */
  .rv-garantias {
    max-width: none;
    padding: 16px 8px;
  }

  .rv-garantias > div {
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
  }
}

@media (max-width: 560px) {
  .rv-hero__kicker {
    font-size: 11px;
    line-height: 1.35;
  }

  .rv-hero h1 {
    font-size: 40px;
  }

  .rv-hero__acciones {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .rv-boton--primario {
    width: 100%;
  }

  .rv-boton--texto {
    min-height: 42px;
  }

  .rv-garantias > div {
    font-size: 12px;
  }

  .rv-prueba {
    width: 190px;
  }

  .rv-prueba span {
    font-size: 14px;
  }

  .rv-prueba strong {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv-hero__fallback {
    animation: none;
  }

  .rv-boton,
  .rv-boton--texto svg {
    transition: none;
  }
}

/* ==================================================================
   FRANJA SUPERIOR QUE SE FUNDE (navbar "isla flotante")
   ------------------------------------------------------------------
   Con la barra antigua, que era una franja azul a todo lo ancho, el hero
   dejaba 82px de su fondo azul arriba para que la barra pareciera salir
   del marco. Con la cápsula flotante esa franja cortaba la página en
   línea recta y la cápsula parecía pegada encima.

   Ahora el marco y el video suben hasta arriba (y=0) y el azul baja como
   un degradado que se disuelve sobre el fondo claro. La cápsula, que es
   lo más oscuro y nítido de esa zona, queda como protagonista.

   Solo en dos columnas (desde 901px): por debajo el marco no se pinta y
   el hero ya empieza en claro.

   .rv-hero__media y .rv-hero__marco se mueven JUNTOS: el recorte del
   video va en unidades de su caja y solo encaja con el marco si las dos
   comparten caja exactamente.
   ================================================================== */

@media (min-width: 901px) {
  .rv-hero__media {
    inset: 0;
  }

  .rv-hero__marco {
    top: 0;
    height: 100%;
  }

  /* El titular baja un poco para dejar respirar el degradado. */
  .rv-hero__contenido {
    padding-top: calc(var(--rv-cabecera) + clamp(48px, 9vh, 92px));
  }

  .rv-hero::after {
    content: "";
    position: absolute;
    z-index: 4; /* sobre el marco (3), bajo el texto (5) */
    top: 0;
    left: 0;
    right: 0;
    height: clamp(170px, 22vh, 220px);
    pointer-events: none;
    background:
      /* Halo lima muy suave detrás de la cápsula */
      radial-gradient(620px 130px at 50% 0, rgba(141, 198, 63, 0.14), transparent 70%),
      linear-gradient(
        180deg,
        var(--rv-navy) 0%,
        var(--rv-navy) 26%,
        rgba(11, 30, 59, 0.82) 44%,
        rgba(11, 30, 59, 0.38) 68%,
        rgba(11, 30, 59, 0.12) 86%,
        rgba(11, 30, 59, 0) 100%
      );
  }
}