/* Página de precios (soluciones.html en ES, EN y NO): puertas, tarjetas de la Plantilla
   digital y cierre. Lo cargan solo esas tres páginas; site.css no cambia.
   Todo cuelga del id de su sección. Sin JavaScript: los precios se enseñan, no se eligen
   (se eligen en el alta, que empieza de cero). Las tarjetas de paquete no son enlaces y no
   lo parecen: sin hover ni flecha. Los botones son todos «Crear cuenta»: al final de cada bloque
   (Atiende y Automatiza), solo el botón, y en la caja final, con el cobro (el cobro va solo ahí y en
   la FAQ). El cierre lleva tres caminos (atender, automatizar y On-premise). El JavaScript de
   la página es poco: el de en línea, al final, abre la pregunta de la FAQ a la que lleva un
   enlace #, como «Cómo se cobra, en detalle»; y assets/conectores.js, las pestañas por sector
   de la tarjeta de Conectores (sin él, o si no carga, se ven todas las listas). */

/* Puertas: sin rótulo visible (el h2 queda para lectores de pantalla), pegadas al
   subhero. Son tres: los dos trabajos de la Plantilla digital (atender y automatizar, llevan a
   #atender y a #sistemas) y On-premise. «/mes» va en la misma línea que la cifra. En On-premise, una
   palabra en vez de una cifra: no se pinta con el peso ligero de los números. */
#puertas{padding:var(--sec-s) 0}
#puertas .tira{margin-top:0}
#puertas .tira-p small{display:inline;margin:0 0 0 4px;font-size:.95rem}
#puertas .tira-i .tira-p.palabra{font-size:1.2rem;font-weight:600;letter-spacing:-.01em}

/* ---------- Plantilla digital: dos bloques de tarjetas ---------- */
#plantilla-digital .ley{margin-top:10px;font-size:.88rem;letter-spacing:0;color:var(--dim)}

/* Cada bloque («Atiende a tus clientes», «Automatiza tu negocio»): título, qué es, un ejemplo y sus
   tarjetas. El segundo, separado por una raya. */
#plantilla-digital .bloque{margin-top:44px}
#plantilla-digital .bloque+.bloque{margin-top:52px;padding-top:44px;border-top:1px solid var(--hairline-2)}
#plantilla-digital .bq-cab h3{font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.02em}
#plantilla-digital .bq-cab>p{max-width:760px;margin-top:8px;color:var(--body-c)}
#plantilla-digital .bq-cab .bq-ej{max-width:760px;margin-top:14px;padding:12px 16px;background:#fff;
  border-left:3px solid var(--fjord);border-radius:0 12px 12px 0;color:var(--ink);font-size:.95rem}
#plantilla-digital .bq-ej .ek{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fjord)}

/* Cada producto (.prod) es una línea: su nombre y qué hace, una tarjeta por paquete (.tiers) y, debajo,
   lo de más. Atender (N43/N44/N45): Mensajes, Llamadas, la nota del asterisco, Confirmaciones y
   Conectores, en ese orden. Automatizar (N49/N50): la integración a medida, en su línea igual que los
   demás, y debajo «Lo que hace Erik». Desde 900 px, el nombre y las notas a la izquierda y las tarjetas
   a la derecha; por debajo, todo en columna. Las tarjetas no son enlaces y no lo parecen: sin hover. */
#plantilla-digital .prod{margin-top:28px}
#plantilla-digital #atender .prod,#plantilla-digital #sistemas .prod{padding-top:24px;border-top:1px solid var(--hairline-2)}
#plantilla-digital .prod h4{font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
#plantilla-digital .prod h4 .ag{font-weight:400;color:var(--dim)}
#plantilla-digital .pq{margin-top:6px;color:var(--body-c);font-size:.93rem}
#plantilla-digital .pn{margin-top:12px;font-size:.86rem;letter-spacing:0;color:var(--dim)}
#plantilla-digital .pn a{color:var(--fjord);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(min-width:900px){
  #plantilla-digital #atender .prod,#plantilla-digital #sistemas .prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
    grid-template-areas:"cab tiers" "pn tiers";grid-template-rows:auto 1fr;gap:0 32px}
  #plantilla-digital #atender .prod-cab,#plantilla-digital #sistemas .prod-cab{grid-area:cab}
  #plantilla-digital #atender .tiers,#plantilla-digital #sistemas .tiers{grid-area:tiers;margin-top:0;align-self:start}
  #plantilla-digital #atender .pn,#plantilla-digital #sistemas .pn{grid-area:pn}
}

/* «Lo que hace Erik», debajo de la integración: cuatro puntos con su ✓, en rejilla de 2×2 desde 720 px
   y en columna por debajo. No son tarjetas (sin fondo, sin borde de tarjeta, sin precio, sin enlace),
   para que no parezcan cuatro productos: solo una línea fina encima de cada punto. */
#plantilla-digital .hace{margin-top:32px}
#plantilla-digital .hace h4{font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
#plantilla-digital .hace ul{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px;margin:12px 0 0;padding:0}
#plantilla-digital .hace li{position:relative;padding:12px 0 12px 24px;border-top:1px solid var(--hairline);font-size:.93rem;color:var(--body-c)}
#plantilla-digital .hace li::before{content:"\2713";content:"\2713"/"";position:absolute;left:0;top:12px;color:var(--fjord);font-weight:700}
#plantilla-digital .hace li b{color:var(--ink);font-weight:600}
#plantilla-digital .hace-pie{margin-top:6px;font-size:.86rem;letter-spacing:0;color:var(--dim)}
@media(min-width:720px){#plantilla-digital .hace ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tarjetas de paquete: el tamaño arriba y el precio, con su IVA debajo, al pie (alineado en la fila).
   «Ilimitado*» lleva su uso normal pegado a la palabra, dentro de la misma tarjeta. */
#plantilla-digital .tiers{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 0;padding:0}
#plantilla-digital .tiers.t2{grid-template-columns:repeat(2,minmax(0,1fr))}
#plantilla-digital .tiers.t1{grid-template-columns:minmax(0,1fr)}
#plantilla-digital .tiers>li{display:flex;flex-direction:column;gap:12px;min-width:0;background:#fff;
  border:1px solid var(--hairline);border-radius:14px;padding:16px 18px}
#plantilla-digital .fq{min-width:0;font-size:.98rem;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
#plantilla-digital .fq .un{display:block;margin-top:4px;font-size:.8rem;font-weight:400;letter-spacing:0;line-height:1.45;color:var(--body-c)}
#plantilla-digital .fp{margin-top:auto}
#plantilla-digital .fp b{display:block;font-size:1.6rem;font-weight:300;letter-spacing:-.02em;line-height:1.15;
  white-space:nowrap;font-variant-numeric:tabular-nums}
#plantilla-digital .fp small{display:block;margin-top:2px;font-size:.8rem;letter-spacing:0;color:var(--dim);white-space:nowrap}
/* Una sola tarjeta (Conectores): en fila, el nombre a la izquierda y el precio a la derecha. */
#plantilla-digital .tiers.t1>li{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
#plantilla-digital .tiers.t1 .fp{margin-top:0;flex:none;text-align:right}

/* Conectores (N52): los programas del mercado con los que trabaja el asistente que atiende. Debajo de su
   tarjeta de precio (49 €, todos los programas que se conecten: un paquete sin límite, DEC-459 y DEC-473 de la
   API), la etiqueta «Busca el tuyo por sector» (.con-et), las pestañas por sector (.con-tabs) y la lista de cada
   una, solo nombres, sin logotipos; Google Calendar y Outlook llevan «al momento» (.con-ya) y lo demás es bajo
   pedido, como dice la letra pequeña única de debajo (.pn). Mejora progresiva: el HTML trae las pestañas con
   «hidden» y todas las listas apiladas con su título (.con-h); assets/conectores.js pone los roles de WAI-ARIA,
   enseña las pestañas, deja solo la lista elegida y marca la caja con .con-js (fuera los títulos). Sin
   JavaScript, si no carga o al imprimir, se ven todas. Las pestañas se reparten en varias líneas si no caben:
   nada se desliza de lado. La elegida, también en alto contraste de Windows (forced-colors: Highlight). Desde
   900 px, pestañas, lista y letra pequeña van en la columna de la derecha, debajo del precio. */
#plantilla-digital .con-sel{margin-top:16px;min-width:0}
#plantilla-digital .con-et{margin:0 0 10px;font-size:.88rem;font-weight:500;color:var(--ink)}
#plantilla-digital .con-tabs:not([hidden]){display:flex;flex-wrap:wrap;gap:8px}
#plantilla-digital .con-tabs button{min-height:40px;margin:0;padding:8px 14px;border:1px solid var(--hairline-2);border-radius:999px;
  background:#fff;color:var(--ink);font:inherit;font-size:.88rem;font-weight:500;letter-spacing:0;line-height:1.2;cursor:pointer}
#plantilla-digital .con-tabs button:hover{border-color:var(--fjord)}
#plantilla-digital .con-tabs button[aria-selected="true"]{background:var(--fjord);border-color:var(--fjord);color:#fff}
#plantilla-digital .con-tabs button:focus-visible{border-radius:999px}
@media(forced-colors:active){
  #plantilla-digital .con-tabs button[aria-selected="true"]{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText}
}
#plantilla-digital .con-panel{margin-top:12px;background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:12px 18px}
#plantilla-digital .con-panel:focus-visible{border-radius:14px}
#plantilla-digital .con-h{display:block;margin:2px 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fjord)}
#plantilla-digital .con-js .con-h{display:none}
#plantilla-digital .con-lista{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 20px;margin:0;padding:0}
#plantilla-digital .con-lista li{padding:6px 0;font-size:.95rem;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
/* «al momento», siempre debajo del nombre (igual en Google Calendar y en Outlook, quepa o no al lado). */
#plantilla-digital .con-ya{display:block;margin-top:1px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--fjord)}
@media(min-width:900px){
  #plantilla-digital #atender #conectores{grid-template-areas:"cab tiers" "cab sel" "cab pn";grid-template-rows:auto auto 1fr}
  #plantilla-digital #conectores .con-sel{grid-area:sel}
}
@media(max-width:599px){
  #plantilla-digital .con-tabs:not([hidden]){gap:6px}
  #plantilla-digital .con-tabs button{min-height:36px;padding:6px 12px;font-size:.84rem}
  #plantilla-digital .con-panel{padding:10px 16px}
  #plantilla-digital .con-lista{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0 16px}
}
/* Pie de precios: la línea de marcas de los programas que nombra la tarjeta de Conectores, en su propia línea. */
footer .legal .marcas{flex-basis:100%}
/* Al imprimir, todas las listas con su título, sin pestañas (como sin JavaScript). */
@media print{
  #plantilla-digital #conectores .con-tabs{display:none}
  #plantilla-digital #conectores .con-panel[hidden],#plantilla-digital #conectores .con-js .con-h{display:block}
}
/* Por debajo de 600 px, una tarjeta por fila: tamaño a la izquierda, precio a la derecha y, en
   «Ilimitado*», el uso normal justo debajo de la palabra, a lo ancho de la tarjeta. Todas igual. */
@media(max-width:599px){
  #plantilla-digital .tiers,#plantilla-digital .tiers.t2{grid-template-columns:minmax(0,1fr);gap:10px}
  #plantilla-digital .tiers>li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;padding:14px 16px}
  #plantilla-digital .tiers>li>.fq{display:contents}
  #plantilla-digital .tiers>li>.fp{grid-column:2;grid-row:1;margin-top:0;text-align:right}
  #plantilla-digital .fq .un{grid-column:1 / -1;grid-row:2;margin-top:6px}
  #plantilla-digital .fp b{font-size:1.35rem}
}

/* Nota del asterisco, justo debajo de Llamadas: entera y sin plegar, como las notas de «de más» (.pn), sin
   caja blanca: cada «Ilimitado*» ya lleva su uso normal en su tarjeta, y así atender no suma una tarjeta más. */
#plantilla-digital .nota-ilim{max-width:none;margin-top:14px;font-size:.86rem;letter-spacing:0;color:var(--dim)}

/* Guía «¿Qué necesita tu negocio?», debajo de los dos bloques (es de los dos): dos columnas que no se suman
   (D1 de Jorge). Atender (.ga), una fila por tamaño con sus paquetes y su total. Automatizar (.gs), UNA sola
   celda para los tres tamaños (N51 de Jorge): la integración a medida, según lo que se automatice; Conectores
   no sale aquí (está en su tarjeta de Atiende). Sin nada que elegir ni etiquetas de «el más elegido». Desde
   820 px es una tabla (.g-tabla): rótulos de columna arriba (.g-cols, oculto a lectores de pantalla), los
   tamaños en las dos primeras columnas y la celda de automatizar en la tercera, de arriba abajo de las tres
   filas; el rótulo de cada celda (.gl) queda solo para lectores de pantalla. Por debajo, cada tamaño apila
   su parte de atender con su rótulo a la vista y la celda de automatizar sale una vez, después de los tres.
   Cada cifra va pegada a su unidad («500 minutos»). */
#plantilla-digital .guia{position:relative;margin-top:96px;background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:20px 22px}
/* Separada de Automatiza como lo está Automatiza de Atiende (raya fina y el mismo aire): es de los dos. */
#plantilla-digital .guia::before{content:"";position:absolute;left:-1px;right:-1px;top:-45px;border-top:1px solid var(--hairline-2)}
#plantilla-digital .guia h4{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
#plantilla-digital .guia ul{list-style:none;margin:12px 0 0;padding:0}
#plantilla-digital .guia li{padding:12px 0;border-top:1px solid var(--hairline);font-size:.93rem;color:var(--body-c)}
#plantilla-digital .guia li:last-child{border-bottom:1px solid var(--hairline)}
#plantilla-digital .guia .gq b{color:var(--ink);font-weight:600}
#plantilla-digital .guia .ga{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"gl gl" "gp gt" "gx gx";align-items:baseline;gap:2px 14px;min-width:0}
#plantilla-digital .guia .gl{grid-area:gl;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fjord)}
#plantilla-digital .guia .gp{grid-area:gp;min-width:0;color:var(--ink)}
#plantilla-digital .guia .gt{grid-area:gt;font-size:1.2rem;font-weight:300;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right}
/* Mediano: a partir de cuántos minutos sale más barato el Ilimitado* de Llamadas, debajo de su celda de Atender. */
#plantilla-digital .guia .gx{grid-area:gx;margin-top:2px;font-size:.84rem;letter-spacing:0;color:var(--dim)}
/* Automatizar, una vez: en el móvil, después de los tres tamaños, como una fila más cerrada por su raya. */
#plantilla-digital .guia .gs{padding:12px 0;border-bottom:1px solid var(--hairline);font-size:.93rem;color:var(--ink);min-width:0}
#plantilla-digital .guia .gs .gl,#plantilla-digital .guia .gs .gp{display:block}
/* Equilibrada: el nombre, el precio (que no se parte) y «según lo que…», sin dejar dos palabras colgando. */
#plantilla-digital .guia .gs .gp{margin-top:2px;text-wrap:balance}
#plantilla-digital .guia .gs b{font-weight:600}
#plantilla-digital .guia .g-cols{display:none}
#plantilla-digital .guia-pie{margin-top:10px;font-size:.86rem;letter-spacing:0;color:var(--dim)}
@media(min-width:820px){
  /* Tres columnas; la lista de tamaños ocupa las dos primeras y cada fila hereda sus pistas (subgrid), así los
     rótulos de arriba caen justo sobre su columna. La celda de automatizar, en la tercera, de la primera raya a
     la última, con el texto en medio. Sin subgrid (Chrome/Edge < 117, Safari < 16) vale la declaración de antes
     con el mismo hueco entre columnas (column-gap:32px, el de .g-tabla), y la tabla se ve igual. */
  #plantilla-digital .guia .g-tabla{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1fr);gap:0 32px}
  #plantilla-digital .guia .g-cols{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1fr);
    grid-template-columns:subgrid;column-gap:32px;margin:14px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fjord)}
  #plantilla-digital .guia .g-cols span:first-child{grid-column:2}
  #plantilla-digital .guia .g-tabla ul{grid-column:1/3;grid-row:2;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);
    grid-template-columns:subgrid;column-gap:32px;margin-top:6px}
  #plantilla-digital .guia li{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);
    grid-template-columns:subgrid;column-gap:32px;align-items:baseline}
  #plantilla-digital .guia .gs{grid-column:3;grid-row:2;margin-top:6px;border-top:1px solid var(--hairline);
    display:flex;flex-direction:column;justify-content:center}
  #plantilla-digital .guia .ga{grid-template-areas:"gp gt" "gx gx"}
  #plantilla-digital .guia .gl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media(max-width:819px){
  #plantilla-digital .guia .gq{display:block}
  #plantilla-digital .guia .ga{margin-top:10px}
}
@media(max-width:719px){
  #plantilla-digital .guia{padding:18px 18px}
}

/* Franja «Siempre incluido» */
#plantilla-digital .incl{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px 22px;
  margin-top:36px;font-size:.92rem;color:var(--body-c)}
#plantilla-digital .incl b{color:var(--ink);font-weight:600}
#plantilla-digital .incl ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0;padding:0}
#plantilla-digital .incl li{position:relative;padding-left:22px}
#plantilla-digital .incl li::before{content:"\2713";content:"\2713"/"";position:absolute;left:0;color:var(--fjord);font-weight:700}
@media(max-width:719px){#plantilla-digital .incl,#plantilla-digital .incl ul{justify-content:flex-start}}

/* «Crear cuenta» al final de cada bloque, solo el botón (estilos comunes en site.css). */
#plantilla-digital .alta-cta{margin-top:24px}

/* Caja final: el cobro en corto junto a «Crear cuenta». La letra pequeña va pegada a la línea de
   la devolución, dentro de su mismo punto, y nunca se separa ni se pliega. */
#plantilla-digital .alta{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:24px;
  background:#fff;border:1px solid var(--hairline-2);border-radius:18px;padding:26px 28px}
#plantilla-digital .alta h3{font-size:1.2rem;letter-spacing:-.01em}
#plantilla-digital .alta-conds{list-style:none;margin:10px 0 0;padding:0}
#plantilla-digital .alta-conds li{position:relative;padding:3px 0 3px 22px;font-size:.9rem;color:var(--body-c)}
#plantilla-digital .alta-conds li::before{content:"\2713";content:"\2713"/"";position:absolute;left:0;color:var(--fjord);font-weight:700}
#plantilla-digital .alta-lp{display:block;margin-top:2px;font-size:.8rem;letter-spacing:0;color:var(--dim)}
#plantilla-digital .alta-pie{margin-top:8px;font-size:.82rem;letter-spacing:0}
#plantilla-digital .alta-pie a{font-weight:600;text-decoration:underline;text-underline-offset:2px;color:var(--fjord)}
#plantilla-digital .alta .btn{flex:none;min-width:220px}
/* En noruego el botón dice «Opprett konto (på engelsk)»: si no cabe, el paréntesis baja entero. */
#plantilla-digital .alta .btn{flex-wrap:wrap;column-gap:.35em;row-gap:0}
#plantilla-digital .alta .btn .nw{white-space:nowrap}
@media(max-width:719px){
  #plantilla-digital .alta{flex-direction:column;align-items:stretch;padding:22px 18px}
  #plantilla-digital .alta .btn{width:100%;min-width:0;white-space:normal;text-align:center}
}

/* ---------- Cierre (las tarjetas pulsables, en site.css: .finale a.path) ---------- */
/* El botón, al pie de su tarjeta (margin-top:auto, como en site.css): los «Crear mi cuenta» quedan a la misma altura
   aunque una tarjeta lleve una línea más. El hueco mínimo lo da el gap de .path. */
#contacto a.path .btn{margin-top:auto}
#contacto a.path p{margin:0}
#contacto .paths{margin-top:34px}
#contacto .finale-alt{max-width:none;margin:26px auto 0;font-size:.95rem}
#contacto .path h3.dk{margin:0}