/* Altagráfica 2026: la plantilla de altagrafica.cl de 2010, refrescada.
   De 2010 vienen la hoja blanca a todo el ancho, la cabecera con la mano y el collage de
   productos, los bloques de menu con titulo gris en versalitas espaciadas, los titulos en azul
   petroleo (#0c3945 y #1b7d98), la letra Arial, las fotos enmarcadas en gris, el "Leer mas"
   gris, el "Contactanos" rojo con su franja de colores y el boton "Enviar" negro redondo.
   sitio.css es el del motor (el sitio 2026 de Soporte Publicitario) y trae los componentes de
   catalogo, ficha, precios y formularios; esta hoja va despues y pone la plantilla de Altagráfica.

   Los nombres de los colores son los del motor:
     --azul      el azul del cuadro "AG" del logotipo: botones y precios
     --naranja   el acento: el azul petroleo de los enlaces de 2010 (barras, migas, descuentos)
     --celeste   enlaces (2010: #1b7d98; al pasar el cursor, #23a4c7)
     --titulo    titulos de articulo (2010: #0c3945) */
:root {
  --azul: #313272; --azul-hover: #46489a;
  --naranja: #1b7d98; --amarillo: #23a4c7; --sobre-naranja: #fff; --naranja-rotulo: #1b7d98;
  --celeste: #1b7d98; --titulo: #0c3945; --precio: #313272; --iva: #c00;
  --texto: #242c2e; --suave: #59686c; --gris: #f3f3f3; --borde: #d6d6d6; --pizarra: #f3f3f3;
  --sobre-azul: #e9e9f7; --sobre-pizarra-suave: #59686c;
  --rojo2010: #e8090a; --rojo-club: #c53c35; --lavanda: #b7b7cf; --marco: #c7c7c7;
}
body { background: #fff; font: 15px/1.55 Arial, Helvetica, system-ui, sans-serif; color: var(--texto); }
h1, h2 { color: var(--titulo); font-weight: 400; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.3rem; }
h3 { color: #343f42; }
a { color: var(--celeste); }
a:hover { color: #23a4c7; }
:focus-visible { outline-color: #23a4c7; }
.ancho { max-width: 1280px; margin: 0 auto; padding-inline: 20px; }

/* ── Cabecera: la de 2010 ─────────────────────────────────────────────────────
   La mano a la izquierda; a la derecha los enlaces, la bienvenida y los valores (antes iban
   incrustados en la imagen) y, abajo, el collage de productos con el logo "AG". */
.cab-fila { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "logo textos" "logo collage"; column-gap: 22px; align-items: end; padding-top: 12px; }
.cab2010 .logo { grid-area: logo; align-self: center; }
.logo-mano { display: block; width: 190px; height: auto; }
.cab-der { grid-area: textos; min-width: 0; }
.collage { grid-area: collage; display: block; }
.collage img { display: block; width: 100%; max-width: 1010px; height: auto; }
.enlaces ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 18px; }
.enlaces a { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: #595959; text-decoration: none; }
.enlaces a:hover, .enlaces a[aria-current] { color: var(--celeste); }
.enlaces a[aria-current] { font-weight: 700; }
.bienvenida { margin: 6px 0 0; font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: #6f6f6f; }
/* Los valores flotan a distintas alturas, como en la cabecera de 2010. */
.valores-cab { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 4px 0 0; font-size: 1.2rem; color: #b9b9b9; }
.valores-cab li:nth-child(3n + 1) { transform: translateY(8px); }
.valores-cab li:nth-child(3n + 2) { transform: translateY(-2px); }

/* La franja de colores de los avisos de 2010: barras finas de todo el espectro. */
.colores, .colores2010 { display: block; height: 7px; background:
  repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 5px, rgb(255 255 255 / .5) 5px 6px),
  linear-gradient(90deg, #0076b9, #003d97 9%, #00066f 17%, #400054 25%, #98004d 33%, #c50628 41%, #d00000 49%, #ef8a00 58%, #f7ce1c 66%, #f5e509 72%, #d0ee41 80%, #64bd25 89%, #09a424); }
.colores { height: 6px; margin-top: 8px; }

/* Barra bajo la cabecera: el buscador y el contacto (telefono, WhatsApp y formulario). */
.barra { background: linear-gradient(#fafafa, #e3e3e3); border-bottom: 1px solid #d0d0d0; }
.barra-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 10px; }
.barra .buscador { flex: 1 1 380px; max-width: 600px; }
.buscador input { border-color: #8f8f8f; border-right: 0; }
.buscador button { border-color: var(--azul); }
.contactos.en-barra { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: .875rem; }
.contactos.en-barra .c-fono a { font-size: 1rem; font-weight: 700; }
.ir-menu { display: none; font-size: .875rem; font-weight: 700; }

/* ── Tres columnas, como en 2010: menu, contenido y contacto ─────────────── */
.columnas { display: grid; grid-template-columns: 230px minmax(0, 1fr) 262px; grid-template-areas: "izq centro der"; gap: 26px; padding-block: 22px 44px; }
.col-centro { grid-area: centro; min-width: 0; }
.col-izq { grid-area: izq; min-width: 0; }
.col-der { grid-area: der; min-width: 0; }
.col-centro > section, .col-centro > article { margin-bottom: 32px; }

/* Bloques con titulo gris en versalitas espaciadas (los "moduletable" de 2010). */
.bloque { background: #fff; border: 1px solid #dadada; border-radius: 3px; margin-bottom: 18px; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.bloque-tit { margin: 0; padding: 7px 10px 6px; background: linear-gradient(#fcfcfc, #dcdcdc); border-bottom: 1px solid #cdcdcd; border-radius: 3px 3px 0 0;
  font: 400 .875rem/1.2 Arial, Helvetica, sans-serif; font-variant: small-caps; letter-spacing: .22em; color: #111; }
.bloque-cuerpo { padding: 10px 12px 12px; }
.lista2010 { padding: 8px 10px 10px; }
.lista2010 li { position: relative; padding: 2px 0 2px 12px; }
.lista2010 li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 4px; height: 4px; background: #9fb2b6; }
.lista2010 a { color: #555; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; }
.lista2010 a:hover, .lista2010 a[aria-current] { color: #23a4c7; }
.lista2010 a[aria-current], .lista2010 .en-rama > a { font-weight: 700; }
.lista2010 .n { font-weight: 400; }
.arbol ul { padding: 2px 0 2px 4px; }
.arbol ul li::before { width: 3px; height: 3px; background: #c2cfd2; }
.arbol ul a { text-transform: none; font-size: .8rem; }

/* Columna derecha: "Contactanos" en rojo, "Cotiza aqui" y el Club. */
.rojo2010 { margin: 0; font: 400 2.15rem/1.05 Arial, Helvetica, sans-serif; color: var(--rojo2010); letter-spacing: -.01em; }
.contactanos .colores2010 { margin: 4px 0 12px; }
.contacto2010 li { margin-bottom: 9px; }
.contacto2010 a { display: block; color: #3b3b3b; text-decoration: none; font-size: .875rem; line-height: 1.3; }
.contacto2010 b { display: block; font-size: .875rem; text-transform: uppercase; letter-spacing: .02em; color: #333; }
.contacto2010 a:hover b { color: var(--celeste); }
.horario2010 { margin: 2px 0 0; padding-top: 9px; border-top: 1px solid #e2e2e2; font-size: .8125rem; line-height: 1.35; color: #3b3b3b; }
.horario2010 b { display: block; font-size: .875rem; text-transform: uppercase; letter-spacing: .02em; color: #333; }
.horario2010 .hor, .pie-horario .hor, .datos .hor { display: block; }
.datos .horas { display: inline-block; vertical-align: top; text-indent: 0; }
.cotiza-sub { margin: 0 0 8px; font-size: 1.1rem; color: var(--titulo); }
.formulario.compacto { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.formulario.compacto .mitad { grid-column: 1 / -1; }
.formulario.compacto .campo label { font-size: .78rem; margin-bottom: 2px; }
.formulario.compacto .campo input, .formulario.compacto .campo textarea { padding: 7px 9px; font-size: .875rem; border-color: #b9b9b9; border-radius: 3px; }
/* El "Enviar" negro y redondo de 2010. */
.formulario .btn { min-width: 140px; border-radius: 999px; background: #2b2b2b; }
.formulario .btn:hover { background: #000; }
.club2010 { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 12px 14px; text-decoration: none; text-align: center; }
.club2010 img { width: 150px; height: auto; }
.club-boton { padding: 3px 12px; border: 2px solid var(--azul); border-radius: 6px; color: var(--azul); font-weight: 700; font-size: .95rem; }
.club2010 .colores2010 { align-self: stretch; }
.club-rojo { align-self: flex-start; color: var(--rojo-club); font-weight: 700; text-transform: uppercase; text-align: left; line-height: 1.25; letter-spacing: .02em; }
.club2010:hover .club-boton { background: var(--azul); color: #fff; }

/* ── Contenido: los articulos de 2010 ─────────────────────────────────────── */
.migas ol { font-size: .78rem; }
.migas li + li::before { content: "▸"; color: var(--celeste); }
.post-tit { margin: 0 0 .35em; font-size: 1.5rem; font-weight: 400; line-height: 1.2; color: var(--titulo); }
.post-tit a { color: inherit; text-decoration: none; }
.post-tit a:hover { color: #23a4c7; }
.post-tit.grande { font-size: 2rem; }
.post-tit.grande span { color: #1b7d98; }
.portada-tit .intro { max-width: none; }
.post p { margin: 0 0 .7em; }
.post-foto { display: block; margin: 6px 0 12px; }
.post-foto img { display: block; max-width: 100%; height: auto; padding: 6px; background: #fff; border: 1px solid var(--marco); }
.post.destacado .post-foto img { max-height: 330px; width: auto; }
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 30px; }
.posts .post { margin-bottom: 26px; }
.posts .post-foto img { width: 100%; height: 190px; object-fit: contain; }
.leer { margin: 0; }
/* El "Leer mas" gris de 2010. */
.leer-mas { display: inline-block; padding: 3px 12px; font-size: .78rem; color: #444; text-decoration: none; background: linear-gradient(#fdfdfd, #dadada); border: 1px solid #b9b9b9; border-radius: 3px; }
.leer-mas:hover { color: #000; border-color: #8f8f8f; }
.mas-articulos h2 { margin-bottom: .4em; font-size: 1rem; font-weight: 700; color: #333; }
.mas-articulos li { padding: 2px 0 2px 16px; position: relative; }
.mas-articulos li::before { content: "▸"; position: absolute; left: 2px; color: var(--celeste); }
.mas-articulos a { color: #333; text-decoration: none; }
.mas-articulos a:hover { color: #23a4c7; }
.bloque-centro { border-top: 1px solid #e2e2e2; padding-top: 18px; }
.secciones-lista { columns: 2; column-gap: 30px; }
.secciones-lista li { break-inside: avoid; padding: 3px 0; border-bottom: 1px dotted #d9d9d9; }
.secciones-lista a { color: #3b3b3b; text-decoration: none; text-transform: uppercase; font-size: .8125rem; letter-spacing: .02em; }
.secciones-lista a:hover { color: #23a4c7; }

/* Catalogo y fichas con la plantilla: fotos enmarcadas, titulos en azul petroleo. */
.grilla { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.prod { border-color: #dadada; border-radius: 3px; }
.prod:hover { border-color: #a9c7cf; }
.prod-foto img { padding: 5px; background: #fff; border: 1px solid var(--marco); }
.prod h3 a { color: var(--titulo); }
.secciones a { border-radius: 3px; }
.secciones img { padding: 5px; border: 1px solid var(--marco); }
.sec-tit { color: var(--titulo); }
.subcats a { border-radius: 3px; }
.ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.foto-principal img { border-radius: 3px; border-color: var(--marco); }
.resumen h1, .resumen h1 a { color: var(--titulo); font-size: 1.45rem; }
.caja-precio { border-radius: 3px; }
.heroe-txt { border-radius: 4px; background-image: radial-gradient(circle at 100% 0, rgb(183 183 207 / .55) 0, rgb(183 183 207 / 0) 48%); }
.heroe.club .heroe-txt .btn { background: #fff; color: var(--azul); }
.heroe.club .heroe-txt .btn:hover { background: var(--lavanda); color: var(--azul); }
.veinte, .beneficios > li, .valores div, .cuentas { border-radius: 3px; }
.col-centro .contacto { grid-template-columns: minmax(0, 1fr); }
.texto h2 { color: var(--titulo); }

/* Lista de precios: los trabajos de impresion no tienen foto, asi que sus listados van en filas,
   con nombre, disponibilidad y codigo, Precio Socio, Precio Directo y precio por volumen en columnas. */
.grilla.lista { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--borde); }
.lista .prod { flex-direction: row; align-items: center; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; }
.lista .prod:nth-child(even) { background: #f6f6f6; }
.lista .prod:hover { box-shadow: none; }
.lista .prod-foto { display: none; }
.lista .prod-info { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 16px; row-gap: 4px; align-items: start; }
.lista .prod-info > * { grid-row: 2; margin: 0; }
.lista .prod h3 { grid-column: 1 / -1; grid-row: 1; font-weight: 600; }
.lista .prod-meta { grid-column: 1; flex-direction: column; gap: 0; }
.lista .prod-info .precio, .lista .desde { text-align: right; font-variant-numeric: tabular-nums; }
.lista .prod-info .precio.socio { grid-column: 2; margin-top: 0; }
.lista .prod-info .precio.directo { grid-column: 3; }
.lista .prod-info .precio.directo .rotulo { display: block; }
.lista .prod-info .precio b { font-size: 1rem; }
.lista .prod-info .precio.directo b { font-size: .9375rem; }
.lista .desde { grid-column: 4; max-width: 132px; }

/* Ficha de un trabajo de impresion: la foto del proceso, con su nota. */
.foto-proceso { margin: 0; }
.foto-proceso img { display: block; width: 100%; height: auto; padding: 6px; background: #fff; border: 1px solid var(--marco); }
.foto-proceso figcaption { margin-top: 6px; font-size: .8125rem; color: var(--suave); }
/* Ficha: el producto con su grafica impresa. */
.con-impresion { margin: 14px 0; padding: 12px 16px; background: #f2f2f8; border-left: 5px solid var(--azul); border-radius: 3px; font-size: .9375rem; }
.con-impresion b { color: var(--azul); }
.con-impresion strong { font-size: 1.15rem; color: var(--azul); white-space: nowrap; }
.con-impresion .btn { margin: 6px 0 0 4px; vertical-align: middle; }
/* Contacto con un producto elegido: "Vas a cotizar" (producto, grafica y total impreso) sobre el formulario. */
.cotizando { margin: 0 0 18px; padding: 14px 16px; background: #f2f2f8; border-left: 5px solid var(--azul); border-radius: 4px; }
.cotizando .rotulo { margin: 0 0 8px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.cot-prod { display: flex; gap: 12px; align-items: center; color: var(--texto); text-decoration: none; }
.cot-prod img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 3px; }
.cot-prod b { display: block; color: var(--azul); }
.cotizando .cod { display: block; font-size: .75rem; color: var(--suave); }
.cot-imp { margin: 10px 0 0; }
.cot-total { margin: 8px 0 0; }
.cot-total strong { font-size: 1.25rem; color: var(--azul); }
/* Fabrica: la foto del trabajo a pedido, con su credito. */
.trabajo-foto { margin: 0 0 1.2em; }
.trabajo-foto img { display: block; max-width: min(100%, 560px); max-height: 420px; width: auto; height: auto; padding: 6px; background: #fff; border: 1px solid var(--marco); }
.trabajo-foto figcaption { margin-top: 6px; font-size: .8125rem; color: var(--suave); }
.trabajo-foto figcaption a { color: inherit; }

/* ── Pie: claro, como el de 2010 ──────────────────────────────────────────── */
.pie2010 { background: linear-gradient(#f7f7f7, #e8e8e8); border-top: 1px solid #d4d4d4; color: #5f7377; font-size: .8125rem; }
.pie-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 18px 28px; padding-block: 26px 92px; }
.pie2010 h2 { margin: 0 0 .5em; font: 400 .875rem Arial, Helvetica, sans-serif; font-variant: small-caps; letter-spacing: .2em; color: #111; }
.pie2010 li { padding: 2px 0; }
.pie2010 .pie-col ul { columns: auto; }
.pie2010 a { color: #125264; text-decoration: none; }
.pie2010 a:hover { color: #1b7d98; text-decoration: underline; }
.pie2010 address { margin-bottom: 6px; }
.pie-horario { margin: 0 0 8px; color: #555; }
.pie2010 .contactos a { color: #125264; }
.pie-legal { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid #d4d4d4; color: #799096; }
.pie2010 .maquinas a { color: #799096; text-decoration: underline; }

/* ── Pantallas mas angostas ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* El contacto pasa bajo el contenido. */
  .columnas { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "izq centro" "izq der"; }
  .col-der { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; align-items: start; }
  .pie-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cab-fila { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "logo textos" "collage collage"; column-gap: 14px; }
  .logo-mano { width: 92px; }
  .enlaces ul { justify-content: flex-start; gap: 2px 12px; }
  .enlaces a { font-size: .68rem; letter-spacing: .06em; }
  .bienvenida { font-size: 1.05rem; }
  .valores-cab { gap: 0 10px; font-size: .8125rem; }
  .valores-cab li { transform: none !important; }
  .collage { margin-top: 8px; }
  .columnas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "centro" "der" "izq"; gap: 10px; padding-block: 16px 30px; }
  .ir-menu { display: inline; }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .lista .desde { display: none; }
}
@media (max-width: 560px) {
  .ancho { padding-inline: 14px; }
  h1, .post-tit.grande { font-size: 1.45rem; }
  .post-tit { font-size: 1.25rem; }
  .posts { grid-template-columns: minmax(0, 1fr); }
  .posts .post-foto img { height: auto; max-height: 220px; }
  .secciones-lista { columns: 1; }
  .contactos.en-barra { gap: 2px 14px; font-size: .8125rem; }
  .contactos.en-barra .c-form { order: 3; }
  .grilla:not(.lista) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista .prod-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  .lista .prod-meta { grid-column: 1 / -1; flex-direction: row; gap: 4px 10px; }
  .lista .prod-info .precio.socio { grid-column: 1; grid-row: 3; text-align: left; }
  .lista .prod-info .precio.directo { grid-column: 2; grid-row: 3; text-align: left; }
  .pie-fila { grid-template-columns: minmax(0, 1fr); }
}