/* ========================================================= DEL CARPIO — "Liquid Glass" Design System (maqueta estática) Blanco + vidrio esmerilado, inspirado en Apple Liquid Glass. Evolución del borrador delcarpio-theme/assets/css/main.css ========================================================= */ :root{ /* Base */ --dc-white: #ffffff; --dc-bg: #fbfbfd; --dc-bg-soft: #f4f6f8; --dc-ink: #1d1d1f; --dc-ink-soft: #4d5257; --dc-ink-faint: #86898d; --dc-line: rgba(29,29,31,0.08); /* Acento — azul técnico/laboratorio */ --dc-blue: #0071e3; --dc-blue-dark: #0059b3; --dc-blue-soft: rgba(0,113,227,0.10); /* Acentos secundarios (isotipo Del Carpio) */ --dc-amber: #e0b13c; --dc-red: #d3543f; --dc-green: #4c9a6a; /* Vidrio */ --glass-bg: rgba(255,255,255,0.55); --glass-bg-strong: rgba(255,255,255,0.78); --glass-border: rgba(255,255,255,0.65); --glass-shadow: 0 8px 32px rgba(31,38,45,0.10), 0 1px 1px rgba(31,38,45,0.06); --glass-blur: 22px; --radius-sm: 14px; --radius-md: 22px; --radius-lg: 32px; --radius-pill: 999px; --container: 1240px; --nav-h: 76px; --ease: cubic-bezier(.2,.8,.2,1); /* Tipografía tipo iOS: Inter = sustituto licenciable de SF Pro; en Apple cae a SF nativa */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Footer: siempre oscuro, independiente del tema (desacoplado de --dc-ink) */ --dc-footer-bg: #1d1d1f; } /* ========================================================= MODO OSCURO — activado con [data-theme="dark"] en . Se decide en un script inline en (antes del primer paint, sin parpadeo) leyendo localStorage o prefers-color-scheme, y se cambia en caliente con el botón de tema (assets/js/main.js). ========================================================= */ :root[data-theme="dark"]{ --dc-bg: #000000; --dc-bg-soft: #131316; --dc-ink: #f5f5f7; --dc-ink-soft: #c7c7cc; --dc-ink-faint: #8e8e93; --dc-line: rgba(255,255,255,0.12); --dc-blue: #0a84ff; --dc-blue-dark: #409cff; --dc-blue-soft: rgba(10,132,255,0.18); --glass-bg: rgba(255,255,255,0.06); --glass-bg-strong: rgba(255,255,255,0.10); --glass-border: rgba(255,255,255,0.14); --glass-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 1px 1px rgba(0,0,0,0.35); --dc-footer-bg: #161618; } /* ---------- Reset base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body.dc{ margin:0; background:var(--dc-bg); color:var(--dc-ink); font-family:var(--font-sans); font-optical-sizing:auto; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,p{ margin:0; } button{ font-family:inherit; } .dc-container{ max-width:var(--container); margin:0 auto; padding:0 24px; } /* ---------- Fondo "líquido" (blobs suaves fijos) ---------- */ .dc-liquid-bg{ position:fixed; inset:0; z-index:-2; pointer-events:none; background:var(--dc-bg); overflow:hidden; } .dc-liquid-bg::before, .dc-liquid-bg::after{ content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; animation:dc-drift 26s ease-in-out infinite alternate; } .dc-liquid-bg::before{ width:640px; height:640px; top:-220px; right:-140px; background:radial-gradient(circle at 30% 30%, rgba(0,113,227,.16), rgba(0,113,227,0) 68%); } .dc-liquid-bg::after{ width:560px; height:560px; bottom:-200px; left:-160px; background:radial-gradient(circle at 60% 40%, rgba(76,154,106,.13), rgba(76,154,106,0) 68%); animation-delay:-13s; } @keyframes dc-drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-60px,50px,0) scale(1.12); } } @media (prefers-reduced-motion: reduce){ .dc-liquid-bg::before,.dc-liquid-bg::after{ animation:none; } } :root[data-theme="dark"] .dc-liquid-bg::before, :root[data-theme="dark"] .dc-liquid-bg::after{ opacity:.8; } /* ---------- Utility type scale ---------- */ .dc-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dc-blue); } /* Tracking específico por tamaño (WWDC "Details of UI Typography"): display grande = negativo; cuerpo ≈ 0; texto pequeño = levemente positivo */ .dc-h1{ font-size:clamp(34px,5vw,64px); font-weight:700; letter-spacing:-0.028em; line-height:1.05; } .dc-h2{ font-size:clamp(28px,3.6vw,44px); font-weight:700; letter-spacing:-0.022em; line-height:1.08; } .dc-h3{ font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-0.014em; line-height:1.2; } .dc-lead{ font-size:clamp(16px,1.6vw,20px); color:var(--dc-ink-soft); font-weight:400; letter-spacing:0; line-height:1.6; } .dc-muted{ color:var(--dc-ink-faint); } .dc-stat b, .dc-stats-band .num{ font-variant-numeric:tabular-nums; } /* ---------- Glass primitives ---------- */ .glass{ position:relative; background:var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); border-radius:var(--radius-lg); } /* brillo especular superior, estilo Liquid Glass */ .glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(160deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 34%); opacity:.7; } :root[data-theme="dark"] .glass::before{ opacity:.18; } .glass-strong{ background:var(--glass-bg-strong); } .glass-card{ padding:32px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); } .glass-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(31,38,45,0.14); } /* ---------- Buttons ---------- */ .dc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:var(--radius-pill); font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; transition:all .35s var(--ease); white-space:nowrap; } .dc-btn-sm{ padding:10px 20px; font-size:14px; } .dc-btn-primary{ background:var(--dc-blue); color:#fff; box-shadow:0 10px 24px rgba(0,113,227,.28); } .dc-btn-primary:hover{ background:var(--dc-blue-dark); transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,113,227,.36); } .dc-btn-glass{ background:var(--glass-bg-strong); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-color:var(--glass-border); color:var(--dc-ink); } .dc-btn-glass:hover{ transform:translateY(-2px); box-shadow:var(--glass-shadow); } .dc-btn-ghost{ background:transparent; color:var(--dc-blue); padding-left:4px; padding-right:4px; } .dc-btn-ghost::after{ content:"›"; margin-left:4px; } .dc-btn-whatsapp{ background:#25D366; color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.3); } .dc-btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,211,102,.4); } /* Feedback inmediato al presionar (respuesta en el pointer-down, estilo iOS) */ .dc-btn:active{ transform:scale(.97); transition:transform 100ms ease-out; } .dc-pill:active, .dc-brand-chip:active{ transform:scale(.96); transition:transform 100ms ease-out; } .dc-product-card:active{ transform:translateY(-2px) scale(.99); } /* ---------- Nav ---------- */ .dc-nav{ position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); display:flex; align-items:center; background:rgba(255,255,255,0.6); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom:1px solid rgba(29,29,31,0.06); transition:background .3s var(--ease), box-shadow .3s var(--ease); } .dc-nav.is-scrolled{ box-shadow:0 4px 20px rgba(31,38,45,.06); background:rgba(255,255,255,0.85); } :root[data-theme="dark"] .dc-nav{ background:rgba(0,0,0,0.55); border-bottom-color:rgba(255,255,255,0.08); } :root[data-theme="dark"] .dc-nav.is-scrolled{ background:rgba(0,0,0,0.8); box-shadow:0 4px 20px rgba(0,0,0,.4); } .dc-nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; } .dc-logo{ display:flex; align-items:center; } .dc-logo-img{ height:38px; width:auto; display:block; } .dc-logo-themed .logo-dark{ display:none; } :root[data-theme="dark"] .dc-logo-themed .logo-light{ display:none; } :root[data-theme="dark"] .dc-logo-themed .logo-dark{ display:block; } .dc-menu{ display:flex; align-items:center; gap:4px; } .dc-menu a{ padding:10px 15px; border-radius:var(--radius-pill); font-size:14px; font-weight:500; color:var(--dc-ink-soft); transition:all .25s var(--ease); white-space:nowrap; } .dc-menu a:hover, .dc-menu a.current{ background:var(--dc-blue-soft); color:var(--dc-blue); } .dc-nav-actions{ display:flex; align-items:center; gap:10px; } .dc-burger{ display:none; width:42px; height:42px; border-radius:50%; align-items:center; justify-content:center; cursor:pointer; background:var(--glass-bg-strong); border:1px solid var(--glass-border); font-size:18px; } /* ---------- Selector de tema (claro / oscuro) ---------- */ .dc-theme-toggle{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--dc-ink-soft); transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); } .dc-theme-toggle:hover{ background:var(--dc-blue-soft); color:var(--dc-blue); } .dc-theme-toggle:active{ transform:scale(.92); } .dc-theme-toggle svg{ width:18px; height:18px; } .dc-theme-toggle .icon-sun{ display:none; } .dc-theme-toggle .icon-moon{ display:block; } :root[data-theme="dark"] .dc-theme-toggle .icon-sun{ display:block; } :root[data-theme="dark"] .dc-theme-toggle .icon-moon{ display:none; } @media (max-width: 1080px){ .dc-menu{ position:fixed; top:calc(var(--nav-h) + 8px); left:12px; right:12px; flex-direction:column; align-items:stretch; background:var(--glass-bg-strong); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:12px; box-shadow:var(--glass-shadow); transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .3s var(--ease); } .dc-menu.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; } .dc-menu a{ padding:14px 16px; } .dc-burger{ display:flex; } .dc-nav-actions .dc-btn-primary{ display:none; } } /* ---------- Hero ---------- */ .dc-hero{ position:relative; padding:calc(var(--nav-h) + 64px) 0 80px; overflow:hidden; } .dc-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; } @media (max-width: 900px){ .dc-hero-grid{ grid-template-columns:1fr; } } .dc-hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; } .dc-hero-stats{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; } .dc-stat b{ display:block; font-size:30px; font-weight:700; letter-spacing:-.01em; } .dc-stat span{ font-size:13px; color:var(--dc-ink-faint); } /* Collage de vidrio en el hero */ .dc-hero-collage{ position:relative; min-height:460px; } .dc-hero-collage .hc-card{ position:absolute; overflow:hidden; border-radius:var(--radius-md); padding:16px; background:var(--glass-bg-strong); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%); backdrop-filter:blur(var(--glass-blur)) saturate(180%); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); animation:dc-float 7s ease-in-out infinite alternate; } .dc-hero-collage .hc-card img{ width:100%; height:100%; object-fit:contain; background:#fff; border-radius:var(--radius-sm); } .dc-hero-collage .hc-1{ width:56%; aspect-ratio:1/1; top:0; left:2%; z-index:2; } .dc-hero-collage .hc-2{ width:44%; aspect-ratio:1/1; top:24%; right:0; z-index:3; animation-delay:-2.5s; } .dc-hero-collage .hc-3{ width:40%; aspect-ratio:1/1; bottom:0; left:16%; z-index:1; animation-delay:-5s; } .dc-hero-collage .hc-chip{ position:absolute; z-index:4; display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; background:var(--glass-bg-strong); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); animation:dc-float 6s ease-in-out infinite alternate; } .dc-hero-collage .chip-1{ bottom:16%; right:4%; animation-delay:-1.8s; } .dc-hero-collage .chip-2{ top:6%; right:12%; animation-delay:-4s; } .dc-hero-collage .hc-chip .dot{ width:9px; height:9px; border-radius:50%; background:var(--dc-green); box-shadow:0 0 0 4px rgba(76,154,106,.18); } @keyframes dc-float{ from{ transform:translateY(0); } to{ transform:translateY(-14px); } } @media (max-width: 900px){ .dc-hero-collage{ min-height:380px; margin-top:16px; } } @media (prefers-reduced-motion: reduce){ .dc-hero-collage .hc-card,.dc-hero-collage .hc-chip{ animation:none; } } /* ---------- Section shells ---------- */ .dc-section{ padding:88px 0; } .dc-section-tight{ padding:56px 0; } .dc-section-head{ max-width:720px; margin-bottom:48px; } .dc-section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .dc-section-soft{ background:var(--dc-bg-soft); } /* ---------- Cards grid ---------- */ .dc-grid{ display:grid; gap:24px; } .dc-grid-2{ grid-template-columns:repeat(2,1fr); } .dc-grid-3{ grid-template-columns:repeat(3,1fr); } .dc-grid-4{ grid-template-columns:repeat(4,1fr); } @media (max-width: 980px){ .dc-grid-3,.dc-grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 620px){ .dc-grid-2,.dc-grid-3,.dc-grid-4{ grid-template-columns:1fr; } } @media (max-width: 900px){ .dc-grid-2{ grid-template-columns:1fr; } } .dc-feature-icon{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--dc-blue-soft); color:var(--dc-blue); margin-bottom:18px; } .dc-feature-icon svg{ width:24px; height:24px; } .dc-feature h3{ margin-bottom:8px; } .dc-feature p{ color:var(--dc-ink-soft); font-size:15px; } /* ---------- Category / brand pills ---------- */ .dc-pill-row{ display:flex; flex-wrap:wrap; gap:10px; } .dc-pill{ padding:10px 18px; border-radius:var(--radius-pill); font-size:14px; font-weight:500; background:var(--glass-bg); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:all .25s var(--ease); cursor:pointer; color:var(--dc-ink-soft); } .dc-pill:hover{ background:var(--dc-blue); border-color:var(--dc-blue); color:#fff; } .dc-pill.is-active{ background:var(--dc-blue); border-color:var(--dc-blue); color:#fff; box-shadow:0 8px 18px rgba(0,113,227,.25); } /* ---------- Tarjetas de marca con foto real de equipo ---------- */ .dc-brand-card{ overflow:hidden; padding:0; display:flex; flex-direction:column; } .dc-brand-card .brand-photo{ aspect-ratio:4/3; background:#fff; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--dc-line); overflow:hidden; } .dc-brand-card .brand-photo img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .5s var(--ease); padding:10px; } .dc-brand-card:hover .brand-photo img{ transform:scale(1.06); } .dc-brand-card .brand-body{ padding:20px 22px 24px; text-align:center; } .dc-brand-card h3{ font-size:17px; } .dc-brand-card .dc-muted{ font-size:13px; margin-top:6px; } /* ---------- Tarjetas de logo oficial de marca ---------- */ .dc-brand-logo-card{ overflow:hidden; padding:0; display:flex; flex-direction:column; } .dc-brand-logo-card .brand-logo-tile{ aspect-ratio:16/9; background:#fff; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--dc-line); overflow:hidden; padding:28px; } .dc-brand-logo-card .brand-logo-tile img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .4s var(--ease); } .dc-brand-logo-card:hover .brand-logo-tile img{ transform:scale(1.05); } .dc-brand-logo-card .brand-logo-tile.on-dark{ background:var(--dc-ink); } .dc-brand-logo-card .brand-logo-tile.text-fallback{ background:var(--dc-bg-soft); font-weight:700; font-size:26px; letter-spacing:-0.01em; color:var(--dc-ink-soft); } .dc-brand-logo-card .brand-body{ padding:16px 20px 20px; text-align:center; } .dc-brand-logo-card h3{ font-size:15px; color:var(--dc-ink-soft); font-weight:500; } .dc-brand-logo-card .dc-muted{ font-size:12.5px; margin-top:4px; } /* ---------- Marquee de marcas ---------- */ .dc-marquee{ overflow:hidden; position:relative; padding:8px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .dc-marquee-track{ display:flex; gap:12px; width:max-content; animation:dc-marquee 36s linear infinite; } .dc-marquee:hover .dc-marquee-track{ animation-play-state:paused; } @keyframes dc-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .dc-brand-chip{ display:flex; align-items:center; gap:8px; white-space:nowrap; padding:12px 22px; border-radius:var(--radius-pill); background:var(--glass-bg); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-weight:600; font-size:14px; color:var(--dc-ink-soft); } @media (prefers-reduced-motion: reduce){ .dc-marquee-track{ animation:none; flex-wrap:wrap; } } /* ---------- Stats band ---------- */ .dc-stats-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media (max-width: 780px){ .dc-stats-band{ grid-template-columns:1fr; } } .dc-stats-band .glass-card{ text-align:center; } .dc-stats-band .num{ font-size:42px; font-weight:700; color:var(--dc-blue); letter-spacing:-.02em; } /* ---------- FAQ accordion ---------- */ .dc-faq{ display:flex; flex-direction:column; gap:12px; max-width:860px; margin:0 auto; } .dc-faq-item{ border-radius:var(--radius-md); overflow:hidden; } .dc-faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; font-weight:600; } .dc-faq-q::after{ content:"+"; font-size:22px; font-weight:400; color:var(--dc-blue); transition:transform .3s var(--ease); flex-shrink:0; } .dc-faq-item.is-open .dc-faq-q::after{ transform:rotate(45deg); } .dc-faq-a{ max-height:0; overflow:hidden; padding:0 24px; color:var(--dc-ink-soft); transition:all .35s var(--ease); } .dc-faq-item.is-open .dc-faq-a{ max-height:400px; padding-bottom:22px; } /* ---------- Testimonios ---------- */ .dc-quote{ font-size:15px; color:var(--dc-ink-soft); font-style:italic; } .dc-quote-author{ margin-top:18px; font-size:14px; font-weight:600; font-style:normal; color:var(--dc-ink); } .dc-stars{ color:var(--dc-amber); letter-spacing:2px; margin-bottom:12px; font-size:15px; } /* ---------- CTA banner ---------- */ .dc-cta{ padding:64px; text-align:center; position:relative; overflow:hidden; } .dc-cta h2{ margin-bottom:16px; } .dc-cta .dc-btn{ margin-top:20px; } @media (max-width: 620px){ .dc-cta{ padding:40px 24px; } } /* ---------- Forms ---------- */ .dc-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .dc-form .full{ grid-column:1 / -1; } @media (max-width: 700px){ .dc-form{ grid-template-columns:1fr; } } .dc-field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--dc-ink-soft); } .dc-field input, .dc-field textarea, .dc-field select{ width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--dc-line); background:rgba(255,255,255,.75); color:var(--dc-ink); font-size:15px; font-family:inherit; transition:border .25s, box-shadow .25s, background .25s; } :root[data-theme="dark"] .dc-field input, :root[data-theme="dark"] .dc-field textarea, :root[data-theme="dark"] .dc-field select{ background:rgba(255,255,255,.05); } .dc-field textarea{ min-height:140px; resize:vertical; } .dc-field input:focus, .dc-field textarea:focus, .dc-field select:focus{ outline:none; border-color:var(--dc-blue); box-shadow:0 0 0 4px var(--dc-blue-soft); } /* ---------- Catálogo (maqueta estática) ---------- */ .dc-shop-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:18px; margin-bottom:26px; } .dc-shop-toolbar .dc-search{ flex:1; min-width:220px; position:relative; } .dc-shop-toolbar .dc-search input{ width:100%; padding:13px 18px 13px 44px; border-radius:var(--radius-pill); border:1px solid var(--dc-line); background:rgba(255,255,255,.8); color:var(--dc-ink); font-size:15px; font-family:inherit; transition:border .25s, box-shadow .25s, background .25s; } .dc-shop-toolbar .dc-search input:focus{ outline:none; border-color:var(--dc-blue); box-shadow:0 0 0 4px var(--dc-blue-soft); } .dc-shop-toolbar .dc-search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--dc-ink-faint); } .dc-shop-toolbar select{ padding:12px 16px; border-radius:var(--radius-pill); border:1px solid var(--dc-line); background:rgba(255,255,255,.8); font-size:14px; font-family:inherit; color:var(--dc-ink-soft); cursor:pointer; } :root[data-theme="dark"] .dc-shop-toolbar .dc-search input, :root[data-theme="dark"] .dc-shop-toolbar select{ background:rgba(255,255,255,.06); } .dc-shop-count{ font-size:14px; color:var(--dc-ink-faint); margin:0 0 22px 4px; } .dc-products{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width: 980px){ .dc-products{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 620px){ .dc-products{ grid-template-columns:1fr; } } .dc-product-card{ display:flex; flex-direction:column; padding:20px; overflow:hidden; border-radius:var(--radius-md); background:var(--glass-bg); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%); backdrop-filter:blur(var(--glass-blur)) saturate(180%); box-shadow:var(--glass-shadow); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .dc-product-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px rgba(31,38,45,.14); } .dc-product-card .img-wrap{ border-radius:var(--radius-sm); aspect-ratio:1/1; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid var(--dc-line); } .dc-product-card .img-wrap img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .5s var(--ease); } .dc-product-card:hover .img-wrap img{ transform:scale(1.045); } .dc-product-card .img-wrap .no-img{ font-size:13px; color:var(--dc-ink-faint); } .dc-product-card h3{ font-size:16px; font-weight:600; margin:16px 0 6px; line-height:1.3; } .dc-product-card .brand-tag{ align-self:flex-start; margin-top:2px; padding:4px 12px; border-radius:var(--radius-pill); font-size:12px; font-weight:600; background:var(--dc-blue-soft); color:var(--dc-blue); } .dc-product-card .desc{ font-size:13.5px; color:var(--dc-ink-faint); margin-top:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .dc-product-card .card-actions{ margin-top:auto; padding-top:16px; display:flex; gap:10px; } .dc-pagination{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:44px; flex-wrap:wrap; } .dc-pagination button{ min-width:42px; height:42px; padding:0 12px; border-radius:var(--radius-pill); cursor:pointer; border:1px solid var(--glass-border); background:var(--glass-bg); font-size:14px; font-weight:600; color:var(--dc-ink-soft); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:all .25s var(--ease); } .dc-pagination button:hover:not(:disabled){ background:var(--dc-blue-soft); color:var(--dc-blue); } .dc-pagination button.is-current{ background:var(--dc-blue); border-color:var(--dc-blue); color:#fff; } .dc-pagination button:disabled{ opacity:.4; cursor:default; } /* ---------- Detalle de producto ---------- */ .dc-product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; } @media (max-width: 900px){ .dc-product-detail{ grid-template-columns:1fr; } } .dc-gallery-main{ border-radius:var(--radius-lg); overflow:hidden; background:#fff; border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; } .dc-gallery-main img{ width:100%; height:100%; object-fit:contain; } .dc-gallery-thumbs{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; } .dc-gallery-thumbs button{ width:76px; height:76px; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; border:2px solid transparent; background:#fff; padding:4px; transition:border .25s; } .dc-gallery-thumbs button img{ width:100%; height:100%; object-fit:contain; } .dc-gallery-thumbs button.is-active{ border-color:var(--dc-blue); } .dc-detail-summary .sku{ font-size:13px; color:var(--dc-ink-faint); margin-top:8px; } .dc-detail-summary .dc-lead{ margin-top:18px; font-size:16px; } .dc-detail-actions{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; } .dc-tabs{ margin-top:56px; } .dc-tab-btns{ display:flex; gap:8px; border-bottom:1px solid var(--dc-line); margin-bottom:28px; flex-wrap:wrap; } .dc-tab-btns button{ padding:12px 18px; font-weight:600; font-size:15px; color:var(--dc-ink-faint); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:color .25s; } .dc-tab-btns button.is-active{ color:var(--dc-blue); border-bottom-color:var(--dc-blue); } .dc-tab-panel{ display:none; } .dc-tab-panel.is-active{ display:block; } /* Contenido HTML importado de WooCommerce (descripciones con tablas) */ .dc-rich{ font-size:15px; color:var(--dc-ink-soft); line-height:1.7; overflow-x:auto; } .dc-rich h1,.dc-rich h2,.dc-rich h3,.dc-rich h4{ color:var(--dc-ink); margin:1.4em 0 .5em; line-height:1.25; } .dc-rich p{ margin:.8em 0; } .dc-rich ul{ list-style:disc; padding-left:22px; margin:.8em 0; } .dc-rich img{ border-radius:var(--radius-sm); margin:12px 0; } .dc-rich table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:14px; background:rgba(255,255,255,.7); border-radius:var(--radius-sm); overflow:hidden; } :root[data-theme="dark"] .dc-rich table{ background:rgba(255,255,255,.04); } .dc-rich table td,.dc-rich table th{ padding:10px 14px; border:1px solid var(--dc-line); text-align:left; vertical-align:top; } .dc-rich table tr:first-child td,.dc-rich table th{ background:var(--dc-blue-soft); font-weight:600; color:var(--dc-ink); } .dc-rich iframe{ max-width:100%; border-radius:var(--radius-sm); } /* ---------- Ficha estándar (propuesta de estilo unificado) ---------- */ .dc-ficha-badge{ display:inline-block; margin:0 0 14px 10px; padding:5px 14px; border-radius:var(--radius-pill); font-size:12px; font-weight:600; letter-spacing:.03em; background:rgba(76,154,106,.12); color:var(--dc-green); border:1px solid rgba(76,154,106,.25); } .dc-ficha-ventajas{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0; margin:0; } @media (max-width: 700px){ .dc-ficha-ventajas{ grid-template-columns:1fr; } } .dc-ficha-ventajas li{ position:relative; padding:13px 16px 13px 42px; font-size:14px; line-height:1.5; color:var(--dc-ink-soft); background:rgba(255,255,255,.65); border:1px solid var(--dc-line); border-radius:var(--radius-sm); } :root[data-theme="dark"] .dc-ficha-ventajas li{ background:rgba(255,255,255,.05); } .dc-ficha-ventajas li::before{ content:"✓"; position:absolute; left:15px; top:12px; font-weight:700; color:var(--dc-green); } .dc-norma-badges, .dc-industry-chips{ display:flex; flex-wrap:wrap; gap:8px; } .dc-norma-badges span{ padding:7px 14px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; background:var(--dc-blue-soft); color:var(--dc-blue); } .dc-industry-chips{ margin-top:16px; } .dc-industry-chips span{ padding:6px 13px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:500; background:rgba(255,255,255,.7); border:1px solid var(--dc-line); color:var(--dc-ink-faint); } :root[data-theme="dark"] .dc-industry-chips span{ background:rgba(255,255,255,.06); } .dc-doc-row{ display:flex; flex-wrap:wrap; gap:10px; } .dc-spec-list{ display:grid; gap:10px; } .dc-spec-list .spec{ display:grid; grid-template-columns:220px 1fr; gap:16px; padding:14px 18px; border-radius:var(--radius-sm); background:rgba(255,255,255,.65); border:1px solid var(--dc-line); font-size:14px; } :root[data-theme="dark"] .dc-spec-list .spec{ background:rgba(255,255,255,.05); } @media (max-width: 620px){ .dc-spec-list .spec{ grid-template-columns:1fr; gap:4px; } } .dc-spec-list .spec b{ color:var(--dc-ink); } .dc-spec-list .spec span{ color:var(--dc-ink-soft); } /* ---------- Breadcrumb / page header ---------- */ .dc-page-header{ padding:calc(var(--nav-h) + 56px) 0 48px; } .dc-page-header .dc-eyebrow{ margin-bottom:14px; } .dc-breadcrumb{ font-size:13px; color:var(--dc-ink-faint); margin-bottom:18px; } .dc-breadcrumb a:hover{ color:var(--dc-blue); } /* ---------- Destacado / noticia ---------- */ .dc-highlight{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:32px; } @media (max-width: 620px){ .dc-highlight{ grid-template-columns:1fr; } } .dc-highlight .hl-icon{ width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--dc-blue-soft); color:var(--dc-blue); flex-shrink:0; } .dc-highlight .hl-icon svg{ width:26px; height:26px; } .dc-highlight-photo{ border-radius:var(--radius-md); overflow:hidden; background:#fff; border:1px solid var(--dc-line); aspect-ratio:4/3; flex-shrink:0; width:220px; display:flex; align-items:center; justify-content:center; } .dc-highlight-photo img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; padding:8px; } @media (max-width: 620px){ .dc-highlight-photo{ width:100%; margin-bottom:6px; } } /* ---------- Galería de equipos (fotos reales, Servicio Técnico / Proyectos) ---------- */ .dc-equip-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } @media (max-width: 900px){ .dc-equip-gallery{ grid-template-columns:repeat(2,1fr); } } .dc-equip-gallery figure{ margin:0; overflow:hidden; border-radius:var(--radius-md); background:var(--glass-bg); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur)); box-shadow:var(--glass-shadow); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .dc-equip-gallery figure:hover{ transform:translateY(-4px); box-shadow:0 18px 34px rgba(31,38,45,.12); } .dc-equip-gallery .ph{ aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; } .dc-equip-gallery .ph img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; padding:14px; } .dc-equip-gallery figcaption{ padding:12px 16px 16px; font-size:13px; font-weight:600; color:var(--dc-ink-soft); text-align:center; } /* ---------- Footer ---------- */ .dc-footer{ background:var(--dc-footer-bg); color:rgba(255,255,255,.82); padding:64px 0 28px; margin-top:80px; } .dc-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); } @media (max-width: 900px){ .dc-footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ /* Móvil: una sola columna, todo el contenido del footer centrado */ .dc-footer-grid{ grid-template-columns:1fr; text-align:center; } .dc-footer .dc-logo{ display:inline-flex; } .dc-social{ justify-content:center; } .dc-newsletter{ max-width:340px; margin-left:auto; margin-right:auto; } .dc-footer-bottom{ flex-direction:column; text-align:center; justify-content:center; } } .dc-footer h4{ color:#fff; font-size:14px; margin-bottom:16px; letter-spacing:.02em; text-transform:uppercase; } .dc-footer a{ color:rgba(255,255,255,.7); font-size:14px; display:block; padding:6px 0; transition:color .2s; } .dc-footer a:hover{ color:#fff; } .dc-footer p{ font-size:14px; color:rgba(255,255,255,.7); } .dc-footer .dc-logo{ color:#fff; margin-bottom:14px; } .dc-footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px; font-size:13px; color:rgba(255,255,255,.55); } .dc-social{ display:flex; gap:10px; margin-top:14px; } .dc-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; padding:0; transition:background .25s; } .dc-social a:hover{ background:var(--dc-blue); color:#fff; } .dc-social svg{ width:17px; height:17px; } .dc-newsletter{ display:flex; gap:8px; margin-top:10px; } .dc-newsletter input{ flex:1; min-width:0; padding:12px 16px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; } .dc-newsletter input::placeholder{ color:rgba(255,255,255,.4); } .dc-newsletter button{ padding:12px 20px; border-radius:var(--radius-pill); border:none; background:var(--dc-blue); color:#fff; font-weight:600; cursor:pointer; } /* ---------- WhatsApp float ---------- */ .dc-whatsapp-float{ position:fixed; right:22px; bottom:22px; z-index:999; width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(37,211,102,.4); transition:transform .3s var(--ease); } .dc-whatsapp-float:hover{ transform:scale(1.08); } .dc-whatsapp-float svg{ width:30px; height:30px; } /* ---------- Toast (maqueta) ---------- */ .dc-toast{ position:fixed; left:50%; bottom:32px; transform:translate(-50%, 20px); z-index:1200; padding:16px 26px; border-radius:var(--radius-pill); font-size:14px; font-weight:600; background:var(--glass-bg-strong); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); opacity:0; pointer-events:none; transition:all .4s var(--ease); } .dc-toast.is-visible{ opacity:1; transform:translate(-50%, 0); } /* ---------- Reveal on scroll ---------- */ .dc-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .dc-reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .dc-reveal{ opacity:1; transform:none; transition:none; } } /* ---------- Hero: slider de banners promocionales ---------- */ .dc-banner-section{ padding:calc(var(--nav-h) + 28px) 0 0; } .dc-banner{ position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--glass-bg-strong); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%); backdrop-filter:blur(var(--glass-blur)) saturate(180%); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); touch-action:pan-y; cursor:grab; } .dc-banner.is-dragging{ cursor:grabbing; } .dc-banner-track{ display:flex; will-change:transform; } .dc-banner-slide{ flex:0 0 100%; min-width:100%; position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center; padding:56px 64px; min-height:440px; } .dc-banner-slide::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(720px 420px at 82% 18%, var(--slide-tint, rgba(0,113,227,.12)), transparent 65%), linear-gradient(160deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 40%); } :root[data-theme="dark"] .dc-banner-slide::before{ background: radial-gradient(720px 420px at 82% 18%, var(--slide-tint, rgba(10,132,255,.16)), transparent 65%), linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%); } .dc-banner-slide > *{ position:relative; } .dc-banner-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:var(--radius-pill); background:rgba(255,255,255,.7); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dc-blue); margin-bottom:20px; } :root[data-theme="dark"] .dc-banner-eyebrow{ background:rgba(255,255,255,.08); } .dc-banner-title{ font-size:clamp(30px,3.8vw,52px); font-weight:700; letter-spacing:-0.026em; line-height:1.06; } .dc-banner-text{ margin-top:16px; max-width:480px; font-size:clamp(15px,1.4vw,18px); color:var(--dc-ink-soft); line-height:1.6; } .dc-banner-cta{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; } .dc-banner-visual{ display:flex; align-items:center; justify-content:center; } .dc-banner-visual img{ max-height:340px; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 24px 40px rgba(31,38,45,.18)); user-select:none; -webkit-user-drag:none; } @media (max-width: 860px){ .dc-banner-slide{ grid-template-columns:1fr; padding:40px 28px 96px; min-height:520px; text-align:center; } .dc-banner-text{ margin-left:auto; margin-right:auto; } .dc-banner-cta{ justify-content:center; } .dc-banner-visual{ order:-1; } .dc-banner-visual img{ max-height:200px; } } /* Controles del slider (siempre visibles, targets ≥44px) */ .dc-banner-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.72); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); box-shadow:var(--glass-shadow); color:var(--dc-ink); transition:background .25s var(--ease), transform .2s var(--ease); } .dc-banner-arrow:hover{ background:#fff; } .dc-banner-arrow:active{ transform:translateY(-50%) scale(.94); } .dc-banner-arrow.prev{ left:16px; } .dc-banner-arrow.next{ right:16px; } .dc-banner-arrow svg{ width:18px; height:18px; } :root[data-theme="dark"] .dc-banner-arrow{ background:rgba(255,255,255,.10); } :root[data-theme="dark"] .dc-banner-arrow:hover{ background:rgba(255,255,255,.18); } .dc-banner-dots{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:5; display:flex; gap:6px; padding:8px 12px; border-radius:var(--radius-pill); background:rgba(255,255,255,.6); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } :root[data-theme="dark"] .dc-banner-dots{ background:rgba(255,255,255,.08); } .dc-banner-dots button{ width:28px; height:28px; border-radius:50%; border:none; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; } .dc-banner-dots button::after{ content:""; width:8px; height:8px; border-radius:999px; background:rgba(29,29,31,.25); transition:all .35s var(--ease); } .dc-banner-dots button.is-active::after{ width:22px; background:var(--dc-blue); } :root[data-theme="dark"] .dc-banner-dots button::after{ background:rgba(255,255,255,.28); } @media (max-width: 860px){ .dc-banner-arrow{ display:none; } /* en móvil: swipe + dots */ } /* Franja de estadísticas bajo el banner */ .dc-hero-statsbar{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:22px; } .dc-hero-statsbar .stat-chip{ display:flex; align-items:center; gap:12px; padding:14px 24px; border-radius:var(--radius-pill); background:var(--glass-bg); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); box-shadow:var(--glass-shadow); } .dc-hero-statsbar .stat-chip b{ font-size:22px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--dc-blue); } .dc-hero-statsbar .stat-chip span{ font-size:13px; color:var(--dc-ink-soft); } /* ---------- Selector de idioma ---------- */ .dc-lang{ display:flex; align-items:center; padding:3px; gap:2px; border-radius:var(--radius-pill); background:var(--glass-bg); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } .dc-lang a{ padding:7px 12px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:600; color:var(--dc-ink-faint); transition:all .25s var(--ease); line-height:1; } .dc-lang a.is-active{ background:var(--dc-blue); color:#fff; } .dc-lang a:not(.is-active):hover{ color:var(--dc-blue); } /* ---------- Accesibilidad de materiales ---------- */ @media (prefers-reduced-transparency: reduce){ .glass,.glass-strong,.dc-nav,.dc-menu,.dc-product-card,.dc-banner, .dc-banner-arrow,.dc-banner-dots,.dc-pill,.dc-brand-chip,.dc-lang, .dc-hero-statsbar .stat-chip,.dc-shop-toolbar,.dc-toast{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:#fff !important; } :root[data-theme="dark"] .glass,:root[data-theme="dark"] .glass-strong, :root[data-theme="dark"] .dc-nav,:root[data-theme="dark"] .dc-menu, :root[data-theme="dark"] .dc-product-card,:root[data-theme="dark"] .dc-banner, :root[data-theme="dark"] .dc-banner-arrow,:root[data-theme="dark"] .dc-banner-dots, :root[data-theme="dark"] .dc-pill,:root[data-theme="dark"] .dc-brand-chip, :root[data-theme="dark"] .dc-lang,:root[data-theme="dark"] .dc-hero-statsbar .stat-chip, :root[data-theme="dark"] .dc-shop-toolbar,:root[data-theme="dark"] .dc-toast{ background:#1c1c1e !important; } } @media (prefers-contrast: more){ .glass,.dc-product-card,.dc-banner,.dc-pill,.dc-brand-chip{ background:#fff !important; border-color:rgba(29,29,31,.35) !important; } .dc-ink-soft,.dc-lead,.dc-muted{ color:var(--dc-ink) !important; } :root[data-theme="dark"] .glass,:root[data-theme="dark"] .dc-product-card, :root[data-theme="dark"] .dc-banner,:root[data-theme="dark"] .dc-pill, :root[data-theme="dark"] .dc-brand-chip{ background:#000 !important; border-color:rgba(255,255,255,.4) !important; } } @media (prefers-reduced-motion: reduce){ .dc-banner-track{ transition:none !important; } } /* ---------- Transición suave al cambiar de tema ---------- */ body.dc, .dc-nav, .dc-footer, .dc-liquid-bg::before, .dc-liquid-bg::after, .dc-field input, .dc-field textarea, .dc-field select, .dc-shop-toolbar .dc-search input, .dc-shop-toolbar select{ transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } @media (prefers-reduced-motion: reduce){ body.dc, .dc-nav, .dc-footer, .dc-field input, .dc-field textarea, .dc-field select, .dc-shop-toolbar .dc-search input, .dc-shop-toolbar select{ transition:none; } }