/* ==========================================================================
   iLESSO — Hero principal dividido 50/50   "Soy Persona" | "Soy Empresa"

   Regla de color pedida por el cliente: cada mitad se pinta con el color al
   que pertenece y sus controles internos usan el color contrario, de modo que
   el contraste nazca del propio panel.
     · Soy Persona → fondo crema  + texto azul   + botón azul con letra ámbar
     · Soy Empresa → fondo azul   + texto ámbar  + botón ámbar con letra azul

   Capas de cada mitad (z-index explícito para que el orden nunca dependa del
   orden del marcado):
     0 · foto de fondo   1 · lavado de color   2 · velo de atenuación
     3 · superficie pulsable   4 · contenido   20 · sello central
   ========================================================================== */

.hero-split {
  /* Paleta local: el componente es autocontenido y no depende de Tailwind
     para pintar, aunque comparte exactamente los mismos valores de marca. */
  --hs-crema: #FDF4E3;
  --hs-crema-alt: #F6E7C6;
  --hs-crema-card: #FFFCF5;
  --hs-borde: #E7D3A8;
  --hs-azul: #122937;
  --hs-azul-hondo: #0B2A5B;
  --hs-azul-noche: #0a1a26;
  --hs-azul-suave: #2c414b;
  --hs-ambar: #f3a946;
  --hs-ambar-hover: #e2942d;

  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  background-color: var(--hs-crema);
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   MITADES
   -------------------------------------------------------------------------- */

.hero-plate {
  position: relative;
  display: flex;
  min-width: 0;                 /* sin esto el texto largo rompería el 50/50 */
  padding: clamp(1.5rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3.25rem);
  overflow: visible;            /* el sello asoma fuera de la mitad izquierda */
  scroll-margin-top: 5rem;      /* la barra superior es sticky (h-20) */
  transition: min-height 0.4s ease;
}

/* La izquierda va por encima para que el sello monte sobre la otra mitad. */
.hero-plate--persona { z-index: 2; background-color: var(--hs-crema); color: var(--hs-azul); }
.hero-plate--empresa { z-index: 1; background-color: var(--hs-azul);  color: #ffffff; }

/* Capa 0 · foto. Es textura, no protagonista: el lavado de encima la deja
   apenas insinuada para que el panel se lea como color plano. */
.hero-plate__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-plate__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-plate--persona .hero-plate__media img { object-position: center 30%; }
.hero-plate--empresa .hero-plate__media img { object-position: center 35%; }

/* Capa 1 · lavado de color fuerte (lo que garantiza el contraste del texto). */
.hero-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-plate--persona::before {
  background:
    radial-gradient(90% 60% at 12% 8%, rgba(243, 169, 70, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(253, 244, 227, 0.96) 0%, rgba(253, 244, 227, 0.90) 45%, rgba(246, 231, 198, 0.94) 100%);
}
.hero-plate--empresa::before {
  background:
    radial-gradient(85% 60% at 88% 6%, rgba(243, 169, 70, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(18, 41, 55, 0.94) 0%, rgba(11, 42, 91, 0.88) 55%, rgba(10, 26, 38, 0.95) 100%);
}

/* Capa 2 · velo de atenuación de la mitad que NO tiene el cursor. */
.hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.hero-plate--persona::after { background: rgba(18, 41, 55, 0.12); }
.hero-plate--empresa::after { background: rgba(4, 12, 20, 0.35); }

/* Capa 3 · toda la mitad es pulsable en escritorio. Es un botón hermano del
   resto de controles: así se cubre la mitad entera sin anidar botones. */
.hero-plate__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.hero-plate__hit:focus-visible { outline: 3px solid var(--hs-azul); outline-offset: -10px; border-radius: 0.5rem; }
.hero-plate--empresa .hero-plate__hit:focus-visible { outline-color: var(--hs-ambar); }

/* Capa 4 · contenido. Inerte al puntero salvo sus controles reales, para que
   el clic sobre el texto caiga en la superficie pulsable de la mitad. */
.hero-plate__content {
  position: relative;
  z-index: 4;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   CABECERA DE CADA MITAD (icono + título + gancho)
   -------------------------------------------------------------------------- */

.hero-plate__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.hero-plate__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 14px 30px -14px rgba(10, 26, 38, 0.55);
}
.hero-plate__icon svg,
.hero-plate__icon i { width: 1.7rem; height: 1.7rem; }
/* Icono al color contrario del panel: refuerza la regla de identidad. */
.hero-plate--persona .hero-plate__icon { background: var(--hs-azul);  color: var(--hs-ambar); }
.hero-plate--empresa .hero-plate__icon { background: var(--hs-ambar); color: var(--hs-azul); }

.hero-plate__eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}
.hero-plate--persona .hero-plate__eyebrow {
  background: var(--hs-ambar);
  color: var(--hs-azul);
}
.hero-plate--empresa .hero-plate__eyebrow {
  background: rgba(243, 169, 70, 0.14);
  border: 1px solid rgba(243, 169, 70, 0.42);
  color: var(--hs-ambar);
}

.hero-plate__title {
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.4rem, 8.5vw, 4.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-plate--persona .hero-plate__title { color: var(--hs-azul); }
.hero-plate--empresa .hero-plate__title { color: var(--hs-ambar); }

.hero-plate__tagline {
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  line-height: 1.5;
  max-width: 26rem;
  font-weight: 500;
}
.hero-plate--persona .hero-plate__tagline { color: var(--hs-azul-suave); }
.hero-plate--empresa .hero-plate__tagline { color: rgba(255, 255, 255, 0.84); }

.hero-plate__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-plate--persona .hero-plate__hint { color: var(--hs-azul-suave); }
.hero-plate--empresa .hero-plate__hint { color: rgba(255, 255, 255, 0.72); }
.hero-plate__hint-desk { display: none; }
.hero-plate__chev,
.hero-plate__hint svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; }
.hero-plate.is-open .hero-plate__chev { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   TARJETA DE SERVICIOS
   -------------------------------------------------------------------------- */

.hero-plate__panel { pointer-events: auto; }

.hero-card {
  margin-top: 1.15rem;
  padding: clamp(1rem, 3.5vw, 1.4rem);
  border-radius: 1.1rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Persona: tarjeta crema con letra azul (mismo bando que su mitad). */
.hero-plate--persona .hero-card {
  background: var(--hs-crema-card);
  border: 1px solid var(--hs-borde);
  color: var(--hs-azul);
  box-shadow: 0 24px 45px -28px rgba(18, 41, 55, 0.65);
}
/* Empresa: tarjeta azul con letra blanca. */
.hero-plate--empresa .hero-card {
  background: rgba(8, 22, 34, 0.62);
  border: 1px solid rgba(243, 169, 70, 0.3);
  color: #ffffff;
  box-shadow: 0 24px 45px -28px rgba(0, 0, 0, 0.85);
}

.hero-card__title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-plate--persona .hero-card__title { color: var(--hs-azul-suave); }
.hero-plate--empresa .hero-card__title { color: var(--hs-ambar); }

.hero-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;          /* rueda cuando la ventana es baja */
  overscroll-behavior: contain;
}
/* La barra va teñida al color de cada mitad: con el gris del sistema no se
   distingue sobre la tarjeta azul y el usuario no vería que la lista sigue. */
.hero-plate--persona .hero-card__list { scrollbar-color: var(--hs-azul-suave) transparent; }
.hero-plate--empresa .hero-card__list { scrollbar-color: var(--hs-ambar) rgba(255, 255, 255, 0.08); }
.hero-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
/* Separadores finos entre servicios, como en el mockup. */
.hero-plate--persona .hero-card__list li + li { border-top: 1px solid rgba(231, 211, 168, 0.85); }
.hero-plate--empresa .hero-card__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* Viñetas ámbar en ambas mitades (es el acento común de la marca). */
.hero-dot {
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.42rem;
  border-radius: 50%;
  flex: none;
  background: var(--hs-ambar);
  box-shadow: 0 0 0 3px rgba(243, 169, 70, 0.18);
}

/* Botón "Ingresar": color contrario al de su mitad. */
.hero-enter {
  margin-top: 1rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: 0.85rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-enter svg,
.hero-enter i { width: 1.05rem; height: 1.05rem; transition: transform 0.2s ease; }
.hero-enter:hover { transform: translateY(-2px); }
.hero-enter:hover svg { transform: translateX(4px); }
.hero-enter:active { transform: translateY(0); }
.hero-enter--persona {
  background: var(--hs-azul);
  color: var(--hs-ambar);
  box-shadow: 0 16px 28px -16px rgba(18, 41, 55, 0.9);
}
.hero-enter--persona:hover { background: var(--hs-azul-hondo); }
.hero-enter--persona:focus-visible { outline: 3px solid var(--hs-azul); outline-offset: 3px; }
.hero-enter--empresa {
  background: var(--hs-ambar);
  color: var(--hs-azul);
  box-shadow: 0 16px 28px -16px rgba(243, 169, 70, 0.75);
}
.hero-enter--empresa:hover { background: var(--hs-ambar-hover); }
.hero-enter--empresa:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   ENLACE DE AYUDA INFERIOR
   -------------------------------------------------------------------------- */

.hero-plate__help {
  margin: 1.15rem 0 0;
  font-size: 0.84rem;
  font-weight: 600;
}
.hero-plate--persona .hero-plate__help { color: #4b5a67; }
.hero-plate--empresa .hero-plate__help { color: rgba(255, 255, 255, 0.72); }
.hero-plate__help a,
.hero-linklike {
  pointer-events: auto;          /* el párrafo es inerte; el enlace no */
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.hero-plate--persona .hero-plate__help a { color: var(--hs-azul); }
.hero-plate--empresa .hero-linklike { color: var(--hs-ambar); }
.hero-plate__help a:hover,
.hero-linklike:hover { text-decoration-thickness: 2px; }
.hero-plate__help a:focus-visible,
.hero-linklike:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 0.25rem; }

/* --------------------------------------------------------------------------
   SELLO CENTRAL (isotipo iLESSO sobre la costura)
   -------------------------------------------------------------------------- */

.hero-seal {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: clamp(3.4rem, 12vw, 4.5rem);
  height: clamp(3.4rem, 12vw, 4.5rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #ffffff;
  box-shadow: 0 18px 38px -14px rgba(10, 26, 38, 0.6), 0 0 0 1px rgba(231, 211, 168, 0.9);
  pointer-events: none;          /* insignia de marca, no un control */
}
/* El escudo de marca es más alto que ancho: se ajusta por contención para que
   no se deforme dentro del disco blanco, y se le da algo más de tamaño que al
   isotipo cuadrado anterior porque su silueta ocupa menos área. */
.hero-seal svg,
.hero-seal img {
  width: 78%;
  height: 78%;
  display: block;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   MÓVIL / TABLET (< 1024 px) — dos paneles apilados al 50 % de la altura
   visible y lista en acordeón al tocar.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {

  .hero-plate {
    min-height: 50vh;            /* reserva para navegadores sin svh */
    min-height: 50svh;
  }

  /* La cabecera llena el panel plegado: así toda la mitad responde al toque. */
  .hero-plate__head {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.5rem 0;
  }
  /* Deja aire bajo el sello, que monta sobre el borde superior de la derecha. */
  .hero-plate--empresa { padding-top: clamp(2.75rem, 9vw, 3.75rem); }

  .hero-plate__panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: max-height 0.45s ease, opacity 0.3s ease, transform 0.35s ease;
  }
  .hero-plate.is-open .hero-plate__panel {
    max-height: 48rem;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Al abrir un panel el otro se encoge; nunca hay dos abiertos. */
  .hero-split.has-open .hero-plate:not(.is-open) {
    min-height: 30vh;
    min-height: 30svh;
  }
}

/* --------------------------------------------------------------------------
   ESCRITORIO (>= 1024 px) — mitades exactas al 50 % y tarjeta al pasar
   el cursor, sin mover el layout (la tarjeta es absoluta).
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  .hero-split {
    grid-template-columns: 1fr 1fr;   /* 50 % exacto cada mitad */
    min-height: calc(100vh - 5rem);   /* reserva sin svh */
    min-height: calc(100svh - 5rem);  /* 5rem = alto de la barra sticky */
  }

  .hero-plate__hit { display: block; }

  /* La cabecera queda inerte: el clic pertenece a la mitad completa. */
  .hero-plate__head {
    flex: none;
    cursor: default;
    pointer-events: none;
    padding-top: clamp(0.5rem, 5vh, 3rem);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hero-plate:hover .hero-plate__head { transform: translateY(-6px); }

  .hero-plate__hint-desk { display: inline; }
  .hero-plate__hint-mob  { display: none; }
  .hero-plate__chev      { display: none; }

  /* El gancho y el subtítulo ceden su sitio a la tarjeta: se desvanecen sin
     cambiar de tamaño, así que la cabecera no reflowea. */
  .hero-plate__hint,
  .hero-plate__tagline { transition: opacity 0.3s ease; }
  .hero-plate:hover .hero-plate__hint,
  .hero-plate:focus-within .hero-plate__hint,
  .hero-plate:hover .hero-plate__tagline,
  .hero-plate:focus-within .hero-plate__tagline { opacity: 0; }

  /* La tarjeta vive en una caja reservada de la mitad inferior: aparece sin
     empujar nada y nunca sube por encima del título (top) ni pisa el enlace
     de ayuda (bottom). Crece hacia arriba solo lo que necesita. */
  .hero-plate__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 14rem;
    bottom: 3.4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hero-plate:hover .hero-plate__panel,
  .hero-plate:focus-within .hero-plate__panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .hero-card { flex: 0 1 auto; }

  .hero-plate__help { margin-top: auto; }

  /* El sello se muda a la costura vertical (borde derecho de la izquierda). */
  .hero-seal {
    left: auto;
    right: 0;
    top: 50%;
    bottom: auto;
    transform: translate(50%, -50%);
  }

  /* Pantallas táctiles grandes: sin hover la tarjeta se muestra siempre. */
  @media (hover: none) {
    .hero-plate__panel { opacity: 1; transform: none; pointer-events: auto; }
    .hero-plate__hint  { display: none; }
  }
}

/* Portátiles de poca altura: la cabecera y la lista se compactan para ganar
   sitio. Medido: a 1440x900 los diez servicios de empresa caben enteros; a
   partir de ~1366x625 (el portátil corriente) ya no, y la lista rueda por
   dentro con la barra teñida de arriba. */
@media (min-width: 1024px) and (max-height: 1000px) {
  /* La zona reservada sigue a la altura real de la ventana: cuanto más baja
     es la pantalla, más arriba puede empezar la tarjeta. */
  .hero-plate__panel { top: clamp(9.5rem, 21vh, 13.5rem); bottom: 2.6rem; }
  .hero-plate__head { gap: 0.5rem; padding-top: 0.25rem; }
  .hero-plate__icon { width: 2.75rem; height: 2.75rem; border-radius: 0.85rem; }
  .hero-plate__icon svg,
  .hero-plate__icon i { width: 1.45rem; height: 1.45rem; }
  .hero-plate__title { font-size: clamp(2.1rem, 3.4vw, 3rem); }
  .hero-card { margin-top: 0.6rem; padding: 0.85rem 1rem; }
  .hero-card__title { margin-bottom: 0.35rem; }
  .hero-card__list li { padding: 0.38rem 0; font-size: 0.84rem; }
  .hero-enter { margin-top: 0.7rem; padding: 0.7rem 1.2rem; }
}

/* La mitad que no tiene el cursor se atenúa levemente. */
@media (min-width: 1024px) and (hover: hover) {
  .hero-split:has(.hero-plate--persona:hover) .hero-plate--empresa::after,
  .hero-split:has(.hero-plate--empresa:hover) .hero-plate--persona::after {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD · sin movimiento si el usuario lo prefiere
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-plate,
  .hero-plate::after,
  .hero-plate__head,
  .hero-plate__panel,
  .hero-plate__hint,
  .hero-plate__chev,
  .hero-enter,
  .hero-enter svg {
    transition: none !important;
  }
  .hero-plate:hover .hero-plate__head,
  .hero-plate__panel,
  .hero-enter:hover {
    transform: none !important;
  }
}