/* ==========================================================================
   GINNOA · Home
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(var(--space-16), 10vw, var(--space-32)) var(--space-20);
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(255, 193, 7, 0.12), transparent 60%),
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(0, 95, 96, 0.10), transparent 60%),
    var(--surface-page);
}

.hero--video {
  /* Más corto pero contundente — alto suficiente para que el video respire pero no domine */
  min-height: 68vh;
  max-height: 760px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--color-teal-900);
  color: var(--text-inverse);
}
@media (max-width: 768px) {
  .hero--video {
    min-height: 80vh;
    max-height: none;
  }
}

/* ---- Background video iframe -------------------------------------------- */

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-bg__video {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-bg__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Cubre el contenedor manteniendo 16:9, sin barras negras */
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.hero-bg__overlay {
  position: absolute;
  inset: 0;
  /* Overlay teal oscuro: profundo, integrado con el brand, video visible pero con foco en contenido */
  background:
    linear-gradient(135deg,
      rgba(0, 27, 28, 0.82) 0%,
      rgba(0, 44, 45, 0.72) 35%,
      rgba(0, 62, 63, 0.55) 70%,
      rgba(0, 95, 96, 0.45) 100%),
    radial-gradient(ellipse 70% 90% at 100% 100%, rgba(255, 193, 7, 0.12), transparent 60%);
  backdrop-filter: saturate(115%);
  -webkit-backdrop-filter: saturate(115%);
}

/* Shape rules are now in components.css (loaded globally) so they apply
   to .page-hero en todas las views, no solo el home. */

/* ---- Hero content (encima del video) ------------------------------------ */

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Más compacto — la idea es que el contenido respire pero no se estire */
  gap: var(--space-4);
  max-width: 760px;
  position: relative;
  z-index: 2;
  /* Empuja un poco hacia abajo para no chocar con el header */
  padding-top: var(--space-12);
}
/* Eyebrow del hero sobre fondo oscuro */
.hero--video .hero__inner > .eyebrow {
  color: var(--color-amber-300);
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 193, 7, 0.15);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero__title {
  /* Punchy y corto — escala bien de móvil a desktop sin desbordar */
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  font-weight: var(--weight-extrabold);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-inverse);
  text-shadow: 0 2px 20px rgba(0, 27, 28, 0.5);
  max-width: 18ch;
}

.hero__title-accent {
  background: linear-gradient(90deg, var(--color-amber-400), var(--color-amber-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  font-size: var(--body-lg-size);
  line-height: 1.55;
  color: var(--color-teal-100);
  max-width: 52ch;
  /* Sin caja — flota directo sobre el overlay oscuro */
  text-shadow: 0 1px 10px rgba(0, 27, 28, 0.4);
}
.hero__lead strong { color: var(--color-amber-300); font-weight: var(--weight-semibold); }

.hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
/* En el hero oscuro el btn--ghost necesita borde claro */
.hero__cta .btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__cta .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--text-inverse);
}

.hero__note {
  font-size: var(--text-xs);
  color: var(--color-teal-100);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 27, 28, 0.35);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 193, 7, 0.35);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: var(--tracking-wide);
}
.hero__note i { color: var(--color-amber-400); }
.hero__note strong { color: var(--color-amber-300); }

/* ---- Admin floating button ---------------------------------------------- */

.hero-admin-btn {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-900);
  color: var(--text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: var(--transition-base);
  font-family: var(--font-body);
}
.hero-admin-btn:hover {
  background: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.hero-admin-btn i { color: var(--color-amber-400); }

/* Modal styles moved to components.css (necesarios en TODAS las vistas para
   el modal de admin de hero-bg). */

/* ---- Pillars ------------------------------------------------------------ */

.pillars__title {
  font-size: var(--heading-3-clamp);
  font-weight: var(--heading-3-weight);
  margin-bottom: var(--space-10);
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.pillars__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pillars__item .badge { align-self: flex-start; }
.pillars__item .badge i { margin-right: var(--space-1); }
.pillars__item h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}
.pillars__item p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   Secciones derivadas del hero (la triada explicada, servicios, MAI, casos)
   ========================================================================== */

/* ---- Helix (quíntuple hélice) ------------------------------------------- */

.helix-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
}
@media (max-width: 1024px) {
  .helix-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .helix-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}
.helix-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  transition: var(--transition-base);
}
.helix-grid li:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.helix-grid i {
  font-size: 28px;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.helix-grid strong {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-size: var(--text-base);
}
.helix-grid span {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}

/* ---- Section CTA inline (link al final de secciones preview) ----------- */

.section__cta {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
}

/* ---- Preview servicios -------------------------------------------------- */

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (max-width: 900px) {
  .preview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .preview-grid { grid-template-columns: 1fr; }
}

.preview-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition-base);
}
.preview-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}
.preview-card i {
  font-size: 28px;
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.preview-card:hover i { color: var(--brand-accent-active); }
.preview-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.preview-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ---- MAI preview -------------------------------------------------------- */

.mai-preview .container {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 900px) {
  .mai-preview .container { grid-template-columns: 1fr; }
}

.mai-preview__intro h2 {
  font-size: var(--heading-3-clamp);
  margin: var(--space-2) 0 var(--space-4) 0;
}
.mai-preview__intro p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.mai-preview__stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
@media (max-width: 640px) {
  .mai-preview__stages { grid-template-columns: repeat(2, 1fr); }
}
.mai-preview__stages li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.mai-preview__stages span {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-amber-800);
  background: var(--brand-accent-subtle);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wide);
}
.mai-preview__stages strong {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* ---- Preview casos ------------------------------------------------------ */

.preview-casos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (max-width: 900px) {
  .preview-casos__grid { grid-template-columns: 1fr; }
}

.preview-caso {
  padding: var(--space-7);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: var(--transition-base);
}
.preview-caso:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.preview-caso i {
  font-size: 32px;
  color: var(--brand-primary);
}
.preview-caso h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.preview-caso p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   Responsividad fina del hero en celulares
   ========================================================================== */

@media (max-width: 768px) {
  .hero__inner {
    padding-top: var(--space-16);
    gap: var(--space-3);
  }
  .hero__cta { gap: var(--space-2); }
  .hero__cta .btn--lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
  .hero-admin-btn {
    right: var(--space-3);
    bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
  .hero-admin-btn span { display: none; }
}

@media (max-width: 480px) {
  .hero__cta { width: 100%; flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}