/* ============================================================
   servicios.html — página suelta (ver invariantes de CLAUDE.md:
   no carga main.js, el logo/animación de la barra van anulados,
   .panel__in se fuerza a visible sin cajón)
   ============================================================ */

@keyframes svcBob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes svcSway{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-14px) rotate(2.5deg)}66%{transform:translateY(8px) rotate(-2deg)}}
@keyframes svcRipple{0%,100%{scale:1;opacity:.5}50%{scale:1.12;opacity:.2}}
@keyframes svcSwim{0%{transform:translateX(0) rotate(0deg)}25%{transform:translateX(46px) rotate(4deg)}50%{transform:translateX(88px) rotate(-3deg)}75%{transform:translateX(40px) rotate(2deg)}100%{transform:translateX(0) rotate(0deg)}}

/* la barra en una página suelta no encadena con ninguna intro: aparece
   en su sitio desde el primer fotograma, sin el navDrop/itemIn de index.html */
.nav{animation:none;transform:none}
.nav__menu li{animation:none;opacity:1;transform:none}
/* .nav__mark lleva pointer-events:none en estilos.css (ahí es solo decorativo);
   aquí sí es un enlace, así que hay que devolvérselo a la propia <a> */
.nav__mark a{pointer-events:auto;display:block}
.nav__mark img{width:198px;height:auto;display:block}
@media (max-width:820px){.nav__mark img{width:150px}}

/* ============ red decorativa de fondo ============ */
.svc-net{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.svc-net__shape{position:absolute;top:var(--y);left:var(--x);width:var(--w);height:var(--h)}
.svc-net__shape[data-side="right"]{left:auto;right:var(--x)}
.svc-net__shape svg{width:100%;height:100%;color:var(--c,var(--sage));opacity:var(--o,1);
  transform-origin:50% 50%;rotate:var(--rot,0deg);
  animation:svcSway var(--dur,15s) ease-in-out infinite var(--dir,normal)}
.svc-net__shape--koi svg{animation-name:svcSwim}
.svc-net__shape--ripple{border-radius:50%;border:2px solid rgba(61,65,39,.1);
  animation:svcRipple var(--dur,10s) ease-in-out infinite}
@media (max-width:820px),(prefers-reduced-motion:reduce){.svc-net{display:none}}

/* ============ texto compartido ============ */
.svc-wrap{position:relative;z-index:1;max-width:1360px;margin:0 auto;
  padding:0 clamp(20px,5vw,64px) clamp(60px,8vw,110px)}
.svc-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--olive);margin-bottom:12px}
.svc-h2{font-size:clamp(28px,3.6vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.08;
  margin-bottom:12px;text-align:left}
.svc-lead{font-size:17px;color:rgba(61,65,39,.75);max-width:52ch;text-align:left}
.svc-highlight{display:inline-block;padding:.04em .28em .1em;margin:0 -.05em;
  color:var(--sand);background:var(--olive);border-radius:var(--r-pill)}

/* ============ hero ============ */
.svc-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:clamp(24px,4vw,58px);
  padding:clamp(56px,8vw,104px) 0 clamp(30px,4vw,54px)}
/* El h1 envuelve antetítulo y titular (ver servicios.html): solo agrupa. Sus
   dos <span> hacen de bloque para quedar en líneas separadas, como cuando el
   antetítulo era un <p> aparte; tamaño, peso y color los ponen sus clases. */
.svc-h1{font-size:inherit;font-weight:inherit}
.svc-h1>span{display:block}
.svc-hero__title{font-size:clamp(40px,6vw,80px);font-weight:800;line-height:1;
  letter-spacing:-.035em;margin-bottom:22px;text-wrap:pretty;text-align:left}
.svc-hero__lead{max-width:38ch;font-size:clamp(16px,1.3vw,19px);line-height:1.7;
  color:rgba(61,65,39,.78);margin-bottom:30px;text-align:left}
.svc-hero__ctas{display:flex;flex-wrap:wrap;gap:14px}

.svc-hero__floaters{position:relative;min-height:380px}
.svc-float{position:absolute;left:var(--x,auto);top:var(--y,0);padding:22px 26px;
  background:var(--cream);border-radius:34px;box-shadow:0 18px 40px -26px rgba(61,65,39,.5)}
.svc-float[data-side="right"]{left:auto;right:var(--x,0)}
.svc-float b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1}
.svc-float span{font-size:14px;color:rgba(61,65,39,.7)}
.svc-float--deep{background:var(--deep);color:var(--sand);
  box-shadow:0 22px 46px -24px rgba(61,65,39,.55)}
.svc-float--deep b{font-size:30px}
.svc-float--deep span{color:rgba(240,228,208,.72)}
.svc-float--sage{background:var(--sage);padding:18px 24px;border-radius:34px}
.svc-float--sage b{font-size:18px;letter-spacing:-.01em}
.svc-float--sage span{font-size:13px;color:rgba(61,65,39,.75)}
.svc-float--pale{background:var(--pale)}
.svc-float--pill{padding:14px 22px;border-radius:var(--r-pill);font-size:14px;font-weight:600}
.svc-float--bob{animation:svcBob 11s ease-in-out infinite}
.svc-float--bob-reverse{animation:svcBob 9s ease-in-out infinite reverse}
@media (prefers-reduced-motion:reduce){.svc-float--bob,.svc-float--bob-reverse{animation:none}}

/* ============ planes ============ */
.svc-plans{padding:clamp(48px,7vw,96px) 0 0}
.svc-plans .svc-lead{margin-bottom:40px}
.svc-plans__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:20px;align-items:stretch}
.svc-plan{display:block;cursor:pointer;background:var(--cream);border-radius:34px;
  padding:34px 30px 30px;text-align:left;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,outline-color .2s ease;
  outline:2.5px solid transparent;outline-offset:-2.5px}
.svc-plan:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(61,65,39,.5)}
.svc-plan:has(input:checked){outline-color:var(--olive)}
.svc-plan__top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:22px}
.svc-plan__icon{width:56px;height:56px;border-radius:20px;display:grid;place-content:center;flex:none}
.svc-plan__icon--sage{background:var(--sage)}
.svc-plan__icon--olive{background:var(--olive)}
.svc-plan__icon--mid{background:var(--mid)}
.svc-plan__icon--cream{background:var(--cream)}
/* Los tres planes son radios (excluyentes) y mantenimiento es una casilla:
   se suma a cualquiera de ellos en vez de competir. De ahí que la regla
   nombre a los dos. */
.svc-plan input[type="radio"],.svc-plan input[type="checkbox"]{
  width:24px;height:24px;accent-color:var(--olive);cursor:pointer;flex:none}
.svc-plan h3{font-size:21px;font-weight:800;letter-spacing:-.015em;margin-bottom:6px}
.svc-plan__desc{font-size:15px;color:rgba(61,65,39,.75);margin-bottom:20px}
/* EN USO otra vez. Estuvieron aparcadas mientras el precio se decía solo por
   correo, a la espera de que hubiera lista de precios; ya la hay, así que las
   cifras han vuelto a las tarjetas y estas reglas las visten. Cada plan
   enseña su total con los módulos que trae de serie (los de PLANES en
   servicios.js).

   El orden de la tarjeta es alcance → precio → "Incluye:" → lista, y ese es
   el motivo de que sean dos clases distintas y no una reutilizada: __alcance
   va ENCIMA de la cifra y dice qué entra en el lote (páginas y, en la tienda,
   productos); __from va DEBAJO y solo abre la lista. Antes el alcance viajaba
   dentro del <span> del precio; ahora tiene línea propia, pero el <span>
   sigue vivo para la coletilla de mantenimiento ("/mes"). */
.svc-plan__alcance{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(61,65,39,.5);margin-bottom:4px}
.svc-plan__price{display:block;font-size:44px;font-weight:800;letter-spacing:-.035em;
  line-height:1.05;margin-bottom:14px}
.svc-plan__price span{font-size:17px;font-weight:600;color:rgba(61,65,39,.7)}
.svc-plan__from{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(61,65,39,.5);margin-bottom:10px}
/* align-content:start no es de adorno, y solo se nota desde que las tarjetas
   se alinean con subgrid (más abajo): la lista es una rejilla y ocupa la
   última fila, que mide lo que la lista más larga: la de tienda, con trece
   módulos. Sin esto, las tres líneas de mantenimiento se repartirían por todo
   ese alto y quedarían separadas a un dedo unas de otras. Apiladas arriba y
   con su gap de 9px, el hueco sobrante se queda abajo, que es donde no
   estorba. */
/* Cuerpo y separación por debajo del resto de listas del sitio a propósito:
   aquí no hay tres viñetas de folleto, hay hasta catorce módulos, y a 14,5px
   con 9px de aire la tarjeta de tienda se iba a 855px de alto — con las otras
   tres estiradas a su altura por el subgrid, y Mantenimiento arrastrando 400px
   vacíos. Es una lista para repasar de un vistazo, no para leer seguido, así
   que aguanta bien lo compacto. */
.svc-plan__list{list-style:none;display:grid;gap:6px;align-content:start;
  font-size:13.5px;color:rgba(61,65,39,.8)}

/* ---- la cuota de mantenimiento cuando el plan es una tienda ---- */
/* El envoltorio de la séptima celda de la tarjeta de mantenimiento: dentro van
   la lista y su nota. Existe solo para no gastar una octava fila de la
   subrejilla (ver el @supports de más abajo y el comentario del HTML), así que
   no reparte nada: es un bloque y los dos se apilan arriba de la celda.
   Nada de estirar la nota hasta el fondo — esa celda mide lo que la lista más
   larga de las cuatro tarjetas, la de tienda con trece módulos, y la nota
   acabaría a un palmo de los incluidos que justifica en vez de a su pie. */
.svc-plan__incluye{display:block}
/* Sale solo con el plan de tienda marcado, que es el único que sube la cuota:
   con cualquier otro no hay cargo mayor que justificar y el asterisco de la
   cifra tampoco está puesto. Mismo recurso que el :has() que enciende el botón
   "Elegir" más abajo — el estado vive en el propio radio y no hace falta que
   nadie lo copie a una clase desde JS. */
.svc-plan__nota{display:none;margin-top:12px;padding-top:10px;
  border-top:1px solid rgba(61,65,39,.14);
  font-size:12px;line-height:1.45;color:rgba(61,65,39,.62);text-wrap:pretty}
#planes:has(input[value="Tiendas"]:checked) .svc-plan__nota{display:block}
/* El asterisco de la cifra. Fuera del texto del precio a propósito: ahí dentro
   heredaría los 44px y el peso 800 de la cuota y pesaría más que la nota que
   anuncia. Sale con la misma condición que ella — si alguna vez se separan,
   quedaría una llamada sin pie o un pie sin llamada. */
.svc-plan__ast{display:none;font-size:16px;font-weight:700;
  vertical-align:super;line-height:0;color:rgba(61,65,39,.55)}
#planes:has(input[value="Tiendas"]:checked) .svc-plan__ast{display:inline}

/* Los otros cuatro módulos de doble tarifa avisan del cambio con el destello
   de .svc-module__precio--cambia. Esta cifra no puede usarlo: pasa de 49 a 290,
   se multiplica por seis y cambia de ancho, y un destello sobre un número que
   además se alarga se lee como un fallo de pintado. Así que se desenfoca, se
   releva con el número ya ilegible y vuelve a enfocarse.
   La meseta entre el 45 % y el 55 % es funcional, no estética: el relevo del
   texto lo hace servicios.js con un temporizador a mitad de animación, y ese
   tramo plano de 46 ms da margen para que caiga siempre con la cifra borrosa.
   Si aquí se toca la duración, hay que tocar MITAD_BLUR en servicios.js. */
.svc-cuota--blur{animation:svc-cuota-blur .46s ease-in-out}
@keyframes svc-cuota-blur{
  0%{filter:blur(0);opacity:1}
  45%{filter:blur(7px);opacity:.3}
  55%{filter:blur(7px);opacity:.3}
  100%{filter:blur(0);opacity:1}
}
/* Sin animación el relevo es instantáneo: servicios.js consulta esta misma
   preferencia y escribe la cifra en el acto en vez de esperar al temporizador,
   que aquí dejaría medio segundo de espera sin nada que la explique. */
@media (prefers-reduced-motion:reduce){
  .svc-cuota--blur{animation:none}
}

.svc-plan--dark{background:var(--deep);color:var(--sand);
  box-shadow:0 30px 60px -34px rgba(61,65,39,.6)}
.svc-plan--dark:hover{transform:translateY(-8px);box-shadow:0 34px 66px -30px rgba(61,65,39,.65)}
.svc-plan--dark .svc-plan__desc{color:rgba(240,228,208,.78)}
.svc-plan--dark .svc-plan__alcance,
.svc-plan--dark .svc-plan__from{color:rgba(240,228,208,.55)}
.svc-plan--dark .svc-plan__list{color:rgba(240,228,208,.85)}
.svc-plan--dark .svc-plan__price span{color:rgba(240,228,208,.7)}
.svc-plan--dark input{accent-color:var(--sage)}
.svc-plan__badge{padding:8px 14px;background:var(--sage);color:var(--deep);
  border-radius:var(--r-pill);font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase}

.svc-plan--pale{background:var(--pale)}

.svc-plans__foot{display:flex;justify-content:flex-end;margin-top:40px}

/* Los cuatro precios a la misma altura.
 *
 * No lo arregla un min-height en el título o en la descripción, que es lo
 * primero que se prueba: lo que descuadra es el número de LÍNEAS de esos dos
 * bloques, y cambia con el ancho de la columna. Con las tarjetas a 265px la
 * descripción de "Una página" ocupa tres líneas y las otras dos; a 192px
 * (el minmax de la rejilla, con cuatro columnas apretadas) son cuatro y tres.
 * Cualquier cifra fija acierta a un ancho y falla en los demás.
 *
 * Así que la altura la reparte la rejilla, que es quien sabe medir las cuatro
 * a la vez: .svc-plans__grid declara las siete filas que tiene una tarjeta
 * —cabecera, título, descripción, alcance, precio, "Incluye:" y lista— y cada
 * tarjeta las hereda con subgrid en vez de crear las suyas. Cada fila mide
 * entonces lo mismo en las cuatro, y el precio, que es la quinta, arranca en
 * la misma línea en todas. A cambio, las tarjetas de texto corto ganan aire
 * entre la descripción y el precio: es el precio de alinear, y es lo pedido.
 *
 * Ojo con row-gap:0, que no es cosmético. El hueco de 20px entre tarjetas es
 * el gap de la rejilla, y una subrejilla hereda los gaps del padre: dejarlo
 * en 20px metería esa separación entre CADA bloque de dentro de la tarjeta.
 * Se anula aquí y la separación entre tarjetas la pone el margin-bottom
 * de .svc-plan, que solo se nota cuando la rejilla parte en dos filas; el
 * margen de .svc-plans__foot se reduce en los mismos 20px para que la
 * distancia hasta el botón "Elegir" siga siendo la de siempre.
 *
 * Fuera de @supports —sin subgrid— no se toca nada: las tarjetas siguen
 * siendo bloques y cada precio cae donde lo deje su texto, que es como
 * estaba. Es un desajuste de estética, no de información. */
@supports (grid-template-rows:subgrid){
  .svc-plans__grid{grid-template-rows:repeat(7,auto);row-gap:0}
  .svc-plan{display:grid;grid-template-rows:subgrid;grid-row:span 7;margin-bottom:20px}
  .svc-plans__foot{margin-top:20px}
}

.svc-elegir{opacity:.45;pointer-events:none;transition:opacity .25s ease}
#planes:has(input[name="plan"]:checked) .svc-elegir{opacity:1;pointer-events:auto}

/* ============ módulos ============ */
.svc-modules{padding:clamp(56px,8vw,96px) 0 0}
/* El mismo clamp que el margin-top de .svc-modules__grupo, y no un número
   suelto: la rejilla principal tiene por arriba este hueco y por abajo el que
   abre el primer grupo (APIs con IA), así que igualando los dos queda
   centrada en el espacio que le toca en vez de pegada al texto de arriba.
   Van atados: si se toca uno, hay que tocar el otro. */
.svc-modules .svc-lead{margin-bottom:clamp(52px,7vw,88px)}
.svc-modules__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:20px;align-items:start}
.svc-module{position:relative;display:block;cursor:pointer;background:var(--cream);
  border-radius:26px;padding:22px 22px 52px;text-align:left;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,outline-color .2s ease;
  outline:2.5px solid transparent;outline-offset:-2.5px}
.svc-module:hover{transform:translateY(-5px);box-shadow:0 22px 42px -28px rgba(61,65,39,.5)}
/* .svc-module--activo hace el mismo papel que :has(input:checked) para la
   tarjeta del contador, que no tiene nada que "marcar": la pone servicios.js
   cuando el número de páginas es 1 o más. Van juntas en la misma regla para
   que no se puedan separar por descuido — marcada es marcada, se llegue por
   casilla o por contador. */
.svc-module:has(input:checked),.svc-module--activo{outline-color:var(--olive)}
/* input[type="checkbox"] y no input a secas: esta regla la escribió el
   módulo de casillas, cuando eran los únicos que había. El <input
   type="number"> del contador no debe irse a la esquina de abajo a la
   derecha con 22x22px, que es lo que le pasaba heredando esto. */
.svc-module input[type="checkbox"]{position:absolute;bottom:20px;right:20px;width:22px;height:22px;
  accent-color:var(--olive);cursor:pointer}

/* ---- contador de páginas ---- */
/* El contador ocupa la misma banda inferior que la casilla de las otras
   tarjetas (de ahí el padding-bottom de .svc-module), pero de lado a lado:
   los tres controles a la izquierda y la unidad empujada a la derecha. */
.svc-module--contador{cursor:default}
.svc-contador{position:absolute;left:22px;right:22px;bottom:14px;
  display:flex;align-items:center;gap:8px}
.svc-contador__btn{width:30px;height:30px;flex:none;display:grid;place-content:center;
  border:1.5px solid rgba(61,65,39,.22);border-radius:var(--r-pill);background:transparent;
  color:var(--deep);font:inherit;font-size:17px;line-height:1;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.svc-contador__btn:hover{background:var(--olive);border-color:var(--olive);color:var(--sand)}
/* deshabilitado de verdad, no solo apagado: en 0 no hay nada que quitar y en
   el tope no hay nada que añadir — lo pone servicios.js */
.svc-contador__btn:disabled{opacity:.3;cursor:default;background:transparent;
  border-color:rgba(61,65,39,.22);color:var(--deep)}
.svc-contador__num{width:52px;flex:none;text-align:center;font:inherit;font-size:17px;
  font-weight:800;color:var(--deep);background:transparent;
  border:0;border-bottom:1.5px solid rgba(61,65,39,.22);border-radius:0;padding:2px 0;
  -moz-appearance:textfield;appearance:textfield}
/* las flechitas nativas del number sobran teniendo − y +, y además descuadran
   el ancho de la caja */
.svc-contador__num::-webkit-outer-spin-button,
.svc-contador__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.svc-contador__num:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.svc-contador__ud{margin-left:auto;font-size:13.5px;font-weight:500;color:rgba(61,65,39,.6)}
.svc-module h3{font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.25;
  min-height:43px;margin-bottom:7px}
.svc-module--alt{background:var(--pale)}
/* El precio va debajo del <h3> y NO en la banda de abajo con la casilla, que
   es donde primero se piensa: esa banda la ocupa el contador en la tarjeta de
   páginas, y habría hecho falta una excepción justo para la tarjeta más
   importante de la rejilla. Aquí arriba, además, el min-height:43px del h3
   deja todos los precios a la misma altura aunque los títulos ocupen una o dos
   líneas — que es lo que hace que la rejilla se lea de un vistazo.
   La descripción sigue desplegándose por debajo al pasar el ratón, así que el
   precio nunca tapa nada ni se mueve. */
/* El min-height hace por el precio lo que el de arriba hace por el título, y
   por el mismo motivo: solo la mitad de las tarjetas llevan aclaración bajo la
   cifra (el <span> de "primer año incluido", "a tu nombre"...), y esa
   segunda línea las hacía 18px más altas que las demás. Con align-items:start
   en la rejilla cada tarjeta mide lo suyo, así que la diferencia no se repartía:
   se veía como una tarjeta descuadrada dentro de su fila — a 1360px le tocaba a
   "Hosting y dominio", sola entre tres bajas, y a otros anchos a "Correo
   corporativo". Reservando aquí el hueco de la aclaración, la lleve o no, todas
   las tarjetas contraídas miden lo mismo y la rejilla queda a cuadro.

   55px son las tres líneas de hoy: 14px del tachado de la oferta (13px con
   line-height:1 + 1px de margen) + 19px×1.2 de la cifra + 3px de margen +
   los ~15px del <span>. Eran 41 sin la oferta. Reservarlo aquí, y no dejar
   que crezca cada tarjeta por su cuenta, es lo que mantiene a cuadro las
   tres que NO llevan tachado: las dos de "A medida" y la del mantenimiento,
   que se queda fuera de la oferta. Si se toca alguno de esos números, o el
   día que la oferta se retire, este hay que rehacerlo. */
.svc-module__precio{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  min-height:55px;color:var(--olive)}
/* la aclaración (tarifa de tienda, primer año incluido...) va en su propia
   línea, pequeña y apagada: es una nota al pie de la cifra, no parte de ella */
.svc-module__precio span{display:block;margin-top:3px;font-size:12.5px;font-weight:600;
  letter-spacing:0;color:rgba(61,65,39,.6)}
/* Cuando el plan de tienda cambia la tarifa de un módulo, la cifra se
   sustituye sin avisar y en una rejilla de dieciséis tarjetas eso pasa
   inadvertido. Un destello de una pasada —el mismo recurso que el aviso del
   descuento, para que "algo ha cambiado aquí" se diga siempre igual en esta
   página— lleva el ojo a las cuatro que se han movido. No deja marca
   permanente: cuál es la tarifa que se aplica ya lo dice el plan marcado
   arriba, y cuatro precios resaltados a perpetuidad serían ruido. */
.svc-module__precio--cambia{animation:svc-cambia-precio .6s ease-out}
@keyframes svc-cambia-precio{
  0%{transform:translateY(-3px);text-shadow:0 0 14px rgba(107,114,52,.75)}
  100%{transform:none;text-shadow:0 0 0 rgba(107,114,52,0)}
}
@media (prefers-reduced-motion:reduce){
  .svc-module__precio--cambia{animation:none}
}

/* ---- precio vivo de la tarjeta de páginas ---- */
/* La cifra y el aviso del descuento van EN LÍNEA, uno al lado del otro, y no
   la aclaración debajo que usan las demás tarjetas: aquí el aviso no es una
   nota al pie de la cifra, es el estado de algo que se enciende y se apaga, y
   puesto al lado se lee a la vez que el número que acaba de cambiar.
   El display:flex obliga a desactivar la regla genérica de los <span> de
   .svc-module__precio, que los pone en bloque para esa nota al pie.
   El aviso se lleva el espacio sobrante (flex:1) y parte en dos líneas; entra
   dentro de los 41px de min-height del precio, así que la tarjeta sigue
   midiendo lo mismo que el resto de la rejilla. */
/* ---- la oferta de lanzamiento en los precios ----
   La estructura la monta servicios.js: dentro de cada precio, la cifra de
   antes tachada (.svc-precio__antes, que ya existía para el descuento por
   páginas y aquí se reutiliza tal cual) y debajo la que se cobra.

   Las dos reglas de abajo deshacen, cada una en su sitio, la que viste la
   letra pequeña: .svc-module__precio span y .svc-plan__price span. Sin
   ellas, la cifra que se cobra —que ahora va dentro de un <span> para poder
   llevar el tachado encima— saldría pintada de nota al pie: gris, pequeña y
   en su propia línea. Llevan dos clases, así que ganan por especificidad a
   esas dos, que llevan una clase y un tipo. */
.svc-module__precio .svc-precio__ahora{display:inline;margin-top:0;font-size:inherit;
  font-weight:inherit;letter-spacing:inherit;color:inherit}
.svc-plan__price .svc-precio__ahora{font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;color:inherit}
/* Encima de una cifra de 44px, los 13px del tachado de las tarjetas de
   módulo se quedan en nada: sube a 16 para que se lea como el precio que
   era y no como un pie de foto. */
.svc-plan__price .svc-precio__antes{font-size:16px;margin-bottom:2px}
/* En la tarjeta oscura, el gris del tachado (rgba de --deep) cae sobre
   --deep y desaparece. Mismo papel, el color de la tarjeta rebajado: es el
   mismo criterio que ya siguen ahí el alcance y el "Incluye:". */
.svc-plan--dark .svc-precio__antes{color:rgba(240,228,208,.5)}
.svc-module__precio--vivo{display:flex;align-items:center;gap:10px}
/* Esta línea deshace la regla genérica de arriba, .svc-module__precio span,
   que viste la nota al pie de las demás tarjetas: bloque, 12,5px, peso 600 y
   gris. Lleva un tipo en el selector, así que gana por especificidad a
   cualquier clase suelta — sin este reseteo pintaba de gris pequeñito TAMBIÉN
   la cifra grande, que aquí va dentro de un <span> para poder llevar el
   tachado al lado. Cada parte se vuelve a vestir debajo, ya con dos clases
   para ir por delante de ella. */
.svc-module__precio--vivo span{display:inline;margin-top:0;font-size:inherit;
  font-weight:inherit;letter-spacing:inherit;color:inherit}
.svc-module__precio--vivo .svc-precio__cifra{flex:none;display:block;white-space:nowrap}
/* El precio sin descuento, tachado y apagado, ENCIMA del que se cobra y no a
   su izquierda, que es donde lo pondría una tienda. El motivo es de sitio: la
   tarjeta deja 213px útiles y el aviso de al lado se queda con lo que sobre.
   Con los dos precios en la misma línea la cifra ocupaba 128px a seis páginas
   y 145 a cuarenta, al aviso le quedaban 75 y 58, y saltaba a tres y cuatro
   líneas: la tarjeta se iba a 182px contra las 165 del resto de la rejilla, y
   además solo al activarse el descuento — justo cuando peor sienta que todo
   pegue un salto. Apilado, la cifra mide siempre ~75px de ancho, el aviso
   conserva sus dos líneas y la tarjeta no se mueve al encenderse.

   El line-height:1 remata lo mismo por arriba: mezclar 13px y 19px con el 1.2
   heredado hace la caja de línea 2px más alta de la cuenta.

   Es un <s> y no un <span>, así que la regla genérica de los <span> ni le
   roza; vive con [hidden] puesto y solo se lo quita el JS desde la sexta
   página. */
.svc-precio__antes{display:block;margin-bottom:1px;font-size:13px;font-weight:600;
  line-height:1;letter-spacing:-.01em;color:rgba(61,65,39,.45)}
/* El [hidden] del UA stylesheet pierde contra cualquier regla de autor —el
   origen manda por delante de la especificidad—, así que el display:block de
   aquí arriba lo dejaba sin efecto. Se notaba poco porque el JS vacía el
   texto al esconderlo y una caja vacía no mide nada; con la oferta hay
   dieciocho más y conviene que hidden signifique hidden. */
.svc-precio__antes[hidden]{display:none}
.svc-module__precio--vivo .svc-precio__dto{flex:1;font-size:11.5px;font-weight:600;
  line-height:1.25;letter-spacing:0;color:rgba(61,65,39,.5);
  transition:color .3s ease,text-shadow .3s ease}
/* Encendido. El color pasa a oliva y el "brillito" es un text-shadow suave —
   no un box-shadow, porque no hay caja que iluminar, solo texto— más un
   destello de una sola pasada al activarse, que es lo que hace que el ojo
   vuelva ahí justo cuando el precio ha cambiado. La animación no se repite:
   pulsar sin parar en un aviso de descuento cansa y distrae del propio
   número. */
.svc-module__precio--vivo .svc-precio__dto--activo{color:var(--olive);font-weight:800;
  text-shadow:0 0 10px rgba(107,114,52,.5);animation:svc-destello .55s ease-out}
@keyframes svc-destello{
  0%{text-shadow:0 0 0 rgba(107,114,52,0)}
  45%{text-shadow:0 0 16px rgba(107,114,52,.85)}
  100%{text-shadow:0 0 10px rgba(107,114,52,.5)}
}
@media (prefers-reduced-motion:reduce){
  .svc-module__precio--vivo .svc-precio__dto{transition:none}
  .svc-module__precio--vivo .svc-precio__dto--activo{animation:none}
}

/* Sin cifra: hoy solo rediseño y apps. No llevan tarifa en la lista de
   precios, así que dicen lo que son —presupuesto aparte— en vez de
   inventarse un número o dejar el hueco vacío y descuadrar la rejilla.
   Audiovisual estuvo aquí y ya no: tiene tarifa (125 €), así que usa el
   .svc-module__precio normal como cualquier otro módulo con precio.

   Las catorce APIs usan sus tarifas de instalación y gestión opcional.
   Las dos tarjetas que mantienen "A medida" viven en
   la rejilla de arriba, rodeadas de tarjetas con cifra, y ahí la línea sí
   hace falta: sin ella tendrían un hueco en blanco donde sus vecinas
   enseñan un número.

   Aquí vivía además una regla para un <span> dentro de esta misma línea,
   que devolvía a minúsculas y sin interletraje la coletilla "+ uso mensual"
   de las tres cajas de IA. Aquellas coletillas se quitaron antes, por otro
   pedido explícito, así que la regla se quedó sin un solo elemento al que
   aplicarse y se fue detrás de ellas. Los otros dos <span> de precio del
   sitio ("primer año incluido" y "a tu nombre") cuelgan de
   .svc-module__precio normal, no de este modificador, y no se han visto
   afectados. */
.svc-module__precio--medida{font-size:13px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(61,65,39,.5)}
.svc-module__desc{font-size:14px;line-height:1.55;color:rgba(61,65,39,.75);
  max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .34s cubic-bezier(.16,1,.3,1),opacity .26s ease,margin-top .26s ease}
.svc-module--alt .svc-module__desc{color:rgba(61,65,39,.78)}
/* :has(:focus-visible) y NO :focus-within, aunque parezca lo mismo: al
   marcar una casilla con el ratón, esa casilla se queda con el foco, y el
   foco no se suelta al apartar el ratón sino al pinchar en otro sitio —
   con :focus-within, la última tarjeta marcada se quedaba abierta.
   :focus-visible solo se activa cuando el navegador decide que el foco
   debe verse (llegar tabulando), no al hacer clic, así que se mantiene el
   acceso por teclado sin ese efecto pegajoso. */
.svc-module:hover .svc-module__desc,.svc-module:has(:focus-visible) .svc-module__desc{
  max-height:140px;opacity:1;margin-top:4px}

/* Grupos de módulos que van aparte de la rejilla principal (APIs con IA y
   mantenimiento). Separación grande a propósito: tienen que leerse como
   secciones propias con su epígrafe, no como una fila más de la rejilla de
   arriba — es lo que hace que el visitante se pare a decidirlos. */
/* ---- botón-módulo auxiliar de "quiero informarme" ---- */

/* Anchura común y altura mínima de las tarjetas de API, incluida la de
   información. La proporción no es 1:1: se adapta al precio y al contenido. */
.svc-modules{--info-lado:165px;--api-alto:252px}

/* La tarjeta informativa conserva su fondo crema y flota fuera de la
   rejilla cuando hay margen. En flujo comparte la altura de su fila.
   El icono tiene una banda propia para no pisar el título. */
.svc-module--info{width:var(--info-lado);min-height:var(--api-alto);align-self:stretch;
  padding:56px 16px 52px}
.svc-module--info h3{font-size:14px;line-height:1.25;letter-spacing:-.005em;
  min-height:0;margin-bottom:0;overflow-wrap:anywhere;hyphens:auto}
/* Casilla e icono mantienen el tamaño del resto de módulos. */
.svc-module--info input[type="checkbox"]{bottom:20px;right:20px}
.svc-module__info{position:absolute;top:20px;right:20px;display:grid;place-content:center;
  width:21px;height:21px;color:var(--olive);pointer-events:none}
.svc-module__info svg{display:block}

/* La rejilla de APIs es el marco de referencia del que cuelga la tarjeta.

   Y es la única del sitio con pistas de ancho FIJO en vez del
   minmax(248px,1fr) de las demás: las cajas tienen que medir --info-lado
   exacto, así que la columna no puede estirarse a repartir el sobrante. Con
   la página en su tope de 1360 quedan 1232 de contenido, que dan para seis
   columnas de 165 con 20 de hueco — 1090 en total. Los 142 que sobran se
   quedan a la derecha.

   No están repartidos, y no es un descuido. Con justify-content:space-between
   la fila llenaría el ancho, pero el hueco entre columnas subiría de 20 a 48
   en pantalla ancha y pasaría de 100 en las intermedias, donde caben menos
   columnas; entonces un pack dejaría de leerse como un bloque de cajas
   juntas, que es justo para lo que se reordenó la malla. Entre un borde
   derecho irregular y romper eso, el borde.

   Ojo con moverla de sitio: .svc-modules__grid y .svc-modules__grid--apis
   son las dos un selector de clase suelto, así que empatan en especificidad
   y esta gana solo por ir DESPUÉS en el archivo. Subida por encima de la
   otra, las pistas volverían a minmax(248px,1fr) sin avisar y las cajas
   dejarían de compartir el ancho de 165. */
.svc-modules__grid--apis{position:relative;
  grid-template-columns:repeat(auto-fill,var(--info-lado))}

/* El sobrante de la derecha es un remate aceptable mientras la rejilla llene
   la mayor parte del ancho. En pantalla estrecha deja de serlo: en un móvil
   de 360px solo caben una o dos columnas de 165 y lo que queda a la derecha
   es medio teléfono en blanco, que ya no se lee como un borde irregular sino
   como una tarjeta que falta. Por debajo de este ancho, entonces, la rejilla
   se centra y el sobrante se reparte a los dos lados.
   No se centra siempre porque en escritorio la dejaría metida 71px hacia
   dentro, desalineada del epígrafe y del párrafo, que van pegados al margen
   izquierdo. */
@media (max-width:620px){
  .svc-modules__grid--apis{justify-content:center}
}

/* Instalación y gestión quedan siempre visibles. La altura reserva sitio
   para ambas cifras; la descripción conserva su despliegue en escritorio
   y aparece completa en móvil. Los títulos caben hasta en tres líneas. */
.svc-modules__grid--apis .svc-module--alt{min-height:var(--api-alto);
  padding-left:16px;padding-right:16px}
.svc-modules__grid--apis .svc-module--alt h3{font-size:14px;min-height:53px;overflow-wrap:anywhere;hyphens:auto}
.svc-module__precio--api{min-height:92px}
.svc-module__precio--api [data-api-importe]{font:inherit}
.svc-module__precio--api span{color:var(--deep);font-size:12px;line-height:1.4}
.svc-module__precio--api .svc-api-gestion{margin-top:10px;font-weight:500}
.svc-module__precio--api .svc-api-gestion[hidden]{display:none}
.svc-api-condiciones{max-width:760px;margin:22px 0 28px;color:var(--deep)}
.svc-api-condiciones p{font-size:13px;line-height:1.7;margin:0 0 14px}
.svc-api-condiciones label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.svc-api-condiciones select{display:block;width:100%;max-width:370px;padding:12px;
  font:inherit;font-size:14px;color:var(--deep);background:var(--cream);
  border:1px solid var(--olive);border-radius:8px;margin-bottom:10px}
.svc-api-condiciones select:focus-visible{outline:2px solid var(--deep);outline-offset:3px}

/* Y el tope de la descripción al desplegarse, que también hay que subirlo.
   Los 140px de la regla general se calcularon con las cajas a 293 de ancho:
   allí al texto le quedaban 249px, la línea daba para unos 40 caracteres y la
   descripción más larga —la de Newsletter, 154 caracteres— entraba en cuatro
   líneas, 87px. En 165 de lado quedan 133px de texto, la línea baja a unos 19
   caracteres y esa misma descripción se va a ocho líneas largas, cerca de
   176px. Con el tope en 140 se cortaría por la mitad, y como .svc-module__desc
   lleva overflow:hidden no se cortaría avisando: se quedaría la frase a medias
   sin ninguna señal de que falta algo.
   260 deja margen de sobra para la más larga de las catorce. Es un tope, no
   una altura: cada caja se abre lo que ocupe su texto y ni un píxel más.

   El efecto de todo esto es que la caja crece bastante al pasar el ratón —de
   165 a unos 300 en la peor— porque en reposo solo le sobran 41px por debajo
   del título. Es la misma conducta de siempre, solo que se parte de más
   abajo. Si algún día molesta, lo que hay que acortar son las descripciones,
   no este número: bajarlo vuelve a cortar texto. */
.svc-modules__grid--apis .svc-module--alt:hover .svc-module__desc,
.svc-modules__grid--apis .svc-module--alt:has(:focus-visible) .svc-module__desc{
  max-height:260px}

/* Aquí es donde la tarjeta se sale del margen. En cuanto hay sitio de sobra a
   la izquierda del contenido, se saca de la rejilla (position:absolute, así
   que deja de ocupar celda y las catorce cajas verdes pasan a ocupar las
   posiciones 1 a 14) y se cuelga a la izquierda del margen, en su propio
   espacio. top:0 la deja a ras con la PRIMERA fila de cajas —desde que son
   catorce, la rejilla envuelve en varias filas y esa distinción ya importa—;
   como mide lo mismo que ellas contraídas, los bordes superiores e
   inferiores de esa primera fila coinciden con los suyos.

   El umbral sale de una cuenta, no es redondo por gusto: .svc-wrap mide como
   mucho 1360 y va centrada, así que a la izquierda de su contenido quedan
   (ancho − 1360) / 2 + 64 píxeles, y la tarjeta necesita 165 del cuadrado +
   28 de separación = 193. Empatan justo en 1618, pero ahí la tarjeta besaría
   el borde de la pantalla; a 1700 le quedan 41px de aire, que es de sobra
   para que no parezca un error. Por debajo no hay hueco y se queda como una
   celda más de la rejilla, la primera: es eso o que se salga de la pantalla.

   Este umbral va atado a --info-lado: era 1600 cuando el cuadrado medía 124,
   y al crecer a 165 dejó de caber justo en los anchos que antes lo permitían.
   Si se vuelve a tocar el lado, hay que rehacer también esta cuenta. */
@media (min-width:1700px){
  .svc-module--info{position:absolute;top:0;
    left:calc(-1 * (var(--info-lado) + 28px))}
}

/* ---- botones de pack ---- */
/* La fila de píldoras que va encima de la malla de APIs. Marcan de una vez las
   tarjetas de su grupo; la malla NO se filtra ni se reordena — las catorce
   cajas siguen todas ahí pase lo que pase (ver servicios.html).

   Píldora y no tarjeta a propósito: una tarjeta más, del ancho de las de
   abajo, competiría con ellas y habría que ponerse a decidir si se marca o no.
   Una píldora se lee como un mando, no como algo que se compra.

   Los 26px de aire por abajo son los mismos que .svc-modules__grupo .svc-lead
   deja por arriba, así que la fila queda a la misma distancia del párrafo que
   de la rejilla: un escalón entre los dos, no algo pegado a uno de ellos. Van
   atados — si se toca aquel, hay que tocar este. */
.svc-packs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}

/* Mismo borde, mismos colores y misma transición que .svc-contador__btn, que
   es el otro mando de esta sección: fino y transparente en reposo, olivo
   relleno al pasar el ratón. Si se retoca uno hay que mirar el otro o dejarán
   de parecer de la misma familia.
   El foco no se define aquí: lo pone el :focus-visible global de estilos.css,
   que ya es un contorno olivo. */
.svc-pack{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;
  border:1.5px solid rgba(61,65,39,.22);border-radius:var(--r-pill);
  background:transparent;color:var(--deep);font:inherit;font-size:15px;font-weight:600;
  line-height:1;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.svc-pack:hover{background:var(--olive);border-color:var(--olive);color:var(--sand)}

/* Encendido = sus tarjetas están TODAS marcadas. El estado lo pone
   servicios.js en aria-pressed y el CSS se cuelga de ese atributo en vez de
   una clase propia: así lo que ve el lector de pantalla y lo que se ve en
   pantalla son el mismo dato y no pueden discrepar.
   Relleno olivo, igual que .svc-module:has(input:checked) se contornea en
   olivo: encendido es olivo en toda esta página. */
.svc-pack[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);
  color:var(--sand)}

.svc-modules__grupo{margin-top:clamp(52px,7vw,88px)}
.svc-modules__h3{font-size:clamp(21px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:10px;text-align:left}
.svc-modules__grupo .svc-lead{margin-bottom:26px}

.svc-modules__bar{margin-top:96px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:18px;background:var(--deep);color:var(--sand);
  border-radius:34px;padding:26px 34px}
.svc-modules__bar b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.svc-modules__bar span{font-size:15px;color:rgba(240,228,208,.75)}
.btn--sand{color:var(--deep);background:var(--sand);border:0}
.btn--sand:hover{background:var(--cream)}

/* ============ contacto ============ */
.svc-contact{padding:clamp(56px,8vw,104px) 0 0}
.svc-contact__box{background:var(--cream);border-radius:34px;padding:clamp(38px,5vw,64px);
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.svc-contact__box h2{font-size:clamp(28px,3.6vw,46px);font-weight:800;letter-spacing:-.025em;
  line-height:1.08;color:var(--olive);margin-bottom:6px;text-align:left}
.svc-contact__box p{color:var(--olive);font-size:16px;max-width:52ch;text-align:left}

/* ============ pie ============ */
/* .panel__in>* empieza en opacity:0 en estilos.css y solo sube a 1 dentro de
   .drawer.open (invariante del cajón de index.html) — aquí no hay cajón, así
   que se fuerza a visible con una regla propia scopeada a .svc-footer */
.svc-footer{margin-top:clamp(60px,8vw,110px)}
.svc-footer .panel{border-radius:34px 34px 0 0}
.svc-footer .panel__in{padding-top:40px}
.svc-footer .panel__in>*{opacity:1!important;transform:none!important}

/* ============ botón de paralaje ============ */
.svc-parallax-toggle{position:fixed;right:24px;bottom:24px;z-index:40;width:58px;height:58px;
  padding:0;border:none;border-radius:var(--r-pill);background:var(--olive);color:var(--sand);
  display:grid;place-content:center;cursor:pointer;box-shadow:0 16px 34px -16px rgba(61,65,39,.65);
  transition:background .2s ease,scale .18s ease}
.svc-parallax-toggle:hover{background:var(--deep)}
.svc-parallax-toggle:active{scale:.93}
/* el [hidden] del UA stylesheet solo oculta HTMLElement, no <svg>: sin esta
   regla propia los dos iconos se quedarían superpuestos siempre visibles */
.svc-parallax-toggle svg[hidden]{display:none}
@media (max-width:820px),(prefers-reduced-motion:reduce){.svc-parallax-toggle{display:none}}

/* ============ responsive ============ */
@media (max-width:900px){
  .svc-hero{grid-template-columns:1fr}
  .svc-hero__floaters{display:none}
}
@media (max-width:640px){
  .svc-modules__bar{flex-direction:column;align-items:stretch;text-align:center}
  .svc-modules__bar>div{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .svc-plan,.svc-module{transition:none}
}

@media (max-width:820px){
  .svc-plans__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,252px),1fr))}
  .svc-modules__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr))}
  /* Todas las tarjetas, incluida información, toman la altura necesaria
     para la descripción más larga. Solo estirar cada fila deja diferencias
     entre filas y no sirve cuando el teléfono pasa a una sola columna. */
  .svc-modules__grid--apis{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
    grid-auto-rows:1fr;align-items:stretch}
  .svc-modules__grid--apis .svc-module{width:auto;height:auto;aspect-ratio:auto;
    min-width:0;padding:22px 16px 56px}
  .svc-modules__grid--apis .svc-module--info{padding-top:56px}
  .svc-module__desc,
  .svc-module:hover .svc-module__desc,
  .svc-modules__grid--apis .svc-module--alt:hover .svc-module__desc,
  .svc-modules__grid--apis .svc-module--alt:has(:focus-visible) .svc-module__desc{
    max-height:none;opacity:1;margin-top:8px}
  .svc-modules__bar{margin-top:40px;padding:26px 22px}
  .svc-contact__box{padding:28px 22px}
}
@media (max-width:480px){
  .svc-modules__grid--apis{grid-template-columns:minmax(0,1fr)}
}