/*
 * Tema "publifactoria": el diseño del sitio, replicado del original en
 * WordPress (tema Flaton). Un solo archivo, sin frameworks.
 *
 * Orden: 1. base   2. encabezado   3. piezas comunes   4. catálogo
 *        5. ficha   6. inicio   7. páginas   8. cotización y formularios
 *        9. pie   10. pantallas chicas
 *
 * Medidas del original: contenedor de 1170 px, columnas con 30 px de
 * separación, texto base Raleway de 12 px y color de acento #46a3b0.
 */

/* ---------- 1. Base ------------------------------------------------- */

@font-face {
    font-family: Raleway;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/raleway-latin-wght-normal.woff2) format("woff2");
}
@font-face {
    font-family: Raleway;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/raleway-latin-wght-italic.woff2) format("woff2");
}

:root {
    --acento: #46a3b0;
    --texto: #383838;
    --titulo: #222;
    --linea: #e5e5e5;
    --gris: #adadad;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 300 12px/24px Raleway, Arial, Helvetica, sans-serif;
    color: var(--texto);
    background: #fff;
}
img { max-width: 100%; height: auto; }
a { color: var(--acento); }
a:hover { color: var(--titulo); }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.icono { vertical-align: middle; flex: none; }

.oculto, .saltar:not(:focus) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.saltar:focus { position: absolute; left: 8px; top: 8px; z-index: 100; padding: 8px 12px; background: #fff; }

.contenedor { width: 100%; margin-inline: auto; padding-inline: 15px; }
@media (min-width: 768px)  { .contenedor { max-width: 750px; } }
@media (min-width: 992px)  { .contenedor { max-width: 970px; } }
@media (min-width: 1200px) { .contenedor { max-width: 1200px; } }

/* ---------- 2. Encabezado ------------------------------------------- */

.encabezado {
    position: relative;
    z-index: 20;
    color: #eee;
    background: #2e5068 url(img/encabezado.jpg) center top no-repeat;
}

/* Franja de arriba: correo y teléfono. */
.barra { border-bottom: 1px solid rgba(255, 255, 255, .2); font: 300 11px/21px Arial, Helvetica, sans-serif; color: #fff; }
.barra__datos { display: flex; flex-wrap: wrap; list-style: none; margin-block: 0; min-height: 39px; }
.barra__datos li { margin: 9px 20px 9px 0; }
.barra__datos b { font-weight: 700; color: #e2e2e2; }
.barra__datos a { color: #fff; text-decoration: none; }
.barra__icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 21px; margin-right: 10px;
    border: 1px solid #e2e2e2; border-radius: 11px; color: #e2e2e2; vertical-align: top;
}

/* Caja translúcida: logotipo a la izquierda, menú y buscador a la derecha. */
.encabezado__caja { display: grid; grid-template-columns: 270px minmax(0, 1fr); background: rgba(255, 255, 255, .2); }
.encabezado__marca { display: flex; align-items: center; justify-content: center; }
.encabezado__marca img { display: block; }
.encabezado__derecha { display: flex; flex-direction: column; border-left: 1px solid rgba(255, 255, 255, .2); }

.menu-boton { display: none; }
.navegacion { display: flex; align-items: center; justify-content: space-between; height: 87px; }
.menu { display: flex; list-style: none; margin: 0; padding: 0; }
.menu a, .navegacion__cotizacion {
    display: block; margin: 0 5px; padding: 0 15px;
    font-size: 16px; line-height: 29px; font-weight: 400; text-transform: capitalize; text-decoration: none;
    color: #fff; border: 1px solid transparent; border-radius: 16px;
    transition: border-color .4s ease-out;
}
.menu a:hover, .menu a[aria-current="page"],
.navegacion__cotizacion:hover, .navegacion__cotizacion[aria-current="page"] { border-color: rgba(255, 255, 255, .2); color: #fff; }
.navegacion__cotizacion { margin-right: 15px; text-transform: none; white-space: nowrap; }
.navegacion__total {
    display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px;
    font-size: 12px; line-height: 20px; font-weight: 700; text-align: center;
    color: #fff; background: var(--acento); border-radius: 10px; vertical-align: 2px;
}

.buscador { position: relative; height: 46px; border-top: 1px solid rgba(255, 255, 255, .2); }
.buscador input {
    display: block; width: 100%; height: 45px; padding: 10px 80px 10px 20px;
    font: 500 12px/22px Arial, Helvetica, sans-serif; color: #e6e6e6;
    background: transparent; border: 0; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.buscador input::placeholder { color: #e6e6e6; opacity: 1; }
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador button { position: absolute; right: 0; top: 0; width: 80px; height: 45px; padding: 0; color: #fff; background: none; border: 0; cursor: pointer; }

/* En el inicio, el encabezado va encima del carrusel y sin fondo propio. */
@media (min-width: 992px) {
    .es-portada .encabezado { position: absolute; left: 0; right: 0; top: 0; background: none; }
}

/* ---------- 3. Piezas comunes --------------------------------------- */

/* Ruta de navegación. En el catálogo va pegada al encabezado; en las páginas de texto, 30 px más abajo. */
.migas { padding-bottom: 14px; }
.migas--pagina { padding: 30px 0 0; }
.migas ol {
    display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 15px 0;
    border-bottom: 1px solid var(--linea); font-size: 14px; color: var(--acento);
}
.migas a { font-weight: 400; color: var(--texto); text-decoration: none; }
.migas a:hover { color: var(--acento); }
.migas__separador { margin: 0 8px; color: var(--texto); }

.titulo-pagina { margin: 30px 0; font-size: 24px; line-height: 32.4px; font-weight: 700; text-transform: uppercase; color: var(--titulo); }

/* Título en pastilla sobre una línea (barra lateral). */
.titulo-lateral { position: relative; z-index: 0; height: 34px; margin: 0 0 20px; font-size: 16px; }
.titulo-lateral::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 17px; height: 1px; background: #ddd; }
.titulo-lateral span {
    display: inline-block; padding: 0 24px; font-weight: 400; line-height: 32px; text-transform: uppercase;
    color: var(--titulo); background: #fff; border: 1px solid var(--acento); border-radius: 21px;
}

/* Título en pastilla, centrado sobre una línea (inicio). Rellena por omisión; "--hueca" la deja solo con su borde. */
.titulo-pastilla { position: relative; margin: 0; font-size: 16px; line-height: 40px; text-align: center; }
.titulo-pastilla::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; border-top: 1px solid var(--linea); }
.titulo-pastilla span { position: relative; display: inline-block; padding: 0 50px; font-weight: 400; text-transform: uppercase; color: #fff; background: var(--acento); border-radius: 20px; }
.titulo-pastilla--hueca::before { top: 21px; }
/* La línea de la pastilla rellena llega a las orillas del contenedor. */
@media (min-width: 768px) {
    .titulo-pastilla:not(.titulo-pastilla--hueca)::before { left: -15px; right: -15px; }
}
.titulo-pastilla--hueca span { min-width: 200px; color: var(--acento); background: #fff; border: 1px solid var(--acento); }

/* Texto con formato: descripciones de producto y páginas. Las listas van sin viñeta, como en el original. */
.texto p { margin: 0 0 10px; }
.texto ul, .texto ol { list-style: none; margin: 0; padding: 0; }
.texto strong { font-weight: 700; }
.texto h3 { margin: 0 0 10px; font-size: 24px; line-height: 32.4px; font-weight: 700; color: var(--titulo); }

/* Botones en pastilla. */
.boton-contacto, .boton-cotizar, .boton-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 172px; min-height: 36px; padding: 5px 14px;
    font-size: 12px; line-height: 24px; font-weight: 600; text-decoration: none;
    border-radius: 50px; border: 1px solid #247390; color: #247390; background: #fff; cursor: pointer;
    transition: color .2s, background-color .2s, border-color .2s;
}
.boton-contacto:hover { color: #fff; background: #247390; }
.boton-cotizar { color: #fff; background: var(--acento); border-color: var(--acento); }
.boton-cotizar:hover, .boton-cotizar[aria-pressed="true"] { color: var(--acento); background: #fff; }
.boton-whatsapp { color: #fff; background: #03a30a; border-color: #03a30a; }
.boton-whatsapp:hover { color: #fff; background: #027a07; border-color: #027a07; }

/* Tarjeta de producto. */
.productos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; list-style: none; margin: 0; padding: 0; }
.tarjeta { position: relative; margin-bottom: 31px; padding-bottom: 16px; text-align: center; border: 1px solid transparent; border-radius: 20px; }
.tarjeta__foto { display: block; position: relative; aspect-ratio: 1; margin-bottom: 15px; }
.tarjeta__foto img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 20px 20px 0 0; }
/* El círculo del original: era el hueco del precio. Para quitarlo basta "display: none". */
.tarjeta__circulo { position: absolute; right: 10px; bottom: 50px; width: 86px; height: 86px; border-radius: 50%; background: rgba(70, 163, 176, .7); }
.tarjeta__nombre { margin: 0 0 10px; font-size: 15px; line-height: 20.25px; font-weight: 400; }
.tarjeta__nombre a { color: var(--texto); text-decoration: none; }
.tarjeta__nombre a:hover { color: var(--acento); }
.tarjeta__cotizar {
    padding: 0 14px; font-size: 12px; line-height: 26px; color: var(--texto);
    background: #fff; border: 1px solid var(--linea); border-radius: 14px; cursor: pointer;
    transition: color .2s, background-color .2s, border-color .2s;
}
.tarjeta__cotizar:hover, .tarjeta__cotizar[aria-pressed="true"] { color: #fff; background: var(--acento); border-color: var(--acento); }

/* Botón flotante de WhatsApp. */
.whatsapp {
    position: fixed; z-index: 50; right: 30px; bottom: 50px;
    display: inline-flex; align-items: center; gap: 5px; padding: 10px 20px;
    font-size: 14px; line-height: 18px; font-weight: 700; text-decoration: none;
    color: #fff; background: #03cc0b; border-radius: 50px;
}
.whatsapp:hover { color: #fff; background: #02a809; }

/* ---------- 4. Catálogo --------------------------------------------- */

.catalogo { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 30px; align-items: start; }
.categorias { list-style: none; margin: 0 0 40px; padding: 0; }
.categorias li { display: flex; justify-content: space-between; font-size: 14px; line-height: 39px; border-bottom: 1px solid var(--linea); }
.categorias a { font-size: 13px; font-weight: 400; text-transform: uppercase; color: var(--texto); text-decoration: none; }
.categorias li:hover, .categorias li:hover a, .categorias a[aria-current="true"] { color: var(--acento); }

.catalogo__barra {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px;
    min-height: 45px; margin-bottom: 30px; padding: 7px 0; border-block: 1px solid var(--linea);
}
.catalogo__busqueda { margin: 0 auto 0 0; font-size: 14px; }
.catalogo__conteo { margin: 0; padding: 0 15px; line-height: 27px; border: 1px solid var(--linea); border-radius: 15px; }
.catalogo__descripcion { margin-bottom: 20px; }
.catalogo__vacio { font-size: 14px; }

.paginacion { margin: 0 0 30px; padding: 7px 0; text-align: center; border-block: 1px solid var(--linea); }
.paginacion ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; list-style: none; margin: 5px 0 8px; padding: 0; }
.paginacion a, .paginacion li > span {
    display: block; width: 34px; height: 34px; font-size: 14px; line-height: 34px; font-weight: 400;
    color: var(--acento); text-decoration: none; border-radius: 50%;
}
.paginacion a:hover, .paginacion span[aria-current] { color: #fff; background: var(--acento); }
.paginacion span[aria-current] { font-weight: 700; }

/* ---------- 5. Ficha de producto ------------------------------------ */

.ficha { padding-top: 30px; }
.ficha__arriba { display: grid; grid-template-columns: 370px minmax(0, 470px); gap: 30px; align-items: start; }
.ficha__foto { display: block; position: relative; margin: 0; border: 1px solid var(--linea); border-radius: 25px; overflow: hidden; }
.ficha__foto img { display: block; width: 100%; height: auto; }
.ficha__foto--vacia { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: var(--gris); }
.ficha__ampliar { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; color: var(--acento); background: #fff; }
.ficha__fotos { margin-bottom: 24px; }
.ficha__miniaturas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0 0 28px; padding: 12px 0 0; }
.ficha__miniaturas a { display: block; }
.ficha__miniaturas img { display: block; width: 111px; height: 111px; object-fit: contain; }

.ficha__resumen { margin-bottom: 30px; font-weight: 600; }
.ficha__resumen h1 { margin: 0 0 10px; font-size: 24px; line-height: 32.4px; font-weight: 600; color: var(--titulo); }
.ficha__corta { margin: 35px 0 25px; padding: 20px 0; font-size: 14px; font-weight: 400; color: var(--gris); border-block: 1px solid var(--linea); }
.ficha__corta p { color: var(--texto); }
/* "Contáctanos" arriba y, debajo, el botón de la lista: ocupa el renglón que tenían la lista de deseos y el comparador. */
.ficha__acciones { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.ficha__acciones .boton-cotizar { min-height: 34px; margin-bottom: 5px; padding-block: 4px; }
/* La línea de abajo era, en el original, el renglón (vacío) de los botones para compartir. */
.ficha__categorias { margin: 25px 0 0; font-weight: 400; }
.ficha__categorias::after { content: ""; display: block; height: 21px; border-top: 1px solid #ececec; }
.ficha__categorias b { font-weight: 700; text-transform: uppercase; color: var(--titulo); }
.ficha__categorias a { color: var(--texto); text-decoration: none; }
.ficha__categorias a:hover { color: var(--acento); }

/* Pestañas: Descripción / Información adicional. Sin JavaScript se ven las dos, una tras otra. */
.pestanas { margin: 40px 0; }
/* Como en el original: 30 px entre una y otra; si no caben en un renglón, la segunda baja pegada y con 15 px de sangría. */
.pestanas__lista { position: relative; display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pestanas__lista::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; border-bottom: 1px solid var(--linea); }
.pestanas__lista li { position: relative; margin: 0 15px; background: #fff; }
.pestanas__lista li:first-child { margin-left: 0; }
.pestanas__lista a {
    display: block; padding: 0 50px; font-size: 16px; line-height: 40px; font-weight: 400; text-transform: uppercase; text-decoration: none;
    color: var(--gris); background: #fff; border: 1px solid var(--linea); border-radius: 20px;
}
.pestanas__lista a:hover, .pestanas__lista a[aria-selected="true"] { color: var(--acento); border-color: var(--acento); }
.pestanas__panel { margin-top: 30px; padding: 20px; }
.pestanas__panel h2 { margin: 0 0 20px; font-size: 16px; line-height: 21.6px; font-weight: 400; text-transform: uppercase; color: var(--titulo); }

.atributos { width: 100%; margin: 0 0 19px; border-collapse: separate; border-spacing: 0; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.atributos th, .atributos td { line-height: 18px; text-align: left; vertical-align: middle; border-right: 1px solid var(--linea); border-bottom: 1px dotted rgba(0, 0, 0, .1); }
.atributos th { width: 150px; padding: 8px; font-weight: 400; text-transform: uppercase; color: var(--titulo); }
.atributos td { padding: 16px 8px; font-style: italic; }

/* ---------- 6. Inicio ----------------------------------------------- */

.portada { position: relative; overflow: hidden; background: #24405a; }
.portada__lamina { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.portada__lamina--actual { position: relative; opacity: 1; visibility: visible; }
.portada__lamina img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 836; object-fit: cover; }
/* En el original la foto sobresale 15 px por cada lado (y por eso es un poco más alta). */
@media (min-width: 992px) {
    .portada__lamina img { width: calc(100% + 30px); max-width: none; margin-left: -15px; }
}
.portada__texto { position: absolute; top: 45.4%; color: #fff; letter-spacing: 1.35px; }
.portada__lamina--derecha .portada__texto { right: 18.6%; text-align: right; }
.portada__lamina--izquierda .portada__texto { left: 18.6%; text-align: left; }
.portada__titulo { margin: 0; font-size: clamp(20px, 3.87vw, 49px); line-height: .96; font-weight: 300; }
.portada__lamina--derecha .portada__sub, .portada__lamina--derecha .portada__boton { margin-right: 12px; }
.portada__lamina--izquierda .portada__sub, .portada__lamina--izquierda .portada__boton { margin-left: 12px; }
.portada__sub { margin-top: 1.7vw; margin-bottom: 0; font-size: clamp(11px, 1.26vw, 16px); line-height: 1; font-weight: 300; }
.portada__boton {
    display: inline-block; margin-top: clamp(14px, 3.8vw, 49px); padding: 10px 30px;
    font-size: 14px; line-height: 14px; font-weight: 500; letter-spacing: normal; text-decoration: none;
    color: #fff; border: 1px solid #fff; border-radius: 30px; transition: color .2s, background-color .2s;
}
.portada__boton:hover { color: var(--titulo); background: #fff; }
.portada__flecha {
    position: absolute; top: 50%; width: 64px; height: 64px; margin-top: -32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(255, 255, 255, .2); border: 1px solid #fff; border-radius: 50%; cursor: pointer;
}
.portada__flecha--anterior { left: 20px; }
.portada__flecha--siguiente { right: 20px; }
.portada__flecha:hover { background: rgba(255, 255, 255, .4); }

.ventajas { padding: 50px 0 100px; border-bottom: 1px solid var(--linea); }
.ventajas ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; list-style: none; margin-block: 0; padding: 0; }
.ventajas li { text-align: center; }
.ventajas__icono {
    display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 90px;
    color: #fff; background: linear-gradient(to top right, #307079, #67b7c2); border-radius: 15px;
}
.ventajas__icono span { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border: 1px solid #fff; border-radius: 50%; }
.ventajas h2 { margin: 25px 0 10px; font-size: 16px; line-height: 21.6px; font-weight: 400; text-transform: uppercase; color: var(--titulo); }
.ventajas p { margin: 0; font: 300 12px/16px Arial, Helvetica, sans-serif; }

.inicio__seccion { margin-top: 50px; }
.inicio__seccion + .inicio__seccion { margin-top: 19px; }
.inicio__seccion:last-of-type { margin-bottom: 20px; }
/* En el original, las columnas del inicio ocupan el contenedor completo (1200 px), no los 1170 del resto. */
@media (min-width: 768px) {
    .ventajas ul { padding-inline: 0; }
    .inicio__seccion .carrusel { margin-inline: -15px; }
}

/* Carrusel de productos: una fila que se desliza; con "--doble", dos filas. */
.carrusel { position: relative; }
.carrusel .productos {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 90px) / 4);
    padding-top: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.carrusel .productos::-webkit-scrollbar { display: none; }
.carrusel--doble .productos { grid-template-rows: repeat(2, auto); }
.carrusel .tarjeta { scroll-snap-align: start; }
.carrusel__flecha {
    position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--gris); background: #fff; border: 1px solid var(--linea); border-radius: 50%; cursor: pointer;
    opacity: 0; transition: opacity .2s, color .2s;
}
.carrusel__flecha--anterior { left: 0; }
.carrusel__flecha--siguiente { right: 0; }
.carrusel:hover .carrusel__flecha, .carrusel__flecha:focus-visible { opacity: 1; }
.carrusel__flecha:hover { color: var(--acento); }
.carrusel__flecha:disabled { opacity: 0 !important; cursor: default; }

/* ---------- 7. Páginas ---------------------------------------------- */

/* Nosotros. */
/* La caja gris sobresale 40 px por debajo de la foto. */
.nosotros-banda { display: flow-root; margin: 0 15px 80px; background: #ddd url(img/nosotros.jpg) center / cover no-repeat; }
.nosotros-banda__caja { position: relative; width: 410px; margin: 50px 0 -40px calc(50% + 40px); padding: 70px 50px 105px; background: #f5f5f5; }
.nosotros-banda__caja h1 { margin: 0 0 5px; font-size: 24px; line-height: 32.4px; font-weight: 700; color: var(--titulo); }
.nosotros-banda__caja p { margin: 0 0 10px; }
.nosotros-banda__caja p:last-child { margin: 0; }
.nosotros-banda__caja strong { font-weight: 700; }
.nosotros-banda__caja a { color: inherit; text-decoration: none; }

.servicios { margin-bottom: 50px; text-align: center; }
.servicios > h2 { margin: 0 0 5px; font-size: 30px; line-height: 40.5px; font-weight: 700; text-transform: uppercase; color: var(--titulo); }
.servicios__entrada { margin: 0; text-transform: uppercase; }
.servicios__columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; margin: 35px -15px 0; align-items: start; }
/* En el original la primera columna empieza 35 px más abajo que las otras dos. */
.servicios__columna:first-child { padding-top: 35px; }
/* En el original solo algunos servicios llevan 20 px extra debajo: el primero de cada columna y los cuatro primeros de la tercera. */
.servicio { margin: 0 0 35px; }
.servicio:first-child, .servicios__columna:nth-child(3) .servicio:nth-child(-n+4) { padding-bottom: 20px; }
.servicio img { display: block; width: 300px; margin: 0 auto; }
.servicio h3 { margin: 0 0 5px; font-size: 18px; line-height: 24.3px; font-weight: 700; color: var(--titulo); }
.servicio p { margin: 0; }

/* Contacto. */
.contacto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin: 0 0 35px; padding-top: 31px; }
.contacto__datos h2 { margin: 0 0 11px; font-size: 24px; line-height: 32.4px; font-weight: 700; color: var(--titulo); }
.contacto__datos p { margin: 0; font-size: 15px; line-height: 32px; }
.contacto__datos a { color: inherit; text-decoration: none; }

/* Páginas de solo texto y avisos. */
.pagina-texto { margin-bottom: 60px; }
.aviso-pagina { margin-bottom: 80px; font-size: 14px; }

/* El formulario de contacto lleva sus renglones más separados, como en el original. */
.contacto .formulario { row-gap: 35px; }

/* ---------- 8. Cotización y formularios ----------------------------- */

.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.formulario > * { grid-column: 1 / -1; }
.formulario__campo { margin: 0; }
.formulario__campo--mitad { grid-column: auto; }
.formulario input:not([type="checkbox"]):not([type="hidden"]), .formulario textarea, .formulario select {
    display: block; width: 100%; height: 42px; padding: 0 15px;
    background: #f2f2f2; border: 0; border-radius: 0;
}
.formulario textarea { height: 270px; padding: 15px; resize: vertical; }
.formulario ::placeholder { color: var(--texto); opacity: 1; }
.formulario__campo--error input, .formulario__campo--error textarea { box-shadow: inset 0 0 0 1px #c0392b; }
.formulario__error { margin: 2px 0 0; font-weight: 400; color: #c0392b; }
.formulario__aviso { margin: 0; padding: 10px 15px; font-size: 14px; font-weight: 400; border: 1px solid; }
.formulario__aviso--ok { color: #1c6b3a; background: #eef8f1; }
.formulario__aviso--error { color: #a02c20; background: #fdf0ee; }
.formulario__pie { margin: 0; text-align: right; }
.formulario__boton {
    padding: 0 20px; font-size: 14px; line-height: 30px; font-weight: 700; text-transform: uppercase;
    color: #525252; background: transparent; border: 1px solid var(--linea); border-radius: 16px; cursor: pointer;
    transition: color .2s, background-color .2s, border-color .2s;
}
.formulario__boton:hover { color: #fff; background: var(--acento); border-color: var(--acento); }

.cotizacion { margin-bottom: 60px; }
.cotizacion__vacia { font-size: 14px; }
.cotizacion__columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 60px; align-items: start; }
.cotizacion__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.cotizacion__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.cotizacion__fila img { width: 64px; height: 64px; object-fit: contain; }
.cotizacion__nombre { flex: 1 1 160px; font-size: 14px; font-weight: 400; color: var(--texto); text-decoration: none; }
.cotizacion__nombre:hover { color: var(--acento); }
.cotizacion__cantidad { display: flex; align-items: center; gap: 8px; }
.cotizacion__cantidad input { width: 90px; height: 34px; padding: 0 10px; background: #f2f2f2; border: 0; }
.cotizacion__quitar, .cotizacion__vaciar { padding: 0; color: var(--gris); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.cotizacion__quitar:hover, .cotizacion__vaciar:hover { color: #a02c20; }
.cotizacion__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 0; }
.cotizacion__formulario h2 { margin: 0 0 16px; font-size: 16px; line-height: 21.6px; font-weight: 400; text-transform: uppercase; color: var(--titulo); }
/* Con la lista vacía, del formulario solo se muestra su aviso. */
.cotizacion[data-vacia] .formulario > :not(.formulario__aviso) { display: none; }

/* ---------- 9. Pie -------------------------------------------------- */

.pie { font-size: 14px; color: #fff; background: #2b4a5c url(img/pie.jpg) center top repeat-y; }
.pie a { color: #fff; text-decoration: none; }
.pie__columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding-block: 50px; }
.pie h2 { margin: 0 0 25px; font-size: 20px; line-height: 35px; font-weight: 400; text-transform: capitalize; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.pie p { margin: 0; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie__enlaces a { display: block; padding: 0 10px; line-height: 50px; text-transform: capitalize; border-bottom: 1px solid #527990; }
.pie__enlaces a:hover { color: #9fd4dc; }
.pie__contacto li { position: relative; min-height: 62px; margin: 0 0 20px; padding: 8px 0 0 75px; overflow-wrap: anywhere; }
.pie__icono { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 61px; height: 61px; border: 1px solid #fff; border-radius: 50%; }
.pie__derechos { margin: 0 !important; padding: 10px 15px; font-size: 12px; line-height: 34px; text-align: center; border-top: 1px solid rgba(255, 255, 255, .5); }

/* ---------- 10. Pantallas chicas ------------------------------------ */

@media (max-width: 1199px) {
    .ficha__arriba { grid-template-columns: minmax(0, 370px) minmax(0, 1fr); }
    .nosotros-banda__caja { margin-left: 50%; }
    .servicio img { width: 100%; max-width: 300px; }
    .menu a, .navegacion__cotizacion { padding: 0 10px; margin: 0 2px; }
}

@media (max-width: 991px) {
    /* Encabezado: todo centrado y apilado; el menú se abre con su botón. */
    /* Medido en el original: cada dato en su renglón de 39 px y 24 px libres debajo. */
    .barra__datos { display: block; padding-block: 0 24px; text-align: center; }
    .barra__datos li { display: inline-block; }
    .encabezado__caja { display: block; text-align: center; }
    .encabezado__marca { padding: 20px 0 23px; }
    .encabezado__derecha { border-left: 0; text-align: left; }
    .buscador { order: 1; }
    .menu-boton {
        order: 2; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; padding: 0 12px;
        font-size: 21px; font-weight: 400; text-transform: uppercase; color: #eee;
        background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .2); cursor: pointer;
    }
    .navegacion { order: 3; display: none; height: auto; padding: 5px 12px; background: #fff; }
    .navegacion--abierta { display: block; }
    .menu { display: block; }
    .menu a, .navegacion__cotizacion {
        margin: 0; padding: 0; font-size: 16px; line-height: 40px; font-weight: 300;
        color: var(--gris); border: 0; border-radius: 0;
    }
    .menu a:hover, .menu a[aria-current="page"],
    .navegacion__cotizacion:hover, .navegacion__cotizacion[aria-current="page"] { color: var(--acento); }

    .catalogo { grid-template-columns: minmax(0, 1fr); gap: 35px; }
    .categorias { margin-bottom: 0; }
    .ventajas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
    .carrusel .productos { grid-auto-columns: calc((100% - 60px) / 3); }
    .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nosotros-banda__caja { width: auto; margin: 50px 30px -40px 40%; padding: 50px 40px; }
    .servicios__columnas { margin-inline: 0; }
    .cotizacion__columnas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .productos { grid-template-columns: minmax(0, 1fr); }
    .carrusel .productos { grid-template-columns: none; grid-auto-columns: calc((100% - 30px) / 2); }
    .carrusel__flecha { opacity: 1; }
    .ficha__arriba { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ficha__fotos { margin-bottom: 2px; }
    .ficha__miniaturas { margin-bottom: 8px; }
    .ficha__foto:only-child { margin-bottom: 28px; }
    .titulo-pastilla--hueca { margin-bottom: 10px; }
    .contacto { gap: 35px; }
    .pie__columnas { padding-bottom: 85px; }
    /* El pie es más alto que su foto: se estira para que no se vea el corte donde se repetiría. */
    .pie { background-size: cover; background-repeat: no-repeat; }
    .atributos th { width: 110px; }
    /* En el original, a 390 px de ancho, la portada y su espacio de abajo suman 220 px. */
    .portada__lamina img { aspect-ratio: 39 / 17; }
    .portada__lamina--derecha .portada__texto { right: 8%; }
    .portada__lamina--izquierda .portada__texto { left: 8%; }
    .portada__texto { top: 16%; }
    .portada__flecha { width: 40px; height: 40px; margin-top: -20px; top: auto; bottom: 12px; }
    .nosotros-banda { margin-inline: 0; }
    .nosotros-banda__caja { margin: 40px 15px -40px; padding: 40px 30px; }
    .servicios > h2 { font-size: 24px; line-height: 32.4px; }
    .servicios__columnas, .contacto { grid-template-columns: minmax(0, 1fr); }
    .servicios__columna:first-child { padding-top: 0; }
    .pie__columnas { grid-template-columns: minmax(0, 1fr); }
    .whatsapp { right: 15px; bottom: 15px; }
}

@media (max-width: 479px) {
    .carrusel .productos { grid-auto-columns: 100%; }
    .ventajas ul { grid-template-columns: minmax(0, 1fr); }
    .cotizacion .formulario__campo--mitad { grid-column: 1 / -1; }
}

@media (max-width: 359px) {
    .pestanas__lista a { padding: 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
    .encabezado, .pie, .whatsapp, .catalogo__lateral, .paginacion, .tarjeta__cotizar, .boton-cotizar, .portada__flecha, .carrusel__flecha { display: none !important; }
}