/* =========================================================
   Precisa Studio — estilos
   Cómo leer este archivo:
   1) Variables (colores, tipografías): cambiar aquí cambia toda la web.
   2) Base (textos, enlaces, contenedor).
   3) Componentes (botones, tarjetas, etiquetas…).
   4) Estructura común (cabecera, migas, pie).
   5) Secciones de cada página.
   6) Formulario de solicitudes.
   7) Animaciones.
   8) Ajustes para tablet y celular (al final).
   ========================================================= */

/* 0) TIPOGRAFÍAS (guardadas en la propia web: más rápido y sin depender de Google) */
@font-face {
  font-family: "Manrope"; src: url("fonts/manrope.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

/* 1) VARIABLES ------------------------------------------------ */
:root {
  --grafito: #14171C;
  --grafito-2: #1D2128;      /* tarjetas sobre fondo oscuro */
  --grafito-3: #2A2F38;      /* bordes sobre fondo oscuro */
  --hueso: #F6F5F1;
  --blanco: #FFFFFF;
  --lima: #C6F432;           /* acento: solo sobre fondo oscuro o como fondo */
  --lima-texto: #4F7A00;     /* lima legible sobre fondo claro */
  --lima-suave: #EEF8CC;
  --gris: #5F6672;
  --gris-claro: #9AA0A6;
  --borde: #E4E2DC;
  --error-claro: #FF9C8A;    /* error sobre fondo oscuro */
  --error: #B42318;          /* error sobre fondo claro */
  --radio: 14px;
  --ancho: 1120px;
  --titulos: "Manrope", system-ui, sans-serif;
  --texto: "Inter", system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(20,23,28,.04), 0 8px 24px rgba(20,23,28,.06);
  --sombra-alta: 0 2px 4px rgba(20,23,28,.05), 0 16px 40px rgba(20,23,28,.10);
  --curva: cubic-bezier(.2,.7,.2,1);
}

/* 2) BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  color: var(--grafito);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, .h3 { font-family: var(--titulos); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 .5em; overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.3vw, 2.5rem); font-weight: 800; }
h3, .h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; }
.h2-chico { font-size: 1.4rem; margin-bottom: 18px; }
p { margin: 0 0 1em; }
code { font-size: .9em; background: var(--lima-suave); color: #2F4700; padding: 1px 6px; border-radius: 6px; }
.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.seccion { padding: 96px 0; }
.seccion--blanca { background: var(--blanco); }
.seccion--oscura { background: var(--grafito); color: var(--hueso); }
.antetitulo {
  display: inline-block; font-family: var(--titulos); font-weight: 700;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lima-texto); margin-bottom: 14px;
}
.seccion--oscura .antetitulo, .hero .antetitulo { color: var(--lima); }
.intro { max-width: 640px; color: var(--gris); font-size: 1.1rem; }
.seccion--oscura .intro, .hero .intro { color: var(--gris-claro); }
.nota { color: var(--gris); font-size: .95rem; }
.nota--caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 24px; margin-top: 28px; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 16px; background: var(--lima); padding: 8px 12px; z-index: 100; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--lima-texto); outline-offset: 3px; }
.seccion--oscura :focus-visible, .hero :focus-visible, .cabecera :focus-visible, .pie :focus-visible, .formulario :focus-visible { outline-color: var(--lima); }
[hidden] { display: none !important; }

/* 3) COMPONENTES --------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--titulos); font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: transform .2s var(--curva), background-color .2s, box-shadow .2s, color .2s;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton:disabled { opacity: .6; cursor: progress; transform: none; }
.boton--lima { background: var(--lima); color: var(--grafito); }
.boton--lima:hover { box-shadow: 0 8px 24px rgba(198,244,50,.28); }
.boton--borde { border-color: currentColor; background: transparent; }
.boton--borde:hover { background: rgba(127,127,127,.08); }
.boton--borde-claro { border-color: var(--grafito-3); background: transparent; color: var(--hueso); }
.boton--oscuro { background: var(--grafito); color: var(--hueso); }
.boton--oscuro:hover { box-shadow: var(--sombra-alta); }
.boton svg { width: 20px; height: 20px; flex: none; }
.enlace-boton {
  background: none; border: 0; padding: 10px 0; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--lima-texto); text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
.enlace-boton svg { width: 18px; height: 18px; }
.enlace-boton--claro { color: var(--hueso); }
.enlace-boton.resaltado { color: var(--lima); }
.enlace-flecha { color: var(--lima-texto); font-weight: 700; text-decoration: none; display: inline-flex; padding: 8px 0; }
.enlace-flecha:hover { text-decoration: underline; text-underline-offset: 3px; }

.check { color: var(--lima-texto); font-weight: 800; }
.seccion--oscura .check, .hero .check, .plan--destacado .check, .flujo .check { color: var(--lima); }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 28px;
}
.seccion--blanca .tarjeta { background: var(--hueso); }
.tarjeta p { color: var(--gris); margin: 0; }
.tarjeta .plan__precio { color: inherit; }
.icono-caja {
  width: 48px; height: 48px; border-radius: 12px; background: var(--grafito);
  color: var(--lima); display: grid; place-items: center; margin-bottom: 18px;
}
.icono-caja svg { width: 24px; height: 24px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.etiquetas li { background: var(--blanco); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 12px; font-size: .85rem; }
.seccion--blanca .etiquetas li, .tarjeta .etiquetas li { background: var(--hueso); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.cabeza-seccion { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 40px; }
.cabeza-seccion h2 { margin: 0; }
.cabeza-seccion .intro { margin: 0; }
.cta-linea { margin: 32px 0 0; font-weight: 500; }
.cta-linea a:not(.boton) { color: var(--lima-texto); font-weight: 700; }
.tabla-scroll { overflow-x: auto; margin: 8px 0 16px; }

/* 4) ESTRUCTURA COMÚN ---------------------------------------- */

/* Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 23, 28, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--hueso); border-bottom: 1px solid rgba(255,255,255,.06);
  transition: box-shadow .25s;
}
.cabecera.con-sombra { box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.cabecera .contenedor { display: flex; align-items: center; height: 68px; gap: 20px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hueso); flex: none; }
.marca svg { width: 30px; height: 30px; transition: transform .3s var(--curva); }
.marca:hover svg { transform: rotate(-6deg); }
.marca span { font-family: var(--titulos); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; }
.marca small { font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gris-claro); }
.cabecera nav { margin-left: auto; }
.menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; text-decoration: none; color: var(--gris-claro); font-size: .95rem; padding: 8px 12px; border-radius: 999px; transition: color .2s, background-color .2s; }
.menu a:hover { color: var(--hueso); background: rgba(255,255,255,.06); }
.menu a[aria-current="page"] { color: var(--hueso); background: rgba(198,244,50,.12); }
.boton--cabecera { min-height: 40px; padding: 8px 18px; font-size: .9rem; flex: none; gap: 0; }
.boton--cabecera .solo-escritorio { padding-left: .28em; }
.menu-boton {
  display: none; width: 44px; height: 44px; flex: none; border-radius: 12px;
  align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: var(--hueso); border: 1px solid rgba(255,255,255,.18);
}
.menu-boton svg { width: 22px; height: 22px; }

/* Migas de pan */
.migas { background: var(--grafito); color: var(--gris-claro); font-size: .85rem; }
.migas ol { list-style: none; margin: 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.migas li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.migas a { color: var(--gris-claro); text-decoration: none; }
.migas a:hover { color: var(--hueso); text-decoration: underline; }
.migas [aria-current] { color: var(--hueso); }

/* Pie */
.pie { background: var(--grafito); color: var(--gris-claro); padding: 64px 0 24px; border-top: 1px solid rgba(255,255,255,.06); font-size: .92rem; }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.pie__marca p { margin-top: 16px; max-width: 300px; }
.pie__titulo { font-family: var(--titulos); font-weight: 700; color: var(--hueso); margin-bottom: 8px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie ul a { color: var(--gris-claro); text-decoration: none; display: inline-block; padding: 6px 0; }
.pie ul a:hover { color: var(--hueso); }
.pie__legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; }
.pie__legal p { margin: 0; }

/* Botón flotante de WhatsApp */
.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .2s var(--curva);
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante svg { width: 30px; height: 30px; }

/* 5) SECCIONES ------------------------------------------------ */

/* Hero */
.hero { background: var(--grafito); color: var(--hueso); padding: 96px 0 104px; position: relative; overflow: hidden; }
.hero h1 span { color: var(--lima); }
.hero .intro { font-size: 1.2rem; margin-bottom: 32px; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero__alterno { margin: 0; color: var(--gris-claro); font-size: .95rem; }
.hero__alterno a { color: var(--lima); font-weight: 600; }
.hero--inicio { padding: 88px 0 56px; }
.hero--inicio::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 75% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 75% 40%, #000 30%, transparent 75%);
}
.hero--inicio h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 56px; align-items: center; position: relative; }
.hero--pagina { padding: 40px 0 72px; }
.hero--pagina h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 860px; }
.hero--pagina .hero__botones { margin: 0; }
.hero--compacto { padding-bottom: 56px; }
.hero--404 { min-height: 70vh; display: grid; place-items: center; }
.senales { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 40px 0 0; margin: 48px 0 0; color: var(--gris-claro); font-size: .95rem; border-top: 1px solid rgba(255,255,255,.08); position: relative; }

/* Tarjeta de flujo del hero */
.flujo { margin: 0; background: linear-gradient(180deg, var(--grafito-2), #181B21); border: 1px solid var(--grafito-3); border-radius: 20px; padding: 24px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.flujo__titulo { display: flex; align-items: center; gap: 10px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-claro); font-family: var(--titulos); font-weight: 700; margin-bottom: 18px; }
.flujo__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 4px rgba(198,244,50,.15); }
.flujo__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.flujo__pasos li { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 14px; position: relative; }
.flujo__pasos li:not(:last-child)::after { content: ""; position: absolute; left: 31px; bottom: -11px; width: 2px; height: 10px; background: var(--grafito-3); }
.flujo__icono { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--grafito); border: 1px solid var(--grafito-3); color: var(--lima); font-family: var(--titulos); font-weight: 800; font-size: .8rem; }
.flujo__pasos strong { display: block; font-family: var(--titulos); font-size: .98rem; }
.flujo__pasos small { color: var(--gris-claro); font-size: .85rem; }
.flujo__pie { margin: 16px 0 0; font-size: .88rem; color: var(--gris-claro); display: flex; gap: 8px; }

/* Servicios (inicio) */
.servicios-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.servicio-mini { grid-column: span 2; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .25s var(--curva), box-shadow .25s, border-color .25s; }
.servicio-mini:nth-child(4) { grid-column: 1 / span 3; }
.servicio-mini--destacado { grid-column: 4 / span 3; background: var(--grafito); color: var(--hueso); border-color: var(--grafito); }
.servicio-mini--destacado p { color: var(--gris-claro); }
.servicio-mini--destacado .icono-caja { background: var(--lima); color: var(--grafito); }
.servicio-mini p { margin-bottom: 20px; }
.servicio-mini__enlace { margin-top: auto; font-weight: 700; color: var(--lima-texto); font-size: .95rem; }
.servicio-mini--destacado .servicio-mini__enlace { color: var(--lima); }
.servicio-mini:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: transparent; }

/* Problemas (inicio) */
.problemas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.frases { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.frases li { background: var(--hueso); border: 1px solid var(--borde); border-radius: 16px 16px 16px 4px; padding: 16px 20px; font-family: var(--titulos); font-weight: 600; font-size: 1.02rem; }
.frases li:nth-child(even) { margin-left: 32px; }

/* Calidad */
.calidad { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.lista-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-checks li {
  background: var(--grafito-2); border-radius: 12px; padding: 14px 20px;
  display: flex; gap: 12px; align-items: center; font-weight: 500;
}
.calidad__ejemplo { grid-column: 1 / -1; background: var(--grafito-2); border-radius: var(--radio); padding: 28px; }
.calidad__ejemplo p { color: var(--gris-claro); }
.calidad__ejemplo table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.calidad__ejemplo th, .calidad__ejemplo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #343A44; }
.calidad__ejemplo th { font-family: var(--titulos); color: var(--hueso); }
.calidad__ejemplo td:last-child { color: var(--lima); font-weight: 600; }
.enlace-claro { color: var(--lima); font-weight: 700; display: inline-block; padding: 10px 0; }

/* Metodología en línea (inicio) */
.metodo-linea { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; counter-reset: etapa; border-top: 2px solid var(--borde); }
.metodo-linea li { counter-increment: etapa; padding: 20px 14px 0 0; position: relative; display: grid; gap: 4px; align-content: start; }
.metodo-linea li::before { content: counter(etapa, decimal-leading-zero); font-family: var(--titulos); font-weight: 800; color: var(--lima-texto); font-size: .9rem; }
.metodo-linea li::after { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--hueso); border: 2px solid var(--lima-texto); }
.metodo-linea strong { font-family: var(--titulos); font-size: 1.05rem; }
.metodo-linea span { color: var(--gris); font-size: .9rem; line-height: 1.45; }

/* Proyectos */
.proyectos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.proyecto-tarjeta { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--curva), box-shadow .25s; }
.proyecto-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.proyecto-tarjeta > img { aspect-ratio: 900 / 560; object-fit: cover; width: 100%; border-bottom: 1px solid var(--borde); }
.proyecto-tarjeta__texto { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.proyecto-tarjeta__texto p { margin-bottom: 8px; }
.proyecto-tarjeta .proyecto__botones { margin-top: auto; padding-top: 8px; }
.proyecto__tipo { display: inline-block; font-family: var(--titulos); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lima-texto); margin-bottom: 8px; }
.proyecto__tipo--demo { color: #8A5A00; }
.proyecto__botones { display: flex; gap: 12px; flex-wrap: wrap; }
.demo-portada {
  aspect-ratio: 900 / 560; background: var(--grafito); color: var(--hueso);
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; padding: 24px;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.demo-portada span:not(:nth-child(2)) { background: var(--grafito-2); border: 1px solid var(--grafito-3); border-radius: 10px; padding: 12px 16px; }
.demo-portada span:nth-child(2) { color: var(--lima); font-size: 1.4rem; }
.demo-portada span:last-child { border-color: var(--lima); color: var(--lima); }
.proyecto-siguiente { border: 2px dashed var(--borde); background: transparent !important; display: grid; gap: 8px; justify-items: start; }
.proyecto-siguiente p { margin-bottom: 8px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filtro { font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; padding: 8px 16px; min-height: 40px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); color: var(--grafito); transition: background-color .2s, color .2s; }
.filtro[aria-pressed="true"] { background: var(--grafito); color: var(--hueso); border-color: var(--grafito); }
.filtros__vacio { color: var(--gris); }

/* CTA final */
.cta-final { padding: 80px 0; }
.cta-final__caja { display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center; }
.cta-final__caja h2 { margin-bottom: .3em; }
.cta-final__caja .intro { margin: 0; }
.cta-final__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta-final__caja--clara { background: var(--blanco); border: 1px solid var(--borde); border-radius: 20px; padding: 40px; }

/* Página de servicios */
.servicios-lista { display: grid; gap: 20px; }
.servicio-fila { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 32px; align-items: center; background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px; padding: 32px; transition: box-shadow .25s, transform .25s var(--curva); }
.servicio-fila:hover { box-shadow: var(--sombra-alta); }
.servicio-fila__cabeza { display: flex; gap: 20px; align-items: flex-start; }
.servicio-fila__cabeza h2 { font-size: 1.55rem; margin-bottom: 6px; }
.servicio-fila__cabeza p { color: var(--gris); margin: 0; }
.servicio-fila__num svg { width: 22px; height: 22px; }
.servicio-fila__num { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--grafito); color: var(--lima); display: grid; place-items: center; font-family: var(--titulos); font-weight: 800; }
.servicio-fila__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.servicio-fila__items li { font-size: .85rem; padding: 4px 10px; border-radius: 999px; background: var(--hueso); border: 1px solid var(--borde); }
.servicio-fila__pie { display: grid; gap: 10px; justify-items: end; text-align: right; }
.desde { font-family: var(--titulos); font-weight: 800; font-size: 1.6rem; margin: 0; letter-spacing: -0.02em; white-space: nowrap; }
.desde small { font-size: .85rem; font-weight: 600; color: var(--gris); }
.servicio-fila--destacado { background: var(--grafito); color: var(--hueso); border-color: var(--grafito); }
.servicio-fila--destacado .servicio-fila__cabeza p { color: var(--gris-claro); }
.servicio-fila--destacado .servicio-fila__num { background: var(--lima); color: var(--grafito); }
.servicio-fila--destacado .servicio-fila__items li { background: var(--grafito-2); border-color: var(--grafito-3); }
.servicio-fila--destacado .desde small { color: var(--gris-claro); }

/* Páginas de cada servicio */
.lista-problemas, .lista-beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-problemas li { position: relative; padding: 14px 18px 14px 44px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; }
.lista-problemas li::before { content: "!"; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: #FCE8E3; color: var(--error); font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.lista-problemas--neutra li::before { content: "?"; background: var(--hueso); color: var(--gris); }
.lista-beneficios li { display: flex; gap: 12px; padding: 4px 0; }
.ejemplos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.ejemplos .tarjeta h3 { margin-bottom: 8px; }
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 24px; }
.extra { display: grid; gap: 2px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 16px 20px; }
.extra strong { font-family: var(--titulos); }
.extra span { color: var(--gris); font-size: .95rem; }

/* Precios (paquetes) */
.precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; transition: transform .25s var(--curva), box-shadow .25s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.plan--destacado { background: var(--grafito) !important; color: var(--hueso); border-color: var(--grafito); }
.plan__etiqueta {
  position: absolute; top: -13px; left: 28px; background: var(--lima); color: var(--grafito);
  font-family: var(--titulos); font-weight: 800; font-size: .75rem; padding: 4px 12px; border-radius: 999px;
}
.plan__precio { font-family: var(--titulos); font-weight: 800; font-size: 2.3rem; margin: 6px 0 18px; letter-spacing: -0.03em; }
.plan__precio small { font-size: .95rem; font-weight: 600; color: var(--gris); }
.plan--destacado .plan__precio small { color: var(--gris-claro); }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; }
.plan .boton { margin-top: auto; }
.notas-precios { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; color: var(--gris); font-size: .95rem; }
.notas-precios p { margin: 0; }

/* Soluciones a medida */
.traducciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.traduccion { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px 24px; }
.traduccion__frase { font-family: var(--titulos); font-weight: 700; font-size: 1.08rem; margin-bottom: 10px; }
.traduccion__solucion { color: var(--gris); margin: 0; padding-left: 18px; border-left: 3px solid var(--lima); }
.pasos { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: paso; }
.paso { counter-increment: paso; }
.paso::before { content: counter(paso, decimal-leading-zero); display: block; font-family: var(--titulos); font-weight: 800; font-size: 1.1rem; color: var(--lima-texto); margin-bottom: 10px; }

/* Soluciones por problema */
.indice-soluciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.indice-soluciones a { color: var(--hueso); text-decoration: none; border: 1px solid var(--grafito-3); border-radius: 999px; padding: 8px 16px; font-size: .92rem; transition: border-color .2s, color .2s; }
.indice-soluciones a:hover { border-color: var(--lima); color: var(--lima); }
.soluciones { display: grid; gap: 20px; }
.solucion { display: grid; grid-template-columns: 80px 1fr; gap: 24px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px; padding: 32px; }
.solucion__num { font-family: var(--titulos); font-weight: 800; font-size: 2.2rem; color: var(--lima-texto); line-height: 1; }
.solucion h2 { font-size: 1.6rem; }
.solucion p { max-width: 720px; }
.solucion__dolor { color: var(--gris); }
.solucion .etiquetas { margin: 8px 0 4px; }

/* Nosotros: etapas */
.etapas { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; max-width: 860px; }
.etapa { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding-bottom: 32px; position: relative; }
.etapa:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 6px; width: 2px; background: var(--borde); }
.etapa__num { width: 48px; height: 48px; border-radius: 14px; background: var(--grafito); color: var(--lima); display: grid; place-items: center; font-family: var(--titulos); font-weight: 800; }
.etapa h3 { margin: 10px 0 6px; }
.etapa p { color: var(--gris); margin-bottom: 6px; }
.etapa__recibes { font-size: .95rem; }
.etapa__recibes strong { color: var(--grafito); }

/* Demo */
.demo { display: grid; gap: 28px; }
.demo__panel, .demo__resultado { background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px; padding: 32px; }
.demo__acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.demo__archivo { position: relative; }
.demo__archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.demo__archivo:focus-within { outline: 3px solid var(--lima-texto); outline-offset: 3px; }
.estado-demo { margin: 16px 0 0; min-height: 1.5em; font-weight: 500; }
.estado-demo.ok { color: var(--lima-texto); }
.estado-demo.error { color: var(--error); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.kpi { background: var(--hueso); border-radius: 12px; padding: 16px; display: grid; gap: 2px; }
.kpi span { color: var(--gris); font-size: .85rem; }
.kpi strong { font-family: var(--titulos); font-size: 1.35rem; letter-spacing: -0.02em; }
.dos-columnas--tablas { gap: 32px; }
.tabla-datos { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.tabla-datos th, .tabla-datos td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borde); }
.tabla-datos th { font-family: var(--titulos); font-size: .85rem; color: var(--gris); }
.tabla-datos td:not(:first-child), .tabla-datos th:not(:first-child) { text-align: right; white-space: nowrap; }
.lista-errores { color: var(--error); font-size: .92rem; margin: 0 0 24px; padding-left: 20px; }
.demo__resultado > .boton { margin-top: 8px; }

/* Caso de estudio */
.articulo { max-width: 780px; }
.articulo h2 { font-size: 1.7rem; margin-top: 56px; }
.articulo table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: .95rem; }
.articulo th, .articulo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.articulo th { font-family: var(--titulos); }
.articulo figure { margin: 24px 0; }
.articulo figcaption { color: var(--gris); font-size: .9rem; margin-top: 8px; }
.articulo h3 { margin-top: 32px; }
.galeria-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.galeria-pasos figure { margin: 8px 0 16px; }
.galeria-pasos img { border-radius: 12px; border: 1px solid var(--borde); }
.cta-caja { margin: 40px 0 8px; padding: 24px; border-radius: var(--radio); background: var(--grafito); color: var(--hueso); }
.cta-caja p { margin-bottom: 16px; }
.capturas-movil { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.capturas-movil img, .articulo figure img { border-radius: 12px; border: 1px solid var(--borde); }

/* Preguntas frecuentes */
.faq { max-width: 820px; margin-top: 32px; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--titulos); font-weight: 700; font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.6rem; color: var(--lima-texto); transition: transform .25s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--gris); padding-right: 40px; }

/* 6) FORMULARIO DE SOLICITUDES ------------------------------- */
.seccion--formulario { padding-top: 64px; }
.contacto { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
.contacto__lado { position: sticky; top: 100px; }
.contacto__lado .h2-chico + * { margin-top: 0; }
.mini-pasos { margin: 0 0 36px; padding-left: 22px; display: grid; gap: 12px; color: var(--gris); }
.mini-pasos strong { color: var(--grafito); }
.dato-contacto { display: flex; gap: 12px; align-items: center; min-height: 44px; margin: 0 0 6px; color: var(--grafito); text-decoration: none; font-weight: 500; }
.dato-contacto:hover { text-decoration: underline; }
.dato-contacto svg { width: 22px; height: 22px; color: var(--lima-texto); flex: none; }

.formulario { display: grid; gap: 16px; background: var(--grafito); color: var(--hueso); padding: 36px; border-radius: 20px; box-shadow: var(--sombra-alta); }
.formulario fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.formulario legend { font-family: var(--titulos); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 8px; padding: 0; }
.formulario legend:focus { outline: none; }
.formulario .grupo legend { font-size: .95rem; font-weight: 600; font-family: var(--texto); letter-spacing: 0; margin-bottom: 4px; }
.formulario label { font-weight: 500; font-size: .95rem; }
.formulario small { color: var(--gris-claro); font-weight: 400; }
.formulario input:not([type="radio"]):not([type="checkbox"]), .formulario select, .formulario textarea {
  font: inherit; font-size: 1rem; color: var(--hueso); background: var(--grafito-2);
  border: 1px solid var(--grafito-3); border-radius: 10px; padding: 12px 14px; width: 100%; min-height: 48px;
  transition: border-color .2s, box-shadow .2s;
}
.formulario textarea { resize: vertical; min-height: 96px; }
.formulario ::placeholder { color: #7D848F; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--lima); box-shadow: 0 0 0 3px rgba(198,244,50,.18); }
.formulario [aria-invalid="true"]:not([type="radio"]) { border-color: var(--error-claro); }
.formulario .doble { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario .doble > div { display: grid; gap: 8px; align-content: start; }
.obligatorio { color: var(--lima); }
.ayuda { color: var(--gris-claro); font-size: .88rem; margin: 0; }
.error-campo { color: var(--error-claro); font-size: .88rem; margin: 0; min-height: 0; }
.error-campo:empty { display: none; }
.pista { color: var(--lima); font-size: .92rem; margin: 4px 0 0; min-height: 1.4em; }

.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span { display: grid; gap: 2px; height: 100%; padding: 14px 16px 14px 44px; border: 1px solid var(--grafito-3); border-radius: 12px; background: var(--grafito-2); transition: border-color .2s, background-color .2s; position: relative; }
.opcion span::before { content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #59606B; transition: border-color .2s, box-shadow .2s; }
.opcion strong { font-family: var(--titulos); font-size: .98rem; }
.opcion small { font-size: .84rem; }
.opcion:hover span { border-color: #4A515C; }
.opcion input:checked + span { border-color: var(--lima); background: rgba(198,244,50,.06); }
.opcion input:checked + span::before { border-color: var(--lima); box-shadow: inset 0 0 0 4px var(--grafito-2), inset 0 0 0 10px var(--lima); }
.opcion input:focus-visible + span { outline: 3px solid var(--lima); outline-offset: 2px; }
.opcion--asesoria span { border-style: dashed; border-color: rgba(198,244,50,.45); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--grafito-3); background: var(--grafito-2); font-size: .9rem; transition: border-color .2s, background-color .2s, color .2s; }
.chip input:checked + span { background: var(--lima); color: var(--grafito); border-color: var(--lima); font-weight: 600; }
.chip input:focus-visible + span { outline: 3px solid var(--lima); outline-offset: 2px; }

.consentimiento { display: flex !important; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 400 !important; color: var(--gris-claro); margin-top: 8px; }
.consentimiento input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--lima); }

.formulario__botones { display: flex; gap: 12px; justify-content: space-between; margin-top: 8px; }
.formulario__botones .boton[data-accion="siguiente"], .formulario__botones .boton[data-accion="enviar"] { margin-left: auto; min-width: 180px; }
.estado-form { margin: 0; font-size: .95rem; }
.estado-form:empty { display: none; }
.estado-form.ok { color: var(--lima); }
.estado-form.error { color: var(--error-claro); }
.trampa { display: none; } /* campo oculto anti-spam */

/* Con JavaScript: un paso a la vez y barra de progreso */
.progreso { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.progreso li { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--gris-claro); padding-top: 10px; border-top: 3px solid var(--grafito-3); transition: border-color .3s, color .3s; }
.progreso li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grafito-2); font-size: .75rem; font-weight: 700; }
.progreso li[aria-current="step"] { color: var(--hueso); border-color: var(--lima); }
.progreso li[aria-current="step"] span { background: var(--lima); color: var(--grafito); }
.progreso li.hecho { border-color: rgba(198,244,50,.45); }
.progreso li.hecho span { background: rgba(198,244,50,.2); color: var(--lima); }
.formulario.por-pasos .paso-form { animation: entrar .35s var(--curva); }

.exito { background: var(--grafito); color: var(--hueso); border-radius: 20px; padding: 48px 36px; text-align: center; box-shadow: var(--sombra-alta); }
.exito:focus { outline: none; }
.exito__icono { width: 64px; height: 64px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--lima); color: var(--grafito); font-size: 2rem; font-weight: 800; margin-bottom: 16px; }
.exito p { color: var(--gris-claro); }
.exito .nota { color: var(--gris-claro); }

/* 7) ANIMACIONES (sutiles; desactivadas si el usuario prefiere menos movimiento) */
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.con-animaciones .aparece { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--curva), transform .6s var(--curva); }
.con-animaciones .aparece.visible { opacity: 1; transform: none; }
.con-animaciones .aparece:nth-child(2) { transition-delay: .06s; }
.con-animaciones .aparece:nth-child(3) { transition-delay: .12s; }
.con-animaciones .aparece:nth-child(4) { transition-delay: .18s; }
.con-animaciones .aparece:nth-child(5) { transition-delay: .24s; }
.con-animaciones .aparece:nth-child(6) { transition-delay: .3s; }
.con-animaciones .aparece:nth-child(7) { transition-delay: .36s; }
.hero--inicio h1, .hero--inicio .intro, .hero--inicio .hero__botones, .flujo { animation: entrar .7s var(--curva) both; }
.hero--inicio .intro { animation-delay: .08s; }
.hero--inicio .hero__botones { animation-delay: .16s; }
.flujo { animation-delay: .24s; }
.flujo__punto { animation: latido 2.4s ease-in-out infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(198,244,50,.05); } }

/* 8) TABLET Y CELULAR ----------------------------------------- */
@media (max-width: 1080px) {
  .menu a { padding: 8px 9px; }
  .solo-escritorio { display: none; }
}
@media (max-width: 960px) {
  .menu { display: none; }               /* en tablet y celular el menú se abre con el botón ☰ */
  .menu-boton { display: inline-flex; }
  .boton--cabecera { margin-left: auto; }
  .cabecera nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--grafito); margin: 0; }
  .cabecera.menu-abierto nav { border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 16px 32px rgba(0,0,0,.3); }
  .cabecera.menu-abierto .menu { display: flex; flex-direction: column; gap: 2px; width: min(100% - 32px, var(--ancho)); margin-inline: auto; padding: 8px 0 16px; }
  .cabecera.menu-abierto .menu a { padding: 12px 14px; font-size: 1.05rem; color: var(--hueso); }
  .hero__grid, .problemas, .calidad, .contacto, .dos-columnas, .cabeza-seccion { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cabeza-seccion { align-items: start; gap: 12px; }
  .grid-3, .precios, .pasos, .ejemplos { grid-template-columns: 1fr 1fr; }
  .servicios-grid { grid-template-columns: 1fr 1fr; }
  .servicio-mini, .servicio-mini:nth-child(4) { grid-column: auto; }
  .servicio-mini--destacado { grid-column: 1 / -1; }
  .servicio-fila { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .servicio-fila__pie { justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; justify-content: space-between; }
  .metodo-linea { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--borde); padding-left: 24px; }
  .metodo-linea li { padding: 0 0 18px; grid-template-columns: 36px 120px 1fr; align-items: baseline; gap: 8px; }
  .metodo-linea li::after { top: 6px; left: -31px; }
  .cta-final__caja { grid-template-columns: minmax(0, 1fr); }
  .cta-final__botones { justify-content: flex-start; }
  .contacto__lado { position: static; order: 2; }
  .pie__grid { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .notas-precios { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .galeria-pasos { grid-template-columns: 1fr 1fr; }
  .grid-3, .precios, .pasos, .ejemplos, .proyectos-grid, .traducciones, .servicios-grid { grid-template-columns: minmax(0, 1fr); }
  .precios { gap: 28px; }
  .frases li:nth-child(even) { margin-left: 16px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .seccion { padding: 64px 0; }
  .hero { padding: 56px 0 64px; }
  .hero--inicio { padding: 48px 0 40px; }
  .hero--pagina { padding: 28px 0 48px; }
  .hero__botones .boton { width: 100%; }
  .senales { margin-top: 32px; padding-top: 24px; flex-direction: column; gap: 8px; }
  .tarjeta, .servicio-fila, .solucion, .demo__panel, .demo__resultado { padding: 22px; }
  .solucion { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .solucion h2, .servicio-fila__cabeza h2 { font-size: 1.35rem; }
  .servicio-fila__cabeza { gap: 14px; }
  .servicio-fila__pie { grid-auto-flow: row; justify-items: stretch; }
  .servicio-fila__pie .boton { width: 100%; }
  .metodo-linea li { grid-template-columns: 32px 1fr; }
  .metodo-linea span { grid-column: 2; }
  .calidad__ejemplo { padding: 20px 16px; }
  .calidad__ejemplo table { font-size: .82rem; }
  .calidad__ejemplo th, .calidad__ejemplo td { padding: 8px 6px; }
  .calidad__ejemplo td:not(:first-child) { white-space: nowrap; }
  .formulario { padding: 22px 18px; border-radius: 16px; }
  .formulario .doble, .opciones { grid-template-columns: minmax(0, 1fr); }
  .formulario__botones { flex-wrap: wrap; }
  .formulario__botones .boton { flex: 1 1 140px; min-width: 0 !important; }
  .progreso li { font-size: 0; gap: 0; }            /* en pantallas chicas: solo números */
  .progreso li span { font-size: .75rem; }
  .cta-final__botones .boton { width: 100%; }
  .cta-final__caja--clara { padding: 24px; }
  .etapa { grid-template-columns: 48px 1fr; gap: 14px; }
  .etapa:not(:last-child)::before { left: 19px; }
  .etapa__num { width: 40px; height: 40px; border-radius: 12px; }
  .pie__grid { grid-template-columns: 1fr; gap: 24px; }
  .marca small { display: none; }
  .boton--cabecera { padding: 8px 14px; }
  .wa-flotante { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .kpi strong { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}