/* Paleta inspirada en amanecer cósmico */
:root {
  --black-deep: #0b0d14;
  --twilight-blue: #2E3A59;
  --text: #F8F8F8;
  --fire-a: #F04E30; /* naranja forja */
  --fire-b: #FFD369; /* oro incandescente */
  --muted: #a9adc0;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--black-deep);
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(46,58,89,0.45), transparent 60%),
    radial-gradient(800px 400px at 20% 90%, rgba(46,58,89,0.35), transparent 55%),
    conic-gradient(from 210deg at 50% 50%, rgba(240,78,48,0.15), rgba(255,211,105,0.08), rgba(46,58,89,0.2), rgba(11,13,20,0.8));
  filter: saturate(110%);
}

/* HERO */
.hero { position: relative; padding: 6vh 0 8vh; }
.hero-inner {
  width: min(1100px, 92vw);
  margin: 0 auto;
  text-align: center;
}
.lang-switch { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; z-index: 3; }
.lang-btn { border: 1px solid rgba(255,255,255,0.35); background: rgba(11,13,20,0.6); color: var(--text); padding: 0.35rem 0.65rem; border-radius: 999px; font-weight: 600; cursor: pointer; }
.lang-btn[aria-pressed="true"] { border-color: var(--fire-b); color: var(--fire-b); }
.lang-switch { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; z-index: 3; }
.lang-btn { border: 1px solid rgba(255,255,255,0.35); background: rgba(11,13,20,0.6); color: var(--text); padding: 0.35rem 0.65rem; border-radius: 999px; font-weight: 600; cursor: pointer; }
.lang-btn[aria-pressed="true"] { border-color: var(--fire-b); color: var(--fire-b); }

.forge-aura {
  position: absolute;
  top: 5vh; left: 50%; transform: translateX(-50%);
  width: min(500px, 66vw); height: min(500px, 66vw);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,211,105,0.22), rgba(240,78,48,0.18), transparent 70%),
              conic-gradient(from 140deg, var(--fire-a), var(--fire-b), var(--fire-a));
  opacity: 0.85;
  filter: blur(14px) saturate(125%);
  animation: pulse 6s ease-in-out infinite;
}


.logo {
  width: min(240px, 40vw);
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 6px 14px rgba(255,211,105,0.25));
}

.logo-hero {
  position: relative;
  border-radius: 14px;
  box-shadow:
    inset 0 0 10px rgba(240, 78, 48, 0.18),
    0 4px 18px rgba(10, 30, 58, 0.45);
  border: 1px solid rgba(255, 211, 105, 0.10);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.logo-hero::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: inherit;
  background: radial-gradient(closest-side,
    rgba(11,13,20,0) 0%,
    rgba(11,13,20,0) 76%,
    rgba(11,13,20,0.78) 88%,
    rgba(11,13,20,0.98) 100%
  );
  filter: blur(10px);
  opacity: 0.96;
  pointer-events: none;
  z-index: 2;
}

/* Preset V1: obsidian overlay ajustado (interior angosto, exterior profundo) */
.logo-hero--v1::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: inherit;
  background: radial-gradient(closest-side,
    rgba(11,13,20,0) 0%,
    rgba(11,13,20,0) 76%,
    rgba(11,13,20,0.78) 88%,
    rgba(11,13,20,0.98) 100%
  );
  filter: blur(10px);
  opacity: 0.96;
  pointer-events: none;
  z-index: 2;
}

/* Preset V2: Portal dimensional (anillo de fuego y profundidad) */
.logo-hero--v2 {
  border-radius: 16px;
  position: relative;
  box-shadow:
    0 0 0 8px rgba(26, 26, 26, 0.95),         /* Marco obsidiana (más ancho) */
    0 0 0 14px rgba(240, 78, 48, 0.28),       /* Anillo de fuego (más visible) */
    inset 0 0 30px rgba(255, 211, 105, 0.2),  /* Calor interno */
    0 0 55px rgba(10, 30, 58, 0.7);           /* Sombra profunda (intensificada) */
}
/* Evitar mezclar overlay de v1 al usar v2 */
.logo-hero.logo-hero--v2::after { display: none; }

/* Preset V3: Crisol de metal fundido (halo multicolor) */
.logo-hero--v3 {
  border-radius: 8px;
  position: relative;
}
.logo-hero--v3::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: linear-gradient(45deg, #F04E30 0%, #FFBD5A 35%, #FFD369 70%, #F04E30 100%);
  border-radius: 11px;
  z-index: 2;
  filter: blur(12px);
  opacity: 0.62;
  pointer-events: none;
}
/* Evitar mezclar overlay de v1 al usar v3 */
.logo-hero.logo-hero--v3::after { display: none; }

/* garantizar que el logo quede por debajo del overlay */
.logo-hero { display: inline-block; }
.logo-hero .logo { position: relative; z-index: 1; display: block; }

/* Preset Round: máscara circular para el contenedor del logo */
.logo-hero--round {
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  aspect-ratio: 1 / 1;
  width: min(240px, 40vw);
}
.logo-hero--round .logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Asegurar que los pseudo-elementos se adapten a la geometría circular */
.logo-hero.logo-hero--round::after { border-radius: inherit; }
.logo-hero.logo-hero--round::before { border-radius: inherit; }

.title { margin: 2rem 0 0.75rem; font-family: 'Cinzel', serif; letter-spacing: 0.06em; }
.title-line { display: block; font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; }
.title-line { text-shadow: 0 0 6px rgba(255,211,105,0.35), 0 0 18px rgba(240,78,48,0.22); }
.title-line:hover { text-shadow: 0 0 10px rgba(255,211,105,0.6), 0 0 20px rgba(240,78,48,0.4); }
.title-subline { display: block; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 600; color: #e7e9f7; opacity: 0.9; }

.hero-claim {
  width: min(850px, 92vw);
  margin: 0.75rem auto 1.25rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  opacity: 0.92;
}

.cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.cta { text-decoration: none; padding: 0.95rem 1.35rem; border-radius: 999px; font-weight: 600; }
.cta.flame {
  color: #1b1208; /* legible sobre gradiente */
  background: linear-gradient(90deg, var(--fire-a), var(--fire-b));
  box-shadow: 0 16px 42px rgba(240,78,48,0.35);
  transition: filter 200ms ease, transform 200ms ease;
}
.cta.flame:hover { filter: brightness(1.05) saturate(115%); transform: translateY(-1px); text-shadow: 0 0 10px rgba(255,255,255,0.6); }
.cta.outline { border: 1px solid rgba(255,255,255,0.35); color: var(--text); }
.cta.outline:hover { border-color: var(--fire-b); color: var(--fire-b); text-shadow: 0 0 10px rgba(255,211,105,0.7), 0 0 16px rgba(240,78,48,0.45); }
.cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,211,105,0.6); }
a:hover { text-shadow: 0 0 8px rgba(255,211,105,0.6), 0 0 14px rgba(240,78,48,0.4); }

/* Separadores orgánicos (sin secciones cuadradas) */
.organic-sep { position: relative; height: 44px; }
.organic-sep--down::before,
.organic-sep--up::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 0% 100%, var(--twilight-blue), transparent 60%);
  mask-image: radial-gradient(120% 100% at 0% 100%, black 40%, transparent 60%);
}
.organic-sep--up::before {
  background: radial-gradient(120% 120% at 100% 0%, var(--twilight-blue), transparent 60%);
  mask-image: radial-gradient(120% 100% at 100% 0%, black 40%, transparent 60%);
}

/* Living Proof: paneles fluidos */
.living-proof { position: relative; padding: 10vh 0 8vh; }
.section-inner { width: min(1100px, 92vw); margin: 0 auto; }
.section-title { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3.8vw, 2.4rem); letter-spacing: 0.04em; }
.section-title { text-shadow: 0 0 6px rgba(255,211,105,0.28), 0 0 14px rgba(240,78,48,0.18); }
.section-title:hover { text-shadow: 0 0 10px rgba(255,211,105,0.6), 0 0 18px rgba(240,78,48,0.35); }
.section-lead { margin-top: 0.35rem; color: var(--muted); font-size: clamp(1.1rem, 2.4vw, 1.35rem); text-shadow: 0 0 6px rgba(255,211,105,0.28), 0 0 12px rgba(240,78,48,0.16); }
.lp-carousel { width: 100%; }
.lp-card { background: #1A1A1A; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(10, 30, 58, 0.35); transition: box-shadow 300ms ease, transform 300ms ease; width: min(980px, 92vw); }
.lp-carousel .swiper-slide { display: flex; justify-content: center; }
.lp-card video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.lp-card-text { padding: 0.75rem 1rem 1rem; }
.lp-card h3 { margin: 0; font-size: 1.05rem; }
.lp-card p { margin: 0.4rem 0 0; color: #dfe4ff; opacity: 0.9; font-size: 0.95rem; }
.card--amber:hover, .card--amber:focus-visible { box-shadow: 0 0 0 3px rgba(240,78,48,0.55), 0 12px 28px rgba(240,78,48,0.35); transform: translateY(-2px); }
.card--gold:hover, .card--gold:focus-visible { box-shadow: 0 0 0 3px rgba(255,211,105,0.6), 0 12px 28px rgba(255,211,105,0.35); transform: translateY(-2px); }
.card--blue:hover, .card--blue:focus-visible { box-shadow: 0 0 0 3px rgba(77,181,255,0.55), 0 12px 28px rgba(77,181,255,0.35); transform: translateY(-2px); }
.lp-card:focus-visible { outline: none; }
.swiper { --swiper-navigation-size: 28px; --swiper-navigation-color: #FFD369; --swiper-theme-color: #FFD369; }
.swiper-button-prev, .swiper-button-next { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); opacity: 0.95; }
@media (max-width: 899px) { .swiper { --swiper-navigation-size: 22px; } }
.swiper-pagination-bullet { background: rgba(255,255,255,0.4); }
.swiper-pagination-bullet-active { background: rgba(255,211,105,0.9); }
.swiper-pagination-bullet:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,211,105,0.7); }
.swiper-pagination-bullet:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,211,105,0.7); }
.lp-card.card--blue video { object-fit: cover; transform: none; object-position: center; }

.flow-panels { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 820px) { .flow-panels { grid-template-columns: 1fr 1fr; } }
/* Show three panels in one row on typical desktops (>= 980px) */
@media (min-width: 980px) { .flow-panels { grid-template-columns: 1fr 1fr 1fr; } }

.panel {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(46,58,89,0.55), rgba(11,13,20,0.85));
  border: 1px solid rgba(255,255,255,0.08);
  transform: skewY(-0.5deg);
  transition: box-shadow 200ms ease, filter 200ms ease;
}
.panel-fire {
  position: absolute; inset: -10% -5% auto -5%; height: 48%;
  background: linear-gradient(90deg, rgba(240,78,48,0.55), rgba(255,211,105,0.45));
  filter: blur(16px) saturate(135%);
  transform: translate3d(0,0,0);
  animation: heat 10s ease-in-out infinite;
}
.panel-content { position: relative; padding: 1rem 1.1rem 1.2rem; }
.panel h3 { margin: 0; font-size: 1.1rem; }
.panel a { color: var(--text); text-decoration: none; }
.panel a:hover { color: var(--fire-b); }
.panel a:hover { text-shadow: 0 0 8px rgba(255,211,105,0.6), 0 0 14px rgba(240,78,48,0.4); }
.panel a:hover { text-shadow: 0 0 6px rgba(255,211,105,0.45); }
.panel p { margin: 0.35rem 0 0; color: #dfe4ff; opacity: 0.9; font-size: 0.95rem; }

/* Story grid orgánica */
.story { padding: 10vh 0 8vh; }
.story-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: center; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1.4fr 1fr; } }
.story-text { order: 2; }
.story-figure { order: 1; }
@media (min-width: 900px) {
  .story-text { order: 1; }
  .story-figure { order: 2; }
  .story-grid { align-items: stretch; }
}
.story-text p { margin-top: 0.65rem; max-width: 65ch; }
.story-figure {
  margin: 0; border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: radial-gradient(100% 60% at 20% 20%, rgba(240,78,48,0.18), transparent 60%);
  display: flex; align-items: center; justify-content: center;
  justify-self: center;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.story-figure img { width: clamp(220px, 65vw, 360px); height: auto; display: block; margin: 0 auto; max-height: 100%; }
@media (min-width: 900px) {
  .story-figure img { width: clamp(165px, 26vw, 285px); max-height: 100%; }
}

/* Ethos */
.ethos { padding: 10vh 0 8vh; }
.ethos-quote {
  margin: 0; font-size: clamp(1.1rem, 2.3vw, 1.4rem); line-height: 1.6;
  background: linear-gradient(90deg, rgba(240,78,48,0.65), rgba(255,211,105,0.65));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 16px rgba(240,78,48,0.28));
}

/* Final CTA */
.final-cta { padding: 12vh 0 14vh; }
.cta-row--center { justify-content: center; }

/* Footer */
.foot { padding: 5vh 0; text-align: center; color: var(--muted); }
.foot-nav { display: flex; gap: 0.9rem; justify-content: center; align-items: center; margin-bottom: 0.6rem; }
.foot a { color: #6FA3C7; text-decoration: none; transition: color 220ms ease; }
.foot a:hover, .foot a:focus-visible { color: #E2B36C; }
.foot small { color: #CDBCA5; font-weight: 400; letter-spacing: 0.02em; text-shadow: 0 -0.5px 0.6px rgba(0,0,0,0.38), 0 0.6px 0.8px rgba(255,211,105,0.08); }
@media (max-width: 700px) { .foot small .verified { display: block; margin-top: 0.25rem; } }
.ob-email { color: #6FA3C7; font-weight: 500; white-space: nowrap; }
.ob-email .ob-user, .ob-email .ob-at, .ob-email .ob-domain { color: #6FA3C7; }
.ob-email .ob-at { margin: 0 0.25em; font-size: 0.9em; }

/* Animaciones */
@keyframes pulse { 0%, 100% { opacity: 0.75; filter: blur(16px) saturate(120%); } 50% { opacity: 0.95; filter: blur(20px) saturate(140%); } }
@keyframes heat { 0% { transform: translateX(0) skewY(-0.5deg); } 50% { transform: translateX(5%) skewY(-1.5deg); } 100% { transform: translateX(0) skewY(-0.5deg); } }

/* Accesibilidad de movimiento */
@media (prefers-reduced-motion: reduce) {
  .forge-aura, .panel-fire { animation: none; }
}

/* Grano sutil en el fondo cósmico */
.cosmic-bg::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.6;
}

/* Ajuste solicitado: paddings verticales a 4rem en secciones clave */
.hero, .story, .ethos, .final-cta { padding: 4rem 0; }
.logo-hero:hover, .story-figure:hover, .cta:hover { box-shadow: 0 0 0 4px rgba(255,211,105,0.45), 0 14px 36px rgba(240,78,48,0.45); transform: translateY(-1px); }
.cta:hover { text-shadow: 0 0 8px rgba(255,211,105,0.55); }
.panel:hover { box-shadow: 0 18px 48px rgba(240,78,48,0.35); filter: saturate(130%); }