/*
 * "¿Quiénes somos?" (about.tpl) and "¿Por qué nosotros?" (why.tpl). Layout and styles by the Diseño session
 * (dabbleam/design, piezas/whmcs-paginas/paginas.css, 30-10-2026); colours come from the palette variables in style.css.
 */

/* ---------- integration with the theme (its reset and global element styles) ---------- */
main.pag { padding-top: 7em; line-height: 1.5; min-height: 0; }
.pag b, .pag strong, .pag h1, .pag h2, .pag h3 { font-weight: bold; }
.pag h1 { max-width: none; }
.pag h2, .pag h3 { text-align: inherit; }
:where(.pag) section { display: block; padding-top: 0; margin-top: 0; }
.pag :where(ul, ol) > li { list-style: none; margin: 0; } /* beats the theme's "main ul li" (bullets, margins), not the components' own rules */
:where(.pag) ul, :where(.pag) ol { margin: 0; padding: 0; } /* no specificity: the components set their own */
.pag a.pag-tarjeta, .pag a.pag-tarjeta:visited { color: inherit; text-decoration: none; }

.pag { --tinta: #0b2a40; --gris: #5f6b78; --texto: #4a5866; --linea: #e3eef6; --fondo: #f3f9fe;
  max-width: 1024px; margin: 0 auto; padding: 3em 1.25em 4em; }
.pag-seccion { margin-top: 4.5em; }
.pag-seccion > h2 { font-size: 1.7em; line-height: 1.25; text-align: center; color: var(--tinta); margin: 0 0 .35em; }
.pag-seccion > h2:has(+ :not(.pag-intro)) { margin-bottom: 1.2em; }
.pag-seccion > .pag-intro { text-align: center; color: var(--texto); line-height: 1.6; max-width: 60ch; margin: 0 auto 2em; }
.pag-etiqueta { display: block; text-align: center; font-size: .8em; letter-spacing: .2em; text-transform: uppercase; color: var(--link-color); margin-bottom: .8em; }

/* cabecera: como la de la tienda */
.pag-cabecera { text-align: center; max-width: 780px; margin: 0 auto; }
.pag-cabecera h1 { font-size: 2.6em; line-height: 1.15; color: var(--tinta); margin: 0 0 .45em; }
.pag-subtitulo { font-size: 1.3em; line-height: 1.45; color: var(--tinta); margin: 0 0 .8em; }
.pag-entradilla { font-size: 1.05em; line-height: 1.65; color: var(--texto); margin: 0 auto; max-width: 62ch; }

/* cifras: número grande en azul y una línea debajo; en una banda clara */
.pag-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; margin-top: 2.8em; padding: 1.8em 1.5em; background: var(--fondo);
  border-radius: .6em; border-top: 3px solid var(--brand-light-color); text-align: center; }
.pag-cifras b { display: block; font-size: 2.3em; line-height: 1.1; color: var(--dark-primary-color); white-space: nowrap; }
.pag-cifras span { display: block; margin-top: .45em; font-size: .9em; line-height: 1.45; color: var(--texto); }

/* icono redondo: dos capas (círculo y glifo) que crecen solo al pasar por el propio icono (guía, "Iconos redondos") */
.pag-icono { position: relative; display: block; width: 4em; height: 4em; flex: none; }
.pag-icono::before, .pag-icono::after { content: ""; position: absolute; inset: 0; transition: transform .4s ease-out; }
.pag-icono::before { border-radius: 50%; background: var(--brand-light-gradient); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.pag-icono::after { background: var(--icono) center / 50% no-repeat; }
.pag-icono:hover::before { transform: scale(1.2); }
.pag-icono:hover::after { transform: scale(1.44); }
@media (prefers-reduced-motion: reduce) { .pag-icono::before, .pag-icono::after { transition: none; transform: none !important; } }

/* tarjeta: la de la tienda */
.pag-tarjeta { background: #fff; border-radius: .6em; box-shadow: 0 2px 12px rgba(0, 60, 110, .14); }

/* historia: línea de tiempo a dos lados de una línea central, alternando, para que doce hitos no hagan la página
   interminable; cada hito, en una tarjeta pequeña con el año, el título y una frase. El primer hito de cada etapa lleva
   su rótulo ("Antes de Dabbleam", "Dabbleam"). En el móvil, una sola columna con la línea a la izquierda. */
.pag-historia { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 4.5em; }
.pag-historia::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--linea); }
.pag-historia li { position: relative; align-self: start; margin-bottom: 1.2em; padding: 1.1em 1.3em 1.15em; background: #fff; border-radius: .6em;
  box-shadow: 0 2px 12px rgba(0, 60, 110, .12); }
.pag-historia li:nth-child(odd) { grid-column: 1; }
.pag-historia li:nth-child(even) { grid-column: 2; }
.pag-historia li:nth-child(1) { grid-row: 1 / span 2; }
.pag-historia li:nth-child(2) { grid-row: 2 / span 2; }
.pag-historia li:nth-child(3) { grid-row: 3 / span 2; }
.pag-historia li:nth-child(4) { grid-row: 4 / span 2; }
.pag-historia li:nth-child(5) { grid-row: 5 / span 2; }
.pag-historia li:nth-child(6) { grid-row: 6 / span 2; }
.pag-historia li:nth-child(7) { grid-row: 7 / span 2; }
.pag-historia li:nth-child(8) { grid-row: 8 / span 2; }
.pag-historia li:nth-child(9) { grid-row: 9 / span 2; }
.pag-historia li:nth-child(10) { grid-row: 10 / span 2; }
.pag-historia li:nth-child(11) { grid-row: 11 / span 2; }
.pag-historia li:nth-child(12) { grid-row: 12 / span 2; }
.pag-historia li:nth-child(13) { grid-row: 13 / span 2; }
.pag-historia li:nth-child(14) { grid-row: 14 / span 2; }
.pag-historia li:nth-child(15) { grid-row: 15 / span 2; }
.pag-historia li:nth-child(16) { grid-row: 16 / span 2; }
/* el punto sobre la línea, a la altura del año */
.pag-historia li::before { content: ""; position: absolute; top: 1.25em; width: .95em; height: .95em; border-radius: 50%; background: #fff;
  border: 3px solid var(--brand-light-color); box-sizing: border-box; }
.pag-historia li:nth-child(odd)::before { right: calc(-2.25em - .475em); }
.pag-historia li:nth-child(even)::before { left: calc(-2.25em - .475em); }
.pag-historia li:has(.etapa)::before { top: 3.2em; }
.pag-historia li.hoy::before { background: var(--primary-color); border-color: var(--primary-color); }
.pag-historia li.hoy { box-shadow: 0 0 0 2px var(--primary-color), 0 6px 24px rgba(0, 60, 110, .18); }
.pag-historia .cuando { display: block; font-weight: bold; color: var(--dark-primary-color); font-size: .95em; margin-bottom: .2em; }
.pag-historia .etapa { display: inline-block; margin: 0 0 .7em; font-size: .72em; font-weight: bold; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dark-primary-color); background: var(--fondo); padding: .45em .8em .2em; border-radius: 1em; } /* capitals: Objectivity draws them .1em high, so more room on top */
.pag-historia h3 { margin: 0 0 .3em; font-size: 1.05em; color: var(--tinta); line-height: 1.35; }
.pag-historia p { margin: 0; color: var(--texto); line-height: 1.55; font-size: .93em; }

/* fuentes: enlaces públicos que confirman un hito o los juegos, al pie de su tarjeta. Pequeños y en el azul de los
   enlaces, separados del texto por una línea fina, con el icono de "sale de la web"; sin subrayar hasta pasar el ratón.
   Uno, dos o ninguno por tarjeta; si no hay, no se pone el <p>. */
.pag-fuentes { display: flex; flex-wrap: wrap; gap: .35em 1.2em; margin: .8em 0 0; padding-top: .65em; border-top: 1px dashed var(--linea); font-size: .82em; line-height: 1.4; }
.pag-fuentes a { display: inline-flex; align-items: center; gap: .35em; text-decoration: none; color: var(--link-color); }
.pag-fuentes a:hover { text-decoration: underline; text-underline-offset: .15em; }
.pag-fuentes a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: .2em; }
.pag-fuentes a::after { content: ""; flex: none; width: .85em; height: .85em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v4.5A1.5 1.5 0 0 1 16.5 20h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v4.5A1.5 1.5 0 0 1 16.5 20h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10'/%3E%3C/svg%3E") center / contain no-repeat; }
.pag-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pag-juegos .pag-fuentes { margin-top: 1em; }

/* servicios: rejilla de 3 con el icono redondo, como la portada */
/* flexible y centrada: con siete servicios quedan 4 + 3 en el ordenador y 2 + 2 + 2 + 1 en la tableta, sin huecos a un lado */
.pag-servicios { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5em; }
.pag-servicios > * { flex: 0 1 calc((100% - 4.5em) / 4); box-sizing: border-box; }
.pag-servicios > a { display: flex; flex-direction: column; align-items: center; padding: 1.8em 1.5em 1.6em; text-align: center; text-decoration: none; color: inherit; transition: box-shadow .2s; }
.pag-servicios > a:hover { box-shadow: 0 6px 24px rgba(0, 60, 110, .22); color: inherit; }
.pag-servicios > a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.pag-servicios .ver { display: inline-block; margin-top: auto; padding-top: .8em; font-size: .9em; font-weight: bold; color: var(--link-color); }
.pag-servicios .pag-icono { margin: 0 auto 1em; }
.pag-servicios h3 { margin: 0 0 .4em; font-size: 1.1em; color: var(--tinta); }
.pag-servicios p { margin: 0; color: var(--texto); font-size: .93em; line-height: 1.55; }
.pag-mas { text-align: center; margin-top: 1.6em; }

/* videojuegos: banda con los dos logos y el texto */
.pag-juegos { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2.5em; align-items: center; padding: 2.2em 2.4em; }
.pag-juegos .logos { display: flex; flex-direction: column; gap: 1.6em; align-items: center; }
.pag-juegos .logos img { height: 3.6em; max-width: 100%; }
.pag-juegos h2 { margin: 0 0 .5em; font-size: 1.5em; color: var(--tinta); }
.pag-juegos p { margin: 0 0 .8em; color: var(--texto); line-height: 1.6; }
.pag-juegos p:last-child { margin-bottom: 0; }
.pag-sello { display: inline-block; font-size: .78em; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--highlight-color);
  padding: .45em .9em .2em; border-radius: 1em; margin-bottom: 1em; } /* capitals: .1em lower, as .pag-historia .etapa */

/* clientes: los nombres en pastillas (no hay logo de todos los que el dueño ha autorizado) */
.pag-nombres { display: flex; flex-wrap: wrap; justify-content: center; gap: .7em; list-style: none; margin: 0 auto; padding: 0; max-width: 860px; }
.pag-nombres li { padding: .55em 1.1em .5em; border-radius: 2em; background: var(--fondo); color: var(--tinta); font-weight: bold; font-size: .95em; }
.pag-nombres li.otros { background: none; color: var(--gris); font-weight: normal; }

/* razones (¿por qué nosotros?): tarjetas de 2 en 2, con el icono a la izquierda */
.pag-razones { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; }
.pag-razon { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; gap: 0 1.3em; padding: 1.7em 1.6em; align-items: start; }
/* el icono ocupa las tres filas; con la última flexible, su altura no separa el título del texto cuando el título es de una línea */
.pag-razon .pag-icono { width: 3.6em; height: 3.6em; grid-row: 1 / 4; }
.pag-razon h3 { margin: .2em 0 .45em; font-size: 1.15em; color: var(--tinta); line-height: 1.35; }
.pag-razon p { margin: 0; color: var(--texto); line-height: 1.6; font-size: .95em; }
.pag-razon ul { list-style: none; margin: .9em 0 0; padding: 0; font-size: .9em; }
.pag-razon li { position: relative; padding: .3em 0 .3em 1.4em; color: var(--tinta); line-height: 1.45; }
.pag-razon li::before { content: "✓"; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; }

/* comparación: lo habitual frente a Dabbleam; la columna nuestra, resaltada */
.pag-comparar { width: 100%; max-width: 860px; margin: 0 auto; border-collapse: separate; border-spacing: 0; font-size: .95em; }
.pag-comparar th, .pag-comparar td { padding: .95em 1.1em; text-align: left; vertical-align: top; line-height: 1.5; border-bottom: 1px solid var(--linea); }
.pag-comparar thead th { font-size: .82em; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); border-bottom: 2px solid var(--linea); }
.pag-comparar tbody th { color: var(--tinta); font-weight: bold; width: 22%; }
.pag-comparar td { color: var(--texto); width: 39%; }
.pag-comparar .nuestro { background: var(--fondo); color: var(--tinta); }
.pag-comparar thead .nuestro { color: var(--dark-primary-color); border-top: 3px solid var(--primary-color); border-radius: .6em .6em 0 0; }
.pag-comparar tbody tr:last-child .nuestro { border-radius: 0 0 .6em .6em; }
.pag-comparar td.nuestro::before { content: "✓ "; color: var(--primary-color); font-weight: bold; }

/* para quién somos y para quién no: dos columnas */
.pag-para { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; max-width: 860px; margin: 0 auto; }
.pag-para > div { padding: 1.6em 1.7em; border-radius: .6em; }
.pag-para .si { background: var(--fondo); border-top: 3px solid var(--primary-color); }
.pag-para .no { border: 1px solid var(--linea); }
.pag-para h3 { margin: 0 0 .8em; font-size: 1.15em; color: var(--tinta); }
.pag-para ul { list-style: none; margin: 0; padding: 0; }
.pag-para li { position: relative; padding: .4em 0 .4em 1.5em; line-height: 1.5; color: var(--texto); }
.pag-para .si li::before { content: "✓"; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; }
.pag-para .no li::before { content: ""; position: absolute; left: .25em; top: .95em; width: .45em; height: .45em; border-radius: 50%; background: #b9c7d3; }

/* cierre: el de la tienda y /servicios, con los tres botones */
.pag-cierre { text-align: center; max-width: 760px; margin: 0 auto; padding: 2.2em 1.5em; border-radius: .6em; box-shadow: 0 2px 12px rgba(0, 60, 110, .12); }
.pag-cierre h2 { margin: 0 0 .4em; color: var(--tinta); font-size: 1.45em; }
.pag-cierre p { margin: 0 0 1.3em; color: var(--texto); line-height: 1.55; }
.pag-cierre .botones { display: flex; flex-wrap: wrap; gap: .8em; justify-content: center; }
.pag-boton, .pag-boton-sec { display: inline-block; text-decoration: none; font-weight: bold; font-size: 1.05em; line-height: 1.2; padding: .75em 1.2em .7em; border-radius: .45em; }
.pag-boton { background: var(--brand-gradient); color: #fff !important; text-shadow: 0 1px .4px rgba(0,0,0,.35); box-shadow: 0 2px 6px rgba(0, 60, 110, .25); }
.pag-boton:hover { background: var(--secondary-color); }
.pag-boton-sec { border: 2px solid var(--link-color); color: var(--link-color) !important; padding: .65em 1.1em .6em; }
.pag-boton-sec:hover { background: var(--fondo); }
.pag-boton:focus-visible, .pag-boton-sec:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 860px) {
  .pag-historia { grid-template-columns: 1fr; padding-left: 2.2em; }
  .pag-historia::before { left: .45em; margin-left: 0; }
  .pag-historia li:nth-child(n) { grid-column: 1; grid-row: auto; }
  .pag-historia li:nth-child(n)::before { left: calc(-2.2em + .45em - .475em + 1px); right: auto; }
  .pag-cifras { grid-template-columns: 1fr 1fr; gap: 1.6em 1em; }
  .pag-servicios > * { flex-basis: calc((100% - 1.5em) / 2); }
  .pag-razones, .pag-para { grid-template-columns: 1fr; }
  .pag-juegos { grid-template-columns: 1fr; text-align: center; padding: 2em 1.5em; }
  .pag-juegos .logos { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .pag-cabecera h1 { font-size: 2.1em; }
}
@media (max-width: 560px) {
  .pag { padding: 2em 1em 3em; }
  .pag-seccion { margin-top: 3.5em; }
  .pag-servicios > * { flex-basis: 100%; }
  .pag-cifras b { font-size: 2em; }
  .pag-razon { grid-template-columns: 1fr; }
  .pag-razon .pag-icono { grid-row: auto; margin-bottom: .9em; }
  /* la comparación, en fichas: cada fila con sus dos respuestas una debajo de otra */
  .pag-comparar thead { display: none; }
  .pag-comparar, .pag-comparar tbody, .pag-comparar tr, .pag-comparar th, .pag-comparar td { display: block; width: auto; }
  .pag-comparar tr { margin-bottom: 1.2em; border: 1px solid var(--linea); border-radius: .6em; overflow: hidden; }
  .pag-comparar tbody th { background: #fff; border-bottom: 1px solid var(--linea); width: auto; }
  .pag-comparar td { width: auto; }
  .pag-comparar td::before { display: block; font-size: .78em; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: .25em; content: "Lo habitual"; }
  .pag-comparar td.nuestro::before { content: "Con Dabbleam"; color: var(--dark-primary-color); font-weight: bold; }
  .pag-comparar tbody tr:last-child .nuestro { border-radius: 0; }
  .pag-cierre .botones a { flex: 1 1 100%; }
}

/* icons by class (no inline styles in the templates); paths relative to this stylesheet */
.pag-icono.i-design { --icono: url('../img/design.svg'); }
.pag-icono.i-cloud { --icono: url('../img/cloud.svg'); }
.pag-icono.i-onprem { --icono: url('../img/onprem.svg'); }
.pag-icono.i-dev { --icono: url('../img/dev.svg'); }
.pag-icono.i-security { --icono: url('../img/security.svg'); }
.pag-icono.i-research { --icono: url('../img/research.svg'); }
.pag-icono.i-soporte { --icono: url('../img/soporte.svg'); }
.pag-icono.i-chip { --icono: url('../img/chip.svg'); }
.pag-icono.i-llave { --icono: url('../img/llave.svg'); }

/* closing buttons with their icon, the same height and the text centred, as in the store */
.pag-cierre .botones a { display: inline-flex; align-items: center; justify-content: center; gap: .45em; white-space: nowrap; }
.pag-cierre .botones a i { font-size: 1.15em; }
.pag-cierre .botones a i.fa-whatsapp { font-size: 1.25em; }
.pag-cierre .botones { align-items: stretch; }