/* ==========================================================================
   Data Center Perú — dirección visual "el mostrador del taller" (nov. 2026)
   Se carga después de styles.css en todas las páginas y define el aspecto común.
   - Marino sobrio para cabecera, títulos y pie; fondos gris aluminio y blanco.
   - Amarillo del letrero SOLO para la acción principal ("Agregar a mi cotización",
     botones .btn-amarillo), el menú activo y el contador. Los precios ya no van en amarillo.
   - Una sola familia: Archivo. Angosta (75–85 %) para títulos y precios, normal para texto.
   - Pocas cajas: divisores en vez de recuadros; tarjetas solo para productos.
   ========================================================================== */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo.woff2') format('woff2'); }

:root {
  --fuente: 'Archivo', 'Segoe UI', Roboto, system-ui, sans-serif;
  --rotulo: 'Archivo', 'Arial Narrow', sans-serif;
  --tinta: #14284A;
  --tinta-suave: #4B5B71;
  --marino-texto: #1E3A64;
  --vitrina: #EEF2F6;          /* gris aluminio: fondo de página */
  --linea: #D5DCE6;
  --placa: #F3F6F9;
  --chip: #E6ECF3;
  --chip-hover: #D6E0EC;
  --pocas: #B45309;
  --pocas-fondo: #FFF1E0;
  --radio-s: 6px;
  --radio-m: 8px;
  --radio-l: 12px;
}
@media (prefers-color-scheme: dark) {
  :root { --tinta: #E5ECF5; --tinta-suave: #A8B6C8; --vitrina: #0E1726; --linea: #2A3A52; --placa: #1A283E; --pocas: #FFB86B; --pocas-fondo: #3A2A12; }
}

body { font-family: var(--fuente); font-stretch: 100%; letter-spacing: 0; }
h1, h2, h3, .rotulo { font-family: var(--rotulo); font-stretch: 78%; font-weight: 700; letter-spacing: -.005em; }
h1 { line-height: 1.02; }

/* ------------------------------------------------------------- franja y cabecera */
.franja { background: #17304F; font-size: .8rem; }
.franja__fila { border-bottom: 0; }
.cabecera { background: var(--marino); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.marca__texto { font-family: var(--rotulo); font-stretch: 85%; font-weight: 700; font-size: 1.22rem; letter-spacing: .01em; }
.marca__texto small { font-family: var(--fuente); font-stretch: 100%; font-weight: 500; letter-spacing: .2em; }
.nav a { font-size: .95rem; font-weight: 500; color: #CBD7E6; }
.nav a[aria-current="page"] { font-weight: 600; }
.btn-cotizacion { border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--radio-m); font-weight: 600; }
.btn-cotizacion:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.btn-wa-cabecera { font-weight: 600; }

/* ------------------------------------------------------------- botones */
.btn-amarillo, .btn-whatsapp, .btn-secundario, .btn-primario, .btn-consultar { border-radius: var(--radio-m); font-weight: 600; min-height: 46px; letter-spacing: 0; }
.btn-amarillo { background: var(--amarillo); color: #14284A; box-shadow: none; }
.btn-amarillo:hover { background: #F5CD52; }
.btn-primario { background: var(--marino); color: #fff; border-radius: var(--radio-m); }
.btn-primario:hover { background: #2B4F80; }
.btn-secundario { background: var(--blanco); color: var(--marino-texto); border: 1.5px solid #B9C6D6; }
.btn-secundario:hover { border-color: var(--marino-texto); background: var(--blanco); }
.btn-texto { color: var(--marino-texto); font-weight: 600; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ------------------------------------------------------------- buscador */
.buscador { border: 1.5px solid #9FB0C6; border-radius: var(--radio-l); box-shadow: none; padding: .25rem .25rem .25rem .9rem; background: var(--blanco); }
.buscador:focus-within { border-color: var(--marino-texto); box-shadow: 0 0 0 4px rgba(30,58,100,.14); }
.buscador button { border-radius: var(--radio-m); font-weight: 600; }

/* ------------------------------------------------------------- cabecera de página (igual en todas) */
.cabecera-pagina, .cabecera-pagina--amarilla, .cabecera-pagina--pared, .cabecera-pagina--roble {
  background: var(--blanco); color: var(--tinta); border-bottom: 1px solid var(--linea); padding: 1.4rem 0 1.9rem;
}
.cabecera-pagina h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--marino-texto); letter-spacing: -.01em; }
.cabecera-pagina p, .cabecera-pagina--amarilla p, .cabecera-pagina--roble p { color: var(--tinta-suave); font-size: 1.05rem; max-width: 60ch; }
.cabecera-pagina .btn-texto--claro { color: var(--marino-texto); }
.cabecera-pagina .check--claro { color: var(--tinta); }
.migas { font-size: .85rem; color: var(--tinta-suave); margin-bottom: .9rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.migas a { color: var(--marino-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(30,58,100,.35); }
.migas a:hover { text-decoration-color: currentColor; }

/* secciones */
.bloque { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
.bloque--blanco { background: var(--blanco); }
.bloque__cabecera h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }

/* ------------------------------------------------------------- precio y estados (la "etiqueta de mostrador") */
.precio-etiqueta { background: none; box-shadow: none; padding: 0; color: var(--marino-texto); font-family: var(--rotulo); font-stretch: 85%; font-weight: 700; font-size: 1.4rem; line-height: 1.05; border-radius: 0; }
.precio-etiqueta small { font-size: .62em; font-weight: 600; margin-right: .08em; }
.precio-etiqueta--grande { font-size: 2.3rem; padding: 0; }
.estado { font-weight: 600; font-size: .76rem; padding: .18rem .55rem; }
.estado--pocas { background: var(--pocas-fondo); color: var(--pocas); }
.estado--servicio { background: var(--chip); color: var(--marino-texto); }

/* ------------------------------------------------------------- tarjeta de producto */
.productos { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (min-width: 1100px) { .productos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.producto { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: none; overflow: hidden; transition: border-color .15s; }
.producto:hover { border-color: #9FB0C6; }
.producto__foto { aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid var(--linea); }
.producto__foto img { padding: 9%; }
.producto__foto--placa { background: var(--placa); }
.producto__marca-foto { display: none; }
.placa { gap: .35rem; }
.placa__icono { width: 34px !important; height: 34px !important; }
.placa small { font-size: .78rem; }
.producto__cuerpo { padding: 1rem 1rem 1.05rem; gap: .55rem; }
.producto__nombre { font-size: 1rem; line-height: 1.35; -webkit-line-clamp: 3; color: var(--tinta); font-weight: 600; min-height: 4.05em; }
.producto__precio { margin-top: .1rem; }
.producto__precio .precio-etiqueta { font-size: 1.6rem; }
.producto .estado { align-self: flex-start; }
.producto__acciones { display: none; }
.producto__agregar { width: 100%; min-height: 46px; margin-top: .3rem; border-radius: var(--radio-m); border: 0; background: var(--amarillo); color: #14284A; font-weight: 700; font-size: .98rem; }
.producto__agregar:hover { background: #F5CD52; color: #14284A; }
.producto__agregar[data-en="1"] { background: var(--marino); color: #fff; }
.producto__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-top: .15rem; padding-top: .55rem; border-top: 1px solid var(--linea); }
.producto__wa { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; color: var(--whatsapp); font-weight: 600; font-size: .9rem; text-decoration: none; }
.producto__wa svg { width: 18px; height: 18px; fill: currentColor; }
.producto__wa:hover { text-decoration: underline; }
.producto__comparar { font-size: .88rem !important; }
.producto__codigo { font-size: .78rem; color: var(--tinta-suave); margin-bottom: -.25rem; }
.producto__pie .producto__comparar { margin-left: auto; }
.insignia { border-radius: var(--radio-s); font-weight: 700; }

/* ------------------------------------------------------------- categorías del catálogo: fila de textos */
.repisa { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.repisa__lista { grid-auto-columns: max-content; padding: .8rem 0; gap: .5rem; }
@media (min-width: 1100px) { .repisa__lista { grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; } }
.grupo { flex-direction: row; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .88rem; font-weight: 500; white-space: nowrap; min-height: 40px; }
.grupo::after { display: none; }
.grupo__icono { display: none; }
.grupo__cuenta { font-size: .8rem; }
.grupo:hover { border-color: var(--marino-texto); }
.grupo[aria-pressed="true"] { background: var(--marino); border-color: var(--marino); color: #fff; }
.grupo[aria-pressed="true"] .grupo__cuenta { color: #CBD7E6; }

/* filtros: columna limpia con divisores */
@media (min-width: 960px) { .filtros { position: sticky; top: 112px; align-self: start; } }
.filtros fieldset { border-top: 1px solid var(--linea); padding-top: .9rem; }
.filtros legend { font-weight: 600; color: var(--tinta); font-size: .88rem; padding-top: .9rem; }
.filtros select, .filtros input[type=number], #orden { border-radius: var(--radio-m); border: 1.5px solid #B9C6D6; min-height: 44px; }
.resultados__barra h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--marino-texto); }

/* ------------------------------------------------------------- pie (la silueta de la Cordillera queda solo en la portada) */
.pie { background: #14284A; margin-top: 0; padding-top: 2.6rem; }
.pie h2 { font-size: 1.05rem; color: #fff; }
.pie a { color: #DCE5F0; }

/* ------------------------------------------------------------- panel de cotización y detalle */
.panel__cabecera h2, .detalle__info h2 { font-family: var(--rotulo); font-stretch: 80%; font-weight: 700; }
.detalle__info h2 { font-size: 1.5rem; color: var(--marino-texto); }
.item__subtotal { font-family: var(--rotulo); font-stretch: 85%; font-size: 1.05rem; }
.total strong { font-family: var(--rotulo); font-stretch: 85%; font-size: 1.7rem; }

/* ------------------------------------------------------------- ficha de producto */
.ficha__info h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.ficha__mostrador { width: 100%; display: grid; gap: .6rem; padding: 1.1rem 1.2rem 1.2rem; background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--marino); border-radius: var(--radio-l); }
.ficha__mostrador .ficha__precio { font-size: 1rem; }
.ficha__datos { width: 100%; margin: 0; display: grid; grid-template-columns: minmax(8rem, auto) 1fr; border-top: 1px solid var(--linea); }
.ficha__datos dt, .ficha__datos dd { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--linea); font-size: .92rem; }
.ficha__datos dt { color: var(--tinta-suave); }
.ficha__datos dd { font-weight: 500; }
.ficha__datos .falta { color: var(--tinta-suave); font-weight: 400; font-style: italic; }
.ficha__rel a { border-radius: var(--radio-l); }
.ficha__rel strong { font-family: var(--rotulo); font-stretch: 85%; font-size: 1.05rem; }

/* contador y asistente: menos amarillo */
.fab-asistente { background: var(--blanco); color: var(--marino-texto); border: 1.5px solid #B9C6D6; box-shadow: 0 6px 20px rgba(20,40,74,.15); }
.migas { grid-column: 1 / -1; }
.migas [aria-current] { color: var(--tinta); }
.ficha__marca { margin: 0; font-size: .9rem; font-weight: 600; color: var(--tinta-suave); }
.ficha__desde { font-size: .95rem; color: var(--tinta-suave); margin-right: .2rem; }
.ficha__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .2rem 0 0; }
.ficha__acciones .producto__agregar { margin: 0; min-height: 48px; font-size: .98rem; }
@media (max-width: 420px) { .ficha__acciones { grid-template-columns: 1fr; } }
.ficha__info h2 { font-size: 1.35rem; margin-top: .8rem; }
.ficha__migas { padding-top: 1.1rem; margin-bottom: 0; }
.cabecera-pagina .buscador { border-color: #9FB0C6; max-width: 640px; }
.repisa { min-height: 66px; }

/* ------------------------------------------------------------- formularios: un solo estilo */
input[type=text], input[type=search]:not(.buscador input), input[type=number], input[type=tel], input[type=email], select, textarea {
  font: inherit; font-size: 1rem; color: var(--tinta); background: var(--blanco); border: 1.5px solid #B9C6D6; border-radius: var(--radio-m); min-height: 46px; padding: .55rem .75rem; }
textarea { min-height: 110px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--marino-texto); }
label { font-size: .95rem; }

/* ------------------------------------------------------------- tamaños de texto en celular */
@media (max-width: 640px) {
  body { font-size: 1.02rem; }
  .productos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
  .producto__cuerpo { padding: .8rem .75rem .9rem; gap: .45rem; }
  .producto__nombre { font-size: .95rem; }
  .producto__precio .precio-etiqueta { font-size: 1.4rem; }
  .producto__agregar { font-size: .95rem; }
  .producto__pie { gap: .1rem .6rem; }
  .grupo { font-size: .95rem; min-height: 44px; }
  .filtros legend, .filtros label { font-size: 1rem; }
  .menu-movil a { font-size: 1.15rem; }
  .pie { font-size: .98rem; }
  .pie__legal { font-size: .88rem; }
  .barra-app a, .barra-app button { font-size: .78rem; }
}
@media (max-width: 360px) { .productos { grid-template-columns: minmax(0, 1fr); } }

/* actualización del stock junto al conteo de resultados */
.resultados__actualizado { display: block; font-size: .85rem; color: var(--tinta-suave); }

/* ==================================================================== FASE 2: resto de páginas */
/* pasos (Servicio técnico, Empresas): línea de tiempo, sin cajas — sí es una secuencia */
.pasos { counter-reset: paso; gap: 0; }
.pasos li, .pasos--fila li { background: none; border: 0; border-radius: 0; padding: 0 0 1.2rem; position: relative; grid-template-columns: 2.4rem 1fr; align-items: start; }
.pasos li::before { width: 2.4rem; height: 2.4rem; background: var(--blanco); color: var(--marino-texto); border: 2px solid var(--marino-texto); font-family: var(--rotulo); font-stretch: 85%; font-weight: 700; font-size: 1.1rem; position: relative; z-index: 1; }
.pasos li:not(:last-child)::after { content: ''; position: absolute; left: calc(1.2rem - 1px); top: 2.4rem; bottom: 0; width: 2px; background: var(--linea); }
.pasos li > span { padding-top: .35rem; color: var(--tinta-suave); }
.pasos strong { display: block; color: var(--tinta); font-size: 1.05rem; }
@media (min-width: 860px) {
  .pasos--fila { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1.5rem; }
  .pasos--fila li { grid-template-columns: 1fr; gap: .8rem; padding: 0; }
  .pasos--fila li:not(:last-child)::after { left: 2.4rem; right: -1.5rem; top: calc(1.2rem - 1px); bottom: auto; width: auto; height: 2px; }
  .pasos--fila li > span { padding-top: 0; }
}

/* datos del servicio: columnas con regla superior, no tarjetas */
.info-servicio { gap: 1.5rem 2rem; margin-top: 2rem; }
.info-servicio__item { background: none; border: 0; border-top: 3px solid var(--marino-texto); border-radius: 0; padding: .9rem 0 0; }
.info-servicio__item h3 { font-size: 1.25rem; }
.info-servicio__item ul { padding-left: 1.1rem; display: grid; gap: .2rem; color: var(--tinta); }

/* lista de precios del taller: tabla legible */
.servicio__lista { border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; }
.servicio__lista li { padding: .9rem 1.1rem; font-size: 1rem; }
.servicio__lista li:nth-child(even) { background: var(--placa); }
.servicio__precio { font-family: var(--rotulo); font-stretch: 85%; font-size: 1.2rem; font-weight: 700; }
@media (min-width: 860px) { .servicio__lista { grid-template-columns: 1fr 1fr; } .servicio__lista li:nth-child(even) { background: none; } .servicio__lista li:nth-child(4n+1), .servicio__lista li:nth-child(4n+2) { background: var(--placa); } }

/* formulario del taller */
.problema { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); padding: 1.2rem 1.25rem; }
.problema label { font-size: .95rem; color: var(--tinta); font-weight: 600; }
.problema input, .problema select, .problema textarea { border: 1.5px solid #B9C6D6; border-radius: var(--radio-m); font-weight: 400; }
.problema__grid h2, .requisitos h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }

/* empresas: beneficios con regla superior */
.beneficios { gap: 1.5rem 2rem; }
.beneficios > div { border-top: 3px solid var(--marino-texto); padding-top: .9rem; }
.beneficios h3 { font-size: 1.25rem; }
.lista-check li::before { background: var(--ok-fondo); color: var(--ok); }

/* contacto: datos en una columna clara y mapa bajo pedido */
.ubicacion__datos h2 { font-family: var(--fuente); font-stretch: 100%; font-size: .85rem; font-weight: 600; color: var(--tinta-suave); margin: 1.4rem 0 .3rem; letter-spacing: 0; }
.ubicacion__datos h2:first-child { margin-top: 0; }
.ubicacion__dir { font-family: var(--rotulo); font-stretch: 80%; font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 700; color: var(--marino-texto); line-height: 1.1; margin-top: 0; }
.horario { margin: .4rem 0 0; }
.ubicacion__botones { margin-top: 1.5rem; }
.mapa { border-radius: var(--radio-l); background: var(--blanco); }

/* nosotros */
.nosotros__foto { border-radius: var(--radio-l); }
.datos-empresa { grid-template-columns: minmax(9rem, auto) 1fr; gap: 0; border-top: 1px solid var(--linea); }
.datos-empresa dt, .datos-empresa dd { padding: .7rem 0; border-bottom: 1px solid var(--linea); }

/* comparar: tabla con filas alternas */
.cmp__tabla-envoltura { border-radius: var(--radio-l); }
.cmp tbody tr:nth-child(odd) { background: var(--placa); }
.cmp tbody th { font-weight: 600; color: var(--tinta); }
.cmp__cabeza .producto__nombre { font-weight: 600; }
.cmp__insignia { background: var(--ok-fondo); color: var(--ok); }

/* privacidad */
.texto-legal h2 { font-size: 1.45rem; margin-top: 2rem; }
.texto-legal ul { color: var(--tinta-suave); padding-left: 1.2rem; display: grid; gap: .25rem; }

/* panel de cotización */
.panel__cabecera h2 { font-size: 1.6rem; }
.como-funciona { color: var(--tinta-suave); }
.item { padding: .8rem 0; }
.item__nombre { font-weight: 600; font-size: .95rem; }
.cantidad button { border-radius: var(--radio-s); }
.panel__pie { background: var(--placa); }
.texto-legal { margin-left: 0; margin-right: auto; }
.repisa { min-height: 67px; }
@media (max-width: 640px) { .repisa { min-height: 71px; } }