/* ===================================================================
   Sur Finanzas — Design system
   Paleta e identidad: turquesa #09FED5 sobre fondo casi negro.
   Orden del archivo:
     1. Tokens · 2. Base · 3. Layout · 4. Tipografía · 5. Botones
     6. Navbar · 7. Hero · 8. Cards · 9. Formularios · 10. CTA
     11. Footer · 12. Flotantes · 13. Animaciones · 14. Utilidades
   =================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --background: #0b0b0f;
  --background-alt: #0f0f15;
  --foreground: #f5f6f8;
  --brand: #09fed5;
  --brand-soft: #7dffe6;
  --brand-deep: #04b895;
  --brand-contrast: #04120c;
  --muted: #9aa3b2;
  --card-bg: #121218;
  --card-bg-hover: #16161e;
  --border-soft: rgba(255, 255, 255, 0.1);
  --border-brand: rgba(9, 254, 213, 0.38);

  --radius-sm: 0.65rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;

  --container-max: 80rem;
  --nav-h: 3.75rem;

  /* Intensidad del resplandor turquesa del fondo.
     Subilos o bajalos acá: se aplican a todos los encabezados y videos. */
  --glow-blob: 0.45;        /* opacidad de los blobs detrás de los encabezados */
  --glow-blob-color: 0.62;  /* fuerza del degradé de cada blob */
  --glow-blob-b2: 0.38;     /* el segundo blob, más tenue */
  --glow-hero: 0.19;        /* tinte de marca sobre el video del inicio */
  --glow-cta: 0.22;         /* tinte de marca sobre el video del cierre */

  --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-brand: 0 10px 30px rgba(9, 254, 213, 0.28);

  --ease-out: cubic-bezier(0.21, 0.9, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 640px) { :root { --nav-h: 4.5rem; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
/* Necesario: display:flex/grid de autor le gana al [hidden] del navegador */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: rgba(9, 254, 213, 0.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar acorde a la identidad (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: #23232d; border-radius: 999px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: #33333f; }

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 640px) { .container { padding: 0 2rem; } }
@media (min-width: 1024px) { .container { padding: 0 3rem; } }

.section { padding: 3.5rem 0; }
@media (min-width: 640px) { .section { padding: 5rem 0; } }
@media (min-width: 1024px) { .section { padding: 6rem 0; } }
/* Translúcida a propósito: así se ve la marca de agua del fondo.
   El tono resultante es el mismo que tenía var(--background-alt). */
.section-alt { background: rgba(255, 255, 255, 0.022); border-block: 1px solid rgba(255, 255, 255, 0.04); }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 559px) { .grid-2.stack-sm { grid-template-columns: 1fr; } }

/* Grillas de home */
.services-grid,
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 560px) { .services-grid, .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .services-grid, .why-grid { margin-top: 3rem; }
}

/* ---------- 4. Tipografía ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
h1 { font-size: clamp(1.9rem, 6vw, 3rem); }
h2 { font-size: clamp(1.45rem, 4vw, 2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand);
}
/* Punto de marca: funciona igual alineado a la izquierda o centrado */
.eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(9, 254, 213, 0.8);
}

.section-heading { max-width: 46rem; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading h2 { font-size: clamp(1.55rem, 4.2vw, 2.25rem); }
.section-heading p { margin: 0.85rem 0 0; color: var(--muted); font-size: clamp(0.95rem, 2.4vw, 1.05rem); }

p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--muted); }
.text-brand { color: var(--brand); }
.lead { font-size: clamp(1rem, 2.6vw, 1.15rem); color: rgba(245, 246, 248, 0.86); }

/* ---------- 5. Botones ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--ease-out), background 0.2s ease,
              box-shadow 0.25s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-brand {
  background: linear-gradient(135deg, var(--brand-soft), var(--brand));
  color: #04120c;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(9, 254, 213, 0.2);
}
.btn-brand:hover { box-shadow: var(--shadow-brand); }
/* Barrido de brillo al hacer hover */
.btn-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}
.btn-brand:hover::after { transform: translateX(120%); }

.btn-outline {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.02);
}
.btn-outline:hover { background: rgba(9, 254, 213, 0.08); border-color: var(--border-brand); color: var(--brand); }

.btn-ghost { color: var(--brand); background: transparent; padding-inline: 0.25rem; }
.btn-ghost:hover { color: var(--brand-soft); }

.btn-sm { min-height: 2.25rem; padding: 0.45rem 1rem; font-size: 0.84rem; }
.btn-block { width: 100%; }

/* ---------- 6. Navbar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand), var(--brand-soft));
  box-shadow: 0 0 12px rgba(9, 254, 213, 0.6);
  pointer-events: none;
}

.navbar {
  position: fixed;
  top: 0; left: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid transparent;
  background: rgba(11, 11, 15, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.navbar.is-scrolled {
  background: rgba(9, 9, 13, 0.93);
  border-bottom-color: var(--border-soft);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: var(--nav-h);
  transition: height 0.3s var(--ease-out);
}
.navbar.is-scrolled .container { height: calc(var(--nav-h) - 0.5rem); }

.nav-spacer { height: var(--nav-h); }

.nav-left { display: flex; align-items: center; gap: 1.75rem; min-width: 0; }

.nav-logo { display: flex; align-items: center; flex: none; }
.nav-logo img {
  height: 2rem;
  width: auto;
  transition: filter 0.3s ease, transform 0.3s var(--ease-out);
}
@media (min-width: 640px) { .nav-logo img { height: 2.4rem; } }
.nav-logo:hover img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 14px rgba(9, 254, 213, 0.55));
}

.nav-links {
  display: none;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(245, 246, 248, 0.75);
}
.nav-links a, .nav-links button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.35rem 0;
  color: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav-links a::after, .nav-links button::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.3s var(--ease-out);
}
.nav-links a:hover, .nav-links button:hover,
.nav-links a.is-active { color: var(--foreground); }
.nav-links a:hover::after, .nav-links button:hover::after,
.nav-dropdown:focus-within > button::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-links a.is-active::after { transform: scaleX(1); transform-origin: 0 50%; background: var(--brand); }

.nav-caret { transition: transform 0.25s var(--ease-out); }
.nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }

.nav-cta { display: none; align-items: center; gap: 0.75rem; }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: flex; }
  .nav-toggle { display: none !important; }
}

/* Botón hamburguesa animado */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: var(--foreground);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-toggle:hover { border-color: var(--border-brand); }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease, width 0.3s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] { color: var(--brand); border-color: var(--border-brand); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown de servicios (desktop) */
.nav-dropdown { position: relative; }
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: -0.75rem;
  min-width: 16rem;
  padding: 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(18, 18, 24, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s var(--ease-out), visibility 0.22s;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-panel a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: rgba(245, 246, 248, 0.82);
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s var(--ease-out);
}
.nav-dropdown-panel a::after { display: none; }
.nav-dropdown-panel a:hover {
  background: rgba(9, 254, 213, 0.09);
  color: var(--brand);
  padding-left: 1rem;
}

/* Menú móvil */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  padding-top: var(--nav-h);
  z-index: 49;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(9, 9, 13, 0.98);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity 0.28s ease, transform 0.32s var(--ease-out), visibility 0.32s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu .container { display: flex; flex-direction: column; gap: 0.35rem; padding-block: 1.25rem 2.5rem; }
.mobile-menu nav { display: flex; flex-direction: column; }

.mobile-menu nav > a, .mobile-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 0.25rem;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: none;
  color: rgba(245, 246, 248, 0.9);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, padding-left 0.2s var(--ease-out);
}
.mobile-menu nav > a:hover, .mobile-sub-toggle:hover { color: var(--brand); padding-left: 0.6rem; }
.mobile-menu nav > a.is-active { color: var(--brand); }

/* Entrada escalonada de los items del menú */
.mobile-menu nav > *, .mobile-menu .mobile-cta {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.mobile-menu.open nav > *, .mobile-menu.open .mobile-cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.05s * var(--i, 0) + 0.08s);
}

.mobile-sub-toggle .nav-caret { transition: transform 0.3s var(--ease-out); }
.mobile-sub-toggle[aria-expanded="true"] { color: var(--brand); }
.mobile-sub-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.mobile-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-out);
}
.mobile-sub > div { overflow: hidden; }
.mobile-sub.open { grid-template-rows: 1fr; }
.mobile-sub a {
  display: block;
  padding: 0.7rem 0.25rem 0.7rem 1rem;
  border-left: 2px solid rgba(9, 254, 213, 0.25);
  margin-left: 0.25rem;
  color: var(--muted);
  font-size: 0.95rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mobile-sub a:hover { color: var(--brand); border-color: var(--brand); }

.mobile-cta { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.mobile-cta .btn { flex: 1; }
.mobile-contact { margin-top: 1.75rem; font-size: 0.85rem; color: var(--muted); }
.mobile-contact a { color: var(--brand); }

/* ---------- 7. Hero ---------- */
.hero { position: relative; padding-top: 1.25rem; }
@media (min-width: 640px) { .hero { padding-top: 2rem; } }

.hero-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: inset 0 0 0 1px var(--border-soft), 0 30px 70px rgba(0, 0, 0, 0.45);
  min-height: min(78vh, 30rem);
}
@media (min-width: 640px) { .hero-frame { min-height: 30rem; } }
@media (min-width: 1024px) { .hero-frame { min-height: 34rem; } }

.hero-frame video, .hero-frame .hero-bg-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(9, 254, 213, var(--glow-hero)), transparent 62%),
    linear-gradient(180deg, rgba(6, 6, 10, 0.62) 0%, rgba(6, 6, 10, 0.74) 55%, rgba(6, 6, 10, 0.9) 100%);
}
/* Rejilla sutil sobre el video, refuerza el aire "fintech" */
.hero-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 45%, #000 20%, transparent 75%);
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  text-align: center;
}
.hero-content .eyebrow { justify-content: center; }
.hero-content h1 { font-size: clamp(2rem, 7.2vw, 3.4rem); }
.hero-content > p { margin-top: 1.1rem; font-size: clamp(0.98rem, 2.6vw, 1.15rem); color: rgba(245, 246, 248, 0.86); }
.hero-actions {
  margin-top: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; flex-wrap: wrap;
}
@media (max-width: 480px) { .hero-actions .btn { width: 100%; } }
.hero-actions.start { justify-content: flex-start; }

/* Chips de confianza bajo el hero */
.hero-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem; margin-top: 1.75rem;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  font-size: 0.78rem;
  color: rgba(245, 246, 248, 0.88);
}
.hero-chip svg { width: 0.95rem; height: 0.95rem; color: var(--brand); }

/* Hero interno de páginas */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 3rem 0 1rem;
}
@media (min-width: 640px) { .page-hero { padding: 4.5rem 0 1.5rem; } }
.page-hero h1 { font-size: clamp(1.9rem, 6.2vw, 3rem); max-width: 22ch; }
.page-hero > .container > p { margin-top: 1rem; max-width: 40rem; color: var(--muted); font-size: clamp(0.98rem, 2.5vw, 1.1rem); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-size: 0.8rem; color: var(--muted);
}
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span { opacity: 0.5; }

/* ---------- 8. Cards ---------- */
.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
@media (min-width: 640px) { .card { padding: 1.75rem; } }
.card:hover {
  border-color: var(--border-brand);
  background: var(--card-bg-hover);
  box-shadow: var(--shadow-card);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, rgba(9, 254, 213, 0.06), rgba(255, 255, 255, 0.02));
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 640px) { .service-card { padding: 2rem; } }
.service-card:hover { border-color: var(--border-brand); box-shadow: var(--shadow-card); }
.service-card h3 { font-size: 1.2rem; }
.service-card > p { color: var(--muted); font-size: 0.94rem; margin-bottom: 0; }
.service-card .card-actions { margin-top: auto; padding-top: 1rem; }

.card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Luz que sigue al cursor (coordenadas puestas por JS) */
.card::before, .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 0%), rgba(9, 254, 213, 0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.card:hover::before, .service-card:hover::before { opacity: 1; }
.card > *, .service-card > * { position: relative; z-index: 1; }

.icon-badge {
  width: 2.85rem; height: 2.85rem;
  display: grid; place-items: center;
  flex: none;
  border-radius: 0.85rem;
  border: 1px solid rgba(9, 254, 213, 0.18);
  background: rgba(9, 254, 213, 0.1);
  margin-bottom: 1rem;
  transition: transform 0.35s var(--ease-spring), background 0.3s ease, border-color 0.3s ease;
}
.icon-badge img, .icon-badge svg { width: 1.5rem; height: 1.5rem; }
.card:hover .icon-badge, .service-card:hover .icon-badge {
  transform: translateY(-2px) scale(1.06);
  background: rgba(9, 254, 213, 0.18);
  border-color: var(--border-brand);
}

.glass {
  background: rgba(245, 246, 248, 0.03);
  border: 1px solid rgba(245, 246, 248, 0.09);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

/* Tarjeta compacta de contacto por área */
.contact-card { display: flex; flex-direction: column; gap: 0.3rem; }
.contact-card strong { font-size: 0.95rem; font-weight: 600; }
.contact-card span { font-size: 0.84rem; color: var(--muted); overflow-wrap: anywhere; }
.contact-card:hover span { color: var(--brand); }

/* Listas de pasos */
.steps-list { display: flex; flex-direction: column; gap: 1rem; }
.step-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.step-check {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: rgba(9, 254, 213, 0.15);
  color: var(--brand);
  display: grid; place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  transition: transform 0.3s var(--ease-spring), background 0.3s ease;
}
.step-item:hover .step-check { background: rgba(9, 254, 213, 0.28); transform: scale(1.1); }

/* Datos en dos columnas (sucursal, fichas) */
.data-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 1.75rem; }
@media (min-width: 560px) { .data-grid { grid-template-columns: repeat(2, 1fr); } }
.data-grid .eyebrow { margin-bottom: 0.25rem; }
.data-grid p { margin: 0; }

/* ---------- 9. Formularios ---------- */
.form-field { margin-bottom: 0.9rem; }
.form-field label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.4rem; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--foreground);
  font: inherit;
  font-size: 1rem; /* evita el zoom automático en iOS */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-field textarea { resize: vertical; min-height: 6rem; }
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}
.form-field select option { background: var(--card-bg); color: var(--foreground); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(9, 254, 213, 0.15);
  background: rgba(9, 254, 213, 0.04);
}
input[type="range"] { accent-color: var(--brand); width: 100%; }

.form-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.75rem; }
.form-status { margin-top: 0.85rem; font-size: 0.88rem; color: var(--brand); min-height: 1.2rem; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5, 5, 8, 0.72);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 1.25rem;
}
.modal-backdrop.open { display: flex; animation: fade-in 0.25s ease both; }
.modal-box {
  width: 100%; max-width: 26rem;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 2rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  position: relative;
  animation: modal-in 0.35s var(--ease-spring) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--foreground); }
.modal-box h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.modal-box p.muted { margin-bottom: 1.25rem; font-size: 0.9rem; }
.modal-box .btn { width: 100%; margin-top: 0.5rem; }

/* ---------- 10. CTA final ---------- */
.cta-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  min-height: 20rem;
  text-align: center;
}
.cta-frame video, .cta-frame .cta-bg-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta-frame .hero-overlay {
  background:
    radial-gradient(90% 90% at 50% 50%, rgba(9, 254, 213, var(--glow-cta)), transparent 67%),
    rgba(4, 4, 8, 0.74);
}
.cta-frame .hero-overlay::after { display: none; }
.cta-content { position: relative; z-index: 2; max-width: 36rem; padding: 2.75rem 1.5rem; }
.cta-content h2 { font-size: clamp(1.55rem, 5vw, 2.2rem); }
.cta-content p { margin-top: 0.85rem; color: rgba(245, 246, 248, 0.86); }
.cta-actions { margin-top: 1.6rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) { .cta-actions .btn { width: 100%; } }

/* ---------- 11. Footer ---------- */
.footer {
  position: relative;
  border-top: 1px solid var(--border-soft);
  padding: 3rem 0 2rem;
  background: linear-gradient(180deg, transparent, rgba(9, 254, 213, 0.03));
}
.footer-top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 3rem; } }

.footer-logo img { height: 2.6rem; width: auto; margin-bottom: 1rem; }
.footer-logo p { max-width: 22rem; font-size: 0.9rem; }

/* Los íconos salen de la misma lista que el banner de Contacto.
   Acá el hover es turquesa y no el color de cada marca: el pie es una
   zona tranquila, los colores propios quedan para el banner. */
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.footer-social a,
.footer-social .sin-enlace {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--muted);
  transition: border-color 0.25s ease, transform 0.25s var(--ease-out),
              background 0.25s ease, color 0.25s ease;
}
.footer-social svg { width: 1.1rem; height: 1.1rem; }
.footer-social a:hover {
  border-color: var(--border-brand);
  background: rgba(9, 254, 213, 0.08);
  color: var(--brand);
  transform: translateY(-3px);
}
.footer-social .sin-enlace { border-style: dashed; opacity: 0.5; }

.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
.footer-col h4 {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.footer-col a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: rgba(245, 246, 248, 0.78);
  transition: color 0.2s ease, transform 0.2s var(--ease-out);
}
.footer-col a:hover { color: var(--brand); transform: translateX(3px); }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 900px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.footer-legal { max-width: 42rem; line-height: 1.55; }

/* ---------- 12. Elementos flotantes ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 1.1rem; right: 1.1rem;
  z-index: 80;
  width: 3.25rem; height: 3.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #04120c;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
  opacity: 0;
  transform: scale(0.4) translateY(10px);
  pointer-events: none;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.2s ease, opacity 0.3s ease;
}
.whatsapp-float.is-visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.whatsapp-float.is-visible:hover { transform: scale(1.09); box-shadow: 0 12px 34px rgba(37, 211, 102, 0.62); }
@media (min-width: 640px) { .whatsapp-float { bottom: 1.5rem; right: 1.5rem; width: 3.5rem; height: 3.5rem; } }
.whatsapp-float svg { width: 1.75rem; height: 1.75rem; position: relative; z-index: 1; }
.whatsapp-float-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: wa-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
.whatsapp-float-ring.delay { animation-delay: 1.3s; }
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- 13. Animaciones ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.6deg); }
}
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }

@keyframes float-vertical {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.animate-float-vertical { animation: float-vertical 5s ease-in-out infinite; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(9, 254, 213, 0.25); }
  50% { box-shadow: 0 0 26px 4px rgba(9, 254, 213, 0.35); }
}
.animate-pulse-glow { animation: pulse-glow 3.2s ease-in-out infinite; }

/* Íconos flotando desincronizados dentro de las tarjetas */
.icon-badge.idle-float { animation: float-vertical 4.5s ease-in-out infinite; }
.icon-badge.idle-float.d1 { animation-delay: 0.2s; animation-duration: 4.1s; }
.icon-badge.idle-float.d2 { animation-delay: 0.6s; animation-duration: 4.8s; }
.icon-badge.idle-float.d3 { animation-delay: 1s;   animation-duration: 4.3s; }
.icon-badge.idle-float.d4 { animation-delay: 0.4s; animation-duration: 5.2s; }
.icon-badge.idle-float.d5 { animation-delay: 0.8s; animation-duration: 4.6s; }
.icon-badge.idle-float.d6 { animation-delay: 0.1s; animation-duration: 4.9s; }

/* Título con barrido de brillo */
.glow-text {
  background: linear-gradient(100deg, var(--foreground) 20%, var(--brand) 45%, var(--brand-soft) 55%, var(--foreground) 80%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glow-sweep 7s ease-in-out infinite;
}
@keyframes glow-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Blobs decorativos de fondo */
.bg-blob-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--glow-blob);
  background: radial-gradient(circle, rgba(9, 254, 213, var(--glow-blob-color)), transparent 72%);
  animation: blob-drift 16s ease-in-out infinite;
}
.bg-blob.b2 {
  background: radial-gradient(circle, rgba(9, 254, 213, var(--glow-blob-b2)), transparent 72%);
  animation-duration: 21s;
  animation-delay: -5s;
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(28px, -22px) scale(1.08); }
  66% { transform: translate(-22px, 24px) scale(0.94); }
}

/* Tilt 3D en tarjetas (activado por JS en punteros finos) */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* Reveal al hacer scroll. Sólo se oculta si hay JS (clase .js en <html>). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}
.js [data-reveal="left"]  { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal].reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, calc(0.07s * var(--i, 0)));
}
.js [data-reveal].reveal .step-check { animation: pop-in 0.5s var(--ease-spring) both; }
@keyframes pop-in {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* Contadores y números destacados */
.stat-value { font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 700; color: var(--brand); line-height: 1.1; }
.stat-label { font-size: 0.82rem; color: var(--muted); margin-top: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .whatsapp-float { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- 14. Utilidades ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.stack-sm > * + * { margin-top: 0.5rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.25rem; }
.mt-3 { margin-top: 1.75rem; }
.mt-4 { margin-top: 2.5rem; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.divider { height: 1px; background: var(--border-soft); border: 0; margin: 1.75rem 0; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.gap-lg { gap: 2.5rem; }
.max-34 { max-width: 34rem; }
.max-32 { max-width: 32rem; }

/* Placeholder de imagen (servicios con fotos pendientes) */
.img-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg, rgba(9, 254, 213, 0.08), rgba(255, 255, 255, 0.02));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1.25rem;
  overflow: hidden;
}
.img-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Navegación entre servicios (pie de cada página de servicio) */
.service-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.service-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.86rem;
  color: rgba(245, 246, 248, 0.82);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease-out);
}
.service-nav a::after { content: "\2192"; opacity: 0.5; transition: transform 0.2s var(--ease-out), opacity 0.2s ease; }
.service-nav a:hover {
  border-color: var(--border-brand);
  background: rgba(9, 254, 213, 0.07);
  color: var(--brand);
  transform: translateY(-2px);
}
.service-nav a:hover::after { transform: translateX(3px); opacity: 1; }

/* ===================================================================
   15. Blog
   Listado (blog/index.html) y artículos (blog/<slug>.html).
   =================================================================== */

/* ---------- Filtros por categoría ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(245, 246, 248, 0.78);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease-out);
}
.tag:hover { border-color: var(--border-brand); color: var(--brand); transform: translateY(-2px); }
.tag[aria-pressed="true"] {
  background: rgba(9, 254, 213, 0.12);
  border-color: var(--border-brand);
  color: var(--brand);
}
.tag-count { opacity: 0.5; font-variant-numeric: tabular-nums; }

/* Etiqueta estática de categoría dentro de una tarjeta */
.post-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(9, 254, 213, 0.12);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Grilla y tarjetas de posts ---------- */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 620px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
/* Con una o dos notas, dos columnas: en la de tres quedaría un hueco */
@media (min-width: 620px) { .post-grid.dos { grid-template-columns: repeat(2, 1fr); } }

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  background: var(--card-bg);
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover { border-color: var(--border-brand); box-shadow: var(--shadow-card); transform: translateY(-4px); }
.post-card-body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.5rem; flex: 1; }
.post-card h3 { font-size: 1.12rem; line-height: 1.3; transition: color 0.2s ease; }
.post-card:hover h3 { color: var(--brand); }
.post-card p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.post-card .post-meta { margin-top: auto; padding-top: 0.5rem; }

/* Miniatura: imagen real o degradé de marca con el isotipo */
.post-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(9, 254, 213, 0.22), transparent 60%),
    linear-gradient(150deg, #14141c, #0d0d12);
  border-bottom: 1px solid var(--border-soft);
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-thumb-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.22;
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
}
.post-thumb-mark img { width: 4.5rem; height: auto; object-fit: contain; }
.post-card:hover .post-thumb-mark { opacity: 0.34; transform: scale(1.06); }

/* Post destacado: horizontal en desktop */
.post-card.featured { margin-top: 2.5rem; }
@media (min-width: 860px) {
  .post-card.featured { flex-direction: row; align-items: stretch; }
  .post-card.featured .post-thumb {
    flex: 0 0 46%;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--border-soft);
  }
  .post-card.featured .post-card-body { padding: 2.5rem; justify-content: center; gap: 0.9rem; }
  .post-card.featured h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
  .post-card.featured p { font-size: 1rem; }
}

/* ---------- Metadatos ---------- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.post-meta .sep { opacity: 0.4; }
.post-meta time { font-variant-numeric: tabular-nums; }

/* ---------- Estado vacío / sin resultados ---------- */
.post-empty {
  display: none;
  padding: 3rem 1.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-2xl);
  text-align: center;
  color: var(--muted);
  margin-top: 2.5rem;
}
.post-empty.is-visible { display: block; }

/* ---------- Artículo ---------- */
.post-hero { padding-bottom: 0; }
.post-hero h1 { max-width: 24ch; }
.post-hero .post-meta { margin-top: 1.25rem; font-size: 0.85rem; }

.post-cover {
  margin: 2.5rem 0 0;   /* anula el margen lateral que el navegador le da a <figure> */
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  aspect-ratio: 21 / 9;
  background:
    radial-gradient(70% 120% at 25% 0%, rgba(9, 254, 213, 0.2), transparent 60%),
    linear-gradient(150deg, #14141c, #0d0d12);
  display: grid;
  place-items: center;
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
/* Con foto, la portada respeta la proporción de la imagen (así una
   miniatura 16:9 de YouTube no pierde caras ni el texto de abajo).
   Sin foto queda el recuadro 21:9 con el isotipo. */
.post-cover:has(> img) { aspect-ratio: auto; display: block; }
.post-cover > img { height: auto; }
.post-cover .post-thumb-mark img { width: 7rem; }

.post-layout { max-width: 44rem; margin-inline: auto; }

/* ---------- Tipografía del cuerpo del artículo ---------- */
.prose { font-size: 1.03rem; line-height: 1.75; color: rgba(245, 246, 248, 0.86); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  color: var(--foreground);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.prose h3 {
  margin-top: 2rem;
  font-size: 1.15rem;
  color: var(--foreground);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.prose p { margin-bottom: 0; }

/* Video de YouTube dentro de una nota (se incrusta pegando el link solo en una línea) */
.post-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: #000;
}
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose .post-video { margin-block: 1.75rem; }
/* El link "Mirá la entrevista completa" que va justo debajo del video */
.prose .post-video + p { margin-top: 0.75rem; font-size: 0.92rem; }
.prose strong { color: var(--foreground); font-weight: 600; }
.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(9, 254, 213, 0.4);
  transition: text-decoration-color 0.2s ease;
}
.prose a:hover { text-decoration-color: var(--brand); }
.prose ul, .prose ol { padding-left: 1.35rem; margin-bottom: 0; }
.prose li + li { margin-top: 0.5rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.5rem; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem; top: 0.72em;
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--brand);
}
.prose ol { list-style: decimal; }
.prose ol::marker, .prose ol > li::marker { color: var(--brand); font-weight: 600; }
.prose blockquote {
  margin-inline: 0;
  padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: rgba(9, 254, 213, 0.06);
  color: var(--foreground);
  font-size: 1.05rem;
}
.prose blockquote p { margin: 0; }
.prose img, .prose video {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  width: 100%;
}
.prose figure { margin: 2rem 0; }
.prose figcaption { margin-top: 0.7rem; font-size: 0.85rem; color: var(--muted); text-align: center; }
.prose hr { border: 0; border-top: 1px solid var(--border-soft); margin: 2.5rem 0; }
.prose code {
  padding: 0.15em 0.4em;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.prose pre {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #0d0d12;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
}
.prose pre code { padding: 0; background: none; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  display: block;
  overflow-x: auto;
}
.prose th, .prose td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-soft); text-align: left; }
.prose th { color: var(--foreground); font-weight: 600; white-space: nowrap; }

/* ---------- Compartir ---------- */
.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-soft);
}
.post-share span { font-size: 0.82rem; color: var(--muted); margin-right: 0.25rem; }
.post-share a, .post-share button {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(245, 246, 248, 0.8);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease-out);
}
.post-share a:hover, .post-share button:hover {
  border-color: var(--border-brand);
  background: rgba(9, 254, 213, 0.08);
  color: var(--brand);
  transform: translateY(-2px);
}
.post-share svg { width: 1.05rem; height: 1.05rem; }
.copy-ok { font-size: 0.8rem; color: var(--brand); opacity: 0; transition: opacity 0.25s ease; }
.copy-ok.is-visible { opacity: 1; }

/* ---------- Anterior / siguiente ---------- */
.post-pager { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .post-pager { grid-template-columns: repeat(2, 1fr); } }
.post-pager a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease-out);
}
.post-pager a:hover { border-color: var(--border-brand); background: rgba(9, 254, 213, 0.05); transform: translateY(-3px); }
.post-pager small { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.post-pager strong { font-size: 0.98rem; font-weight: 600; line-height: 1.35; }
.post-pager .next { text-align: right; }

/* Campo trampa para bots: fuera de la vista pero sin display:none,
   que algunos bots detectan y saltean. */
.campo-trampa {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.form-status.error { color: #ff9b9b; }
.form-field.tiene-error input,
.form-field.tiene-error textarea { border-color: #ff6b6b; }
.form-field .error-campo { font-size: 0.78rem; color: #ff9b9b; margin-top: 0.35rem; }

/* ---------- Servicio "próximamente" ---------- */
.badge-proximamente {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(160, 140, 255, 0.4);
  border-radius: 999px;
  background: rgba(160, 140, 255, 0.12);
  color: #c3b6ff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.service-card.proximamente {
  background: linear-gradient(160deg, rgba(160, 140, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-style: dashed;
}
.service-card.proximamente:hover { border-color: rgba(160, 140, 255, 0.45); }
.service-card.proximamente::before {
  background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 0%), rgba(160, 140, 255, 0.14), transparent 65%);
}

.aviso-proximamente {
  margin-top: 1.75rem;
  max-width: 40rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(160, 140, 255, 0.3);
  border-left-width: 3px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: rgba(160, 140, 255, 0.08);
  font-size: 0.92rem;
  color: rgba(245, 246, 248, 0.88);
}
.aviso-proximamente strong { color: #c3b6ff; }

/* ---------- Simulador de cuotas ---------- */
.valor-sim { color: var(--foreground); font-weight: 600; }
.rango-limites {
  display: flex; justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.78rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.plazos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.plazos .plazo-btn { min-width: 3.1rem; }
.sim-resultado { margin-top: 1.5rem; text-align: center; gap: 1rem; }
.sim-resultado .stat-value { font-variant-numeric: tabular-nums; margin-top: 0.2rem; }
.sim-resultado .stat-value.neutro { color: var(--foreground); }
.chico { font-size: 0.82rem; }
.sim-aclaracion {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--border-brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}
.sim-aclaracion strong { color: rgba(245, 246, 248, 0.9); }

/* ===================================================================
   16. Hero a dos columnas (texto + foto) para las páginas de servicio
   =================================================================== */

.hero-split .container { position: relative; z-index: 1; }

/* Con foto al lado, el encabezado necesita más aire abajo */
.hero-split { padding-bottom: 2.5rem; }
@media (min-width: 900px) { .hero-split { padding-bottom: 4rem; } }

.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}
@media (min-width: 1200px) { .hero-split-grid { gap: 4.5rem; } }

.hero-split h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.4rem);
  line-height: 1.08;
  max-width: 14ch;
}
.hero-split .hero-bajada {
  margin-top: 1.15rem;
  max-width: 34rem;
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  color: var(--muted);
}

/* Etiqueta del servicio, como pastilla */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-brand);
  border-radius: 999px;
  background: rgba(9, 254, 213, 0.12);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.eyebrow-pill::before { content: none; }

/* ---------- Marco de la foto ---------- */
.hero-figura {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  background: linear-gradient(150deg, rgba(9, 254, 213, 0.1), rgba(255, 255, 255, 0.02));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
@media (min-width: 900px) { .hero-figura { aspect-ratio: 5 / 4; } }
.hero-figura img { width: 100%; height: 100%; object-fit: cover; }

/* Sombreado suave para que la foto no compita con el texto */
.hero-figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(6, 6, 10, 0.35));
  pointer-events: none;
}

/* ---------- Placeholder mientras no hay foto ---------- */
.foto-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: inherit;
  color: var(--muted);
}
.foto-placeholder svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--brand);
  opacity: 0.75;
}
.foto-placeholder .fp-titulo {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(245, 246, 248, 0.9);
}


/* ===================================================================
   17. Bloques con foto al costado (texto + imagen alternados)
   =================================================================== */

.bloque-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) {
  .bloque-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
}
@media (min-width: 1200px) { .bloque-media { gap: 4.5rem; } }

/* En mobile la foto va siempre debajo del texto, sin importar el orden real */
@media (max-width: 899px) {
  .bloque-media > .bloque-figura { order: 2; }
  .bloque-media > .bloque-texto { order: 1; }
}

.bloque-media h2 { max-width: 18ch; }
.bloque-texto > .muted { max-width: 34rem; }

/* Marco compartido con la foto del encabezado */
.bloque-figura {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  background: linear-gradient(150deg, rgba(9, 254, 213, 0.1), rgba(255, 255, 255, 0.02));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}
.bloque-figura img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Lista con tilde ---------- */
.lista-check { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  color: rgba(245, 246, 248, 0.88);
}
.check-icono {
  flex: none;
  width: 1.65rem; height: 1.65rem;
  display: grid; place-items: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(9, 254, 213, 0.22);
  background: rgba(9, 254, 213, 0.12);
  color: var(--brand);
  transition: background 0.25s ease, transform 0.25s var(--ease-spring);
}
.check-icono svg { width: 0.85rem; height: 0.85rem; }
.lista-check li:hover .check-icono { background: rgba(9, 254, 213, 0.22); transform: scale(1.08); }

/* ---------- Ficha "Para quién" ---------- */
.para-quien {
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
}
.para-quien .eyebrow { margin-bottom: 0.45rem; }
.para-quien p:last-child { font-size: 0.92rem; }

/* ---------- Pasos numerados ---------- */
.pasos { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: paso; }
.paso { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.6rem 0; }
.paso-numero {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: 0.6rem;
  background: rgba(9, 254, 213, 0.15);
  border: 1px solid rgba(9, 254, 213, 0.25);
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 0.25s ease, transform 0.25s var(--ease-spring);
}
.paso:hover .paso-numero { background: rgba(9, 254, 213, 0.26); transform: scale(1.08); }
.paso-texto { display: flex; flex-direction: column; gap: 0.15rem; }
.paso-texto strong { font-size: 0.95rem; font-weight: 600; color: var(--foreground); }
.paso-texto .muted { font-size: 0.88rem; line-height: 1.55; }

/* ===================================================================
   18. Tarjetas de servicio con foto (grilla del inicio)
   =================================================================== */

/* El padding pasa al cuerpo: la foto va a sangre contra los bordes */
.service-card { padding: 0; gap: 0; overflow: hidden; }
@media (min-width: 640px) { .service-card { padding: 0; } }

.service-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  flex: 1;
}
@media (min-width: 640px) { .service-card-body { padding: 1.75rem; } }
.service-card-body > p { color: var(--muted); font-size: 0.94rem; margin: 0; }
.service-card-body .card-actions { margin-top: auto; padding-top: 1rem; }

.service-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(90% 120% at 25% 0%, rgba(9, 254, 213, 0.2), transparent 62%),
    linear-gradient(150deg, #14141c, #0d0d12);
}
.service-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}
.service-card:hover .service-thumb img { transform: scale(1.06); }

/* Sin foto: el ícono del servicio, grande y tenue, sobre el degradé */
.service-thumb-icono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.service-thumb-icono svg {
  width: 3.4rem; height: 3.4rem;
  opacity: 0.5;
  stroke-width: 1.2;
}
.service-card:hover .service-thumb-icono { transform: scale(1.07); }
.service-card:hover .service-thumb-icono svg { opacity: 0.75; }

/* La de "próximamente" mantiene su tinte propio */
.service-card.proximamente .service-thumb {
  background:
    radial-gradient(90% 120% at 25% 0%, rgba(160, 140, 255, 0.2), transparent 62%),
    linear-gradient(150deg, #16141f, #0d0d12);
}
.service-card.proximamente .service-thumb-icono svg { stroke: #c3b6ff; }

/* ===================================================================
   19. Para quién es · El proceso · Preguntas frecuentes
   =================================================================== */

/* ---------- Para quién es ---------- */
.grid-3 > .card .check-icono { margin-bottom: 0.25rem; }
.grid-3 > .card p { font-size: 0.95rem; color: rgba(245, 246, 248, 0.86); }

/* ---------- El proceso ---------- */
.proceso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  counter-reset: proceso;
}
@media (min-width: 780px) { .proceso { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

.proceso-paso {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  transition: border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.proceso-paso:hover { border-color: var(--border-brand); transform: translateY(-3px); }
.proceso-paso h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.proceso-paso p { font-size: 0.92rem; margin: 0; }

.proceso-numero {
  display: grid;
  place-items: center;
  width: 2.35rem; height: 2.35rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(9, 254, 213, 0.28);
  background: rgba(9, 254, 213, 0.14);
  color: var(--brand);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 0.25s ease, transform 0.3s var(--ease-spring);
}
.proceso-paso:hover .proceso-numero { background: rgba(9, 254, 213, 0.26); transform: scale(1.08); }

/* Línea que conecta los pasos en desktop */
@media (min-width: 780px) {
  .proceso-paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.9rem;
    right: -1.75rem;
    width: 1.75rem;
    height: 1px;
    background: linear-gradient(90deg, var(--border-brand), transparent);
  }
}

/* ---------- Preguntas frecuentes ---------- */
.faq { max-width: 46rem; display: flex; flex-direction: column; gap: 0.75rem; }

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.faq-item:hover { border-color: var(--border-brand); }
.faq-item[open] { border-color: var(--border-brand); background: var(--card-bg-hover); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  list-style: none;
  transition: color 0.2s ease;
}
/* Saca el triangulito nativo */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--brand); }
.faq-item[open] summary { color: var(--brand); }

.faq-flecha {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  color: var(--brand);
  transition: transform 0.3s var(--ease-out);
}
.faq-item[open] .faq-flecha { transform: rotate(180deg); }

.faq-respuesta {
  padding: 0 1.4rem 1.3rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
.faq-item[open] .faq-respuesta { animation: faq-abrir 0.3s var(--ease-out) both; }
@keyframes faq-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.max-46 { max-width: 46rem; }

/* ===================================================================
   20. Mockup de la app y marco de video
   =================================================================== */

.mockup-telefono {
  position: relative;
  width: min(19rem, 82vw);
  margin-inline: auto;
  aspect-ratio: 9 / 19;
  padding: 0.6rem;
  border-radius: 2.4rem;
  border: 1px solid var(--border-soft);
  background: linear-gradient(160deg, #1b1b24, #0e0e14);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* Isla superior del teléfono */
.mockup-telefono::before {
  content: "";
  position: absolute;
  top: 1.15rem; left: 50%;
  transform: translateX(-50%);
  width: 5rem; height: 1.15rem;
  border-radius: 999px;
  background: #08080c;
  z-index: 2;
}
.mockup-pantalla {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 1.9rem;
  background:
    radial-gradient(85% 60% at 50% 0%, rgba(9, 254, 213, 0.16), transparent 60%),
    linear-gradient(160deg, #14141c, #0b0b0f);
}
.mockup-pantalla img { width: 100%; height: 100%; object-fit: cover; }
.mockup-pantalla .foto-placeholder { border: none; padding: 2rem 1.25rem; }

.marco-video {
  position: relative;
  margin: 0 auto;
  max-width: 52rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(9, 254, 213, 0.14), transparent 62%),
    linear-gradient(150deg, #14141c, #0d0d12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}
.marco-video video { width: 100%; height: 100%; object-fit: cover; }
/* En pantalla completa el video se muestra entero, sin recortar: el "cover"
   de arriba sirve para el marco, pero en pantalla completa agranda un video
   vertical hasta llenar el ancho del monitor y le corta arriba y abajo.
   Van en reglas separadas: si un navegador no entiende uno de los dos
   selectores, descarta la regla entera. */
.marco-video video:fullscreen { object-fit: contain; background: #000; }
.marco-video video:-webkit-full-screen { object-fit: contain; background: #000; }
/* Videos grabados para celular (9:16): centrados y sin recortar.
   Lo más grande posible sin pasar el 85% del alto de la pantalla,
   para que se vea entero sin scrollear. */
.marco-video.vertical {
  max-width: min(27rem, 100%, calc(85vh * 9 / 16));
  aspect-ratio: 9 / 16;
}
.marco-video .foto-placeholder svg { width: 3rem; height: 3rem; }

/* ===================================================================
   21. Dónde encontrarnos: datos + mapa
   =================================================================== */

.ubicacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 900px) {
  .ubicacion { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; }
}

.ubicacion-datos { display: flex; flex-direction: column; gap: 1.35rem; }
.dato { padding-left: 0.9rem; border-left: 2px solid rgba(9, 254, 213, 0.25); }
.dato .eyebrow { margin-bottom: 0.2rem; }
.dato p:last-child { font-size: 0.95rem; }

.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  background: linear-gradient(150deg, #14141c, #0d0d12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}
@media (min-width: 900px) { .mapa { aspect-ratio: 16 / 11; } }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Capturas de la app que ya vienen con el marco del teléfono dibujado.
   No se envuelven en .mockup-telefono: solo se les da sombra y un resplandor
   de marca detrás, para que se despeguen del fondo. */
.capturas-app {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}
@media (min-width: 640px) { .capturas-app { gap: 2.5rem; } }

.captura-app {
  position: relative;
  margin: 0;
  width: min(17rem, 68vw);
  transition: transform 0.4s var(--ease-out);
}
.captura-app img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 1.6rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
/* Halo turquesa detrás de cada pantalla */
.captura-app::before {
  content: "";
  position: absolute;
  inset: 12% 8% 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9, 254, 213, 0.28), transparent 70%);
  filter: blur(48px);
  z-index: 0;
}
.captura-app:hover { transform: translateY(-6px); }

/* En desktop se inclinan levemente una hacia la otra */
@media (min-width: 780px) {
  .captura-app:first-child { transform: rotate(-2.5deg); }
  .captura-app:last-child { transform: rotate(2.5deg); }
  .captura-app:first-child:hover { transform: rotate(-2.5deg) translateY(-6px); }
  .captura-app:last-child:hover { transform: rotate(2.5deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .captura-app, .captura-app:hover { transform: none !important; }
}

/* ===================================================================
   22. Canal de WhatsApp
   El verde ya es el color de WhatsApp en este sitio (botón flotante),
   así que se reusa como acento para que se lea al instante de qué es.
   =================================================================== */
:root {
  --wa: #25d366;
  --wa-claro: #5cf08f;
  --wa-borde: rgba(37, 211, 102, 0.35);
}

.btn-canal {
  background: linear-gradient(135deg, var(--wa-claro), var(--wa));
  color: #04120c;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.22);
}
.btn-canal:hover { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4); }
.btn-canal svg { width: 1.15rem; height: 1.15rem; }

/* ---------- Franja del inicio ---------- */
.canal-banda {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid var(--wa-borde);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(80% 140% at 12% 0%, rgba(37, 211, 102, 0.16), transparent 60%),
    linear-gradient(150deg, rgba(37, 211, 102, 0.07), rgba(255, 255, 255, 0.02));
}
@media (min-width: 780px) {
  .canal-banda {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    padding: 2.5rem 3rem;
  }
}
.canal-banda .eyebrow { color: var(--wa-claro); }
.canal-banda .eyebrow::before { background: var(--wa); box-shadow: 0 0 8px rgba(37, 211, 102, 0.8); }
.canal-banda h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); }
.canal-texto > .muted { max-width: 44ch; }

/* Tabla de surf al fondo, apenas insinuada */
.canal-banda::after {
  content: "🏄";
  position: absolute;
  right: -0.5rem; bottom: -1.5rem;
  font-size: 9rem;
  line-height: 1;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 779px) { .canal-banda::after { font-size: 6rem; opacity: 0.05; } }

.canal-accion { position: relative; z-index: 1; }
.canal-accion .btn { width: 100%; }
@media (min-width: 780px) { .canal-accion .btn { width: auto; } }
.canal-nota { margin-top: 0.6rem; font-size: 0.78rem; color: var(--muted); text-align: center; }

/* ---------- Tira del pie ---------- */
.canal-tira {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--wa-borde);
  border-radius: var(--radius-xl);
  background: rgba(37, 211, 102, 0.07);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.canal-tira:hover {
  background: rgba(37, 211, 102, 0.13);
  border-color: var(--wa);
  transform: translateY(-2px);
}
.canal-tira-icono {
  flex: none;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--wa);
  color: #04120c;
}
.canal-tira-icono svg { width: 1.35rem; height: 1.35rem; }
.canal-tira-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.canal-tira-texto strong { font-size: 0.95rem; font-weight: 600; }
.canal-tira-texto span { font-size: 0.85rem; color: var(--muted); }
.canal-tira-flecha { margin-left: auto; color: var(--wa-claro); transition: transform 0.25s var(--ease-out); }
.canal-tira:hover .canal-tira-flecha { transform: translateX(4px); }
@media (max-width: 559px) {
  .canal-tira-texto span { display: none; }
  .canal-tira-flecha { display: none; }
}

/* ---------- Entrada del menú móvil ---------- */
.mobile-canal {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--wa-borde);
  border-radius: var(--radius-lg);
  background: rgba(37, 211, 102, 0.09);
  font-size: 0.92rem;
  color: var(--foreground);
}
.mobile-canal svg { flex: none; width: 1.3rem; height: 1.3rem; color: var(--wa-claro); }
.mobile-canal strong { color: var(--wa-claro); font-weight: 600; }

/* ---------- Tarjeta de Contacto ---------- */
.card-canal { border-color: var(--wa-borde); }
.card-canal:hover { border-color: var(--wa); }
.card-canal::before {
  background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 0%), rgba(37, 211, 102, 0.14), transparent 65%);
}
.icono-canal {
  border-color: var(--wa-borde);
  background: rgba(37, 211, 102, 0.14);
  color: var(--wa-claro);
}
.icono-canal svg { color: var(--wa-claro); }

/* El nombre del canal y su bajada, en dos líneas.
   El corte lo marca un <br>: dejado al navegador quedaba
   "Sur Finanzas Central el / nuevo Surfi". */
.canal-titulo { max-width: none; text-wrap: balance; }
.canal-tagline {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wa-claro);
}
/* Versión en línea, para la tira del pie */
.canal-tagline-inline { color: var(--wa-claro); white-space: nowrap; }
.canal-tira-texto strong { display: block; }

/* Los datos de la sucursal que son enlaces (teléfono, mail) tienen que
   verse clickeables: sin esto heredan color:inherit y parecen texto. */
.dato a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(9, 254, 213, 0.35);
  transition: text-decoration-color 0.2s ease;
}
.dato a:hover { text-decoration-color: var(--brand); }

/* ===================================================================
   23. Últimas novedades en el inicio
   =================================================================== */
.encabezado-novedades {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
@media (min-width: 780px) {
  .encabezado-novedades {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}
.encabezado-novedades .section-heading { margin: 0; }

.enlace-todas {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand);
  transition: color 0.2s ease, gap 0.2s var(--ease-out);
}
.enlace-todas:hover { color: var(--brand-soft); gap: 0.7rem; }
.enlace-todas span { transition: transform 0.2s var(--ease-out); }
.enlace-todas:hover span { transform: translateX(2px); }

/* ===================================================================
   24. El surfista
   =================================================================== */

/* Sube y baja con una inclinación que acompaña, como sobre una ola.
   Cuatro pasos desiguales para que no se lea como un rebote mecánico. */
@keyframes surfeando {
  0%,
  100% { transform: translateY(0) rotate(-8deg); }
  20%  { transform: translateY(-5px) rotate(4deg); }
  45%  { transform: translateY(2px) rotate(9deg); }
  70%  { transform: translateY(-3px) rotate(-2deg); }
  85%  { transform: translateY(1px) rotate(-6deg); }
}

.surfi {
  display: inline-block;
  font-size: 1.4em;            /* más grande que el texto que acompaña */
  line-height: 1;
  letter-spacing: 0;
  transform-origin: 50% 80%;   /* pivota sobre la tabla, no sobre el centro */
  animation: surfeando 2.8s ease-in-out infinite;
}

/* "El nuevo Surfi" del hero del inicio: píldora más grande y con brillo,
   igual que en la página de mantenimiento, para que se lea primero. */
.eyebrow-surfi {
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1.2rem 0.5rem 1.05rem;
  border: 1px solid rgba(9, 254, 213, 0.32);
  border-radius: 999px;
  background: rgba(9, 254, 213, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 28px rgba(9, 254, 213, 0.16);
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  letter-spacing: 0.16em;
}
.eyebrow-surfi::before { content: none; }
.eyebrow-surfi .surfi {
  font-size: 1.85em;
  filter: drop-shadow(0 0 10px rgba(9, 254, 213, 0.45));
}

/* ---------- Más movimiento en la franja del canal ---------- */

/* Flota entera, muy despacio */
@keyframes canal-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Un brillo que cruza la franja cada tanto */
@keyframes canal-destello {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  60%,
  100% { transform: translateX(220%) skewX(-18deg); }
}

.canal-banda {
  animation: canal-flotar 7s ease-in-out infinite;
  will-change: transform;
}
.canal-banda::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(37, 211, 102, 0.1), transparent);
  animation: canal-destello 9s ease-in-out infinite;
  pointer-events: none;
}

/* El surfista del fondo también surfea, más amplio y más lento */
.canal-banda::after {
  animation: surfeando 5.5s ease-in-out infinite;
  transform-origin: 50% 80%;
}

/* El botón respira, para que el ojo vuelva ahí */
@keyframes canal-latido {
  0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.22); }
  50% { box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5); }
}
.canal-banda .btn-canal { animation: canal-latido 3.4s ease-in-out infinite; }
.canal-banda .btn-canal:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .surfi,
  .canal-banda,
  .canal-banda::before,
  .canal-banda::after,
  .canal-banda .btn-canal { animation: none !important; }
}

/* ===================================================================
   25. Banner de redes sociales
   =================================================================== */

.redes-banda {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  padding: 2rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(80% 130% at 85% 0%, rgba(9, 254, 213, 0.12), transparent 62%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
}
@media (min-width: 820px) {
  .redes-banda {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    padding: 2.5rem 3rem;
  }
}
.redes-texto h2 { font-size: clamp(1.35rem, 3.4vw, 1.9rem); max-width: 18ch; }
.redes-texto > .muted { max-width: 40ch; }

.redes-lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (min-width: 820px) { .redes-lista { gap: 1.15rem; } }

.red {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}

.red-icono {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  color: var(--foreground);
  transition: transform 0.25s var(--ease-spring), border-color 0.2s ease,
              background 0.2s ease, color 0.2s ease;
}
@media (min-width: 820px) { .red-icono { width: 3.8rem; height: 3.8rem; } }
.red-icono svg { width: 1.5rem; height: 1.5rem; }

.red-nombre {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s ease;
}

/* Al pasar el mouse cada red toma su propio color: ayuda a reconocerla
   de un vistazo sin que el estado normal se vuelva un arcoíris. */
a.red:hover .red-icono { transform: translateY(-4px) scale(1.05); }
a.red:hover .red-nombre { color: var(--foreground); }

a.red-instagram:hover .red-icono {
  border-color: #E1306C;
  background: rgba(225, 48, 108, 0.14);
  color: #FF6E9C;
}
a.red-tiktok:hover .red-icono {
  border-color: #25F4EE;
  background: rgba(37, 244, 238, 0.14);
  color: #25F4EE;
}
a.red-facebook:hover .red-icono {
  border-color: #1877F2;
  background: rgba(24, 119, 242, 0.14);
  color: #5A9BF6;
}
a.red-x:hover .red-icono {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
a.red-youtube:hover .red-icono {
  border-color: #FF0033;
  background: rgba(255, 0, 51, 0.14);
  color: #FF5C7A;
}

/* Red sin URL cargada todavía */
.red.sin-enlace { opacity: 0.55; }
.red.sin-enlace .red-icono { border-style: dashed; }

/* ===================================================================
   26. Banner de atención personalizada (WhatsApp)
   Mismo verde que el resto de WhatsApp, pero en formato de fila: ícono,
   texto y botón. Sin animación de flotado para no competir con el canal.
   =================================================================== */
.atencion-banda {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 1.25rem;
  padding: 1.75rem;
  border: 1px solid var(--wa-borde);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(70% 160% at 0% 50%, rgba(37, 211, 102, 0.13), transparent 65%),
    rgba(255, 255, 255, 0.02);
}
@media (min-width: 780px) {
  .atencion-banda {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2.5rem;
  }
}

.atencion-icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wa-claro), var(--wa));
  color: #04120c;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}
.atencion-icono svg { width: 1.9rem; height: 1.9rem; }
/* Onda que sale del ícono, como una notificación */
.atencion-icono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wa);
  animation: atencion-onda 2.8s ease-out infinite;
}
@keyframes atencion-onda {
  0%   { transform: scale(1); opacity: 0.7; }
  80%,
  100% { transform: scale(1.6); opacity: 0; }
}

.atencion-texto .eyebrow { color: var(--wa-claro); }
.atencion-texto .eyebrow::before { background: var(--wa); box-shadow: 0 0 8px rgba(37, 211, 102, 0.8); }
.atencion-texto h2 { font-size: clamp(1.3rem, 3.2vw, 1.75rem); text-wrap: balance; }
.atencion-texto .muted { margin-top: 0.4rem; max-width: 52ch; }

.atencion-banda .btn { width: 100%; justify-content: center; }
@media (min-width: 780px) { .atencion-banda .btn { width: auto; white-space: nowrap; } }

@media (prefers-reduced-motion: reduce) {
  .atencion-icono::after { animation: none; opacity: 0; }
}

/* ===================================================================
   27. Tarjetas parejas
   Dos tarjetas lado a lado con la misma altura y el botón alineado
   abajo, aunque el texto de una sea más largo (WhatsApp y canal, en
   Contacto). El párrafo crece y empuja el botón al fondo.
   =================================================================== */
.cards-parejas { align-items: stretch; }
.cards-parejas > .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cards-parejas > .card > .muted { flex-grow: 1; }

/* ===================================================================
   28. Marca de agua del fondo
   El isotipo queda fijo detrás de todo, muy tenue. No se mueve con el
   scroll: la página pasa por encima. Va con z-index:-1, así se apoya
   sobre el fondo del sitio y por debajo de cualquier contenido.
   =================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../assets/branding/isotipo-sur.png");
  background-repeat: no-repeat;
  background-position: center 45%;
  background-size: min(78vw, 30rem);
  opacity: 0.04;
  filter: blur(0.4px);
}
@media (min-width: 900px) {
  body::before { background-size: min(48vw, 38rem); opacity: 0.045; }
}