/* Efestum Connect — tema de marca sobre connect.css.
   Fuente de las reglas: skill "efestum-identidad" (tokens.css + sistema-visual.md).
   - Blanco y negro sostienen; el rojo #E60004 es señal: CTA principal, Filo de Forja y barra de progreso.
     No se usa en enlaces, precios, insignias ni estados.
   - Títulos de portada y de sección en EFESTUM Display (caja alta, nunca < 24 px); todo lo demás en Rubik.
   - Fondo claro con Mármol Digital; oscuro solo en ink plano.
   - Movimiento de 200 a 800 ms, sin rebote ni rotación; respeta prefers-reduced-motion.
   Se carga después de connect.css: primero reasigna sus variables y después ajusta componentes. */

@font-face {
    font-family: "Efestum Display";
    src: url("/assets/fonts/EfestumDisplay-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --efe-ink: #0A0A0A;
    --efe-white: #FFFFFF;
    --efe-paper: #F4F4F4;
    --efe-accent: #E60004;
    --efe-accent-dark: #B80003;   /* solo para :hover del CTA rojo */
    --efe-muted: #8A8A8A;         /* líneas y separadores; no apto para texto sobre paper */
    --efe-text-2: #4A4A4A;        /* cuerpo secundario (gris entre ink y paper, contraste AA) */
    --efe-text-3: #6B6B6B;        /* etiquetas y metadatos sobre blanco o paper (contraste AA) */
    --efe-rule-light: #D8D8D8;
    --efe-rule-dark: #262626;
    --efe-panel: #141414;
    --efe-font-display: "Efestum Display", "Rubik", sans-serif;
    --efe-font-text: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
    --efe-track-label: 0.30em;
    --efe-track-display: -0.03em;
    --efe-ease: cubic-bezier(.22, 1, .36, 1);
    --efe-radius: 8px;

    /* connect.css hablaba en rojo #cc2d2d y azul marino: todo pasa a ink, papel y grises neutros. */
    --connect-primary: var(--efe-ink);
    --connect-primary-dark: #000000;
    --connect-primary-light: var(--efe-paper);
    --connect-accent: var(--efe-ink);
    --connect-accent-light: var(--efe-panel);
    --connect-success: var(--efe-ink);
    --connect-warning: var(--efe-text-2);
    --connect-gray-50: #FAFAFA;
    --connect-gray-100: #F4F4F4;
    --connect-gray-200: #D8D8D8;
    --connect-gray-300: #C4C4C4;
    --connect-gray-400: #8A8A8A;
    --connect-gray-500: #6B6B6B;
    --connect-gray-600: #4A4A4A;
    --connect-gray-700: #333333;
    --connect-gray-800: #1F1F1F;
    --connect-gray-900: #0A0A0A;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --shadow-soft: 0 1px 2px rgba(10, 10, 10, .04);
    --shadow-medium: 0 12px 32px rgba(10, 10, 10, .08);
    --transition-normal: 200ms var(--efe-ease);
    --container-max: 1240px;
    /* Listados y fichas aprovechan pantallas anchas (más productos por fila); encabezado y pie los acompañan. */
    --container-ancho: 1920px;

    /* Bootstrap 5.3: los componentes que lo usan heredan la marca. */
    --bs-body-font-family: var(--efe-font-text);
    --bs-body-color: var(--efe-ink);
    --bs-primary: #0A0A0A;
    --bs-primary-rgb: 10, 10, 10;
    --bs-success: #0A0A0A;
    --bs-success-rgb: 10, 10, 10;
    --bs-danger: #E60004;
    --bs-danger-rgb: 230, 0, 4;
    --bs-link-color: #0A0A0A;
    --bs-link-color-rgb: 10, 10, 10;
    --bs-link-hover-color: #000000;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-border-color: #D8D8D8;
    --bs-border-radius: 8px;
}

/* ========== BASE ========== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--efe-font-text);
    color: var(--efe-ink);
    line-height: 1.55;
    /* Mármol Digital (versión CSS de tokens.css): blanco + campo de puntos + retícula técnica tenue */
    background-color: var(--efe-white);
    background-image:
        radial-gradient(rgba(10, 10, 10, .07) 1px, transparent 1.4px),
        linear-gradient(rgba(10, 10, 10, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 10, 10, .045) 1px, transparent 1px);
    background-size: 20px 20px, 180px 180px, 180px 180px;
}

::selection { background: var(--efe-ink); color: var(--efe-white); }

:focus-visible { outline: 2px solid var(--efe-ink); outline-offset: 2px; }

/* Enlaces dentro de texto corrido: subrayados. Los de navegación, listas y tarjetas no. */
main p a:not([class]), .efe-prosa a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
main p a:not([class]):hover, .efe-prosa a:not([class]):hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4, h5, h6 { color: var(--efe-ink); font-family: var(--efe-font-text); }

/* ========== TIPOGRAFÍA DE MARCA ========== */
.efe-display,
.connect-hero h1,
.connect-section-title,
.connect-cta-section h2,
.connect-highlight h2 {
    font-family: var(--efe-font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--efe-track-display);
    line-height: .95;
    color: var(--efe-ink);
}

/* Eyebrow: Rubik Medium, mayúsculas, tracking +30 %. Es la firma tipográfica del sistema. */
.efe-label,
.connect-section-tag,
.connect-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--efe-font-text);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: var(--efe-track-label);
    color: var(--efe-text-3);
}
.connect-hero-badge i, .connect-section-tag i { color: var(--efe-ink); }

/* Filo de Forja: la firma visual. Único elemento decorativo. */
.efe-filo {
    display: block;
    width: 64px;
    height: 3px;
    background: var(--efe-accent);
    border: 0;
    margin: 1.25rem 0 0;
    transform-origin: left;
}
.efe-filo--centro { margin-left: auto; margin-right: auto; }
.efe-filo.efe-anima { animation: efe-filo-barrido 500ms ease-out both; }

/* Palabra o dato clave en rojo (uno por superficie). Solo en display o texto ≥ 24 px. */
.efe-acento { color: var(--efe-accent); }

@keyframes efe-filo-barrido { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes efe-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ========== BOTONES ========== */
/* CTA principal (verbo): el único botón rojo de la página. */
.connect-btn-primary,
.efe-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 48px;
    padding: 0 1.5rem;
    background: var(--efe-accent);
    color: var(--efe-white);
    font-family: var(--efe-font-text);
    font-weight: 500;
    font-size: 1rem;
    border: 0;
    border-radius: var(--efe-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms var(--efe-ease);
}
.connect-btn-primary:hover,
.efe-cta:hover { background: var(--efe-accent-dark); color: var(--efe-white); transform: none; box-shadow: none; }

/* Secundario: contorno ink. */
.connect-btn-outline,
.efe-cta--secundario,
.connect-header-cta,
.connect-cta-btn,
.connect-cta-btn.outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 48px;
    padding: 0 1.5rem;
    background: transparent;
    color: var(--efe-ink);
    font-family: var(--efe-font-text);
    font-weight: 500;
    font-size: 1rem;
    border: 1px solid var(--efe-ink);
    border-radius: var(--efe-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms var(--efe-ease), color 200ms var(--efe-ease);
}
.connect-btn-outline:hover,
.efe-cta--secundario:hover,
.connect-header-cta:hover,
.connect-cta-btn:hover,
.connect-cta-btn.outline:hover { background: var(--efe-ink); color: var(--efe-white); border-color: var(--efe-ink); transform: none; box-shadow: none; }

/* Enlace de acción ("Ver cómo trabajamos →"). */
.efe-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--efe-ink);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}
.efe-link:hover { text-decoration-thickness: 2px; color: var(--efe-ink); }

/* Bootstrap dentro de las páginas */
.btn { border-radius: var(--efe-radius); font-family: var(--efe-font-text); font-weight: 500; }
.btn-primary, .btn-success, .btn-dark {
    --bs-btn-bg: #0A0A0A; --bs-btn-border-color: #0A0A0A; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #262626; --bs-btn-hover-border-color: #262626; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
    --bs-btn-disabled-bg: #8A8A8A; --bs-btn-disabled-border-color: #8A8A8A;
}
.btn-danger {
    --bs-btn-bg: #E60004; --bs-btn-border-color: #E60004; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #B80003; --bs-btn-hover-border-color: #B80003; --bs-btn-hover-color: #fff;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-dark, .btn-outline-secondary {
    --bs-btn-color: #0A0A0A; --bs-btn-border-color: #0A0A0A;
    --bs-btn-hover-bg: #0A0A0A; --bs-btn-hover-border-color: #0A0A0A; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0A0A0A; --bs-btn-active-border-color: #0A0A0A;
}
.text-primary, .text-success, .text-danger { color: var(--efe-ink) !important; }
.bg-primary, .bg-success, .bg-danger { background-color: var(--efe-ink) !important; }
.badge { border-radius: 4px; font-weight: 500; }
.form-control, .form-select { border-color: var(--efe-rule-light); border-radius: var(--efe-radius); }
.form-control:focus, .form-select:focus { border-color: var(--efe-ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .12); }
.form-check-input:checked { background-color: var(--efe-ink); border-color: var(--efe-ink); }

/* ========== ENCABEZADO ========== */
.connect-header {
    background: var(--efe-white);
    backdrop-filter: none;
    border-bottom: 1px solid var(--efe-rule-light);
    padding: 0;
}
.connect-header .container { min-height: 72px; gap: 1.25rem; }
html { scroll-padding-top: 88px; }   /* un ancla (#resumenPedido) o un campo con error no quedan bajo el encabezado fijo */

.connect-logo { display: inline-flex; align-items: center; gap: 0; flex-shrink: 0; text-decoration: none; }
.connect-logo img { height: auto; width: 184px; }
/* "CONNECT" no es parte del logo: es una etiqueta de línea de negocio, separada por una regla y con aire
   (área de respeto = altura del símbolo). El logo siempre es el PNG oficial. */
.connect-logo .efe-linea {
    display: inline-flex;
    align-items: center;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid var(--efe-rule-light);
    height: 24px;
    font-family: var(--efe-font-text);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: var(--efe-track-label);
    text-transform: uppercase;
    color: var(--efe-ink);
}

.connect-nav { gap: .25rem; }
.connect-nav-link {
    padding: .5rem .75rem;
    font-size: .95rem;
    font-weight: 400;
    color: var(--efe-ink);
    border-radius: 0;
    background: transparent;
}
.connect-nav-link:hover { background: transparent; color: var(--efe-ink); text-decoration: underline; text-underline-offset: 6px; }
.connect-nav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--efe-accent); }

.connect-nav-dropdown-menu {
    border: 1px solid var(--efe-rule-light);
    border-radius: var(--efe-radius);
    box-shadow: var(--shadow-medium);
    padding: .5rem;
}
.connect-dropdown-item { color: var(--efe-ink); border-radius: 4px; }
.connect-dropdown-item:hover { background: var(--efe-paper); color: var(--efe-ink); }
.connect-dropdown-item i { color: var(--efe-ink); }

.connect-header-actions { gap: .75rem; }
.connect-header-cta { min-height: 40px; padding: 0 1rem; font-size: .9rem; }
.connect-whatsapp-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    color: var(--efe-ink);
    border: 1px solid var(--efe-rule-light);
    border-radius: var(--efe-radius);
    font-size: 1.1rem;
}
.connect-whatsapp-btn:hover { background: var(--efe-ink); color: var(--efe-white); border-color: var(--efe-ink); transform: none; }

.header-search-form {
    background: var(--efe-white);
    border: 1px solid var(--efe-rule-light);
    border-radius: var(--efe-radius);
    padding: 0;
    height: 40px;
}
.header-search-form:focus-within { box-shadow: none; border-color: var(--efe-ink); }
.header-search-input { width: 240px; padding: 0 .75rem; font-size: .9rem; color: var(--efe-ink); background: transparent; }
.header-search-input::placeholder { color: var(--efe-text-3); }
.header-search-btn {
    width: 40px;
    height: 38px;
    background: transparent;
    color: var(--efe-ink);
    border-radius: 0 var(--efe-radius) var(--efe-radius) 0;
}
.header-search-btn:hover { background: var(--efe-paper); }

.connect-mobile-toggle { color: var(--efe-ink); }

/* Menú de productos */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--efe-white);
    border: 1px solid var(--efe-rule-light);
    border-radius: var(--efe-radius);
    box-shadow: var(--shadow-medium);
    padding: 1.5rem;
    width: min(1240px, calc(100vw - 2rem));
    display: none;
    z-index: 1000;
}
/* El menú se centra en el encabezado (no en "Productos") para caber a lo ancho;
   el puente cubre el hueco entre el enlace y el menú para que no se cierre al bajar el ratón. */
@media (min-width: 992px) {
    .connect-nav-dropdown:has(.mega-menu) { position: static; }
    .mega-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }
}
.connect-nav-dropdown:hover .mega-menu,
.connect-nav-dropdown:focus-within .mega-menu { display: block; }
.mega-menu-grid { display: grid; grid-template-columns: 1fr 220px; gap: 1.5rem 2.5rem; }
.mega-menu-columnas { columns: 4 200px; column-gap: 1.5rem; }
.mega-menu-grupo { break-inside: avoid; display: flex; flex-direction: column; gap: 2px; margin-bottom: .6rem; }
.mega-menu-section h4 {
    font-family: var(--efe-font-text);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--efe-track-label);
    color: var(--efe-text-3);
    margin: 0 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--efe-rule-light);
}
.mega-menu-items { display: flex; flex-direction: column; gap: 2px; }
.mega-menu-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem .6rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--efe-ink);
}
.mega-menu-item:hover { background: var(--efe-paper); color: var(--efe-ink); }
.mega-menu-item i { font-size: 1.1rem; width: 22px; text-align: center; color: var(--efe-ink); }
.mega-menu-item span { font-size: .92rem; font-weight: 400; }
.mega-menu-item.es-sub { padding-left: 2.4rem; }
.mega-menu-item.es-sub span { font-size: .86rem; color: var(--efe-text-2); }
.mega-menu-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--efe-rule-light); }
@media (max-width: 991px) { .mega-menu { display: none !important; } }

/* Autocompletado del buscador */
.header-search-wrapper { position: relative; }
.search-autocomplete {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 520px;
    background: var(--efe-white);
    border: 1px solid var(--efe-rule-light);
    border-radius: var(--efe-radius);
    box-shadow: var(--shadow-medium);
    z-index: 10000;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
}
.search-autocomplete.active { display: block; animation: efe-reveal 200ms var(--efe-ease) both; }
.ac-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--efe-ink);
    border-bottom: 1px solid var(--efe-paper);
}
.ac-item:hover, .ac-item.ac-active { background: var(--efe-paper); }
.ac-item img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--efe-white);
    border: 1px solid var(--efe-rule-light);
    flex-shrink: 0;
    padding: 4px;
}
.ac-item-info { flex: 1; min-width: 0; }
.ac-item-name {
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ac-item-meta { font-size: .78rem; color: var(--efe-text-3); display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.ac-item-meta span:not(:last-child)::after { content: '·'; margin-left: 6px; color: var(--efe-muted); }
.ac-item-right { text-align: right; flex-shrink: 0; min-width: 90px; }
.ac-item-price { font-weight: 600; color: var(--efe-ink); font-size: .95rem; white-space: nowrap; display: block; }
.ac-item-stock { font-size: .72rem; font-weight: 500; display: inline-block; margin-top: 4px; color: var(--efe-text-3); }
.ac-item-stock.in-stock { color: var(--efe-ink); }
.ac-footer { padding: 12px 16px; border-top: 1px solid var(--efe-rule-light); background: var(--efe-white); }
.ac-loading { padding: 24px; text-align: center; color: var(--efe-text-3); font-size: .88rem; }
@media (max-width: 640px) { .search-autocomplete { width: calc(100vw - 24px); right: -12px; } }

/* Barra de progreso al navegar o buscar: Filo de Forja como indicador (sin giros). */
.efe-progreso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    background: transparent;
    pointer-events: none;
    display: none;
}
.efe-progreso.activo { display: block; }
.efe-progreso::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--efe-accent);
    transform-origin: left;
    animation: efe-progreso 1600ms var(--efe-ease) both;
}
@keyframes efe-progreso { from { transform: scaleX(0); } to { transform: scaleX(.85); } }

/* ========== MENÚ MÓVIL ========== */
@media (max-width: 991px) {
    .connect-header .container { min-height: 64px; }
    /* Con el menú abierto el encabezado (con la X) se queda arriba aunque la página esté bajada. connect.css lo
       pone relative: saltaba al inicio de la página, fuera de la pantalla. */
    .connect-header.menu-open { position: fixed; top: 0; left: 0; right: 0; }
    .connect-logo img { width: 148px; }
    .connect-logo .efe-linea { margin-left: 14px; padding-left: 14px; height: 20px; font-size: 11px; }
    .connect-nav { background: var(--efe-white); padding-top: 80px; }
    .connect-nav-link { font-weight: 500; color: var(--efe-ink); border-bottom-color: var(--efe-rule-light); text-decoration: none; }
    .connect-nav-link:hover { text-decoration: none; }
    .connect-nav-link[aria-current="page"] { box-shadow: none; }
    .connect-nav-dropdown-menu,
    .connect-nav-dropdown .mega-menu { background: var(--efe-paper) !important; border-radius: 4px; }
    .mobile-nav-search { background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: 0; }
    .mobile-nav-search button { background: transparent; color: var(--efe-ink); border-radius: 0 var(--efe-radius) var(--efe-radius) 0; }
    .mobile-nav-actions a { border-radius: var(--efe-radius); font-weight: 500; }
    .mobile-nav-actions .mobile-cta-whatsapp { background: var(--efe-white); color: var(--efe-ink); border: 1px solid var(--efe-ink); }
    .mobile-nav-actions .mobile-cta-cotizar { background: var(--efe-accent); color: var(--efe-white); }
}

/* ========== PORTADA (HERO) ========== */
.connect-hero { background: transparent; color: var(--efe-ink); padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.connect-hero::before { display: none; }
.connect-hero h1 { font-size: clamp(2.25rem, 4.6vw, 4.25rem); margin: 1.25rem 0 0; }
.connect-hero h1 span { color: var(--efe-accent); }
.connect-hero-sub { color: var(--efe-text-2); font-size: clamp(1.05rem, .6vw + .9rem, 1.2rem); line-height: 1.55; max-width: 34em; margin: 1.75rem 0 2rem; }
.connect-hero-ctas { gap: 1rem 1.75rem; align-items: center; }
.connect-hero-image img { border-radius: var(--efe-radius); box-shadow: none; border: 1px solid var(--efe-rule-light); background: var(--efe-white); }
.connect-hero-stats { border-top: 1px solid var(--efe-rule-light); }
.connect-stat-number { color: var(--efe-ink); font-weight: 500; }
.connect-stat-label { color: var(--efe-text-3); }

/* ========== SECCIONES ========== */
.connect-section-alt {
    background: var(--efe-white);
    border-top: 1px solid var(--efe-rule-light);
    border-bottom: 1px solid var(--efe-rule-light);
}
.connect-section-header { max-width: 760px; margin-bottom: 3rem; }
.connect-section-title { font-size: clamp(1.75rem, 3vw, 2.75rem); margin: .9rem 0 0; }
.connect-section-subtitle { color: var(--efe-text-2); margin-top: 1.25rem; }
.connect-section-header .efe-filo { margin-left: auto; margin-right: auto; }

/* Tarjetas: blanco, regla de 1 px, radio 8, sin sombras de adorno. */
.connect-service-card,
.connect-catalog-card,
.connect-plan-card,
.connect-case-card,
.connect-coverage-card,
.connect-step {
    background: var(--efe-white);
    border: 1px solid var(--efe-rule-light);
    border-radius: var(--efe-radius);
    box-shadow: none;
}
.connect-service-card:hover,
.connect-catalog-card:hover { border-color: var(--efe-ink); box-shadow: none; transform: none; }
.connect-service-icon,
.connect-step-icon { background: var(--efe-paper); color: var(--efe-ink); border-radius: var(--efe-radius); }
.connect-step-number { background: var(--efe-ink); color: var(--efe-white); }
.connect-service-link { color: var(--efe-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
.connect-plan-card.featured { border: 1px solid var(--efe-ink); }
.connect-plan-card.featured::before { background: var(--efe-ink); }

.connect-highlight { background: var(--efe-white); }
.connect-highlight-badge { background: none; color: var(--efe-text-3); padding: 0; border-radius: 0; font-size: 12px; font-weight: 500; letter-spacing: var(--efe-track-label); text-transform: uppercase; }

/* Cierre: ink plano, sin textura (portadilla). */
.connect-cta-section { background: var(--efe-ink); color: var(--efe-white); }
.connect-cta-section h2 { color: var(--efe-white); }
.connect-cta-section p { color: #C4C4C4; }
.connect-cta-section .connect-cta-btn,
.connect-cta-section .connect-btn-outline { color: var(--efe-white); border-color: var(--efe-white); }
.connect-cta-section .connect-cta-btn:hover,
.connect-cta-section .connect-btn-outline:hover { background: var(--efe-white); color: var(--efe-ink); }

/* ========== PIE ========== */
.connect-footer {
    background: var(--efe-white);
    color: var(--efe-ink);
    border-top: 1px solid var(--efe-rule-light);
    padding: 4rem 0 2rem;
}
.connect-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.connect-footer-brand img { width: 184px; height: auto; }
.connect-footer-brand p { color: var(--efe-text-2); margin-top: 1.25rem; max-width: 30em; font-size: .92rem; }
.connect-footer h4 {
    font-family: var(--efe-font-text);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--efe-track-label);
    color: var(--efe-text-3);
    margin: 0 0 1rem;
}
.connect-footer-links { list-style: none; margin: 0; padding: 0; }
.connect-footer-links li { margin-bottom: .55rem; }
.connect-footer-links a { color: var(--efe-ink); font-size: .92rem; text-decoration: none; }
.connect-footer-links a:hover { color: var(--efe-ink); text-decoration: underline; text-underline-offset: 4px; }
.connect-footer address { font-style: normal; font-size: .92rem; color: var(--efe-ink); margin-bottom: .9rem; }
.connect-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--efe-rule-light);
}
.connect-footer-bottom p { margin: 0; font-size: .85rem; color: var(--efe-text-3); }
.connect-footer-social { display: flex; gap: .5rem; }
.connect-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--efe-rule-light);
    border-radius: var(--efe-radius);
    color: var(--efe-ink);
    background: transparent;
}
.connect-footer-social a:hover { background: var(--efe-ink); color: var(--efe-white); border-color: var(--efe-ink); }
@media (max-width: 1024px) { .connect-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .connect-footer-grid { grid-template-columns: 1fr; text-align: left; } }

/* Botón flotante de cotización por WhatsApp: ink, sin pulso. */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    height: 48px;
    padding: 0 1.1rem;
    background: var(--efe-ink);
    color: var(--efe-white);
    border-radius: var(--efe-radius);
    font-weight: 500;
    font-size: .95rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(10, 10, 10, .18);
    transition: background-color 200ms var(--efe-ease);
}
.whatsapp-float:hover { background: var(--efe-rule-dark); color: var(--efe-white); }
.whatsapp-float i { font-size: 1.2rem; }
@media (max-width: 480px) {
    .whatsapp-float { width: 48px; padding: 0; justify-content: center; }
    .whatsapp-float-text { display: none; }
}

/* ========== MOVIMIENTO ========== */
.fade-in-up { opacity: 0; transform: translateY(24px); transition: opacity 400ms var(--efe-ease), transform 400ms var(--efe-ease); }
.fade-in-up.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .fade-in-up, .fade-in-up.visible { opacity: 1; transform: none; transition: none; }
    .efe-filo.efe-anima, .search-autocomplete.active { animation: none; }
    .efe-progreso::before { animation: none; transform: scaleX(.85); }
}

/* Aviso de vista previa (solo mientras el sitio no es indexable). */
.efe-vista-previa {
    background: var(--efe-ink);
    color: var(--efe-white);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    padding: .45rem 1rem;
}

/* ========== LISTADOS (catálogo y categorías) ========== */
:root { --connect-dark: var(--efe-ink); }   /* la usaban páginas viejas sin que existiera */

.efe-listado { padding: 2rem 0 5rem; }
.efe-migas { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--efe-text-3); margin-bottom: 2rem; }
.efe-migas a { color: var(--efe-ink); text-decoration: none; }
.efe-migas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.efe-migas span[aria-current] { color: var(--efe-text-3); }

.efe-listado-encabezado { margin-bottom: 2.5rem; max-width: 52rem; }
.efe-listado-titulo { font-size: clamp(2rem, 4vw, 3.25rem); margin: .9rem 0 0; }
.efe-listado-resumen { margin: 1.25rem 0 0; color: var(--efe-text-2); font-size: 1.05rem; max-width: 46em; }

/* Páginas anchas (listados y fichas): el contenido, el encabezado y el pie llegan hasta --container-ancho. */
.efe-pagina-ancha .connect-header .container, .efe-pagina-ancha .connect-footer .container, .efe-contenedor-ancho { max-width: var(--container-ancho); }

.efe-listado-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 991px) { .efe-listado-grid { grid-template-columns: 1fr; } }

/* En escritorio la barra de filtros se queda a la vista (con su propio scroll) mientras bajas por los productos. */
.efe-filtros { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 992px) {
    .efe-filtros { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow-y: auto; padding-right: .35rem; scrollbar-width: thin; }
}
.efe-filtros .efe-label { display: block; margin-bottom: .75rem; }
.efe-filtros-bloque { background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: 1.1rem 1.1rem .6rem; }
.efe-filtros-lista { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.efe-filtros-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .35rem 0; border-top: 1px solid var(--efe-paper); }
.efe-filtros-lista li:first-child { border-top: 0; }
.efe-filtros-lista a { color: var(--efe-ink); text-decoration: none; font-size: .92rem; }
.efe-filtros-lista a:hover { text-decoration: underline; text-underline-offset: 3px; }
.efe-filtros-lista a.activo { font-weight: 600; box-shadow: inset 2px 0 0 var(--efe-accent); padding-left: .6rem; }
.efe-filtros-lista span { font-size: .8rem; color: var(--efe-text-3); font-variant-numeric: tabular-nums; }
.efe-filtros-lista .sub a { padding-left: 1rem; font-size: .88rem; color: var(--efe-text-2); }
.efe-filtros-lista--abierta { max-height: none; overflow: visible; }

/* Opciones con casilla (disponibilidad y marcas): se pueden combinar; la casilla dice si está puesta. */
.efe-filtros-lista a.efe-opcion { display: inline-flex; align-items: center; gap: .55rem; }
.efe-filtros-lista a.efe-opcion.activo { box-shadow: none; padding-left: 0; }
.efe-casilla { flex: none; width: 16px; height: 16px; border: 1px solid var(--efe-text-3); border-radius: 3px; background: var(--efe-white); }
.efe-opcion:hover .efe-casilla { border-color: var(--efe-ink); }
.efe-opcion.activo .efe-casilla { border-color: var(--efe-ink); background: var(--efe-ink); box-shadow: inset 0 0 0 3px var(--efe-white); }
/* Marcas con el tope de combinación lleno (CATALOGO_MAX_MARCAS): se ven, pero sin enlace hasta quitar una. */
.efe-filtros-lista .efe-opcion--inactiva { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--efe-text-3); cursor: not-allowed; }
.efe-opcion--inactiva .efe-casilla { border-color: var(--efe-rule-light); background: var(--efe-paper); }
.efe-filtros-marcas-buscar { width: 100%; height: 36px; margin-bottom: .5rem; padding: 0 .7rem; font-size: .88rem; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); background: var(--efe-white); }
.efe-filtros-marcas-buscar:focus { outline: none; border-color: var(--efe-ink); }
.efe-filtros-quitar { display: inline-block; margin: .35rem 0 .5rem; font-size: .82rem; color: var(--efe-text-2); }
.efe-precio-rango { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 38px; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.efe-precio-rango input { min-width: 0; height: 38px; padding: 0 .55rem; font-size: .88rem; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); background: var(--efe-white); font-variant-numeric: tabular-nums; }
.efe-precio-rango input:focus { outline: none; border-color: var(--efe-ink); }
.efe-precio-rango span { color: var(--efe-text-3); }
.efe-precio-rango button { height: 38px; border: 1px solid var(--efe-ink); border-radius: var(--efe-radius); background: var(--efe-ink); color: var(--efe-white); }
.efe-filtros-cabeza, .efe-filtros-pie, .efe-boton-filtros { display: none; }

/* Celular y tableta: los filtros se abren en un panel a pantalla completa con el botón "Filtros". */
@media (max-width: 991px) {
    /* z-index arriba del encabezado de celular (10000): si no, el encabezado tapa la X y el título del panel. */
    .efe-filtros { display: none; position: fixed; inset: 0; z-index: 10002; overflow-y: auto; padding: 1rem 1rem 0; background: var(--efe-paper); }
    .efe-filtros.efe-filtros--abierto { display: flex; }
    .efe-filtros-cabeza { display: flex; justify-content: space-between; align-items: center; }
    .efe-filtros-cerrar { width: 40px; height: 40px; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); background: var(--efe-white); color: var(--efe-ink); }
    .efe-filtros-pie { display: block; position: sticky; bottom: 0; margin-top: auto; padding: .75rem 0 1rem; background: var(--efe-paper); }
    .efe-filtros-pie .efe-cta { width: 100%; justify-content: center; }
    .efe-filtros-lista { max-height: 260px; }
    .efe-boton-filtros { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .85rem; border: 1px solid var(--efe-ink); border-radius: var(--efe-radius); background: var(--efe-white); color: var(--efe-ink); font-size: .9rem; }
    .efe-boton-filtros-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 .3rem; border-radius: 10px; background: var(--efe-ink); color: var(--efe-white); font-size: .75rem; }
    body.efe-sin-scroll { overflow: hidden; }
    body.efe-sin-scroll .whatsapp-float { display: none; }   /* tapaba el botón "Ver productos" del panel */
}

.efe-campo-busqueda { display: flex; height: 44px; background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); }
.efe-campo-busqueda:focus-within { border-color: var(--efe-ink); }
.efe-campo-busqueda input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 .85rem; font-size: .95rem; outline: none; color: var(--efe-ink); }
.efe-campo-busqueda button { width: 44px; border: 0; background: transparent; color: var(--efe-ink); border-radius: 0 var(--efe-radius) var(--efe-radius) 0; }
.efe-campo-busqueda button:hover { background: var(--efe-paper); }

.efe-barra-orden { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--efe-rule-light); }
.efe-barra-izq { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-width: 0; }
.efe-barra-der { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-left: auto; }
.efe-barra-total { font-size: .9rem; color: var(--efe-text-3); white-space: nowrap; }
.efe-barra-total strong { color: var(--efe-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.efe-limpiar { font-size: .85rem; color: var(--efe-text-2); white-space: nowrap; }
.efe-orden { display: flex; align-items: center; gap: .6rem; }
.efe-orden label { font-size: .85rem; color: var(--efe-text-3); white-space: nowrap; }
.efe-orden .form-select { min-width: 200px; }
.efe-filtros-activos { display: flex; flex-wrap: wrap; gap: .5rem; }
.efe-chip-filtro { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: 0 .75rem; border: 1px solid var(--efe-ink); border-radius: var(--efe-radius); font-size: .85rem; color: var(--efe-ink); text-decoration: none; background: var(--efe-white); }
.efe-chip-filtro:hover { background: var(--efe-ink); color: var(--efe-white); }

/* Tarjeta de producto */
.efe-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.efe-producto { display: flex; flex-direction: column; background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); overflow: hidden; transition: border-color 200ms var(--efe-ease); }
.efe-producto:hover { border-color: var(--efe-ink); }
.efe-producto-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 1.25rem; background: var(--efe-white); border-bottom: 1px solid var(--efe-paper); overflow: hidden; min-height: 0; }
/* overflow y min-* en 0: sin ellos, una foto vertical estira el cuadro por encima del aspect-ratio */
.efe-producto-img img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.efe-producto-sin-foto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--efe-paper); color: var(--efe-muted); font-size: 2rem; border-radius: 4px; }
.efe-producto-cuerpo { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.efe-producto-marca { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--efe-text-3); }
.efe-producto-nombre { font-size: .95rem; font-weight: 500; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.efe-producto-nombre a { color: var(--efe-ink); text-decoration: none; }
.efe-producto-nombre a::after { content: ""; position: absolute; inset: 0; }   /* toda la tarjeta es clicable */
.efe-producto { position: relative; }
.efe-producto-sku { font-size: .78rem; color: var(--efe-text-3); font-variant-numeric: tabular-nums; }
.efe-producto-pie { margin-top: auto; padding-top: .75rem; display: flex; flex-direction: column; gap: .15rem; }
.efe-producto-precio { font-size: 1.15rem; font-weight: 600; color: var(--efe-ink); font-variant-numeric: tabular-nums; }
.efe-producto-precio small { font-size: .72rem; font-weight: 500; color: var(--efe-text-3); letter-spacing: .05em; }
.efe-producto-existencia { font-size: .8rem; color: var(--efe-text-3); }
.efe-producto-existencia.hay { color: var(--efe-ink); }
.efe-producto-existencia.hay::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .45rem; background: var(--efe-ink); vertical-align: middle; }

/* Estado vacío */
.efe-vacio { background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: 2.5rem; }
.efe-vacio-titulo { font-size: 1.25rem; font-weight: 500; margin-bottom: .5rem; }
.efe-vacio p { color: var(--efe-text-2); margin: 0; }

/* Paginación */
.efe-paginacion { margin-top: 2.5rem; }
.efe-paginacion ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.efe-paginacion a, .efe-paginacion span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .6rem; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); background: var(--efe-white); color: var(--efe-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.efe-paginacion a:hover { border-color: var(--efe-ink); }
.efe-paginacion span[aria-current] { background: var(--efe-ink); border-color: var(--efe-ink); color: var(--efe-white); }
.efe-paginacion .hueco { display: inline-flex; align-items: center; color: var(--efe-text-3); padding: 0 .25rem; }

.efe-listado-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }

/* Chip de dato: cuadro rojo de 10 px como señal + dato verificable */
.efe-chip {
    display: inline-flex; align-items: center; gap: .75rem;
    min-height: 44px; padding: 0 1rem;
    background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius);
    font-weight: 500; font-size: .92rem; color: var(--efe-ink);
}
.efe-chip::before { content: ""; width: 10px; height: 10px; background: var(--efe-accent); flex-shrink: 0; }

.efe-subcategorias { display: flex; flex-wrap: wrap; gap: .5rem; margin: -1rem 0 2.5rem; }
.efe-subcategorias a {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 .9rem;
    background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius);
    color: var(--efe-ink); text-decoration: none; font-size: .92rem;
}
.efe-subcategorias a:hover { border-color: var(--efe-ink); }
.efe-subcategorias span { font-size: .78rem; color: var(--efe-text-3); }

/* Preguntas frecuentes con <details>: funcionan sin JavaScript y su texto queda en el HTML. */
.efe-preguntas { max-width: 900px; }
.efe-preguntas-titulo { font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin: .9rem 0 0; }
.efe-preguntas-lista { margin-top: 2.5rem; border-top: 1px solid var(--efe-rule-light); }
.efe-preguntas-lista details { border-bottom: 1px solid var(--efe-rule-light); background: transparent; }
.efe-preguntas-lista summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    padding: 1.25rem 0; font-size: 1.05rem; font-weight: 500; color: var(--efe-ink);
}
.efe-preguntas-lista summary::-webkit-details-marker { display: none; }
.efe-preguntas-lista summary::after { content: "+"; font-size: 1.4rem; font-weight: 300; line-height: 1; color: var(--efe-ink); }
.efe-preguntas-lista details[open] summary::after { content: "−"; }
.efe-preguntas-lista details > div { padding: 0 0 1.5rem; color: var(--efe-text-2); max-width: 70ch; line-height: 1.6; }

/* Texto largo editado en el admin */
.efe-prosa { max-width: 860px; color: var(--efe-text-2); line-height: 1.65; }
.efe-prosa h2, .efe-prosa h3 { color: var(--efe-ink); font-weight: 600; margin: 2rem 0 .75rem; }
.efe-prosa h2 { font-size: 1.6rem; }
.efe-prosa h3 { font-size: 1.25rem; }
.efe-prosa ul, .efe-prosa ol { padding-left: 1.25rem; }

/* Cierre con CTA (sobre ink) */
.connect-cta-section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; text-align: left; }
.connect-cta-section h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); max-width: 18em; margin: 0; }
.connect-cta-section p { margin: 1.25rem 0 2rem; font-size: 1.05rem; max-width: 40em; }
.connect-cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; }

/* Páginas de error */
.efe-error { padding: clamp(4rem, 10vw, 8rem) 0; }
.efe-error-codigo { font-family: var(--efe-font-display); font-size: clamp(5rem, 14vw, 10rem); line-height: .9; color: var(--efe-accent); letter-spacing: -0.05em; }
.efe-error h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; margin: 1.5rem 0 0; max-width: 22em; }
.efe-error p { color: var(--efe-text-2); margin: 1rem 0 2rem; max-width: 40em; }

/* ========== PORTADA ========== */
.efe-reveal { animation: efe-reveal 400ms var(--efe-ease) both; }
@media (prefers-reduced-motion: reduce) { .efe-reveal { animation: none; } }
.efe-portada { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.efe-portada-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.efe-portada h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); }
.efe-portada-panel {
    background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}
.efe-portada-busqueda .efe-label { display: block; margin-bottom: .75rem; }
.efe-campo-busqueda--grande { height: 56px; }
.efe-campo-busqueda--grande input { font-size: 1.05rem; padding: 0 1rem; }
.efe-campo-busqueda--grande button { width: 56px; font-size: 1.1rem; }
.efe-datos { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.75rem 0 0; border-top: 1px solid var(--efe-rule-light); }
.efe-datos > div { padding: 1.1rem .75rem 0 0; }
.efe-datos > div + div { padding-left: .9rem; border-left: 1px solid var(--efe-rule-light); }
.efe-datos dt { font-size: 11px; font-weight: 500; letter-spacing: var(--efe-track-label); text-transform: uppercase; color: var(--efe-text-3); }
.efe-datos dd { margin: .35rem 0 0; font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 500; color: var(--efe-ink); font-variant-numeric: tabular-nums; }
.efe-ventajas { list-style: none; margin: 1.5rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--efe-rule-light); display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; color: var(--efe-text-2); }
.efe-ventajas li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--efe-ink); margin-right: .5rem; vertical-align: middle; }
@media (max-width: 991px) {
    .efe-portada-grid { grid-template-columns: 1fr; }
    .connect-hero .connect-hero-ctas { justify-content: flex-start; }
}

.efe-seccion-encabezado { margin-bottom: 2.5rem; }
.efe-seccion-encabezado .connect-section-title { margin-top: .9rem; }
.efe-seccion-encabezado--fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }

.efe-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.efe-categoria {
    display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1rem 1.1rem;
    background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius);
    color: var(--efe-ink); text-decoration: none; transition: border-color 200ms var(--efe-ease);
}
.efe-categoria:hover { border-color: var(--efe-ink); color: var(--efe-ink); }
/* Todas las fotos en la misma caja, sea cual sea su proporción: con max-height en %, una foto alta (un no-break)
   estiraba la caja y la tarjeta. Absoluta, la foto ya no empuja el alto. */
.efe-categoria-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: .75rem; }
.efe-categoria-img img { position: absolute; inset: 0; margin: auto; width: 80%; height: 85%; object-fit: contain; }
.efe-categoria-img i { font-size: 2.5rem; color: var(--efe-ink); }
.efe-categoria-nombre { font-weight: 500; font-size: 1rem; }
.efe-categoria-conteo { font-size: .82rem; color: var(--efe-text-3); }
@media (max-width: 520px) {
    .efe-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .efe-categoria { padding: .75rem .75rem .9rem; }
    .efe-categoria-nombre { font-size: .92rem; }
}

.efe-productos--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .efe-productos--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .efe-productos--cuatro { grid-template-columns: 1fr; } }

.efe-servicios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--efe-rule-light); border-left: 1px solid var(--efe-rule-light); background: var(--efe-white); }
.efe-servicio {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem;
    border-right: 1px solid var(--efe-rule-light); border-bottom: 1px solid var(--efe-rule-light);
    color: var(--efe-ink); text-decoration: none;
}
.efe-servicio strong { font-weight: 500; font-size: 1.1rem; }
.efe-servicio strong::after { content: " →"; font-weight: 400; }
.efe-servicio span { color: var(--efe-text-2); font-size: .95rem; line-height: 1.5; }
.efe-servicio:hover { background: var(--efe-paper); color: var(--efe-ink); }
@media (max-width: 900px) { .efe-servicios { grid-template-columns: 1fr; } }

.efe-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; counter-reset: none; }
.efe-pasos li { border-top: 1px solid var(--efe-ink); padding-top: 1.25rem; }
.efe-paso-num { display: block; font-family: var(--efe-font-display); font-size: 2.5rem; line-height: 1; color: var(--efe-ink); margin-bottom: 1rem; }
.efe-pasos strong { display: block; font-weight: 500; font-size: 1.15rem; margin-bottom: .4rem; }
.efe-pasos p { color: var(--efe-text-2); margin: 0; }
@media (max-width: 900px) { .efe-pasos { grid-template-columns: 1fr; gap: 1.75rem; } }

.efe-transicion { margin-top: 3.5rem; padding: 1.5rem 1.75rem; background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-left: 3px solid var(--efe-ink); border-radius: var(--efe-radius); max-width: 760px; }
.efe-transicion p { margin: .6rem 0 0; color: var(--efe-ink); }
@media (max-width: 1024px) {
    .connect-hero .connect-hero-grid { text-align: left; }
    .connect-hero .connect-hero-ctas { justify-content: flex-start; }
    .connect-hero .connect-hero-sub { margin-left: 0; margin-right: 0; }
}

/* ========== FICHA DE PRODUCTO ========== */
.efe-ficha { padding: 2rem 0 5rem; }
.efe-contenedor-ficha { max-width: 1520px; }
/* Tres columnas: foto | datos | caja de compra (fija al bajar). En tableta, la caja va debajo de los datos; en
   celular, todo en una columna. Antes eran dos columnas y el título y la caja quedaban más altos que la foto. */
.efe-ficha-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4.4fr) minmax(290px, 3.2fr); gap: clamp(1.25rem, 2.6vw, 2.75rem); align-items: start; }
@media (max-width: 1199px) {
    .efe-ficha-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .efe-galeria { grid-row: span 2; }
    .efe-ficha-compra { grid-column: 2; }
}
@media (max-width: 991px) {
    .efe-ficha-grid { grid-template-columns: minmax(0, 1fr); }
    .efe-galeria { grid-row: auto; }
    .efe-ficha-compra { grid-column: auto; }
}

.efe-galeria { position: sticky; top: 92px; }
@media (max-width: 991px) { .efe-galeria { position: static; } }
.efe-galeria-principal { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 640px; background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: clamp(1rem, 2.5vw, 2.25rem); }
.efe-galeria-principal img { width: 100%; height: 100%; object-fit: contain; }
.efe-galeria-miniaturas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.efe-galeria-miniaturas button { width: 64px; height: 64px; padding: 6px; background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: 4px; cursor: pointer; }
.efe-galeria-miniaturas button.activa, .efe-galeria-miniaturas button:hover { border-color: var(--efe-ink); }
.efe-galeria-miniaturas img { width: 100%; height: 100%; object-fit: contain; }

.efe-ficha-info { padding-top: .25rem; }
.efe-ficha-titulo { font-size: clamp(1.2rem, 1rem + .55vw, 1.55rem); font-weight: 600; line-height: 1.3; margin: .75rem 0 1.25rem; color: var(--efe-ink); }
.efe-ficha-titulo-detalle { display: block; margin-top: .5rem; font-size: .95rem; font-weight: 400; line-height: 1.5; color: var(--efe-text-2); }
.efe-ficha-claves { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .45rem; }
.efe-ficha-claves li { position: relative; padding-left: 1.1rem; font-size: .95rem; line-height: 1.45; color: var(--efe-text-2); }
.efe-ficha-claves li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--efe-ink); }
.efe-ficha-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--efe-rule-light); }
.efe-ficha-datos > div { padding: .65rem 0; border-bottom: 1px solid var(--efe-rule-light); }
.efe-ficha-datos > div:nth-child(odd) { padding-right: 1rem; }
.efe-ficha-datos dt { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--efe-text-3); }
.efe-ficha-datos dd { margin: .2rem 0 0; font-size: .92rem; color: var(--efe-ink); word-break: break-word; }
.efe-ficha-datos dd a { color: var(--efe-ink); }

/* Caja de compra */
.efe-ficha-compra { background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: clamp(1.1rem, 2vw, 1.6rem); }
@media (min-width: 1200px) { .efe-ficha-compra { position: sticky; top: 92px; } }
.efe-ficha-compra .efe-compra-acciones { flex-direction: column; }
.efe-ficha-compra .efe-compra-acciones .efe-cta, .efe-ficha-compra .efe-compra-acciones .efe-cta--secundario { flex: none; width: 100%; justify-content: center; }
.efe-ficha-compra .efe-ventajas--ficha { margin-top: 1.25rem; }
.efe-ficha-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1rem; font-size: .88rem; }
.efe-ficha-enlaces a { display: inline-flex; align-items: center; gap: .4rem; color: var(--efe-ink); }
.efe-ficha-enlaces .efe-compartir { margin-top: 0; }

/* Pestañas (Descripción, Descargas, Videos, Equipos complementarios). Sin JavaScript se ven todas con su título. */
.efe-pestanas { margin-top: clamp(2.5rem, 5vw, 4rem); }
.efe-pestanas-lista { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--efe-rule-light); }
.efe-pestanas-lista button { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 1rem; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); background: var(--efe-white); color: var(--efe-ink); font-size: .92rem; cursor: pointer; }
.efe-pestanas-lista button:hover { border-color: var(--efe-ink); }
.efe-pestanas-lista button[aria-selected="true"] { border-color: var(--efe-ink); background: var(--efe-ink); color: var(--efe-white); }
.efe-pestanas-lista button span { font-size: .78rem; opacity: .7; font-variant-numeric: tabular-nums; }
.efe-pestanas:not(.efe-pestanas--activas) .efe-pestanas-lista { display: none; }
.efe-pestanas--activas .efe-pestana-titulo { display: none; }
.efe-pestana + .efe-pestana { margin-top: 2.5rem; }
.efe-pestanas--activas .efe-pestana + .efe-pestana { margin-top: 0; }
.efe-descargas-nota { margin: .9rem 0 1.25rem; font-size: .85rem; color: var(--efe-text-3); }

.efe-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: 1rem; }
.efe-precio-monto { font-size: clamp(1.7rem, 2.2vw, 2.15rem); font-weight: 600; letter-spacing: -0.02em; color: var(--efe-ink); font-variant-numeric: tabular-nums; }
.efe-precio-nota { font-size: .85rem; color: var(--efe-text-3); }

.efe-existencias { padding: 1rem 0; border-top: 1px solid var(--efe-rule-light); border-bottom: 1px solid var(--efe-rule-light); margin-bottom: 1.5rem; }
.efe-existencias-estado { margin: 0; font-size: 1rem; color: var(--efe-ink); }
.efe-existencias-estado strong { font-weight: 600; }
.efe-existencias-verificado { margin: .35rem 0 0; font-size: .8rem; color: var(--efe-text-3); }
.efe-existencias-verificado:empty { display: none; }
.efe-almacenes { margin-top: .6rem; font-size: .88rem; }
.efe-almacenes summary { cursor: pointer; color: var(--efe-text-2); }
.efe-almacenes ul { list-style: none; margin: .5rem 0 0; padding: 0; max-width: 360px; }
.efe-almacenes li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--efe-paper); }

.efe-compra .efe-label { display: block; margin-bottom: .5rem; }
.efe-cantidad { display: inline-flex; height: 44px; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); overflow: hidden; }
.efe-cantidad button { width: 44px; border: 0; background: var(--efe-white); color: var(--efe-ink); font-size: 1.2rem; cursor: pointer; }
.efe-cantidad button:hover { background: var(--efe-paper); }
.efe-cantidad input { width: 72px; border: 0; border-left: 1px solid var(--efe-rule-light); border-right: 1px solid var(--efe-rule-light); text-align: center; font-size: 1rem; color: var(--efe-ink); -moz-appearance: textfield; }
.efe-cantidad input::-webkit-outer-spin-button, .efe-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.efe-compra-nota { margin: .5rem 0 0; font-size: .85rem; color: var(--efe-text-2); }
.efe-compra-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.efe-compra-acciones .efe-cta, .efe-compra-acciones .efe-cta--secundario { flex: 1 1 220px; }
.efe-compartir { margin-top: 1rem; background: none; border: 0; padding: 0; color: var(--efe-text-2); font-size: .88rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.efe-compartir:hover { color: var(--efe-ink); }

.efe-no-disponible { padding: 1.25rem; background: var(--efe-paper); border-radius: var(--efe-radius); }
.efe-no-disponible-titulo { font-weight: 600; font-size: 1.1rem; margin: 0 0 .35rem; }
.efe-no-disponible p { margin: 0; color: var(--efe-text-2); }

.efe-ventajas--ficha { margin-top: 1.5rem; }

.efe-ficha-seccion { margin-top: clamp(3rem, 6vw, 4.5rem); }
.efe-ficha-subtitulo { font-size: 12px; font-weight: 500; letter-spacing: var(--efe-track-label); text-transform: uppercase; color: var(--efe-text-3); padding-bottom: .9rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--efe-rule-light); }
.efe-descripcion { max-width: 920px; }
.efe-faq-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 0 2.5rem; margin: 0; max-width: 1200px; }
.efe-faq-lista > div { padding: 1rem 0; border-bottom: 1px solid var(--efe-rule-light); }
.efe-faq-lista dt { font-weight: 600; color: var(--efe-ink); margin-bottom: .3rem; }
.efe-faq-lista dd { margin: 0; color: var(--efe-text-2); font-size: .95rem; }
.efe-descripcion table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .92rem; background: var(--efe-white); }
.efe-descripcion th, .efe-descripcion td { padding: .55rem .75rem; border-bottom: 1px solid var(--efe-rule-light); text-align: left; vertical-align: top; }
.efe-descripcion th { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--efe-text-3); background: var(--efe-paper); }
.efe-descripcion td:first-child { color: var(--efe-text-2); width: 40%; }
.efe-descripcion img { max-width: 100%; height: auto; }
.efe-descripcion iframe { max-width: 100%; }
.efe-descargas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.efe-descargas a { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); background: var(--efe-white); color: var(--efe-ink); text-decoration: none; font-size: .9rem; }
.efe-descargas a:hover { border-color: var(--efe-ink); }
.efe-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.efe-video { position: relative; aspect-ratio: 16 / 9; background: var(--efe-ink); border-radius: var(--efe-radius); overflow: hidden; }
.efe-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ========== CONTACTO ========== */
.efe-contacto { padding: clamp(2.5rem, 6vw, 5rem) 0 5rem; }
.efe-contacto-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 991px) { .efe-contacto-grid { grid-template-columns: 1fr; } }
.efe-contacto-titulo { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin: .9rem 0 0; }
.efe-contacto-intro { margin: 1.5rem 0 2rem; font-size: 1.1rem; color: var(--efe-text-2); max-width: 32em; }
.efe-contacto-canales { display: flex; flex-wrap: wrap; gap: .75rem; }
.efe-oficinas { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.efe-oficinas address { margin: 0; font-style: normal; line-height: 1.6; color: var(--efe-ink); }
.efe-oficinas .efe-link { font-size: .9rem; margin-top: .25rem; }

.efe-formulario { background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: clamp(1.25rem, 3vw, 2.25rem); }
.efe-campo { display: block; margin-bottom: 1.1rem; }
.efe-campo span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--efe-text-3); margin-bottom: .45rem; }
.efe-campo input, .efe-campo textarea {
    width: 100%; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: .75rem .9rem;
    font: inherit; font-size: 1rem; color: var(--efe-ink); background: var(--efe-white); outline: none;
}
.efe-campo input:focus, .efe-campo textarea:focus { border-color: var(--efe-ink); }
.efe-campo textarea { resize: vertical; min-height: 140px; }
.efe-cta--bloque { width: 100%; }
.efe-formulario-nota { margin: .9rem 0 0; font-size: .9rem; color: var(--efe-ink); min-height: 1.2em; }
.efe-formulario-producto { margin: 0 0 1.25rem; padding: .9rem 1rem; background: var(--efe-paper); border-radius: var(--efe-radius); font-weight: 500; }
.efe-formulario-producto .efe-label { display: block; margin-bottom: .3rem; }
.efe-formulario-producto span:last-child { display: block; font-weight: 400; font-size: .85rem; color: var(--efe-text-3); margin-top: .2rem; }
.efe-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.efe-aviso { padding: 1rem 1.1rem; border: 1px solid var(--efe-ink); border-radius: var(--efe-radius); margin-bottom: 1.25rem; background: var(--efe-white); }
.efe-aviso--ok { border-left: 3px solid var(--efe-accent); }

/* ========== LANDINGS DE SERVICIO ========== */
.efe-landing-hero h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); margin-top: 1rem; }
.efe-landing-hero h1 span { color: var(--efe-accent); }
.efe-landing-solo { max-width: 920px; }
.efe-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.efe-tarjeta { background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: 1.5rem; }
.efe-tarjeta i { font-size: 1.4rem; color: var(--efe-ink); display: block; margin-bottom: 1rem; }
.efe-tarjeta h3 { font-size: 1.1rem; font-weight: 500; margin: 0 0 .5rem; }
.efe-tarjeta p { margin: 0; color: var(--efe-text-2); font-size: .95rem; line-height: 1.55; }
.efe-tarjeta--problema { border-left: 3px solid var(--efe-ink); }
.efe-alcance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; max-width: 980px; }
@media (max-width: 768px) { .efe-alcance { grid-template-columns: 1fr; } }
.efe-alcance h3 { display: block; margin-bottom: 1rem; }
.efe-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--efe-rule-light); }
.efe-lista li { padding: .7rem 0 .7rem 1.6rem; border-bottom: 1px solid var(--efe-rule-light); position: relative; }
.efe-lista--si li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 8px; height: 8px; background: var(--efe-ink); }
.efe-lista--no li { color: var(--efe-text-3); }
.efe-lista--no li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: 10px; height: 1px; background: var(--efe-text-3); }
.efe-datos--landing { margin: 0; border-top: 0; }
.efe-datos--landing > div { padding-top: 0; }
.efe-datos--landing dd { font-size: 1.05rem; }
.efe-datos--landing a { color: var(--efe-ink); }
@media (max-width: 768px) { .efe-datos--landing { grid-template-columns: 1fr; gap: 1rem; } .efe-datos--landing > div + div { border-left: 0; padding-left: 0; } }

/* ========== TELÉFONO ==========
   Las columnas usan minmax(0, 1fr): con "1fr" una palabra larga en Display (OPERACIÓN,) ensanchaba la
   columna más allá de la pantalla y overflow-x:hidden la recortaba. Los títulos escalan con el ancho. */
.efe-display, .connect-hero h1, .connect-section-title, .connect-cta-section h2 { overflow-wrap: break-word; hyphens: manual; }
.efe-producto-nombre, .efe-ficha-titulo, .efe-ficha-datos dd, .efe-migas { overflow-wrap: anywhere; }
.efe-portada h1 { font-size: clamp(2rem, 9vw, 5.4rem); }
.efe-landing-hero h1 { font-size: clamp(1.9rem, 7.5vw, 4.2rem); }
.efe-listado-titulo { font-size: clamp(1.8rem, 7vw, 3.25rem); }
.efe-contacto-titulo { font-size: clamp(1.9rem, 7.5vw, 3.8rem); }
@media (max-width: 991px) {
    .efe-portada-grid, .efe-listado-grid, .efe-ficha-grid, .efe-contacto-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .efe-datos { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
    .efe-datos > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
    .efe-ficha-datos { grid-template-columns: 1fr; }
    .efe-ficha-datos > div:nth-child(odd) { padding-right: 0; }
    .efe-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .efe-producto-cuerpo { padding: .8rem; }
    .efe-producto-img { padding: .75rem; }
    .connect-hero-ctas .connect-btn-primary { width: 100%; }
}

/* ========== ENTREGA (Dicotech): inmediata en Aguascalientes o bajo pedido ========== */
.efe-entrega { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.efe-entrega li { font-size: 1rem; color: var(--efe-ink); }
.efe-entrega li strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.efe-entrega li span { color: var(--efe-text-3); font-size: .88rem; margin-left: .25rem; }
.efe-entrega li.inmediata::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .55rem; background: var(--efe-accent); vertical-align: middle; }
.efe-entrega li:not(.inmediata)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .55rem; border: 1px solid var(--efe-ink); vertical-align: middle; }
.efe-filtros-nota { font-size: .8rem; color: var(--efe-text-3); margin: .5rem 0 .4rem; line-height: 1.45; }
@media (max-width: 1100px) { .efe-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .efe-servicios { grid-template-columns: 1fr; } }

/* Aviso de privacidad y textos legales */
.efe-legal { max-width: 760px; margin-top: 2rem; }
.efe-legal h2 { font-size: 1.15rem; font-weight: 500; margin: 2rem 0 .5rem; }
.efe-legal p { color: var(--efe-text-2); line-height: 1.7; }
.efe-legal-fecha { font-size: .9rem; color: var(--efe-text-3); margin-top: 2rem; }
.efe-formulario-legal { font-size: .85rem; color: var(--efe-text-3); margin: .75rem 0 0; }
.efe-formulario-legal a, .connect-footer-bottom p a { color: inherit; text-decoration: underline; }

/* ========== PEDIDO EN LÍNEA (carrito, /pedido, /pedido/{token}) ========== */
/* Encabezado: ícono del pedido con el número de productos (assets/js/pedidos.js). */
.connect-carrito { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); color: var(--efe-ink); font-size: 1.15rem; text-decoration: none; transition: background-color 200ms var(--efe-ease), color 200ms var(--efe-ease); }
.connect-carrito:hover { background: var(--efe-ink); color: var(--efe-white); border-color: var(--efe-ink); }
.connect-carrito-n { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--efe-accent); color: var(--efe-white); font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.connect-carrito-n[hidden] { display: none; }
.connect-carrito--movil { display: none; }
@media (max-width: 991px) { .connect-carrito--movil { display: inline-flex; margin-left: auto; } }
/* Logo, ícono del pedido y menú en una fila hasta 320 px. */
@media (max-width: 420px) {
    .connect-header .container { gap: 8px; }
    .connect-logo img { width: 128px; height: auto; }
    .connect-logo .efe-linea { margin-left: 10px; padding-left: 10px; }
}
@media (max-width: 359px) {
    .connect-header .container { gap: 6px; }
    .connect-logo img { width: 120px; }
    .connect-logo .efe-linea { display: none; }
}

/* Tarjetas: agregar al pedido sin salir del listado (encima del enlace que cubre la tarjeta). */
.efe-producto-agregar { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; min-height: 36px; padding: 0 .85rem; border: 1px solid var(--efe-ink); border-radius: var(--efe-radius); background: var(--efe-white); color: var(--efe-ink); font-size: .85rem; font-weight: 500; cursor: pointer; transition: background-color 200ms var(--efe-ease), color 200ms var(--efe-ease); }
.efe-producto-agregar:hover, .efe-producto-agregar.agregado { background: var(--efe-ink); color: var(--efe-white); }

/* Aviso flotante «agregado a tu pedido» */
.efe-aviso-flotante { position: fixed; left: 50%; bottom: 24px; z-index: 9500; transform: translate(-50%, 140%); max-width: min(560px, calc(100vw - 32px)); padding: .85rem 1.1rem; background: var(--efe-ink); color: var(--efe-white); border-radius: var(--efe-radius); box-shadow: 0 12px 32px rgba(10, 10, 10, .22); font-size: .92rem; line-height: 1.45; transition: transform 300ms var(--efe-ease); }
.efe-aviso-flotante.visible { transform: translate(-50%, 0); }
.efe-aviso-flotante a { color: var(--efe-white); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
body.efe-con-barra .efe-aviso-flotante { bottom: 88px; }

/* Ficha: cómo se paga y cuánto cuesta el envío; la cotización formal como enlace. */
.efe-compra-info { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--efe-rule-light); display: grid; gap: .55rem; font-size: .88rem; color: var(--efe-text-2); }
.efe-compra-info li { display: flex; gap: .6rem; align-items: flex-start; }
.efe-compra-info i { color: var(--efe-ink); font-size: 1rem; line-height: 1.3; }
.efe-compra-formal { align-self: center; font-size: .9rem; }

/* Ficha en celular: barra fija con precio y Comprar cuando la caja de compra queda fuera de la pantalla. */
.efe-barra-compra { display: none; }
@media (max-width: 991px) {
    .efe-barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9100; display: flex; align-items: center; gap: .75rem; padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom)); background: var(--efe-white); border-top: 1px solid var(--efe-rule-light); box-shadow: 0 -8px 24px rgba(10, 10, 10, .08); transform: translateY(110%); transition: transform 250ms var(--efe-ease); }
    .efe-barra-compra.visible { transform: none; }
    .efe-barra-compra[hidden] { display: none; }
    .efe-barra-compra-precio { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; }
    .efe-barra-compra-precio strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
    .efe-barra-compra-precio small { font-size: .72rem; color: var(--efe-text-3); }
    .efe-barra-compra .efe-cta { min-height: 44px; padding: 0 1.25rem; }
    .efe-barra-compra-wa { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--efe-ink); border-radius: var(--efe-radius); color: var(--efe-ink); font-size: 1.15rem; }
    body.efe-con-barra .whatsapp-float { display: none; }
    body.efe-con-barra { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .efe-barra-compra, .efe-aviso-flotante { transition: none; } }

/* Páginas del pedido */
.efe-pedido { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); background: var(--efe-paper); min-height: 60vh; }
.efe-pedido-titulo { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: .75rem 0 0; }
.efe-pedido-intro { max-width: 720px; margin: 0 0 1.5rem; font-size: 1.05rem; color: var(--efe-text-2); }
.efe-pedido .efe-filo { margin-bottom: 1.5rem; }
.efe-pedido-vacio { background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: 2.5rem; }
.efe-pedido-vacio p { font-size: 1.15rem; margin-bottom: 1.25rem; }
.efe-pedido-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
/* En celular el resumen queda al final: arriba, el total con un enlace a él. */
.efe-pedido-total-movil { display: none; }
@media (max-width: 991px) {
    .efe-pedido-total-movil { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; padding: .85rem 1.1rem; background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); color: var(--efe-ink); text-decoration: none; font-size: .9rem; }
    .efe-pedido-total-movil strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
}
@media (max-width: 991px) { .efe-pedido-grid { grid-template-columns: minmax(0, 1fr); } }

/* Carrito */
.efe-carrito-lista { list-style: none; margin: 0; padding: 0; background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); }
.efe-carrito-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto 36px; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--efe-paper); }
.efe-carrito-item:last-child { border-bottom: 0; }
.efe-carrito-foto { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; color: var(--efe-muted); font-size: 1.6rem; }
.efe-carrito-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.efe-carrito-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.efe-carrito-nombre { color: var(--efe-ink); font-weight: 500; line-height: 1.35; text-decoration: none; }
.efe-carrito-nombre:hover { text-decoration: underline; }
.efe-carrito-meta { font-size: .8rem; color: var(--efe-text-3); }
.efe-carrito-entrega { font-size: .85rem; color: var(--efe-text-2); }
.efe-carrito-nota { font-size: .82rem; color: var(--efe-ink); }
.efe-carrito-cantidad { display: flex; gap: .4rem; align-items: center; }
.efe-carrito-cantidad input { width: 76px; height: 40px; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); text-align: center; font-size: 1rem; }
.efe-carrito-actualizar { height: 40px; padding: 0 .7rem; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); background: var(--efe-white); font-size: .85rem; }
.efe-carrito-importe { text-align: right; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.efe-carrito-importe span { font-size: .78rem; color: var(--efe-text-3); }
.efe-carrito-quitar button { width: 36px; height: 36px; border: 0; border-radius: var(--efe-radius); background: transparent; color: var(--efe-text-2); cursor: pointer; }
.efe-carrito-quitar button:hover { background: var(--efe-paper); color: var(--efe-ink); }
.efe-carrito-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.efe-boton-texto { background: none; border: 0; padding: 0; cursor: pointer; color: var(--efe-text-2); font-size: .9rem; }
@media (max-width: 640px) {
    .efe-carrito-item { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "foto info quitar" "foto cantidad importe"; row-gap: .6rem; column-gap: .75rem; }
    .efe-carrito-foto { grid-area: foto; width: 64px; height: 64px; align-self: start; }
    .efe-carrito-info { grid-area: info; }
    .efe-carrito-quitar { grid-area: quitar; align-self: start; }
    .efe-carrito-cantidad { grid-area: cantidad; }
    .efe-carrito-importe { grid-area: importe; justify-self: end; }
}

/* Resumen (carrito, datos del pedido y página del pedido) */
.efe-resumen { display: flex; flex-direction: column; gap: .75rem; background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: 1.25rem 1.3rem; }
/* Fijo al bajar, sin pasar del alto de la pantalla: con muchos productos, el botón del final no queda escondido. */
@media (min-width: 992px) { .efe-resumen { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow-y: auto; scrollbar-width: thin; } }
.efe-resumen-fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.efe-resumen-total { padding-top: .75rem; border-top: 1px solid var(--efe-rule-light); font-size: 1.1rem; }
.efe-resumen-total strong { font-size: 1.3rem; }
.efe-resumen-nota { margin: 0; font-size: .85rem; color: var(--efe-text-2); line-height: 1.5; }
.efe-resumen-confianza { list-style: none; margin: .25rem 0; padding: 0; display: grid; gap: .45rem; font-size: .85rem; color: var(--efe-text-2); }
.efe-resumen-confianza i, .efe-resumen-nota i { color: var(--efe-ink); margin-right: .35rem; }
.efe-resumen-productos { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.efe-resumen-productos li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: .75rem; align-items: center; font-size: .88rem; font-variant-numeric: tabular-nums; }
.efe-resumen-foto { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--efe-paper); border-radius: 6px; background: var(--efe-white); }
.efe-resumen-foto img { max-width: 44px; max-height: 44px; object-fit: contain; }
.efe-resumen-foto b { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--efe-ink); color: var(--efe-white); font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
.efe-resumen-nombre { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.efe-resumen-nombre a { color: var(--efe-ink); }
.efe-resumen-nombre small { color: var(--efe-text-3); font-size: .78rem; }

/* Datos del pedido (/pedido) */
.efe-pedido-pasos { display: grid; gap: 1rem; }
.efe-paso { margin: 0; padding: 1.25rem 1.3rem .4rem; background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); min-width: 0; }
.efe-paso legend { float: left; width: 100%; display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; }
.efe-paso legend > span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--efe-ink); color: var(--efe-white); font-size: .8rem; }
.efe-paso legend small { font-weight: 400; color: var(--efe-text-3); font-size: .85rem; }
.efe-paso legend + * { clear: both; }
.efe-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.efe-campos[hidden], .efe-elecciones[hidden] { display: none; }
.efe-campo--ancho { grid-column: 1 / -1; }
@media (max-width: 640px) { .efe-campos { grid-template-columns: 1fr; } }
.efe-campo span small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.efe-campo select { width: 100%; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: .75rem .9rem; font: inherit; font-size: 1rem; color: var(--efe-ink); background-color: var(--efe-white); }
.efe-campo select:focus { border-color: var(--efe-ink); outline: none; }
.efe-campo input:disabled { background: var(--efe-paper); color: var(--efe-text-2); }
.efe-campo [aria-invalid="true"] { border-color: var(--efe-accent); }
.efe-campo .efe-campo-error, .efe-campo-error { display: block; margin-top: .35rem; font-size: .82rem; color: var(--efe-accent); letter-spacing: 0; text-transform: none; font-weight: 600; }
.efe-campo-ayuda { display: block; margin-top: .35rem; font-size: .8rem; color: var(--efe-text-3); }
.efe-elecciones { display: grid; gap: .6rem; margin-bottom: 1.1rem; }
.efe-eleccion { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); cursor: pointer; }
.efe-eleccion:has(input:checked) { border-color: var(--efe-ink); box-shadow: inset 0 0 0 1px var(--efe-ink); }
.efe-eleccion input { margin-top: .25rem; accent-color: var(--efe-ink); }
.efe-eleccion > span { display: flex; flex-direction: column; gap: .15rem; }
.efe-eleccion small { color: var(--efe-text-2); font-size: .85rem; }
.efe-check { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1.1rem; cursor: pointer; }
.efe-check input { margin-top: .3rem; accent-color: var(--efe-ink); }
.efe-check--legal { margin: .25rem 0 0; font-size: .88rem; color: var(--efe-text-2); }
.efe-check--legal a { color: var(--efe-ink); }
/* Aceptar y pagar una cotización (/cotizacion/{token}/pagar): opciones y su resumen */
.efe-eleccion--opcion > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.efe-opcion-total { flex: none; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.efe-opcion-marca { margin-left: .4rem; padding: .05rem .45rem; border: 1px solid var(--efe-ink); border-radius: 999px; font-size: .7rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--efe-ink); }
.efe-resumen-opcion { display: grid; gap: .75rem; }
.efe-resumen-opcion[hidden] { display: none; }
.efe-resumen-foto > i { color: var(--efe-text-3); font-size: 1.2rem; }

/* Página del pedido (/pedido/{token}) */
.efe-avance { list-style: none; display: flex; margin: 0 0 1.75rem; padding: 0; overflow-x: auto; }
.efe-avance li { flex: 1 0 auto; padding: .7rem .9rem .7rem 0; font-size: .82rem; color: var(--efe-text-3); border-top: 3px solid var(--efe-rule-light); }
.efe-avance li.hecho { color: var(--efe-ink); border-top-color: var(--efe-ink); }
.efe-avance li.actual { color: var(--efe-ink); font-weight: 600; border-top-color: var(--efe-accent); }
.efe-pago { background: var(--efe-white); border: 1px solid var(--efe-ink); border-radius: var(--efe-radius); padding: 1.25rem 1.3rem; margin-bottom: 1rem; }
.efe-pago-datos { margin: .9rem 0 0; }
.efe-pago-datos > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--efe-paper); align-items: baseline; }
.efe-pago-datos dt { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--efe-text-3); }
.efe-pago-datos dd { margin: 0; font-size: 1rem; word-break: break-word; font-variant-numeric: tabular-nums; }
.efe-pago-monto { font-size: 1.35rem; }
@media (max-width: 520px) { .efe-pago-datos > div { grid-template-columns: 1fr; gap: .2rem; } }
.efe-copiar { margin-left: .5rem; padding: .15rem .55rem; border: 1px solid var(--efe-rule-light); border-radius: 6px; background: var(--efe-white); color: var(--efe-ink); font-size: .78rem; cursor: pointer; vertical-align: middle; }
.efe-copiar:hover { border-color: var(--efe-ink); }
.efe-pago-seguridad { margin: 1rem 0 0; font-size: .85rem; color: var(--efe-text-2); }
.efe-comprobante, .efe-retomar, .efe-pedido-detalle { background: var(--efe-white); border: 1px solid var(--efe-rule-light); border-radius: var(--efe-radius); padding: 1.25rem 1.3rem; margin-bottom: 1rem; }
.efe-comprobante p, .efe-retomar p { margin: .5rem 0 1rem; color: var(--efe-text-2); }
.efe-comprobante-fila { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.efe-comprobante-fila input[type="file"] { flex: 1 1 240px; min-width: 0; padding: .6rem; border: 1px dashed var(--efe-rule-light); border-radius: var(--efe-radius); background: var(--efe-paper); font-size: .9rem; }
.efe-comprobante .efe-comprobante-nota { font-size: .82rem; margin: .75rem 0 0; }
.efe-pedido-detalle .efe-resumen-productos { margin: .9rem 0 1rem; }
.efe-pedido-detalle .efe-resumen-fila + .efe-resumen-fila { margin-top: .5rem; }
.efe-pedido-dato { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.55; word-break: break-word; }