/*
    Protegido por H2 ELECTRY
    Versión 6.9993
    Archivo incluido en paquete INDAUTOR
*/

/*
    H2 ELECTRY · División TI
    Versión 3.5 – style.css
    Estilos locales, sin frameworks externos.

    Core site styles.
    Generado para H2 ELECTRY Web site — Versión 6.9993.
    
*/

html, body {
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #0a0a0a;
    background: linear-gradient(180deg, #e9f5ff 0%, #eefbf3 100%);
}

/* Watermark tunables: adjust these to change logo visibility and color intensity */
:root {
    --wm-opacity: 0.48; /* increased opacity for stronger visibility */
    --wm-saturate: 2.0; /* make colors pop more */
    --wm-bright: 1.06;
    --wm-contrast: 1.08;
    --wm-width: 460px;  /* slightly larger watermark */
    --wm-height: 208px;
}

/* Utilidades */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    left: -9999px;
}

/* Encabezado */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(90deg, #0b4aa8, #0f9d58);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    /* reduce vertical size by ~25% */
    padding: 7.5px 20px;
    /* ensure header spans full width regardless of container alignment */
    width: 100%;
    box-sizing: border-box;
}

/* ...existing code... */

/* Header logo policy: show only the decorative sun/column icon in the header.
   Hide any inline image logo (.logo-empresa) and any header pseudo-element
   so the header contains only the sun icon across the site. */
.site-header .logo-empresa { display: none !important; }
.site-header::before { display: none !important; content: none !important; }
.site-header .logo-icon { display: flex !important; }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-weight: 800;
    letter-spacing: .5px;
}

.captcha .op {
    font-weight: 800;
    color: #0b5ed7; /* primary */
    background: rgba(11,94,215,0.08);
    padding: 0 4px;
    border-radius: 3px;
}
.brand-division {
    font-size: .85rem;
    opacity: .9;
}

/* Logo CSS: realistic sun + three metallic bars on each side (symmetrical) */
.logo-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 25% smaller to match reduced header height */
    width: 75px;
    height: 24px;
}

/* Header image logo: use the SVG as an inline image in header for consistent rendering */
.logo-header {
    /* reduced by 25% so header band is thinner while logo stays prominent */
    height: 66px;
    max-height: 66px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

/* ...existing code... */

/* prefer .logo-header in header; keep .logo-icon available as fallback for very old browsers */
.site-header .logo-icon { display: none !important; }
.site-header .logo-header { display: block !important; }

/* Force the decorative sun/column icon visible in the header and hide the image logo there */
.site-header .logo-icon { display: flex !important; }
.site-header .logo-empresa { display: none !important; }

.logo-icon .sun {
    position: relative;
    z-index: 3;
    /* scale down the decorative sun by 25% */
    width: 22.5px;
    height: 22.5px;
    border-radius: 50%;
    /* realistic sun: bright center, warm rim and subtle glow */
    background: radial-gradient(circle at 35% 30%, #fff8d6 0%, #FFD54A 25%, #FFB300 60%, #FF8F00 100%);
    box-shadow: 0 6px 18px rgba(255,148,20,0.28), 0 0 8px rgba(255,200,90,0.18) inset, 0 1px 0 rgba(255,255,255,0.6) inset;
    border: 1px solid rgba(255,170,60,0.35);
}

/* Use pseudo-elements to draw symmetric groups of three metallic bars at ~21° */
.logo-icon::before,
.logo-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px; /* slightly thicker, square-edged columns */
    height: 28px;
    border-radius: 0; /* square edges */
    /* stainless steel gradient */
    background: linear-gradient(180deg, #f4f5f6 0%, #d8dadd 45%, #bfc3c6 55%, #9fa2a6 100%);
    /* 3D feel: small outer shadow and subtle inset highlights */
    box-shadow: 0 2px 5px rgba(0,0,0,0.16), inset 2px 0 6px rgba(255,255,255,0.65), inset -2px 0 6px rgba(0,0,0,0.06);
    transform-origin: center;
}

/* Left group: base bar then two duplicates via box-shadow spaced symmetrically */
.logo-icon::before {
    /* move group slightly closer to the sun compared to prior placement */
    left: calc(50% - 25px);
    /* pivot from center so bars are vertical (no inclination) */
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    /* three columns with increased spacing between them (~+33%) */
    box-shadow: -15px 0 0 #cfcfd1, -30px 0 0 #afb1b4, 0 2px 6px rgba(0,0,0,0.16);
}

/* Right group: mirrored, vertical bars (no inclination) */
.logo-icon::after {
    left: calc(50% + 25px);
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    box-shadow: 15px 0 0 #cfcfd1, 30px 0 0 #afb1b4, 0 2px 6px rgba(0,0,0,0.16);
}

/* Reduce size slightly on small screens */
@media (max-width: 420px) {
    .logo-icon { width: 80px; height: 28px; }
    .logo-icon .sun { width: 24px; height: 24px; }
    .logo-icon::before, .logo-icon::after { height: 24px; width: 7px; }
    .logo-icon::before { left: calc(50% - 22px); transform-origin: 100% 50%; box-shadow: -11px 0 0 #cfcfd1, -22px 0 0 #afb1b4, 0 1px 3px rgba(0,0,0,0.12); }
    .logo-icon::after { left: calc(50% + 22px); transform-origin: 0% 50%; box-shadow: 11px 0 0 #cfcfd1, 22px 0 0 #afb1b4, 0 1px 3px rgba(0,0,0,0.12); }
}

/* Logo de empresa (imagen) */
.logo-empresa {
    height: 46px; /* default size when used in header or elsewhere */
    object-fit: contain;
    opacity: .98;
}

/* Hide the image logo in the page header so the decorative sun/columns icon is visible.
   The image logo is still used in the cart header via .cart-header .logo-empresa */
.site-header .logo-empresa {
    display: none !important;
}

/* show a compact version of the logo in the cart header */
.cart-header .logo-empresa {
    display: block !important;
    height: 70px; /* increased ~21% from 45px to make the logo more prominent */
    width: 155px;
    object-fit: contain;
    opacity: 1;
    margin-left: 8px;
    margin-right: 8px;
    /* ensure it does not overflow the cart header when container is narrow */
    max-width: 55%;
}

/* Menú */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.main-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .2s ease;
}

    .main-nav a:hover, .main-nav a.active {
        background: rgba(255,255,255,.15);
    }

/* Barra herramientas (idioma, moneda, carrito) */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-switch .btn {
    min-width: 44px;
}

.currency-box input {
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 8px;
    padding: 6px 8px;
    width: 110px;
}

#currency {
    width: 120px;
}

/* Currency select and other input */
.currency-select {
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 8px;
    padding: 6px 8px;
    height: 36px;
    color: #0a0a0a;
}
.currency-other {
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 8px;
    padding: 6px 8px;
    width: 160px;
}

/* Breadcrumb */
.breadcrumb {
    padding: 10px 20px;
    color: #124a97;
    font-size: .95rem;
    background: #f4fbff;
    border-top: 1px solid #d6ecff;
    border-bottom: 1px solid #d6ecff;
}

/* Contenedor principal */
.container {
    padding: 24px 20px 40px;
    /* Center content by default; product/service pages will be left-aligned via a scoped rule below */
    max-width: 1120px; /* reasonable content width for desktop */
    width: calc(100% - 40px);
    margin: 0 auto;
}
     /* Left-align container only on products/services pages so index remains centered */
     body[data-page="products"] .container,
     body[data-page="services"] .container {
         /* Left-align the site so cards/media have more horizontal space for descriptions */
         max-width: none; /* allow full width */
         width: calc(100% - 40px);
         margin-left: 0; /* align to left edge */
         margin-right: auto;
     }

/* Accessible form layout for contact/booking pages */
.form-centered {
    max-width: 780px;
    margin: 16px auto;
    background: #ffffff;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border: 1px solid #e6eef6;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.form-row label {
    font-weight: 700;
    color: #0b4aa8;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
    padding: 12px 14px;
    border-radius: 10px;
    border: 2px solid #cfd8dc;
    font-size: 1.05rem;
    background: #fff;
    color: #0b2540;
}

.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
    outline: none;
    border-color: #0b4aa8;
    box-shadow: 0 6px 18px rgba(11,74,168,0.12);
}

.contact-form .btn, .booking-form .btn {
    padding: 12px 16px;
    font-size: 1.05rem;
}

/* Ensure ghost buttons are visible on white form backgrounds */
.contact-form .btn-ghost,
.booking-form .btn-ghost {
    background: #ffffff;
    color: #0b4aa8;
    border: 1px solid #dfe8ef;
}
.contact-form .btn-ghost:hover,
.booking-form .btn-ghost:hover {
    background: #f4f8ff;
}

/* For better visibility, increase card font sizes slightly on desktop */
@media (min-width: 900px) {
    .card h3 { font-size: 1.15rem; }
    .card p { font-size: 0.98rem; }
}

/* Hero */
.hero {
    background: linear-gradient(90deg, rgba(11,74,168,.1), rgba(15,157,88,.1));
    border: 1px solid #d9f0ff;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

    .hero h1 {
        font-size: 1.9rem;
        margin-bottom: 10px;
        color: #0b4aa8;
    }

    .hero p {
        color: #114b2e;
        opacity: .9;
    }

.hero-cta {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Secciones */
.section {
    margin-top: 28px;
}

.section-title {
    color: #0b4aa8;
    margin-bottom: 14px;
}

/* Partners / Providers styling */
.partners-list {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 128px;
    padding: 8px 6px;
    box-sizing: border-box;
}
.partner-logo {
    max-height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
}
.partner-note {
    font-size: 12px;
    color: #475569;
    margin-top: 6px;
    text-align: center;
}

@media (max-width: 720px) {
    .partner-item { width: 100px; padding: 6px; }
    .partner-logo { max-height: 46px; }
}

/* Grid de tarjetas */
.grid {
    display: grid;
    gap: 16px;
    /* default grid for index and other pages */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Wider grid only on products/services pages */
body[data-page="products"] .grid,
body[data-page="services"] .grid {
    gap: 12px;
    grid-template-columns: 1fr; /* one wide column to match homepage row style */
}

/* Catalog panel (used on products/services pages) */
.catalog-panel {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.catalog-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}
.catalog-filter-bar .catalog-filter-input {
    flex: 1 1 auto;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cfd8dc;
}
.catalog-filter-bar .btn {
    padding: 8px 10px;
}

/* Make the 'Mostrar todos' clear button visible on white backgrounds */
.catalog-filter-bar .catalog-filter-clear {
    background: #f4f6f8; /* subtle light background */
    color: #0b4aa8;      /* primary blue text */
    border: 1px solid #dfe8ef;
}
.catalog-filter-bar .catalog-filter-clear:hover {
    background: #e9f2fb;
}
.catalog-list {
    flex: 1 1 50%;
    background: #fff;
    border: 1px solid #e6eef6;
    border-radius: 10px;
    padding: 8px;
    max-height: 520px; /* allow scrolling when long */
    overflow: auto;
}
/* Catalog row layout is defined in a unified block later for 4-column layout.
    Avoid redefining grid-template-columns here to prevent overrides. */
.catalog-group {
    margin-bottom: 14px;
}
.catalog-group-title {
    font-size: 1.05rem;
    margin: 6px 8px;
    color: #0b4aa8;
    border-bottom: 1px solid #e6eef6;
    padding-bottom: 6px;
}
.catalog-group-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Collapsible group list: when .collapsed, hide contents with smooth transition */
.catalog-group-list {
    transition: max-height 220ms ease, opacity 200ms ease;
    overflow: hidden;
    max-height: 2000px; /* large default to allow content */
}
.catalog-group-list.collapsed {
    max-height: 0 !important;
    opacity: 0;
    padding: 0; margin: 0;
}
.catalog-group-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.catalog-group-title .catalog-showall { margin-left: auto; }
.btn-small { padding: 6px 10px; font-size: 0.9rem; }
.catalog-group-title::after {
    content: '▲';
    opacity: 0.6;
    font-size: 0.9em;
    transition: transform 160ms ease;
}
.catalog-group-title.collapsed::after {
    content: '▼';
    transform: rotate(0deg);
}
.catalog-title { font-weight: 700; color: #0b4aa8; }
.catalog-short { font-size: 0.9rem; color: #334; opacity: .85; }
.catalog-meta { font-size: 0.85rem; color: #667; }
.catalog-price { font-weight: 800; color: #0f9d58; }
.catalog-actions { display: flex; gap: 8px; align-items: center; }

/* make the two lists receive the same compact-scroll behavior as the cart */
.catalog-panel.compact-scroll .catalog-list { max-height: 260px !important; }

/* On index page we keep the card grid look (no change) */

.card {
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #e7eef5;
    box-shadow: 0 6px 18px rgba(0,30,84,.06);
    display: grid;
    gap: 12px;
}

/* Homepage-only: make product and service cards uniform and use full-vertical layout
   so all information is visible and cards have equal height. Fixes previous malformed
   nested rules and conflicting overrides. */
body[data-page="home"] .home-center .grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    /* Use 1fr rows and stretch so every card in the same row receives equal height.
       Add min-height adjustments on children below to prevent known Firefox clipping bugs. */
    grid-auto-rows: 1fr;
    align-items: stretch;
}

body[data-page="home"] .home-center .grid .card {
    display: flex;
    flex-direction: column;
    gap: 3px; /* further reduced gap (~50% of previous) */
    padding: 3px; /* much smaller padding to shrink card height */
    /* fill the grid cell so cards in the same row have equal height */
    height: 100%;
    min-height: 0; /* essential for Firefox to allow children to shrink/scroll */
    box-shadow: 0 6px 18px rgba(0,30,84,.04);
    border-radius: 8px;
}

/* ensure direct children can shrink if needed (Firefox bug fix) */
body[data-page="home"] .home-center .grid .card > * { min-height: 0; }

/* Homepage media: full-width image/video with a consistent height so layout is predictable */
body[data-page="home"] .home-center .card-media {
    width: 100%;
    min-height: 32px; /* reduced further (~50% of 63px) */
    height: 32px;
    overflow: hidden;
    border-radius: 4px;
    display: block;
    flex: 0 0 32px; /* compact media area */
}
body[data-page="home"] .home-center .card-media img,
body[data-page="home"] .home-center .card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ensure full descriptions are visible on homepage cards */
body[data-page="home"] .home-center .card p {
    margin: 4px 0 6px;
    white-space: normal;
    text-overflow: ellipsis;
    /* clamp paragraph to ~1.6em (~1-2 lines depending on font size) */
    max-height: 1.6em;
    overflow: hidden;
    /* do not force paragraph to grow the card */
    flex: 0 1 auto;
}

/* Ensure action row sticks to the bottom of the card so cards with varying text lengths
   maintain consistent visual weight and buttons align across cards. */
body[data-page="home"] .home-center .grid .card .actions-row {
    margin-top: auto;
}

/* Stronger heading and price emphasis for 'weight' */
body[data-page="home"] .home-center .card h3 { font-weight: 800; font-size: 0.98rem; margin: 0; }
body[data-page="home"] .home-center .card .price { font-size: 0.98rem; font-weight: 900; margin-left: 8px; }

/* Layout: place text next to thumbnail and actions on the right */
body[data-page="home"] .home-center .card .card-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0; /* allow truncation */
}
body[data-page="home"] .home-center .card .actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
}
    /* Slightly larger card gap on products/services for readability */
    body[data-page="products"] .card,
    body[data-page="services"] .card {
        gap: 12px;
    }

    /* Larger media area inside cards on products/services pages */
    body[data-page="products"] .card-media,
    body[data-page="services"] .card-media { width: 100%; overflow: hidden; border-radius: 10px; }
    body[data-page="products"] .card-media img,
    body[data-page="products"] .card-media video,
    body[data-page="services"] .card-media img,
    body[data-page="services"] .card-media video {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
        border-radius: 8px;
    }

    .card h3 {
        color: #0b4aa8;
    }

/* Larger media area inside cards so images/videos are more visible */
.card-media { width: 100%; overflow: hidden; border-radius: 10px; }
.card-media img,
.card-media video {
    width: 100%;
    /* default (home/index) media height is smaller so cards don't appear oversized */
    height: 160px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.price {
    color: #0f9d58;
    font-weight: 800;
}

/* Fila acciones de producto */
.actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Unified catalog row layout: media | info | price | actions */
.catalog-row{display:grid;grid-template-columns:96px 1fr 140px 220px;gap:12px;align-items:center;padding:10px 8px;border-bottom:1px solid #eee}
.catalog-media{width:96px;height:72px;display:flex;align-items:center;justify-content:center;background:#fafafa;border:1px solid #f0f0f0;border-radius:4px;overflow:hidden}
.catalog-media img{max-width:100%;max-height:100%;object-fit:contain}
.catalog-media.has-carousel{position:relative}
.catalog-media .media-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:#fff;border:none;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.catalog-media .media-prev{left:4px}
.catalog-media .media-next{right:4px}
.catalog-media{cursor:zoom-in}
.catalog-info{min-width:0}
.catalog-title{font-weight:600;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-desc{margin:0;color:#333;display:-webkit-box;line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.catalog-desc.expanded{display:block;line-clamp:unset;-webkit-line-clamp:unset;-webkit-box-orient:unset;overflow:visible}
.catalog-meta{font-size:.82rem;opacity:.85;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-price{text-align:right;white-space:nowrap;font-size:1.05rem;font-weight:600}
.catalog-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.catalog-actions .qty{width:72px}
.stock-badge{display:inline-block;padding:2px 6px;border-radius:10px;background:#e6f6ea;color:#136c2e;border:1px solid #cdebd6}
.stock-badge.stock-out{background:#fde8e8;color:#b00020;border-color:#f8c6c6}

/* Lightbox modal */
.h2-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.82);display:none;align-items:center;justify-content:center;z-index:100000}
.h2-lightbox.open{display:flex}
.h2-lightbox .lb-img{max-width:92vw;max-height:88vh;box-shadow:0 10px 28px rgba(0,0,0,0.5);border-radius:8px}
.h2-lightbox .lb-close{position:absolute;top:14px;right:16px;background:rgba(0,0,0,0.6);color:#fff;border:none;border-radius:50%;width:34px;height:34px;font-size:20px;cursor:pointer}
.h2-lightbox .lb-prev,.h2-lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:22px;cursor:pointer}
.h2-lightbox .lb-prev{left:18px}
.h2-lightbox .lb-next{right:18px}
.h2-lightbox{cursor:zoom-out}

@media (max-width: 900px){
    .catalog-row{grid-template-columns:72px 1fr 110px 1fr}
    .catalog-actions{justify-content:flex-start}
}
@media (max-width: 700px){
    .catalog-row{grid-template-columns:72px 1fr;grid-auto-rows:auto}
    .catalog-price{justify-self:end}
    .catalog-actions{grid-column:1 / -1;justify-content:flex-end}
    .catalog-desc{line-clamp:3;-webkit-line-clamp:3}
}

.qty {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid #cfd8dc;
    border-radius: 8px;
}

.qty-label {
    color: #275;
    font-size: .9rem;
}

/* Botones */
.btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .2px;
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary {
    background: #0b4aa8;
    color: #fff;
}

.btn-secondary {
    background: #0f9d58;
    color: #fff;
}

.btn-success {
    background: #33aa66;
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
}

    .btn-ghost:hover {
        background: rgba(255,255,255,.1);
    }

/* Visible disabled state for all buttons */
.btn:disabled,
.btn[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
    filter: saturate(0.9) brightness(0.98);
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-success:disabled {
    color: #fff;
}
.btn-ghost:disabled {
    background: #fafcff;
    color: #8194a8;
    border-color: #e2eaf2;
}

/* Make inline "see more/less" buttons readable on white backgrounds */
.catalog-more {
    color: #0b4aa8 !important;
    border-color: #dfe8ef !important;
}
.catalog-more:hover {
    background: #f4f8ff !important;
}
/* Group-level Show all/Hide all button */
.catalog-showall {
    color: #0b4aa8 !important;
    border-color: #dfe8ef !important;
    background: #ffffff !important;
}
.catalog-showall:hover {
    background: #f4f8ff !important;
}

/* Panel de carrito */
.cart-panel {
    position: fixed;
    right: 0;
    /* increase top so panel sits below the header and reduce overall height */
    top: 64px; /* leave room for sticky header */
    /* increase bottom gap so footer is not flush to viewport edge */
    bottom: 24px;
    height: auto;
    /* limit panel height so totals/footer remain visible on smaller viewports */
    max-height: calc(100vh - 96px);
    /* reduced width to fit comfortably and avoid overflow */
    width: 440px;
    max-width: 90vw;
    background: #ffffff;
    border-left: 1px solid #dfe8ef;
    box-shadow: -6px 0 18px rgba(9,38,80,.08);
    /* footer is sticky; no extra bottom padding needed */
    /* hide off-canvas by default; push a little further to avoid subpixel issues */
    transform: translateX(calc(100% + 12px));
    transition: transform .25s ease;
    z-index: 9999; /* ensure the panel appears above other elements */
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.92rem; /* slightly smaller text inside cart to fit more items */
}

    .cart-panel.open {
        transform: translateX(0) !important;
        right: 0 !important;
        /* ensure panel fits within viewport when open */
        max-height: calc(100vh - 16px);
    }

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 8px 14px;
    background: #f6fbff;
    border-bottom: 1px solid #dfe8ef;
}

/* New: scrollable body and sticky footer */
.cart-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 8px 12px 12px 12px;
}

.cart-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,1));
    padding: 10px 12px;
    border-top: 1px solid #eef1f4;
    z-index: 10000;
}

.cart-section {
    padding: 8px 12px;
    margin-bottom: 6px;
}

.cart-body {
    flex: 1 1 auto;
    /* make the cart body scrollable so totals/footer remain visible */
    overflow: auto;
    padding: 0 0 180px 0; /* leave room for footer and totals */
    position: relative;
}

.list {
    display: grid;
    gap: 6px;
    padding-right: 8px;
    padding-bottom: 8px; /* ensure last item has breathing room above footer */
}

/* Visual hint when a list is scrollable */
.list.is-scrollable {
    position: relative;
}
.list.is-scrollable::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 6px;
    width: 28px;
    height: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,0.06));
    border-radius: 6px;
    pointer-events: none;
}
.list.is-scrollable::before {
    content: '⇵';
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 0.8rem;
    color: rgba(0,0,0,0.28);
    pointer-events: none;
}

/* Make both lists independently scrollable so users can scroll either */
/* Make both lists the same height so scrollbars appear consistently */
#cartServices, #cartProducts {
    display: block; /* ensure block layout */
    box-sizing: border-box;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* default (non-compact) max-height: allow more items before scrolling */
    max-height: 420px !important;
    padding-right: 8px; /* keep scrollbar area visible */
}

/* When panel has .compact-scroll (JS toggles), shrink lists so scrollbar appears earlier (~5 rows) */
.cart-panel.compact-scroll #cartServices,
.cart-panel.compact-scroll #cartProducts {
    max-height: 300px !important;
}

/* Give the products section extra bottom padding so totals (absolute) don't cover it */
.cart-section:nth-of-type(2) {
    /* reduce extra bottom padding so the products list doesn't get artificially taller */
    padding-bottom: 8px !important;
}

/* Specific list limits for services and products for better UX */
#cartServices.list {
    max-height: calc(100vh / 3);
}
#cartProducts.list {
    max-height: calc(100vh - 380px);
}

    .list li {
        /* use flex so small action buttons remain visible and content can shrink */
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px;
        border: 1px solid #edf1f5;
        border-radius: 10px;
        background: #fff;
    }

    /* allow name spans to shrink instead of overflowing the actions */
    .list li .cart-product-name,
    .list li .cart-service-name {
        flex: 1 1 auto;
        min-width: 0; /* allow truncation when extremely long */
        overflow: hidden;
        margin-right: 6px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* show up to two lines */
        line-clamp: 2;
        white-space: normal;
        line-height: 1.2;
    }

    .list .qty-input {
        width: 70px;
        padding: 6px 8px;
        border: 1px solid #cfd8dc;
        border-radius: 8px;
    }

    .list .remove {
        background: #eee;
        border-radius: 8px;
        padding: 6px 8px;
        cursor: pointer;
    }

        .list .remove:hover {
            background: #ffebee;
        }

    /* Ensure ghost buttons inside the cart panel are visible on white background */
    #cartPanel .btn-ghost {
        background: transparent;
        color: #333;
        border: 1px solid #e6e6e6;
    }

    #cartPanel .btn-ghost:hover {
        background: #f4f6f8;
    }

.totals {
    border-top: 1px dashed #dfe8ef;
    margin-top: 6px;
    padding-top: 8px;
    display: grid;
    gap: 6px;
    background: #fff;
    z-index: 40;
}

.iva-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#iva {
    width: 90px;
    padding: 6px 8px;
    border: 1px solid #cfd8dc;
    border-radius: 8px;
}

.cart-actions {
    padding: 10px 14px 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,1));
    border-top: 1px solid #eef1f4;
}

.cart-footer {
    border-top: 1px solid #eef1f4;
    background: #fff;
    padding: 10px 0 10px 0;
    position: absolute; /* sit above the cart-body */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000; /* keep it on top of everything inside panel */
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
    pointer-events: auto;
}

/* Footer */
.site-footer {
    margin-top: 26px;
    padding: 18px 20px;
    text-align: center;
    color: #f1f8f5;
    background: linear-gradient(90deg, #0b4aa8, #0f9d58);
}

    .site-footer a {
        color: #d1ffec;
        text-decoration: none;
        font-weight: 700;
    }

    .site-footer small {
        display: block;
        margin-top: 8px;
        opacity: .9;
    }

    /* Footer contact microcopy */
    .site-footer .footer-contact { margin-top: 10px; display:flex; flex-direction:column; gap:6px; align-items:center; }
    .site-footer .footer-contacts { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:4px; }
    .footer-phone, .footer-email { color:#d1ffec; font-weight:700; background:transparent; padding:6px 8px; border-radius:8px; }
    .footer-phone:hover, .footer-email:hover { background: rgba(255,255,255,0.06); }
    .footer-email { cursor: pointer; }

/* Responsive */
@media (max-width: 720px) {
    .site-header {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .toolbar {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* Make cart panel full-width on small screens and reduce font-size */
    .cart-panel {
        width: 92vw !important;
        right: 0;
        left: auto;
        font-size: 0.95rem;
    }
    .cart-section { max-height: calc(100vh - 140px); }



}

/* Desktop: prefer exactly 4 columns on sufficiently wide screens */
@media (min-width: 1100px) {
    /* prefer three wider columns on wide screens so each card has room for image + description */
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
    /* Catalog row base layout already defines responsive columns; avoid overriding here. */

    /* On products/services pages keep a single column so catalog rows span full width */
    @media (min-width: 1100px) {
        body[data-page="products"] .grid,
        body[data-page="services"] .grid {
            grid-template-columns: 1fr !important;
        }
    }

/* Carrito: botón cerrar */
#cartPanel .cart-header .btn-ghost {
    background: transparent; /* Sin fondo */
    color: #333; /* Color del icono */
    font-size: 1.5rem; /* Más grande */
    border: none;
    cursor: pointer;
}

#cartPanel.open { /* opcional animación */
    display: block;
}

/* Force visibility for cart action buttons in case other CSS hides them */
#cartPanel .cart-item button,
#cartPanel .cart-item .btn,
#cartPanel .cart-item .btn-ghost,
#cartPanel .cart-item .remove-service,
#cartPanel .cart-item .edit-service-price {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #222 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    padding: 4px 6px !important;
}

/* Webkit scrollbar styling to make thumb visible */
#cartPanel .list::-webkit-scrollbar { width: 12px; }
#cartPanel .list::-webkit-scrollbar-track { background: transparent; }
#cartPanel .list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 8px; border: 2px solid #fff; }

/* Firefox thin scrollbar */
#cartPanel .list { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }

/* Ensure the panel transform is applied (avoid translate hiding) */
.cart-panel.open {
    transform: translateX(0) !important;
}

/* Watermark inside cart panel */
.cart-panel {
    /* keep position: fixed from earlier; do not override here */
    overflow: visible;
}
.cart-panel::before {
    /* internal cart watermark disabled to avoid layout/size issues;
       rely on the main container watermark instead (safer, behind all UI).
       If you prefer a small badge inside the cart, we can restore this
       as a non-intrusive element with low opacity and transform only. */
    content: '';
    display: none; /* keep disabled to prevent panel deformation */
}
.cart-panel > * { position: relative; z-index: 22001; }

/* Ensure cart footer stays above scrollable lists so buttons remain clickable */
#cartPanel .cart-body { z-index: 22000 !important; }
#cartPanel .cart-footer { position: sticky !important; bottom: 0 !important; z-index: 23000 !important; pointer-events: auto !important; }
#cartPanel .list { position: relative; z-index: 1; }
#cartPanel .list.is-scrollable::before,
#cartPanel .list.is-scrollable::after { z-index: 0 !important; pointer-events: none !important; }

/* Enforce non-growing panel and earlier scrollbar trigger (~5 rows)
   - Prevent the panel from expanding beyond max-height
   - Make the cart body the scrollable area and allow it to shrink
   - Reduce list max-height so scrollbar appears earlier (about 5 items)
   - Ensure footer stays sticky (not absolute) */
.cart-panel {
    overflow: hidden; /* prevent auto-growing when items appended */
}
.cart-body {
    min-height: 0; /* critical in flex layouts to allow overflow */
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto; /* scroll inside body */
}
#cartServices, #cartProducts {
    /* smaller max-height so scrollbar appears after ~5 rows */
    max-height: 260px !important;
}
.cart-footer {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
}

/* Booking page: make export buttons visible on white background */
body[data-page="booking"] .export-tools .btn-ghost {
    background: #fff;
    color: #0b4aa8;
    border: 1px solid #dfe8ef;
}
body[data-page="booking"] .export-tools .btn-ghost:hover {
    background: #f4f8ff;
}
body[data-page="booking"] .export-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-page="booking"] .export-title { display: block; }

/* About page: ensure CTAs are readable on light backgrounds (in case ghost buttons are used) */
body[data-page="about"] .hero-cta .btn-ghost {
    background: #fff;
    color: #0b4aa8;
    border: 1px solid #dfe8ef;
}
body[data-page="about"] .hero-cta .btn-ghost:hover {
    background: #f4f8ff;
}

/* About section: corporate typography and justified copy */
.about-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(6,30,84,0.06);
    border: 1px solid #e6eef6;
}
.about-section .about-para {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.6;
    color: #11334a;
    margin-bottom: 12px;
    font-size: 1.02rem;
}
.about-nav {
    margin: 12px 0 18px;
    font-size: 0.98rem;
    color: #0b4aa8;
}
.about-nav a {
    color: #0b4aa8;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
    background: transparent;
    transition: background .18s ease, color .18s ease;
    font-weight: 700;
}
.about-nav a:hover {
    background: rgba(11,74,168,0.08);
    color: #062e66;
}
.about-section h2 {
    margin-top: 18px;
    color: #062e66;
    font-weight: 800;
    border-left: 4px solid #0f9d58;
    padding-left: 12px;
    margin-bottom: 10px;
}
.team-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.team-card { background: linear-gradient(180deg,#fff,#fbfeff); border-radius:8px; padding:12px; border:1px solid #eef6fb; }

/* anchor target offset to account for sticky header */
:target { scroll-margin-top: 88px; }

/* Improve default list spacing in about page */
.about-section ul { margin-left: 18px; margin-bottom: 12px; }
.about-section li { margin-bottom: 6px; color: #22363f; }


/* Cart list: show quantity as a separate, always-visible badge */
.list li .cart-qty {
    flex: 0 0 auto;
    display: inline-block;
    min-width: 34px;
    text-align: center;
    font-weight: 800;
    color: #0b4aa8;
    background: #f0f6ff;
    border: 1px solid #d6e6ff;
    border-radius: 10px;
    padding: 2px 6px;
}

/* Toast pequeño (notificaciones fugaces) */
.site-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 220ms ease, transform 220ms ease;
    z-index: 1400;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    font-weight: 700;
}
.site-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Background watermark logo inside main container */
.container {
    position: relative;
}

/* Homepage: three-column split inside the .container (scoped to home only) */
body[data-page="home"] .home-columns {
    display: grid;
    /* Widen side panels so logos and announcements have room */
    grid-template-columns: 240px 1fr 240px; /* left / center / right */
    gap: 22px;
    align-items: start;
}

/* Give the homepage more overall width so the center column stays roomy */
body[data-page="home"] .container { max-width: 1440px; }

/* On wider screens, give side panels a bit more width */
@media (min-width: 1100px) {
    body[data-page="home"] .home-columns { grid-template-columns: 280px 1fr 280px; }
}

/* Enlarge sidebar logos and avoid clipping announcement paragraphs */
/* Increase left-sidebar partner logos by ~33% on the homepage */
/* left-sidebar partner logos increased by additional 21% */
body[data-page="home"] .home-left .partners-list img { max-width: 355px !important; }
body[data-page="home"] .home-right .company-logo {
    max-width: 220px !important;
    max-height: 120px !important;
}
body[data-page="home"] .sidebar-announcements p,
body[data-page="home"] .left-announcements p,
body[data-page="home"] .right-announcements p {
    overflow: visible !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    max-height: none !important;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.35;
}
/* Homepage: force center grids (services/products) to use a single column list */
body[data-page="home"] .home-center .grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
}

/* Allow a bit more description on homepage catalog rows */
body[data-page="home"] .catalog-desc {
    -webkit-line-clamp: 7;
    line-clamp: 7;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* Make product cards (~33% taller) on the homepage while leaving service rows compact */
/* Product-specific overrides removed so products inherit homepage card styles above. */
body[data-page="home"] .home-col { background: transparent; }
body[data-page="home"] .home-col .col-inner { padding: 8px; }
body[data-page="home"] .home-left .partners-list img { display: block; width: 100%; max-width: 160px; margin-bottom: 10px; object-fit: contain; }
body[data-page="home"] .home-right .company-logo { width: 100%; max-width: 180px; display: block; margin: 0 auto 12px; }
/* Shared partners list styles for left and right sidebars */
body[data-page="home"] .partners-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
/* Homepage: increase partner images size ~33% (both socios and proveedores) */
body[data-page="home"] .partners-list img {
    display: block;
    width: 100%;
    max-width: 258px; /* increased ~21% from 213px */
    object-fit: contain;
}

/* Different visual emphasis between left and right lists so content isn't identical */
body[data-page="home"] .partners-list-left img { opacity: 1; filter: none; }
body[data-page="home"] .partners-list-right img { opacity: 0.95; filter: saturate(0.98) brightness(0.98); }

/* Announcement / offers blocks styling */
.sidebar-announcements {
    margin-top: 12px;
    background: linear-gradient(180deg, #ffffff, #f9fdff);
    border: 1px solid #e6f0f8;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(10,40,90,0.04);
    font-size: 0.95rem;
    color: #0b3b2a;
}
.sidebar-announcements .col-subtitle { margin-bottom: 6px; color: #0b4aa8; font-weight: 700; }
.left-announcements p, .right-announcements p { margin-bottom: 6px; }

/* Sidebar offer cards with titles */
.sidebar-announcements .offer-item {
    background: #fff;
    border: 1px solid #e6eef6;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
.sidebar-announcements .offer-title {
    font-size: 0.98rem;
    font-weight: 800;
    color: #0b4aa8;
    margin: 0 0 4px 0;
}
.sidebar-announcements .offer-title .offer-icon {
    display: inline-block;
    margin-right: 6px;
    transform: translateY(-1px);
}
.sidebar-announcements .offer-text {
    margin: 0;
    /* justification comes from the global sidebar paragraph rule */
}

/* Make logos slightly larger on wider screens */
@media (min-width: 1100px) {
    /* increase wide-screen partner logos proportionally */
    body[data-page="home"] .partners-list img { max-width: 290px; }
}

/* Ensure the partner-logo element itself can grow on the homepage */
body[data-page="home"] .partners-list .partner-logo { max-height: 91px !important; }

/* Central logo: make it the visual focus but not oversized. Center and reserve a fixed area
   so hero and the catalog content appear below. Overflow hidden will 'cut' very large images. */
body[data-page="home"] .central-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* allow the logo area to grow naturally so the image is not clipped */
    height: auto;
    padding: 18px 0; /* breathing room above hero */
    margin-bottom: 18px;
}
body[data-page="home"] .central-logo .company-logo {
    display: block;
    width: 98%;                /* fill most of the central column */
    max-width: 1400px;         /* allow larger logos if available */
    height: auto;
    max-height: 480px;         /* cap logo height so it's clearly larger than cards but not fullscreen */
    object-fit: contain;      /* preserve aspect ratio */
    margin: 0 auto;
}

/* Slightly reduce the right sidebar company-logo so it doesn't compete with the central visual */
body[data-page="home"] .home-right .company-logo {
    max-width: 140px !important;
    max-height: 80px !important;
}
body[data-page="home"] .col-title { font-weight: 700; color: #0b4aa8; margin-bottom: 8px; }
body[data-page="home"] .promo-note, body[data-page="home"] .announcements { font-size: .95rem; color: #133; }

/* Keep center column content unchanged visually but ensure it uses available width */
body[data-page="home"] .home-center { min-width: 0; }

/* Responsive: stack columns on small viewports */
@media (max-width: 899px) {
    body[data-page="home"] .home-columns { grid-template-columns: 1fr; }
    body[data-page="home"] .home-left, body[data-page="home"] .home-right { order: 2; }
    body[data-page="home"] .home-center { order: 1; }
}

/* Homepage split-area styles were removed to restore original layout across pages. */
/* Adjust watermark positioning on pages that are left-aligned to avoid clipping */
.container::after {
    /* right-top background logo — visible but behind UI. Increase opacity and
       saturation to make the logo more colorful while keeping it behind elements. */
    content: '';
    position: absolute;
    top: 10px;
    right: -24px;
    width: var(--wm-width, 353px);
    height: var(--wm-height, 158px);
    /* moved 20% left to avoid clipping */
    transform: translate(67%, 10%);
     /* Use a tint gradient layer above the page background and beneath the logo
         so we can enrich colors without increasing opacity too much. The
         background consists of a linear-gradient (tint) and the logo image. */
     background-image: linear-gradient(180deg, var(--wm-tint, rgba(15,157,88,0.22)), rgba(255,255,255,0.02)), url('../images/logoH2Electry.jpg');
     background-size: cover, contain;
     background-repeat: no-repeat;
     background-position: right top, right top;
     background-blend-mode: multiply, normal;
     opacity: var(--wm-opacity, 0.18); /* tunable */
     filter: saturate(var(--wm-saturate, 1.25)) brightness(var(--wm-bright, 1.03)) contrast(var(--wm-contrast, 1.02)) hue-rotate(var(--wm-hue, 0deg));
    pointer-events: none;
    z-index: -1; /* place behind UI panels */
}

/* When left-aligned on products/services, nudge the watermark left so it's visible */
body[data-page="products"] .container::after,
body[data-page="services"] .container::after {
    right: auto;
    left: 20px;
    transform: translate(0%, 6%);
}

/* Ensure page content sits above the background logo */
.container > * { position: relative; z-index: 1; }

/* Team cards: keep simple styling and avoid product-like visuals */
.team-grid .team-card {
  background-color: transparent;
  border: 1px solid #e6e6e6;
  box-shadow: none;
  padding: 1rem;
  border-radius: 6px;
}
.team-grid .team-card h3 {
  margin-top: 0;
}

/* Move header logo to the right on products/services pages */
body[data-page="products"] .brand .logo-empresa,
body[data-page="services"] .brand .logo-empresa {
  /* hide the in-flow logo so it doesn't affect layout */
  display: none !important;
}

body[data-page="products"] .site-header::after,
body[data-page="services"] .site-header::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* keep space from the right edge to avoid overlapping toolbar elements */
  right: 120px;
  width: 160px;
  height: 46px;
  background-image: url('../images/logoH2Electry.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
  z-index: 1100;
}

/* On products/services pages hide the small header PNG (don't show it) */
body[data-page="products"] .site-header .logo-empresa,
body[data-page="services"] .site-header .logo-empresa {
  display: none !important;
}

/* Ensure no header pseudo-logo appears on these pages */
body[data-page="products"] .site-header::after,
body[data-page="services"] .site-header::after {
  display: none !important;
  content: none !important;
}

/* When left-aligned on products/services, nudge the watermark left so it's visible */
body[data-page="products"] .container::after,
body[data-page="services"] .container::after {
    /* Position the background/company logo inside the container on the right */
    left: auto;
    right: 18px;
    transform: translate(0%, 6%);
    /* make it slightly narrower on these pages to avoid overlap */
    width: calc(var(--wm-width, 460px) * 0.85);
    height: calc(var(--wm-height, 208px) * 0.85);
}

/* ==== Header logo override: restore the original behavior ====
   Show the decorative sun/column icon and the company image side-by-side
   in the header across all pages. Also remove header pseudo-elements so
   the header does not contain duplicated or injected logos. This block
   intentionally comes late in the file to override earlier page-scoped rules.
*/
.site-header .logo-icon { display: flex !important; }
.site-header .logo-empresa {
  display: block !important;
  height: 46px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  margin-left: 6px;
}

/* Remove any injected header pseudo-images that were used previously */
.site-header::before, .site-header::after { display: none !important; content: none !important; }

/* If specific pages had been hiding the inline image with a more specific selector,
   this rule appears later and uses !important so it will restore visibility. */

/* --- Scoped styles for About page (improve readability and visual polish) --- */
body[data-page="about"] main.container {
    max-width: 980px;
    margin: 28px auto;
    padding: 34px 40px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 10px 30px rgba(12,35,63,0.08), 0 2px 6px rgba(12,35,63,0.04);
    border-radius: 12px;
    border: 1px solid rgba(15,77,125,0.04);
}

body[data-page="about"] .section-title {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.9rem;
    line-height: 1.15;
    color: #0b3d6b;
    margin-bottom: 12px;
    letter-spacing: -0.2px;
}

body[data-page="about"] .about-para,
body[data-page="about"] p.about-para {
    font-size: 1.05rem;
    color: #213547;
    line-height: 1.65;
    margin-bottom: 16px;
    text-wrap: balance;
}

/* Make lists a bit lighter and well spaced */
body[data-page="about"] ul {
    color: #254353;
    line-height: 1.6;
    margin-left: 1.15rem;
}

/* Do not alter buttons or interactive controls; keep spacing consistent */
/* Keep interactive controls and layout defaults for about page; no visual changes intended */
body[data-page="about"] .hero-cta,
body[data-page="about"] .toolbar,
body[data-page="about"] .cart-panel { pointer-events: auto; }

@media (max-width: 720px) {
    body[data-page="about"] main.container { padding: 22px; margin: 18px; border-radius: 8px; }
    body[data-page="about"] .section-title { font-size: 1.5rem; }
}