/* ====================================================================
   ProDAO landing — sistema de diseño (port HTML/JS de la versión React)
   Light · navy/cyan · fuente Sora.  Recetas equivalentes a landingUI.tsx
   ==================================================================== */

:root {
  --ds-navy: #20274c;
  --ds-navy-2: #2e3866;
  --ds-cyan: #2daae1;
  --ds-cyan-ink: #1786bc;
  --ds-ink: #1b2138;
  --ds-text: #3c4458;
  --ds-muted: #7e8aa0;
  --ds-faint: #a6b0c2;
  --ds-line: #e7ecf4;
  --ds-line-soft: #eff3f9;
  --ds-bg: #fafbfd;
  --ds-surface: #ffffff;
  --ds-surface-2: #f5f8fc;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--ds-bg);
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }
a { color: inherit; }

/* ------------------------------------------------------------------ */
/* Layout primitives                                                   */
/* ------------------------------------------------------------------ */
.wrap { margin-inline: auto; width: 100%; max-width: 80rem; padding-inline: 1.25rem; }
@media (min-width: 768px) { .wrap { padding-inline: 2rem; } }

.section {
  position: relative; overflow: hidden; padding-block: 5rem;
  background-color: var(--ds-bg);
  background-image: radial-gradient(440px 440px at 100% -80px, rgba(45,170,225,.18), rgba(45,170,225,0) 70%);
  background-repeat: no-repeat;
}
.section.alt {
  background-color: var(--ds-surface-2);
  background-image: radial-gradient(440px 440px at 0% -80px, rgba(45,170,225,.18), rgba(45,170,225,0) 70%);
}
.section.tight { padding-block: 3rem; }
@media (min-width: 768px) {
  .section { padding-block: 7rem; }
  .section.tight { padding-block: 4rem; }
}

.glow {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
  background: rgba(45, 170, 225, 0.15);
  filter: blur(64px);
}

/* ------------------------------------------------------------------ */
/* Tipografía                                                          */
/* ------------------------------------------------------------------ */
.eyebrow {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ds-cyan-ink);
}
.eyebrow.center { display: block; text-align: center; }

.display {
  font-size: 2.25rem; line-height: 1.08; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ds-ink);
}
.h1 { font-size: 1.875rem; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: var(--ds-ink); }
.h2 { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ds-ink); }
.h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ds-ink); }
.lead { font-size: 1.125rem; line-height: 1.7; color: var(--ds-muted); }

@media (min-width: 768px) {
  .display { font-size: 3rem; }
  .h1 { font-size: 2.25rem; }
  .h2 { font-size: 2.5rem; line-height: 1.1; }
}
@media (min-width: 1280px) {
  .display { font-size: 3.4rem; }
  .h1 { font-size: 3rem; }
}

.accent-text {
  background: linear-gradient(to right, #22d3ee, #3b82f6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------------ */
/* Tarjetas                                                            */
/* ------------------------------------------------------------------ */
.card {
  border-radius: 1rem; border: 1px solid var(--ds-line); background: var(--ds-surface);
  box-shadow: 0 1px 2px rgba(28,38,64,0.04), 0 18px 40px -28px rgba(28,38,64,0.25);
}
.card-pad { padding: 1.5rem; }
@media (min-width: 768px) { .card-pad { padding: 1.75rem; } }

.lift { transition: transform .2s, box-shadow .2s; }
.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(28,38,64,0.05), 0 28px 52px -30px rgba(28,38,64,0.38);
}

.ic-tile {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .75rem;
  background: var(--ds-surface-2); color: var(--ds-cyan-ink); flex: none;
}
.ic-tile svg { width: 22px; height: 22px; }
.ic-tile.emerald { background: #ecfdf5; color: #059669; }
.ic-tile.navy { background: rgba(45,170,225,0.15); color: var(--ds-cyan); }
.ic-tile.sm { width: 2.5rem; height: 2.5rem; }
.ic-tile.sm svg { width: 20px; height: 20px; }

/* Tile pequeño (FeatureRow / menú) */
.ic-soft {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem;
  background: var(--ds-surface-2); color: var(--ds-cyan-ink); flex: none;
}
.ic-soft svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ */
/* Botones                                                             */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .75rem; font-weight: 700; padding: .75rem 1.25rem; font-size: .875rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}
.btn.lg { padding: .875rem 1.5rem; font-size: 15px; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--ds-navy); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.btn-primary:hover { background: var(--ds-navy-2); }
.btn-outline { border-color: var(--ds-line); background: var(--ds-surface); color: var(--ds-ink); }
.btn-outline:hover { border-color: var(--ds-cyan); color: var(--ds-cyan-ink); }
.btn-ghost { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.2); }

/* ------------------------------------------------------------------ */
/* Reveal-on-scroll (reemplaza framer-motion whileInView)              */
/* Activado por IntersectionObserver en app.js (.is-visible)           */
/* ------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .anim-float, .anim-bob, .anim-glow, .globe-path, .globe-orbit, .globe-ball, .geo-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ */
/* Animaciones en bucle (reemplazan los loops de framer-motion)        */
/* ------------------------------------------------------------------ */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.anim-float { animation: float 5s ease-in-out infinite; }

@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
.anim-bob { animation: bob 1.8s ease-in-out infinite; }

@keyframes glowPulse {
  0%,100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.08); opacity: .9; }
}
.anim-glow { animation: glowPulse 5.5s ease-in-out infinite; }

@keyframes dashFlow { to { stroke-dashoffset: -430; } }
.globe-path { animation: dashFlow 3.4s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.globe-orbit { transform-origin: center; animation: spin 48s linear infinite; }

@keyframes nodePulse {
  0%,100% { r: 6; opacity: .5; }
  50% { r: 16; opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* NavBar                                                              */
/* ------------------------------------------------------------------ */
.nav-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  border-bottom: 1px solid var(--ds-line);
  background: rgba(255,255,255,.85); backdrop-filter: blur(16px);
}
.nav-inner {
  margin-inline: auto; display: flex; height: 4.5rem; max-width: 80rem;
  align-items: center; justify-content: space-between; gap: .75rem;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .nav-inner { padding-inline: 2rem; } }
.nav-logo img { height: 4.5rem; width: auto; object-fit: contain; }

.nav-links { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link {
  border-radius: 9999px; padding: .5rem 1rem; font-size: .875rem; font-weight: 600;
  color: var(--ds-text); text-decoration: none; cursor: pointer; background: none; border: 0;
  font-family: inherit; transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: .25rem;
}
.nav-link:hover, .nav-link.active { background: var(--ds-surface-2); color: var(--ds-ink); }

.nav-dd { position: relative; }
.nav-dd-panel {
  position: absolute; left: 0; top: 100%; width: 16rem; padding-top: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-dd:hover .nav-dd-panel { opacity: 1; visibility: visible; transform: none; }
.nav-dd:hover .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-caret { transition: transform .15s; width: 16px; height: 16px; }
.nav-dd-card {
  overflow: hidden; border-radius: 1rem; border: 1px solid var(--ds-line);
  background: var(--ds-surface); padding: .5rem; box-shadow: 0 18px 50px -20px rgba(28,38,64,.35);
}
.nav-dd-item {
  display: flex; align-items: center; gap: .75rem; border-radius: .75rem;
  padding: .625rem .75rem; font-size: .875rem; color: var(--ds-text); text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-dd-item:hover { background: var(--ds-surface-2); color: var(--ds-cyan-ink); }
.nav-dd-item .ttl { font-weight: 600; color: var(--ds-ink); display: block; line-height: 1.2; }
.nav-dd-item .hint { font-size: 11.5px; color: var(--ds-muted); }

.nav-cta {
  display: none; align-items: center; gap: .5rem; border-radius: .75rem;
  background: var(--ds-navy); padding: .625rem 1.25rem; font-size: .875rem;
  font-weight: 700; color: #fff; text-decoration: none; transition: background .15s;
}
.nav-cta:hover { background: var(--ds-navy-2); }
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }

.nav-burger {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem;
  border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink); cursor: pointer;
}
@media (min-width: 1024px) { .nav-burger { display: none; } }

.nav-progress { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--ds-surface-2); }
.nav-progress > div { height: 100%; transform-origin: left; background: var(--ds-cyan); transform: scaleX(0); }

.nav-mobile { display: none; border-top: 1px solid var(--ds-line); background: var(--ds-surface); padding: .75rem 1.25rem 1.25rem; }
.nav-mobile.open { display: block; }
@media (min-width: 1024px) { .nav-mobile, .nav-mobile.open { display: none; } }
.nav-mobile nav { margin-inline: auto; display: flex; max-width: 80rem; flex-direction: column; gap: .5rem; }
.nav-mobile-label { padding: .5rem .25rem 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--ds-faint); }
.nav-mobile-link {
  display: flex; align-items: center; gap: .5rem; border-radius: .75rem; border: 1px solid var(--ds-line);
  background: var(--ds-surface); padding: .75rem 1rem; font-size: .875rem; font-weight: 600;
  color: var(--ds-text); text-decoration: none; cursor: pointer; font-family: inherit; text-align: left;
}
.nav-mobile-link:hover { background: var(--ds-surface-2); }
.nav-mobile-link svg { width: 16px; height: 16px; color: var(--ds-cyan-ink); }
.nav-mobile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }

/* ------------------------------------------------------------------ */
/* Inputs (formulario de contacto)                                     */
/* ------------------------------------------------------------------ */
.field {
  width: 100%; border-radius: .75rem; border: 1px solid var(--ds-line); background: var(--ds-surface-2);
  padding: .75rem 1rem; font-size: .875rem; color: var(--ds-ink); outline: none;
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.field::placeholder { color: var(--ds-faint); }
.field:focus { border-color: var(--ds-cyan); box-shadow: 0 0 0 2px #cffafe; }

/* ------------------------------------------------------------------ */
/* Píldoras de sector / operador                                       */
/* ------------------------------------------------------------------ */
.pill {
  border-radius: 9999px; border: 1px solid var(--ds-line); background: var(--ds-surface);
  padding: .5rem 1rem; font-size: .875rem; font-weight: 600; color: var(--ds-text);
}

/* ------------------------------------------------------------------ */
/* Bloques de contenido reutilizables                                  */
/* ------------------------------------------------------------------ */
.feat-row { display: flex; gap: 1rem; }
.feat-t { margin: 0; font-weight: 700; color: var(--ds-ink); }
.feat-d { margin: .125rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--ds-muted); }

.solucion-card { display: flex; height: 100%; flex-direction: column; text-decoration: none; }
.solucion-t { margin: 1rem 0 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ds-ink); }
.solucion-d { margin: .375rem 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ds-muted); }

.socio { display: flex; height: 7rem; align-items: center; justify-content: center; padding: 1.5rem; }
.socio img { max-height: 100%; max-width: 100%; object-fit: contain; }
@media (min-width: 640px) { .socio { height: 8rem; } }

/* Orden de columnas (imagen / texto) en Digitalización */
.order-img { order: 2; }
.order-txt { order: 1; }
@media (min-width: 1024px) { .order-img { order: 1; } .order-txt { order: 2; } }

/* Benefit card (BenefitsSection) */
.bc-t { margin: 1rem 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ds-ink); }
.bc-d { margin: .5rem 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ds-muted); }

/* Imagen del hero de página interior (SolutionHero) */
.solhero-img { position: relative; z-index: 1; margin-inline: auto; max-height: 440px; width: 100%; border-radius: 22px; object-fit: contain; }
.solhero-img.cover { height: 420px; max-height: none; object-fit: cover; box-shadow: 0 30px 70px -40px rgba(28,38,64,.5); }

/* ------------------------------------------------------------------ */
/* Hero de portada (HeroProductos)                                     */
/* ------------------------------------------------------------------ */
.hero { position: relative; width: 100%; overflow: hidden; background: var(--ds-bg); height: auto; padding-top: 4.5rem; }
@keyframes heroIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
.hero-img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; animation: heroIn .7s cubic-bezier(.16,1,.3,1) both; }
.hero-chevron {
  position: absolute; bottom: 1.75rem; left: 50%; z-index: 2;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  border: 1px solid var(--ds-line); background: rgba(255,255,255,.85); color: var(--ds-cyan-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.05); backdrop-filter: blur(8px); text-decoration: none; transition: color .15s;
}
.hero-chevron:hover { color: var(--ds-ink); }

/* ------------------------------------------------------------------ */
/* Globo de "Nosotros" (fallback SVG animado, sin three.js)            */
/* ------------------------------------------------------------------ */
.globe-box {
  position: relative; z-index: 1; display: grid; place-items: center; height: 420px; width: 100%;
  overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); background: #050b16;
  box-shadow: 0 30px 70px -40px rgba(28,38,64,.5);
}
.globe-bg { position: absolute; inset: 0; background:
  radial-gradient(circle at 50% 46%, rgba(14,165,233,.2), transparent 38%),
  linear-gradient(135deg, rgba(15,23,42,.1), rgba(2,6,23,.95)); }
.globe-grid { position: absolute; inset: 0; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 34px 34px; }
.globe-halo { position: absolute; width: 330px; height: 330px; border-radius: 9999px; background: rgba(34,211,238,.16); filter: blur(64px); }
/* Globo: textura real de la Tierra girando (océanos azul marino, continentes
   verde/café/gris), opaca, con sombreado de esfera 3D y atmósfera cian. */
.globo { position: relative; z-index: 2; width: 400px; height: 400px; max-width: 100%; }
.globe-ball {
  position: absolute; top: 30px; left: 30px; width: 340px; height: 340px;
  border-radius: 300px; overflow: hidden; z-index: 2;
  background: #08203f url(https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg) repeat-x;
  background-size: auto 340px;
  box-shadow: 0 0 60px rgba(56,189,248,.35);
  animation: earth_spin 26s linear infinite;
}
/* la textura mide 2048×1024; a 340px de alto su ancho es 680px → un bucle exacto */
@keyframes earth_spin { from { background-position: 0 0; } to { background-position: -680px 0; } }

/* Sombreado de esfera: brillo arriba-izquierda + oscurecimiento del limbo */
.globe-gloss {
  position: absolute; top: 30px; left: 30px; width: 340px; height: 340px;
  border-radius: 300px; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 44%);
  box-shadow: inset -48px -36px 80px rgba(2,8,23,.82), inset 28px 22px 54px rgba(125,211,252,.18);
}

/* Capa de nodos (ciudades) + señales. Se desplaza EXACTAMENTE igual que la
   textura del globo (mismo período/origen) para que los nodos queden fijos
   sobre tierra mientras el mundo gira. La máscara radial los atenúa en el limbo. */
.globe-geo {
  position: absolute; top: 30px; left: 30px; width: 340px; height: 340px;
  border-radius: 300px; overflow: hidden; z-index: 4; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 55%, rgba(0,0,0,0) 80%);
          mask: radial-gradient(circle at 50% 50%, #000 55%, rgba(0,0,0,0) 80%);
}
.geo-track { position: absolute; top: 0; left: 0; width: 1360px; height: 340px; animation: geo_spin 26s linear infinite; }
.geo-track svg { width: 1360px; height: 340px; overflow: visible; }
/* Mismo desplazamiento que earth_spin (-680px en 26s) → nodos pegados a la tierra */
@keyframes geo_spin { from { transform: translateX(0); } to { transform: translateX(-680px); } }

.gnode { fill: #ecfeff; }
.gnode-ring { r: 3.5; fill: none; stroke: #67e8f9; stroke-width: 1.5; }
/* Estela larga que viaja por la línea (sin punto): un solo trazo largo
   recorre cada conexión repetidamente. dash(110) + hueco(320) = período 430. */
.globe-path { stroke-dasharray: 110 320; }

@media (max-width: 480px) { .globo { transform: scale(0.8); } }
.globe-card { position: absolute; z-index: 3; }

/* ------------------------------------------------------------------ */
/* Simulación "¿Cómo funciona?"                                        */
/* ------------------------------------------------------------------ */
.cf-stage { display: none; }
.cf-stage.open { display: block; }
.cf-label {
  border-radius: 9999px; border: 1px solid rgba(45,170,225,.3); background: #ecfeff; color: var(--ds-cyan-ink);
  padding: .5rem 1.25rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; transition: all .3s;
}
.cf-label.cf-done { border-color: #34d399; background: #10b981; color: #fff; box-shadow: 0 10px 25px -10px rgba(16,185,129,.6); }
.cf-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cf-node { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1rem; border: 2px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-cyan-ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .3s; }
.cf-node svg { width: 1.75rem; height: 1.75rem; }
.cf-col { z-index: 10; display: flex; width: 6rem; flex-direction: column; align-items: center; gap: .75rem; }
.cf-cap { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ds-faint); }
.cf-dots { display: flex; height: .75rem; align-items: center; gap: .25rem; }
.cf-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--ds-cyan); opacity: .2; }
.cf-line { position: absolute; left: 7rem; right: 7rem; top: 50%; transform: translateY(-50%); height: 4rem; }
.cf-line .l1 { position: absolute; inset-inline: 0; top: .75rem; height: 1px; background: rgba(45,170,225,.2); }
.cf-line .l2 { position: absolute; inset-inline: 0; bottom: .75rem; height: 1px; background: rgba(16,185,129,.2); }
.cf-packet { position: absolute; display: flex; align-items: center; gap: .5rem; border-radius: 9999px; background: var(--ds-surface); padding: .25rem .75rem; font-size: 11px; font-weight: 600; box-shadow: 0 6px 16px -6px rgba(0,0,0,.3); opacity: 0; }
.cf-packet .pdot { width: 8px; height: 8px; border-radius: 9999px; background: currentColor; }
.cf-task { right: 0; top: 0; color: var(--ds-cyan-ink); }
.cf-evidence { left: 0; bottom: 0; color: #047857; }
/* animaciones en bucle mientras el stage está abierto */
.cf-stage.open .cf-task { animation: packetToMobile 3.2s ease-in-out infinite; }
.cf-stage.open .cf-evidence { animation: packetToAdmin 3.2s ease-in-out infinite; animation-delay: 1.6s; }
.cf-stage.open .cf-dot { animation: dotPulse 3.2s ease-in-out infinite; }
.cf-stage.open .cf-dot:nth-child(2) { animation-delay: .18s; }
.cf-stage.open .cf-dot:nth-child(3) { animation-delay: .36s; }
.cf-stage.open[data-step="trabajar"] .cf-node-mobile { border-color: #7dd3fc; background: var(--ds-cyan); color: #fff; box-shadow: 0 0 24px rgba(45,170,225,.45); }
.cf-stage.open[data-step="validar"] .cf-node-admin { border-color: #6ee7b7; background: #10b981; color: #fff; box-shadow: 0 0 24px rgba(16,185,129,.4); }
@keyframes packetToMobile { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateX(-220px); opacity: 1; } 55% { transform: translateX(-220px); opacity: 0; } 100% { transform: translateX(-220px); opacity: 0; } }
@keyframes packetToAdmin { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateX(220px); opacity: 1; } 55% { transform: translateX(220px); opacity: 0; } 100% { transform: translateX(220px); opacity: 0; } }
@keyframes dotPulse { 0%,100% { opacity: .2; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.2); } }
.cf-info { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .cf-info { grid-template-columns: 1fr 1fr; } }
.cf-info-card { display: flex; align-items: flex-start; gap: .75rem; border-radius: 1rem; background: var(--ds-surface-2); padding: 1rem; }

/* ------------------------------------------------------------------ */
/* Cotizador de Paquetes                                               */
/* ------------------------------------------------------------------ */
.cyc { border-radius: 1.35rem; border: 1px solid var(--ds-line); background: var(--ds-surface); padding: 1rem; text-align: left; cursor: pointer; font-family: inherit; transition: all .2s; }
.cyc:hover { transform: translateY(-2px); }
.cyc.is-active { border-color: #38bdf8; background: linear-gradient(135deg, #e0f2fe, #ecfeff); box-shadow: 0 14px 30px -16px rgba(56,189,248,.4); }
.cyc-radio { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; border: 2px solid #cbd5e1; }
.cyc.is-active .cyc-radio { border-color: #0ea5e9; }
.cyc.is-active .cyc-radio::after { content: ''; width: .75rem; height: .75rem; border-radius: 9999px; background: #0ea5e9; }
.cyc-badge { border-radius: 9999px; background: rgba(255,255,255,.85); padding: .25rem .75rem; font-size: 12px; font-weight: 800; color: #0369a1; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.stepper { display: flex; height: 2.75rem; align-items: center; border-radius: 1rem; border: 1px solid var(--ds-line); background: var(--ds-surface); }
.stepper button { display: flex; height: 100%; width: 2.5rem; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; color: var(--ds-muted); transition: color .15s; }
.stepper button:hover { color: #0ea5e9; }
.stepper .val { flex: 1; text-align: center; font-size: 1.125rem; font-weight: 800; color: var(--ds-ink); }
.qchip { border-radius: 9999px; border: 1px solid var(--ds-line); background: var(--ds-surface-2); padding: .25rem .625rem; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--ds-muted); }
.metric { border-radius: 1rem; border: 1px solid var(--ds-line); background: var(--ds-surface); padding: .75rem; }
.cyc-radio::after { display: block; }
.cotizador-grid { display: grid; gap: 1rem; align-items: start; }
.cyc-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.qline { display: grid; grid-template-columns: 1fr; gap: .75rem; border-radius: 1.25rem; border: 1px solid var(--ds-line); background: var(--ds-surface); padding: .75rem; }
@media (min-width: 768px) { .cyc-grid { grid-template-columns: 1fr 1fr; } .qline { grid-template-columns: 1.75fr .85fr; } }
@media (min-width: 1280px) { .cotizador-grid { grid-template-columns: 1.58fr .42fr; } }

/* Página Contacto (Contactanos) */
.contacto-grid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) { .contacto-grid { grid-template-columns: 1.1fr .9fr; } }
.cn-badge { display: inline-flex; border-radius: 9999px; background: #e0f2fe; padding: .125rem .75rem; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #0369a1; }
.cn-chip { display: flex; align-items: center; gap: .5rem; border-radius: .5rem; border: 1px solid var(--ds-line-soft); background: var(--ds-surface-2); padding: .5rem .75rem; font-size: 11px; font-weight: 700; color: var(--ds-text); transition: all .3s; }
.cn-chip:hover { border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.08); }
.cn-chip svg { width: 14px; height: 14px; color: #10b981; }
.cn-social { display: flex; align-items: center; justify-content: space-between; border-radius: .75rem; border: 1px solid var(--ds-line-soft); padding: .75rem 1rem; font-size: 12px; font-weight: 700; color: var(--ds-text); text-decoration: none; transition: all .3s; }
.cn-social:hover { border-color: var(--ds-cyan); color: var(--ds-cyan-ink); background: rgba(45,170,225,.06); }
.cn-row { display: inline-flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 700; color: var(--ds-ink); text-decoration: none; transition: color .15s; }
.cn-row:hover { color: var(--ds-cyan-ink); }
.cn-row .ic { display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: .5rem; background: var(--ds-surface-2); transition: all .2s; }
.cn-row:hover .ic { background: rgba(45,170,225,.1); }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.footer-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--ds-cyan); margin: 0; }
.footer-link { display: flex; align-items: center; gap: .625rem; font-size: .875rem; text-decoration: none; transition: color .15s; }
.footer-link:hover { color: #fff; }
.footer-social:hover { background: var(--ds-cyan) !important; color: var(--ds-navy) !important; }
.footer-bottom {
  margin-top: 3rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: .5rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem;
  font-size: 12.5px; color: rgba(255,255,255,.5);
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }

/* ------------------------------------------------------------------ */
/* Grids responsive de uso común (sin depender de Tailwind)            */
/* ------------------------------------------------------------------ */
.grid-2 { display: grid; gap: 3rem; align-items: center; }
.grid-contacto { display: grid; gap: 2.5rem; align-items: center; }
.grid-footer { display: grid; gap: 2.5rem; }
.grid-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.grid-cards-3 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.grid-cards-4 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.grid-cards-5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-feats { display: grid; gap: 1.5rem; }

@media (min-width: 640px) {
  .grid-cards-3, .grid-cards-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cards-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-feats-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-contacto { grid-template-columns: 1fr 1fr; }
  .grid-footer { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: 1.05fr 0.95fr; }
  .grid-2.even { grid-template-columns: 1fr 1fr; }
  .grid-cards-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cards-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-cards-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-footer { grid-template-columns: repeat(4, 1fr); }
}