/* ==========================================================================
   CMS Chema — estilos del sitio público (CSS3 nativo, sin dependencias)
   Reconstruido a partir del diseño original (paleta y fuente reales).
   Medidas en rem con base 10px.
   ========================================================================== */

/* --- Fuente real del sitio: Source Sans Pro (archivos locales) --- */
@font-face {
    font-family: "Source Sans Pro";
    src: url("/assets/font/sourcesanspro-regular-webfont.woff2") format("woff2"),
         url("/assets/font/sourcesanspro-regular-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/assets/font/sourcesanspro-bold-webfont.woff2") format("woff2"),
         url("/assets/font/sourcesanspro-bold-webfont.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --primario: #ff710a;
    --primario-claro: #f7ac6d;
    --primario-oscuro: #e35f00;
    --primario-mas-oscuro: #993300;
    --gris-900: #2b2b2b;
    --gris-700: #4c4c4c;
    --gris-500: #727272;
    --gris-300: #cccccc;
    --gris-200: #e6e6e6;
    --gris-100: #efefef;
    --gris-50: #f6f6f6;
    --blanco: #ffffff;
    --fuente: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --ancho: 120rem;
}

html { font-size: 62.5%; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--fuente);
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--gris-700);
    background: var(--blanco);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.6rem; }

/* Texto que solo leen los lectores de pantalla (y los buscadores): p. ej. el
   <h1> de la portada, cuyo diseño no lleva título visible. */
.visualmente-oculto {
    position: absolute; width: 0.1rem; height: 0.1rem;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Migas de pan: ruta hasta la página. Google la enseña bajo el resultado. */
.migas { margin-bottom: 1.6rem; font-size: 1.4rem; color: var(--gris-500); }
.migas__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; list-style: none; }
.migas__paso { display: flex; align-items: center; gap: 0.6rem; }
.migas__paso + .migas__paso::before { content: "›"; color: var(--gris-300); }
.migas a:hover { color: var(--primario); }
.migas [aria-current="page"] { color: var(--gris-700); font-weight: 700; }

/* ==========================================================================
   CABECERA (con curva "swoosh" y menú integrado a la derecha)
   ========================================================================== */
/* La cabecera ES la imagen bg-header.png (naranja + onda + transparencia): así se
   respetan exactamente la forma, el tamaño y la transparencia de la onda original.
   El logo y el menú van superpuestos sobre la zona naranja. */
.cabecera {
    position: relative;
    z-index: 3;
    color: var(--blanco);
}
.cabecera__onda {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}
.cabecera__inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--ancho);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.6rem 1.6rem 0;
}

.logo { flex: 0 0 auto; }
/* El logo monta sobre la onda: el eslogan queda por debajo de la curva,
   sobre la foto, como en el original. */
.logo img {
    height: 7.4vw;          /* ≈67% del alto de la cabecera, como el original */
    min-height: 6.5rem;
    max-height: 15rem;
    width: auto;
}

.cabecera__derecha {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
}
.cabecera__contacto { display: flex; align-items: center; gap: 1.4rem; }

.redes { display: flex; gap: 0.8rem; }
.redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.15s ease;
}
.redes a:hover { background: rgba(255, 255, 255, 0.4); }
.redes svg { width: 1.6rem; height: 1.6rem; fill: var(--blanco); }

.telefono {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--blanco);
    white-space: nowrap;
}
.telefono svg { width: 2rem; height: 2rem; fill: var(--blanco); }

/* --- Navegación principal (botones redondeados, estilo original) --- */
.menu__lista { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.menu__lista a {
    display: block;
    padding: 0.7rem 1.3rem;
    color: var(--blanco);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    border-radius: 0.8rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.menu__lista a:hover,
.menu__lista .activo a { background: var(--blanco); color: var(--primario); }

.menu__toggle { display: none; }

/* Curva naranja→blanca bajo la cabecera */
/* La curva se superpone al contenido de abajo (hero): su zona transparente deja
   ver el banner; su zona naranja continúa la cabecera. */

/* ==========================================================================
   HERO / SLIDER
   ========================================================================== */
.hero {
    position: relative;
    background: var(--gris-200);
    overflow: hidden;
    /* Alto del banner base (2000×520) a cualquier ancho, como el original. */
    height: max(52rem, 26vw);
    /* La foto sube por detrás de la onda: la zona transparente de bg-header.png
       llega hasta el 36.8% de su altura (≈4.05vw), así no queda franja blanca. */
    margin-top: -4.2vw;
}
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transition: opacity 0.8s ease-in-out; }   /* crossfade suave */
.hero__slide.activo { opacity: 1; z-index: 1; }
.hero__slide img {
    position: absolute;
    left: 50%;
    bottom: 0;                /* anclada abajo: la franja inferior nunca se corta */
    transform: translateX(-50%);
    width: 100%;
    min-width: 200rem;        /* los banners están diseñados a 2000px de ancho */
    height: auto;
    max-width: none;
}
/* Banner con enlace: el <a> ocupa todo el slide para que la imagen siga igual. */
.hero__enlace { position: absolute; inset: 0; display: block; }
.hero__buscador, .hero__dots { z-index: 2; }

/* Banner superior de páginas internas (sube tras la onda, como el hero) */
.banner-interna {
    position: relative;
    overflow: hidden;
    height: max(30rem, 22vw);
    margin-top: -4.2vw;
    background: var(--gris-200);
}
.banner-interna img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    min-width: 140rem;
    height: auto;
    max-width: none;
}

.hero__buscador {
    position: absolute;
    right: 2.4rem;
    bottom: 2.4rem;
    display: flex;
    width: min(38rem, 70%);
    background: var(--blanco);
    border-radius: 3rem;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.hero__buscador input {
    flex: 1;
    border: 0;
    padding: 1.2rem 1.8rem;
    font-size: 1.5rem;
    font-family: inherit;
    outline: none;
}
.hero__buscador button {
    border: 0;
    width: 4.6rem;
    background: var(--primario);
    color: var(--blanco);
    cursor: pointer;
    font-size: 1.8rem;
}

.hero__dots {
    position: absolute;
    left: 50%;
    bottom: 1.8rem;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
}
.hero__dots button {
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    border: 0;
    background: #d3d3d3;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}
.hero__dots button:hover { background: var(--primario-claro); }
.hero__dots button.activo { background: var(--primario); }

/* ==========================================================================
   CATEGORÍAS (franja de íconos)
   ========================================================================== */
.categorias { background: var(--gris-100); padding: 3.2rem 0; }
.categorias__lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.categoria-item { text-align: center; text-decoration: none; display: block; }

/* Ángulo animable para el barrido cónico (relleno "como agujas del reloj") */
@property --ang-categoria {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.categoria-item__icono {
    position: relative;
    width: 12rem; height: 12rem;
    border-radius: 50%;
    background: #cfcfcf;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.4rem;
    overflow: hidden;
    transition: transform 0.2s ease;
}
/* Relleno naranja que barre el círculo en sentido horario al hacer hover */
.categoria-item__icono::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--primario) var(--ang-categoria), transparent 0deg);
    /* Sin transición aquí: al salir el mouse el relleno vuelve a 0° al instante,
       así nunca quedan dos círculos sombreados a la vez. */
}
.categoria-item__icono img {
    position: relative;
    z-index: 1;
    width: 6rem; height: 6rem;
    filter: brightness(0) invert(1);   /* ícono siempre blanco */
}
.categoria-item:hover .categoria-item__icono { transform: translateY(-0.4rem); }
.categoria-item:hover .categoria-item__icono::before {
    --ang-categoria: 360deg;
    transition: --ang-categoria 0.6s ease;   /* solo anima al entrar */
}
.categoria-item__texto {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gris-500);
    letter-spacing: 0.05rem;
}
.categoria-item:hover .categoria-item__texto { color: var(--primario); }

/* ==========================================================================
   ESTAMOS EN (red de ferreterías + cadenas)
   ========================================================================== */
.estamos { padding: 3.2rem 0; }
.estamos__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
}
.estamos__titulo {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.4rem;
    color: var(--gris-500);
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s ease;
}
.estamos__titulo:hover { color: var(--primario); }
.peru-mapa {
    display: inline-block; flex: 0 0 auto;
    width: 5rem; height: 7rem;
    background: url("/assets/image/icon-peru-footer.png") no-repeat left top;
    transition: background-position 0.15s ease;
}
.estamos__titulo:hover .peru-mapa { background-position: left bottom; }
.estamos__logos { display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap; }
.estamos__logos img { height: 3.6rem; width: auto; filter: grayscale(100%); opacity: 0.8; }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie { margin-top: auto; }
.pie__nav { background: var(--primario); }
.pie__nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: var(--ancho);
    margin: 0 auto;
}
.pie__nav a {
    display: block;
    padding: 1.6rem 2rem;
    color: var(--blanco);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.4rem;
}
.pie__nav a:hover { background: rgba(0, 0, 0, 0.15); }
.pie__legal {
    background: var(--gris-900);
    color: var(--gris-300);
    text-align: center;
    padding: 1.6rem;
    font-size: 1.3rem;
}

/* ==========================================================================
   CATÁLOGO (listado + ficha de producto)
   ========================================================================== */
.listado { padding: 3.2rem 0 5rem; }
.listado__titulo { font-size: 2.8rem; color: var(--gris-900); text-transform: uppercase; }
.listado__conteo { color: var(--gris-500); margin: 0.4rem 0 2.4rem; }
.listado__vacio { color: var(--gris-500); padding: 3rem 0; }

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 2rem;
}
.producto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 0.1rem solid var(--gris-200);
    border-radius: 0.8rem;
    padding: 1.6rem;
    background: var(--blanco);
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.producto-card:hover { box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.12); transform: translateY(-0.3rem); }
.producto-card__img {
    display: flex; align-items: center; justify-content: center;
    height: 16rem; margin-bottom: 1.2rem;
}
.producto-card__img img { max-height: 16rem; max-width: 100%; width: auto; object-fit: contain; }
.producto-card__nombre { font-size: 1.7rem; color: var(--gris-900); margin-bottom: 0.4rem; }
.producto-card__lema { font-size: 1.4rem; color: var(--gris-500); flex: 1; }
.producto-card__ver {
    margin-top: 1.2rem; align-self: center;
    background: var(--primario); color: var(--blanco);
    font-weight: 700; font-size: 1.3rem; text-transform: uppercase;
    padding: 0.8rem 1.6rem; border-radius: 0.6rem;
}
.producto-card:hover .producto-card__ver { background: var(--primario-oscuro); }
.etiqueta-nuevo {
    position: absolute; top: 1rem; right: 1rem;
    background: var(--primario); color: var(--blanco);
    font-size: 1.1rem; font-weight: 700; text-transform: uppercase;
    padding: 0.3rem 0.8rem; border-radius: 0.4rem;
}
/* Insignia "Nuevo" en línea (lista por filas), no absoluta. */
.tag-nuevo {
    display: inline-block; vertical-align: middle; margin-left: 0.8rem;
    background: var(--primario); color: var(--blanco);
    font-size: 1.1rem; font-weight: 700; text-transform: uppercase;
    padding: 0.2rem 0.7rem; border-radius: 0.4rem;
}

.paginacion { display: flex; gap: 0.6rem; justify-content: center; margin-top: 3.2rem; flex-wrap: wrap; }
.paginacion a {
    min-width: 3.6rem; text-align: center;
    padding: 0.8rem 1rem; border: 0.1rem solid var(--gris-300);
    border-radius: 0.6rem; color: var(--gris-700); font-weight: 700;
}
.paginacion a:hover { border-color: var(--primario); color: var(--primario); }
.paginacion a.activo { background: var(--primario); color: var(--blanco); border-color: var(--primario); }

.ficha { padding: 3.2rem 0 5rem; }
/* "Volver" va arriba a la derecha, como en el original. */
.ficha__volver {
    display: inline-flex; align-items: center; gap: 0.8rem; float: right;
    color: var(--gris-500); font-size: 1.4rem; margin-bottom: 1.6rem;
}
.ficha__volver:hover { color: var(--primario); }
.ficha__volver-flecha {
    width: 0; height: 0; flex: 0 0 auto;
    border-top: 0.7rem solid transparent; border-bottom: 0.7rem solid transparent;
    border-right: 1.1rem solid var(--gris-300);
}
.ficha__volver:hover .ficha__volver-flecha { border-right-color: var(--primario); }

.ficha__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.2rem; align-items: start; clear: both; }
/* Caja blanca con borde: las fotos de producto llevan fondo blanco, así que
   sobre gris quedaban como un recuadro flotando. */
.ficha__caja { border: 0.1rem solid var(--gris-200); }
.ficha__media {
    display: flex; align-items: center; justify-content: center;
    background: var(--blanco); padding: 2.4rem; min-height: 34rem;
}
.ficha__media img { max-height: 32rem; width: auto; object-fit: contain; }
.ficha__descargas { display: flex; border-top: 0.1rem solid var(--gris-200); background: var(--gris-50); }
.ficha__pdf {
    flex: 1 1 0; display: inline-flex; align-items: center; gap: 0.8rem;
    padding: 1.2rem 1.6rem; color: var(--gris-500); font-size: 1.3rem;
    text-transform: uppercase; border-right: 0.1rem solid var(--gris-200);
}
.ficha__pdf:last-child { border-right: 0; }
.ficha__pdf:hover { color: var(--primario); }
.ficha__pdf-icono {
    flex: 0 0 auto; font-size: 0.9rem; font-weight: 700; line-height: 1;
    color: var(--blanco); background: var(--gris-500);
    padding: 0.4rem 0.3rem; border-radius: 0.2rem;
}
.ficha__pdf:hover .ficha__pdf-icono { background: var(--primario); }
.ficha__pdf--video .ficha__pdf-icono { padding: 0.4rem 0.5rem; }

.ficha__nombre { font-size: 2.8rem; color: var(--primario); text-transform: uppercase; line-height: 1.2; }
.ficha__sub { font-size: 1.6rem; color: var(--gris-900); margin: 2.4rem 0 0.8rem; }
.ficha__desc { color: var(--gris-700); line-height: 1.7; }

.ficha__donde { display: flex; align-items: center; gap: 3.2rem; flex-wrap: wrap; }
.ficha__ferreterias { display: inline-flex; align-items: center; gap: 1.2rem; }
.ficha__ferreterias-texto {
    display: flex; flex-direction: column; font-size: 1.1rem;
    color: var(--gris-500); text-transform: uppercase; line-height: 1.2;
}
.ficha__ferreterias-texto strong { color: var(--primario); font-size: 1.4rem; }
.ficha__ferreterias:hover .peru-mapa { background-position: left bottom; }
.ficha__cadenas { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.ficha__cadenas img { height: 3.4rem; filter: grayscale(100%); opacity: 0.8; }

.ficha__relacionados-titulo { font-size: 1.8rem; color: var(--gris-900); margin: 4rem 0 2rem; text-transform: uppercase; }
/* Relacionados: carrusel de 5 visibles con flechas, como el original. */
.relacionados { display: flex; align-items: center; gap: 1.2rem; }
.relacionados__flecha {
    flex: 0 0 auto; width: 2.4rem; height: 4.4rem; border: 0; cursor: pointer;
    background: url("/assets/image/arrow-productos-left.png") no-repeat center / contain;
    transition: opacity 0.2s ease;
}
.relacionados__flecha--der { background-image: url("/assets/image/arrow-productos-right.png"); }
.relacionados__flecha:disabled { opacity: 0.25; cursor: default; }
.relacionados__pista {
    display: flex; gap: 2.4rem; flex: 1 1 auto;
    overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.relacionados__pista::-webkit-scrollbar { display: none; }
.relacionado {
    flex: 0 0 calc((100% - 4 * 2.4rem) / 5);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.8rem;
}
.relacionado__img { display: flex; align-items: center; justify-content: center; height: 16rem; }
.relacionado__img img { max-height: 16rem; width: auto; object-fit: contain; }
.relacionado__nombre { color: var(--primario); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; }
.relacionado__lema { color: var(--gris-500); font-size: 1.3rem; line-height: 1.4; }
.relacionado:hover .relacionado__nombre { color: var(--primario-oscuro); }

/* Sección por área: pestañas + sidebar + lista */
.seccion { padding: 2.4rem 0 5rem; }
.area-tabs { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.area-tab {
    flex: 1 1 0; min-width: 14rem; text-align: center;
    padding: 1.2rem 1.6rem; border: 0.2rem solid var(--primario);
    border-radius: 3rem; color: var(--primario); font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease;
}
.area-tab:hover { background: var(--primario-claro); color: var(--primario-mas-oscuro); }
.area-tab.activo { background: var(--primario); color: var(--blanco); }

.filtros {
    display: flex; align-items: center; gap: 1.6rem;
    background: var(--gris-100); border-radius: 0.6rem;
    padding: 1rem 1.6rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.filtros__orden { color: var(--gris-700); font-size: 1.4rem; display: flex; align-items: center; gap: 0.8rem; }
.filtros select {
    font-family: inherit; font-size: 1.4rem; padding: 0.6rem 1rem;
    border: 0.1rem solid var(--gris-300); border-radius: 0.6rem; background: var(--blanco);
}
.filtros__conteo { margin-left: auto; color: var(--gris-500); font-size: 1.4rem; }

.seccion__cuerpo { display: grid; grid-template-columns: 26rem 1fr; gap: 2.4rem; align-items: start; }
.sidebar-cat__titulo { font-size: 1.8rem; color: var(--primario); text-transform: uppercase; margin-bottom: 1rem; }
.sidebar-cat ul { border-top: 0.1rem solid var(--gris-200); }
.sidebar-cat li { border-bottom: 0.1rem solid var(--gris-200); }
.sidebar-cat a {
    display: block; padding: 1rem 0; color: var(--gris-700);
    font-size: 1.4rem; text-transform: uppercase;
}
.sidebar-cat a::before { content: "▪ "; color: var(--primario); }
.sidebar-cat a:hover, .sidebar-cat li.activo > a { color: var(--primario); font-weight: 700; }
/* Segundo nivel del árbol (subcategorías), como en el sitio original. */
.sidebar-cat__hijas { border-top: 0; margin-left: 1.4rem; }
.sidebar-cat__hijas li { border-bottom: 0; }
.sidebar-cat__hijas a { font-size: 1.3rem; padding: 0.4rem 0; color: var(--gris-500); }
.sidebar-cat__hijas a::before { content: "– "; }
/* Filtro "Seleccionar por:" de los segmentos de consumo. */
.sidebar-cat__usos label { display: block; font-size: 1.3rem; color: var(--gris-500); text-transform: uppercase; }
.sidebar-cat__usos select {
    font-family: inherit; font-size: 1.4rem; width: 100%; margin-top: 0.8rem;
    padding: 0.8rem 1rem; border: 0.1rem solid var(--gris-300); border-radius: 0.6rem; background: var(--blanco);
}

.lista-prod { min-width: 0; }
.prod-row {
    display: flex; gap: 1.6rem; align-items: center;
    padding: 1.6rem 0; border-bottom: 0.1rem solid var(--gris-200);
}
.prod-row__img { flex: 0 0 9rem; height: 9rem; display: flex; align-items: center; justify-content: center; }
.prod-row__img img { max-width: 9rem; max-height: 9rem; object-fit: contain; }
.prod-row__info { flex: 1; min-width: 0; }
.prod-row__nombre { font-size: 1.7rem; margin-bottom: 0.2rem; }
.prod-row__nombre a { color: var(--primario); text-transform: uppercase; font-weight: 700; }
.prod-row__nombre a:hover { color: var(--primario-oscuro); }
.prod-row__lema { color: var(--gris-700); font-size: 1.4rem; margin-bottom: 0.6rem; }
.prod-row__acciones { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.prod-row__acciones a { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; color: var(--gris-500); }
.prod-row__acciones a::before { content: "▸ "; color: var(--primario); }
.prod-row__acciones a:hover { color: var(--primario); }

.pagina { padding: 4rem 0 6rem; }
.pagina__titulo { font-size: 3rem; color: var(--gris-900); text-transform: uppercase; }
.pagina__intro { color: var(--gris-700); font-size: 1.7rem; margin: 1rem 0; }
.pagina__nota { color: var(--gris-500); margin-top: 2rem; }

/* Páginas institucionales (La Empresa, Contáctenos, Noticias, Privacidad, Trabaja) */
.institucional { padding: 2.4rem 0 5rem; }
.institucional__titulo { font-size: 3rem; color: var(--primario); text-transform: uppercase; text-align: center; margin-bottom: 2.4rem; }
.institucional__sub { font-size: 2rem; color: var(--gris-900); margin: 2.4rem 0 1.2rem; text-transform: uppercase; }
.institucional__meta { color: var(--gris-500); font-size: 1.4rem; margin-bottom: 1.6rem; display: block; }
.institucional__intro { color: var(--gris-700); font-size: 1.7rem; text-align: center; max-width: 70rem; margin: 0 auto 2.4rem; }
.institucional__texto { max-width: 90rem; margin: 0 auto; }
.institucional__texto p { color: var(--gris-700); line-height: 1.7; margin-bottom: 1.2rem; }
.institucional__cuerpo { min-width: 0; }
.institucional__cuerpo-texto { color: var(--gris-700); line-height: 1.7; font-size: 1.6rem; }

.bloque { margin-bottom: 3.2rem; scroll-margin-top: 14rem; }
.bloque__titulo { font-size: 2.2rem; color: var(--gris-900); border-bottom: 0.2rem solid var(--primario); padding-bottom: 0.6rem; margin-bottom: 1.2rem; text-transform: uppercase; }
.bloque__sub { font-size: 1.7rem; color: var(--primario); margin: 1.6rem 0 0.6rem; }
.bloque p { color: var(--gris-700); line-height: 1.7; margin-bottom: 1rem; }
.premios { padding-left: 1.8rem; color: var(--gris-700); }
.premios li { list-style: disc; margin-bottom: 0.8rem; line-height: 1.7; }

.sgi__firmas { display: flex; gap: 4rem; flex-wrap: wrap; margin: 2.8rem 0 1.6rem; }
.sgi__firma { border-top: 0.1rem solid var(--gris-300); padding-top: 0.8rem; min-width: 24rem; }
.sgi__firma strong { display: block; color: var(--gris-900); }
.sgi__firma span { color: var(--gris-500); font-size: 1.4rem; }
.sgi__codigo { color: var(--gris-500); font-size: 1.3rem; line-height: 1.6; }

.contacto__general { text-align: center; margin-bottom: 2.4rem; color: var(--gris-700); font-size: 1.6rem; }
.contacto__general a { color: var(--primario); font-weight: 700; }
.contacto__sedes { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 2rem; }
.sede { border: 0.1rem solid var(--gris-200); border-left: 0.4rem solid var(--primario); border-radius: 0.6rem; padding: 1.6rem; }
.sede__ciudad { color: var(--primario); font-size: 1.8rem; text-transform: uppercase; margin-bottom: 0.6rem; }
.sede__dir { color: var(--gris-700); margin-bottom: 0.6rem; line-height: 1.5; }
.sede a { color: var(--gris-700); }
.sede a:hover { color: var(--primario); }

/* Noticias: 2 destacadas arriba + lista con filtro + columna de video */
.noticias-destacadas { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; margin-bottom: 3.2rem; }
.noticia-destacada { display: block; }
.noticia-destacada__img { position: relative; display: block; height: 32rem; background: var(--gris-100); overflow: hidden; }
.noticia-destacada__img img { width: 100%; height: 100%; object-fit: cover; }
.noticia-destacada__lupa {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0); transition: background 0.2s ease;
}
.noticia-destacada__lupa::after {
    content: ""; width: 5rem; height: 5rem;
    border: 0.4rem solid var(--blanco); border-radius: 50%;
    opacity: 0; transition: opacity 0.2s ease;
}
.noticia-destacada:hover .noticia-destacada__lupa { background: rgba(0, 0, 0, 0.25); }
.noticia-destacada:hover .noticia-destacada__lupa::after { opacity: 1; }
.noticia-destacada__titulo { font-size: 2rem; color: var(--gris-900); margin-top: 1.2rem; }
.noticia-destacada__fecha { color: var(--gris-500); font-size: 1.4rem; }
.noticia-destacada:hover .noticia-destacada__titulo { color: var(--primario); }

.noticias__cuerpo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3.2rem; align-items: start; }
.noticias__sub {
    color: var(--primario); font-size: 1.8rem; text-transform: uppercase;
    border-bottom: 0.1rem solid var(--gris-200); padding-bottom: 0.6rem; margin-bottom: 1.6rem;
}
.noticias__filtro { background: var(--gris-100); padding: 1rem 1.6rem; border-radius: 0.6rem; margin-bottom: 1.6rem; }
.noticias__filtro label { display: flex; align-items: center; gap: 0.8rem; color: var(--gris-500); font-size: 1.3rem; text-transform: uppercase; }
.noticias__filtro select { font-family: inherit; font-size: 1.4rem; padding: 0.5rem 1rem; border: 0.1rem solid var(--gris-300); border-radius: 0.6rem; background: var(--blanco); }

.noticia-fila { display: grid; grid-template-columns: 12rem 1fr; gap: 1.6rem; padding: 1.6rem 0; border-bottom: 0.1rem solid var(--gris-200); }
.noticia-fila__fecha { grid-column: 1 / -1; color: var(--gris-500); font-size: 1.3rem; }
.noticia-fila__img { display: block; height: 9rem; overflow: hidden; background: var(--gris-100); }
.noticia-fila__img img { width: 100%; height: 100%; object-fit: cover; }
.noticia-fila__info h3 { font-size: 1.7rem; margin-bottom: 0.4rem; }
.noticia-fila__info h3 a { color: var(--gris-900); }
.noticia-fila__info h3 a:hover { color: var(--primario); }
.noticia-fila__info p { color: var(--gris-500); font-size: 1.4rem; }

.video-card { display: flex; gap: 1.4rem; align-items: center; background: var(--gris-900); color: var(--blanco); padding: 2.4rem; border-radius: 0.8rem; }
.video-card:hover { background: #000; }
.video-card__play { flex: 0 0 auto; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--primario); display: flex; align-items: center; justify-content: center; }
.video-card__play svg { width: 2.4rem; height: 2.4rem; fill: var(--blanco); }
.video-card__texto { font-size: 1.5rem; line-height: 1.5; }

.noticia-detalle__img { width: 100%; max-height: 42rem; object-fit: cover; border-radius: 0.8rem; margin: 1.6rem 0; }

.form-chema { max-width: 56rem; margin: 2rem auto 0; display: flex; flex-direction: column; gap: 1.2rem; }
.form-chema input[type="text"], .form-chema input[type="email"], .form-chema textarea {
    font-family: inherit; font-size: 1.5rem; padding: 1.2rem 1.4rem;
    border: 0.1rem solid var(--gris-300); border-radius: 0.6rem; width: 100%;
}
.form-file { display: inline-flex; flex-direction: column; gap: 0.6rem; font-weight: 700; color: var(--gris-700); }
.form-check { display: flex; align-items: center; gap: 0.8rem; color: var(--gris-700); font-size: 1.4rem; }
.form-check a { color: var(--primario); }
.form-chema button { align-self: flex-start; background: var(--primario); color: var(--blanco); font-weight: 700; text-transform: uppercase; border: 0; padding: 1.2rem 2.4rem; border-radius: 0.6rem; cursor: pointer; }
.form-chema button:hover { background: var(--primario-oscuro); }
.hp { position: absolute; left: -9999px; width: 0.1rem; height: 0.1rem; overflow: hidden; }
.aviso-ok { background: #e8f6e8; border: 0.1rem solid #93d393; border-left: 0.4rem solid #2e7d32; border-radius: 0.6rem; padding: 1.6rem; color: #2e5d2e; max-width: 56rem; margin: 2rem auto; }
.aviso-error {
    background: #fdecea; border: 0.1rem solid #f3b7b1; border-left: 0.4rem solid #c62828;
    border-radius: 0.6rem; padding: 1.6rem 1.6rem 1.6rem 2rem; color: #8c1d18; margin: 2rem 0;
}
.aviso-error p { font-weight: 700; margin-bottom: 0.8rem; }
.aviso-error ul { margin: 0; padding-left: 2rem; }
.aviso-error li { margin-bottom: 0.4rem; line-height: 1.5; }

.boton-chema {
    display: inline-block; background: var(--primario); color: var(--blanco);
    font-family: inherit; font-size: 1.5rem; font-weight: 700; text-transform: uppercase;
    border: 0; padding: 1.2rem 3.2rem; border-radius: 0.6rem; cursor: pointer;
    transition: background 0.25s ease;
}
.boton-chema:hover { background: var(--primario-oscuro); }

/* ==========================================================================
   PÁGINA DE ERROR (404)
   Vive aquí y no en un <style> dentro de la vista para que la CSP pueda
   prescindir de 'unsafe-inline' en style-src.
   ========================================================================== */
.pagina-error { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.error-404 { text-align: center; padding: 1.6rem; }
.error-404 h1 { font-size: 8rem; color: var(--primario); line-height: 1; }
.error-404 p { color: var(--gris-500); margin: 1.2rem 0 2.4rem; }

/* ==========================================================================
   PÁGINA DE MANTENIMIENTO (503)
   ========================================================================== */
.mantenimiento-pagina { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; }
.mantenimiento-aviso { text-align: center; max-width: 52rem; }
.mantenimiento-aviso__logo { width: 18rem; margin: 0 auto 2.4rem; }
.mantenimiento-aviso h1 { font-size: 2.8rem; color: var(--primario); margin-bottom: 1.2rem; }
.mantenimiento-aviso p { color: var(--gris-700); line-height: 1.6; margin-bottom: 1rem; }
.mantenimiento-aviso__contacto { font-size: 1.4rem; color: var(--gris-500); }
.mantenimiento-aviso__contacto a { color: var(--primario); }
.mantenimiento-pagina--admin { padding-top: 12rem; }

/* Barra de mantenimiento (solo administradores). En el aviso va fija arriba;
   en la vista previa va al final del <body> y se pega abajo (sticky), así no
   tapa la cabecera ni el pie. */
.barra-mantenimiento {
    position: sticky; bottom: 0; z-index: 1000;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem;
    padding: 1rem 1.6rem; background: var(--gris-900); color: var(--blanco);
    font-size: 1.4rem; box-shadow: 0 -0.2rem 1rem rgba(0, 0, 0, 0.25);
}
.barra-mantenimiento--arriba {
    position: fixed; top: 0; bottom: auto; left: 0; right: 0;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.25);
}
.barra-mantenimiento__texto { line-height: 1.4; text-align: center; }
.barra-mantenimiento__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1.2rem; }
.barra-mantenimiento__boton {
    font-family: inherit; font-size: 1.4rem; font-weight: 700; color: var(--blanco);
    background: transparent; border: 0.1rem solid var(--blanco); border-radius: 0.6rem;
    padding: 0.6rem 1.4rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.barra-mantenimiento__boton:hover { background: var(--blanco); color: var(--gris-900); }
.barra-mantenimiento__boton--publicar { background: var(--primario); border-color: var(--primario); }
.barra-mantenimiento__boton--publicar:hover { background: var(--primario-oscuro); border-color: var(--primario-oscuro); color: var(--blanco); }
.barra-mantenimiento__enlace { color: var(--blanco); text-decoration: underline; }
.barra-mantenimiento__boton:focus-visible,
.barra-mantenimiento__enlace:focus-visible { outline: 0.2rem solid var(--primario-claro); outline-offset: 0.2rem; }

/* ==========================================================================
   LIBRO DE RECLAMACIONES
   ========================================================================== */
.libro__aviso {
    background: var(--gris-50); border-left: 0.4rem solid var(--primario);
    border-radius: 0.6rem; padding: 1.6rem 2rem; margin-bottom: 2.4rem; line-height: 1.6;
}
.libro__aviso p { margin-bottom: 0.6rem; }
.libro__aviso p:last-child { margin-bottom: 0; }
.libro__aviso-nota { font-size: 1.3rem; color: var(--gris-500); }

.libro { max-width: 96rem; margin: 0 auto; }
.libro__cabecera {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 1.6rem 2.4rem; margin-bottom: 2.4rem;
}
.libro__bloque {
    border: 0.1rem solid var(--gris-200); border-radius: 0.8rem;
    padding: 2rem 2.4rem 2.4rem; margin-bottom: 2.4rem;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1.6rem 2.4rem;
}
.libro__bloque legend {
    grid-column: 1 / -1; font-weight: 700; text-transform: uppercase;
    color: var(--primario); font-size: 1.4rem; letter-spacing: 0.05rem; padding: 0 0.8rem;
}
.libro__bloque[hidden] { display: none; }
.libro__bloque--apoderado { background: var(--gris-50); }

.campo { display: flex; flex-direction: column; gap: 0.6rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: 1.4rem; font-weight: 700; color: var(--gris-700); }
.campo input, .campo select, .campo textarea {
    font-family: inherit; font-size: 1.5rem; color: var(--gris-900);
    padding: 1.1rem 1.4rem; border: 0.1rem solid var(--gris-300);
    border-radius: 0.6rem; width: 100%; background: var(--blanco);
}
.campo textarea { resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: 0.2rem solid var(--primario); outline-offset: 0.1rem; border-color: var(--primario);
}
.campo input[readonly], .campo textarea[readonly] { background: var(--gris-100); color: var(--gris-500); }
.campo__ayuda { font-size: 1.2rem; color: var(--gris-500); font-weight: 400; }
.campo .form-check { font-weight: 400; align-items: flex-start; line-height: 1.5; }
.req { color: var(--primario); }

.libro__opciones { flex-direction: row; gap: 3.2rem; }
.libro__conformidad { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2.4rem; }
.libro__conformidad .form-check { align-items: flex-start; line-height: 1.5; }
.libro__conformidad input[type="checkbox"] { margin-top: 0.3rem; flex: 0 0 auto; }

.libro__captcha { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2rem; max-width: 36rem; }
.libro__captcha > label { font-size: 1.4rem; font-weight: 700; color: var(--gris-700); }
.libro__captcha-fila { display: flex; align-items: center; gap: 1.2rem; }
.libro__captcha-img { border: 0.1rem solid var(--gris-300); border-radius: 0.6rem; }
.libro__captcha-refrescar {
    font-family: inherit; font-size: 1.3rem; color: var(--primario); background: none;
    border: 0.1rem solid var(--gris-300); border-radius: 0.6rem; padding: 0.8rem 1.2rem; cursor: pointer;
}
.libro__captcha-refrescar:hover { border-color: var(--primario); background: var(--gris-50); }
.libro__captcha input {
    font-family: inherit; font-size: 1.6rem; letter-spacing: 0.4rem; text-transform: uppercase;
    padding: 1.1rem 1.4rem; border: 0.1rem solid var(--gris-300); border-radius: 0.6rem;
}
.libro__nota { font-size: 1.3rem; color: var(--gris-500); margin-bottom: 2rem; }
.libro__exito { max-width: 72rem; }
.libro__exito h2 { color: #2e7d32; font-size: 2rem; margin-bottom: 1.2rem; }
.libro__exito p { line-height: 1.6; margin-bottom: 1.2rem; }

@media (max-width: 48rem) {
    .libro__bloque { grid-template-columns: 1fr; padding: 1.6rem; }
    .libro__opciones { flex-direction: column; gap: 1rem; }
}

/* Marcas */
.marcas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr)); gap: 2rem 3.2rem; }
.marca-card { display: flex; gap: 1.6rem; align-items: flex-start; border-bottom: 0.1rem solid var(--gris-200); padding-bottom: 2rem; }
.marca-card__logo { flex: 0 0 11rem; height: 7rem; display: flex; align-items: center; justify-content: center; }
.marca-card__logo img { max-width: 11rem; max-height: 7rem; object-fit: contain; }
.marca-card__info p { color: var(--gris-700); line-height: 1.6; margin-bottom: 1rem; }
.marca-card__ver { color: var(--primario); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; }
.marca-card__ver:hover { color: var(--primario-oscuro); }

/* Puntos de venta: mapa interactivo + panel por departamento */
.puntos__intro-texto { color: var(--gris-700); line-height: 1.6; margin-bottom: 2.4rem; max-width: 80rem; }
.puntos { display: grid; grid-template-columns: 34rem 1fr; gap: 3.2rem; align-items: start; }
.puntos__mapa-wrap { position: sticky; top: 2rem; }
.mapa-peru { width: 100%; height: auto; display: block; overflow: visible; }
/* Departamentos con puntos de venta: clicables y resaltados en naranja. */
.mapa-peru__dep {
    fill: var(--gris-300);
    stroke: var(--blanco);
    stroke-width: 2.5;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.25s ease;
}
.mapa-peru__dep:hover { fill: #ffb06b; }
.mapa-peru__dep.activo { fill: var(--primario); }
.mapa-peru__dep:focus { outline: none; stroke: var(--gris-900); stroke-width: 4; }
/* Departamentos sin ferreterías: sólo contexto geográfico. */
.mapa-peru__dep--vacio { fill: var(--gris-200); cursor: default; }
.mapa-peru__dep--vacio:hover { fill: var(--gris-200); }
/* Zona de clic para departamentos diminutos (Callao). */
.mapa-peru__zona { fill: transparent; cursor: pointer; }
.mapa-peru__zona:focus { outline: none; fill: rgba(255, 113, 10, 0.25); }
.puntos__select { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.6rem; color: var(--gris-500); font-size: 1.3rem; text-transform: uppercase; }
.puntos__select select { font-family: inherit; font-size: 1.4rem; padding: 0.6rem 1rem; border: 0.1rem solid var(--gris-300); border-radius: 0.6rem; background: var(--blanco); flex: 1; }
.puntos__panel { min-width: 0; }
.puntos__grupo { display: none; }
.puntos__grupo.activo { display: block; }
.punto__ciudad { display: block; color: var(--primario); font-size: 1.3rem; text-transform: uppercase; }
.puntos__ciudad { color: var(--primario); font-size: 1.6rem; text-transform: uppercase; border-bottom: 0.2rem solid var(--gris-200); padding-bottom: 0.4rem; margin-bottom: 0.8rem; }
.puntos__ciudad span { color: var(--gris-500); font-weight: 400; font-size: 1.3rem; }
.punto { margin-bottom: 1rem; }
.punto__nombre { display: block; color: var(--gris-900); }
.punto__dir, .punto__tel { display: block; color: var(--gris-500); font-size: 1.4rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
    .ficha__inner { grid-template-columns: 1fr; }
    .relacionado { flex-basis: calc((100% - 2.4rem) / 2); }
    .seccion__cuerpo { grid-template-columns: 1fr; }
    .puntos { grid-template-columns: 1fr; }
    .puntos__mapa-wrap { position: static; max-width: 28rem; margin: 0 auto; }
    .area-tabs { gap: 0.6rem; }
    .area-tab { min-width: 0; flex: 1 1 40%; font-size: 1.3rem; padding: 0.9rem 0.6rem; }
    /* En móvil la onda (proporción 9:1) no cabe: cabecera naranja sólida. */
    .cabecera { margin-bottom: 0; background: #ff6b00; }
    .cabecera__onda { display: none; }
    .hero { margin-top: 0; height: 26rem; }   /* sin onda no hay que subir la foto */
    .banner-interna { margin-top: 0; height: 18rem; }
    .logo img { height: 7rem; min-height: 0; }
    .noticias-destacadas { grid-template-columns: 1fr; }
    .noticias__cuerpo { grid-template-columns: 1fr; }
    .cabecera__inner {
        position: static; transform: none; max-width: none;
        flex-wrap: wrap; padding: 1.4rem 1.6rem 1.2rem;
    }
    .cabecera__derecha { width: 100%; align-items: stretch; }
    .cabecera__contacto { justify-content: center; }
    .menu { width: 100%; }
    .menu__lista a { border-radius: 0; }
    .menu__toggle {
        display: block;
        width: 100%;
        padding: 1.2rem 1.6rem;
        background: none;
        border: 0;
        color: var(--blanco);
        font-weight: 700;
        text-transform: uppercase;
        text-align: left;
        cursor: pointer;
        font-size: 1.5rem;
    }
    .menu__lista {
        display: none;
        flex-direction: column;
        padding: 0;
    }
    .menu__lista.abierto { display: flex; }
    .menu__lista > li > a { padding: 1.2rem 1.6rem; border-top: 0.1rem solid rgba(255,255,255,0.15); }

    .categorias__lista { grid-template-columns: repeat(2, 1fr); }
    .categoria-item__icono { width: 10rem; height: 10rem; }
    .categoria-item__icono img { width: 5rem; height: 5rem; }

    .hero__buscador { position: static; width: 100%; border-radius: 0; margin: 0; }
}

@media (max-width: 480px) {
    .logo img { height: 5.4rem; }
    .telefono { font-size: 1.6rem; }
}

/* ==========================================================================
   Aviso de cookies (mismo aspecto que el de la web actual)
   ========================================================================== */
.cookies {
    position: fixed;
    z-index: 900;
    max-width: 46rem;
    background: #333333;
    color: #ffffff;
    border-radius: 0.8rem;
    padding: 2.4rem;
    box-shadow: 0 0.1rem 0.3rem rgba(60, 64, 67, 0.3), 0 0.4rem 1.6rem rgba(0, 0, 0, 0.25);
}
.cookies--abajo-izquierda { bottom: 2rem; left: 2rem; }
.cookies--abajo-derecha   { bottom: 2rem; right: 2rem; }
.cookies--abajo-centro    { bottom: 0; left: 0; right: 0; max-width: none; border-radius: 0; }
.cookies--centro {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.cookies__titulo { font-size: 1.7rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem; }
.cookies__texto { font-size: 1.4rem; line-height: 1.6; color: #e8e8e8; margin-bottom: 1.2rem; }
.cookies__enlace {
    display: inline-block; font-size: 1.4rem; font-weight: 700; color: #ffffff;
    text-decoration: underline; margin-bottom: 1.6rem;
}
.cookies__enlace:hover { color: var(--primario, #ff710a); }
.cookies__acciones { display: flex; justify-content: flex-end; }
.cookies__boton {
    font-family: inherit; font-size: 1.4rem; font-weight: 700; color: #ffffff;
    background: #4caf50; border: 0; border-radius: 2rem;
    padding: 0.9rem 2.2rem; cursor: pointer;
    transition: background 0.2s ease;
}
.cookies__boton:hover { background: #3d8b40; }
.cookies__boton:focus-visible { outline: 0.2rem solid #ffffff; outline-offset: 0.2rem; }

.pie__cookies { margin-top: 0.6rem; font-size: 1.3rem; }
.pie__cookies a { text-decoration: underline; }

@media (max-width: 48rem) {
    .cookies {
        left: 1.2rem; right: 1.2rem; bottom: 1.2rem; max-width: none; padding: 1.8rem;
    }
    .cookies--centro { top: auto; left: 1.2rem; right: 1.2rem; transform: none; }
}