/* ---- fonts.css ---- */ /* Fraunces y Figtree, alojadas aquí (SIL Open Font License 1.1). Servidas desde este servidor: ninguna IP de visitante llega a Google. Solo latin y latin-ext; son fuentes variables, un archivo por estilo. */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/figtree-latin-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/figtree-latin-ext-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('../fonts/fraunces-latin-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('../fonts/fraunces-latin-ext-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('../fonts/fraunces-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('../fonts/fraunces-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- tokens.css ---- */ /* ========================================================================== DAFA — tokens v2 (docs/LENGUAJE-DISENO.html) Moderno, tecnológico, elegante. Change a value here, not in components. ========================================================================== */ :root { color-scheme: light; interpolate-size: allow-keywords; /* lets height animate to auto */ --page: #F5F6F4; --surface: #FFFFFF; --mist: #ECEFEB; --ink: #121614; --ink-2: #4B534E; --ink-3: #656C67; /* 4,97:1 sobre porcelana, 5,39 sobre blanco, 4,65 sobre mist */ --hair: #E2E5E1; --hair-2: #CDD2CD; --chrome: #FFFFFF; /* la barra, sus desplegables y el cajón: una sola chapa */ --chrome-hair: #DDE2DC; --emerald: #247D54; /* marca profunda: botones, escenario */ --forest: #2A7D54; /* enlaces y texto pequeño: 4,66:1, al límite de AA */ --forest-lg: #3E9E70; /* solo titulares y cifras grandes: 3,06:1, donde el mínimo es 3 */ --lime: #9BCD63; /* luz de verificado: puntos y trazos finos, nunca texto */ --lime-soft: #CFE7B5; --titanium: #9EA5A0; --amber: #8F5E17; /* 5,12:1 sobre porcelana y 4,50 sobre la píldora de pedido */ --danger: #A23B2A; --btn-bg: #247D54; --btn-ink: #F5F6F4; --stage-1: #247052; /* 5,28:1 con --stage-ink */ --stage-2: #144631; --stage-ink: #EEF2EE; --stage-ink-2: #D6E5DB; /* 4,58:1 sobre el escenario nuevo: sigue cumpliendo AA */ --stage-hair: rgba(238, 242, 238, .12); --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; --sans: 'Figtree', 'Helvetica Neue', Arial, sans-serif; --mono: var(--sans); /* no monospace: data uses the text face with tabular figures */ --r: 12px; --r-l: 20px; --r-xl: 28px; /* Motion. Curves first: the browser defaults are too weak to read as intent. Entrances and exits use --ease-out; things that move on screen, --ease-in-out; the drawer keeps the iOS curve. --ease stays as the alias used everywhere. */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); --ease: var(--ease-out); /* Durations. UI stays under 300ms; only the drawer and the hero go beyond. */ --t-press: 110ms; /* press feedback */ --t-fast: 160ms; /* hover, colour, chips */ --t-ui: 200ms; /* menus, popovers, option cards */ --t-panel: 260ms; /* mega menu, accordions, gallery */ --t-drawer: 420ms; /* full-height drawer */ --t-reveal: 520ms; /* scroll entrance */ --wrap: 1240px; --gutter: clamp(20px, 5vw, 56px); --header-h: 78px; --topbar-h: 34px; } /* ---- base.css ---- */ /* Base: reset, type, links, buttons. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-variant-numeric: tabular-nums; background: var(--page); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } h1, h2 { font-family: var(--serif); font-weight: 300; letter-spacing: -.015em; line-height: 1.05; text-wrap: balance; font-optical-sizing: auto; } h3, h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -.015em; line-height: 1.25; } em { font-style: italic; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } button, input, select, textarea { font: inherit; color: inherit; } button { text-shadow: none; box-shadow: none; } button, [role="button"], summary, label, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } select { background-color: var(--surface); color: var(--ink); } /* Windows dark mode renders unset selects black-on-black */ :focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 4px; } .stage :focus-visible, .on-stage :focus-visible, .site-footer :focus-visible { outline-color: var(--lime); } ::selection { background: var(--lime-soft); color: var(--emerald); } .screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed !important; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 1000; background: var(--ink); color: var(--page); padding: 10px 16px; border-radius: 999px; } .mono { font-family: var(--mono); } .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; } .lead { font-size: clamp(17px, 1.4vw, 19px); font-weight: 300; color: var(--ink-2); max-width: 58ch; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap; border-radius: 999px; padding: 15px 24px; border: 1px solid transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform var(--t-press) var(--ease); } .btn:active { transform: scale(.985); } .btn .arr { transition: transform var(--t-fast) var(--ease); } @media (hover: hover) and (pointer: fine) { .btn:hover .arr { transform: translateX(3px); } } .btn-main { background: var(--btn-bg); color: var(--btn-ink); } .btn-main:hover { background: var(--forest); } .btn-porcelain { background: var(--stage-ink); color: var(--emerald); } .btn-porcelain:hover { background: #fff; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); } .btn-ghost:hover { border-color: var(--ink); } .btn[disabled], .btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } .btn-block { width: 100%; } .link { font: 400 15px var(--sans); text-decoration: none; color: inherit; border-bottom: 1px solid var(--hair-2); padding-bottom: 3px; transition: border-color var(--t-fast) var(--ease); } .link:hover { border-bottom-color: currentColor; } .on-stage .link { border-bottom-color: var(--stage-hair); } .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; } .dot-glow { box-shadow: 0 0 0 4px rgba(155, 205, 99, .14), 0 0 14px rgba(155, 205, 99, .6); } .dot-off { background: var(--hair-2); } /* Motion: reveal on scroll, only when the script is running. */ .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } /* Reduced motion means gentler, not dead: colour and opacity still explain what changed, movement and looping decoration stop. */ @media (prefers-reduced-motion: reduce) { :root { --t-press: 0ms; --t-fast: 120ms; --t-ui: 120ms; --t-panel: 140ms; --t-drawer: 0ms; --t-reveal: 200ms; } *, *::before, *::after { animation: none !important; } .js .reveal { opacity: 1; transform: none; transition: none; } .btn:active, .card:hover .shot img, .card:hover .shot svg, .brand-tile:hover, .brand-tile:hover .bt-img img, .rail a:hover, .mega-card:hover, .policy-card:hover, .hv-product, .hv-glow { transform: none !important; } .drawer-panel { transition: none; } } /* Preview-only «stock simulado» banner */ .demo-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 200; padding: 9px 16px; border-radius: 999px; background: #A86F1D; color: #fff; font: 500 12px var(--sans); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); white-space: nowrap; } .demo-banner a { color: #fff; } @media (max-width: 600px) { .demo-banner { white-space: normal; width: calc(100% - 32px); text-align: center; bottom: 80px; } } /* Accordions: height is the one layout property with no transform equivalent, so it is animated here on purpose. Browsers without ::details-content just open instantly, which is the correct fallback. */ @supports selector(::details-content) { .faq-item::details-content, .model-details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-panel) var(--ease), content-visibility var(--t-panel) allow-discrete; } .faq-item[open]::details-content, .model-details[open]::details-content { block-size: auto; } } /* Reduced transparency: the translucent layers become solid instead of frosted. */ @media (prefers-reduced-transparency: reduce) { .dafa-mega, .nav-list .sub-menu, .dafa-livesearch__panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--chrome); } .drawer-scrim { background: rgba(6, 17, 12, .75); } .gallery-nav { background: #fff; } } /* More contrast: hairlines become visible edges and the focus ring thickens. */ @media (prefers-contrast: more) { :root { --hair: #B9C0B9; --hair-2: #8E968E; --ink-2: #333A35; --ink-3: #4B534E; --chrome-hair: #9AA39B; } :focus-visible { outline-width: 3px; } .btn-ghost { border-color: var(--ink); } } /* ---- layout.css ---- */ /* Layout: wrap, header + mega menu, mobile drawer, stage, sections, footer. */ .wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); } .site-main { min-height: 60vh; } /* ---------- stage (dark emerald hero) ---------- */ .stage { position: relative; overflow: hidden; color: var(--stage-ink); background: radial-gradient(1100px 520px at 72% 38%, rgba(155, 205, 99, .07), transparent 62%), radial-gradient(700px 400px at 10% 110%, rgba(31, 94, 62, .35), transparent 70%), linear-gradient(180deg, var(--stage-1), var(--stage-2)); border-radius: 0 0 var(--r-xl) var(--r-xl); } .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: linear-gradient(var(--stage-hair) 1px, transparent 1px), linear-gradient(90deg, var(--stage-hair) 1px, transparent 1px); background-size: 96px 96px; -webkit-mask-image: radial-gradient(70% 60% at 70% 45%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 70% 45%, #000, transparent 75%); } .stage > .wrap { position: relative; z-index: 1; } .stage-in { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; padding: calc(var(--header-h) + var(--topbar-h) + clamp(40px, 7vw, 96px)) 0 clamp(40px, 6vw, 72px); } @media (min-width: 960px) { .stage-in { grid-template-columns: 1fr 1.02fr; } } .stage h1 { font-size: clamp(40px, 5.8vw, 78px); line-height: 1.02; margin: 22px 0 24px; } .stage h1 em { color: var(--lime-soft); } .stage .sub { color: var(--stage-ink-2); font-size: 18px; font-weight: 300; max-width: 44ch; } .status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--stage-ink-2); } .actions { display: flex; align-items: center; gap: 26px; margin-top: 36px; flex-wrap: wrap; } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--stage-hair); } .facts > div { padding: 22px 0 26px; } .facts > div + div { padding-left: 24px; border-left: 1px solid var(--stage-hair); } @media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:nth-child(odd) { padding-left: 0; border-left: 0; } .facts > div:nth-child(n+3) { border-top: 1px solid var(--stage-hair); } } .facts b { display: block; font-family: var(--serif); font-weight: 300; font-size: 30px; line-height: 1; } .facts span { font-size: 13px; color: var(--stage-ink-2); } /* Small stage for shop, category and pages */ .stage-sm .stage-in { grid-template-columns: 1fr; padding-bottom: clamp(36px, 5vw, 56px); gap: 0; } .stage-sm h1 { font-size: clamp(34px, 4.6vw, 58px); margin: 16px 0 14px; } .stage-sm .crumbs { color: var(--stage-ink-2); } /* ---------- sections ---------- */ .sec { padding-block: clamp(64px, 9vw, 120px); } .sec + .sec { border-top: 1px solid var(--hair); } .sec-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); } @media (min-width: 900px) { .sec-head { grid-template-columns: 240px 1fr; gap: 40px; } } .sec-head .lead { margin-top: 16px; } .sec h2 { font-size: clamp(30px, 3.9vw, 50px); } .sec h2 em { color: var(--forest-lg); } .sec-foot { margin-top: clamp(32px, 4vw, 48px); display: flex; justify-content: center; } /* ---------- breadcrumbs ---------- */ .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); } .crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .5; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--forest); } .stage .crumbs a:hover { color: var(--stage-ink); } /* ---------- page content ---------- */ .page-body { padding-block: clamp(48px, 7vw, 96px); } .prose { max-width: 72ch; font-weight: 300; color: var(--ink-2); font-size: 17px; } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: clamp(24px, 2.6vw, 32px); color: var(--ink); margin-top: 1.6em; } .prose h3 { font-size: 19px; color: var(--ink); margin-top: 1.6em; } .prose strong, .prose b { font-weight: 500; color: var(--ink); } .prose a { color: var(--forest); } .prose ul, .prose ol { padding-left: 1.2em; } .prose table { width: 100%; border-collapse: collapse; font-size: 15px; } .prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); } /* Elementor-built content keeps its own layout until migrated. */ .page-body.is-elementor { padding-block: 0; } /* ---------- footer ---------- */ .site-footer { margin-top: clamp(48px, 7vw, 96px); background: linear-gradient(180deg, var(--stage-1), var(--stage-2)); color: var(--stage-ink-2); border-radius: var(--r-xl) var(--r-xl) 0 0; } .site-footer .brand img { height: 42px; } /* header.css loads after this file, so its `.brand .logo-light { display:none }` would win here without the extra class. */ .site-footer .brand .logo-dark { display: none; } .site-footer .brand .logo-light { display: block; } .sec.sec-tight { padding-block: clamp(24px, 4vw, 48px); } .site-footer h4, .footer-col > summary h2 { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--stage-ink-2); opacity: .75; margin-bottom: 14px; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .site-footer a { color: var(--stage-ink); text-decoration: none; font-size: 14.5px; opacity: .88; } /* A finger needs more than the height of the word it is aiming at. */ .site-footer li a, .footer-contact a { display: inline-flex; align-items: center; min-height: 24px; } @media (pointer: coarse) { .site-footer ul { gap: 2px; } .site-footer li a, .footer-contact a { min-height: 44px; } } .site-footer a:hover { opacity: 1; text-decoration: underline; } .footer-bottom { border-top: 1px solid var(--stage-hair); padding-block: 22px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; } .footer-bottom a { font-size: 12px; } /* ---------- pie ---------- Cuatro columnas y una marca. El contenido lo pone dafa_footer(), editable desde Dafa Studio; aquí solo vive la forma. */ .footer-grid { display: grid; gap: clamp(22px, 4vw, 48px); padding-block: clamp(36px, 6vw, 72px) clamp(24px, 3vw, 40px); } /* Móvil: una sola columna a ancho completo. En dos, abrir «Tienda» dejaba un hueco vacío de 150px a su derecha y las demás secciones colgando: el pie parecía descuadrado, no plegado. A partir de 640px ya caben de dos en dos. */ .footer-grid { grid-template-columns: minmax(0, 1fr); } /* En una columna las secciones ya se separan con su propia línea: el hueco de la rejilla encima sumaba 30px de aire por sección y estiraba el pie. */ @media (max-width: 639px) { .footer-grid { row-gap: 0; } /* La marca se presenta centrada y a todo el ancho; de ahí abajo, lo que se lee y se pulsa sigue alineado a la izquierda, porque una lista de enlaces centrada obliga al ojo a buscar el principio de cada línea. */ .footer-brand { margin-bottom: 30px; justify-items: center; text-align: center; gap: 20px; } .footer-brand .brand { justify-self: center; } .site-footer .brand img { height: 52px; } .footer-claim { max-width: none; font-size: clamp(26px, 8vw, 34px); } .footer-brand .footer-wa { justify-self: center; } .footer-social { justify-content: center; } } .footer-brand { grid-column: 1 / -1; } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } .footer-brand { grid-column: auto; } } .footer-brand { display: grid; gap: 18px; align-content: start; } .footer-claim { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; color: var(--stage-ink); max-width: 16ch; font-weight: 300; } .footer-claim em { color: var(--lime-soft); font-style: italic; } /* WhatsApp es la acción, no una red: píldora con nombre, del mismo material que el resto del pie (borde fino sobre el verde, nunca un relleno blanco suelto). */ .footer-wa { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--stage-hair); color: var(--stage-ink); font-size: 14.5px; opacity: 1; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .footer-wa svg { width: 18px; height: 18px; fill: currentColor; flex: none; } .footer-wa:hover { background: var(--lime); color: var(--emerald); border-color: transparent; text-decoration: none; } .footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; } .footer-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--stage-hair); color: var(--stage-ink-2); transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .footer-social svg { width: 17px; height: 17px; fill: currentColor; } .footer-social a:hover { color: var(--emerald); background: var(--lime); border-color: transparent; } .footer-col { display: grid; align-content: start; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .footer-bottom { border-top: 1px solid var(--stage-hair); padding-block: 20px 28px; display: grid; gap: 10px; font-size: 12px; color: var(--stage-ink-2); line-height: 1.5; } @media (min-width: 900px) { .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; } } @media (max-width: 899px) { /* Los enlaces legales y el CIF son dos cosas distintas: aire entre ellas. */ .footer-bottom { gap: 16px; } .footer-fiscal { padding-top: 4px; line-height: 1.6; } } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; } .footer-legal a + a::before { content: "·"; margin-right: 14px; opacity: .45; } @media (max-width: 639px) { .footer-legal { gap: 0 18px; } .footer-legal a + a::before { display: none; } } .footer-bottom a { color: var(--stage-ink-2); } .footer-bottom a:hover { color: var(--stage-ink); } /* Selector de idioma: dentro del pie, no flotando sobre el contenido. GTranslate lo cuelga del ; ui.js lo recoge y lo trae aquí. */ .dafa-lang:not(.is-ready) { display: none; } .dafa-lang .gtranslate_wrapper { display: flex; flex-wrap: wrap; gap: 4px 10px; } .dafa-lang .glink { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--stage-ink-2); text-decoration: none; opacity: .8; } .dafa-lang .glink:hover, .dafa-lang .glink.gt-current-lang { opacity: 1; color: var(--stage-ink); } .dafa-lang .glink img { width: 16px; height: 16px; border-radius: 2px; } /* El idioma, plegado en móvil: ocho banderas son dos filas de color justo encima del aviso legal, que es la zona más sobria del sitio. En escritorio caben en una fila y el pliegue desaparece. */ .lang-fold { order: -1; } .lang-fold:not(.is-ready) { display: none; } .lang-fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 12px; color: var(--stage-ink-2); } .lang-fold > summary::-webkit-details-marker { display: none; } .lang-fold > summary i { width: 9px; height: 9px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-fast) var(--ease); } .lang-fold[open] > summary i { transform: rotate(225deg) translate(-2px, -2px); } .lang-fold > summary + .dafa-lang { padding-top: 10px; } @media (min-width: 640px) { .lang-fold > summary { display: none; } } .footer-fiscal { opacity: .72; } .dafa-lang .gt_switcher, .dafa-lang .gt_switcher_wrapper { margin: 0 !important; opacity: 1 !important; animation: none !important; position: static !important; } .dafa-lang .gt_switcher { width: auto !important; } .dafa-lang .gt_switcher .gt_selected a, .dafa-lang .gt_switcher a { background-color: transparent !important; color: var(--stage-ink-2) !important; border: 1px solid var(--stage-hair) !important; border-radius: 999px !important; font: 500 12px var(--sans) !important; padding: 6px 12px !important; width: auto !important; height: auto !important; } .dafa-lang .gt_switcher .gt_option { background: var(--stage-1) !important; border-color: var(--stage-hair) !important; border-radius: 12px !important; width: auto !important; min-width: 150px; } .dafa-lang .gt_switcher .gt_option a:hover { background: rgba(238, 242, 238, .08) !important; color: var(--stage-ink) !important; } /* Columnas del pie plegables en móvil. */ .footer-col > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; } .footer-col > summary::-webkit-details-marker { display: none; } .footer-col > summary h2 { margin: 0; } .footer-col > summary i { position: relative; width: 11px; height: 11px; flex: none; transition: transform var(--t-fast) var(--ease); } .footer-col > summary i::before, .footer-col > summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--stage-ink-2); } .footer-col > summary i::after { transform: rotate(90deg); transition: transform var(--t-fast) var(--ease); } .footer-col[open] > summary i::after { transform: rotate(0deg); } .footer-col > summary + nav { padding-bottom: 10px; } .footer-col + .footer-col { border-top: 1px solid var(--stage-hair); } /* Con el dedo, «HP» o «Dell» son enlaces de 19px de ancho: alto bastante y ancho no. La diana necesita las dos medidas. */ @media (pointer: coarse) { .site-footer li a { min-height: 44px; min-width: 44px; } .footer-legal a, .lang-fold > summary { min-height: 44px; display: inline-flex; align-items: center; } } @media (min-width: 1040px) { /* En escritorio no hay nada que plegar: el título vuelve a ser un título. */ .footer-col > summary { cursor: default; pointer-events: none; padding-block: 0 14px; } .footer-col > summary i { display: none; } .footer-col + .footer-col { border-top: 0; } .footer-col > summary + nav { padding-bottom: 0; } } /* ---- header.css ---- */ /* Header: topbar · bar · dropdowns · «Tienda» mega · live search · drawer. Structure and behaviour mirror the GVB-SPES theme; look follows Dafa tokens v2. */ /* ---------- shell ---------- */ .site-header { position: sticky; top: 0; z-index: 50; /* flow-root, y no block, por el plegado de la barra superior: sin contexto de formato propio su margen negativo se fusiona con el de la cabecera y en vez de encogerla la desplaza, dejando 34px de blanco muerto sobre el logotipo. */ display: flow-root; background: var(--chrome); border-bottom: 1px solid transparent; transition: border-color var(--t-ui) var(--ease); } /* The edge only exists once there is something above it. At the top of the page the bar is the page, and a grey rule there —over the green stage, no less— draws a line around nothing. It arrives with the topbar collapse, at 72px: one event, two consequences. */ .site-header.is-stuck { border-bottom-color: var(--chrome-hair); } .admin-bar .site-header { top: 32px; } /* On phones WordPress makes its admin bar `position: absolute`, so it scrolls away with the page. Offsetting the header by 46px then leaves a strip where the content shows through — the gap an editor sees and a visitor never does. */ @media (max-width: 782px) { .admin-bar .site-header { top: 0; } } /* ---------- topbar («Menu top» + contact) ---------- */ .topbar { height: var(--topbar-h); overflow: hidden; font-size: 12.5px; border-bottom: 1px solid var(--chrome-hair); transition: margin var(--t-panel) var(--ease), opacity var(--t-ui) var(--ease); } .site-header.is-stuck .topbar { margin-top: calc(-1 * var(--topbar-h)); opacity: 0; } .header-in { position: relative; } .topbar-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .topbar a { color: inherit; text-decoration: none; opacity: .72; display: inline-flex; align-items: center; min-height: 24px; transition: opacity var(--t-fast) var(--ease); } .topbar a:hover { opacity: 1; } .topbar-contact { display: flex; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; } .topbar-contact span { opacity: .4; } .topbar-nav { display: flex; gap: 22px; } /* ---------- bar ---------- */ .header-in { height: var(--header-h); display: flex; align-items: stretch; gap: 24px; } .brand { display: flex; align-items: center; flex: none; } .brand img { height: 38px; width: auto; } .brand .logo-light { display: none; } .primary-nav { flex: 1; display: flex; justify-content: center; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; } .nav-list > li { position: relative; display: flex; align-items: center; } .nav-list > li.dafa-has-mega { position: static; } .nav-list > li > a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 400 14.5px var(--sans); color: inherit; text-decoration: none; padding: 9px 13px; border-radius: 999px; transition: background var(--t-ui) var(--ease); } .nav-list > li.menu-item-has-children > a::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform var(--t-ui) var(--ease); } .nav-list > li.is-open > a::after { transform: translateY(1px) rotate(-135deg); } .nav-list > li > a:hover, .nav-list > li.is-open > a { background: rgba(18, 22, 20, .07); } .nav-list > li.current-menu-item > a, .nav-list > li.current-menu-ancestor > a, .nav-list > li.current-menu-parent > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; } /* dropdowns (Servicios, Políticas…) */ .nav-list .sub-menu { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: -6px; width: max-content; min-width: 250px; max-width: min(420px, calc(100vw - 2 * var(--gutter))); /* Anclado a la barra, no flotando bajo ella: con la chapa maciza el panel es una prolongación de la cabecera, así que el filo de arriba es recto y no lleva borde. */ background: var(--chrome); color: var(--ink); border: 1px solid var(--chrome-hair); border-top: 0; border-radius: 0 0 var(--r-l) var(--r-l); /* El fondo gris de la última fila al pasar el ratón es rectangular: sin recorte asomaba por fuera de las esquinas redondeadas y parecía una sombra sucia. */ overflow: clip; box-shadow: 0 18px 34px -26px rgba(6, 17, 12, .22); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), visibility 0s .3s; } .nav-list > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); } .nav-list .sub-menu a { display: block; padding: 13px 18px; border-radius: 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--ink-2); text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .nav-list .sub-menu li:last-child > a { border-bottom: 0; } .nav-list .sub-menu a:hover, .nav-list .sub-menu .current-menu-item > a { background: rgba(18, 22, 20, .07); color: var(--ink); } /* «Tienda» mega panel */ .dafa-mega { /* Anchored to the header's own container, not to the header box: otherwise above 1240px the panel stays pinned to the left gutter while the logo and the tools move inwards, and the mega ends up visibly off-centre. */ position: absolute; left: var(--gutter); right: var(--gutter); top: 100%; background: var(--chrome); color: var(--ink); border: 1px solid var(--chrome-hair); border-top: 0; border-radius: 0 0 var(--r-l) var(--r-l); box-shadow: 0 18px 34px -26px rgba(6, 17, 12, .22); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), visibility 0s .35s; } .nav-list > li.is-open > .dafa-mega { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); } .mega-in { padding: 28px 30px 30px; } .mega-shop { display: grid; grid-template-columns: 220px 1fr 250px; gap: 40px; } /* One track per column plus the aside, whatever the number of columns is: adding one in Dafa Studio must not need a new rule here. */ .mega-shop { grid-template-columns: repeat(var(--mega-n, 3), minmax(150px, auto)) minmax(210px, 250px); } .mega-group + .mega-group { border-left: 1px solid var(--hair); padding-left: 40px; } .mega-group > .eyebrow { margin-bottom: 14px; } .mega-group-sobremesa .mega-brands { grid-template-columns: repeat(2, 1fr); } .mega-all { margin-top: 12px; font-size: 13.5px; color: var(--forest); text-decoration: none; } .mega-note { font-size: 12px; line-height: 1.5; color: var(--ink-3); padding: 4px 2px; } .mega-col { display: grid; align-content: start; gap: 2px; } .mega-col > .eyebrow { margin-bottom: 12px; } .mega-brand:hover { color: var(--forest); } .mega-link { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--hair); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .mega-link span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .mega-link:hover, .mega-link[aria-current] { color: var(--forest); } @media (hover: hover) and (pointer: fine) { .mega-link:hover { transform: translateX(4px); } } /* auto-fit, y no repeat(3): con tres marcas fijas dentro de una columna de 182px cada track baja de su contenido mínimo y la lista se sale por encima de la columna vecina. Así se reparten en dos filas antes que desbordar. */ .mega-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 22px 20px; } .mega-brands > div { display: grid; align-content: start; gap: 3px; } .mega-brand-name { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.1; text-decoration: none; margin-bottom: 4px; } .mega-sub { font-size: 13.5px; color: var(--ink-2); text-decoration: none; padding: 2px 0; } .mega-brand-name:hover, .mega-sub:hover, .mega-sub[aria-current], .mega-brand-name[aria-current] { color: var(--forest); } .mega-more { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; } .mega-more span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .mega-more a { color: var(--ink-2); text-decoration: none; } .mega-more a:hover { color: var(--forest); } .mega-aside { display: grid; align-content: start; gap: 12px; } .mega-card { display: grid; gap: 6px; padding: 18px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--hair); text-decoration: none; transition: border-color var(--t-ui) var(--ease), transform var(--t-panel) var(--ease); } .mega-card:first-child { background: linear-gradient(160deg, var(--stage-1), var(--stage-2)); color: var(--stage-ink); border-color: transparent; } .mega-card:first-child .eyebrow, .mega-card:first-child span:last-child { color: var(--stage-ink-2); } .mega-card b { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.05; } .mega-card span:last-child { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .mega-card:hover { border-color: var(--ink-3); } @media (hover: hover) and (pointer: fine) { .mega-card:hover { transform: translateY(-2px); } } /* ---------- tools ---------- */ .header-tools { display: flex; align-items: center; gap: 2px; flex: none; } .tool { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: none; transition: background var(--t-ui) var(--ease); } .tool:hover { background: rgba(18, 22, 20, .07); } .tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .cart-count { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--emerald); color: var(--stage-ink); font: 500 10px/17px var(--mono); text-align: center; } .cart-count[data-n="0"] { display: none; } .menu-toggle, .tool-search-mob { display: none; } /* ---------- live search (GVB livesearch) ---------- */ .dafa-livesearch { position: relative; display: flex; align-items: center; } .dafa-livesearch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; } .dafa-livesearch__input { width: 100%; height: 40px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--surface); color: var(--ink); padding: 0 76px 0 16px; font-size: 14px; outline: 0; -webkit-appearance: none; appearance: none; transition: border-color var(--t-ui) var(--ease), width var(--t-panel) var(--ease), opacity var(--t-ui) var(--ease), padding var(--t-panel) var(--ease); } .dafa-livesearch__input::-webkit-search-cancel-button { display: none; } .dafa-livesearch__input:focus { border-color: var(--ink-3); } .dafa-livesearch__submit, .dafa-livesearch__clear { position: absolute; top: 0; height: 40px; width: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); cursor: pointer; border-radius: 999px; } .dafa-livesearch__submit { right: 0; } .dafa-livesearch__clear { right: 34px; } .dafa-livesearch__clear[hidden] { display: none; } .dafa-livesearch__clear svg { width: 14px; height: 14px; } /* Los resultados son un desplegable más de la cabecera, no una ventana flotante: cuelgan del canto de la barra, con el filo de arriba recto y sin borde. El campo mide 40px y va centrado en la barra, así que lo que falta hasta el canto es la mitad de la diferencia; ambos son tokens, no números sueltos. */ .dafa-livesearch__panel { position: absolute; top: calc(100% + (var(--header-h) - 40px) / 2); left: -1px; right: -1px; z-index: 5; background: var(--chrome); color: var(--ink); border: 1px solid var(--chrome-hair); border-top: 0; border-radius: 0 0 var(--r-l) var(--r-l); box-shadow: 0 18px 34px -26px rgba(6, 17, 12, .22); padding: 8px; display: grid; } .dafa-livesearch__panel[hidden] { display: none; } .dafa-livesearch__item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--ink); } .dafa-livesearch__item:hover, .dafa-livesearch__item.is-active, .dafa-livesearch__all.is-active { background: rgba(18, 22, 20, .07); } .dafa-livesearch__thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--mist); display: grid; place-items: center; overflow: hidden; } .dafa-livesearch__thumb img { width: 100%; height: 100%; object-fit: contain; } .dafa-livesearch__thumb:empty::after { content: ""; width: 20px; height: 13px; border: 1px solid var(--titanium); border-radius: 2px; box-shadow: 0 4px 0 -2px var(--titanium); } .dafa-livesearch__body { display: grid; min-width: 0; } .dafa-livesearch__title { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dafa-livesearch__meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dafa-livesearch__all { display: block; padding: 11px 10px; margin-top: 4px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--forest); text-decoration: none; } .dafa-livesearch__empty { padding: 14px 12px; font-size: 14px; color: var(--ink-2); } /* collapsible in the bar: an icon that opens into a pill (GVB gvb-search--collapsible) */ /* Reserves only the icon's width and opens leftwards over the menu, so nothing reflows. */ .dafa-search--collapsible { position: relative; width: 40px; height: 40px; z-index: 2; } .dafa-search--collapsible .dafa-livesearch { position: absolute; top: 0; right: 0; } .dafa-search--collapsible .dafa-livesearch__input { width: 40px; height: 40px; padding: 0; opacity: 0; border-color: transparent; background: transparent; cursor: pointer; } .dafa-search--collapsible .dafa-livesearch__clear { display: none; } .dafa-search--collapsible .dafa-livesearch__submit { color: inherit; } .dafa-search--collapsible.is-open .dafa-livesearch__input { width: min(340px, calc(100vw - 2 * var(--gutter))); padding: 0 76px 0 16px; opacity: 1; background: var(--surface); color: var(--ink); border-color: var(--hair-2); cursor: text; } .dafa-search--collapsible.is-open .dafa-livesearch__clear:not([hidden]) { display: grid; } .dafa-search--collapsible.is-open .dafa-livesearch__submit { color: var(--ink-2); } /* ---------- mobile drawer (GVB drawer) ---------- */ .drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; transition: visibility 0s var(--t-drawer); } .drawer.is-open { visibility: visible; transition: none; } .drawer-scrim { position: absolute; inset: 0; background: rgba(6, 17, 12, .45); opacity: 0; transition: opacity var(--t-drawer) var(--ease-drawer); } .drawer.is-open .drawer-scrim { opacity: 1; } .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); overflow-y: auto; background: var(--chrome); color: var(--ink); padding: 0 22px 32px; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--t-drawer) var(--ease-drawer); } .drawer.is-open .drawer-panel { transform: none; } .admin-bar .drawer-panel { top: 46px; } @media (max-width: 782px) { .admin-bar .drawer-panel { top: 0; } } .drawer-head { display: flex; justify-content: space-between; align-items: center; min-height: var(--header-h); border-bottom: 1px solid var(--chrome-hair); } .drawer-search { padding: 18px 0 8px; } /* Dentro del cajón el panel de resultados no flota: es una sección más del menú que se despliega al escribir y empuja la lista hacia abajo. Flotando, tapaba «Inicio» y «Tienda» y parecía un error de montaje. El formulario es una fila flex, así que el panel necesita envolver a una línea propia: sin eso se coloca al lado del campo. */ .drawer-search .dafa-livesearch { flex-wrap: wrap; } .drawer-search .dafa-livesearch__panel { flex: 0 0 100%; position: static; z-index: auto; padding: 6px 0 2px; margin-top: 12px; background: transparent; border: 0; border-top: 1px solid var(--hair); border-radius: 0; box-shadow: none; animation: dafa-drawer-results var(--t-panel) var(--ease-out) both; } @keyframes dafa-drawer-results { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .drawer-search .dafa-livesearch__item { padding: 10px 4px; } .drawer-search .dafa-livesearch__all { margin-top: 2px; padding-left: 4px; } .drawer-search .dafa-livesearch__empty { padding-left: 4px; } .drawer-list, .drawer-list .sub-menu { list-style: none; margin: 0; padding: 0; } .drawer-list > li { border-bottom: 1px solid var(--chrome-hair); } .drawer-list li { position: relative; } .drawer-list > li > a { display: block; padding: 16px 48px 16px 0; font-size: 19px; text-decoration: none; } .drawer-list .sub-menu { display: none; padding: 0 0 12px 14px; border-left: 1px solid var(--chrome-hair); margin-bottom: 10px; } .drawer-list li.is-expanded > .sub-menu { display: block; } .drawer-list .sub-menu a { display: block; padding: 8px 44px 8px 0; font-size: 15px; color: var(--ink-2); text-decoration: none; } .drawer-list .sub-menu .sub-menu a { font-size: 14px; color: var(--ink-3); padding: 6px 0; } .drawer-list .current-menu-item > a { color: var(--forest); } .drawer-sub-toggle { position: absolute; right: 0; top: 6px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--ink-2); display: grid; place-items: center; } .drawer-list .sub-menu .drawer-sub-toggle { top: 0; height: 36px; } .drawer-sub-chev { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-ui) var(--ease); } .drawer-sub-toggle[aria-expanded="true"] .drawer-sub-chev { transform: translateY(1px) rotate(-135deg); } .drawer-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 6px; font-family: var(--mono); font-size: 12px; } .drawer-foot a { color: var(--ink-2); text-decoration: none; } @media (pointer: coarse) { .drawer-foot a { min-height: 44px; display: inline-flex; align-items: center; } } body.drawer-open { overflow: hidden; } @media (max-width: 1140px) { .nav-list > li > a { padding: 9px 9px; font-size: 14px; } .header-in { gap: 14px; } .mega-shop { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px 28px; } .mega-group + .mega-group { padding-left: 28px; } .mega-aside { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } } @media (max-width: 1020px) { :root { --topbar-h: 0px; } /* `.tool-account` ya no se esconde: quedarse sin acceso a la cuenta en móvil no fue una decisión, fue un arrastre de la regla que oculta la barra superior y el buscador. Caben los cuatro iconos. */ .topbar, .primary-nav, .dafa-search--collapsible { display: none; } .menu-toggle, .tool-search-mob { display: inline-grid; } .header-in { justify-content: space-between; align-items: center; } } /* Wide desktop: the search is a visible bar, not an icon (owner decision 17/09/2026). */ @media (min-width: 1200px) { .dafa-search--collapsible { width: 250px; } .dafa-search--collapsible .dafa-livesearch__input, .dafa-search--collapsible.is-open .dafa-livesearch__input { width: 250px; padding: 0 76px 0 16px; opacity: 1; background: var(--surface); border-color: var(--hair-2); color: var(--ink); cursor: text; } .dafa-search--collapsible .dafa-livesearch__submit { color: var(--ink-2); } } /* Fields stay at 16px on phones: below that iOS zooms the page on focus. */ @media (max-width: 767px) { .dafa-livesearch__input, .specbar .spec select { font-size: 16px; } } /* Una columna de enlaces libres en el mega menú (Ayuda, Políticas, Contacto). */ .mega-link-plain span { display: none; } .mega-link-plain { font-size: 14.5px; } /* El grupo de una sola entrada: su título es el enlace, y se comporta como tal. */ .mega-solo { display: inline-block; text-decoration: none; } .mega-solo:hover, .mega-solo[aria-current] { color: var(--forest); } /* La cabecera es pegajosa en todas partes, también sobre el escenario: flotar encima del héroe obligaba a compensar su altura con relleno y abría toda una clase de solapes. Ahora el héroe empieza donde acaba la barra. */ .has-stage .stage-in { padding-top: clamp(32px, 8vw, 56px); } /* ---------- Selector de idioma (2026-09-21) ---------- En la barra: la bandera del idioma actual con su flecha, al final del menú; el desplegable es el mismo de Servicios. En el cajón: fila «Idioma» tras Contacto. */ .lang-flag { width: 20px; height: 20px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--hair); } .nav-list > li.menu-item-lang > a.lang-current { display: inline-flex; align-items: center; gap: 6px; } .nav-list > li.menu-item-lang > .sub-menu { min-width: 200px; left: auto; right: 0; } .lang-menu a { display: flex !important; align-items: center; gap: 10px; } .lang-menu a[aria-current="true"] { font-weight: 500; color: var(--ink); } .lang-menu a[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--emerald); } .drawer .menu-item-lang > a.lang-current { display: flex; align-items: center; gap: 10px; } .drawer .menu-item-lang .lang-label { order: -1; margin-right: auto; } /* ---- components.css ---- */ /* Components: device illustration, spec glass, promise, grades, second life, brand rail. */ /* ---------- hero: real photo ---------- */ .device { position: relative; max-width: 600px; width: 100%; justify-self: center; aspect-ratio: 600 / 430; } .device svg { width: 100%; height: 100%; } .hero-photo { position: relative; margin: 0; width: 100%; max-width: 520px; justify-self: center; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: #0A1812; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--stage-hair); } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); } .hero-slide.is-active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 8s linear; } .hero-slide.is-active img { transform: scale(1.07); } /* A quiet vignette keeps a workshop photo calm next to the headline. */ .hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(238, 242, 238, .08); background: linear-gradient(180deg, rgba(6, 17, 12, .10) 0%, rgba(6, 17, 12, 0) 30%, rgba(6, 17, 12, 0) 62%, rgba(6, 17, 12, .72) 100%); } .hero-slide figcaption { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--stage-ink); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); } @media (max-width: 959px) { .hero-photo { aspect-ratio: 4 / 3; max-width: none; } } /* ---------- promise strip ---------- */ .promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .promise > div { padding: 26px 22px 26px 0; display: grid; gap: 8px; align-content: start; } .promise > div + div { padding-left: 22px; border-left: 1px solid var(--hair); } @media (max-width: 880px) { .promise { grid-template-columns: 1fr 1fr; } .promise > div:nth-child(odd) { padding-left: 0; border-left: 0; } .promise > div:nth-child(n+3) { border-top: 1px solid var(--hair); } } .promise svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; } .promise b { font-weight: 500; font-size: 15px; } .promise span { font-size: 13.5px; color: var(--ink-2); font-weight: 300; } /* ---------- grades ---------- */ .grades-layout { display: grid; gap: clamp(28px, 4vw, 64px); } @media (min-width: 960px) { .grades-layout { grid-template-columns: 1fr 1.2fr; align-items: start; } } .grade-list { display: grid; } .gl { display: grid; grid-template-columns: 52px 110px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hair); } .gl:first-child { border-top: 1px solid var(--hair); } .gl .l { font-family: var(--serif); font-weight: 300; font-size: 30px; line-height: 1; } .gl .bar { display: flex; gap: 4px; } .gl .bar i { flex: 1; height: 2px; background: var(--hair-2); } .gl .bar i.on { background: var(--ink); } .gl .t b { font-weight: 500; font-size: 15px; } .gl .t span { display: block; font-size: 14px; color: var(--ink-2); font-weight: 300; } @media (max-width: 560px) { .gl { grid-template-columns: 44px 1fr; } .gl .bar { display: none; } } .always { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-l); padding: clamp(22px, 3vw, 32px); } .always h3 { font-family: var(--serif); font-weight: 300; font-size: 26px; letter-spacing: -.01em; line-height: 1.05; } .always ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .always li { display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); font-weight: 300; } .always li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; transform: translateY(-2px); } /* ---------- second life ---------- */ .second { border-radius: var(--r-xl); padding: clamp(32px, 5vw, 72px); background: linear-gradient(160deg, var(--stage-1), var(--stage-2)); color: var(--stage-ink); display: grid; gap: clamp(28px, 4vw, 56px); position: relative; overflow: hidden; } .second::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; border: 1px solid var(--stage-hair); box-shadow: 0 0 0 80px rgba(238, 242, 238, .015), 0 0 0 160px rgba(238, 242, 238, .01); pointer-events: none; } .second .eyebrow { color: var(--stage-ink-2); } .second q { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4vw, 52px); line-height: 1.06; max-width: 17ch; quotes: none; margin-top: 18px; } .second q em { color: var(--lime-soft); } .second .lead { color: var(--stage-ink-2); } .cycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--stage-hair); } .cycle > div { padding: 20px 20px 0 0; } .cycle > div + div { padding-left: 20px; border-left: 1px solid var(--stage-hair); } @media (max-width: 860px) { .cycle > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--stage-hair); margin-top: 20px; } } .cycle .k { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--stage-ink-2); } .cycle b { display: block; font-weight: 500; margin: 10px 0 6px; } .cycle span { font-size: 14px; color: var(--stage-ink-2); font-weight: 300; } .cycle .here .k { color: var(--lime); } /* ---------- brand / line rail ---------- */ .rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .rail a { display: grid; gap: 28px; padding: 22px; border-radius: var(--r-l); text-decoration: none; background: var(--surface); border: 1px solid var(--hair); transition: border-color var(--t-ui) var(--ease), transform var(--t-panel) var(--ease); } .rail a:hover { border-color: var(--ink-3); } @media (hover: hover) and (pointer: fine) { .rail a:hover { transform: translateY(-2px); } } .rail .rn { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1; } .rail .rm { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .rail .rm .arr { color: var(--ink); transition: transform var(--t-ui) var(--ease); } .rail a:hover .arr { transform: translateX(3px); } /* ---------- contact band ---------- */ .band { display: grid; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--hair); border-radius: var(--r-xl); background: var(--surface); } @media (min-width: 860px) { .band { grid-template-columns: 1fr auto; } } .band h2, .band h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.01em; line-height: 1.05; } .band p { color: var(--ink-2); font-weight: 300; margin-top: 8px; } .band .actions { margin-top: 0; } /* Banner de cookies (Complianz). Entraba animando `bottom` de -50vh a 0, y cada paso contaba como salto de diseño: CLS 0,207 en todas las páginas. Misma entrada, pero con `translate`, que no mueve nada del resto (2026-09-21). Respeta «menos movimiento». */ html body #cmplz-cookiebanner-container .cmplz-cookiebanner { bottom: 0; animation: dafa-cmplz-in .5s cubic-bezier(.22, 1, .36, 1) 1s both; } @keyframes dafa-cmplz-in { from { translate: 0 calc(100% + 40px); opacity: 0; } to { translate: 0 0; opacity: 1; } } @media (prefers-reduced-motion: reduce) { html body #cmplz-cookiebanner-container .cmplz-cookiebanner { animation: none; } } /* Complianz 7.5 estira los botones de la barra inferior a la altura del texto de al lado (≈100 px en escritorio). Botones a su altura de siempre, centrados. */ html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { align-items: center; align-self: center; height: auto; } html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { height: auto; min-height: 46px; } /* ---- pages.css ---- */ /* Content pages: page stage, image slots, features, services, split, checks, legal reading layout, policy index, contact form, WooCommerce flow pages. */ /* ---------- page stage ---------- */ .stage-page .stage-in { grid-template-columns: 1fr; padding-bottom: clamp(44px, 6vw, 80px); } .stage-page h1 { font-size: clamp(34px, 4.8vw, 62px); margin: 18px 0 16px; max-width: 18ch; } .stage-page .sub { max-width: 56ch; } @media (min-width: 960px) { .stage-page .stage-in.has-img { grid-template-columns: 1.1fr .9fr; } } /* ---------- image slots (stock photos) ---------- */ .site-img { margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); } .site-img img { width: 100%; height: 100%; object-fit: cover; } .site-img.is-empty { display: grid; place-items: center; text-align: center; padding: 24px; background: linear-gradient(135deg, #E4E9E4, #F2F4F1); border: 1px dashed var(--hair-2); } .site-img.is-empty span { font-size: 13px; color: var(--ink-3); max-width: 24ch; } .site-img.is-empty span::before { content: "Imagen pendiente · "; font-weight: 500; } .on-stage .site-img.is-empty { background: linear-gradient(135deg, rgba(238, 242, 238, .06), rgba(238, 242, 238, .02)); border-color: var(--stage-hair); } .on-stage .site-img.is-empty span { color: var(--stage-ink-2); } .stage-img { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6); } /* ---------- features ---------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--hair); } .feature { padding: 28px 28px 8px 0; display: grid; gap: 10px; align-content: start; } .feature + .feature { padding-left: 28px; border-left: 1px solid var(--hair); } @media (max-width: 820px) { .feature + .feature { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); margin-top: 20px; } } .feature-n { font-family: var(--serif); font-size: 15px; color: var(--forest); } .feature h3 { font-size: 19px; } .feature p { color: var(--ink-2); font-weight: 300; } .feature svg { width: 26px; height: 26px; fill: none; stroke: var(--forest); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } /* ---------- services ---------- */ .services { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .service { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; align-content: start; } .service h2 { font-size: clamp(24px, 2.4vw, 30px); } .service p { color: var(--ink-2); font-weight: 300; } .service .btn { justify-self: start; margin-top: 6px; } .services-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } /* ---------- split: image + text ---------- */ .split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } } .split-text { display: grid; gap: 16px; align-content: center; } .split-text h2 { font-size: clamp(28px, 3.4vw, 44px); } .split-text h2 em, .service h2 em { color: var(--forest-lg); } .split-text .actions { margin-top: 8px; } .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .checks li { position: relative; padding-left: 26px; color: var(--ink-2); font-weight: 300; } .checks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 1.5px solid var(--forest); border-bottom: 1.5px solid var(--forest); transform: rotate(-45deg); } .checks b { font-weight: 500; color: var(--ink); } /* ---------- legal reading layout ---------- */ .legal { display: grid; gap: clamp(28px, 5vw, 72px); padding-block: clamp(40px, 6vw, 80px); } @media (min-width: 960px) { .legal { grid-template-columns: 300px minmax(0, 1fr); } .legal-nav { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } } .legal-nav .eyebrow { display: block; margin-bottom: 12px; } .legal-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } /* El índice legal y el menú de la cuenta son el mismo componente: columna de 280px a la izquierda, lista sin tarjeta, y la página en la que estás marcada con el verde de marca. Lo que cambiaba entre los dos era gratuito. */ .legal-nav a { display: block; padding: 11px 14px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 14.5px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .legal-nav a:hover { background: var(--mist); color: var(--ink); } .legal-nav a[aria-current] { background: var(--emerald); color: var(--btn-ink); box-shadow: none; font-weight: 500; } /* El índice plegable en móvil. En escritorio el resumen desaparece y queda la lista de siempre, sin un gesto que no lleva a ninguna parte. */ .legal-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--hair); } .legal-fold > summary::-webkit-details-marker { display: none; } .legal-fold > summary .eyebrow { margin: 0; } .legal-fold-now { margin-left: auto; font-size: 13.5px; color: var(--ink-2); } .legal-fold > summary i { width: 9px; height: 9px; flex: none; border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-fast) var(--ease); } .legal-fold[open] > summary i { transform: rotate(225deg) translate(-2px, -2px); } .legal-fold[open] > ul { padding-top: 8px; } @media (min-width: 960px) { .legal-fold > summary { display: none; } .legal-nav .eyebrow { display: block; margin-bottom: 12px; } } .legal-body { max-width: 72ch; font-size: 16px; } .legal-body h2 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 1.8em; } .legal-body h2:first-child { margin-top: 0; } /* La política de cookies la escribe Complianz con su propia hoja y selectores de id (#cmplz-document: texto a 14 px, títulos a 22 px). Aquí se iguala a las demás páginas legales; hace falta el id para ganarle. */ .legal-body #cmplz-document { font-size: 16px; max-width: none; } .legal-body #cmplz-document p, .legal-body #cmplz-document li { font-size: 16px; line-height: 1.6; color: var(--ink-2); font-weight: 300; } .legal-body #cmplz-document p { margin: 1.1em 0 0; } .legal-body #cmplz-document h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.05; color: var(--ink); margin: 1.8em 0 0; } .legal-body #cmplz-document h3, .legal-body #cmplz-document .cmplz-subtitle { font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--ink); margin: 1.6em 0 0; } .legal-body #cmplz-document > p:first-child { font-size: 14px; font-style: italic; color: var(--ink-3); } .legal-body #cmplz-document a { color: var(--emerald); } .legal-empty { padding: 20px; border-radius: var(--r-l); background: var(--mist); } .legal-updated { margin-top: 3em !important; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-3); } /* ---------- policy index ---------- */ /* Cinco políticas: Términos (la que reúne garantía, devoluciones y envíos) a lo ancho y las otras cuatro en una fila. Antes eran 4 + 1 con «Accesibilidad» sola. */ .policy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .policy-grid > .policy-card:first-child { grid-column: 1 / -1; } .policy-grid > .policy-card:first-child b { font-size: 26px; } @media (max-width: 1000px) { .policy-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .policy-grid { grid-template-columns: 1fr; } } .policy-card { display: grid; grid-template-rows: auto 1fr auto; align-content: start; gap: 8px; padding: 22px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--hair); text-decoration: none; transition: border-color var(--t-ui) var(--ease), transform var(--t-panel) var(--ease); } .policy-card b { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.12; } .policy-card span { font-size: 13.5px; color: var(--forest); white-space: nowrap; } .policy-card small { font-size: 14px; line-height: 1.5; color: var(--ink-3); font-weight: 300; } .policy-card:hover { border-color: var(--ink-3); } @media (hover: hover) and (pointer: fine) { .policy-card:hover { transform: translateY(-2px); } } /* ---------- contact ---------- */ .contact { display: grid; gap: clamp(28px, 5vw, 64px); } @media (min-width: 960px) { .contact { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } } .contact-info { display: grid; gap: 22px; } .contact-info > div { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); } .contact-info .eyebrow { margin-bottom: 2px; } .contact-info a:not(.link) { font-family: var(--serif); font-size: 22px; text-decoration: none; } .contact-info a:not(.link):hover { color: var(--forest); } .contact-info p { color: var(--ink-2); } .contact-info .link { justify-self: start; margin-top: 6px; font-size: 14px; } .contact-legal { font-size: 13px; color: var(--ink-3) !important; } .contact-form { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 40px); } /* forms (shared: contact, WooCommerce) */ .form { display: grid; gap: 16px; } .field-row { display: grid; gap: 16px; } @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: 6px; } .field > span { font-size: 13px; color: var(--ink-2); font-weight: 500; } .field input, .field select, .field textarea, .woocommerce form .input-text, .woocommerce form select, .woocommerce-page form .input-text { width: 100%; font: 400 15px var(--sans); color: var(--ink); background: var(--page); border: 1px solid var(--hair-2); border-radius: 12px; padding: 12px 14px; outline: 0; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .field textarea { resize: vertical; min-height: 140px; } .field input:focus, .field select:focus, .field textarea:focus, .woocommerce form .input-text:focus, .woocommerce form select:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(31, 94, 62, .12); background: #fff; } .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); } .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--emerald); flex: none; } .check a { color: var(--forest); } .form .btn { justify-self: start; } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .notice { padding: 14px 18px; border-radius: var(--r); margin-bottom: 18px; font-size: 14.5px; } .notice-ok { background: #E6F0E2; color: var(--emerald); } .notice-error { background: #F6E4E0; color: #7A2B1E; } /* ---------- WooCommerce flow pages (cart, checkout, account) ---------- */ .shop-flow-page { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 8vw, 104px); } .flow-title { font-size: clamp(32px, 4vw, 48px); margin-bottom: clamp(20px, 3vw, 32px); } .shop-flow { font-size: 15px; } .shop-flow table.shop_table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-l); overflow: hidden; } .shop-flow table.shop_table th, .shop-flow table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: middle; } .shop-flow table.shop_table th { font-size: 13px; font-weight: 500; color: var(--ink-3); background: var(--page); } .shop-flow .product-thumbnail img { width: 64px; border-radius: 10px; } /* Los enlaces de texto, en verde; los botones (.btn) conservan sus colores: con «.shop-flow a» a secas, «Ver el pedido en mi cuenta» salía verde sobre verde. */ .shop-flow a:not(.btn) { color: var(--forest); } .shop-flow .cart_totals, .shop-flow #order_review { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-l); padding: 22px; } .shop-flow h2, .shop-flow h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin-bottom: 14px; } /* WooCommerce's own selectors carry an element, so ours must too, or its grey default wins on «Volver a la tienda» and «Explorar los productos». */ .shop-flow a.button:not(.btn), .shop-flow button.button:not(.btn), .shop-flow input.button:not(.btn), .shop-flow #place_order, .shop-flow .woocommerce-Button:not(.btn), .shop-flow button[type="submit"]:not(.btn) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 500 15px/1 var(--sans); border-radius: 999px; padding: 14px 22px; border: 0; cursor: pointer; background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; } .shop-flow a.button:not(.btn):hover, .shop-flow button.button:not(.btn):hover, .shop-flow input.button:not(.btn):hover, .shop-flow #place_order:hover, .shop-flow .woocommerce-Button:not(.btn):hover, .shop-flow button[type="submit"]:not(.btn):hover { background: var(--forest); color: var(--btn-ink); } /* The «back» button is a quiet one. */ /* `wc-forward` es la clase de «seguir comprando» y de «ver el carrito», que son secundarias; pero WooCommerce se la pone también a «Finalizar compra», que es la acción principal de la página. Sin esta excepción el botón más importante del carrito se pintaba como el menos importante. */ .shop-flow a.button.wc-backward, .shop-flow a.button.wc-forward:not(.checkout-button) { background: transparent; color: var(--ink); border: 1px solid var(--hair-2); } .shop-flow a.button.wc-backward:hover, .shop-flow a.button.wc-forward:not(.checkout-button):hover { background: transparent; color: var(--ink); border-color: var(--ink); } .shop-flow .wc-proceed-to-checkout .button { width: 100%; margin-top: 12px; } /* Pago: las casillas y los métodos de pago se marcan con el dedo, y varias de sus etiquetas medían 18 y 26 px de alto. La diana es la etiqueta, no el cuadradito de 13 px. La del pasaporte necesita un selector más pesado porque WooCommerce le impone `display: inline`, y un elemento en línea ignora cualquier altura mínima. */ @media (pointer: coarse) { .shop-flow .woocommerce-form__label-for-checkbox, .shop-flow .wc_payment_method > label, .shop-flow #ship-to-different-address label, .shop-flow .woocommerce-form-login__rememberme, .shop-flow .woocommerce form .form-row label.checkbox { min-height: 44px; display: flex; align-items: center; gap: 10px; } } .shop-flow #place_order { min-height: 48px; width: 100%; } .shop-flow .cart-empty { font-family: var(--serif); font-size: 26px; } .shop-flow .return-to-shop { margin-top: 18px; } @media (min-width: 960px) { .shop-flow .woocommerce { display: block; } .shop-flow form.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: 32px; align-items: start; } .shop-flow form.checkout #order_review_heading { display: none; } } /* WooCommerce notices inside flow pages: drop Woo's icon font, use the theme's notice look */ .shop-flow .woocommerce-info, .shop-flow .woocommerce-message, .shop-flow .woocommerce-error, .shop-flow .cart-empty.woocommerce-info { padding: 16px 18px; border: 1px solid var(--hair); border-left: 2px solid var(--forest); border-radius: var(--r); background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: 15px; } .shop-flow .woocommerce-error { border-left-color: var(--danger); } .shop-flow .woocommerce-info::before, .shop-flow .woocommerce-message::before, .shop-flow .woocommerce-error::before { display: none; } /* stock image placements */ .grades-side { display: grid; gap: 16px; align-content: start; } .grades-img { aspect-ratio: 16 / 9; } .second-head { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; } @media (min-width: 900px) { .second-head { grid-template-columns: 1.2fr .8fr; } } .second-img { aspect-ratio: 4 / 3; border-radius: var(--r-l); } /* ========================================================================== Site photography: square, clean rounded corners (owner 21/09/2026). The old feathered mask, the green veil and the desaturation are gone: the photos show as they are, framed like the rest of the cards. ========================================================================== */ .site-img, .hero-photo { aspect-ratio: 1 / 1 !important; border-radius: var(--r-xl); overflow: hidden; background: var(--mist); box-shadow: none; } .hero-photo::after { display: none; } .hero-slide img { transform: none; transition: none; } .hero-slide.is-active img { transform: none; } .hero-photo { max-width: 560px; } .stage-img { box-shadow: none; } .grades-img, .second-img { aspect-ratio: 1 / 1 !important; } .second-img { max-width: 420px; justify-self: end; } @media (max-width: 959px) { .hero-photo { max-width: 520px; margin-inline: auto; } } /* ========================================================================== Light stage (body.stage-light): porcelain page openings, dark text. Emerald stays for buttons, menu panels, footer and the «segunda vida» band. ========================================================================== */ body.stage-light .stage { color: var(--ink); background: radial-gradient(900px 520px at 78% 40%, #FFFFFF, transparent 70%), linear-gradient(180deg, #F2F4F1, var(--page)); border-radius: 0; border-bottom: 1px solid var(--hair); } body.stage-light .stage::after { display: none; } body.stage-light .stage h1 em { color: var(--forest-lg); } body.stage-light .stage .sub, body.stage-light .stage .status { color: var(--ink-2); } body.stage-light .stage .crumbs, body.stage-light .stage-sm .crumbs { color: var(--ink-3); } body.stage-light .facts { border-top-color: var(--hair); } body.stage-light .facts > div + div, body.stage-light .facts > div:nth-child(n+3) { border-color: var(--hair); } body.stage-light .facts span { color: var(--ink-3); } body.stage-light .stage .btn-porcelain { background: var(--btn-bg); color: var(--btn-ink); } body.stage-light .stage .btn-porcelain:hover { background: var(--forest); } body.stage-light .on-stage .link { border-bottom-color: var(--hair-2); } body.stage-light .on-stage .site-img.is-empty { background: linear-gradient(135deg, #E4E9E4, #F2F4F1); border-color: var(--hair-2); } body.stage-light .on-stage .site-img.is-empty span { color: var(--ink-3); } /* header over the light stage: dark text and logo from the start */ /* the «segunda vida» band stays emerald: its photo sits in a light rounded card instead of fading into dark */ .second .second-img { -webkit-mask-image: none !important; mask-image: none !important; border-radius: var(--r-l); } /* Home: the product cut out, no frame, floating over the light stage */ .hero-product { position: relative; margin: 0; width: 100%; max-width: 680px; justify-self: center; } .hero-product img { width: 100%; height: auto; display: block; filter: drop-shadow(0 38px 38px rgba(18, 22, 20, .16)) drop-shadow(0 6px 10px rgba(18, 22, 20, .08)); } .hero-product::after { content: ""; position: absolute; left: 14%; right: 10%; bottom: 2%; height: 26px; border-radius: 50%; background: rgba(18, 22, 20, .14); filter: blur(18px); z-index: -1; } @media (max-width: 959px) { .hero-product { max-width: min(380px, 80vw); margin-top: 8px; } } /* Sending: the label stays, the arrow becomes a spinner. */ .btn[aria-busy="true"] { pointer-events: none; } .btn[aria-busy="true"] .arr { width: 14px; height: 14px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* ---------- forms inside the flow (login, register, checkout, addresses) ---------- WooCommerce ships its own markup and floats; everything here is scoped to .shop-flow so it can never collide with the site's own forms. */ .shop-flow .u-columns { display: grid; gap: 20px; } @media (min-width: 820px) { .shop-flow .u-columns { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 940px; } } .shop-flow .col2-set .col-1, .shop-flow .col2-set .col-2, .shop-flow .u-column1, .shop-flow .u-column2 { width: 100%; float: none; } .shop-flow form.login, .shop-flow form.register { border: 1px solid var(--hair); border-radius: var(--r-l); padding: clamp(20px, 3vw, 28px); background: var(--surface); margin: 0; } .shop-flow form .form-row { display: grid; gap: 6px; margin: 0 0 18px; padding: 0; width: 100%; float: none; } .shop-flow form .form-row label { font-size: 13px; font-weight: 500; color: var(--ink-2); } .shop-flow form .form-row .required { color: var(--danger); border: 0; text-decoration: none; } .shop-flow form .form-row input.input-text, .shop-flow form .form-row textarea, .shop-flow form .form-row select, .shop-flow .select2-container .select2-selection--single { width: 100%; min-height: 46px; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 12px 14px; transition: border-color var(--t-fast) var(--ease); } .shop-flow form .form-row input.input-text:focus, .shop-flow form .form-row textarea:focus, .shop-flow form .form-row select:focus { border-color: var(--forest); outline: none; } .shop-flow form .form-row.woocommerce-invalid input.input-text { border-color: var(--danger); } .shop-flow .woocommerce-form-login__rememberme { display: flex; gap: 8px; align-items: center; margin: 2px 0 16px; font-size: 14px; } .shop-flow .woocommerce-form-login__rememberme input, .shop-flow .woocommerce-form__input-checkbox { accent-color: var(--forest); } .shop-flow form.login .button, .shop-flow form.register .button { width: 100%; } .shop-flow .woocommerce-LostPassword { margin: 0; font-size: 14px; } @media (min-width: 720px) { .shop-flow form.checkout .form-row-first, .shop-flow form.checkout .form-row-last { display: inline-grid; width: calc(50% - 8px); vertical-align: top; } .shop-flow form.checkout .form-row-first { margin-right: 12px; } } /* quantity, remove and payment methods */ .shop-flow .quantity .qty { width: 74px; min-height: 42px; text-align: center; font: inherit; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--surface); color: var(--ink); } .shop-flow a.remove { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mist); color: var(--ink-3) !important; font-size: 16px; line-height: 1; text-decoration: none; } .shop-flow a.remove:hover { background: var(--danger); color: #fff !important; } .shop-flow #payment ul.payment_methods { padding: 0; margin: 0 0 18px; border: 0; display: grid; gap: 8px; } .shop-flow #payment ul.payment_methods li { list-style: none; border: 1px solid var(--hair); border-radius: var(--r); padding: 14px 16px; background: var(--surface); } .shop-flow #payment ul.payment_methods li input[type="radio"] { accent-color: var(--forest); margin-right: 8px; } .shop-flow #payment div.payment_box { background: var(--mist); color: var(--ink-2); font-size: 14px; border-radius: var(--r); margin-top: 12px; } .shop-flow #payment div.payment_box::before { display: none; } .shop-flow #payment .place-order .button { width: 100%; } .shop-flow .addresses { display: grid; gap: 18px; } @media (min-width: 760px) { .shop-flow .addresses { grid-template-columns: 1fr 1fr; } } .shop-flow address { font-style: normal; line-height: 1.7; color: var(--ink-2); } .shop-flow .woocommerce-orders-table__cell-order-actions .button { padding: 9px 16px; font-size: 13.5px; } .shop-flow .coupon { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .shop-flow .coupon input.input-text { width: auto; min-width: 200px; } /* ========================================================================== ÁREA DE CLIENTE Plantillas propias en woocommerce/myaccount: el menú manda a la izquierda y el contenido ocupa el resto, con una tarjeta por pedido en lugar de tablas. ========================================================================== */ /* WooCommerce maqueta el área de cliente con flotados: `.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 30% }` y el contenido al 68%. Eso deja el menú en 100 px en un móvil, con «Detalles de la cuenta» partido en dos líneas. Aquí manda la rejilla, así que hay que anular los dos con el mismo peso de selector, no con !important. */ .woocommerce-account .account .woocommerce-MyAccount-navigation, .woocommerce-account .account .woocommerce-MyAccount-content { float: none; width: auto; } /* Mismas medidas que el índice legal: la columna, el canalón y el punto en que la página se parte en dos. Eran tres números distintos sin motivo. */ .account { display: grid; gap: clamp(28px, 5vw, 72px); align-items: start; } @media (min-width: 960px) { .account { grid-template-columns: 300px minmax(0, 1fr); } } .account-nav { display: grid; gap: 14px; align-content: start; } .account-nav .eyebrow { display: block; margin-bottom: -2px; } @media (min-width: 960px) { .account-nav { position: sticky; top: calc(var(--header-h) + 24px); } } .account-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .account-nav a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 14.5px; color: var(--ink-2); text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .account-nav a:hover { background: var(--mist); color: var(--ink); } .account-nav li.is-active a { background: var(--emerald); color: var(--btn-ink); font-weight: 500; } .account-logout { justify-self: start; font-size: 13.5px; color: var(--ink-3); text-decoration: none; padding: 0 14px; } .account-logout:hover { color: var(--danger); } .account-main { display: grid; gap: clamp(18px, 2.4vw, 26px); align-content: start; min-width: 0; } .account-hello { display: grid; gap: 6px; } .account-hello h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.05; } .account-hello p { color: var(--ink-2); font-weight: 300; max-width: 58ch; } .account-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-l); padding: clamp(18px, 2.4vw, 24px); display: grid; gap: 14px; justify-items: start; } .account-card h3 { font-size: 17px; } .account-card h3 a { text-decoration: none; } .account-card h3 a:hover { color: var(--forest); } .account-card .btn { padding: 11px 18px; font-size: 14px; } .account-meta { font-size: 13.5px; color: var(--ink-3); } .account-last-row { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; width: 100%; flex-wrap: wrap; } .account-state { font-size: 12px; font-weight: 500; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; background: var(--mist); color: var(--ink-2); white-space: nowrap; } .account-state.is-completed { background: var(--lime-soft); color: var(--emerald); } .account-state.is-processing { background: #F3E6CC; color: var(--amber); } .account-state.is-cancelled, .account-state.is-failed, .account-state.is-refunded { background: #F6E4E0; color: var(--danger); } .account-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; font-size: 14.5px; color: var(--ink-2); } .account-items li { display: flex; justify-content: space-between; gap: 16px; padding-block: 6px; border-top: 1px solid var(--hair); } .account-items li:first-child { border-top: 0; padding-top: 0; } .account-items span { color: var(--ink-3); font-variant-numeric: tabular-nums; } .account-orders, .account-downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .account-actions { display: flex; gap: 8px; flex-wrap: wrap; } .account-pages { display: flex; gap: 10px; } .account-download { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; justify-items: stretch; } .account-download .btn { justify-self: end; } @media (max-width: 600px) { .account-download { grid-template-columns: 1fr; } .account-download .btn { justify-self: start; } } .account-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .account-tiles a { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--r-l); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color var(--t-fast) var(--ease); } .account-tiles a:hover { border-color: var(--hair-2); } .account-tiles b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.1; } .account-tiles span { font-size: 13px; color: var(--ink-3); } .account-addresses { display: grid; gap: 14px; } @media (min-width: 760px) { .account-addresses { grid-template-columns: 1fr 1fr; } } .account-address address { font-style: normal; line-height: 1.7; color: var(--ink-2); } .account-help { background: var(--mist); border-color: transparent; } .account-help-links { display: flex; gap: 18px; flex-wrap: wrap; } /* Los formularios de Woo dentro del área usan la misma caja que las tarjetas. */ .account-main form.woocommerce-EditAccountForm, .account-main form.woocommerce-address-fields, .account-main .woocommerce-Address { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-l); padding: clamp(18px, 2.4vw, 24px); } .account-main fieldset { border: 0; padding: 0; margin: 24px 0 0; } .account-main fieldset legend { font-family: var(--serif); font-weight: 300; font-size: 20px; padding: 0; margin-bottom: 12px; } .account-main .woocommerce-Button, .account-main button[type="submit"] { margin-top: 6px; } /* ========================================================================== CARRITO Una línea por producto: la tabla de cinco columnas no sobrevive al móvil. ========================================================================== */ .cart-lines { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; } .cart-line { position: relative; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-l); padding: 16px 48px 16px 16px; display: grid; gap: 16px; align-items: center; grid-template-columns: 84px minmax(0, 1fr) auto auto; } .cart-line-img img { width: 84px; height: 84px; object-fit: contain; border-radius: 12px; background: #fff; } .cart-line-img a { display: block; } .cart-line-body { display: grid; gap: 3px; min-width: 0; } .cart-line-body h3 { font-size: 16px; font-weight: 500; } .cart-line-body h3 a { text-decoration: none; } .cart-line-body h3 a:hover { color: var(--forest); } .cart-line-unit, .cart-line-note { font-size: 13.5px; color: var(--ink-3); } .cart-line-body dl { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 2px 10px; } .cart-line-body dt, .cart-line-body dd { margin: 0; } .cart-line-total { font-family: var(--serif); font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; } .cart-line-remove { position: absolute; top: 14px; right: 14px; } @media (max-width: 720px) { .cart-line { grid-template-columns: 64px minmax(0, 1fr); padding-right: 44px; } .cart-line-img img { width: 64px; height: 64px; } .cart-line-qty, .cart-line-total { grid-column: 2; justify-self: start; } .cart-line-total { font-size: 18px; } } .cart-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 28px; } .cart-tools .coupon { display: flex; gap: 8px; flex-wrap: wrap; } .cart-tools .input-text { min-height: 46px; min-width: 200px; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 12px 14px; } .cart-tools .input-text:focus { border-color: var(--forest); outline: none; } .cart-tools .btn { padding: 12px 20px; font-size: 14px; } /* WooCommerce impone width:48% y float:right a .cart_totals con `.woocommerce .cart-collaterals .cart_totals`, que gana por especificidad. Hay que igualarla, no añadir !important. Sin esto, en móvil la caja queda a 154px con una tabla de 192 dentro y se sale de su propia caja. */ .shop-flow .cart-collaterals .cart_totals, .woocommerce .shop-flow .cart-collaterals .cart_totals { width: 100%; float: none; } .shop-flow .cart_totals { padding: 24px; border: 1px solid var(--hair); border-radius: var(--r-l); background: var(--surface); } .shop-flow .cart_totals h2 { font-family: var(--serif); font-weight: 300; font-size: 24px; margin-bottom: 14px; } .shop-flow .cart_totals table { width: 100%; border-collapse: collapse; } .shop-flow .cart_totals th, .shop-flow .cart_totals td { padding: 11px 0; text-align: left; border-bottom: 1px solid var(--hair); font-size: 15px; } .shop-flow .cart_totals th { font-weight: 400; color: var(--ink-2); } .shop-flow .cart_totals td { text-align: right; font-variant-numeric: tabular-nums; } .shop-flow .cart_totals .order-total th, .shop-flow .cart_totals .order-total td { border-bottom: 0; padding-top: 14px; } .shop-flow .cart_totals .order-total td { font-family: var(--serif); font-size: 22px; } /* En un móvil el botón de pagar quedaba a 931 px del inicio: detrás de las líneas, del cupón y de «actualizar carrito». El resumen sube al principio, que es lo que se mira antes de decidir, y el detalle queda debajo. Anclarlo al pie como en la ficha no vale aquí: allí el botón está arriba y se pasa de largo; aquí está abajo y no se ha llegado todavía. */ .shop-flow .cart-collaterals { display: grid; gap: 18px; } .shop-flow .wc-proceed-to-checkout { padding-top: 16px; } @media (max-width: 899px) { .woocommerce-cart .shop-flow > .woocommerce { display: flex; flex-direction: column; } .woocommerce-cart .shop-flow .cart-collaterals { order: -1; margin-bottom: 28px; } .woocommerce-cart .shop-flow .cart_totals h2 { font-size: 20px; } } @media (min-width: 900px) { .shop-flow .cart-collaterals { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); justify-content: end; } } @media (min-width: 900px) { .shop-flow .cart_totals { grid-column: 2; } } .shop-flow .shipping-calculator-form { margin-top: 10px; font-size: 14px; } /* ---------- Contacto: las cuatro vías, y luego el formulario ---------- */ .contact-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .contact-ways > li { display: grid; grid-template-rows: auto 1fr; gap: 8px; } /* las cuatro tarjetas, misma altura y misma línea */ .contact-way { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--r-l); border: 1px solid var(--hair); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color var(--t-fast) var(--ease); } .contact-way:hover { border-color: var(--hair-2); } .contact-way b { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.15; } .contact-way small { font-size: 13px; color: var(--ink-3); line-height: 1.4; } .contact-way svg { width: 20px; height: 20px; fill: none; stroke: var(--forest); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 2px; } .contact-way svg.is-fill { fill: var(--forest); stroke: none; } /* WhatsApp es un logotipo relleno; el resto, iconos de trazo */ .contact-aside { display: grid; gap: 16px; align-content: start; } .contact-aside h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.6vw, 30px); } .contact-aside .checks { display: grid; gap: 12px; } .contact-aside .checks b { font-weight: 500; } .contact-form h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 18px; } .field > span i { font-style: normal; color: var(--ink-3); font-weight: 400; } .contact-done { display: grid; gap: 14px; justify-items: start; } .contact-done h2 { margin: 0; } .contact-done p { color: var(--ink-2); max-width: 46ch; } .contact-done-alt { font-size: 14.5px; } /* ---------- Gracias por tu compra ---------- */ .thanks { display: grid; gap: clamp(20px, 3vw, 30px); max-width: 720px; } .thanks-head { display: grid; gap: 10px; } .thanks-head h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; } .thanks-head p { color: var(--ink-2); font-weight: 300; font-size: 17px; max-width: 52ch; } .thanks-head b { font-weight: 500; color: var(--ink); } .thanks-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: paso; } .thanks-steps li { display: grid; gap: 2px; padding: 16px 0 16px 46px; position: relative; border-top: 1px solid var(--hair); } .thanks-steps li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 14px; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--mist); color: var(--ink-2); font-size: 13px; font-weight: 500; } .thanks-steps li:first-child::before { background: var(--lime-soft); color: var(--emerald); } .thanks-steps b { font-weight: 500; } .thanks-steps span { color: var(--ink-2); font-size: 14.5px; } .thanks-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-l); padding: clamp(18px, 2.4vw, 24px); display: grid; gap: 12px; } .thanks-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .thanks-items li { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; } .thanks-items b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .thanks-total { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--hair); } .thanks-total b { font-family: var(--serif); font-weight: 400; font-size: 22px; } .thanks-meta { font-size: 13px; color: var(--ink-3); } .thanks-help { background: var(--mist); border-color: transparent; } .thanks-help h3 { font-size: 17px; } .thanks-help p { color: var(--ink-2); font-size: 14.5px; max-width: 54ch; } .thanks-actions { display: flex; gap: 10px; flex-wrap: wrap; } .thanks-actions .btn { padding: 12px 20px; font-size: 14px; } .thanks-final { padding-top: 4px; } .thanks-final .btn { padding: 15px 24px; font-size: 15px; } /* ---------- Pago en tres pasos ---------- El formulario del pago es una rejilla de dos columnas: datos a la izquierda, resumen a la derecha. Con los pasos, todo el contenido vive en uno solo, así que ocupa el ancho entero y la rejilla vieja —ya vacía— desaparece. */ .shop-flow form.checkout:has(.ck-steps) { display: block; } .shop-flow form.checkout:has(.ck-steps) > .col2-set { display: none; } .ck-steps { max-width: 760px; } El formulario sigue siendo uno; esto solo enseña un tercio cada vez. */ .ck-track { list-style: none; margin: 0 0 6px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; } .ck-track li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); } .ck-track li + li::before { content: ""; width: 18px; height: 1px; background: var(--hair-2); } .ck-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--hair-2); font-size: 12px; } .ck-track li.is-now { color: var(--ink); font-weight: 500; } .ck-track li.is-now .ck-n { background: var(--emerald); border-color: var(--emerald); color: var(--btn-ink); } .ck-track li.is-done .ck-n { background: var(--mist); } .ck-total { margin: 0 0 22px; font-family: var(--serif); font-size: 20px; color: var(--ink); } .ck-step[hidden] { display: none; } .ck-nav { display: flex; gap: 12px; align-items: center; margin-top: 24px; } .ck-nav .ck-next { margin-left: auto; } .ck-nav[hidden] { display: none; } @media (max-width: 599px) { .ck-track li span:last-child { display: none; } .ck-track li.is-now span:last-child { display: inline; } .ck-nav .ck-next { width: 100%; justify-content: center; } .ck-nav { flex-wrap: wrap; } } /* Carrito vacío (2026-09-21): siguiente paso en vez de un botón suelto. */ .cart-empty-next { display: grid; gap: 22px; margin-top: 8px; } .cart-empty-lead { font-size: 16.5px; font-weight: 300; color: var(--ink-2); max-width: 60ch; } .cart-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; } .cart-empty-h { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.4vw, 28px); margin-top: clamp(18px, 3vw, 32px); } .shop-flow .return-to-shop { display: none; } /* lo sustituye «Ver la tienda» */ /* Cuenta y carrito con banda de cabecera: el contenido empieza con aire, sin título propio. */ .shop-flow-page.has-hero { padding-top: clamp(28px, 4vw, 48px); } /* Registro: la nota legal de WooCommerce, en pequeño y aparte del texto principal. */ .shop-flow .woocommerce-privacy-policy-text p { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 10px; } /* Dentro del carrito los enlaces van en verde; las tarjetas conservan su tinta de siempre. */ .shop-flow .cart-empty-next a.card, .shop-flow .cart-empty-next a.card:hover { color: var(--ink); text-decoration: none; } /* Datos de la transferencia (página de gracias). Sustituye la lista de WooCommerce con separadores discontinuos por una tarjeta de filas etiqueta / valor (2026-09-22). */ .shop-flow .woocommerce-bacs-bank-details { margin: clamp(20px, 3vw, 28px) 0; padding: 22px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--hair); } .shop-flow .woocommerce-bacs-bank-details .wc-bacs-bank-details-heading { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.4vw, 26px); margin: 0 0 4px; } .shop-flow .woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name { font-size: 15px; color: var(--ink-2); margin: 0 0 10px; } .shop-flow ul.wc-bacs-bank-details.order_details { list-style: none; margin: 0; padding: 0; display: grid; } .shop-flow ul.wc-bacs-bank-details.order_details li { float: none; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 110px 1fr auto; gap: 4px 16px; align-items: baseline; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--ink-3); line-height: 1.4; } .shop-flow ul.wc-bacs-bank-details.order_details li:first-child { border-top: 0; } .shop-flow ul.wc-bacs-bank-details.order_details li strong { font-size: 15.5px; font-weight: 500; color: var(--ink); text-transform: none; word-break: break-word; } .shop-flow ul.wc-bacs-bank-details.order_details li.iban strong { font-variant-numeric: tabular-nums; letter-spacing: .02em; } .shop-flow ul.wc-bacs-bank-details.order_details li.dafa_concept strong { color: var(--forest); } .bacs-copy { border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font: 500 12.5px var(--sans); cursor: pointer; } .bacs-copy:hover { border-color: var(--ink-3); color: var(--ink); } .bacs-copy.is-done { border-color: var(--emerald); color: var(--emerald); } @media (pointer: coarse) { .bacs-copy { min-height: 40px; } } @media (max-width: 520px) { .shop-flow ul.wc-bacs-bank-details.order_details li { grid-template-columns: 1fr auto; } .shop-flow ul.wc-bacs-bank-details.order_details li strong { grid-column: 1 / -1; grid-row: 2; } .shop-flow ul.wc-bacs-bank-details.order_details li .bacs-copy { grid-column: 2; grid-row: 1; justify-self: end; } } /* Botones principales del flujo de compra: su tinta clara en cualquier estado (enlace ya visitado, pulsado o con el ratón encima), por encima de cualquier regla de enlaces. */ .shop-flow a.btn-main, .shop-flow a.btn-main:visited, .shop-flow a.btn-main:hover, .shop-flow a.btn-main:active, .shop-flow a.btn-main:focus { color: var(--btn-ink); } /* ---------- guía de grados (29/09/2026) ---------- */ /* Dos aclaraciones que cierran su bloque: van en tono secundario para que no compitan con la lista de grados ni con la de «siempre». */ .always-note { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink-2); font-weight: 300; } .split-note { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); font-weight: 300; } /* ---- shop.css ---- */ /* Shop: model cards, archive, model page with configuration selector, Woo notices. */ /* ---------- cards ---------- */ .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3vw, 40px) clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .card { display: grid; gap: 14px; text-decoration: none; color: inherit; align-content: start; } /* Escritorio: las tarjetas de una fila miden lo mismo y el pie (precio · grados) se apoya abajo, así los precios quedan en línea aunque un nombre ocupe dos líneas. */ @media (min-width: 601px) { .cards > li > .card { height: 100%; grid-template-rows: auto 1fr auto; } } .card .shot { aspect-ratio: 1 / 1; border-radius: var(--r-l); position: relative; overflow: hidden; background: radial-gradient(80% 60% at 50% 88%, var(--mist), var(--surface) 72%); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(18, 22, 20, .04); } .card .shot svg { width: 74%; transition: transform var(--t-panel) var(--ease); } .card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-panel) var(--ease); } /* El año era blanco con una sombra negra difusa: se leía sobre cualquier foto, pero metía en la tarjeta una sombra que no está en ninguna otra parte del diseño. Ahora lleva el mismo óvalo claro que «Disponible» al otro lado y el verde oscuro con el que acaban el pie y la portada, así que se lee igual de bien sobre foto clara o oscura y sin recurrir a la sombra (29/09/2026). */ .card .shot:has(img) .year { color: var(--stage-2); background: rgba(245, 246, 244, .9); padding: 1px 9px 3px; border-radius: 999px; } .card .shot:has(img) .avail { background: rgba(245, 246, 244, .9); padding: 4px 8px; border-radius: 999px; } @media (hover: hover) and (pointer: fine) { .card:hover .shot svg, .card:hover .shot img { transform: translateY(-4px) scale(1.015); } } .card .avail { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); } .card .avail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); } .card .year { position: absolute; top: 12px; right: 14px; font-family: var(--serif); font-size: 19px; color: var(--ink-3); } .card.sold .avail { color: var(--ink-3); } .card.sold .avail::before { background: var(--hair-2); } .card h2 { font-size: 17px; } .card .cfg { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 4px; min-height: 1.6em; } .card .foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--hair); padding-top: 12px; } .card .price { font-size: 17px; font-weight: 500; } .card .price small { font-weight: 300; color: var(--ink-3); font-size: 13px; margin-right: 4px; } .card .grades { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: .06em; } .card.sold .price { color: var(--ink-3); font-weight: 400; font-size: 14px; } @media (max-width: 600px) { .cards { grid-template-columns: 1fr 1fr; gap: 28px 12px; } .card { gap: 10px; } .card .shot { border-radius: var(--r); } .card .avail { top: 10px; left: 10px; font-size: 11px; letter-spacing: .03em; } .card .avail { white-space: nowrap; } .card .avail-more { display: none; } .card .year { top: auto; bottom: 6px; right: 10px; font-size: 17px; } .card h2 { font-size: 14.5px; } .card .cfg { font-size: 12px; } .card .foot { flex-direction: column; gap: 2px; padding-top: 8px; } .card .price, .card.sold .price { font-size: 13px; } } /* ---------- archive ---------- */ .shop-body { padding-block: clamp(36px, 5vw, 64px); } .filterbar[hidden] { display: none; } .filterbar { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--hair); margin-bottom: clamp(28px, 4vw, 40px); } .filterbar a { font-size: 14.5px; text-decoration: none; color: var(--ink-3); padding: 4px 0; border-bottom: 1px solid transparent; transition: color var(--t-ui) var(--ease); } /* Con el dedo, «Todo» medía 32x32: el subrayado no puede marcar la altura de la diana. El relleno la sube a 44 sin mover la línea. */ @media (pointer: coarse) { .filterbar a { padding: 12px 0; } } .filterbar a:hover { color: var(--ink); } .filterbar a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); } .cat-tabs { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; min-width: 0; } /* Móvil: una sola fila que se desliza, con un fundido a la derecha que avisa de que hay más. Antes las pestañas bajaban a una segunda línea con «Lenovo» sola. */ @media (max-width: 700px) { .filterbar { flex-wrap: nowrap; gap: 16px; } .cat-tabs { flex: 1 1 auto; flex-wrap: nowrap; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; padding-right: 28px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); } .cat-tabs::-webkit-scrollbar { display: none; } .cat-tabs a { flex: none; white-space: nowrap; scroll-snap-align: start; } .filterbar .count { flex: none; } } .filterbar .count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .woocommerce-ordering select { appearance: none; border: 1px solid var(--hair-2); border-radius: 999px; background: transparent; padding: 7px 30px 7px 14px; font-size: 13px; color: var(--ink-2); background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .woocommerce-ordering { margin: 0; } .woocommerce-result-count { display: none; } .empty { padding: 64px 0; text-align: center; color: var(--ink-2); display: grid; gap: 16px; justify-items: center; } .empty h2 { font-size: 34px; color: var(--ink); } .woocommerce-pagination { margin-top: 56px; } .woocommerce-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; justify-content: center; } .woocommerce-pagination a, .woocommerce-pagination span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; font-family: var(--mono); font-size: 13px; text-decoration: none; color: var(--ink-2); border: 1px solid transparent; } .woocommerce-pagination a:hover { border-color: var(--hair-2); } .woocommerce-pagination .current { background: var(--ink); color: var(--page); } /* ---------- model page (compact) ---------- */ .model { padding-block: 20px clamp(48px, 7vw, 96px); } .model-grid { display: grid; gap: clamp(20px, 3vw, 44px); margin-top: 18px; } @media (min-width: 1000px) { .model-grid { grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); align-items: start; } .model-buy { position: sticky; top: calc(var(--header-h) + 16px); } .admin-bar .model-buy { top: calc(var(--header-h) + 48px); } } /* gallery: scroll-snap track (swipe on touch), arrows + thumbs on desktop */ .gallery { display: grid; gap: 10px; min-width: 0; } .gallery-main { position: relative; border-radius: var(--r-xl); overflow: hidden; background: #E9ECE8; } .gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; aspect-ratio: 4 / 3; } .gallery-track::-webkit-scrollbar { display: none; } .gallery-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; place-items: center; } .gallery-slide img { width: 100%; height: 100%; object-fit: cover; } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(245, 246, 244, .88); color: var(--ink); font: 300 26px/1 var(--sans); display: grid; place-items: center; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .35); opacity: 0; transition: opacity var(--t-ui) var(--ease), background var(--t-ui) var(--ease); } .gallery-nav.prev { left: 14px; } .gallery-nav.next { right: 14px; } .gallery-main:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; } @media (hover: none), (pointer: coarse) { .gallery-nav { opacity: 1; } /* nothing to hover with: the controls stay visible */ } .gallery-nav:hover { background: #fff; } .gallery-count { position: absolute; right: 14px; bottom: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(6, 17, 12, .58); color: #fff; font: 400 11px var(--mono); } /* .58 y no .55: sobre foto blanca el óvalo resolvía a #767c79 y el blanco de 11px se quedaba en 4,26:1, por debajo del 4,5:1 que pide la WCAG. Con .58 sale #6F7572 y 4,71:1, mismo óvalo a simple vista. (30/09/2026) */ .gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .gallery-thumbs::-webkit-scrollbar { display: none; } .gallery-thumbs button { flex: 0 0 72px; height: 56px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid transparent; background: var(--mist); cursor: pointer; opacity: .6; transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs button[aria-selected="true"] { opacity: 1; border-color: var(--ink); } .gallery-thumbs button:hover { opacity: 1; } .gallery-note { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--ink-3); } .gallery-empty { aspect-ratio: 4 / 3; display: grid; place-items: center; align-content: center; gap: 8px; background: radial-gradient(85% 65% at 50% 92%, #D6DBD6, #F3F5F2 72%); } .gallery-empty svg { width: 58%; } .gallery-empty span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } /* La lupa. Con ratón se amplía dentro de la caja; con dedo se abre entera y el navegador pone su propio pellizco, que funciona mejor que uno programado. */ .gallery-slide.can-zoom { cursor: zoom-in; } .gallery-slide.can-zoom img { transition: transform var(--t-panel) var(--ease-out); } .gallery-slide.is-zoomed { cursor: zoom-out; } .gallery-slide.is-zoomed img { transform: scale(2.1); } @media (pointer: coarse) { .gallery-slide.is-zoomed img { transform: none; } } .zoomer { position: fixed; inset: 0; z-index: 120; background: rgba(6, 17, 12, .92); display: grid; place-items: center; padding: 20px; overflow: auto; -webkit-overflow-scrolling: touch; animation: dafa-zoom-in var(--t-ui) var(--ease-out) both; } .zoomer img { max-width: 100%; height: auto; touch-action: pinch-zoom; } .zoomer-close { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--chrome); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; } @keyframes dafa-zoom-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .zoomer { animation: none; } .gallery-slide.can-zoom img { transition: none; } } @media (max-width: 999px) { .gallery-main { border-radius: var(--r-l); margin-inline: calc(-1 * var(--gutter) / 2); } .gallery-nav { display: none; } .gallery-thumbs { display: none; } } /* buy card */ .pdp { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-xl); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 18px; } .pdp-head h1 { font-size: clamp(27px, 2.7vw, 36px); line-height: 1.08; } .pdp-facts { margin-top: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); } .axis { border: 0; margin: 0; padding: 0; min-width: 0; } .axis .an { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 0; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-3); } .axis .an a { color: var(--forest); text-decoration: none; border-bottom: 1px solid var(--hair-2); } .opts { display: flex; flex-wrap: wrap; gap: 6px; } .o { display: inline-flex; align-items: baseline; gap: 6px; font: 400 13.5px var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--hair-2); border-radius: 12px; padding: 8px 12px; cursor: pointer; text-align: left; touch-action: manipulation; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-press) var(--ease); } .o:active { transform: scale(.97); } .o:hover { border-color: var(--ink-3); } .o[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .o[data-alt] { color: var(--ink-2); } .o-d { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .o-d:empty { display: none; } .o-d.is-less { color: var(--forest); } .o[aria-pressed="true"] .o-d { display: none; } .opts-grade .o { flex-direction: column; align-items: flex-start; gap: 0; min-width: 76px; padding: 7px 11px; } .opts-grade .o-l { display: flex; align-items: baseline; gap: 6px; } .opts-grade .g { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1; } .opts-grade small { font-size: 12px; color: var(--ink-3); } /* La guía de grados, desplegable, junto al selector: quien compra de segunda mano pregunta «qué significa B+» justo aquí, y mandarlo a otra página en ese momento es perder la venta. */ .grade-help { margin-top: 10px; border-top: 1px solid var(--hair); } .grade-help > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 13.5px; color: var(--ink-2); } .grade-help > summary::-webkit-details-marker { display: none; } .grade-help > summary:hover { color: var(--ink); } .grade-help > summary i { width: 9px; height: 9px; flex: none; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-fast) var(--ease); } .grade-help[open] > summary i { transform: rotate(225deg) translate(-2px, -2px); } .grade-help dl { margin: 0 0 14px; display: grid; gap: 10px; } .grade-help dt { font-size: 13.5px; color: var(--ink); } .grade-help dt b { font-family: var(--serif); font-size: 16px; font-weight: 400; margin-right: 6px; } .grade-help dd { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); font-weight: 300; } .grade-note { font-size: 12.5px; color: var(--ink-2); font-weight: 300; margin-top: 8px; min-height: 1.4em; } .buy { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--hair); } .buy-price { display: grid; gap: 4px; } .buy .p { font-size: 32px; font-weight: 300; letter-spacing: -.03em; line-height: 1; } .buy .st { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; } .buy .st.is-out .dot { background: var(--hair-2); } .buy .btn { padding: 15px 22px; } /* La barra de compra anclada al pie de la pantalla en móvil. Es el mismo nodo que estaba en el formulario: solo cambia de sitio, así que no hay dos precios ni dos botones que puedan discrepar. */ .buy-slot { display: none; } .buy.is-docked + .buy-slot, .buy-slot:not([hidden]) { display: block; } @media (max-width: 900px) { .buy.is-docked { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--chrome); border-top: 1px solid var(--hair); box-shadow: 0 -14px 30px -24px rgba(6, 17, 12, .35); animation: dafa-buy-dock var(--t-panel) var(--ease-out) both; } .buy.is-docked .p { font-size: 22px; } .buy.is-docked .btn { padding: 13px 20px; } } @keyframes dafa-buy-dock { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .buy.is-docked { animation: none; } } .fine { font-size: 12px; color: var(--ink-3); font-weight: 300; margin-top: -8px; } .sold-box { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-l); background: var(--mist); } .sold-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .sold-box p { font-size: 14px; color: var(--ink-2); font-weight: 300; } .sold-had { margin: 0; display: grid; gap: 6px; } .sold-had div { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; border-top: 1px solid var(--hair-2); padding-top: 6px; } .sold-had dt { color: var(--ink-3); } .sold-had dd { margin: 0; font-family: var(--mono); font-size: 12px; text-align: right; } .sold-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; } .pdp-promise { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .pdp-promise li { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--ink-3); line-height: 1.4; } .pdp-promise b { font-weight: 500; color: var(--ink); display: block; font-size: 12.5px; } .pdp-promise svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; } /* specs, folded */ .model-details { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .model-details summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; } .model-details summary::-webkit-details-marker { display: none; } .model-details summary::after { content: "+"; font: 300 24px/1 var(--sans); color: var(--ink-2); transition: transform var(--t-ui) var(--ease); } .model-details[open] summary::after { content: "–"; transform: none; } /* «–» abierto, como las preguntas frecuentes; la «×» parecía cerrar la página */ .md-sum { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .specs { width: 100%; border-collapse: collapse; margin-bottom: 24px; } .specs th, .specs td { text-align: left; padding: 11px 0; border-top: 1px solid var(--hair); vertical-align: top; } .specs th { width: 30%; font-weight: 400; color: var(--ink-3); font-size: 13.5px; } .specs td { font-family: var(--mono); font-size: 13px; color: var(--ink); } /* En móvil el precio y el botón siguen al alcance, pero ya no con `sticky`: pegado al fondo de su tarjeta, el botón se perdía en cuanto empezabas a leer las especificaciones, que es justo cuando decides. Lo lleva `initBuyDock`, que ancla la misma barra al pie de la pantalla. El cristal se fue con el de la cabecera: aquí también la chapa es maciza. */ @media (max-width: 999px) { .buy .p { font-size: 26px; } .buy .btn { padding: 13px 18px; font-size: 14px; } .pdp-promise { grid-template-columns: 1fr; } } /* ---------- WooCommerce notices + generic forms (cart/checkout/account) ---------- */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-notices-wrapper > :last-child { margin-bottom: 0; } .woocommerce-notices-wrapper { margin-bottom: 24px; } /* Notices need air of their own: they land right under the breadcrumbs and used to touch them. One spacing rule for every template that prints them. */ .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 18px 0 24px; padding: 14px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--hair); border-left: 2px solid var(--forest); font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; } .woocommerce-error { border-left-color: var(--danger); } .woocommerce-message .button, .woocommerce-info .button { order: 2; font-size: 13px; color: var(--forest); text-decoration: none; } .woocommerce-store-notice, p.demo_store { display: none !important; } /* Product images (manufacturer shots on white via Icecat): contained, never cropped */ /* Fotos de fabricante: vienen recortadas sobre blanco, cada una con su propio margen. Sin corregirlo, el portátil sale de un tamaño distinto en cada imagen. La escala compensa ese margen para que todas ocupen su caja igual; el recorte del contenedor solo se come el blanco sobrante. */ .gallery.is-product .gallery-main { background: #FFFFFF; } .gallery.is-product .gallery-slide { overflow: hidden; } .gallery.is-product .gallery-slide img { object-fit: contain; object-position: center; padding: 2%; } .gallery.is-product .gallery-thumbs button { background: #FFFFFF; } .gallery.is-product .gallery-thumbs img { object-fit: contain; transform: scale(1.12); } .gallery-note a { color: inherit; } .card .shot img { object-fit: contain; width: 84%; height: 84%; mix-blend-mode: multiply; } .gallery-note > span:last-child { min-width: 0; } /* last units */ .card.is-low .avail { color: var(--amber); } .card.is-low .avail::before { background: var(--amber); } .buy .st.is-low { color: var(--amber); } .buy .st.is-low .dot { background: var(--amber); } /* spec filters under the brand / line bar */ .specbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -12px 0 clamp(28px, 4vw, 40px); } .specbar-l { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; } .specbar .spec select { -webkit-appearance: none; appearance: none; height: auto !important; min-height: 0; width: auto; max-width: 100%; line-height: 1.3; box-shadow: none; appearance: none; font: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer; border: 1px solid var(--hair-2); border-radius: 999px; background-color: var(--surface); padding: 8px 32px 8px 14px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; transition: border-color var(--t-fast) var(--ease); } .specbar .spec select:hover { border-color: var(--ink-3); } .specbar .spec select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; } .specbar .spec.is-on select { background-color: var(--emerald); border-color: var(--emerald); color: var(--stage-ink); background-image: linear-gradient(45deg, transparent 50%, var(--stage-ink) 50%), linear-gradient(135deg, var(--stage-ink) 50%, transparent 50%); } /* `hidden` lo pone ui.js cuando el script ya aplica los filtros solo, pero `.btn` trae `display: inline-flex` y gana al `display: none` del atributo: el botón seguía en pantalla pidiendo un clic que no hacía falta. */ .specbar-apply[hidden] { display: none; } /* El filtro puesto y su «×» son un solo control: el desplegable ya dice cuál es, así que la píldora aparte con el mismo texto sobraba. */ .spec-pair { display: inline-flex; align-items: center; } .spec-pair .spec.is-on select { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 30px; } .spec-off { display: inline-flex; align-items: center; justify-content: center; width: 34px; align-self: stretch; min-height: 38px; border-radius: 0 999px 999px 0; background: var(--emerald); color: var(--stage-ink); border: 1px solid var(--emerald); border-left: 1px solid rgba(238, 242, 238, .28); transition: background var(--t-fast) var(--ease); } .spec-off:hover { background: var(--stage-1); border-color: var(--stage-1); } .spec-off i { position: relative; width: 10px; height: 10px; } .spec-off i::before, .spec-off i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; border-radius: 2px; } .spec-off i::before { transform: rotate(45deg); } .spec-off i::after { transform: rotate(-45deg); } /* Con el dedo, el desplegable y su «×» miden lo mismo (44 px): antes la × crecía a 44 y el desplegable se quedaba en 40, y el par parecía dos piezas sueltas. */ @media (pointer: coarse) { .specbar .spec select { min-height: 44px; } .spec-off { min-height: 44px; width: 40px; } } .specbar-clear { font-size: 13px; color: var(--ink-2); margin-left: 4px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 600px) { .specbar-l { width: 100%; } .spec { flex: 1 1 calc(50% - 10px); } .specbar .spec select { width: 100%; } } /* simple products (accessories): price, quantity, add to cart */ .buy-simple { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; } .buy-simple .qty input { width: 72px; height: 46px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--surface); text-align: center; font: inherit; font-size: 15px; color: var(--ink); } .buy-simple .qty input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; } @media (max-width: 520px) { .buy-simple { grid-template-columns: 1fr auto; } .buy-simple .btn { grid-column: 1 / -1; justify-content: center; } } /* presentation text above the spec sheet */ .model-intro { margin-top: clamp(30px, 4.5vw, 56px); display: grid; gap: 14px; } @media (min-width: 900px) { .model-intro { grid-template-columns: 200px minmax(0, 70ch); gap: 40px; align-items: start; } } .model-intro .eyebrow { margin: 0; font-size: 12px; } .model-intro .prose p { margin: 0 0 14px; color: var(--ink-2); font-weight: 300; font-size: 16.5px; line-height: 1.65; } .model-intro .prose p:last-child { margin-bottom: 0; } .model-intro + .model-details { margin-top: clamp(26px, 3.5vw, 40px); } /* ---------- buy card: price first, then the choice, then the button ---------- */ .pdp-price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--hair); } .pdp-price .p { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.6vw, 42px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .pdp-price .st { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; } .pdp-price .st.is-out { color: var(--ink-3); } .pdp-price .st.is-out .dot, .pdp-price .st.is-low .dot { background: var(--hair-2); } .pdp-price .st.is-low { color: var(--amber); } .pdp-price .st.is-low .dot { background: var(--amber); } .buy { display: grid; gap: 10px; } .buy .btn { width: 100%; justify-content: center; padding: 16px 22px; } .buy-mini { display: none; align-items: baseline; gap: 10px; } .buy-mini .p { font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; } /* grade chips: five steps of wear, A full, C the least */ .opts-grade .o { gap: 4px; min-width: 128px; align-items: stretch; } .opts-grade .o-l { flex-wrap: wrap; white-space: nowrap; row-gap: 5px; } .opts-grade .gm { flex-basis: 100%; margin-top: 1px; } .opts-grade small { white-space: nowrap; } .gm { display: flex; gap: 3px; width: 100%; margin-top: 2px; } .gm i { flex: 1; height: 2px; border-radius: 2px; background: var(--hair-2); } .gm i.on { background: var(--ink-3); } .o[aria-pressed="true"] .gm i { background: rgba(238, 242, 238, .35); } .o[aria-pressed="true"] .gm i.on { background: var(--lime); } /* what every machine includes: out of the buy card, quiet strip under it */ .model-assure { list-style: none; margin: clamp(26px, 3.5vw, 40px) 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 24px; border-top: 1px solid var(--hair); } .model-assure li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-3); font-size: 13px; line-height: 1.45; } .model-assure b { display: block; color: var(--ink); font-weight: 500; font-size: 14px; } .model-assure svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; } @media (max-width: 999px) { .buy { grid-template-columns: auto 1fr; align-items: center; } .buy-mini { display: flex; } .buy .btn { padding: 13px 18px; font-size: 14px; } } /* ---------- Comparador ---------- La casilla vive sobre la tarjeta, fuera de su enlace. La barra inferior y la tabla usan la chapa del sitio: nada nuevo, solo piezas conocidas. */ .cards > li { position: relative; } .card-cmp { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--hair-2); border-radius: 999px; background: rgba(255, 255, 255, .92); font: 500 12px var(--sans); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .cards > li:hover .card-cmp, .card-cmp:focus-visible, .card-cmp.is-on { opacity: 1; } @media (hover: none) { .card-cmp { opacity: 1; } } .card-cmp i { width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 4px; flex: none; } .card-cmp.is-on { background: var(--emerald); border-color: var(--emerald); color: var(--btn-ink); } .card-cmp.is-on i { background: currentColor; } .card-cmp:disabled { opacity: .35; cursor: not-allowed; } @media (pointer: coarse) { .card-cmp { min-height: 44px; } } /* En móvil la tarjeta mide ~160 px: la casilla y la etiqueta de existencias no caben juntas sobre la foto. Allí la casilla baja al pie de la tarjeta. */ @media (max-width: 600px) { .cards > li:has(.card-cmp) { display: flex; flex-direction: column; } .card-cmp { position: static; order: 2; margin-top: 12px; align-self: flex-start; } } .cmp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--chrome); border-top: 1px solid var(--hair); box-shadow: 0 -14px 30px -24px rgba(6, 17, 12, .35); animation: dafa-buy-dock var(--t-panel) var(--ease-out) both; } /* `hidden` pierde contra el display:flex de arriba: sin esto la barra salía siempre, con «0 modelos elegidos». */ .cmp-bar[hidden] { display: none; } .cmp-list { font-size: 14px; color: var(--ink-2); margin-right: auto; } .cmp-go.is-disabled { opacity: .45; pointer-events: none; } .cmp-clear { border: 0; background: none; color: var(--ink-3); font-size: 13.5px; cursor: pointer; min-height: 44px; } body.has-cmp .site-footer { padding-bottom: 72px; } .compare { margin-bottom: clamp(28px, 4vw, 44px); } .compare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .compare-head h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 3vw, 30px); } .compare-clear { font-size: 13.5px; color: var(--ink-2); } .compare-scroll { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r-l); background: var(--surface); } .compare table { width: 100%; border-collapse: collapse; min-width: 540px; } .compare th, .compare td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; font-size: 14px; } .compare thead th { vertical-align: bottom; } .compare thead a { display: grid; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 500; } .compare thead img { width: 100%; max-width: 120px; height: auto; border-radius: 10px; background: var(--mist); } .compare thead b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 18px; } .compare tbody th { font-weight: 400; color: var(--ink-3); width: 30%; } .compare tbody td { font-variant-numeric: tabular-nums; } .compare tr.is-same td, .compare tr.is-same th { color: var(--ink-3); } .compare-note { margin-top: 10px; font-size: 13px; color: var(--ink-3); } /* Texto de marca debajo del listado (2026-09-21): el texto entero de la categoría. */ .term-about { margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 68ch); gap: 16px clamp(24px, 5vw, 72px); } .term-about h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; } .term-about p { font-size: 16.5px; line-height: 1.65; font-weight: 300; color: var(--ink-2); } @media (max-width: 760px) { .term-about { grid-template-columns: 1fr; } } /* Aviso del color, junto al botón de compra (23/09/2026). */ .buy-color { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); display: flex; gap: 8px; } .buy-color::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--forest-lg); } /* El aviso de «sin unidades» lleva dos acciones desde el 30/09/2026: avisar y ver lo que hay. */ .empty .actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: center; } /* Modelos parecidos al final de la ficha (01/10/2026): separados del contenido por una línea, para que se lean como un cierre y no como parte de la ficha. */ .related { border-top: 1px solid var(--hair); margin-top: clamp(32px, 5vw, 56px); } /* ---- home.css ---- */ /* Home only: product-lit hero with inspection readouts, stock-driven blocks, process steps. */ /* ---------- hero ---------- */ .home-stage .stage-in { min-height: min(760px, calc(100svh - 40px)); } .home-stage h1 { font-size: clamp(44px, 6.4vw, 92px); letter-spacing: -.015em; } @media (min-width: 960px) { .home-stage .stage-in { grid-template-columns: .9fr 1.1fr; } } .home-visual { position: relative; width: 100%; max-width: 720px; justify-self: center; aspect-ratio: 1 / .82; display: grid; place-items: center; } .hv-glow { position: absolute; inset: 4% 2% 10%; border-radius: 50%; pointer-events: none; background: radial-gradient(50% 50% at 50% 55%, rgba(207, 231, 181, .20), rgba(155, 205, 99, .06) 45%, transparent 70%); animation: hv-breathe 7s ease-in-out infinite; } .hv-glow::before, .hv-glow::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px solid rgba(238, 242, 238, .08); } .hv-glow::after { inset: -6%; border-color: rgba(238, 242, 238, .05); } .hv-product { position: relative; width: 92%; height: auto; display: block; filter: drop-shadow(0 50px 60px rgba(0, 0, 0, .55)) drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); animation: hv-in .8s var(--ease) both, hv-float 9s ease-in-out .8s infinite; } .hv-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; color: var(--stage-ink); background: rgba(12, 36, 25, .55); border: 1px solid rgba(238, 242, 238, .14); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); opacity: 0; animation: hv-chip .52s var(--ease) forwards; } .hv-chip b { display: block; font-weight: 500; font-size: 15px; line-height: 1.1; font-variant-numeric: tabular-nums; } .hv-chip .k { display: block; font-size: 12px; color: var(--stage-ink-2); letter-spacing: .02em; } .hv-battery { top: 8%; left: -2%; display: grid; gap: 4px; min-width: 168px; animation-delay: .7s; } .hv-battery b { font-family: var(--serif); font-weight: 300; font-size: 30px; } .hv-battery .meter { display: block; height: 4px; border-radius: 4px; background: rgba(238, 242, 238, .12); overflow: hidden; margin-top: 4px; } .hv-battery .meter i { display: block; height: 100%; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--lime), var(--lime-soft)); transform-origin: left; animation: hv-meter 1.1s var(--ease) .8s both; } .hv-tests { right: -3%; top: 58%; animation-delay: 1.05s; } .hv-tests .tick { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(155, 205, 99, .16); } .hv-tests .tick svg { width: 17px; height: 17px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hv-grade { left: 10%; bottom: 6%; animation-delay: 1.4s; } .hv-grade .letter { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(207, 231, 181, .35); color: var(--lime-soft); } @keyframes hv-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes hv-breathe { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } @keyframes hv-chip { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes hv-meter { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 959px) { .home-stage .stage-in { min-height: 0; } .home-visual { max-width: 520px; margin-top: 10px; } .hv-chip { padding: 9px 12px; gap: 9px; border-radius: 12px; } .hv-battery { min-width: 128px; left: 0; top: 2%; } .hv-battery b { font-size: 22px; } .hv-tests { right: 0; top: 50%; } .hv-grade { left: 4%; bottom: 0; } .hv-grade .letter { width: 34px; height: 34px; font-size: 26px; } .hv-chip b { font-size: 13.5px; } .hv-chip .k { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .hv-product, .hv-glow, .hv-chip, .hv-battery .meter i { animation: none; opacity: 1; } } /* ---------- on sale now ---------- */ .sec.sec-flush { padding-top: 0; } .home-cards .card .shot { background: #FFFFFF; } .home-cards.count-1 { grid-template-columns: minmax(0, 520px); justify-content: center; } .home-cards.count-2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; } .home-cards.count-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } @media (max-width: 700px) { .home-cards.count-2 { grid-template-columns: 1fr; } } /* ---------- brands with stock ---------- */ .brand-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; } .brand-tile { align-self: start; } .brand-tile { display: grid; grid-template-rows: auto auto; text-decoration: none; color: inherit; overflow: hidden; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--hair); transition: border-color var(--t-ui) var(--ease), transform var(--t-panel) var(--ease), box-shadow var(--t-panel) var(--ease); } .brand-tile:hover { border-color: var(--hair-2); box-shadow: 0 30px 50px -34px rgba(18, 22, 20, .35); } @media (hover: hover) and (pointer: fine) { .brand-tile:hover { transform: translateY(-3px); } } .bt-img { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: #FFFFFF; overflow: hidden; } .bt-img img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; transition: transform var(--t-panel) var(--ease); } .bt-img img.is-cut { filter: drop-shadow(0 18px 18px rgba(18, 22, 20, .18)); } .bt-img svg { width: 60%; } .brand-tile:hover .bt-img img { transform: scale(1.04); } .bt-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px 16px; border-top: 1px solid var(--hair); } .bt-name { font-family: var(--serif); font-size: 22px; line-height: 1; } .bt-n { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; } .bt-n .arr { color: var(--ink); display: inline-block; transition: transform var(--t-ui) var(--ease); } .brand-tile:hover .bt-n .arr { transform: translateX(3px); } /* Móvil: dos columnas en vez de una ficha por pantalla. Si el número es impar, la última (Accesorios) ocupa la fila entera en horizontal: foto a la izquierda. */ @media (max-width: 600px) { .brand-tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .bt-foot { padding: 10px 12px 12px; gap: 4px; } .bt-name { font-size: 18px; } .brand-tile:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 42% 1fr; } .brand-tile:last-child:nth-child(odd) .bt-foot { border-top: 0; border-left: 1px solid var(--hair); justify-content: center; } } /* ---------- how we work ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: s; border-top: 1px solid var(--hair); } .steps li { padding: 28px 24px 8px 0; position: relative; } .steps li + li { padding-left: 24px; border-left: 1px solid var(--hair); } .steps .n { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1; color: var(--forest-lg); font-variant-numeric: lining-nums; } .steps h3 { font-size: 17px; font-weight: 500; margin: 18px 0 8px; } .steps p { color: var(--ink-2); font-weight: 300; font-size: 14.5px; } @media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } .steps li:nth-child(odd) { padding-left: 0; border-left: 0; } .steps li:nth-child(n+3) { border-top: 1px solid var(--hair); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .steps li { padding-left: 0 !important; border-left: 0 !important; } .steps li + li { border-top: 1px solid var(--hair); } } /* ---------- grades without photo ---------- */ .grades-side .always { position: sticky; top: calc(var(--header-h) + 24px); } /* ---------- second life, text only ---------- */ .second-text .second-head { align-items: end; } .second-text .lead { max-width: 52ch; } /* ---------- facts: five columns ---------- */ @media (min-width: 1100px) { .facts-5 { grid-template-columns: repeat(5, 1fr); } } .facts-5 b { font-size: 26px; } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--hair); max-width: 860px; margin-left: auto; } .faq-item { border-bottom: 1px solid var(--hair); } .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 17px; font-weight: 500; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary i { position: relative; flex: none; width: 14px; height: 14px; } .faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink-2); transition: transform var(--t-ui) var(--ease); } .faq-item summary i::after { transform: rotate(90deg); } .faq-item[open] summary i::after { transform: rotate(0deg); } .faq-item summary:hover span { color: var(--forest); } .faq-item summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; } .faq-item p { margin: -6px 0 22px; color: var(--ink-2); font-weight: 300; max-width: 68ch; } .sec-head .lead a { color: var(--forest); } /* ---------- Logo en el hero y relevo a la barra (21/09/2026) ---------- */ .hero-mark-row { display: flex; justify-content: center; padding-top: clamp(32px, 5vw, 64px); } /* Con el logo arriba, el hero ya no reserva su altura mínima ni el aire de arriba: si no, el título caía a media pantalla. */ .home-stage .hero-mark-row + .stage-in { min-height: 0; padding-top: clamp(28px, 4vw, 48px); } .hero-mark { display: block; height: clamp(96px, 13vw, 176px); width: auto; max-width: 100%; } /* visibility con retardo: mientras está apartado no se alcanza con el tabulador. */ .site-header .header-in > .brand { transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s; } .site-header.logo-in-hero .header-in > .brand { opacity: 0; transform: translateY(6px); pointer-events: none; visibility: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; } @media (prefers-reduced-motion: reduce) { .site-header .header-in > .brand { transition: none; } } /* Enlace a la guía completa, bajo el bloque «en todos los grados» (29/09/2026). */ .grades-more { margin-top: 18px; }