/* ========================================================================== AEREHO · Platera con Doble Vitrina Sistema visual: monocromo frío (grafito, acero, niebla) + un solo acento cobalto. El producto es negro, así que la página no compite con él. REGLAS DEL SISTEMA (mantenlas si editas): · Un solo acento en toda la página: var(--accent) para rellenos y var(--accent-ink) para el mismo acento cuando es texto o icono. · Radios: botones = píldora, tarjetas y fotos = 18px, campos = 12px. · Los bloques oscuros (.ink-block) son un recurso deliberado: ficha técnica y cierre. No agregues más para no romper el ritmo. Paletas alternativas (café, naranja, verde) en temas.css. Se activan con data-tema en la etiqueta . Compáralas en temas.html. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root{ /* Color. Modo claro */ --paper: #F2F5F7; --surface: #FBFCFD; --surface-2: #E9EDF1; --ink: #0C0E11; --ink-soft: #39414C; --steel: #626C79; --line: #D8DEE5; --line-strong:#C3CBD5; --accent: #1F44DB; /* rellenos: botones, fondos, bordes activos */ --accent-ink: #1F44DB; /* el acento cuando es TEXTO o icono sobre fondo claro */ --accent-hover:#16349F; --accent-soft: rgba(31, 68, 219, .09); --on-accent: #FFFFFF; /* texto encima del acento */ /* Bloque oscuro. Constante en ambos modos */ --ink-bg: #0E1116; --ink-bg-2: #171C23; --ink-line: #2A313A; --ink-text: #EDF1F5; --ink-muted: #98A3B0; /* Tipografía */ --font-display: "Outfit", "Segoe UI", system-ui, sans-serif; --font-body: "Manrope", "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Radios */ --r-pill: 999px; --r-card: 18px; --r-field: 12px; /* Sombras, tintadas al fondo, nunca negro puro */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow-md: 0 10px 24px -12px rgba(16, 24, 40, .22); --shadow-lg: 0 28px 60px -28px rgba(16, 24, 40, .32); /* Ritmo */ --gap: 20px; --section-y: clamp(64px, 8vw, 116px); --wrap: 1240px; --ease: cubic-bezier(.16, 1, .3, 1); --z-header: 60; --z-float: 70; --z-dialog: 90; } @media (prefers-color-scheme: dark){ :root{ --paper: #0A0C0F; --surface: #14181D; --surface-2: #1B2027; --ink: #E9EDF2; --ink-soft: #C0C9D3; --steel: #8D97A3; --line: #262C34; --line-strong:#333B45; --accent: #6B87FF; --accent-ink: #8CA3FF; --accent-hover:#8AA0FF; --accent-soft: rgba(107, 135, 255, .14); --on-accent: #070A0F; --ink-bg: #101419; --ink-bg-2: #191E25; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 10px 24px -12px rgba(0, 0, 0, .6); --shadow-lg: 0 28px 60px -28px rgba(0, 0, 0, .75); } } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } /* El atributo hidden del navegador vale display:none, pero cualquier regla nuestra que declare display (flex, grid) le gana por especificidad y el elemento se queda visible. Esto lo arregla de raíz para toda la página. */ [hidden]{ display:none !important; } html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:clamp(15.5px, .95rem + .1vw, 17px); line-height:1.62; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.028em; line-height:1.06; margin:0; text-wrap:balance; } h1{ font-size:clamp(2.3rem, 1.5rem + 3.1vw, 4rem); } h2{ font-size:clamp(1.75rem, 1.2rem + 2.1vw, 2.85rem); } h3{ font-size:clamp(1.05rem, .95rem + .35vw, 1.28rem); line-height:1.25; letter-spacing:-.018em; } p{ margin:0 0 1em; } p:last-child{ margin-bottom:0; } img,svg{ max-width:100%; display:block; } img{ height:auto; } ul{ margin:0; padding:0; list-style:none; } a{ color:inherit; } a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; } .wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; } .wrap-narrow{ width:min(100% - 40px, 820px); } .section{ padding-block:var(--section-y); } .center{ text-align:center; } .hide-sm{ display:none; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:var(--on-accent); padding:12px 20px; border-radius:0 0 var(--r-field) 0; font-weight:600; } .skip-link:focus{ left:0; } .ico{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .ico-xl{ width:44px; height:44px; } /* Encabezados de sección */ .section-head{ max-width:60ch; margin-bottom:clamp(28px, 4vw, 52px); } .section-head.center{ margin-inline:auto; } .section-head p{ color:var(--steel); font-size:1.04em; margin-top:14px; } .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 18px; } /* -------------------------------------------------------------------------- 3. BOTONES -------------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body); font-weight:600; font-size:.96rem; line-height:1; white-space:nowrap; text-decoration:none; padding:14px 24px; border-radius:var(--r-pill); border:1.5px solid transparent; cursor:pointer; transition:background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .16s var(--ease), box-shadow .22s var(--ease); } .btn-sm{ padding:10px 18px; font-size:.88rem; } .btn-lg{ padding:17px 32px; font-size:1.02rem; } .btn-block{ display:flex; width:100%; } .btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-md); } .btn-primary:hover{ background:var(--accent-hover); transform:translateY(-2px); box-shadow:var(--shadow-lg); } .btn-primary:active{ transform:translateY(0) scale(.985); } .btn-outline{ border-color:var(--line-strong); color:var(--ink); background:transparent; } .btn-outline:hover{ border-color:var(--ink); background:var(--surface); transform:translateY(-2px); } .btn-outline:active{ transform:translateY(0) scale(.985); } .btn-ghost{ color:var(--ink-soft); background:transparent; } .btn-ghost:hover{ background:var(--surface-2); color:var(--ink); } .btn-ghost-light{ color:var(--ink-text); border-color:rgba(255,255,255,.28); background:transparent; } .btn-ghost-light:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); transform:translateY(-2px); } .link-btn{ background:none; border:0; padding:0; margin-top:18px; cursor:pointer; font:inherit; font-size:.92rem; color:var(--steel); text-decoration:underline; text-underline-offset:3px; } .link-btn:hover{ color:var(--ink); } .round-btn{ width:46px; height:46px; border-radius:var(--r-pill); border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:border-color .2s var(--ease), transform .16s var(--ease), background-color .2s var(--ease); } .round-btn:hover{ border-color:var(--ink); transform:translateY(-2px); } .round-btn:active{ transform:translateY(0) scale(.95); } /* -------------------------------------------------------------------------- 4. BARRA SUPERIOR Y ENCABEZADO -------------------------------------------------------------------------- */ .topbar{ background:var(--ink-bg); color:var(--on-accent); text-align:center; padding:9px 20px; } .topbar p{ margin:0; font-size:12px; letter-spacing:.005em; } .site-header{ position:sticky; top:0; z-index:var(--z-header); background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease); } .site-header.stuck{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); } .header-inner{ display:flex; align-items:center; gap:20px; height:70px; } .site-header.stuck .header-inner{ height:62px; transition:height .28s var(--ease); } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-display); } .brand-mark{ width:32px; height:32px; border-radius:9px; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-weight:700; font-size:17px; letter-spacing:-.02em; } .brand-word{ font-size:1.24rem; font-weight:700; letter-spacing:-.03em; } .site-nav{ display:none; margin-left:auto; gap:30px; } .site-nav a{ text-decoration:none; font-size:.93rem; font-weight:500; color:var(--ink-soft); position:relative; padding-block:4px; transition:color .2s var(--ease); } .site-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); } .site-nav a:hover{ color:var(--ink); } .site-nav a:hover::after{ transform:scaleX(1); } /* -------------------------------------------------------------------------- 5. HERO -------------------------------------------------------------------------- */ .hero{ padding-top:clamp(32px, 5vw, 72px); padding-bottom:clamp(40px, 5vw, 72px); position:relative; } .hero::before{ content:""; position:absolute; inset:0 0 auto; height:70%; background:radial-gradient(90% 120% at 78% 8%, var(--accent-soft), transparent 62%); pointer-events:none; } .hero-grid{ position:relative; display:grid; gap:clamp(28px, 4vw, 56px); align-items:center; } .hero-copy .lead{ font-size:clamp(1.05rem, .98rem + .4vw, 1.24rem); color:var(--ink-soft); max-width:36ch; margin-top:20px; } .hero-buy{ margin-top:clamp(26px, 3vw, 38px); } .price-inline{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; } .price-now{ font-family:var(--font-display); font-size:clamp(2rem, 1.5rem + 1.6vw, 2.7rem); font-weight:700; letter-spacing:-.035em; line-height:1; } .price-before{ color:var(--steel); text-decoration:line-through; font-size:1.05rem; } .tag-off{ background:var(--accent-soft); color:var(--accent-ink); font-size:.78rem; font-weight:700; letter-spacing:.02em; padding:6px 12px; border-radius:var(--r-pill); } .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; } .hero-media{ margin:0; position:relative; } .hero-media img{ width:100%; border-radius:var(--r-card); background:var(--surface-2); box-shadow:var(--shadow-lg); } /* -------------------------------------------------------------------------- 6. BARRA DE CONFIANZA -------------------------------------------------------------------------- */ .trust{ border-block:1px solid var(--line); background:var(--surface); } .trust-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2px 20px; padding-block:26px; } .trust-item{ display:flex; align-items:flex-start; gap:12px; padding-block:10px; } .trust-item .ico{ color:var(--accent-ink); margin-top:2px; } .trust-item p{ margin:0; font-size:.88rem; color:var(--steel); line-height:1.4; } .trust-item strong{ display:block; color:var(--ink); font-size:.96rem; font-weight:600; } /* -------------------------------------------------------------------------- 7. SPLIT (problema / solución) -------------------------------------------------------------------------- */ .split-grid{ display:grid; gap:clamp(28px, 4vw, 60px); align-items:center; } .split-media{ margin:0; } .split-media img{ width:100%; border-radius:var(--r-card); background:var(--surface-2); box-shadow:var(--shadow-md); } .split-copy p{ color:var(--ink-soft); margin-top:18px; } .split-copy h2 + p{ margin-top:22px; } .check-list{ display:grid; gap:12px; margin-top:26px; } .check-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.98rem; color:var(--ink); } .check-list .ico{ color:var(--accent-ink); width:20px; height:20px; margin-top:3px; } /* -------------------------------------------------------------------------- 8. BENTO -------------------------------------------------------------------------- */ .bento{ display:grid; grid-template-columns:1fr; gap:14px; } .bento-cell{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease); } .bento-cell:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:var(--shadow-md); } .bento-cell figure{ margin:0; overflow:hidden; background:var(--surface-2); } .bento-cell figure img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .bento-cell:hover figure img{ transform:scale(1.035); } .bento-text{ padding:24px 24px 26px; } .bento-text p{ color:var(--steel); font-size:.94rem; margin-top:10px; } .bento-cell.tinted{ background:var(--surface-2); } .bento-cell.accent{ background:var(--accent); border-color:var(--accent-ink); color:var(--on-accent); justify-content:center; } .bento-cell.accent .bento-text p{ color:color-mix(in srgb, var(--on-accent) 82%, transparent); } .bento-metric{ margin-top:22px; font-family:var(--font-display); font-weight:600; font-size:1rem; } .bento-metric .num{ font-size:2.5rem; letter-spacing:-.04em; margin-right:6px; } /* -------------------------------------------------------------------------- 9. BLOQUE OSCURO: MEDIDAS -------------------------------------------------------------------------- */ .ink-block{ background:var(--ink-bg); color:var(--ink-text); } .ink-block h2,.ink-block h3{ color:var(--ink-text); } .ink-block .section-head p{ color:var(--ink-muted); } .specs-grid{ display:grid; gap:clamp(24px, 3vw, 44px); align-items:start; } .specs-diagram{ margin:0; background:var(--ink-bg-2); border:1px solid var(--ink-line); border-radius:var(--r-card); padding:26px 20px 18px; } .specs-diagram svg{ width:100%; height:auto; color:var(--ink-text); opacity:.9; } .specs-diagram figcaption{ margin-top:14px; text-align:center; font-size:.84rem; color:var(--ink-muted); } /* En móvil cada medida ocupa una fila completa. En escritorio, alto y ancho van a la par y el fondo de 28 cm cruza las dos columnas. */ .specs-list{ display:grid; grid-template-columns:1fr; gap:14px; } .spec-card{ background:var(--ink-bg-2); border:1px solid var(--ink-line); border-radius:var(--r-card); padding:22px; } .spec-value{ font-family:var(--font-display); font-size:clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight:700; letter-spacing:-.04em; line-height:1; margin:0; } .spec-label{ margin:8px 0 0; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); } .spec-note{ margin:14px 0 0; font-size:.88rem; color:var(--ink-muted); line-height:1.5; } @media (min-width: 640px){ .specs-list{ grid-template-columns:repeat(2, 1fr); } .spec-card.wide, .spec-card.materials{ grid-column:1 / -1; } } .spec-materials{ margin:12px 0 0; font-size:.95rem; color:var(--ink-text); } .spec-color{ margin:16px 0 0; font-size:.9rem; color:var(--ink-muted); display:flex; align-items:center; gap:10px; } .dot-color{ width:16px; height:16px; border-radius:50%; background:#0B0D10; border:1px solid var(--ink-line); } /* -------------------------------------------------------------------------- 10. VIDEO -------------------------------------------------------------------------- */ .video-frame{ position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--ink-bg); box-shadow:var(--shadow-lg); aspect-ratio:16/9; } .video-frame img,.video-frame iframe{ width:100%; height:100%; object-fit:cover; border:0; display:block; } .video-play{ position:absolute; inset:0; margin:auto; width:max-content; height:max-content; display:flex; align-items:center; gap:12px; background:var(--accent); color:var(--on-accent); border:0; cursor:pointer; padding:16px 28px; border-radius:var(--r-pill); font:inherit; font-weight:600; box-shadow:var(--shadow-lg); transition:transform .22s var(--ease), background-color .22s var(--ease); } .video-play:hover{ transform:scale(1.05); background:var(--accent-hover); } .video-play:active{ transform:scale(.98); } /* -------------------------------------------------------------------------- 11. RAIL DE ACCESORIOS -------------------------------------------------------------------------- */ .rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(255px, 1fr); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; margin-inline:-20px; padding-inline:20px; scrollbar-width:thin; } .rail-card{ scroll-snap-align:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; transition:border-color .28s var(--ease), transform .28s var(--ease); } .rail-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); } .rail-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--surface-2); } .rail-body{ padding:20px 22px 24px; } .rail-body .ico{ color:var(--accent-ink); margin-bottom:14px; } .rail-body p{ margin-top:8px; color:var(--steel); font-size:.91rem; } /* -------------------------------------------------------------------------- 12. GALERÍA -------------------------------------------------------------------------- */ .gallery{ columns:2; column-gap:14px; } .shot{ break-inside:avoid; margin:0 0 14px; padding:0; width:100%; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--surface-2); cursor:zoom-in; display:block; transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease); } .shot img{ width:100%; transition:transform .6s var(--ease); } .shot:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-md); } .shot:hover img{ transform:scale(1.04); } .lightbox{ border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100%; height:100%; overflow:hidden; } .lightbox::backdrop{ background:rgba(8, 10, 14, .92); backdrop-filter:blur(4px); } .lightbox img{ position:absolute; inset:0; margin:auto; max-width:min(1100px, 92vw); max-height:88vh; width:auto; height:auto; border-radius:var(--r-card); box-shadow:var(--shadow-lg); } .lb-close,.lb-nav{ position:absolute; z-index:2; width:48px; height:48px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.24); background:rgba(20,24,30,.72); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(8px); transition:background-color .2s var(--ease), transform .16s var(--ease); } .lb-close:hover,.lb-nav:hover{ background:rgba(40,46,56,.92); transform:scale(1.06); } .lb-close{ top:20px; right:20px; } .lb-prev{ left:16px; top:calc(50% - 24px); } .lb-next{ right:16px; top:calc(50% - 24px); } /* -------------------------------------------------------------------------- 13. COMPARATIVA -------------------------------------------------------------------------- */ .versus{ display:grid; gap:16px; } .vs-card{ border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--surface); } .vs-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--surface-2); } .vs-body{ padding:24px 24px 28px; } .vs-body ul{ display:grid; gap:12px; margin-top:16px; } .vs-body li{ display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); } .vs-body .ico{ width:20px; height:20px; margin-top:3px; } .vs-before .ico{ color:var(--steel); } .vs-after{ border-color:var(--accent-ink); box-shadow:var(--shadow-md); } .vs-after .ico{ color:var(--accent-ink); } .vs-after .vs-body{ background:var(--accent-soft); } /* -------------------------------------------------------------------------- 14. TESTIMONIOS -------------------------------------------------------------------------- */ .quotes{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, 1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; margin-inline:-20px; padding:4px 20px 16px; } .quote{ scroll-snap-align:center; margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:26px 26px 24px; } .stars{ display:flex; gap:3px; color:var(--accent-ink); margin-bottom:16px; } .stars .ico{ width:17px; height:17px; fill:currentColor; stroke-width:0; } .quote blockquote{ margin:0; } .quote p{ font-size:1.02rem; color:var(--ink); line-height:1.55; } .quote figcaption{ margin-top:20px; display:flex; flex-direction:column; gap:2px; } .who{ font-weight:600; font-size:.94rem; } .where{ font-size:.86rem; color:var(--steel); } .quotes-nav{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; } /* -------------------------------------------------------------------------- 15. OFERTA -------------------------------------------------------------------------- */ .oferta{ background:var(--surface); border-block:1px solid var(--line); } .offer-card{ display:grid; gap:0; border:1px solid var(--line-strong); border-radius:var(--r-card); overflow:hidden; background:var(--paper); box-shadow:var(--shadow-lg); max-width:960px; margin-inline:auto; } .offer-main{ padding:clamp(26px, 3.5vw, 42px); } .offer-name{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin:0; } .offer-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin-top:12px; } .offer-price .was{ color:var(--steel); text-decoration:line-through; } .offer-price .now{ font-family:var(--font-display); font-size:clamp(2.6rem, 2rem + 2.4vw, 3.6rem); font-weight:700; letter-spacing:-.04em; line-height:1; } .offer-note{ margin-top:14px; color:var(--steel); font-size:.92rem; } .offer-includes{ display:grid; gap:11px; margin:24px 0 28px; } .offer-includes li{ display:flex; gap:11px; align-items:flex-start; font-size:.94rem; color:var(--ink-soft); } .offer-includes .ico{ width:20px; height:20px; color:var(--accent-ink); margin-top:3px; } .countdown{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:18px; font-size:.88rem; color:var(--steel); } .countdown .ico{ width:22px; height:22px; } .countdown strong{ color:var(--ink); font-variant-numeric:tabular-nums; } .offer-side{ background:var(--surface-2); padding:clamp(26px, 3.5vw, 42px); border-top:1px solid var(--line); } .offer-side h3{ margin-bottom:20px; } .ship-option{ padding:18px 0; border-top:1px solid var(--line); } .ship-option:first-of-type{ border-top:0; padding-top:0; } .ship-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600; margin:0; font-size:.98rem; } .ship-price{ font-family:var(--font-mono); font-size:.9rem; color:var(--accent-ink); } .ship-desc{ margin:8px 0 0; font-size:.88rem; color:var(--steel); line-height:1.5; } .ship-total{ margin:10px 0 0; font-size:.9rem; } .ship-foot{ display:flex; gap:10px; align-items:flex-start; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:.86rem; color:var(--steel); } .ship-foot .ico{ width:22px; height:22px; margin-top:2px; } /* -------------------------------------------------------------------------- 16. FORMULARIO -------------------------------------------------------------------------- */ .order-grid{ display:grid; gap:clamp(24px, 3vw, 40px); align-items:start; } .order-form fieldset{ border:0; padding:0; margin:0 0 32px; } .order-form legend{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; padding:0 0 16px; letter-spacing:-.01em; } /* align-content:start es lo que mantiene los campos alineados entre columnas. Sin esto, el campo sin texto de ayuda estira su input para igualar la altura del campo vecino que sí lo tiene, y las cajas quedan a distinto nivel. */ .field{ display:grid; gap:7px; margin-bottom:18px; align-content:start; } .field-row{ display:grid; gap:0 16px; align-items:start; } .field label{ font-size:.88rem; font-weight:600; color:var(--ink); } .opt{ font-weight:400; color:var(--steel); font-size:.84em; } .field input,.field select,.field textarea{ font:inherit; font-size:.96rem; color:var(--ink); background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--r-field); padding:13px 15px; width:100%; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); } .field textarea{ resize:vertical; min-height:88px; } .field input::placeholder,.field textarea::placeholder{ color:var(--steel); opacity:.85; } .field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--ink-soft); } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 4px var(--accent-soft); } .field-help{ margin:0; font-size:.8rem; color:var(--steel); line-height:1.4; } .field-error{ margin:0; font-size:.8rem; color:#C42B2B; font-weight:600; display:none; } @media (prefers-color-scheme: dark){ .field-error{ color:#FF8B8B; } } .field.invalid input,.field.invalid select{ border-color:#C42B2B; } @media (prefers-color-scheme: dark){ .field.invalid input,.field.invalid select{ border-color:#FF8B8B; } } .field.invalid .field-error,.field-error.show{ display:block; } .ship-picker{ display:grid; gap:12px; margin-bottom:22px; } .pick{ display:flex; gap:14px; align-items:flex-start; cursor:pointer; border:1.5px solid var(--line-strong); border-radius:var(--r-card); padding:18px; background:var(--surface); transition:border-color .2s var(--ease), background-color .2s var(--ease); } .pick:hover{ border-color:var(--ink-soft); } .pick input{ margin:3px 0 0; accent-color:var(--accent); width:18px; height:18px; flex:none; } .pick:has(input:checked){ border-color:var(--accent-ink); background:var(--accent-soft); } .pick-body{ display:grid; gap:6px; } .pick-title{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-weight:600; font-size:.98rem; } .pick-price{ font-family:var(--font-display); font-size:1.14rem; color:var(--accent-ink); letter-spacing:-.02em; } .pick-desc{ font-size:.87rem; color:var(--steel); line-height:1.5; } .consent{ display:flex; gap:12px; align-items:flex-start; font-size:.89rem; color:var(--ink-soft); cursor:pointer; } .consent input{ margin:3px 0 0; width:18px; height:18px; accent-color:var(--accent); flex:none; } .consent a{ color:var(--accent-ink); text-underline-offset:3px; } .form-alert{ display:flex; gap:11px; align-items:flex-start; margin-bottom:18px; background:color-mix(in srgb, #C42B2B 8%, var(--surface)); border:1px solid color-mix(in srgb, #C42B2B 34%, transparent); color:var(--ink); border-radius:var(--r-field); padding:14px 16px; font-size:.9rem; } .form-alert .ico{ width:22px; height:22px; color:#C42B2B; margin-top:1px; } @media (prefers-color-scheme: dark){ .form-alert .ico{ color:#FF8B8B; } } .btn-spinner{ width:17px; height:17px; border-radius:50%; display:none; border:2px solid color-mix(in srgb, var(--on-accent) 35%, transparent); border-top-color:var(--on-accent); animation:spin .7s linear infinite; } [data-submit].loading .btn-spinner{ display:block; } [data-submit].loading{ pointer-events:none; opacity:.85; } @keyframes spin{ to{ transform:rotate(360deg); } } .form-foot{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:.84rem; color:var(--steel); } .form-foot .ico{ width:22px; height:22px; margin-top:1px; } /* Campo trampa para bots. Fuera de pantalla en vez de display:none, porque algunos robots ignoran lo que está oculto con display. */ .campo-trampa{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .order-done{ background:var(--surface); border:1px solid var(--accent); border-radius:var(--r-card); padding:clamp(28px, 4vw, 44px); text-align:center; box-shadow:var(--shadow-md); } .order-done .ico-xl{ color:var(--accent-ink); margin:0 auto 18px; } .order-done p{ color:var(--steel); margin-top:12px; } /* Cajita de pagos de PayPhone */ .cajita{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line); } .cajita-titulo{ font-weight:600; font-size:1rem; margin:0 0 16px !important; color:var(--ink) !important; } #pp-button{ min-height:56px; } .cajita-cargando{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:56px; color:var(--steel); font-size:.9rem; } .cajita-cargando::before{ content:""; width:16px; height:16px; border-radius:50%; border:2px solid var(--line-strong); border-top-color:var(--accent); animation:spin .7s linear infinite; } .cajita-nota{ display:flex; gap:9px; align-items:flex-start; justify-content:center; margin-top:16px !important; font-size:.82rem; color:var(--steel) !important; text-align:left; } .cajita-nota .ico{ width:16px; height:16px; margin-top:2px; } .done-codigo{ margin-top:16px !important; font-size:.92rem; } .done-codigo strong{ font-family:var(--font-mono); font-size:1.02rem; letter-spacing:.06em; color:var(--ink); background:var(--accent-soft); padding:5px 11px; border-radius:8px; display:inline-block; margin-left:4px; } /* Flex y no grid: si solo queda un botón visible (porque todavía no hay link de PayPhone, o porque el pago es contra entrega) se centra solo en vez de quedar pegado a un lado con una columna vacía al costado. */ .done-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; } .done-actions .btn{ flex:1 1 220px; max-width:340px; } .order-summary{ position:relative; } .summary-inner{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; position:sticky; top:96px; } .summary-inner img{ width:100%; border-radius:12px; background:var(--surface-2); margin-bottom:18px; } .sum-name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin:0; } .sum-meta{ margin:4px 0 0; font-size:.85rem; color:var(--steel); } .sum-lines{ margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:10px; } .sum-lines div{ display:flex; justify-content:space-between; gap:16px; font-size:.92rem; } .sum-lines dt{ color:var(--steel); } .sum-lines dd{ margin:0; font-variant-numeric:tabular-nums; } .sum-total{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:16px 0 0; padding-top:16px; border-top:1px solid var(--line); font-weight:600; } .sum-total strong{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:-.03em; } .sum-note{ margin:12px 0 0; font-size:.82rem; color:var(--steel); } /* -------------------------------------------------------------------------- 17. POLÍTICAS -------------------------------------------------------------------------- */ .politicas{ background:var(--surface); border-block:1px solid var(--line); } .policy-grid{ display:grid; gap:14px; } .policy{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:26px 24px 28px; transition:border-color .28s var(--ease), transform .28s var(--ease); } .policy:hover{ border-color:var(--line-strong); transform:translateY(-3px); } .policy .ico{ color:var(--accent-ink); margin-bottom:16px; } .policy h3{ margin-bottom:12px; } .policy p{ font-size:.92rem; color:var(--steel); margin-top:10px; } .policy strong{ color:var(--ink); } .mini-list{ display:grid; gap:9px; margin:14px 0 4px; } .mini-list li{ position:relative; padding-left:16px; font-size:.9rem; color:var(--steel); line-height:1.45; } .mini-list li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); } .mini-list strong{ color:var(--ink); font-weight:600; } /* -------------------------------------------------------------------------- 18. FAQ -------------------------------------------------------------------------- */ .faq-list{ display:grid; gap:10px; } .qa{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; transition:border-color .24s var(--ease); } .qa:hover{ border-color:var(--line-strong); } .qa[open]{ border-color:var(--accent-ink); } .qa summary{ cursor:pointer; list-style:none; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:600; font-size:1rem; font-family:var(--font-display); letter-spacing:-.012em; } .qa summary::-webkit-details-marker{ display:none; } .qa summary .ico{ color:var(--accent-ink); transition:transform .3s var(--ease); } .qa[open] summary .ico{ transform:rotate(180deg); } .qa-body{ padding:0 22px 22px; } .qa-body p{ color:var(--steel); font-size:.95rem; margin-top:10px; } .qa-body p:first-child{ margin-top:0; } .qa-body strong{ color:var(--ink); } /* -------------------------------------------------------------------------- 19. CIERRE Y PIE -------------------------------------------------------------------------- */ .cierre p{ color:var(--ink-muted); margin-top:18px; font-size:1.06rem; } .cierre-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; } .site-footer{ background:var(--ink-bg); color:var(--ink-muted); padding-top:clamp(48px, 6vw, 76px); } .footer-grid{ display:grid; gap:36px; padding-bottom:44px; } .site-footer .brand-mark{ background:var(--ink-text); color:var(--ink-bg); } .site-footer .brand-word{ color:var(--ink-text); } .footer-brand p{ margin-top:16px; font-size:.9rem; max-width:34ch; } .socials{ display:flex; gap:10px; margin-top:20px; } .socials a{ width:42px; height:42px; border-radius:var(--r-pill); border:1px solid var(--ink-line); display:grid; place-items:center; color:var(--ink-text); transition:background-color .2s var(--ease), transform .16s var(--ease), border-color .2s var(--ease); } .socials a:hover{ background:var(--ink-bg-2); border-color:var(--ink-muted); transform:translateY(-2px); } .footer-col{ display:flex; flex-direction:column; gap:11px; } .footer-col h3{ color:var(--ink-text); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; } .footer-col a{ text-decoration:none; font-size:.9rem; transition:color .2s var(--ease); } .footer-col a:hover{ color:var(--ink-text); } .footer-note{ font-size:.84rem; margin-top:4px; } .footer-legal{ border-top:1px solid var(--ink-line); padding-block:22px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:.8rem; } .footer-legal p{ margin:0; } /* -------------------------------------------------------------------------- 20. FLOTANTES -------------------------------------------------------------------------- */ /* WhatsApp flotante. Verde oficial de la marca, no del tema: la gente lo reconoce por el color, así que aquí sí se sale del acento de la página. */ .wa-float{ position:fixed; right:18px; bottom:18px; z-index:var(--z-float); width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 10px 26px rgba(37, 211, 102, .45); transition:transform .22s var(--ease), background-color .22s var(--ease); animation:wa-pulse 2.4s infinite; } .wa-float svg{ width:32px; height:32px; display:block; } .wa-float svg path{ fill:#FFFFFF; } .wa-float:hover{ background:#1DA851; transform:translateY(-3px) scale(1.04); } .wa-float:active{ transform:translateY(0) scale(.97); } @keyframes wa-pulse{ 0% { box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.40); } 70% { box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); } } .buybar{ position:fixed; left:0; right:0; bottom:0; z-index:calc(var(--z-float) - 1); display:flex; align-items:center; gap:14px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .34s var(--ease); } .buybar.show{ transform:translateY(0); } .buybar .btn{ margin-left:auto; } .buybar-price{ display:flex; align-items:baseline; gap:9px; } .bb-now{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:-.03em; } .bb-was{ color:var(--steel); text-decoration:line-through; font-size:.86rem; } body:has(.buybar.show) .wa-float{ bottom:88px; } /* -------------------------------------------------------------------------- 21. ANIMACIONES DE ENTRADA Motivo: jerarquía. Cada bloque entra cuando entra al viewport, para que la lectura siga el orden del argumento de venta. -------------------------------------------------------------------------- */ /* Ojo: el estado oculto se aplica solo si hay JavaScript (clase .js en ). Si el script no carga, el contenido se ve igual. */ .js .reveal{ opacity:0; transform:translateY(22px); } .js .reveal.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); } /* -------------------------------------------------------------------------- 22. RESPONSIVE -------------------------------------------------------------------------- */ @media (min-width: 640px){ .hide-sm{ display:inline-flex; } .trust-grid{ grid-template-columns:repeat(4, 1fr); } .field-row{ grid-template-columns:1fr 1fr; } .versus{ grid-template-columns:1fr 1fr; } .gallery{ columns:2; } .policy-grid{ grid-template-columns:1fr 1fr; } } @media (min-width: 900px){ .hero-grid{ grid-template-columns:1.02fr .98fr; } .split-grid{ grid-template-columns:.9fr 1.1fr; } .specs-grid{ grid-template-columns:1.05fr .95fr; } .gallery{ columns:3; } .policy-grid{ grid-template-columns:repeat(3, 1fr); } .offer-card{ grid-template-columns:1.25fr .75fr; } .offer-side{ border-top:0; border-left:1px solid var(--line); } .order-grid{ grid-template-columns:1.5fr .8fr; } .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1.1fr; } .bento{ grid-template-columns:repeat(6, 1fr); } .cell-a{ grid-column:span 4; } .cell-b{ grid-column:span 2; } .cell-c{ grid-column:span 4; } .cell-d{ grid-column:span 2; } .cell-a figure{ aspect-ratio:16/9; } .cell-b figure{ aspect-ratio:4/3; } .cell-b{ flex-direction:column; } /* La celda del escurridor va en horizontal: foto a la izquierda, texto a la derecha. Rompe la repetición de foto-arriba-texto-abajo y aprovecha el ancho que antes se llevaba la tarjeta de acento casi vacía. */ .cell-c{ flex-direction:row; align-items:stretch; min-height:300px; } .cell-c figure{ flex:0 0 48%; } .cell-c .bento-text{ flex:1; display:flex; flex-direction:column; justify-content:center; } .cell-d .bento-text{ padding-block:30px; } .site-nav{ display:flex; } } /* -------------------------------------------------------------------------- 23. MOVIMIENTO REDUCIDO -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } .buybar{ transform:none; display:none; } .buybar.show{ display:flex; } } /* -------------------------------------------------------------------------- 24. IMPRESIÓN -------------------------------------------------------------------------- */ @media print{ .site-header,.buybar,.wa-float,.video-frame,.topbar,.quotes-nav{ display:none !important; } body{ background:#fff; color:#000; } .reveal{ opacity:1; transform:none; } }