/**
 * Estilo visual «Geomas Group» — reproduce la web original de geomasgroup.com (Joomla 3, plantilla mx_joomla175
 * «orange», migrada a Netkipu el 17-oct-2026). Solo la usa ese cliente: barra superior gris con los celulares, logo
 * (letras blancas) sobre un bloque naranja inclinado, cabecera gris clara con el menú en MAYÚSCULAS y el activo en
 * naranja, «Productos» = mosaicos durazno con la etiqueta marrón, franja naranja (servicio técnico + mapa + quiénes
 * somos) y pie oscuro con barra naranja.
 * Colores: naranja #F29400 · barra #555 · cabecera #f1f1f1 · mosaico #fedfb3 / etiqueta #a17f59 · pie #2e2e2e.
 */
html.skin-geomas body { background: #fff; }

/* ===== Cabecera ===== */
:host(site-header) {
    background: #f1f1f1 !important; border-bottom: 3px solid #F29400 !important; box-shadow: none;
    --site-text: #333 !important;
}
:host(site-header) .inner { padding-top: 0; padding-bottom: 0; align-items: flex-end; row-gap: 0; }
/* Barra gris de borde a borde con los celulares (texto blanco, centrado). Sin «Iniciar sesión» (el panel sigue en /admin). */
:host(site-header) .utility {
    background: #555; box-shadow: 0 0 0 100vmax #555; clip-path: inset(0 -100vmax); min-height: 38px;
    justify-content: center; color: #fff;
}
:host(site-header) .utility .branches-wrap { flex: 1; display: flex; justify-content: center; }
:host(site-header) .utility .top-text { color: #fff; font-weight: 700; font-size: .8rem; }
:host(site-header) .util-right, :host(site-header) .utility site-login, :host(site-header) [data-login-actions] { display: none !important; }
/* Logo sobre el bloque naranja inclinado que sube hasta la barra gris y llega al borde izquierdo (como el original). */
:host(site-header) .brand {
    position: relative; z-index: 2; align-self: stretch; margin-top: -38px; padding: .55rem 3.2rem .55rem 0;
    background: #F29400; box-shadow: 0 0 0 100vmax #F29400;
    clip-path: polygon(-100vmax 0, calc(100% - 26px) 0, 100% 34%, 100% 100%, -100vmax 100%);
}
/* Menú: pestañas en MAYÚSCULAS, el activo con fondo naranja y letras blancas. */
:host(site-header) ul.menu { gap: 0; }
:host(site-header) ul.menu > .item > a {
    font-weight: 400; color: #333; padding: .95rem 1rem; border-radius: 0; border-bottom: 0 !important; white-space: nowrap;
}
:host(site-header) ul.menu > .item > a:hover,
:host(site-header) ul.menu > .item > a.active,
:host(site-header) ul.menu > .item > a[aria-current="page"] { background: #F29400; color: #fff !important; }

/* ===== Carrusel: etiqueta oscura arriba («ESTACIÓN TOTAL»), el modelo sobre fondo naranja y «Leer más» claro ===== */
:host(site-slideshow) .panel.ts-box { background: none !important; box-shadow: none !important; backdrop-filter: none !important; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
:host(site-slideshow) .panel .st {
    order: -1; margin: 0; background: rgba(30, 30, 30, .78); color: #fff !important; text-transform: uppercase; letter-spacing: .08em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: clamp(.8rem, 1.4vw, 1.15rem); padding: .45rem 1.6rem;
}
:host(site-slideshow) .panel .t { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
:host(site-slideshow) .panel .t .hl { background: #F29400; color: #fff; padding: .1rem 1rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:host(site-slideshow) .panel .slide-cta {
    background: linear-gradient(#fff, #e6e6e6); color: #333; border-radius: 4px; padding: .45rem 1.1rem; font-size: .85rem; font-weight: 400; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
:host(site-slideshow) .panel .slide-cta span { display: none; }
:host(site-slideshow) .panel .t:empty, :host(site-slideshow) .panel .st:empty { display: none; }

/* ===== Portada · «Productos»: mosaicos durazno con la etiqueta marrón (4 por fila) ===== */
html.skin-geomas .site-section[data-anchor="productos"], html.skin-geomas #productos { background: #fff3e2 !important; }
:host(site-iconos[data-anchor="productos"]),
:host(site-iconos[data-anchor="productos"]) .stage { background: transparent !important; }
:host(site-iconos[data-anchor="productos"]) .title {
    color: #333 !important; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-align: left;
}
:host(site-iconos[data-anchor="productos"]) .title::after { content: ""; display: block; width: 46px; height: 3px; background: #F29400; margin-top: .55rem; }
:host(site-iconos[data-anchor="productos"]) .grid.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.4rem; }
:host(site-iconos[data-anchor="productos"]) .scard {
    background: #fedfb3; padding: 1rem 0 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}
:host(site-iconos[data-anchor="productos"]) a.scard:hover { transform: none; box-shadow: 0 8px 20px rgba(161, 127, 89, .3); }
:host(site-iconos[data-anchor="productos"]) .scard .ph { height: 190px; background: transparent; border-radius: 0; }
:host(site-iconos[data-anchor="productos"]) .scard .ph img { object-fit: contain; transition: transform .25s ease; }
:host(site-iconos[data-anchor="productos"]) a.scard:hover .ph img { transform: scale(1.06); }
:host(site-iconos[data-anchor="productos"]) .scard .cn {
    background: #a17f59; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: .85rem;
    text-transform: none; text-align: center; padding: 1.05rem .6rem; margin-top: 1rem; border-radius: 0; width: 100%; box-sizing: border-box;
}

/* ===== Franja naranja: servicio técnico + mapa y «quiénes somos» ===== */
/* (La sección «quienes» se rehízo en 3 columnas el 21-oct: ver más abajo; aquí solo queda el mapa suelto.) */
html.skin-geomas .site-section[data-anchor="ubicacion"], html.skin-geomas #ubicacion { background: #F29400 !important; }
:host(site-mapa[data-anchor="ubicacion"]) { background: #F29400; color: #fff; }
:host(site-mapa[data-anchor="ubicacion"]) h2 { color: #fff; }

/* ===== Páginas (Quiénes somos, Servicio técnico) ===== */
:host(site-freeform) .pb-text { font-size: .98rem; line-height: 1.65; color: #555; }
:host(site-freeform) .pb-text p { text-align: justify; }
:host(site-freeform) .pb-text h2 { color: #333; font-weight: 700; }
:host(site-freeform) .pb-text h2::after { content: ""; display: block; width: 46px; height: 3px; background: #F29400; margin-top: .55rem; }
:host(site-freeform) .pb-text h3 { color: #336699; font-size: 1.05rem; font-weight: 700; }
:host(site-freeform) .pb-text h4 { text-align: center; font-weight: 700; }
:host(site-freeform) .pb-img img { border-radius: 0; }

/* ===== Pie: oscuro, títulos blancos con raya naranja, barra naranja ===== */
:host(site-footer) h3 { position: relative; padding-bottom: .5rem; text-transform: uppercase; font-size: .95rem; }
:host(site-footer) h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: #F29400; }
:host(site-footer) a { color: #fff; }
/* Facebook y WhatsApp en UNA fila, a 40 px (como el original). */
:host(site-footer) .pb-text + .pb-img, :host(site-footer) .pb-img + .pb-img { display: inline-block !important; margin: 0 .8rem .4rem 0; vertical-align: middle; }
:host(site-footer) .pb-img img[data-w="16"] { width: 40px !important; height: 40px; object-fit: contain; }
:host(site-footer) .pb-img a:has(img[data-w="16"]) { display: inline-block; width: auto; }
:host(site-footer) .subfooter { min-height: 0 !important; padding: .9rem 1.25rem 1rem !important; }
:host(site-footer) .subfooter .inner { min-height: 0 !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center; }
:host(site-footer) .subfooter p { margin: 0; font-size: .9rem; }

/* ===== Celular ===== */
@media (max-width: 900px) {
    :host(site-header) .brand { margin-top: 0; align-self: center; padding-right: 2.2rem; }
    :host(site-iconos[data-anchor="productos"]) .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .7rem; }
    :host(site-iconos[data-anchor="productos"]) .scard .ph { height: 120px; }
    :host(site-iconos[data-anchor="productos"]) .scard .cn { font-size: .75rem; padding: .75rem .4rem; }
}

/* ===== Carrusel: títulos largos («Nivel TOPCON AT B4A») en varias líneas sin que las franjas naranjas se monten
   (el interlineado 1.12 era menor que el alto del fondo de cada línea). 21-oct-2026 ===== */
:host(site-slideshow) .panel .t { line-height: 1.38; }

/* ===== Catálogo (/productos) y ficha de producto: fondo de polígonos naranjas de la web original
   (/images/Naranja.png) y tarjetas como en el original: imagen sobre durazno + banda marrón con el nombre. ===== */
:host(site-catalogo), :host(site-product-page) {
    background: #f39200 url('/assets/img/skins/geomas-fondo.png') center top / 100% auto repeat-y;
}
:host(site-catalogo) h1 { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; color: #333; }
:host(site-catalogo) .sub, :host(site-catalogo) .count { color: #3b2a12; }
:host(site-catalogo) .filters { background: rgba(255, 255, 255, .88); border: 0; }
:host(site-catalogo) .btn { background: #a17f59; }
:host(site-catalogo) .btn.ghost { background: #fff; color: #a17f59; border-color: #a17f59; }
:host(site-catalogo) .grid { gap: 2.2rem 2rem; }
:host(site-catalogo) .card { background: #fedfb3; border: 0; border-radius: 0; box-shadow: none; }
:host(site-catalogo) .card:hover { transform: none; box-shadow: 0 8px 20px rgba(80, 50, 10, .35); }
:host(site-catalogo) .card .cat, :host(site-catalogo) .card .brand { display: none; }
:host(site-catalogo) .card .thumb { background: #fedfb3; height: 215px; padding: 1rem 1rem .9rem; }
:host(site-catalogo) .card .thumb img { transition: transform .25s ease; }
:host(site-catalogo) .card:hover .thumb img { transform: scale(1.05); }
:host(site-catalogo) .card .body { background: #a17f59; flex: 0 0 auto; padding: 1.05rem .6rem; justify-content: center; }
:host(site-catalogo) .card .name {
    color: #fff; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85rem; font-weight: 700;
}
:host(site-catalogo) .card .price:empty { display: none; }
:host(site-catalogo) .card .price { color: #fff; text-align: center; }
:host(site-catalogo) .subcat { background: #fedfb3; border: 0; border-radius: 0; }
:host(site-catalogo) .subcat .sph { background: #fedfb3; }
:host(site-catalogo) .subcat .sname { background: #a17f59; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
@media (max-width: 760px) {
    :host(site-catalogo) .grid { gap: 1.2rem .9rem; }
    :host(site-catalogo) .card .thumb { height: 170px; }
}

/* ===== Carrusel principal con la proporción de SUS imágenes (1440×610): con la general (1600×600) se recortaba arriba
   y abajo y el logo de la marca (SOUTH, FOIF…), pegado al borde superior, salía cortado. Solo en pantallas anchas:
   en móvil sigue el formato vertical del núcleo. ===== */
@media (min-width: 641px) {
    :host(site-slideshow) .stage:not(.split-stage) { aspect-ratio: 1440 / 610 !important; }
}

/* ===== «Servicio técnico · mapa · quiénes somos» en TRES columnas sobre el fondo de polígonos, como el original
   (sección libre «quienes»: col. 1 franja + imagen, col. 2 mapa alto, col. 3 foto + texto). 21-oct-2026 ===== */
html.skin-geomas .site-section[data-anchor="quienes"], html.skin-geomas #quienes {
    background: #f39200 url('/assets/img/skins/geomas-fondo.png') center / cover !important;
}
:host(site-freeform[data-anchor="quienes"]) .free { max-width: 1290px; padding-top: 2.6rem; padding-bottom: 2.6rem; }
:host(site-freeform[data-anchor="quienes"]) .pb-row { gap: 1.3rem; align-items: stretch; }
:host(site-freeform[data-anchor="quienes"]) .pb-col:first-child .pb-text {
    background: #b45c00; color: #fff; text-align: center; padding: .65rem .8rem .7rem; margin-top: 1.2rem;
    font-family: "Times New Roman", Times, Georgia, serif;
}
:host(site-freeform[data-anchor="quienes"]) .pb-col:first-child .pb-text h3 { color: #fff; margin: 0; font-size: 1.15rem; font-weight: 700; }
:host(site-freeform[data-anchor="quienes"]) .pb-col:first-child .pb-text p { margin: 0; font-size: .9rem; }
:host(site-freeform[data-anchor="quienes"]) .pb-map .pb-mframe { aspect-ratio: auto; height: 550px; }
:host(site-freeform[data-anchor="quienes"]) .pb-map .pb-mlink { color: #fff; }
:host(site-freeform[data-anchor="quienes"]) .pb-col:last-child .pb-text {
    color: #000; text-align: center; font-family: "Times New Roman", Times, Georgia, serif; font-weight: 700;
    font-size: 1.06rem; line-height: 1.35;
}
:host(site-freeform[data-anchor="quienes"]) .pb-col:last-child .pb-text p { margin: .2rem 0 0; }
@media (max-width: 760px) {
    :host(site-freeform[data-anchor="quienes"]) .pb-map .pb-mframe { height: 340px; }
}

/* ===== Página «Servicio técnico»: las dos fotos de arriba al MISMO nivel (proporciones distintas: 620×380 y 425×319)
   → misma proporción con recorte centrado. 21-oct-2026 ===== */
:host(site-freeform[data-anchor="servicio-tecnico-contenido"]) .pb-row:first-child .pb-img img {
    width: 100% !important; aspect-ratio: 620 / 380; height: auto; object-fit: cover; object-position: center;
}

/* ===== Ajustes 21-oct (2.ª ronda) ===== */
/* Tres columnas: sin el naranja liso del diseño anterior (tapaba los polígonos), franja centrada y texto en negro. */
:host(site-freeform[data-anchor="quienes"]) { background: transparent; color: #000; }
:host(site-freeform[data-anchor="quienes"]) .pb-col:first-child .pb-text p { text-align: center; }
:host(site-freeform[data-anchor="quienes"]) .pb-col:last-child .pb-text p { color: #000; text-align: center !important; }
/* Ruta de navegación sobre el fondo naranja (los enlaces naranjas no se veían). */
:host(site-catalogo) .crumbs, :host(site-product-page) .crumbs { color: #3b2a12; }
:host(site-catalogo) .crumbs a, :host(site-product-page) .crumbs a { color: #5a3a10; font-weight: 600; }
/* Ficha de producto: COTIZAR en el marrón de Geomas (era naranja sobre naranja) y etiquetas legibles. */
:host(site-product-page) .btn-cotizar { background: #6b4a24; color: #fff; box-shadow: 0 3px 10px rgba(60, 35, 5, .35); }
:host(site-product-page) .btn-cotizar:hover, :host(site-product-page) .btn-cotizar:focus-visible { background: #553a1b; }
:host(site-product-page) .pill { background: #fff; color: #6b4a24; }
/* «También te puede interesar» como las tarjetas del catálogo: imagen sobre durazno + banda marrón. */
:host(site-product-page) .related h2 { color: #333; }
:host(site-product-page) .rel-card { background: #fedfb3; border: 0; border-radius: 0; }
:host(site-product-page) .rel-card:hover { transform: none; box-shadow: 0 8px 20px rgba(80, 50, 10, .35); }
:host(site-product-page) .rel-thumb { background: #fedfb3; height: 215px; padding: 1rem; }
:host(site-product-page) .rel-body { background: #a17f59; flex: 0 0 auto; padding: 1rem .6rem; align-items: center; justify-content: center; }
:host(site-product-page) .rel-title { color: #fff; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85rem; }
:host(site-product-page) .rel-body > :not(.rel-title) { display: none; }