/* ===== Design tokens ===== */
:root {
  --brand: #0f8fd4;
  --brand-bright: #2ab0ef;
  --ink: #0b1220;
  --paper: #f4f7fa;
  --white: #ffffff;

  --header-h: 92px;
  --footer-h: 44px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Header ===== */
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 20px 10px;
  text-align: center;
}

.logo {
  width: auto;
  height: 46px;
  /* Logo original azul -> blanco puro para fondo oscuro */
  filter: brightness(0) invert(1);
  user-select: none;
}

.tagline {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}

/* ===== Split layout ===== */
.split {
  flex: 1;
  display: flex;
  flex-direction: column; /* mobile-first: filas apiladas */
  min-height: 0;
  gap: 6px;
  padding: 0 6px 6px;
}

/* ===== Panels ===== */
.panel {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
  color: var(--white);
  min-height: 150px;
  isolation: isolate;
  transition: flex-grow 0.6s var(--ease);
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
}

/* Imagen de fondo (capa propia para poder animarla) */
.panel__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transform: scale(1.05) translateZ(0);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
  will-change: transform;
  backface-visibility: hidden;
}

.panel__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 12, 22, 0.88) 0%, rgba(6, 12, 22, 0.35) 45%, rgba(6, 12, 22, 0.15) 100%);
  transition: background 0.6s var(--ease);
}

.panel__content {
  padding: 22px 22px 24px;
  width: 100%;
  transform: translateZ(0);
}

.panel__kicker {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-bright);
  margin-bottom: 6px;
}

.panel__title {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 22px rgba(15, 143, 212, 0.35);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.panel__cta svg { transition: transform 0.25s var(--ease); }

/* Barra de acento inferior que aparece */
.panel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: var(--brand-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: 1;
}

/* ===== Interacciones (hover en desktop, active en touch) ===== */
.panel:hover .panel__bg,
.panel:focus-visible .panel__bg {
  transform: scale(1.12) translateZ(0);
}

.panel:hover .panel__scrim,
.panel:focus-visible .panel__scrim {
  background: linear-gradient(to top, rgba(6, 12, 22, 0.82) 0%, rgba(9, 60, 95, 0.32) 55%, rgba(6, 12, 22, 0.1) 100%);
}

.panel:hover .panel__cta,
.panel:focus-visible .panel__cta {
  background: var(--brand-bright);
  transform: translateY(-2px);
}

.panel:hover .panel__cta svg { transform: translateX(4px); }

.panel:hover::after,
.panel:focus-visible::after { transform: scaleX(1); }

.panel:active { transform: scale(0.992); }

.panel:focus-visible {
  outline: 3px solid var(--brand-bright);
  outline-offset: -3px;
}

/* ===== Footer ===== */
.site-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer .dot { color: var(--brand); }

.site-footer .ig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.site-footer .ig:hover,
.site-footer .ig:focus-visible { color: var(--brand-bright); }
.site-footer .ig:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== Desktop: columnas + efecto expandir ===== */
@media (min-width: 820px) {
  .split {
    flex-direction: row;
    gap: 10px;
    padding: 0 12px 12px;
  }

  .panel {
    min-height: 0;
    align-items: flex-end;
    will-change: flex-grow;
  }

  /* Al pasar el mouse por una, esa crece y las otras se achican */
  .split:hover .panel { flex-grow: 0.7; }
  .split .panel:hover { flex-grow: 2.4; }

  .panel__content { padding: 34px 34px 38px; }

  .panel__title { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }

  .logo { height: 56px; }
}

@media (min-width: 1280px) {
  .site-header { padding-top: 28px; }
  .logo { height: 62px; }
}

/* ===== Accesibilidad: menos movimiento ===== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .panel__bg { transform: none; }
}