/* ──────────────────────────────────────────────────────────────────────────
   🎨 VARIABLES GLOBALES
   Cambiá estos valores para ajustar paleta y tamaños sin tocar el resto.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  /* 🌈 Colores base (modo oscuro por defecto) */
  --bg: #0b1220;
  --panel: #111a2b;
  --text: #e6edf6;
  --muted: #9fb0c7;
  --brand: #54d6ff;
  --brand-2: #7cffb2;
  --ring: rgba(124, 255, 178, .45);
  --ok: #11cc8c;
  --warn: #ffd166;
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.25);

  /* 📏 Dimensiones clave de cards */
  --card-min-w: 420px;     /* ancho mínimo de cada tarjeta en grilla */
  --card-max-w: 560px;     /* ancho máximo de cada tarjeta (centradas) */
  --card-min-h: 380px;     /* altura mínima de la tarjeta */
  --card-img-h: 180px;     /* alto de imagen dentro de las cards */

  /* 🧱 Paso a paso (imágenes del proceso) */
  --step-img-h: 160px;

  /* 🖼️ Logo (mismo formato general que index) */
  --logo-h: 44px;          /* alto del logo en el header */
  --logo-br: 14px;         /* borde redondeado del marco del logo */
  --logo-frame-w: 2px;     /* grosor del “marco” */
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fc; --panel:#ffffff; --text:#0b1220; --muted:#5c6b82;
    --brand:#0EA5E9; --brand-2:#10B981; --ring:rgba(14,165,233,.25);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   🧼 RESETEOS BÁSICOS
   ────────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* ──────────────────────────────────────────────────────────────────────────
   📐 LAYOUTS BÁSICOS
   ────────────────────────────────────────────────────────────────────────── */
.container{width:min(1120px, 92vw); margin-inline:auto}
.grid{display:grid; gap:1.25rem}
.center{display:grid; place-items:center}
.cols-2{grid-template-columns:1fr 1fr}
@media (max-width: 860px){.cols-2{grid-template-columns:1fr}}
.space{height:1rem}

/* ──────────────────────────────────────────────────────────────────────────
   🔘 BOTONES / CHIPS
   ────────────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem;
  border-radius:14px; border:1px solid transparent;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#082015; font-weight:700; box-shadow:var(--shadow); transition:.2s transform;
}
.btn:hover{transform:translateY(-2px)}
.btn.outline{
  background:transparent;
  border-color:color-mix(in oklab, var(--brand) 40%, var(--text));
  color:var(--text);
}
.chip{
  display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .65rem; border-radius:999px;
  background:color-mix(in oklab, var(--panel) 70%, black 10%);
  border:1px solid color-mix(in oklab, var(--panel) 70%, white 10%);
}

/* ──────────────────────────────────────────────────────────────────────────
   🧭 HEADER STICKY + LOGO (MISMO FORMATO QUE INDEX, SIN ROTACIÓN)
   ────────────────────────────────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in oklab, var(--bg) 88%, black 10%);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid color-mix(in oklab, var(--panel) 70%, white 10%);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.9rem} /* ➕ más aire logo/título */

/* ⛔️ Ocultamos el “cuadradito” decorativo si existe en el HTML */
.brand i{display:none}

/* 📑 Menú con separación extra entre items */
.nav .actions{display:flex; align-items:center; gap:1.25rem}

/* 🖼️ Marco del logo: gradiente estático + brillo que cruza + pulso suave (SIN rotación) */
.logo-frame{
  position:relative; display:inline-grid; place-items:center; border-radius:var(--logo-br);
  padding:calc(var(--logo-frame-w) + 3px);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 55%, transparent) 0%,
      color-mix(in oklab, var(--brand-2) 55%, transparent) 50%,
      color-mix(in oklab, var(--text) 35%, transparent) 100%);
  box-shadow:0 6px 18px rgba(84,214,255,.12);
  overflow:hidden;
  animation: framePulse 4.5s ease-in-out infinite; /* 🌬️ pulso del halo */
}
.logo-frame::before{                           /* Fondo interior del marco */
  content:""; position:absolute; inset:var(--logo-frame-w);
  border-radius:calc(var(--logo-br) - 2px);
  background:color-mix(in oklab, var(--panel) 90%, black 5%);
}
.logo-frame::after{                            /* ✨ brillo que cruza */
  content:""; position:absolute; inset:var(--logo-frame-w);
  border-radius:calc(var(--logo-br) - 2px);
  background:linear-gradient(120deg, transparent 0%,
              rgba(255,255,255,.12) 44%, rgba(255,255,255,.45) 50%,
              rgba(255,255,255,.12) 56%, transparent 100%);
  transform:translateX(-120%);
  animation: shineSwipe 3.6s ease-in-out infinite;
  mix-blend-mode:screen; pointer-events:none;
}
@keyframes framePulse{
  0%,100%{ box-shadow:0 6px 18px rgba(84,214,255,.12) }
  50%    { box-shadow:0 8px 24px rgba(124,255,178,.24) }
}
@keyframes shineSwipe{
  0%  {transform:translateX(-120%)}
  50% {transform:translateX(120%)}
  100%{transform:translateX(120%)}
}
.logo{
  position:relative; z-index:1; height:var(--logo-h); width:auto; object-fit:contain;
  display:block; border-radius:calc(var(--logo-br) - 4px);
}
@media (prefers-reduced-motion: reduce){
  .logo-frame{animation:none}
  .logo-frame::after{animation:none}
}

/* ──────────────────────────────────────────────────────────────────────────
   🎯 HERO
   ────────────────────────────────────────────────────────────────────────── */
.hero{padding:6rem 0 3rem; display:grid; gap:2rem; align-items:center}
.hero h1{font-size:clamp(2rem, 5vw, 3rem); line-height:1.15; margin:0}
.hero p{color:var(--muted); margin:0}
.hero .cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem}
.hero-card{
  margin-top:1.5rem; background:var(--panel);
  border:1px solid color-mix(in oklab, var(--panel) 70%, white 10%);
  border-radius:20px; padding:1.2rem; display:grid; gap:1rem;
  margin-inline:auto;                           /* ✅ cards “sueltas” centradas */
}

/* ──────────────────────────────────────────────────────────────────────────
   📚 SECCIONES / CARDS / SERVICIOS
   ────────────────────────────────────────────────────────────────────────── */
section{padding:3rem 0}
h2{font-size:clamp(1.4rem, 3.2vw, 2rem); margin:0 0 .75rem}
.muted{color:var(--muted)}

/* 🧱 Tarjeta base */
.card{
  background:var(--panel);
  border:1px solid color-mix(in oklab, var(--panel) 70%, white 10%);
  border-radius:18px; padding:1.1rem; box-shadow:var(--shadow);
  transition:.25s transform ease, .25s box-shadow ease;
  min-height:var(--card-min-h);               /* 📏 altura mínima unificada */
  width:100%; max-width:var(--card-max-w);    /* ✅ ancho fijo y centrable */
}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.35)}

/* 🧩 Grilla de servicios: centradas, 3 → 2 → 1 columnas */
.services{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(var(--card-min-w), 1fr));
  justify-items:center;                         /* ✅ centra cada card en su celda */
}

/* 🧷 Contenido de cada servicio */
.service{display:grid; gap:.6rem}
.service .icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in oklab, var(--brand) 15%, var(--panel));
  border:1px solid color-mix(in oklab, var(--brand) 35%, var(--panel));
}

/* 🖼️ Imágenes dentro de las cards */
.service figure{margin:0; border-radius:14px; overflow:hidden;
  border:1px solid color-mix(in oklab, var(--panel) 70%, white 12%)}
.service figure img{
  width:100%; height:var(--card-img-h); object-fit:cover;
  transform:scale(1.01); transition:transform .5s ease;
}
.service:hover figure img{transform:scale(1.05)}

/* ──────────────────────────────────────────────────────────────────────────
   🪜 PASOS DEL PROCESO (cards con numeración)
   ────────────────────────────────────────────────────────────────────────── */
.steps{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  justify-items:center;                         /* ✅ también centradas */
}
.step{position:relative; padding-left:2.2rem}
.step .num{
  position:absolute; left:.3rem; top:.2rem; display:grid; place-items:center;
  width:28px; height:28px; border-radius:9px;
  background:color-mix(in oklab, var(--brand-2) 25%, var(--panel));
  border:1px solid color-mix(in oklab, var(--brand-2) 35%, var(--panel));
  font-weight:700; color:#08351f;
}
/* Fotos en cada paso */
.step figure{margin:.25rem 0 0; border-radius:12px; overflow:hidden;
  border:1px solid color-mix(in oklab, var(--panel) 70%, white 12%)}
.step figure img{
  width:100%; height:var(--step-img-h); object-fit:cover;
  transform:scale(1.01); transition:transform .5s ease;
}
.step:hover figure img{transform:scale(1.05)}

/* ──────────────────────────────────────────────────────────────────────────
   📄 BLOQUES “DOCS”
   ────────────────────────────────────────────────────────────────────────── */
.docs{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.doc{display:grid; gap:.5rem}

/* ──────────────────────────────────────────────────────────────────────────
   ✉️ FORMULARIO DE CONTACTO
   ────────────────────────────────────────────────────────────────────────── */
.contact{display:grid; gap:1.5rem; grid-template-columns:1.2fr .8fr}
@media (max-width: 900px){.contact{grid-template-columns:1fr}}
form{display:grid; gap:.85rem}
label{display:block; margin:.1rem 0 .35rem}
input,textarea,select{
  width:100%; padding:.9rem 1rem; border-radius:14px;
  border:1px solid color-mix(in oklab, var(--panel) 70%, white 12%);
  background:color-mix(in oklab, var(--panel) 85%, black 5%);
  color:var(--text); outline:none;
}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px var(--ring); border-color:transparent}
textarea{min-height:140px; resize:vertical}

/* ──────────────────────────────────────────────────────────────────────────
   🦶 FOOTER
   ────────────────────────────────────────────────────────────────────────── */
footer{
  padding:2rem 0;
  border-top:1px solid color-mix(in oklab, var(--panel) 70%, white 10%);
  color:var(--muted)
}

/* ──────────────────────────────────────────────────────────────────────────
   🎬 REVEAL-ON-SCROLL (clases utilitarias para animar al aparecer)
   ────────────────────────────────────────────────────────────────────────── */
.reveal{
  opacity:0; transform: translateY(18px) scale(.98);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{ opacity:1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
}

/* ──────────────────────────────────────────────────────────────────────────
   🪄 CENTRADO GENÉRICO DE CARDS EN CUALQUIER GRID
   (para secciones que usen .grid pero no .services / .steps)
   ────────────────────────────────────────────────────────────────────────── */
.grid:not(.services):not(.steps) > .card{
  margin-inline:auto;                            /* ✅ centra cualquier card suelta en grids genéricos */
}
/* 1) Permitir que el header "salte" a dos líneas cuando no entra todo */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem 0;
  flex-wrap:wrap;          /* ✅ clave para responsive sin JS */
  row-gap:.6rem;           /* separa la 2da línea en mobile */
}

/* 2) Menú base: que pueda envolver elementos cuando falte ancho */


/* 3) Evitar desbordes horizontales (muy importante en títulos largos) */
header, .nav, .brand, .nav .actions{ min-width:0 }
.brand strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60vw;          /* título no empuja el menú en móviles */
}

/* 4) Ajustes a partir de 900px hacia abajo: logo más chico y menú a ancho completo */
@media (max-width:900px){
  :root{ --logo-h: 36px }  /* baja el alto del logo sólo en móvil */
  .nav{ padding:.6rem 0 }
  .brand{ gap:.6rem }

  /* El bloque de links ocupa toda la fila 2 */
  .nav .actions{
    order:3;               /* baja el menú bajo la marca */
    width:100%;            /* ocupa todo el ancho */
    display:grid;
    grid-template-columns: 1fr 1fr;  /* 2 columnas para “phablets” */
    gap:.6rem;
  }
  .nav .actions a{
    padding:.55rem .6rem;
    border-radius:10px;
  }

  /* Redes debajo de los links, a todo el ancho */
  .nav .actions .social{
    grid-column:1 / -1;
    display:flex;
    gap:.5rem;
  }
  .social a{ width:34px; height:34px } /* íconos levemente más chicos */
}
/* 🔧 Overrides de alta especificidad para que el header SÍ envuelva */
header .container.nav{ flex-wrap:wrap; row-gap:.6rem }
header .container.nav .actions{ flex-wrap:wrap }

/* Layout en móviles/tabla: 2 columnas + redes abajo */
@media (max-width:900px){
  header .container.nav .actions{
    order:3; width:100%;
    display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
  }
  header .container.nav .actions .social{
    grid-column:1 / -1; display:flex; gap:.5rem;
  }
}
.hero-card .card {
  display: flex;
  flex-direction: column;     /* apila el título y la lista */
  justify-content: center;    /* centra verticalmente */
  align-items: center;        /* centra horizontalmente */
  text-align: center;         /* centra el texto */
  padding: 2rem;              /* espacio uniforme por todos lados */
  box-sizing: border-box;     /* que el padding no rompa el ancho */
}