/* Alternativas de diseño de Altagráfica (lib/disenos.js). La 2 es la base (altagrafica.css, sin
   reglas aqui); cada otra agrega lo suyo con su clase en <html>: .a3 ... .a7. La 1 vive en otro
   servicio. Barra de alternativas e indice: .maquetas y .lista-maquetas, del sitio.css del motor. */
.lista-maquetas h2 small { font-size: .8125rem; font-weight: 400; }
.lista-maquetas .acciones { gap: 8px; }
.lista-maquetas .btn { padding: 7px 12px; font-size: .875rem; }

/* ── 3 · Dos columnas ─────────────────────────────────────────────────────────
   El menu de bloques a la izquierda y el contenido en todo el resto; la columna derecha pasa a una
   franja de tres bloques bajo el contenido. Portada de a tres articulos. */
.a3 .columnas { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "izq centro" "izq der"; }
.a3 .col-der { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; align-items: start; padding-top: 10px; border-top: 1px solid #e2e2e2; }
.a3 .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 24px; }
.a3 .posts .post-foto img { height: 160px; }
.a3 .post.destacado { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "foto tit" "foto texto" "foto leer"; column-gap: 26px; align-content: start; }
.a3 .post.destacado .post-tit { grid-area: tit; }
.a3 .post.destacado .post-foto { grid-area: foto; margin: 0; }
.a3 .post.destacado > p:not(.leer) { grid-area: texto; }
.a3 .post.destacado .leer { grid-area: leer; }
.a3 .post.destacado .post-foto img { width: 100%; max-height: 300px; object-fit: cover; }

/* ── 4 · Colores del logotipo ──────────────────────────────────────────────────
   El azul (#313272) y el amarillo (#efe93d) del cuadro "AG". El rojo de "Contactanos" se queda. */
.a4 { --celeste: #313272; --titulo: #313272; --naranja: #efe93d; --sobre-naranja: #1d1e4b; --naranja-rotulo: #313272; }
.a4 a:hover { color: #5557b3; }
.a4 .enlaces a:hover, .a4 .enlaces a[aria-current] { color: #313272; }
.a4 .bienvenida { color: #313272; }
.a4 .valores-cab { color: #a9a9cc; }
.a4 .colores { display: none; }
.a4 .barra { background: #313272; border-bottom: 4px solid #efe93d; }
.a4 .barra .c-rot { color: #c9c9ea; }
.a4 .contactos.en-barra a:not(.btn) { color: #fff; }
.a4 .buscador input { border-color: #efe93d; }
.a4 .buscador button { background: #efe93d; border-color: #efe93d; color: #1d1e4b; }
.a4 .ir-menu { color: #efe93d; }
.a4 .bloque { border-color: #cfcfe4; }
.a4 .bloque-tit { background: #313272; color: #fff; border-bottom: 3px solid #efe93d; }
.a4 .lista2010 li::before { background: #efe93d; box-shadow: 0 0 0 1px #c9c42a; }
.a4 .lista2010 a:hover, .a4 .lista2010 a[aria-current] { color: #313272; }
.a4 .post-tit.grande span { color: #8e8fc0; }
.a4 .leer-mas { background: #efe93d; border-color: #d4cf2c; color: #1d1e4b; font-weight: 700; }
.a4 .leer-mas:hover { background: #f6f28a; }
.a4 .mas-articulos li::before, .a4 .migas li + li::before { color: #313272; }
.a4 .formulario .btn { background: #313272; }
.a4 .formulario .btn:hover { background: #46489a; }
.a4 .club-boton { background: #efe93d; border-color: #efe93d; color: #1d1e4b; }
.a4 .pie2010 { background: #313272; border-top: 4px solid #efe93d; color: #c9c9ea; }
.a4 .pie2010 h2 { color: #efe93d; }
.a4 .pie2010 a, .a4 .pie2010 .contactos a { color: #fff; }
.a4 .pie2010 .c-rot, .a4 .pie-legal, .a4 .pie2010 .maquinas a { color: #b9b9e0; }
.a4 .pie-legal { border-top-color: rgb(255 255 255 / .2); }

/* ── 5 · Lavanda ────────────────────────────────────────────────────────────────
   La lavanda de la mano: fondo lavanda muy claro, tarjetas blancas redondeadas, letra del sistema. */
.a5 body { background: #f4f4fa; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.a5 .cab2010 { background: #fff; }
.a5 .bienvenida { color: #4b4c8a; font-weight: 600; }
.a5 .valores-cab { color: #b3b3d3; }
.a5 .colores { height: 4px; margin-top: 10px; }
.a5 .barra { background: #ebebf6; border-bottom: 0; }
.a5 .buscador input { border-color: #b7b7cf; border-radius: 999px 0 0 999px; padding-left: 18px; }
.a5 .buscador button { border-radius: 0 999px 999px 0; }
.a5 .bloque { border: 0; border-radius: 14px; box-shadow: 0 2px 12px rgb(49 50 114 / .08); }
.a5 .bloque-tit { background: #ebebf6; border: 0; border-radius: 14px 14px 0 0; color: #313272; font-weight: 600; letter-spacing: .14em; }
.a5 .lista2010 li::before { border-radius: 50%; background: #b7b7cf; }
.a5 .post-tit, .a5 h1, .a5 h2 { color: #313272; }
.a5 .post-tit.grande span { color: #8687bd; }
.a5 .col-centro > .post, .a5 .posts .post, .a5 .bloque-centro, .a5 .mas-articulos, .a5 .portada-tit { background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 12px rgb(49 50 114 / .06); }
.a5 .bloque-centro { border-top: 0; }
.a5 .posts { gap: 20px; }
.a5 .post-foto img, .a5 .prod-foto img, .a5 .secciones img, .a5 .foto-proceso img, .a5 .trabajo-foto img { border: 0; padding: 0; border-radius: 10px; }
.a5 .leer-mas { padding: 5px 16px; border: 0; border-radius: 999px; background: #313272; color: #fff; }
.a5 .leer-mas:hover { background: #46489a; color: #fff; }
.a5 .prod { border: 0; border-radius: 14px; box-shadow: 0 2px 10px rgb(49 50 114 / .07); }
.a5 .btn { border-radius: 999px; }
.a5 .formulario .btn { background: #313272; }
.a5 .formulario.compacto .campo input, .a5 .formulario.compacto .campo textarea { border-radius: 10px; border-color: #d3d3e6; }
.a5 .pie2010 { background: #ebebf6; border-top: 0; }

/* ── 6 · Color en tu vida ───────────────────────────────────────────────────────
   La franja de colores de 2010 como protagonista: cada bloque y cada articulo toma un color del espectro. */
.a6 .colores { height: 14px; margin-top: 10px; }
.a6 .barra { background: #fff; border-bottom: 1px solid #e6e6e6; }
.a6 .bloque-tit { background: #fff; border-left: 8px solid var(--c, #0076b9); border-bottom: 1px solid #ececec; letter-spacing: .2em; }
.a6 .col-izq .bloque:nth-child(5n + 1) { --c: #0076b9; }
.a6 .col-izq .bloque:nth-child(5n + 2) { --c: #98004d; }
.a6 .col-izq .bloque:nth-child(5n + 3) { --c: #ef8a00; }
.a6 .col-izq .bloque:nth-child(5n + 4) { --c: #64bd25; }
.a6 .col-izq .bloque:nth-child(5n + 5) { --c: #400054; }
.a6 .col-der .bloque:nth-child(3n + 1) { --c: #e8090a; }
.a6 .col-der .bloque:nth-child(3n + 2) { --c: #f7ce1c; }
.a6 .col-der .bloque:nth-child(3n + 3) { --c: #09a424; }
.a6 .lista2010 li::before { background: var(--c, #0076b9); }
.a6 .post { --c: #0076b9; border-top: 6px solid var(--c); padding-top: 12px; }
.a6 .posts .post:nth-child(6n + 1) { --c: #c50628; }
.a6 .posts .post:nth-child(6n + 2) { --c: #ef8a00; }
.a6 .posts .post:nth-child(6n + 3) { --c: #64bd25; }
.a6 .posts .post:nth-child(6n + 4) { --c: #003d97; }
.a6 .posts .post:nth-child(6n + 5) { --c: #98004d; }
.a6 .posts .post:nth-child(6n + 6) { --c: #09a424; }
.a6 .post-tit a:hover { color: var(--c); }
.a6 .leer-mas { background: var(--c, #0076b9); border-color: var(--c, #0076b9); color: #fff; font-weight: 700; }
.a6 .leer-mas:hover { color: #fff; filter: brightness(1.12); }
.a6 .post-tit.grande span { background: linear-gradient(90deg, #0076b9, #98004d, #d00000, #ef8a00, #c9b800, #64bd25, #09a424); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a6 .bloque-centro { border-top: 6px solid transparent; border-image: linear-gradient(90deg, #0076b9, #98004d, #d00000, #ef8a00, #f7ce1c, #64bd25, #09a424) 1; }
.a6 .prod:hover { border-color: #ef8a00; }
.a6 .pie2010 { border-top: 0; }
.a6 .pie2010::before { content: ""; display: block; height: 8px; background: linear-gradient(90deg, #0076b9, #003d97, #400054, #98004d, #c50628, #d00000, #ef8a00, #f7ce1c, #d0ee41, #64bd25, #09a424); }

/* ── 7 · Vitrina de fabrica ─────────────────────────────────────────────────────
   Cabecera delgada, el menu de 2010 desplegable arriba, la portada abre con el collage a todo el
   ancho y las lineas en tarjetas; contacto y Club en una franja al final. */
.a7 .cab2010 .collage, .a7 .cab2010 .valores-cab, .a7 .cab2010 .bienvenida { display: none; }
.a7 .cab-fila { grid-template-columns: 130px minmax(0, 1fr); grid-template-areas: "logo textos"; align-items: center; padding-block: 8px; }
.a7 .logo-mano { width: 120px; }
.a7 .enlaces ul { justify-content: flex-end; }
.a7 .colores { margin-top: 0; }
.menu-sup { background: #fff; border-bottom: 1px solid #d6d6d6; box-shadow: 0 2px 6px rgb(0 0 0 / .05); position: relative; z-index: 30; }
.menu-sup .grupos { display: flex; flex-wrap: wrap; }
.menu-sup .grupo { position: relative; }
.menu-sup .grupo-tit { display: block; padding: 12px 18px; border: 0; background: none; cursor: pointer; font: 400 .9375rem Arial, Helvetica, sans-serif; font-variant: small-caps; letter-spacing: .16em; color: #111; text-decoration: none; }
.menu-sup .grupo-tit::after { content: " ▾"; color: var(--celeste); font-variant: normal; }
.menu-sup a.grupo-tit::after { content: ""; }
.menu-sup .grupo-tit:hover, .menu-sup .grupo:focus-within > .grupo-tit { color: var(--celeste); background: #f4f4f4; }
.menu-sup .grupo-tit.oferta { color: var(--iva); }
.menu-sup .grupo ul { display: none; position: absolute; top: 100%; left: 0; min-width: 270px; padding: 8px 0; background: #fff; border: 1px solid #d6d6d6; border-top: 3px solid var(--celeste); box-shadow: 0 10px 24px rgb(0 0 0 / .14); }
.menu-sup .grupo:hover > ul, .menu-sup .grupo:focus-within > ul, .menu-sup .grupo.abierto > ul { display: block; }
.menu-sup .grupo.abierto > .grupo-tit { color: var(--celeste); background: #f4f4f4; }
.menu-sup .grupo ul a { display: block; padding: 6px 18px; color: #444; font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; }
.menu-sup .grupo ul a:hover, .menu-sup .grupo ul a[aria-current] { background: #f1f7f9; color: var(--celeste); }
.a7 .columnas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "centro" "der"; }
.a7 .col-der { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; align-items: start; padding-top: 12px; border-top: 1px solid #e2e2e2; }
.vitrina-fab { position: relative; margin-bottom: 28px; }
.vitrina-collage img { display: block; width: 100%; height: auto; }
.vitrina-txt { margin-top: 14px; padding: 18px 22px; background: #f7f7f7; border-left: 6px solid var(--celeste); border-radius: 3px; }
.vitrina-txt .bienvenida { margin-top: 0; }
.vitrina-txt .valores-cab { margin-bottom: 14px; }
.vitrina-txt .valores-cab li { transform: none !important; }
.vitrina-txt .post-tit.grande { margin-top: 6px; }
.tarjetas-lineas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 30px; }
.tarjetas-lineas a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px 10px 14px; background: #fff; border: 1px solid #dadada; border-radius: 4px; color: var(--texto); text-decoration: none; }
.tarjetas-lineas a:hover { border-color: #a9c7cf; box-shadow: 0 6px 18px rgb(0 0 0 / .08); }
.tarjetas-lineas img { width: 100%; height: 190px; object-fit: contain; background: #fff; border-bottom: 1px solid #ececec; padding-bottom: 8px; }
.tl-tit { font-size: 1.2rem; color: var(--titulo); }
.tl-txt { flex: 1; font-size: .875rem; color: var(--suave); }
.tarjetas-lineas .leer-mas { align-self: flex-start; }

/* ── 8 · Vitrina en colores AG ──────────────────────────────────────────────────
   La 7 con los colores de la 4: en <html> lleva tambien .a7 y .a4 (DISENOS[8].combina); aca solo
   lo que esa mezcla necesita (el menu y la vitrina en azul y amarillo). 9 y 10 parten de la 8. */
.a8 .menu-sup { border-bottom: 3px solid #efe93d; }
.a8 .menu-sup .grupo-tit, .a8 .menu-sup .grupo-tit::after { color: #313272; }
.a8 .menu-sup .grupo-tit:hover, .a8 .menu-sup .grupo:focus-within > .grupo-tit { background: #f2f2f8; color: #313272; box-shadow: inset 0 -3px 0 #efe93d; }
.a8 .menu-sup .grupo-tit.oferta { color: var(--iva); }
.a8 .menu-sup .grupo ul { border-top-color: #313272; }
.a8 .menu-sup .grupo ul a:hover, .a8 .menu-sup .grupo ul a[aria-current] { background: #f2f2f8; color: #313272; }
.a8 .vitrina-txt { background: #f2f2f8; border-left-color: #efe93d; }
.a8 .vitrina-txt .btn { background: #313272; color: #fff; }
.a8 .vitrina-txt .btn.claro { background: #fff; color: #313272; box-shadow: inset 0 0 0 2px #313272; }
.a8 .tarjetas-lineas a:hover { border-color: #313272; }
.a8 .tl-tit { color: #313272; }

/* ── Vinculados: "Con su impresion" y lo que incluye un stand (alternativas con kits: la 7 y la 9) ── */
.ficha .componentes { grid-column: 1 / -1; min-width: 0; }
.ficha .kit { grid-column: 1 / -1; min-width: 0; margin-top: 8px; padding: 18px 20px; background: #f2f2f8; border-top: 4px solid #efe93d; border-radius: 4px; }
.kit h2 { margin-bottom: .3em; color: #313272; }
.kit .intro { margin-bottom: 12px; }
/* position: relative para que el texto oculto de la cabecera de la tabla (.oculto, absoluto) quede dentro
   del recuadro deslizable y no ensanche la pagina. */
.tabla-desliza { position: relative; max-width: 100%; overflow-x: auto; }
.kit-tabla td:first-child { min-width: 170px; }
.kit-tabla { background: #fff; font-size: .875rem; }
.kit-tabla th { white-space: nowrap; }
.kit-tabla td:nth-child(3), .kit-tabla td:nth-child(4), .kit-tabla th:nth-child(3), .kit-tabla th:nth-child(4) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kit-tabla td:nth-child(4) b { color: #313272; font-size: 1rem; }
.kit-tabla .cod { display: block; font-size: .75rem; color: var(--suave); }
/* Material legible ("Tela PVC mate") y debajo medida, proceso y codigo; la opcion mas conveniente marcada. */
.kit-tabla .kit-mat { font-weight: 700; color: #313272; text-decoration: none; }
.kit-tabla .kit-mat:hover { text-decoration: underline; }
.kit-tabla .kit-det { display: block; margin-top: 1px; font-size: .75rem; color: var(--suave); }
.kit-tabla .mejor { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #efe93d; color: #1d1e4b; font-size: .6875rem; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.kit-tabla tr.es-mejor td { background: #fffdea; }
.plazo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.plazo-n { background: #e6e6f3; color: #313272; }
.plazo-e { background: #fff6c2; color: #6b5c00; }
.plazo-u { background: #ffe0d6; color: #9a2a00; }
.como-compras { padding: 18px 20px; background: #f2f2f8; border-left: 6px solid #313272; border-radius: 4px; }
.pasos-fab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: paso; margin: 6px 0 14px; }
.pasos-fab li { counter-increment: paso; position: relative; padding: 12px 12px 12px 54px; background: #fff; border-radius: 4px; }
.pasos-fab li::before { content: counter(paso); position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #efe93d; color: #1d1e4b; font-weight: 700; }
.pasos-fab b { display: block; color: #313272; }
.pasos-fab span { font-size: .875rem; color: var(--suave); }
.ejemplo-kit { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: #fff; border: 1px solid #d6d6e8; border-radius: 4px; color: var(--texto); text-decoration: none; }
.ejemplo-kit:hover { border-color: #313272; }
.ejemplo-kit img { flex: 0 0 96px; width: 96px; height: 96px; object-fit: contain; }
.ek-txt strong { color: #313272; font-size: 1.15rem; }
.ek-txt .nota { display: block; margin: 2px 0 0; }

/* ── 10 · Vitrina AG, color en tu vida ─────────────────────────────────────────── */
.a10 .colores { display: block; height: 10px; margin-top: 0; }
.a10 .barra { border-bottom: 0; }
.a10 .tarjetas-lineas li { --c: #0076b9; }
.a10 .tarjetas-lineas li:nth-child(7n + 2) { --c: #98004d; }
.a10 .tarjetas-lineas li:nth-child(7n + 3) { --c: #d00000; }
.a10 .tarjetas-lineas li:nth-child(7n + 4) { --c: #ef8a00; }
.a10 .tarjetas-lineas li:nth-child(7n + 5) { --c: #c9b800; }
.a10 .tarjetas-lineas li:nth-child(7n + 6) { --c: #64bd25; }
.a10 .tarjetas-lineas li:nth-child(7n + 7) { --c: #09a424; }
.a10 .tarjetas-lineas a { border-top: 6px solid var(--c); }
.a10 .tarjetas-lineas a:hover { border-color: var(--c); }
.a10 .tarjetas-lineas .leer-mas { background: var(--c); border-color: var(--c); color: #fff; }
.a10 .post-tit.grande span { background: linear-gradient(90deg, #0076b9, #98004d, #d00000, #ef8a00, #c9b800, #64bd25, #09a424); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a10 .col-der .bloque:nth-child(3n + 1) .bloque-tit { border-bottom-color: #e8090a; }
.a10 .col-der .bloque:nth-child(3n + 3) .bloque-tit { border-bottom-color: #64bd25; }
.a10 .vitrina-txt { border-left: 0; border-top: 6px solid transparent; border-image: linear-gradient(90deg, #0076b9, #98004d, #d00000, #ef8a00, #f7ce1c, #64bd25, #09a424) 1; }
.a10 .pie2010 { border-top: 0; }
.a10 .pie2010::before { content: ""; display: block; height: 8px; background: linear-gradient(90deg, #0076b9, #003d97, #400054, #98004d, #c50628, #d00000, #ef8a00, #f7ce1c, #d0ee41, #64bd25, #09a424); }

/* ── Pantallas mas angostas ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .a7 .col-der { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjetas-lineas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a3 .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .a3 .columnas, .a7 .columnas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "centro" "der" "izq"; }
  .a3 .col-der, .a7 .col-der { display: block; border-top: 0; }
  .a3 .post.destacado { display: block; }
  .a7 .cab-fila { grid-template-columns: 80px minmax(0, 1fr); }
  .a7 .logo-mano { width: 76px; }
  /* En angosto los grupos van plegados en una o dos lineas; el que se toca se abre a todo el ancho. */
  .menu-sup .grupo-tit { padding: 9px 10px; font-size: .875rem; letter-spacing: .1em; }
  .menu-sup .grupo ul { position: static; min-width: 0; box-shadow: none; border: 0; border-left: 3px solid var(--celeste); margin: 0 0 8px 10px; padding: 0; }
  .menu-sup .grupo:hover > ul { display: none; }
  .menu-sup .grupo:focus-within, .menu-sup .grupo.abierto { flex-basis: 100%; }
  .menu-sup .grupo:focus-within > ul, .menu-sup .grupo.abierto > ul { display: block; }
}
@media (max-width: 760px) {
  .pasos-fab { grid-template-columns: minmax(0, 1fr); }
  .ficha .kit, .como-compras { padding: 14px; }
}
@media (max-width: 560px) {
  .a3 .posts, .tarjetas-lineas { grid-template-columns: minmax(0, 1fr); }
  .kit-tabla th:nth-child(3), .kit-tabla td:nth-child(3) { display: none; }
  /* En telefono cada opcion es una tarjeta: grafica arriba, plazo y total en una linea y "Cotizar" a todo el ancho
     (en tabla el boton quedaba fuera de la pantalla). */
  .kit-tabla thead { display: none; }
  .kit-tabla, .kit-tabla tbody { display: block; }
  .kit-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 12px; border-bottom: 1px solid #e2e2ee; }
  .kit-tabla td { display: block; padding: 0; border: 0; }
  .kit-tabla td:first-child { grid-column: 1 / -1; min-width: 0; }
  .kit-tabla td:nth-child(2) { grid-column: 1; }
  .kit-tabla td:nth-child(4) { grid-column: 2; text-align: right; }
  .kit-tabla td:nth-child(5) { grid-column: 1 / -1; }
  .kit-tabla td:nth-child(5) .btn { display: block; text-align: center; }
  .kit-tabla tr.es-mejor { background: #fffdea; }
  .ejemplo-kit img { flex-basis: 64px; width: 64px; height: 64px; }
  .tarjetas-lineas img { height: auto; max-height: 220px; }
  .a5 .col-centro > .post, .a5 .posts .post, .a5 .bloque-centro, .a5 .mas-articulos, .a5 .portada-tit { padding: 14px; }
}