/* ============================================================================
   site.css — nucleo compartido del sitio del estudio.

   Lo usan las paginas de servicio (/es/<servicio>/). Los home /es/ y /en/
   siguen con su CSS embebido a proposito: se verificaron en produccion el
   24-ago y no se tocan por una refactorizacion. Decision D14 del addendum.

   Las rutas de fuente son relativas a ESTE archivo (vive en /assets/), asi
   que sirven a cualquier profundidad de pagina sin recalcular ../
   ========================================================================== */

@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/onest.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geistmono.woff2) format('woff2')}

/* ---------- Tema claro (base) ---------- */
:root{
  color-scheme:light;
  --ink:#0f172a;--ink-soft:#334155;--muted:#64748b;--line:#e6e8ee;--line-strong:#cbd5e1;
  --bg:#ffffff;--surface:#ffffff;--panel:#f8fafc;--band-top:#fbfbfd;--band-bottom:#ffffff;
  --nav-bg:rgba(255,255,255,.72);--nav-line:rgba(230,232,238,.7);--btn-fg:#ffffff;
  --blue:#2563eb;--orange:#f97316;--violet:#7c3aed;--radius:22px;
  --glow-blue:rgba(37,99,235,.20);--glow-orange:rgba(249,115,22,.18);--glow-violet:rgba(124,58,237,.10);
  --ok-bg:#ecfdf5;--ok-fg:#047857;--ok-line:#a7f3d0;--ok-dot:#10b981;
  --warn-bg:#fff7ed;--warn-fg:#c2410c;--warn-line:#fed7aa;--warn-dot:#f59e0b;
  --cat-bg:#eff6ff;--cat-fg:#1d4ed8;--cat-line:#bfdbfe;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 30px -12px rgba(15,23,42,.12);
  --shadow-lift:0 1px 2px rgba(15,23,42,.04),0 22px 46px -20px rgba(15,23,42,.22);
  --font:'Onest',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ---------- Tema oscuro: azul-noche templado ----------
   Los dos bloques deben mantenerse IDENTICOS: el @media cubre a quien no tenga
   JS, el [data-theme] cubre la eleccion manual del toggle. Aqui son DOS copias
   y no cuatro: al vivir en un archivo compartido, deja de duplicarse por idioma. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#e7ebf3;--ink-soft:#b3bbc9;--muted:#8a93a3;--line:#2b323f;--line-strong:#5a6475;
    --bg:#0b0f18;--surface:#191f2a;--panel:#121721;--band-top:#0e131d;--band-bottom:#0b0f18;
    --nav-bg:rgba(11,15,24,.72);--nav-line:rgba(43,50,63,.7);--btn-fg:#0b0f18;
    --blue:#71a2ff;--orange:#f99549;--violet:#b298f9;
    --glow-blue:rgba(56,90,190,.30);--glow-orange:rgba(190,90,30,.22);--glow-violet:rgba(110,70,200,.20);
    --ok-bg:#223839;--ok-fg:#56d298;--ok-line:#2d584d;--ok-dot:#56d298;
    --warn-bg:#37332e;--warn-fg:#f2af48;--warn-line:#5e4d34;--warn-dot:#f2af48;
    --cat-bg:#253148;--cat-fg:#71a2ff;--cat-line:#35496e;
    --shadow:0 1px 2px rgba(0,0,0,.40), 0 12px 30px -12px rgba(0,0,0,.55);
    --shadow-lift:0 1px 2px rgba(0,0,0,.40),0 22px 46px -20px rgba(0,0,0,.70);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e7ebf3;--ink-soft:#b3bbc9;--muted:#8a93a3;--line:#2b323f;--line-strong:#5a6475;
  --bg:#0b0f18;--surface:#191f2a;--panel:#121721;--band-top:#0e131d;--band-bottom:#0b0f18;
  --nav-bg:rgba(11,15,24,.72);--nav-line:rgba(43,50,63,.7);--btn-fg:#0b0f18;
  --blue:#71a2ff;--orange:#f99549;--violet:#b298f9;
  --glow-blue:rgba(56,90,190,.30);--glow-orange:rgba(190,90,30,.22);--glow-violet:rgba(110,70,200,.20);
  --ok-bg:#223839;--ok-fg:#56d298;--ok-line:#2d584d;--ok-dot:#56d298;
  --warn-bg:#37332e;--warn-fg:#f2af48;--warn-line:#5e4d34;--warn-dot:#f2af48;
  --cat-bg:#253148;--cat-fg:#71a2ff;--cat-line:#35496e;
  --shadow:0 1px 2px rgba(0,0,0,.40), 0 12px 30px -12px rgba(0,0,0,.55);
  --shadow-lift:0 1px 2px rgba(0,0,0,.40),0 22px 46px -20px rgba(0,0,0,.70);
}

/* Activos que cambian con el tema. El display de estas imagenes se declara
   SOLO aqui, escrito como img.only-* para ganarle a las clases de una palabra:
   cualquier selector mas especifico que tambien declare display las duplica. */
img.only-light{display:block}
img.only-dark{display:none}
:root[data-theme="dark"] img.only-light{display:none}
:root[data-theme="dark"] img.only-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) img.only-light{display:none}
  :root:not([data-theme="light"]) img.only-dark{display:block}
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{position:relative}
img{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ---------------------------- Navegacion ---------------------------- */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(12px);background:var(--nav-bg);border-bottom:1px solid var(--nav-line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.06rem;letter-spacing:-.01em}
.brand-logo{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{color:var(--ink-soft);font-weight:500;font-size:.95rem}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.95rem;border-radius:999px;padding:11px 22px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-dark{background:var(--ink);color:var(--btn-fg)}
.btn-dark:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(15,23,42,.6)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.btn-lg{padding:14px 28px;font-size:1rem}
.nav .btn{padding:9px 18px;white-space:nowrap}
.nav-links a.cta-nav{display:inline-flex;color:var(--btn-fg)}
.lang{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;font-size:.8rem;font-weight:600}
.lang a{padding:4px 9px;border-radius:999px;color:var(--muted);line-height:1}
.lang a:hover{color:var(--ink)}
.lang a.lang-on{background:var(--ink);color:var(--btn-fg)}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);
  cursor:pointer;transition:color .15s ease, border-color .15s ease}
.theme-toggle:hover{color:var(--ink);border-color:var(--line-strong)}
.theme-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none}
}

/* ---------------------------- Secciones ---------------------------- */
.section{padding:92px 0}
.section-head{max-width:660px;margin:0 auto;text-align:center}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.02em}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.08rem}

/* ---------------------------- Formulario ----------------------------
   Copia literal del home. El borde va con --muted y NO con --line-strong:
   un control de formulario debe cumplir el 3:1 de WCAG 1.4.11 y
   --line-strong se queda en 2,77:1 sobre la tarjeta. */
.field{margin-top:15px}
.field label{display:block;font-size:.88rem;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.field .opt{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border-radius:13px;
  border:1px solid var(--muted);background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:.95rem;line-height:1.4}
.field textarea{resize:none;min-height:82px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.form-status{margin-top:13px;font-size:.9rem;line-height:1.5;display:none}
.form-status.is-visible{display:block}
.form-status.is-ok{color:var(--ok-fg)}
.form-status.is-error{color:var(--warn-fg)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-top:18px}

.contact{padding:92px 0}
.contact-panel{text-align:center}
.contact-panel h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;letter-spacing:-.02em}
.contact-panel p{margin:16px auto 0;max-width:54ch;color:var(--ink-soft);font-size:1.1rem}
.contact-form{max-width:520px;margin:34px auto 0;text-align:left}
.contact-form .btn{width:100%;margin-top:20px}
.contact-form .btn[disabled]{opacity:.6;cursor:progress}
.contact-form .form-status{text-align:center}
.contact-alt{margin-top:22px;font-size:.92rem;color:var(--muted)}
.contact-alt a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.contact-alt a:hover{color:var(--ink)}

/* ---------------------------- Pie ---------------------------- */
footer{border-top:1px solid var(--line);padding:34px 0}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.92rem}
.foot-inner .brand-sm{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink-soft)}
.foot-inner a{color:var(--ink-soft);font-weight:500}
.foot-inner a:hover{color:var(--ink)}
.foot-icon{height:18px;width:18px}

/* ====================================================================
   PAGINAS DE SERVICIO
   Sin eyebrows, sin puntos decorativos, sin flechas pegadas a enlaces y
   sin carding: el barrido de senales de IA (D13) tambien rige aqui.
   Acento azul, que es el codigo de color del trabajo para clientes.
   ==================================================================== */

.svc-hero{position:relative;isolation:isolate;overflow:hidden;padding:76px 0 68px;
  background:
    radial-gradient(1100px 520px at 14% 8%, var(--glow-blue), transparent 60%),
    radial-gradient(900px 500px at 88% 10%, var(--glow-violet), transparent 62%),
    var(--bg)}
/* Mismo telon de video del home. Un solo archivo sirve a los dos temas porque
   el velo se pinta con --bg. El foco va donde vive el texto, no al centro. */
.svc-media{position:absolute;inset:0;overflow:hidden;z-index:-2}
/* El encuadre va abajo, no arriba: la cabecera es ancha y baja, y con
   'top' entraba el techo del atrio y se perdia la multitud, que es lo que
   el clip tiene que mostrar. */
.svc-media video,.svc-media img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.svc-still{display:none}
.svc-veil{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(58% 74% at 28% 50%,
      color-mix(in srgb, var(--bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--bg) 72%, transparent) 46%,
      color-mix(in srgb, var(--bg) 30%, transparent) 76%,
      transparent 92%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 70%, transparent) 0%,
      color-mix(in srgb, var(--bg) 34%, transparent) 28%,
      color-mix(in srgb, var(--bg) 44%, transparent) 66%,
      var(--bg) 100%)}
@media (prefers-reduced-motion: reduce){
  .svc-video{display:none}
  .svc-still{display:block}
}
.crumbs{font-size:.88rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--ink-soft);font-weight:500}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-current]{color:var(--muted)}
.svc-hero h1{font-size:clamp(2rem,4vw,3.15rem);line-height:1.06;font-weight:800;letter-spacing:-.03em;
  margin:20px 0 0;max-width:20ch}
.svc-hero .lead{margin:20px 0 0;max-width:60ch;font-size:1.12rem;color:var(--ink-soft)}
.svc-hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* Que resuelve: reglas finas, no tarjetas. */
.svc-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 44px;margin-top:52px}
.svc-point{padding:24px 0 0;border-top:1px solid var(--line)}
.svc-point h3{font-size:1.14rem;font-weight:750;letter-spacing:-.01em}
.svc-point p{margin-top:11px;color:var(--ink-soft);font-size:1rem}

/* Que incluye: una lista, porque es una lista. */
.svc-includes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin-top:44px;max-width:900px;margin-inline:auto}
.svc-includes li{padding:17px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:baseline}
.svc-includes li b{font-weight:700;color:var(--blue);font-size:.92rem}
.svc-includes li span{color:var(--ink-soft)}
.svc-includes li strong{display:block;color:var(--ink);font-weight:650}

/* Proceso: lista ordenada, con la cifra en mono porque es una cifra. */
.svc-steps{list-style:none;counter-reset:paso;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;margin-top:52px}
.svc-step{counter-increment:paso;border-top:1px solid var(--line);padding-top:22px}
.svc-step h3{font-size:1.06rem;font-weight:750;margin-top:9px}
.svc-step p{margin-top:9px;color:var(--ink-soft);font-size:.98rem}
.svc-step-n{font-family:var(--mono);font-size:.86rem;color:var(--blue);font-weight:600}
.svc-step-n::before{content:counter(paso)}

/* La prueba. Sin tarjeta contenedora: la captura ya trae borde y sombra, y
   meterla en otra caja seria una card dentro de otra card. */
.svc-proof{background:linear-gradient(180deg,var(--band-top),var(--band-bottom))}
.svc-proof-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;margin-top:48px}
.svc-shot{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lift);background:var(--surface)}
.svc-shot img{width:100%;height:auto;display:block}
.svc-caption{margin-top:12px;font-size:.9rem;color:var(--muted);text-align:center}
.svc-proof-text h3{font-size:1.3rem;font-weight:750;letter-spacing:-.01em}
.svc-proof-text p{margin-top:14px;color:var(--ink-soft)}
.svc-proof-text .product-link{display:inline-block;margin-top:18px;color:var(--blue);font-weight:600}
.svc-proof-text .product-link:hover{text-decoration:underline;text-underline-offset:3px}
.svc-logos{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-top:26px}
.svc-logos img{height:34px;width:auto}
.svc-mockups{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svc-mockup{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1/1}
.svc-mockup img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* Preguntas frecuentes: abiertas, no en acordeon. Cinco preguntas se leen de
   corrido y el texto queda visible para el lector y para el rastreador. */
.faq-list{max-width:760px;margin:48px auto 0}
.faq-item{padding:26px 0;border-top:1px solid var(--line)}
.faq-item h3{font-size:1.1rem;font-weight:750;letter-spacing:-.01em}
.faq-item p{margin-top:11px;color:var(--ink-soft)}

/* Los otros servicios */
.svc-others{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 40px;margin-top:44px}
.svc-other{padding:22px 0 0;border-top:1px solid var(--line)}
.svc-other h3{font-size:1.06rem;font-weight:700}
.svc-other h3 a:hover{color:var(--blue)}
.svc-other p{margin-top:9px;color:var(--ink-soft);font-size:.96rem}

/* En movil el clip no va detras del texto: pasa a ser una banda superior y el
   discurso queda debajo, sobre fondo limpio. Detras del texto obligaba a un velo
   tan cerrado que el video no se apreciaba, y el texto perdia el fondo sereno. */
@media (max-width:820px){
  /* Fondo plano, por lo mismo que en el home: el degradado del pie funde a --bg. */
  .svc-hero{padding:0 0 52px;background:var(--bg)}
  .svc-media{position:relative;inset:auto;z-index:auto;height:196px;margin-bottom:32px}
  .svc-veil{display:none}
  /* El borde de abajo se funde con la pagina en vez de cortarse en seco. */
  .svc-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:88px;
    background:linear-gradient(180deg,transparent 0%,
      color-mix(in srgb, var(--bg) 55%, transparent) 52%, var(--bg) 100%);
    pointer-events:none}
}

@media (max-width:900px){
  .svc-points{grid-template-columns:1fr}
  .svc-includes{grid-template-columns:1fr;gap:0}
  .svc-proof-grid{grid-template-columns:1fr;gap:36px}
  .svc-others{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .nav-links{gap:15px}
  .nav-links a{font-size:.9rem}
}
@media (max-width:900px){
  .nav-links > a:not(.cta-nav){display:none}
}
@media (max-width:720px){
  .nav-links{gap:14px}
  .section{padding:68px 0}
  .contact{padding:68px 0}
}
@media (max-width:480px){
  .wrap{padding:0 16px}
  .nav-links{gap:8px}
  .brand-logo{height:26px}
  .nav .btn{padding:7px 11px;font-size:.78rem}
  .theme-toggle{width:32px;height:32px}
  .theme-toggle svg{width:15px;height:15px}
  .lang{font-size:.66rem;padding:2px}
  .lang a{padding:4px 6px}
  .svc-mockups{grid-template-columns:1fr}
}
/* Anchos muy estrechos (Fold, SE): el nav lleva un control mas desde el tema oscuro */
@media (max-width:380px){
  .wrap{padding:0 12px}
  .nav-links{gap:5px}
  .brand-logo{height:21px}
  .nav .btn{padding:5px 8px;font-size:.68rem}
  .lang{font-size:.58rem;padding:2px}
  .lang a{padding:3px 4px}
  .theme-toggle{width:29px;height:29px}
  .theme-toggle svg{width:14px;height:14px}
}