@charset "UTF-8"; /* ========================================================================= Algoritmo Trading — cabecera y pie para Elementor Claro · contraste NEGRO · tecnológico minimalista DOS REGLAS ---------- 1. Todo cuelga de .alge-hd o .alge-ft. Ni una regla suelta: estos widgets conviven con el tema del sitio y con los treinta widgets de Elementor, y una regla sin ámbito acaba pintando algo que no era suyo. 2. Los colores viajan por VARIABLES declaradas en el propio widget. Los controles de estilo de Elementor escriben sobre esas variables, no sobre `color` ni sobre `background` de cada pieza. Así un solo control mueve la marca, el menú y el botón fantasma a la vez, y no pueden desparejarse. ========================================================================= */ .alge-hd, .alge-ft { --alge-bg: #FFFFFF; --alge-surface: #FAFAFA; --alge-border: #E2E2E6; --alge-fg: #0A0A0B; --alge-fg-2: #4B4B55; --alge-fg-3: #65656F; --alge-accent: #0A0A0B; --alge-on-accent: #FFFFFF; --alge-ring: rgba(10, 10, 11, .18); --alge-r: 12px; --alge-r-xs: 8px; box-sizing: border-box; color: var(--alge-fg); font-family: inherit; } /* Elementor deja que el contenedor decida el ancho del widget. Estos cuatro son piezas de página completas y tienen que aprovechar toda la columna disponible. */ .elementor-widget-alge-header, .elementor-widget-alge-footer, .elementor-widget-alge-checkout, .elementor-widget-alge-thankyou { width: 100%; max-width: none; } .alge-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .alge-hd *, .alge-ft * { box-sizing: border-box; } @media (prefers-color-scheme: dark) { .alge-hd, .alge-ft { --alge-bg: #0E0E11; --alge-surface: #141417; --alge-border: #2A2A31; --alge-fg: #F2F2F4; --alge-fg-2: #C4C4CC; --alge-fg-3: #94949F; --alge-accent: #F2F2F4; --alge-on-accent: #0A0A0B; --alge-ring: rgba(242, 242, 244, .22); } } /* ========================================================================= CABECERA ========================================================================= */ .alge-hd { background: var(--alge-bg); width: 100%; } /* position:sticky y no fixed: sticky respeta el flujo, así que no hace falta compensar con un padding en el —y ese padding es exactamente lo que se olvida de quitar cuando alguien apaga el interruptor de fijar—. */ .alge-hd.is-sticky { position: sticky; top: 0; z-index: 100; } .alge-hd-inner { display: flex; align-items: center; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 20px; min-height: 72px; } /* --- Marca ---------------------------------------------------------------- */ .alge-hd-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--alge-fg); text-decoration: none; } .alge-hd-logo { display: block; height: 32px; width: auto; /* max-width impide que un logo panorámico empuje el menú fuera de la fila en una pantalla estrecha. */ max-width: 220px; object-fit: contain; } .alge-hd-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .alge-hd-brand-text strong { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; } .alge-hd-brand-text small { color: var(--alge-fg-3); font-size: .7rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } /* --- Navegación ----------------------------------------------------------- */ .alge-hd-panel { display: flex; align-items: center; gap: 24px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; } .alge-hd-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .alge-hd-menu li { margin: 0; padding: 0; list-style: none; position: relative; } .alge-hd-menu a { display: block; padding: 8px 12px; border-radius: var(--alge-r-xs); color: var(--alge-fg-2); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .18s ease, background .18s ease; } .alge-hd-menu a:hover { color: var(--alge-fg); background: var(--alge-surface); } /* La página actual se marca con color Y con un filete inferior: dos señales, nunca solo el color. */ .alge-hd-menu .current-menu-item > a, .alge-hd-menu .current_page_item > a { color: var(--alge-fg); box-shadow: inset 0 -2px 0 0 var(--alge-accent); } .alge-hd-menu a:focus-visible, .alge-hd-access:focus-visible { outline: 2px solid var(--alge-accent); outline-offset: 2px; } /* Submenú de segundo nivel. Se abre al pasar el ratón Y al enfocar con teclado: con solo :hover, quien navega tabulando no puede abrirlo nunca. */ .alge-hd-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 10; display: none; min-width: 200px; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--alge-bg); border: 1px solid var(--alge-border); border-radius: var(--alge-r); box-shadow: 0 6px 20px rgba(10, 10, 11, .08); } .alge-hd-menu li:hover > .sub-menu, .alge-hd-menu li:focus-within > .sub-menu { display: block; } .alge-hd-menu .sub-menu a { white-space: normal; } /* --- Acciones ------------------------------------------------------------- */ .alge-hd-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .alge-hd-access { color: var(--alge-fg-2); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .alge-hd-access:hover { color: var(--alge-fg); } .alge-hd-cta { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--alge-accent); color: var(--alge-on-accent); border: 1px solid var(--alge-accent); font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: opacity .18s ease; } .alge-hd-cta:hover { opacity: .88; color: var(--alge-on-accent); } /* Sobre una caja de acento un halo pegado no llega al 3:1 que WCAG exige para un indicador de foco. Por eso el contorno se separa. */ .alge-hd-cta:focus-visible { outline: 2px solid var(--alge-accent); outline-offset: 3px; } /* --- Hamburguesa ---------------------------------------------------------- */ .alge-hd-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; /* 44×44 es el objetivo táctil mínimo de las pautas de accesibilidad. Las tres barras miden 18px; el resto es zona de toque, y hace falta. */ width: 44px; height: 44px; margin-left: auto; padding: 0; background: transparent; border: 0; cursor: pointer; } .alge-hd-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--alge-fg); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; } .alge-hd-toggle:focus-visible { outline: 2px solid var(--alge-accent); outline-offset: 2px; border-radius: var(--alge-r-xs); } /* Abierta, las tres barras forman una equis. La señal es la FORMA, no el color: funciona igual en contraste forzado. */ .alge-hd-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .alge-hd-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .alge-hd-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ========================================================================= PIE ========================================================================= */ .alge-ft { background: var(--alge-surface); border-top: 1px solid var(--alge-border); color: var(--alge-fg-2); font-size: .88rem; } .alge-ft-inner { max-width: 1200px; margin: 0 auto; padding: 48px 20px 32px; } .alge-ft-top { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 2.15fr); gap: clamp(40px, 6vw, 88px); padding-bottom: 32px; border-bottom: 1px solid var(--alge-border); } .alge-ft-logo { display: block; height: 30px; width: auto; max-width: 220px; object-fit: contain; } .alge-ft-brand-text { margin: 0; color: var(--alge-fg); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; } .alge-ft-blurb { margin: 12px 0 0; max-width: 42ch; color: var(--alge-fg-3); line-height: 1.6; } /* --- Columnas ------------------------------------------------------------- */ .alge-ft-cols { display: grid; grid-template-columns: repeat(var(--alge-ft-column-count, 3), minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); width: 100%; } .alge-ft-col-title { margin: 0 0 12px; color: var(--alge-fg); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .alge-ft-menu, .alge-ft-social, .alge-ft-legal ul { margin: 0; padding: 0; list-style: none; } .alge-ft-menu li { margin: 0 0 8px; padding: 0; list-style: none; } .alge-ft-menu a, .alge-ft-social a, .alge-ft-legal a { color: var(--alge-fg-3); text-decoration: none; transition: color .18s ease; } .alge-ft-menu a:hover, .alge-ft-social a:hover, .alge-ft-legal a:hover { color: var(--alge-fg); text-decoration: underline; text-underline-offset: 3px; } .alge-ft-menu a:focus-visible, .alge-ft-social a:focus-visible, .alge-ft-legal a:focus-visible { outline: 2px solid var(--alge-accent); outline-offset: 2px; border-radius: 2px; } .alge-ft-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; font-size: .82rem; font-weight: 600; } .alge-ft-social-link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 10px; border: 1px solid var(--alge-border); border-radius: 999px; } .alge-ft-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 18px; color: var(--alge-fg); } .alge-ft-social-icon i, .alge-ft-social-icon svg { display: block; width: 16px; height: 16px; font-size: 16px; fill: currentColor; } /* --- Aviso de riesgo ------------------------------------------------------ */ .alge-ft-risk { margin: 24px 0 0; padding: 16px; background: var(--alge-bg); border: 1px solid var(--alge-border); border-radius: var(--alge-r); color: var(--alge-fg-3); font-size: .75rem; line-height: 1.6; } /* --- Pie del pie ---------------------------------------------------------- */ .alge-ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; } .alge-ft-copy { margin: 0; color: var(--alge-fg-3); font-size: .78rem; } .alge-ft-legal ul { display: flex; flex-wrap: wrap; gap: 16px; font-size: .78rem; } /* ========================================================================= CHECKOUT Y CONFIRMACIÓN DE WOOCOMMERCE ========================================================================= */ .alge-commerce { --alge-commerce-bg: #FFFFFF; --alge-commerce-surface: #FFFFFF; --alge-commerce-muted: #F7F7F8; --alge-commerce-border: #DEDEE3; --alge-commerce-text: #121216; --alge-commerce-text-2: #5E5E68; --alge-commerce-accent: #0A0A0B; --alge-commerce-on-accent: #FFFFFF; --alge-commerce-danger: #B42318; --alge-commerce-radius: 16px; width: min(100%, 1160px); margin: 0 auto; color: var(--alge-commerce-text); font-family: inherit; } .alge-commerce *, .alge-commerce *::before, .alge-commerce *::after { box-sizing: border-box; } .alge-commerce-head { margin-bottom: 34px; } .alge-commerce-eyebrow { margin: 0 0 8px; color: var(--alge-commerce-text-2); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .alge-commerce-title { margin: 0; color: var(--alge-commerce-text); font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 750; line-height: 1.08; letter-spacing: -.04em; } .alge-commerce-steps { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 22px 0 0; padding: 0; color: #8A8A94; font-size: .72rem; font-weight: 650; letter-spacing: .12em; list-style: none; text-transform: uppercase; } .alge-commerce-steps li { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 0; } .alge-commerce-steps li::before { width: 8px; height: 8px; border: 1px solid #CFCFD5; border-radius: 50%; content: ''; } .alge-commerce-steps .is-done::before { border-color: #C8C8CF; background: #C8C8CF; } .alge-commerce-steps .is-current { color: var(--alge-commerce-text); } .alge-commerce-steps .is-current::before { border-color: var(--alge-commerce-accent); background: var(--alge-commerce-accent); } .alge-commerce-placeholder { display: grid; gap: 6px; min-height: 220px; place-content: center; padding: 32px; border: 1px dashed var(--alge-commerce-border); border-radius: var(--alge-commerce-radius); background: var(--alge-commerce-muted); color: var(--alge-commerce-text-2); text-align: center; } /* El plugin principal puede tener activada su propia cabecera de pasos. Dentro del widget ya existe una editable, así que se evita la duplicación. */ .alge-checkout .algt-co-head { display: none; } .alge-checkout form.checkout.alge-checkout-is-arranged { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(320px, .95fr); grid-template-areas: "customer order"; gap: 0 34px; align-items: start; } .alge-checkout #customer_details { grid-area: customer; min-width: 0; } .alge-checkout .alge-checkout-order-column { grid-area: order; align-self: start; min-width: 0; } .alge-checkout .col2-set, .alge-checkout .col2-set .col-1, .alge-checkout .col2-set .col-2 { float: none !important; width: 100% !important; margin: 0; } .alge-checkout .woocommerce-billing-fields > h3, .alge-checkout #order_review_heading, .alge-checkout .woocommerce-additional-fields > h3 { margin: 0 0 20px; padding: 0 0 14px; border-bottom: 1px solid var(--alge-commerce-border); color: var(--alge-commerce-text); font-size: 1.05rem; font-weight: 750; } .alge-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } .alge-checkout .form-row { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .alge-checkout .form-row-wide, .alge-checkout #billing_email_field, .alge-checkout #billing_address_1_field, .alge-checkout #billing_address_2_field { grid-column: 1 / -1; } .alge-checkout .form-row label { display: block; margin: 0 0 7px; color: var(--alge-commerce-text-2); font-size: .8rem; font-weight: 650; } .alge-checkout .form-row input.input-text, .alge-checkout .form-row textarea, .alge-checkout .form-row select, .alge-checkout .select2-container .select2-selection--single { width: 100%; min-height: 48px; margin: 0; padding: 11px 13px; border: 1px solid var(--alge-commerce-border); border-radius: 8px; outline: 0; background: var(--alge-commerce-surface); color: var(--alge-commerce-text); font: inherit; box-shadow: none; } .alge-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--alge-commerce-text); line-height: 24px; } .alge-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 11px; right: 8px; } .alge-checkout .form-row input:focus, .alge-checkout .form-row textarea:focus, .alge-checkout .form-row select:focus, .alge-checkout .select2-container--focus .select2-selection--single { border-color: var(--alge-commerce-accent); box-shadow: 0 0 0 3px rgba(10, 10, 11, .1); } .alge-checkout .form-row .description { display: block; margin-top: 6px; color: #7B7B85; font-size: .75rem; line-height: 1.45; } .alge-checkout #order_review { padding: 22px; border: 1px solid var(--alge-commerce-border); border-radius: var(--alge-commerce-radius); background: var(--alge-commerce-surface); box-shadow: 0 10px 34px rgba(18, 18, 22, .05); } .alge-checkout #order_review .shop_table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent; } .alge-checkout #order_review .shop_table th, .alge-checkout #order_review .shop_table td { padding: 13px 0; border-width: 0 0 1px; border-color: var(--alge-commerce-border); color: var(--alge-commerce-text-2); font-size: .84rem; text-align: left; } .alge-checkout #order_review .shop_table th:last-child, .alge-checkout #order_review .shop_table td:last-child { text-align: right; } .alge-checkout #order_review .shop_table tr, .alge-checkout #order_review .shop_table th, .alge-checkout #order_review .shop_table td { background: transparent; } .alge-checkout #order_review .product-name { color: var(--alge-commerce-text); font-weight: 650; } .alge-checkout #order_review .order-total th, .alge-checkout #order_review .order-total td { padding-top: 18px; border-bottom: 0; color: var(--alge-commerce-text); font-size: 1.05rem; font-weight: 750; } .alge-checkout #payment { margin-top: 16px; border-radius: 12px; background: var(--alge-commerce-muted); } .alge-checkout #payment ul.payment_methods, .alge-checkout #payment .place-order { margin: 0; padding: 16px; border-color: var(--alge-commerce-border); } .alge-checkout #payment .woocommerce-notice--info, .alge-checkout #payment .woocommerce-info { margin: 0 !important; padding: 14px !important; border: 1px solid var(--alge-commerce-border) !important; border-radius: 8px; background: var(--alge-commerce-surface); color: var(--alge-commerce-text-2); font-size: .82rem; line-height: 1.55; } .alge-checkout #payment .woocommerce-notice--info::before, .alge-checkout #payment .woocommerce-info::before { display: none; } .alge-checkout #payment .woocommerce-privacy-policy-text { color: var(--alge-commerce-text-2); font-size: .78rem; line-height: 1.55; } .alge-checkout #place_order { width: 100%; min-height: 50px; margin: 14px 0 0; padding: 12px 18px; border: 1px solid var(--alge-commerce-accent); border-radius: 8px; background: var(--alge-commerce-accent); color: var(--alge-commerce-on-accent); font-size: .9rem; font-weight: 750; } .alge-checkout #place_order:hover { opacity: .88; } .alge-checkout .woocommerce-error, .alge-checkout .woocommerce-info, .alge-checkout .woocommerce-message { margin: 0 0 24px; border-top-color: var(--alge-commerce-accent); border-radius: 8px; } /* Confirmación */ .alge-thankyou { max-width: 940px; --alge-thankyou-state: var(--alge-commerce-accent); --alge-thankyou-state-soft: var(--alge-commerce-muted); } .alge-thankyou.is-pending { --alge-thankyou-state: #9A6700; --alge-thankyou-state-soft: #FFF8C5; } .alge-thankyou.is-failed { --alge-thankyou-state: #B42318; --alge-thankyou-state-soft: #FEF3F2; } .alge-thankyou.is-refunded { --alge-thankyou-state: #175CD3; --alge-thankyou-state-soft: #EFF8FF; } .alge-thankyou.is-unknown { --alge-thankyou-state: #667085; --alge-thankyou-state-soft: #F2F4F7; } .alge-thankyou-head { display: flex; flex-direction: column; align-items: center; text-align: center; } .alge-thankyou-check { display: grid; width: 58px; height: 58px; margin-bottom: 18px; place-items: center; border-radius: 50%; background: var(--alge-thankyou-state); color: var(--alge-commerce-on-accent); box-shadow: 0 0 0 8px var(--alge-thankyou-state-soft); } .alge-thankyou .alge-commerce-eyebrow { color: var(--alge-thankyou-state); } .alge-thankyou-intro { max-width: 620px; margin: 16px auto 0; color: var(--alge-commerce-text-2); line-height: 1.65; } .alge-thankyou .woocommerce-thankyou-order-received { display: none; } .alge-thankyou .woocommerce-order-overview, .alge-thankyou-preview dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 28px; padding: 0; overflow: hidden; border: 1px solid var(--alge-commerce-border); border-radius: var(--alge-commerce-radius); background: var(--alge-commerce-surface); list-style: none; } .alge-thankyou .woocommerce-order-overview li, .alge-thankyou-preview dl > div { min-width: 0; margin: 0 !important; padding: 18px; border: 0 !important; border-right: 1px solid var(--alge-commerce-border) !important; color: var(--alge-commerce-text-2); font-size: .72rem; text-transform: uppercase; } .alge-thankyou .woocommerce-order-overview li:last-child, .alge-thankyou-preview dl > div:last-child { border-right: 0 !important; } .alge-thankyou .woocommerce-order-overview strong, .alge-thankyou-preview dd { display: block; margin: 7px 0 0; overflow-wrap: anywhere; color: var(--alge-commerce-text); font-size: .88rem; font-weight: 750; text-transform: none; } .alge-thankyou .woocommerce-order-details, .alge-thankyou .woocommerce-customer-details, .alge-thankyou-preview { margin: 0 0 24px; padding: 24px; border: 1px solid var(--alge-commerce-border); border-radius: var(--alge-commerce-radius); background: var(--alge-commerce-surface); } .alge-thankyou .woocommerce-order-details__title, .alge-thankyou .woocommerce-column__title { margin: 0 0 18px; color: var(--alge-commerce-text); font-size: 1.05rem; } .alge-thankyou table.shop_table { width: 100%; margin: 0; border: 0; border-collapse: collapse; } .alge-thankyou table.shop_table th, .alge-thankyou table.shop_table td { padding: 12px 0; border-width: 0 0 1px; border-color: var(--alge-commerce-border); } .alge-thankyou-preview p { margin: 0; color: var(--alge-commerce-text-2); text-align: center; } .alge-thankyou-preview-notice { display: grid; gap: 6px; padding: 16px; border: 1px solid #FECACA; border-radius: 10px; background: var(--alge-thankyou-state-soft); color: #7A271A; line-height: 1.5; } .alge-thankyou-preview-notice span { color: var(--alge-commerce-text-2); font-size: .86rem; } .alge-thankyou-preview-actions, .alge-thankyou .woocommerce-thankyou-order-failed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; } .alge-thankyou-preview-actions .button, .alge-thankyou .woocommerce-thankyou-order-failed-actions .button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; margin: 0; padding: 10px 18px; border: 1px solid var(--alge-thankyou-state); border-radius: 8px; background: var(--alge-thankyou-state); color: #FFFFFF; font-size: .84rem; font-weight: 750; line-height: 1; text-decoration: none; } .alge-thankyou-preview-actions .button.is-secondary, .alge-thankyou .woocommerce-thankyou-order-failed-actions .button + .button { background: transparent; color: var(--alge-thankyou-state); } .alge-thankyou .woocommerce-thankyou-order-failed { margin: 0 0 18px; padding: 18px; border: 1px solid #FECACA; border-radius: 10px; background: var(--alge-thankyou-state-soft); color: #7A271A; line-height: 1.6; text-align: center; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1024px) { .alge-ft-top { grid-template-columns: minmax(0, 1fr); gap: 32px; } .alge-ft-cols { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .alge-checkout form.checkout.alge-checkout-is-arranged { grid-template-columns: minmax(0, 1fr); grid-template-areas: "customer" "order"; gap: 28px; } } /* ── ≤900px: el menú pasa a cajón ────────────────────────────────────── El punto de corte es el ancho, no el tipo de dispositivo: una tableta en horizontal tiene sitio de sobra para el menú en fila y no hay motivo para esconderlo ahí. ------------------------------------------------------------------------- */ @media (max-width: 900px) { .alge-hd-toggle { display: flex; } /* El cajón se despliega DEBAJO de la fila de la cabecera y empuja la página, en vez de flotar encima. Flotando taparía el contenido y obligaría a gestionar el foco atrapado y el cierre con Escape; empujando, la página sigue siendo la de siempre con una lista más. */ .alge-hd-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 99; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 20px 20px; background: var(--alge-bg); border-bottom: 1px solid var(--alge-border); box-shadow: 0 8px 20px rgba(10, 10, 11, .08); } .alge-hd-panel.is-open { display: flex; } .alge-hd-inner { position: relative; flex-wrap: wrap; } .alge-hd-menu { flex-direction: column; align-items: stretch; gap: 0; } .alge-hd-menu a { padding: 12px; border-radius: 0; border-bottom: 1px solid var(--alge-border); white-space: normal; } /* En el cajón el submenú ya no flota: se anida con una sangría, porque un desplegable dentro de un desplegable en un teléfono no se acierta. */ .alge-hd-menu .sub-menu { display: block; position: static; min-width: 0; margin: 0; padding: 0 0 0 16px; border: 0; box-shadow: none; } .alge-hd-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; } .alge-hd-access, .alge-hd-cta { text-align: center; padding: 12px 18px; } .alge-commerce-steps { gap: 10px 16px; } .alge-thankyou .woocommerce-order-overview, .alge-thankyou-preview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alge-thankyou .woocommerce-order-overview li:nth-child(2), .alge-thankyou-preview dl > div:nth-child(2) { border-right: 0 !important; } .alge-thankyou .woocommerce-order-overview li:nth-child(-n+2), .alge-thankyou-preview dl > div:nth-child(-n+2) { border-bottom: 1px solid var(--alge-commerce-border) !important; } } @media (max-width: 560px) { .alge-hd-inner { min-height: 60px; padding: 0 16px; } .alge-ft-inner { padding: 32px 16px 24px; } .alge-ft-bottom { flex-direction: column; align-items: flex-start; } .alge-ft-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; } .alge-commerce-head { margin-bottom: 26px; } .alge-commerce-steps { display: grid; gap: 8px; } .alge-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); } .alge-checkout .form-row { grid-column: 1; } .alge-checkout #order_review, .alge-thankyou .woocommerce-order-details, .alge-thankyou .woocommerce-customer-details, .alge-thankyou-preview { padding: 18px; } .alge-thankyou .woocommerce-order-overview, .alge-thankyou-preview dl { grid-template-columns: minmax(0, 1fr); } .alge-thankyou .woocommerce-order-overview li, .alge-thankyou-preview dl > div { border-right: 0 !important; border-bottom: 1px solid var(--alge-commerce-border) !important; } .alge-thankyou .woocommerce-order-overview li:last-child, .alge-thankyou-preview dl > div:last-child { border-bottom: 0 !important; } } @media (prefers-reduced-motion: reduce) { .alge-hd-menu a, .alge-hd-cta, .alge-hd-toggle span, .alge-ft-menu a, .alge-ft-social a, .alge-ft-legal a { transition: none; } } /* ========================================================================= CONTRASTE FORZADO ------------------------------------------------------------------------- El sistema impone sus colores y el filete de la página actual desaparece. El subrayado la marca con una propiedad que el modo sí respeta. ========================================================================= */ @media (forced-colors: active) { .alge-hd-menu .current-menu-item > a, .alge-hd-menu .current_page_item > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .alge-hd-cta { border-width: 2px; } }