/**
 * Estilo visual «Conibe Group» — reproduce la web original de conibe.com (Joomla, migrada a Netkipu el
 * 12-oct-2026). Solo la usa Conibe: cabecera azul marino con el menú visible (el original solo tenía ☰),
 * carrusel a todo el ancho, «Nuestros productos» en tarjetas azul marino con el nombre abajo, títulos con
 * subrayado amarillo, portadillas y listados con foto sobre gris + banda azul marino, y pie azul.
 * Colores: azul marino #0f263a · azul pie #13314c · amarillo #f7be3d.
 */
html.skin-conibe body { background: #fff; }

/* ===== Cabecera: la web original no muestra «Iniciar sesión» (el panel sigue en /admin) ===== */
:host(site-header) .utility, :host(site-header) [data-login-actions] { display: none !important; }
:host(site-header) ul.menu > .item > a { font-weight: 500; letter-spacing: .03em; }
:host(site-header) ul.menu > .item:last-child > a { background: none; color: #fff; border-radius: 0; box-shadow: none; }
:host(site-header) ul.menu > .item:last-child > a:hover, :host(site-header) ul.menu > .item:last-child > a.is-current { color: #f7be3d; }

/* ===== Títulos de sección: mayúsculas, azul marino y subrayado amarillo corto (como el original) ===== */
:host(site-iconos) .title, :host(site-freeform) .pb-text h2 { position: relative; font-weight: 700; letter-spacing: .01em; color: #0f263a; padding-bottom: .7rem; }
:host(site-iconos) .title::after, :host(site-freeform) .pb-text h2::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: #f7be3d; border-radius: 2px; }

/* ===== Franja de logos ===== */
:host(site-marcas) .strip { border: 0; }

/* ===== «Nuestros productos»: tarjeta azul marino, foto arriba y el nombre blanco abajo con línea azul ===== */
:host(site-iconos[data-anchor="nuestros-productos"]) .grid.cards { gap: 1.2rem; }
:host(site-iconos[data-anchor="nuestros-productos"]) .scard { background: #0f263a; border-radius: 0; padding: 0; overflow: hidden;
    background-image: linear-gradient(135deg, rgba(255,255,255,.08) 0 38%, transparent 38% 100%); }
:host(site-iconos[data-anchor="nuestros-productos"]) .scard .ph { background: transparent; border-radius: 0; height: 190px; padding: 1rem 1rem 0; }
:host(site-iconos[data-anchor="nuestros-productos"]) .scard .ph img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
:host(site-iconos[data-anchor="nuestros-productos"]) a.scard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 38, 58, .35); }
:host(site-iconos[data-anchor="nuestros-productos"]) a.scard:hover .ph img { transform: scale(1.06); }
:host(site-iconos[data-anchor="nuestros-productos"]) .scard .cn { color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .03em;
    text-align: center; padding: .55rem .5rem .8rem; margin: 0 .9rem; border-top: 2px solid #2f6db3; }

/* ===== «Nuestro compromiso»: cada punto en su recuadro con el ícono de persona, como el acordeón original ===== */
:host(site-freeform[data-anchor="compromiso"]) .pb-text h3 { font-size: .9rem; font-weight: 600; color: #333; margin: .9rem 0 .3rem;
    padding: .55rem .8rem; border: 1px solid #e3e6ea; border-radius: 3px; background: #fafbfc; }
:host(site-freeform[data-anchor="compromiso"]) .pb-text h3::before { content: "👤"; margin-right: .45rem; font-size: .8rem; }
:host(site-freeform[data-anchor="compromiso"]) .pb-text p { font-size: .86rem; color: #555; margin: .3rem .8rem .2rem; }
:host(site-freeform[data-anchor="compromiso"]) .pb-img img { border-radius: 0; }

/* ===== Banner de equipos: a todo el ancho, sin márgenes ===== */
html.skin-conibe #banner-equipos, html.skin-conibe #qs-banner { padding: 0 !important; }
:host(site-freeform[data-anchor="banner-equipos"]) .free, :host(site-freeform[data-anchor="qs-banner"]) .free { max-width: none; padding: 0; }
:host(site-freeform[data-anchor="banner-equipos"]) .pb-img img, :host(site-freeform[data-anchor="qs-banner"]) .pb-img img { width: 100% !important; border-radius: 0; display: block; }

/* ===== Portadillas (Productos, Accesorios, Otros productos): foto sobre gris + banda azul marino con el nombre ===== */
:host(site-iconos[data-anchor^="port-"]) .stage { min-height: 0; }
:host(site-iconos[data-anchor^="port-"]) .title { font-size: 1.4rem; }
:host(site-iconos[data-anchor^="port-"]) .grid.cards { gap: 1.8rem 1.6rem; }
:host(site-iconos[data-anchor^="port-"]) .scard { background: transparent; padding: 0; border-radius: 0; }
:host(site-iconos[data-anchor^="port-"]) a.scard:hover { transform: none; box-shadow: none; }
:host(site-iconos[data-anchor^="port-"]) .scard .ph { height: 190px; background: #efefef; border-radius: 0; padding: .6rem; }
:host(site-iconos[data-anchor^="port-"]) .scard .ph img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
:host(site-iconos[data-anchor^="port-"]) a.scard:hover .ph img { transform: scale(1.05); }
:host(site-iconos[data-anchor^="port-"]) .scard .cn { background: #0f263a; color: #fff; text-transform: none; font-weight: 700; font-size: .85rem;
    padding: .55rem .5rem; margin: 0; min-height: 2.4rem; display: grid; place-items: center; text-align: center; }

/* ===== Catálogo (listados por categoría): como las «listas» del original ===== */
:host(site-catalogo) .card { border: 0; background: transparent; box-shadow: none !important; transform: none !important; border-radius: 0; }
:host(site-catalogo) .card .cat, :host(site-catalogo) .card .price { display: none; }
:host(site-catalogo) .card .thumb { background: #efefef; border-radius: 0; padding: .6rem; aspect-ratio: 1; height: auto; }
:host(site-catalogo) .card .thumb img { object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
:host(site-catalogo) .card:hover .thumb img { transform: scale(1.05); }
:host(site-catalogo) .card .body { background: #0f263a; padding: .55rem .6rem; text-align: center; }
:host(site-catalogo) .card .brand { color: #f7be3d; font-size: .7rem; }
:host(site-catalogo) .card .name { color: #fff; font-size: .85rem; font-weight: 700; text-transform: uppercase; margin: .1rem 0 0; }
:host(site-catalogo) .card .sum { display: none; }
:host(site-catalogo) .crumbs a, :host(site-product-page) .crumbs a { color: #2f6db3; }

/* ===== Páginas de texto ===== */
:host(site-freeform) .pb-text { font-size: .93rem; line-height: 1.7; color: #333; text-align: justify; }
:host(site-freeform) .pb-text h2 { font-size: 1.45rem; margin: 1.4rem 0 .9rem; text-align: left; }
:host(site-freeform) .pb-row:first-child .pb-text h2:first-child { margin-top: 0; }
:host(site-freeform[data-anchor="qs-contenido"]) .pb-img img { border-radius: 0; }

/* ===== Celular ===== */
@media (max-width: 640px) {
    :host(site-slideshow) .stage:not(.split-stage) { aspect-ratio: 1920 / 700 !important; }
}
@media (max-width: 900px) {
    :host(site-iconos[data-anchor="nuestros-productos"]) .grid.cards,
    :host(site-iconos[data-anchor^="port-"]) .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .8rem; }
    :host(site-iconos[data-anchor="nuestros-productos"]) .scard .ph,
    :host(site-iconos[data-anchor^="port-"]) .scard .ph { height: 140px; }
}

/* 🪨 En la caja de foto (grid) «height:100%» no limita la imagen: se acota con max-* para verla completa. */
:host(site-iconos[data-anchor^="port-"]) .scard .ph,
:host(site-iconos[data-anchor="nuestros-productos"]) .scard .ph { display: flex; align-items: center; justify-content: center; }
:host(site-iconos[data-anchor^="port-"]) .scard .ph img,
:host(site-iconos[data-anchor="nuestros-productos"]) .scard .ph img { width: auto; height: auto; max-width: 100%; max-height: 100%; }

/* ===== Catálogo: nombre y marca centrados en la banda azul (pedido del cliente) ===== */
:host(site-catalogo) .card .body, :host(site-catalogo) .card .name, :host(site-catalogo) .card .brand { text-align: center !important; }

/* ===== Pie (diseño «Libre»), como el original: texto justificado, redes grandes en fila, logos de bancos ===== */
:host(site-footer) .cols-free .pb-row { gap: 2.2rem; }
:host(site-footer) .cols-free .pb-text { font-size: .9rem; line-height: 1.6; }
:host(site-footer) .cols-free .pb-text p { margin: 0 0 .85rem; }
:host(site-footer) .cols-free .pb-col:first-child .pb-text { text-align: justify; }
:host(site-footer) .cols-free .pb-text h3 { font-size: 1.45rem; font-weight: 400; margin: 0 0 1.1rem; }
:host(site-footer) .cols-free .pb-text ul { list-style: none; margin: 0; padding: 0; }
:host(site-footer) .cols-free .pb-text li { margin: 0 0 .55rem; }
:host(site-footer) .cols-free .pb-text a:hover { color: #f7be3d; }
/* Línea separadora antes de «SÍGUENOS EN:» */
:host(site-footer) .cols-free .pb-col:first-child .pb-text:nth-of-type(3) { border-top: 1px solid rgba(255,255,255,.45); padding-top: 1.1rem; margin-top: .6rem; }
/* Redes: los tres íconos en fila, grandes (60 px), como el original. */
:host(site-footer) .cols-free .pb-col:first-child { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.1rem; }
:host(site-footer) .cols-free .pb-col:first-child > * { flex: 0 0 100%; }
:host(site-footer) .cols-free .pb-col:first-child > .pb-img.a-center { flex: 0 0 auto; margin: 0; }
:host(site-footer) .cols-free .pb-col:first-child > .pb-img.a-center img { width: 60px !important; height: 60px; transition: transform .2s ease; }
:host(site-footer) .cols-free .pb-col:first-child > .pb-img.a-center a:hover img { transform: scale(1.08); }
/* Logos de bancos con fondo propio, sin redondeo. */
:host(site-footer) .cols-free .pb-img img { border-radius: 0; }

/* ===== Pie: enlaces sin subrayado (como el original) ===== */
:host(site-footer) .cols-free .pb-text a { text-decoration: none; }

/* ===== Contáctenos, como el original: 3 columnas; ícono oscuro a la izquierda del título y el texto debajo ===== */
:host(site-iconos[data-anchor="contacto-datos"]) .stage { min-height: 0; }
:host(site-iconos[data-anchor="contacto-datos"]) .title { font-size: 1.75rem; margin-bottom: 2rem; }
:host(site-iconos[data-anchor="contacto-datos"]) .grid { gap: 2.4rem 2rem; }
:host(site-iconos[data-anchor="contacto-datos"]) .item { display: grid; grid-template-columns: 38px 1fr; column-gap: .55rem; text-align: left; align-items: center; }
:host(site-iconos[data-anchor="contacto-datos"]) .ico { margin: 0; justify-content: center; }
:host(site-iconos[data-anchor="contacto-datos"]) .ico svg { width: 30px; height: 30px; }
:host(site-iconos[data-anchor="contacto-datos"]) .it-title { font-size: 1rem; font-weight: 700; margin: 0; text-transform: none; }
:host(site-iconos[data-anchor="contacto-datos"]) .it-text { grid-column: 2; font-size: .9rem; line-height: 1.75; margin-top: .35rem; }
/* El mapa sin título (como el original) */
:host(site-mapa[data-anchor="contacto-mapa"]) h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Formulario a todo el ancho sobre gris claro, con el título subrayado en amarillo */
html.skin-conibe #contacto-formulario { background: #f1f5f9; }
:host(site-contact[data-anchor="contacto-formulario"]) .cols { grid-template-columns: 1fr; gap: 1.2rem; }
:host(site-contact[data-anchor="contacto-formulario"]) h2 { position: relative; font-size: 1.6rem; color: #333; padding-bottom: .7rem; margin-bottom: .2rem; }
:host(site-contact[data-anchor="contacto-formulario"]) h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: #f7be3d; }
:host(site-contact[data-anchor="contacto-formulario"]) .info { display: none; }
:host(site-contact[data-anchor="contacto-formulario"]) form { border-radius: 4px; background: #fff; }
:host(site-contact[data-anchor="contacto-formulario"]) .btn-primary { background: #0f263a; border-radius: 4px; justify-self: start; padding-inline: 2.4rem; }
@media (max-width: 900px) {
    :host(site-iconos[data-anchor="contacto-datos"]) .grid { grid-template-columns: 1fr; }
}