/* =================================================================== site-chrome.css — vasitos.es Cabecera, pie de página, menú móvil y selector de idioma. Se carga en TODAS las páginas del sitio (enqueue en functions). =================================================================== */ :root{ --ink:#1A1A1A; --paper:#F5F5F4; --surface:#FFFFFF; --line:#E6E6E4; --line-strong:#D4D4D1; --muted:#7A7A76; --orange:#F46036; --orange-wash:#FDEDE6; --step-bg:#F0F0EE; --shadow:0 1px 2px rgba(20,20,20,.04), 0 6px 20px rgba(20,20,20,.05); } /* Defensa (24/08/2026): algo pinta de negro un contenedor por debajo del (probablemente #primary, #content, #main o .content-area de Storefront) en TODO el sitio, no solo en el body. Forzamos fondo claro en todos los envoltorios típicos hasta localizar la causa exacta con el inspector. Quitar en cuanto se encuentre la regla real. */ html, body, #page, #content, #primary, #main, .content-area, .site-main, div.product, div.product.type-product{ background-color: var(--surface) !important; } /* ===== CABECERA ===== */ .vasitos-header{ background:var(--surface); border-bottom:1px solid var(--line); position:relative; z-index:110; } .vasitos-header-inner{ max-width:1160px; margin:0 auto; padding:16px 40px; display:flex; justify-content:space-between; align-items:center; gap:20px; } .vasitos-logo{ height:20px; width:auto; color:var(--ink); flex-shrink:0; display:block; } .vasitos-logo svg{ height:100%; width:auto; display:block; } .vasitos-top-nav{ display:flex; gap:28px; font-size:12.5px; color:var(--muted); list-style:none; margin:0; padding:0; } .vasitos-top-nav li{ margin:0; } .vasitos-top-nav a{ color:var(--muted); text-decoration:none; padding:4px 0; } .vasitos-top-nav a:hover, .vasitos-top-nav .current-menu-item a{ color:var(--ink); font-weight:600; } .vasitos-header-right{ display:flex; align-items:center; gap:14px; } /* Selector de idioma */ .vasitos-lang-switch{ position:relative; } .vasitos-lang-btn{ display:flex; align-items:center; gap:6px; height:34px; padding:0 10px; border-radius:8px; background:var(--paper); border:1px solid var(--line-strong); cursor:pointer; font-size:11.5px; font-weight:600; color:var(--ink); font-family:inherit; } .vasitos-lang-btn:hover{ background:var(--line); } .vasitos-lang-btn .chevron{ width:10px; height:10px; stroke:var(--muted); transition:transform .15s ease; } .vasitos-lang-switch.open .vasitos-lang-btn .chevron{ transform:rotate(180deg); } .vasitos-lang-dropdown{ position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:10px; box-shadow:0 16px 32px rgba(0,0,0,.15); border:1px solid var(--line); padding:8px; width:180px; display:none; z-index:30; } .vasitos-lang-switch.open .vasitos-lang-dropdown{ display:block; } .vasitos-lang-group-label{ font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 10px 4px; } .vasitos-lang-option{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:6px; font-size:12px; color:var(--ink); text-decoration:none; } .vasitos-lang-option:hover{ background:var(--paper); } .vasitos-lang-option.active{ background:var(--orange-wash); color:#8a3d20; font-weight:600; } /* Carrito */ .vasitos-cart-btn{ position:relative; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .vasitos-cart-btn:hover{ background:var(--paper); } .vasitos-cart-btn svg{ width:18px; height:18px; stroke:var(--ink); } .vasitos-cart-badge{ position:absolute; top:0; right:0; background:var(--orange); color:#fff; font-size:8.5px; font-weight:700; min-width:15px; height:15px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; } /* Hamburguesa */ .vasitos-hamburger{ display:none; width:34px; height:34px; border-radius:8px; background:none; border:none; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } @media (max-width:900px){ .vasitos-header-inner{ padding:14px 20px; } .vasitos-top-nav{ display:none; } .vasitos-lang-switch{ display:none; } .vasitos-hamburger{ display:flex; } } /* ===== MENÚ MÓVIL A PANTALLA COMPLETA ===== */ .vasitos-mobile-menu{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:#fff; z-index:90; flex-direction:column; overflow-y:auto; padding-top:64px; /* altura aprox. de la cabecera fija, para que el contenido no empiece tapado debajo de ella */ } .vasitos-mobile-menu.open{ display:flex; } .vasitos-logo-dark{ height:20px; } .vasitos-mobile-menu-body{ padding:8px 0; } .vasitos-mobile-menu-body a{ display:block; padding:16px 20px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; font-size:17px; color:var(--ink); border-bottom:1px solid var(--line); text-decoration:none; } .vasitos-mobile-lang-section{ padding:0 0 24px; background:var(--surface); } .vasitos-mobile-lang-section h4{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; font-size:17px; color:var(--ink); padding:16px 20px; margin:0 0 14px; border-bottom:1px solid var(--line); } .vasitos-mobile-lang-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-left:20px; margin-right:20px; } .vasitos-mobile-lang-group-2{ margin-top:28px; } .vasitos-mobile-lang-item{ padding:10px 12px; border-radius:8px; background:var(--paper); font-size:12px; color:var(--ink); text-decoration:none; display:block; } .vasitos-mobile-lang-item.active{ background:var(--orange-wash); color:#8a3d20; font-weight:600; } /* ===== FOOTER ===== */ .vasitos-site-footer{ background:var(--ink); color:#fff; } .vasitos-footer-top{ max-width:1160px; margin:0 auto; padding:56px 40px 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr; gap:32px; } .vasitos-footer-brand .vasitos-logo{ height:20px; color:#fff !important; margin-bottom:16px; } .vasitos-footer-brand p{ font-size:12px; color:rgba(255,255,255,.55); line-height:1.7; margin-bottom:20px; max-width:220px; } .vasitos-footer-socials{ display:flex; gap:10px; } .vasitos-footer-socials a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; } .vasitos-footer-socials a:hover{ background:rgba(255,255,255,.08); border-color:var(--orange); } .vasitos-footer-socials svg{ width:15px; height:15px; stroke:#fff; fill:none; } .vasitos-footer-socials .wa svg{ fill:#fff; stroke:none; } .vasitos-footer-col h4{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:12.5px; letter-spacing:.06em; color:rgba(255,255,255,.4); margin-bottom:16px; } .vasitos-footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:0; padding:0; } .vasitos-footer-col a{ font-size:12.5px; color:rgba(255,255,255,.8); text-decoration:none; } .vasitos-footer-col a:hover{ color:var(--orange); } .vasitos-footer-newsletter h4{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:12.5px; letter-spacing:.06em; color:rgba(255,255,255,.4); margin-bottom:12px; } .vasitos-footer-newsletter p{ font-size:11.5px; color:rgba(255,255,255,.55); line-height:1.6; margin-bottom:14px; } .vasitos-newsletter-form{ display:flex; gap:6px; margin-bottom:10px; } .vasitos-newsletter-form input{ flex:1; min-width:0; height:38px; border-radius:6px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; padding:0 12px; font-size:11.5px; } .vasitos-newsletter-form input::placeholder{ color:rgba(255,255,255,.4); } .vasitos-newsletter-form button{ background:var(--orange); color:#fff; border:none; border-radius:6px; padding:0 16px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; font-size:11px; cursor:pointer; white-space:nowrap; } .vasitos-newsletter-form button:hover{ background:#DB4E27; } .vasitos-newsletter-legal{ font-size:9.5px; color:rgba(255,255,255,.35); line-height:1.5; } .vasitos-newsletter-legal a{ color:rgba(255,255,255,.5); } .vasitos-footer-trust{ border-top:1px solid rgba(255,255,255,.1); } .vasitos-footer-trust-inner{ max-width:1160px; margin:0 auto; padding:24px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; } .vasitos-footer-trust-group{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .vasitos-footer-trust-label{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.35); margin-right:4px; } .vasitos-footer-trust-group img{ height:14px; width:auto; opacity:.7; filter:brightness(0) invert(1); } .vasitos-pay-chip{ font-size:8.5px; font-family:'IBM Plex Mono',monospace; font-weight:600; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.2); border-radius:4px; padding:4px 8px; } .vasitos-footer-bottom{ border-top:1px solid rgba(255,255,255,.1); } .vasitos-footer-bottom-inner{ max-width:1160px; margin:0 auto; padding:18px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; } .vasitos-footer-bottom p{ font-size:10.5px; color:rgba(255,255,255,.4); margin:0; } .vasitos-quintilla-link{ display:flex; align-items:center; gap:8px; font-size:10.5px; color:rgba(255,255,255,.55); text-decoration:none; } .vasitos-quintilla-link:hover{ color:rgba(255,255,255,.85); } .vasitos-quintilla-link b{ color:#fff; } .vasitos-qlogo{ height:13px; width:auto; } .vasitos-qlogo svg{ height:100%; width:auto; display:block; } @media (max-width:860px){ .vasitos-footer-top{ grid-template-columns:1fr 1fr; padding:44px 20px 30px; gap:30px 20px; } .vasitos-footer-brand, .vasitos-footer-newsletter{ grid-column:1/-1; } .vasitos-footer-trust-inner, .vasitos-footer-bottom-inner{ padding-left:20px; padding-right:20px; flex-direction:column; align-items:flex-start; } } /* =================================================================== Migas de pan y título de página — compartido por varias páginas normales (Contacto, FAQ, y cualquier página nueva que se añada siguiendo el mismo patrón), para no tener que repetirlo en cada CSS. =================================================================== */ .vpg-breadcrumb{ max-width:1160px; margin:0 auto; padding:18px 40px 0; font-size:11.5px; color:var(--muted); font-family:'IBM Plex Sans',sans-serif; } .vpg-breadcrumb a{ color:var(--muted); text-decoration:none; } .vpg-breadcrumb a:hover{ color:var(--orange); } .vpg-breadcrumb .sep{ margin:0 6px; opacity:.6; } .vpg-breadcrumb .current{ color:var(--ink); } .vpg-page-title{ max-width:1160px; margin:0 auto; padding:18px 40px 0; } .vpg-page-title h1{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:800; font-size:30px; margin:0; } .vpg-page-title p{ font-size:12.5px; color:var(--muted); margin-top:4px; font-family:'IBM Plex Sans',sans-serif; } @media (max-width:860px){ .vpg-breadcrumb, .vpg-page-title{ padding-left:20px; padding-right:20px; } } /* =================================================================== Evitar el zoom automático de Safari (iPhone) al tocar un campo de formulario — pasa cuando la letra del campo es menor de 16px, así que forzamos ese tamaño mínimo en TODOS los campos de la web (del carrito, checkout, contacto, configurador...), sin tener que repetirlo en cada CSS por separado. =================================================================== */ @media (max-width:860px){ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], textarea, select{ font-size:16px !important; } }