/* =========================================================
   DevApp Systems — hoja de estilos compartida
   Todas las páginas del sitio enlazan este archivo.
   Cambiar un color aquí lo cambia en todo el sitio.
   ========================================================= */

:root{
  /* Marca */
  --azul-900:#0f3466; --azul-700:#164a8a; --azul-600:#1c5cab; --azul-500:#256abf;
  --azul-100:#dbeafe;  --azul-50:#eff6ff;
  --morado-700:#6b21a8; --morado-600:#7e22ce; --morado-500:#9333ea; --morado-100:#f3e8ff;
  --grad:linear-gradient(135deg,#1c5cab,#7e22ce);
  /* El color plano que queda si el degradado no se pinta: es el punto medio
     exacto de la rampa. Un navegador que ignore el gradiente —o el modo
     oscuro forzado de Android, que reescribe fondos— deja algo de marca en
     vez de un recuadro gris. */
  --grad-plano:#3f4bc0;

  /* Semánticos — reservados para significar dinero, nunca decorativos */
  --verde:#059669; --rojo:#d03b3b; --ambar:#b45309;

  /* Cielo — la misma rampa que usa la app, sacada del logotipo de Debe.
     Es el color del ambiente: fondos y bordes, nunca texto ni botones. */
  --cielo-50:#eef6fb; --cielo-100:#dcebf5; --cielo-200:#cde2ef;
  --cielo-300:#bfd9ea; --cielo-400:#a8c8da; --cielo-500:#91aabf;
  --cielo-600:#7a8ba3; --cielo-700:#6b7791;

  /* Neutros */
  --tinta:#0b0b0b; --tinta-2:#52514e; --tinta-3:#898781;
  --linea:#dbe7f0; --blanco:#fff; --plano:#eef6fb;

  --radio:14px;
  --ancho:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--tinta);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:var(--blanco);
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--ancho);margin:0 auto;padding:0 20px}
section{padding:76px 0}
.plano{background:linear-gradient(180deg,var(--cielo-50),var(--cielo-200))}
.borde-t{border-top:1px solid var(--linea)}

h1{font-size:clamp(32px,5.5vw,52px);line-height:1.08;letter-spacing:-.03em}
h2{font-size:clamp(24px,4vw,34px);letter-spacing:-.02em;line-height:1.18;margin-bottom:12px}
h3{font-size:17px;letter-spacing:-.01em;margin-bottom:8px}
.lead{color:var(--tinta-2);font-size:17px;max-width:62ch}
.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--morado-600);margin-bottom:10px}
.centrado{text-align:center}
.centrado .lead{margin-inline:auto}

/* Las cabeceras de sección van centradas en todo el sitio. Alineadas a la
   izquierda con la mitad derecha vacía, la página se ve descuadrada — que es
   exactamente lo que pasaba. */
.cabecera{text-align:center;max-width:64ch;margin:0 auto 40px}
.cabecera .lead{margin-inline:auto}

/* =========================================================
   MOVIMIENTO
   Corto y con propósito. Una página que se mueve demasiado
   cansa; una que no se mueve nada parece una captura.
   ========================================================= */

/* Entrada al hacer scroll. La clase la pone el JS, así que sin JS
   todo se ve normal — nunca una página en blanco. */
.revelar{opacity:0;transform:translateY(18px);
         transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.revelar.visible{opacity:1;transform:none}

@keyframes subir{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}
@keyframes flotar{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-7px)}
}
@keyframes latir{
  0%,100%{opacity:.55;transform:scale(1)}
  50%    {opacity:.85;transform:scale(1.06)}
}

/* ---------------- botones ---------------- */
.btn{display:inline-block;padding:13px 22px;border-radius:11px;font-weight:600;font-size:15px;
     text-decoration:none;border:1px solid transparent;cursor:pointer;
     transition:background .15s,border-color .15s,color .15s,
                transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primario{background:var(--azul-600);color:#fff;box-shadow:0 4px 14px -6px rgba(28,92,171,.55)}
.btn-primario:hover{background:var(--azul-700);box-shadow:0 10px 24px -10px rgba(28,92,171,.7)}
.btn-claro{background:#fff;color:var(--azul-700);border-color:var(--linea)}
.btn-claro:hover{border-color:var(--azul-600);box-shadow:0 8px 20px -12px rgba(15,52,102,.35)}
.btn-fantasma{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-fantasma:hover{border-color:#fff}
.btn-sm{padding:9px 16px;font-size:14px}

/* ---------------- cabecera ---------------- */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);
       backdrop-filter:blur(10px);border-bottom:1px solid var(--linea);
       transition:box-shadow .25s ease,border-color .25s ease}
/* Se despega del contenido sólo cuando hay contenido debajo */
header.desplazado{box-shadow:0 6px 22px -14px rgba(15,52,102,.45);border-bottom-color:transparent}
/* El hilo de marca que corona la página */
header::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
               background-color:var(--grad-plano);background-image:var(--grad)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
/* El logotipo va como SVG, con el nombre ya en curvas. Antes era texto vivo
   y la cola de la «p» de DevApp se metía dentro de SYSTEMS: la separación
   entre las dos líneas dependía del `line-height` del navegador, y en
   Windows salía más apretada que en el Mac donde se probó. Con el nombre
   dibujado, la distancia es la misma en todas partes. */
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo svg{display:block;height:34px;width:auto}
@media(max-width:640px){ .logo svg{height:29px} }
footer .logo svg{height:30px}
nav{display:flex;align-items:center;gap:24px;font-size:14.5px}
nav a{text-decoration:none;color:var(--tinta-2)}
nav a:hover{color:var(--tinta)}
nav a.activo{color:var(--azul-700);font-weight:600}
.menu-btn{display:none;background:none;border:1px solid var(--linea);border-radius:9px;padding:8px 10px}
.menu-btn svg{width:20px;height:20px;stroke:var(--tinta);stroke-width:2;fill:none;stroke-linecap:round}

@media(max-width:920px){
  .menu-btn{display:block}
  nav{position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--linea);
      flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;display:none}
  nav.abierto{display:flex}
  nav a{padding:12px 0;border-bottom:1px solid var(--linea)}
  nav .btn{margin-top:12px;text-align:center;border-bottom:none}
}

/* ---------------- hero ---------------- */
/* El fondo del hero ya no es un color plano: dos manchas de marca muy
   diluidas y una rejilla que se desvanece por los bordes. No se "ve" —
   se nota, que es distinto. */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--linea);
      padding:clamp(64px,9vw,104px) 0 clamp(56px,8vw,92px);text-align:center;
      background:
        radial-gradient(760px 420px at 50% 0%,  rgba(255,255,255,.9),  transparent 70%),
        radial-gradient(880px 470px at 90% -14%,rgba(126,34,206,.10),  transparent 66%),
        radial-gradient(860px 480px at 4% 8%,   rgba(28,92,171,.16),   transparent 64%),
        linear-gradient(180deg,var(--cielo-50),var(--cielo-300))}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(15,52,102,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(15,52,102,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(72% 62% at 46% 40%,#000,transparent);
          mask-image:radial-gradient(72% 62% at 46% 40%,#000,transparent)}
.hero::after{content:"";position:absolute;width:420px;height:420px;right:-160px;bottom:-240px;
  border-radius:50%;background:var(--grad);filter:blur(130px);opacity:.12;
  animation:latir 9s ease-in-out infinite;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
/* El hero entra escalonado al cargar. Es lo primero que ve nadie:
   si aparece dibujado de golpe, la página parece una captura de pantalla. */
.hero h1,.hero p,.hero .acciones,.hero .nota{animation:subir .6s cubic-bezier(.22,1,.36,1) both}
.hero p{animation-delay:.07s}
.hero .acciones{animation-delay:.14s}
.hero .nota{animation-delay:.21s}
.hero h1{max-width:19ch;margin:0 auto}
.hero h1 em{font-style:normal;color:var(--morado-600)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em{background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.hero p{margin:22px auto 30px;font-size:clamp(16px,1.6vw,18.5px);color:var(--tinta-2);max-width:56ch}
.hero .acciones{justify-content:center}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.nota{margin-top:26px;font-size:13px;color:var(--tinta-2)}

/* La insignia de encima del titular: dice de qué va la casa en una línea */
.pildora{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;
         gap:8px;margin-bottom:22px;max-width:100%;
         padding:7px 14px 7px 8px;border-radius:99px;background:rgba(255,255,255,.75);
         border:1px solid var(--cielo-300);font-size:13.5px;line-height:1.4;color:var(--azul-900);
         box-shadow:0 6px 18px -12px rgba(15,52,102,.45)}
.pildora b{display:inline-block;padding:3px 9px;border-radius:99px;
           background-color:var(--grad-plano);background-image:var(--grad);
           color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em}

/* ---------------- rejillas y tarjetas ---------------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:24px;
      transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,border-color .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(15,52,102,.42)}
.card p{font-size:14.5px;color:var(--tinta-2)}
.card.enlace{text-decoration:none}
.card.enlace:hover{border-color:var(--azul-600)}

/* La maqueta de la app respira despacio. Se para si le pones el ratón
   encima, por si alguien quiere leer las cifras con calma. */
.mock{animation:flotar 7s ease-in-out infinite}
.mock:hover{animation-play-state:paused;transform:none;box-shadow:none}

.icono{width:40px;height:40px;border-radius:11px;background:var(--azul-50);display:grid;place-items:center;margin-bottom:14px}
.icono svg{width:20px;height:20px;stroke:var(--azul-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.etiqueta{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;
          letter-spacing:.02em;background:var(--morado-100);color:var(--morado-700);margin-bottom:10px}
.etiqueta.azul{background:var(--azul-50);color:var(--azul-700)}
.etiqueta.gris{background:#f0f0ec;color:var(--tinta-2)}

.lista{list-style:none}
.lista li{position:relative;padding-left:26px;margin-bottom:10px;font-size:15px;color:var(--tinta-2)}
.lista li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:8px;
                  border-left:2.5px solid var(--morado-600);border-bottom:2.5px solid var(--morado-600);
                  transform:rotate(-45deg)}

/* ---------------- planes ---------------- */
.periodo{display:inline-flex;gap:2px;margin-top:28px;padding:4px;border:1px solid var(--linea);
         border-radius:12px;background:#fff}
.periodo button{border:none;background:none;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;
                color:var(--tinta-2);padding:9px 16px;border-radius:9px;transition:.15s}
.periodo button:hover{color:var(--tinta)}
.periodo button.activo{background:var(--azul-600);color:#fff}
.periodo .ahorro{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:99px;
                 background:var(--morado-100);color:var(--morado-700);font-size:11px;font-weight:700}
.periodo button.activo .ahorro{background:rgba(255,255,255,.22);color:#fff}
.plan .ref.destacada{color:var(--verde);font-weight:600}

.plan{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px;display:flex;flex-direction:column;
      transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,border-color .15s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(15,52,102,.5)}
.plan.destacado{border-color:var(--azul-600);box-shadow:0 0 0 3px var(--azul-50)}
.plan.destacado:hover{box-shadow:0 0 0 3px var(--azul-50),0 18px 36px -20px rgba(28,92,171,.55)}
/* Las cuatro columnas tienen que poder leerse en horizontal: precio con
   precio, topes con topes. La insignia de «Más elegido» sólo la lleva una,
   así que las demás reservan su hueco en blanco. Sin esto, la columna
   destacada empuja su propio precio hacia abajo y la tabla deja de servir
   para lo único que sirve una tabla de precios: comparar. */
.plan:not(.destacado)::before{content:"";display:block;height:33px}
.plan .precio{font-size:clamp(28px,2.4vw,34px);font-weight:700;letter-spacing:-.03em;
              margin:10px 0 2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.plan .precio small{font-size:14px;font-weight:500;color:var(--tinta-3);letter-spacing:0}
.plan .ref{font-size:12.5px;color:var(--tinta-3);margin-bottom:14px}
.plan .para-quien{font-size:13.5px;color:var(--tinta-2);min-height:44px}
.plan .topes{font-size:13.5px;font-weight:600;color:var(--tinta);padding:8px 0 12px;border-top:1px solid var(--linea)}
.plan .lista{flex:1;margin-bottom:20px}
.plan .lista li{font-size:14px;margin-bottom:8px}

/* ---------------- pie ---------------- */
footer{background:var(--tinta);color:#a9a8a2;padding:52px 0 32px;font-size:14px}
footer a{color:#e8e8e4;text-decoration:none}
footer a:hover{color:#fff}
.pie-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:32px}
.pie-grid h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:#fff;margin-bottom:12px}
.pie-grid ul{list-style:none}
.pie-grid li{margin-bottom:8px}
.pie-legal{border-top:1px solid #2a2a28;padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px}

/* ---------------- documentación ---------------- */
.doc{display:grid;grid-template-columns:250px 1fr;gap:40px;padding:40px 0 80px}
.doc-nav{position:sticky;top:92px;align-self:start;font-size:14.5px}
.doc-nav h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3);margin:22px 0 10px}
.doc-nav h4:first-child{margin-top:0}
.doc-nav a{display:block;padding:6px 0 6px 12px;text-decoration:none;color:var(--tinta-2);border-left:2px solid var(--linea)}
.doc-nav a:hover{color:var(--tinta)}
.doc-nav a.activo{color:var(--azul-700);border-left-color:var(--azul-600);font-weight:600}
.doc-cuerpo{max-width:70ch}
.doc-cuerpo h2{margin-top:44px}
.doc-cuerpo h2:first-child{margin-top:0}
.doc-cuerpo h3{margin-top:28px;font-size:18px}
.doc-cuerpo p,.doc-cuerpo li{color:var(--tinta-2);margin-bottom:12px}
.doc-cuerpo ul,.doc-cuerpo ol{padding-left:22px}
.doc-cuerpo code{background:var(--plano);border:1px solid var(--linea);border-radius:5px;
                 padding:1px 5px;font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:13.5px;color:var(--azul-700)}
.doc-cuerpo pre{background:var(--tinta);color:#e8e8e4;border-radius:10px;padding:16px;overflow-x:auto;margin:12px 0 18px}
.doc-cuerpo pre code{background:none;border:none;color:inherit;padding:0}
.aviso{border-left:3px solid var(--azul-600);background:var(--azul-50);padding:14px 16px;border-radius:0 10px 10px 0;margin:18px 0}
.aviso.alerta{border-color:var(--ambar);background:#fffbeb}
@media(max-width:860px){
  .doc{grid-template-columns:1fr;gap:24px}
  .doc-nav{position:static}
}

/* ---------------- páginas legales ---------------- */
.legal{max-width:70ch;padding:44px 20px 80px}
.legal h1{font-size:clamp(28px,4.5vw,40px);margin-bottom:6px}
.legal .actualizado{font-size:13px;color:var(--tinta-3);margin-bottom:28px}
.legal h2{font-size:20px;margin:36px 0 10px}
.legal h3{font-size:16px;margin:22px 0 8px}
.legal p,.legal li{color:var(--tinta-2);margin-bottom:12px}
.legal ul{padding-left:22px;margin-bottom:16px}
.legal li{margin-bottom:6px}
.legal a{color:var(--azul-700)}
.legal b{color:var(--tinta)}

/* =========================================================
   Y todo el movimiento se apaga para quien pidió que no se
   mueva nada. A mucha gente el movimiento le produce mareo
   de verdad, y el sistema operativo ya lo sabe: sólo hay
   que preguntárselo.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .revelar{opacity:1 !important;transform:none !important}
  .hero::after,.mock{animation:none !important}
  .btn:hover,.card:hover,.plan:hover{transform:none !important}
}

/* =========================================================
   AJUSTES DE MÓVIL
   La página se lee más en el teléfono que en el escritorio,
   así que estos no son "arreglos": son la mitad del diseño.
   ========================================================= */
@media(max-width:640px){
  section{padding:52px 0}
  .wrap{padding:0 18px}

  /* Un botón que no se puede tocar con el pulgar no es un botón */
  .btn{padding:14px 20px;font-size:15.5px}
  .hero .acciones .btn{flex:1 1 100%;text-align:center}

  h2{margin-bottom:10px}
  .cabecera{margin-bottom:28px}
  .lead{font-size:16px}

  /* En una columna, las tarjetas respiran menos y se ven más */
  .card{padding:20px}
  .plan{padding:22px}
  .grid{gap:12px}

  /* El selector Mensual/Anual, a lo ancho */
  .periodo{display:flex;width:100%;margin-top:22px}
  .periodo button{flex:1;padding:11px 8px}

  /* La insignia se ajusta al ancho del teléfono en vez de desbordarse */
  .pildora{font-size:12.5px;padding:6px 12px 6px 6px;border-radius:16px}

  /* Y la mancha de color se encoge: a 420 px sobre una pantalla de 390
     dejaba de ser un matiz y se comía medio hero */
  .hero::after{width:260px;height:260px;right:-120px;bottom:-160px;opacity:.1}
  .hero::before{background-size:44px 44px}
  .pie-legal{flex-direction:column;gap:8px}
}

/* En pantallas medianas el hero no necesita tanto aire arriba */
@media(max-width:920px){
  html{scroll-padding-top:80px}
}

/* Y en pantallas muy anchas, que el contenido no se estire sin fin */
@media(min-width:1400px){
  :root{--ancho:1180px}
}