/* Imagine AI — páginas de servicio (Design System V3)
   ------------------------------------------------------------
   Reglas que las páginas de servicio necesitan y que NO viven en v3/imagine.css:
   están copiadas tal cual del <style> propio de pages/landing/index.html (home ES,
   verificado igual en en/index.html e it/index.html), porque esas clases sólo existen
   ahí — no se tocó imagine.css. Sólo tokens de :root (imagine.css), nada de valores
   nuevos. Se cargan DESPUÉS de /v3/imagine.css.

   Selectores incluidos y de qué sección de la home salen:
   - .plans / .plan            → #precios (tarjetas de planes)
   - #metodo / .method-aura /
     .method-grid / .method-card → #metodo (los 4 pasos)
   - .work2 / .mock / .mock-win /
     .mock-bar                 → #casos (tarjetas de casos; .wcard y .mock-body ya
                                  están en v3/imagine.css, no se repiten acá)
   - .close                    → #contacto (cierre)

   scripts/build-servicios.js no reescribe este archivo: es a mano, como imagine.css. */

/* --- planes (de #precios) --- */
.plans{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:660px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.plans>.plan:nth-child(5){grid-column:span 2}}
@media(min-width:1040px){
  .plans{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
  .plans>.plan:nth-child(1),.plans>.plan:nth-child(2),.plans>.plan:nth-child(3){grid-column:span 2}
  .plans>.plan:nth-child(4),.plans>.plan:nth-child(5){grid-column:span 3;padding:clamp(28px,2.8vw,38px)}
}
.plan{display:flex;flex-direction:column;gap:16px}
.plan .price{font-family:var(--font-title);font-weight:500;font-size:clamp(30px,3.6vw,42px);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.plan h3{font-size:20px}
.plan .btn{margin-top:auto;justify-content:center}
.plan.pick{position:relative}
.plan.pick::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;background:var(--art-grad-text);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* --- proceso (de #metodo) --- */
#metodo{background:var(--paper-2);position:relative;overflow:hidden;padding:clamp(64px,8vw,96px) 0}
#metodo>.wrap{position:relative;z-index:2}
#metodo .sec-head{margin-bottom:clamp(56px,7.5vw,88px)}
.method-aura{position:absolute;top:-12%;left:50%;transform:translateX(-50%);width:min(960px,90vw);height:560px;opacity:.18;z-index:1;filter:blur(88px);pointer-events:none;mask-image:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,1) 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.1) 68%,transparent 82%);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,1) 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.1) 68%,transparent 82%)}
.method-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(max-width:639px){#metodo .method-grid{gap:20px;padding:0 clamp(10px,3.5vw,22px)}.method-card{max-width:440px;margin:0 auto;width:100%}}
@media(min-width:640px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.method-grid{grid-template-columns:repeat(4,1fr)}}
.method-card{background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.92);border-radius:var(--r-lg);padding:clamp(32px,3.4vw,44px) clamp(24px,2.8vw,34px);display:flex;flex-direction:column;position:relative;min-height:clamp(290px,32vw,340px);box-shadow:0 10px 30px rgba(26,26,26,.03);transform-style:preserve-3d;transition:transform .4s cubic-bezier(.25,1,.5,1),background-color .35s,border-color .35s,box-shadow .35s}
.method-card:hover{background:var(--white);border-color:var(--rule-strong);transform:translateY(-4px);box-shadow:0 18px 42px rgba(26,26,26,.07)}
.method-card .n{position:absolute;top:24px;right:26px;font-family:var(--font-mono);font-size:28px;font-weight:500;color:rgba(26,26,26,.14);transition:color .3s}
.method-card .tick{width:32px;height:1px;background:rgba(26,26,26,.2);margin-bottom:18px;display:block}
.method-card:nth-child(1):hover .n{color:var(--art-orange)}
.method-card:nth-child(2):hover .n{color:var(--art-pink)}
.method-card:nth-child(3):hover .n{color:var(--art-purple)}
.method-card:nth-child(4):hover .n{color:var(--art-blue)}
.method-card h3{font-size:clamp(20px,2.3vw,25px);margin-bottom:12px}
.method-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.method-card .lab{margin-bottom:8px}

/* --- casos (de #casos; .wcard y .mock-body ya están en v3/imagine.css) --- */
.work2{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){
  .work2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .work2>:nth-child(2){margin-top:clamp(40px,6vw,88px)}
  /* Cantidad impar de casos (ej. 3): en una grilla de 2 columnas, la última
     tarjeta queda sola a media fila con un hueco al lado. :last-child sólo
     coincide con :nth-child(odd) cuando la posición del último hijo —y por lo
     tanto el total— es impar, así que no hace falta contar los casos en el
     generador. Con cantidad par no aplica (la grilla ya cierra completa). */
  .work2>.wcard:last-child:nth-child(odd){grid-column:1/-1}
}
.mock{border-radius:14px;background:var(--paper-3);padding:clamp(16px,2vw,26px) clamp(14px,1.8vw,22px) 0;overflow:hidden}
.mock-win{border-radius:9px 9px 0 0;background:var(--white);overflow:hidden;box-shadow:0 -1px 0 var(--rule) inset}
.mock-bar{display:flex;gap:5px;align-items:center;padding:9px 11px}
.mock-bar i{width:6px;height:6px;border-radius:50%;background:rgba(26,26,26,.15)}
.wmeta{padding:22px 8px 8px}
.wmeta h3{font-size:clamp(20px,2.2vw,25px);margin-top:8px}
.wmeta p{font-size:14.5px;color:var(--ink-soft);margin-top:8px;max-width:42ch}
/* La home siempre usa <video> adentro de .mock-body (ya cubierto por v3/imagine.css).
   Esta página usa <picture>/<img> estático (sin autoplay, más liviano) — regla propia,
   mínima, para que la imagen llene el recuadro igual que el video. */
.mock-body picture{display:block;width:100%;height:100%}
.mock-body img{width:100%;height:100%;object-fit:cover;display:block}

/* --- cierre (de #contacto) --- */
.close{text-align:center;max-width:820px;margin:0 auto;position:relative;z-index:1}
.close h2{font-size:clamp(34px,5.4vw,72px);letter-spacing:-.042em;line-height:.98;margin:20px 0 20px}
.close p{color:var(--ink-soft);font-size:16.5px;max-width:52ch;margin:0 auto}

/* --- guías relacionadas (#guias) y otros servicios (#otros-servicios) ---
   Las dos usan .rel, definida en v3/imagine.css como grilla de 3 columnas desde
   800px (compartida con el blog — no se toca ahí). Con exactamente 4 tarjetas
   .card, 3 columnas deja una sola abajo con dos huecos al lado. ":has()" con el
   truco de "quantity query" (:first-child + :nth-last-child(4)) detecta 4 hijas
   sin contarlas en el generador ni tocar el HTML: con 3 (o cualquier otra
   cantidad) .rel sigue igual que en imagine.css. Por debajo de 800px no hace
   falta nada: imagine.css ya deja .rel en 1 columna. */
@media(min-width:800px){
  #guias .rel:has(>.card:first-child:nth-last-child(4)),
  #otros-servicios .rel:has(>.card:first-child:nth-last-child(4)){
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(min-width:1040px){
  #guias .rel:has(>.card:first-child:nth-last-child(4)),
  #otros-servicios .rel:has(>.card:first-child:nth-last-child(4)){
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
}