/* =========================================================
   REFINAMIENTO PREMIUM — PUNTO D' PARTIDA
   Alternancia negro/verde oscuro, menos espacios y neón medido
========================================================= */

:root {
  --pdp-black: #000000;
  --pdp-black-soft: #020402;
  --pdp-green-night: #041007;
  --pdp-green-night-2: #07140a;
  --pdp-neon: #60ff01;
  --pdp-green: #00e304;
  --pdp-text: #f7f9f6;
  --pdp-muted: #a9b2aa;
  --pdp-border: rgba(255, 255, 255, 0.09);
}

/* Base más oscura y premium */
html,
body.home-page {
  background: var(--pdp-black-soft) !important;
}

body.home-page {
  color: var(--pdp-text);
}

body.home-page::before {
  opacity: 0.07 !important;
}

/* Encabezado sólido para integrar mejor el logo */
body.home-page .header {
  background: rgba(0, 0, 0, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

body.home-page .header.is-scrolled {
  background: rgba(0, 0, 0, 0.985) !important;
}

body.home-page .header__inner {
  min-height: 92px;
}

body.home-page .brand,
body.home-page .brand__mark,
body.home-page .brand img,
body.home-page .brand__logo {
  background: transparent !important;
  box-shadow: none !important;
}

/* Para logos en imagen: elimina la sensación de “tarjeta” */
body.home-page .brand img,
body.home-page .brand__logo {
  display: block;
  width: clamp(118px, 10vw, 158px);
  max-height: 76px;
  object-fit: contain;
  border: 0;
  filter: drop-shadow(0 0 12px rgba(96, 255, 1, 0.08));
}

/* Menos aire vertical sin comprimir el contenido */
body.home-page .section {
  padding-top: clamp(78px, 7vw, 102px) !important;
  padding-bottom: clamp(78px, 7vw, 102px) !important;
}

body.home-page .section-heading--split,
body.home-page .portfolio__header {
  margin-bottom: 38px !important;
}

body.home-page .section-heading--center {
  margin-bottom: 44px !important;
}

body.home-page .philosophy-grid {
  margin-top: 42px !important;
}

body.home-page .showreel {
  padding-top: 78px !important;
  padding-bottom: 92px !important;
}

body.home-page .visual-intro {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}
body.home-page .visual-intro,
body.home-page .objective,
body.home-page .service-gallery,
body.home-page .portfolio,
body.home-page .process,
body.home-page .philosophy,
body.home-page .faq,
body.home-page .contact {
  min-height: 0 !important;
}

/* Alternancia intencional entre negro y verde oscuro */
body.home-page .hero {
  background:
    radial-gradient(circle at 76% 24%, rgba(17, 67, 0, 0.30), transparent 27%),
    linear-gradient(135deg, #000000 0%, #020402 62%, #041007 100%) !important;
}

body.home-page .visual-intro {
  background:
    radial-gradient(circle at 12% 30%, rgba(17, 67, 0, 0.20), transparent 32%),
    var(--pdp-green-night) !important;
}

body.home-page .objective {
  background: var(--pdp-black) !important;
}

body.home-page .showreel {
  background:
    linear-gradient(180deg, #020402 0%, #051008 52%, #020402 100%) !important;
}

body.home-page .service-gallery {
  background: var(--pdp-green-night-2) !important;
}

body.home-page .portfolio {
  background: var(--pdp-black) !important;
}

body.home-page .process {
  background:
    radial-gradient(circle at 82% 18%, rgba(17, 67, 0, 0.20), transparent 28%),
    var(--pdp-green-night) !important;
}

body.home-page .philosophy {
  background: var(--pdp-black) !important;
}

body.home-page .faq {
  background:
    linear-gradient(135deg, #030703 0%, #07140a 54%, #020402 100%) !important;
}

body.home-page .contact {
  background: var(--pdp-black) !important;
}

body.home-page .footer {
  background: #000000 !important;
}

/* Separación suave entre secciones */
body.home-page main > section {
  border-top: 1px solid rgba(255, 255, 255, 0.045) !important;
}

/* Tarjetas oscuras y menos “verdes” */
body.home-page .objective-shell,
body.home-page .objective-panel,
body.home-page .philosophy-card,
body.home-page .faq-item,
body.home-page .contact__shell,
body.home-page .service-card,
body.home-page .process-step {
  background-color: rgba(4, 8, 5, 0.88) !important;
  border-color: var(--pdp-border) !important;
}

body.home-page .philosophy-card {
  background:
    linear-gradient(145deg, rgba(10, 16, 11, 0.96), rgba(1, 3, 2, 0.98)) !important;
}

body.home-page .philosophy-card:hover {
  border-color: rgba(96, 255, 1, 0.28) !important;
  transform: translateY(-7px);
}

/* Neón reservado para acciones y microdetalles */
body.home-page h1,
body.home-page h2,
body.home-page h3,
body.home-page h4 {
  color: var(--pdp-text) !important;
}

body.home-page p,
body.home-page li,
body.home-page .section-description,
body.home-page .section-heading p {
  color: var(--pdp-muted) !important;
}
/* HOME - PORTAFOLIO / NOTA INFORMATIVA */
body.home-page #portafolio .portfolio-note {
  color: #4b5563 !important;
  max-width: 820px !important;
  margin: 26px 0 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
}
body.home-page .eyebrow,
body.home-page .project__overlay span,
body.home-page .method-step small,
body.home-page .process-step small,
body.home-page .objective-panel__metric span {
  color: var(--pdp-green) !important;
}

body.home-page .eyebrow > span:empty,
body.home-page .eyebrow > span:first-child:not([data-i18n]) {
  background: var(--pdp-green) !important;
}
body.home-page .live-dot,
body.home-page .hero-ticker i {
  background: var(--pdp-green) !important;
}

body.home-page .btn--primary,
body.home-page .button-primary,
body.home-page .btn-accent,
body.home-page .whatsapp-float {
  background: var(--pdp-neon) !important;
  color: #000000 !important;
}

body.home-page .btn--primary:hover,
body.home-page .button-primary:hover,
body.home-page .btn-accent:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body.home-page .hero__proof strong,
body.home-page .hero h1 em,
body.home-page .visual-intro__content h2 em {
  color: var(--pdp-neon) !important;
}

/* FAQ más limpia */
body.home-page .faq-list {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}

body.home-page .faq-item {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

body.home-page .faq-item button svg {
  color: var(--pdp-neon) !important;
}

/* Refinamiento del showreel y medios */
body.home-page .showreel-card,
body.home-page .visual-intro__image,
body.home-page .project,
body.home-page .media-card {
  border-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
}

/* Responsive */
@media (max-width: 900px) {
  body.home-page .header__inner {
    min-height: 76px;
  }

  body.home-page .brand img,
  body.home-page .brand__logo {
    width: 112px;
    max-height: 60px;
  }

  body.home-page .section,
  body.home-page .visual-intro,
  body.home-page .showreel {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }

  body.home-page .section-heading--split,
  body.home-page .portfolio__header {
    margin-bottom: 30px !important;
  }
}

@media (max-width: 600px) {
  body.home-page .section,
  body.home-page .visual-intro,
  body.home-page .showreel {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* =========================================================
   AMPLIACIÓN E INTEGRACIÓN DEL LOGOTIPO DEL ENCABEZADO
========================================================= */

/* Contenedor del logotipo — tamaño unificado con shell PDP */
body.home-page .header .brand {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible;
}

body.home-page .header .logo-pdp {
  display: block !important;
  width: auto !important;
  max-width: min(220px, 42vw) !important;
  height: 44px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  transform: none !important;
  transition: opacity 0.2s ease !important;
}

body.home-page .header .brand:hover .logo-pdp {
  transform: none !important;
  opacity: 0.92;
}

body.home-page .header__inner {
  min-height: 72px !important;
  max-height: 78px !important;
}

/* Ajuste para tabletas y celulares */
@media (max-width: 900px) {
  body.home-page .header .brand {
    width: 125px;
    min-width: 125px;
    height: 78px;
  }

  body.home-page .header .logo-pdp {
    width: 112px !important;
    max-height: 72px !important;
    transform: scale(1.18);
  }

  body.home-page .header .brand:hover .logo-pdp {
    transform: scale(1.21);
  }

  body.home-page .header__inner {
    min-height: 86px;
  }
}

/* =========================================================
   LOGOTIPO DEL FOOTER
========================================================= */

/* Contenedor del logotipo compuesto (símbolo + wordmark) */
body.home-page .footer__brand .brand--footer.brand--composite {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-height: 0;
  overflow: visible;
  margin-bottom: 8px;
  transition: opacity 0.3s ease;
}

body.home-page .footer .brand--footer.brand--composite:hover {
  opacity: 0.92;
}

/* Mantiene equilibrada la primera columna */
body.home-page .footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Tablet y celular */
@media (max-width: 900px) {
  body.home-page .footer__brand {
    align-items: center;
    text-align: center;
  }

  body.home-page .footer__brand .brand--footer.brand--composite {
    justify-content: center;
  }
}

/* =========================================================
   LOGO MENÚ — tamaño unificado (shell PDP)
   Reglas legacy de logo 180px+ eliminadas
========================================================= */

@media (min-width: 901px) {
  body.home-page.pdp-unified-shell .header .brand,
  body.home-page.pdp-unified-shell header.header a.brand {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 48px !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  body.home-page.pdp-unified-shell .header .logo-pdp,
  body.home-page.pdp-unified-shell header.header a.brand .logo-pdp {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(220px, 42vw) !important;
    height: 44px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    transform: none !important;
    margin: 0 !important;
  }

  body.home-page.pdp-unified-shell .header__inner,
  body.home-page.pdp-unified-shell header.header .header__inner {
    min-height: 72px !important;
    max-height: 78px !important;
  }
}

/* =========================================================
   ILUMINACIÓN DE LAS PALABRAS CREER, CREAR Y CRECER
========================================================= */

/* Estado normal: palabra discreta en el fondo */
body.home-page .philosophy-card::before {
  pointer-events: none;

  color: rgba(96, 255, 1, 0.09) !important;
  opacity: 0.7;

  text-shadow: none;
  filter: brightness(0.8) saturate(0.9);

  transition:
    color 0.4s ease,
    opacity 0.4s ease,
    text-shadow 0.4s ease,
    filter 0.4s ease;
}

/* Se ilumina cuando el cursor pasa sobre la tarjeta */
body.home-page .philosophy-card:hover::before,
body.home-page .philosophy-card:focus-within::before {
  color: rgba(96, 255, 1, 0.72) !important;
  opacity: 1;

  text-shadow:
    0 0 5px rgba(96, 255, 1, 0.95),
    0 0 14px rgba(96, 255, 1, 0.8),
    0 0 28px rgba(0, 227, 4, 0.62),
    0 0 52px rgba(0, 227, 4, 0.4);

  filter:
    brightness(1.8)
    saturate(1.7)
    drop-shadow(0 0 8px rgba(96, 255, 1, 0.65));

  animation: philosophyWordGlow 1.25s ease-in-out infinite alternate;
}

/* Pulso suave de luz */
@keyframes philosophyWordGlow {
  from {
    text-shadow:
      0 0 4px rgba(96, 255, 1, 0.75),
      0 0 12px rgba(96, 255, 1, 0.6),
      0 0 24px rgba(0, 227, 4, 0.42);

    filter:
      brightness(1.45)
      saturate(1.4)
      drop-shadow(0 0 5px rgba(96, 255, 1, 0.45));
  }

  to {
    text-shadow:
      0 0 7px rgba(96, 255, 1, 1),
      0 0 20px rgba(96, 255, 1, 0.88),
      0 0 38px rgba(0, 227, 4, 0.68),
      0 0 65px rgba(0, 227, 4, 0.38);

    filter:
      brightness(2)
      saturate(1.9)
      drop-shadow(0 0 11px rgba(96, 255, 1, 0.78));
  }
}

/* Accesibilidad: elimina el pulso si el usuario reduce animaciones */
@media (prefers-reduced-motion: reduce) {
  body.home-page .philosophy-card:hover::before,
  body.home-page .philosophy-card:focus-within::before {
    animation: none;
  }
}

/* =========================================================
   REFINAMIENTO DEL BRILLO — CREER, CREAR Y CRECER
   Luz más suave para no interferir con el contenido
========================================================= */

/* Mantiene la palabra luminosa detrás del contenido */
body.home-page .philosophy-card::before {
  z-index: 0;
}

/* Conserva títulos, números y párrafos por encima del brillo */
body.home-page .philosophy-card > * {
  position: relative;
  z-index: 2;
}

/* Iluminación más controlada */
body.home-page .philosophy-card:hover::before,
body.home-page .philosophy-card:focus-within::before {
  color: rgba(96, 255, 1, 0.5) !important;
  opacity: 0.86;

  text-shadow:
    0 0 3px rgba(96, 255, 1, 0.75),
    0 0 9px rgba(96, 255, 1, 0.5),
    0 0 18px rgba(0, 227, 4, 0.32) !important;

  filter:
    brightness(1.35)
    saturate(1.3)
    drop-shadow(0 0 4px rgba(96, 255, 1, 0.4));

  animation: philosophyWordGlowSoft 1.8s ease-in-out infinite alternate;
}

/* Pulso luminoso más discreto */
@keyframes philosophyWordGlowSoft {
  from {
    color: rgba(96, 255, 1, 0.42);

    text-shadow:
      0 0 2px rgba(96, 255, 1, 0.62),
      0 0 7px rgba(96, 255, 1, 0.4),
      0 0 14px rgba(0, 227, 4, 0.25);

    filter:
      brightness(1.2)
      saturate(1.2)
      drop-shadow(0 0 3px rgba(96, 255, 1, 0.3));
  }

  to {
    color: rgba(96, 255, 1, 0.58);

    text-shadow:
      0 0 4px rgba(96, 255, 1, 0.78),
      0 0 11px rgba(96, 255, 1, 0.52),
      0 0 21px rgba(0, 227, 4, 0.34);

    filter:
      brightness(1.45)
      saturate(1.35)
      drop-shadow(0 0 5px rgba(96, 255, 1, 0.42));
  }
}

/* Sin pulso para usuarios que reduzcan las animaciones */
@media (prefers-reduced-motion: reduce) {
  body.home-page .philosophy-card:hover::before,
  body.home-page .philosophy-card:focus-within::before {
    animation: none;
  }
}

/* HOME - FRANJA DE SERVICIOS / TICKER */
body.home-page .hero-ticker {
  background: #000000 !important;
  border-top: 1px solid rgba(96, 255, 1, 0.18) !important;
  border-bottom: 1px solid rgba(96, 255, 1, 0.18) !important;
}

body.home-page .hero-ticker__track,
body.home-page .hero-ticker__track span {
  color: #ffffff !important;
}

body.home-page .hero-ticker__track i {
  background: #60FF01 !important;
  box-shadow: 0 0 10px rgba(96, 255, 1, 0.45) !important;
}

/* Trust strip + showreel gallery */
.trust-strip {
  background: linear-gradient(90deg, rgba(96, 255, 1, 0.08), rgba(96, 255, 1, 0.02));
  border-block: 1px solid rgba(96, 255, 1, 0.15);
  padding: 14px 0;
}

.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  text-align: center;
}

.trust-strip__inner strong {
  display: block;
  font-size: 1.35rem;
  color: #60ff01;
}

.trust-strip__inner span {
  display: block;
  font-size: 0.78rem;
  color: #d4d4d8;
  margin-top: 4px;
}

.showreel-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

.showreel-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: showreelFade 2.2s ease;
}

.showreel-gallery__caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(96, 255, 1, 0.25);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

@keyframes showreelFade {
  from { opacity: 0.2; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {
  .trust-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}