/* ─────────────────────────────────────────────────────────
ADELIX — Sistema único.
Portado desde /mockup. Las clases preservan el sistema visual.
───────────────────────────────────────────────────────── */
/* ════════════ css/styles.css ════════════ */
/* ──────────────────────────────────────────────────────────
ADELIX — Estilo CORPORATIVO · Empresa B2B
Sistema único compartido entre las 8 páginas del sitio.
────────────────────────────────────────────────────────── */
:root{
--ink:#0F0820;
--body:#3F394E;
--mute:#6C667A;
--bg:#FFFFFF;
--gray:#F4F2F8;
--gray2:#FAFAFC;
--line:#E2DEEA;
--line2:#CFC8DE;
--primary:#5B21B6;
--hover:#4A1A95;
--accent:#7C3AED;
--soft:#EFE9FB;
--green:#16A34A;
--red:#DC2626;
--max:1280px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
font-family:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
color:var(--ink); background:var(--bg);
line-height:1.5; -webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
.mono{ font-family:'Overpass Mono', ui-monospace, Menlo, monospace; }
.container{ max-width:var(--max); margin:0 auto; padding:0 32px; }
/* ─── Topbar ────────────────────────────────────────────── */
.topbar{ background:var(--ink); color:#C9C0DD; font-size:12.5px; letter-spacing:.01em; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:9px; padding-bottom:9px; }
.topbar a{ color:#fff; }
.topbar .pipe{ opacity:.3; margin:0 12px; }
.topbar .left{ display:flex; align-items:center; gap:10px; }
.topbar .left .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.22); }
.topbar .right{ display:flex; align-items:center; }
.topbar-social{ display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0; }
.topbar-social li{ display:flex; }
.topbar-social a{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; color:#fff; opacity:.7; transition:opacity .15s, background .15s; }
.topbar-social a:hover{ opacity:1; background:rgba(255,255,255,.12); }
/* ─── Header ────────────────────────────────────────────── */
.header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); }
.header .container{ display:flex; align-items:center; gap:48px; padding-top:16px; padding-bottom:16px; }
.logo{ display:flex; align-items:center; height:56px; flex:0 0 auto; }
.logo img{ height:56px; width:auto; display:block; }
.nav{ display:flex; gap:34px; flex:1; font-size:14.5px; font-weight:500; color:var(--body); list-style:none; padding:0; margin:0; }
.nav li{ list-style:none; display:contents; }
.nav a{ position:relative; padding:6px 0; transition:color .15s; }
.nav a:hover{ color:var(--ink); }
.nav a.active{ color:var(--ink); font-weight:600; }
.nav a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:2.5px; background:var(--primary); }
.header-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; padding:9px 14px; border:1px solid var(--line2); border-radius:6px; font-size:13px; font-weight:600; color:var(--ink); }
/* ─── Buttons ───────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:6px; font-size:14.5px; font-weight:600; transition:all .15s; white-space:nowrap; letter-spacing:-0.005em; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--hover); transform:translateY(-1px); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-light{ background:#fff; color:var(--ink); border:1px solid var(--line2); }
.btn-light:hover{ border-color:var(--ink); }
.btn-ghost{ color:var(--ink); padding:13px 16px; }
.btn-ghost:hover{ color:var(--primary); }
/* btn-soft: variante secundaria. Fondo blanco/translúcido + border + texto violeta.
Se ve bien en header transparente (home hero oscuro) Y en header sólido (internas). */
.btn-soft{ background:#fff; color:var(--primary); border:1.5px solid var(--primary); }
.btn-soft:hover{ background:var(--primary); color:#fff; }
/* En home con header transparente sobre hero oscuro: mantener legible.
El header solo se vuelve sólido al hacer scroll (body.scrolled) o en internas. */
body:not(.inner):not(.scrolled) .header-cta .btn-soft{ background:rgba(255,255,255,.95); }
/* Ícono del carrito blanco cuando el header es transparente (home hero oscuro). */
body:not(.inner):not(.scrolled) .header-cta .cart-icon-btn{ color:#fff; }
body:not(.inner):not(.scrolled) .header-cta .cart-icon-btn:hover{ background:rgba(255,255,255,.12); color:#fff; }
body:not(.inner):not(.scrolled) .header-cta .cart-icon-btn .cart-icon-badge{ box-shadow:0 0 0 2px rgba(124,58,237,.6); }
/* Botón circular de inicio de sesión (icono persona) */
.account-icon-btn{
display:inline-flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:50%;
color:var(--ink); border:1.5px solid var(--line2);
flex:0 0 auto;
transition:background .15s, color .15s, border-color .15s;
}
.account-icon-btn:hover{ background:var(--soft); color:var(--primary); border-color:var(--primary); }
body:not(.inner):not(.scrolled) .header-cta .account-icon-btn{ color:#fff; border-color:rgba(255,255,255,.45); }
body:not(.inner):not(.scrolled) .header-cta .account-icon-btn:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
.btn .arrow{ transition:transform .2s; }
.btn:hover .arrow{ transform:translateX(3px); }
/* ─── User menu (dropdown del usuario logueado) ─────────── */
.user-menu{ position:relative; }
.user-menu-toggle{ cursor:pointer; }
.user-menu-pop{ position:absolute; top:calc(100% + 6px); right:0; min-width:200px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px rgba(20,8,55,.18); padding:6px; display:flex; flex-direction:column; z-index:60; }
.user-menu-pop a, .user-menu-pop button{ display:block; width:100%; text-align:left; padding:10px 12px; border-radius:6px; font-size:14px; color:var(--ink); background:transparent; border:0; cursor:pointer; }
.user-menu-pop a:hover, .user-menu-pop button:hover{ background:rgba(124,58,237,.08); color:var(--primary); }
/* ─── Auth modal ────────────────────────────────────────── */
.auth-modal-overlay{ position:fixed; inset:0; z-index:80; background:rgba(20,8,55,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; animation:authFadeIn .15s ease-out; }
@keyframes authFadeIn { from { opacity:0 } to { opacity:1 } }
.auth-modal{ position:relative; background:#fff; width:100%; max-width:440px; border-radius:16px; padding:32px 28px 24px; box-shadow:0 24px 64px rgba(20,8,55,.35); animation:authSlide .2s ease-out; }
@keyframes authSlide { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
.auth-modal-close{ position:absolute; top:10px; right:12px; width:32px; height:32px; border:0; background:transparent; font-size:24px; color:var(--mute); cursor:pointer; line-height:1; border-radius:8px; }
.auth-modal-close:hover{ background:rgba(124,58,237,.1); color:var(--primary); }
.auth-modal-tabs{ display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.auth-tab{ flex:1; padding:10px 0; background:transparent; border:0; border-bottom:2px solid transparent; font-size:14px; font-weight:600; color:var(--mute); cursor:pointer; transition:color .15s, border-color .15s; }
.auth-tab--active{ color:var(--primary); border-bottom-color:var(--primary); }
.auth-google{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 18px; background:#fff; border:1px solid var(--line2); border-radius:8px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; transition:all .15s; }
.auth-google:hover{ border-color:var(--ink); background:rgba(0,0,0,.02); }
.auth-google:disabled{ opacity:.6; cursor:not-allowed; }
.auth-divider{ position:relative; text-align:center; margin:18px 0; }
.auth-divider::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--line); }
.auth-divider span{ position:relative; background:#fff; padding:0 12px; font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.05em; }
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.auth-field{ display:flex; flex-direction:column; gap:5px; }
.auth-field > span{ font-size:12px; font-weight:600; color:var(--ink); }
.auth-field input{ padding:10px 12px; border:1px solid var(--line2); border-radius:8px; font-size:14px; outline:none; transition:border-color .15s; }
.auth-field input:focus{ border-color:var(--primary); }
.auth-error{ margin:0; padding:8px 12px; background:rgba(220,38,38,.08); color:#dc2626; border-radius:8px; font-size:13px; }
.auth-form .btn{ margin-top:6px; justify-content:center; }
.auth-footer{ margin:8px 0 0; font-size:13px; color:var(--mute); text-align:center; }
.auth-link{ background:transparent; border:0; color:var(--primary); font-weight:600; cursor:pointer; padding:0; font-size:inherit; }
.auth-link:hover{ text-decoration:underline; }
/* ─── HERO — corporate split ────────────────────────────── */
.hero{ background:var(--gray); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.hero .container{ padding-top:0; padding-bottom:0; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; min-height:600px; align-items:stretch; }
.hero-left{ padding:80px 56px 80px 0; display:flex; flex-direction:column; justify-content:center; }
.hero-tag{ display:inline-flex; align-items:center; gap:9px; padding:6px 13px; background:#fff; border:1px solid var(--line2); border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:24px; align-self:flex-start; }
.hero-tag .badge-num{ font-family:'Overpass Mono', monospace; font-size:11px; padding:2px 7px; background:var(--soft); color:var(--primary); border-radius:4px; }
.hero h1{ font-size:60px; line-height:1.04; letter-spacing:-0.03em; font-weight:700; margin:0 0 22px; color:var(--ink); }
.hero h1 .accent{ color:var(--primary); }
.hero-lead{ font-size:18px; line-height:1.55; color:var(--body); max-width:540px; margin:0 0 32px; }
.hero-ctas{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:48px; }
.hero-trust-row{ display:flex; gap:36px; padding-top:28px; border-top:1px solid var(--line); }
.hero-trust-item{ display:flex; flex-direction:column; gap:4px; }
.hero-trust-item .num{ font-size:24px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.1; font-feature-settings:"tnum"; }
.hero-trust-item .lab{ font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.07em; font-weight:500; }
.hero-right{ position:relative; min-height:520px; }
.hero-right img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-card{ position:absolute; left:32px; bottom:32px; right:32px; background:#fff; border-radius:10px; padding:22px 24px; box-shadow:0 24px 60px -24px rgba(15,8,32,.4); border-top:3px solid var(--primary); }
.hero-card .tag{ font-size:11px; color:var(--primary); font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.hero-card h4{ margin:8px 0 6px; font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-0.015em; }
.hero-card p{ margin:0; font-size:14px; color:var(--body); line-height:1.5; }
.hero-card .row{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center; }
.hero-card .row strong{ font-family:'Overpass Mono', monospace; font-size:13px; color:var(--ink); font-weight:600; }
.hero-card .row a{ font-size:13px; font-weight:600; color:var(--primary); }
/* ─── Page header (inner pages) ─────────────────────────── */
.page-header{ background:var(--gray); border-bottom:1px solid var(--line); padding:56px 0 48px; }
/* Variante banda full-width pegada arriba, esquinas inferiores redondeadas (Contacto) */
.page-header.is-rounded{
background:linear-gradient(180deg, #F7F4FC 0%, var(--gray) 100%);
border-bottom:0;
border-radius:0 0 28px 28px;
}
@media (max-width:760px){ .page-header.is-rounded{ border-radius:0 0 20px 20px; } }
.crumbs{ display:none; }
.page-header .crumbs{ font-family:'Overpass Mono', monospace; font-size:12.5px; color:var(--mute); margin-bottom:14px; letter-spacing:.02em; }
.page-header .crumbs a{ color:var(--primary); }
.page-header h1{ font-size:46px; line-height:1.08; letter-spacing:-0.025em; font-weight:700; margin:0; color:var(--ink); max-width:880px; }
.page-header h1 .accent{ color:var(--primary); }
.page-header p{ font-size:17px; color:var(--body); max-width:680px; margin:14px 0 0; line-height:1.55; }
.page-header-split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.page-header-quote{ font-size:22px; font-style:italic; line-height:1.4; letter-spacing:-0.01em; color:var(--ink); margin:0; padding-left:24px; border-left:3px solid var(--primary); }
.page-header-quote .accent{ color:var(--primary); font-style:normal; font-weight:700; }
@media (max-width:760px){
.page-header-split{ grid-template-columns:1fr; gap:24px; }
.page-header-quote{ font-size:19px; }
}
/* ─── Cert/Trust band ───────────────────────────────────── */
.cert{ background:#fff; border-bottom:1px solid var(--line); padding:36px 0; }
.cert .container{ display:flex; align-items:center; gap:48px; }
.cert-label{ flex:0 0 220px; font-size:13px; color:var(--mute); line-height:1.5; }
.cert-label strong{ display:block; color:var(--ink); font-weight:600; font-size:14px; margin-bottom:2px; }
.cert-row{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:center; }
.cert-item{ display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--line); border-radius:8px; background:var(--gray2); }
.cert-item-icon{ width:36px; height:36px; flex:0 0 auto; border-radius:7px; background:var(--soft); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.cert-item-text{ font-size:12.5px; line-height:1.35; color:var(--body); }
.cert-item-text strong{ display:block; color:var(--ink); font-size:13px; }
/* ─── Sections ──────────────────────────────────────────── */
.section{ padding:96px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:48px; margin-bottom:48px; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px; }
.eyebrow::before{ content:''; width:22px; height:1.5px; background:var(--primary); }
.section-head h2{ font-size:46px; line-height:1.08; letter-spacing:-0.025em; font-weight:700; margin:0 0 14px; max-width:680px; }
.section-head h2 .accent{ color:var(--primary); }
.section-head .sub{ font-size:17px; color:var(--body); max-width:520px; margin:0; line-height:1.55; }
/* ─── Servicios (4-col grid, corporate) ─────────────────── */
.services{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--line); }
.svc{ background:#fff; padding:36px 28px 32px; display:flex; flex-direction:column; gap:14px; min-height:340px; transition:background .2s; cursor:pointer; }
.svc:hover{ background:var(--gray2); }
.svc-num{ font-family:'Overpass Mono', monospace; font-size:12px; color:var(--mute); letter-spacing:.06em; font-weight:600; }
.svc-icon{ width:48px; height:48px; border-radius:10px; background:var(--soft); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; }
.svc-icon svg{ width:24px; height:24px; }
.svc h3{ font-size:19px; font-weight:700; letter-spacing:-0.015em; margin:0; color:var(--ink); line-height:1.25; }
.svc p{ font-size:14.5px; line-height:1.55; color:var(--body); margin:0; }
.svc-link{ margin-top:auto; padding-top:14px; font-size:13.5px; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.svc-link .arrow{ transition:transform .2s; }
.svc:hover .svc-link .arrow{ transform:translateX(3px); }
/* ─── Catálogo (sober grid, no bento) ───────────────────── */
.cats{ background:var(--gray); }
.cats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cat{ position:relative; overflow:hidden; border-radius:12px; aspect-ratio:5/4; background:var(--ink); display:block; }
.cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.86; transition:opacity .3s, transform 1.4s ease; }
.cat:hover img{ opacity:1; transform:scale(1.04); }
.cat-veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,8,32,0) 35%, rgba(15,8,32,.85) 100%); }
.cat-meta{ position:absolute; left:24px; right:24px; bottom:22px; color:#fff; }
.cat-num{ font-family:'Overpass Mono', monospace; font-size:11.5px; color:rgba(255,255,255,.7); letter-spacing:.05em; margin-bottom:6px; }
.cat h3{ font-size:24px; font-weight:700; letter-spacing:-0.015em; margin:0 0 4px; line-height:1.15; }
.cat-count{ font-size:13.5px; color:rgba(255,255,255,.78); }
.cat-arrow{ position:absolute; right:18px; top:18px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:16px; transition:all .15s; }
.cat:hover .cat-arrow{ background:#fff; color:var(--ink); }
/* ─── Productos · carrusel + grid catálogo ──────────────── */
.carousel{ position:relative; }
.carousel-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 0 24px; margin:0 -32px; padding-left:32px; padding-right:32px; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar{ display:none; }
.prods-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.prod{ flex:0 0 286px; scroll-snap-align:start; background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--line); transition:all .2s; display:flex; flex-direction:column; }
.prods-grid .prod{ flex:initial; }
.prod:hover{ box-shadow:0 18px 40px -22px rgba(15,8,32,.16); border-color:var(--line2); }
.prod-img{ position:relative; aspect-ratio:1/1; background:var(--gray2); overflow:hidden; }
.prod-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.prod:hover .prod-img img{ transform:scale(1.04); }
.prod-tag{ position:absolute; top:12px; left:12px; padding:5px 10px; background:#fff; border-radius:4px; font-size:11px; font-weight:700; color:var(--primary); letter-spacing:.04em; text-transform:uppercase; }
.prod-tag.bestseller{ background:var(--primary); color:#fff; }
.prod-tag.new{ background:var(--ink); color:#fff; }
.prod-stock{ position:absolute; top:12px; right:12px; padding:4px 9px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-radius:4px; font-size:11px; font-weight:600; color:var(--green); display:inline-flex; align-items:center; gap:5px; }
.prod-stock::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--green); }
.prod-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.prod-code{ font-family:'Overpass Mono', monospace; font-size:11px; color:var(--mute); margin-bottom:8px; letter-spacing:.04em; font-weight:500; }
.prod h4{ margin:0 0 8px; font-size:16px; font-weight:600; color:var(--ink); line-height:1.3; letter-spacing:-0.01em; min-height:42px; }
.prod-cat{ font-size:12.5px; color:var(--primary); font-weight:500; }
.prod-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.prod-foot .id{ font-family:'Overpass Mono', monospace; font-size:11px; color:var(--mute); }
.prod-foot a{ font-size:13px; font-weight:600; color:var(--ink); }
.prod-foot a:hover{ color:var(--primary); }
.carousel-nav{ display:flex; gap:8px; }
.carousel-nav button{ width:42px; height:42px; border-radius:6px; border:1px solid var(--line2); background:#fff; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; transition:all .15s; font-size:18px; }
.carousel-nav button:hover{ border-color:var(--primary); color:var(--primary); }
/* ─── Catálogo: layout con filtros laterales ────────────── */
.catalog-layout{ display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:flex-start; }
.filters{ position:sticky; top:96px; }
.filters h4{ font-size:12.5px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px; }
.filters ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.filters button{ width:100%; text-align:left; padding:10px 14px; border:1px solid transparent; border-radius:7px; font-size:14px; font-weight:500; color:var(--body); transition:all .15s; }
.filters button:hover{ background:var(--gray); color:var(--ink); }
.filters button.active{ background:var(--soft); color:var(--primary); border-color:var(--line2); font-weight:600; }
/* ─── Dual model ────────────────────────────────────────── */
.dual-wrap{ background:var(--gray); }
.dual{ display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.dual-card{ padding:44px 40px; display:flex; flex-direction:column; gap:14px; min-height:440px; position:relative; border-right:1px solid var(--line); }
.dual-card:last-child{ border-right:0; }
.dual-card.dark{ background:var(--ink); color:#fff; border:0; }
.dual-card .dual-tag{ font-family:'Overpass Mono', monospace; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; background:var(--soft); color:var(--primary); border-radius:4px; align-self:flex-start; }
.dual-card.dark .dual-tag{ background:rgba(212,188,252,.18); color:#D4BCFC; }
.dual-card h3{ font-size:30px; font-weight:700; letter-spacing:-0.02em; margin:8px 0 6px; line-height:1.1; }
.dual-card.dark h3{ color:#fff; }
.dual-card > p{ font-size:15px; color:var(--body); margin:0; line-height:1.55; }
.dual-card.dark > p{ color:#B4A6D2; }
.dual-list{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:11px; }
.dual-list li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--body); }
.dual-card.dark .dual-list li{ color:#D8CFE9; }
.dual-list li::before{ content:''; flex:0 0 auto; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--soft) url("data:image/svg+xml;utf8,") center/11px no-repeat; }
.dual-card.dark .dual-list li::before{ background:rgba(212,188,252,.16) url("data:image/svg+xml;utf8,") center/11px no-repeat; }
.dual-foot{ margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; }
.dual-foot a{ font-size:14px; font-weight:600; color:var(--primary); display:inline-flex; gap:6px; align-items:center; }
.dual-card.dark .dual-foot a{ color:#D4BCFC; }
.dual-foot small{ font-family:'Overpass Mono', monospace; font-size:11px; color:var(--mute); }
.dual-card.dark .dual-foot small{ color:#7E73A1; }
/* ─── KPIs / banda con datos ────────────────────────────── */
.kpi{ background:var(--ink); color:#fff; padding:64px 0; }
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.kpi-item{ padding:0 32px; border-right:1px solid rgba(255,255,255,.1); }
.kpi-item:last-child{ border-right:0; }
.kpi-tag{ font-family:'Overpass Mono', monospace; font-size:11px; color:#D4BCFC; letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin-bottom:14px; }
.kpi-title{ font-size:22px; font-weight:700; letter-spacing:-0.02em; line-height:1.15; color:#fff; margin-bottom:10px; }
.kpi-lab{ font-size:14px; color:#C9C0DD; line-height:1.5; }
/* ─── Process / cotización ──────────────────────────────── */
.process-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:80px; align-items:center; }
.process-img{ aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:#eee; position:relative; }
.process-img img{ width:100%; height:100%; object-fit:cover; }
.process-img .float{ position:absolute; left:24px; bottom:24px; background:#fff; padding:16px 20px; border-radius:8px; box-shadow:0 12px 30px -10px rgba(15,8,32,.3); display:flex; align-items:center; gap:14px; }
.process-img .float .ic{ width:42px; height:42px; border-radius:50%; background:var(--soft); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.process-img .float strong{ display:block; font-size:14px; color:var(--ink); }
.process-img .float span{ font-size:12.5px; color:var(--mute); }
.process h2{ font-size:42px; line-height:1.06; letter-spacing:-0.025em; font-weight:700; margin:0 0 16px; color:var(--ink); }
.process h2 .accent{ color:var(--primary); }
.process > p{ font-size:17px; color:var(--body); margin:0 0 32px; line-height:1.55; }
.process-steps{ display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
.process-step{ display:flex; gap:18px; align-items:flex-start; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:10px; transition:all .2s; }
.process-step:hover{ border-color:var(--primary); }
.process-num{ flex:0 0 auto; width:36px; height:36px; border-radius:6px; background:var(--soft); color:var(--primary); font-family:'Overpass Mono', monospace; font-weight:600; font-size:14px; display:inline-flex; align-items:center; justify-content:center; }
.process-step strong{ display:block; font-size:16px; color:var(--ink); margin-bottom:3px; font-weight:600; }
.process-step span{ font-size:14px; color:var(--body); line-height:1.5; }
/* ─── News ──────────────────────────────────────────────── */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post{ display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:all .2s; }
.post:hover{ border-color:var(--line2); box-shadow:0 14px 30px -18px rgba(15,8,32,.16); }
.post-img{ aspect-ratio:16/10; overflow:hidden; background:var(--gray); }
.post-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.post:hover .post-img img{ transform:scale(1.04); }
.post-body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; }
.post-meta{ display:flex; align-items:center; gap:10px; font-family:'Overpass Mono', monospace; font-size:11.5px; color:var(--mute); }
.post-tag{ color:var(--primary); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.post h3{ font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-0.01em; margin:0; color:var(--ink); }
.post p{ font-size:14px; color:var(--body); line-height:1.55; margin:0; }
.post-link{ font-size:13.5px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
.post-link:hover{ color:var(--primary); }
/* ─── Empty state ───────────────────────────────────────── */
.empty{ background:#fff; border:1px dashed var(--line2); border-radius:12px; padding:48px 32px; text-align:center; color:var(--mute); }
.empty strong{ display:block; color:var(--ink); font-size:16px; margin-bottom:6px; }
/* ─── CTA band ──────────────────────────────────────────── */
.cta-band{ background:var(--ink); color:#fff; }
.cta-band .container{ padding:64px 32px; display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; }
.cta-band h2{ font-size:38px; line-height:1.08; letter-spacing:-0.025em; margin:0; color:#fff; font-weight:700; }
.cta-band h2 .accent{ color:#D4BCFC; }
.cta-band p{ font-size:16px; color:#B4A6D2; margin:14px 0 0; max-width:540px; }
.cta-band-right{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.cta-band .btn-primary{ background:#fff; color:var(--ink); padding:16px 28px; font-size:15px; }
.cta-band .btn-primary:hover{ background:var(--soft); }
.cta-band-contact{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:#B4A6D2; }
.cta-band-contact strong{ color:#fff; font-weight:600; font-size:14.5px; }
/* ─── Forms ─────────────────────────────────────────────── */
.form{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:32px 32px 28px; display:flex; flex-direction:column; gap:18px; }
.form h3{ margin:0 0 4px; font-size:18px; font-weight:700; color:var(--ink); }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-0.005em; }
.form-row input, .form-row select, .form-row textarea{
font-family:inherit; font-size:14.5px; color:var(--ink);
padding:12px 14px; border:1px solid var(--line); border-radius:7px;
background:var(--gray2); transition:border-color .15s, background .15s;
outline:none;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
border-color:var(--primary); background:#fff;
}
.form-row textarea{ resize:vertical; min-height:130px; line-height:1.5; }
.form-row .help{ font-size:12px; color:var(--mute); }
.form-status{ font-size:14px; min-height:1em; }
.form-status.ok{ color:var(--green); font-weight:600; }
.form-status.err{ color:var(--red); font-weight:600; }
/* ─── Prose (código de ética y similar) ─────────────────── */
.prose{ max-width:780px; margin:0 auto; }
.prose p{ font-size:16px; line-height:1.7; color:var(--body); margin:0 0 18px; }
.prose h2{ font-size:24px; line-height:1.2; letter-spacing:-0.015em; font-weight:700; color:var(--ink); margin:40px 0 14px; }
/* Defensivo: si una .cta-band o .section queda dentro de .prose, reset de specificity. */
.prose .cta-band, .prose .section{ max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.prose .cta-band h2{ font-size:38px; color:#fff; margin:0; line-height:1.08; }
.prose .cta-band p{ color:#B4A6D2; margin:14px 0 0; font-size:16px; line-height:1.55; }
.prose .cta-band h2 .accent{ color:#D4BCFC; }
.prose ul{ padding-left:22px; color:var(--body); font-size:16px; line-height:1.7; margin:0 0 18px; }
.prose ul li{ margin-bottom:6px; }
.prose a{ color:var(--primary); font-weight:600; }
.prose a:hover{ text-decoration:underline; }
/* ─── Two-col simple ────────────────────────────────────── */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.two-col img{ border-radius:14px; aspect-ratio:5/4; object-fit:cover; width:100%; }
/* ─── Values grid (Quiénes somos) ───────────────────────── */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--line); }
.value{ background:#fff; padding:30px 26px; display:flex; flex-direction:column; gap:10px; min-height:200px; }
.value .num{ font-family:'Overpass Mono', monospace; font-size:11.5px; color:var(--primary); font-weight:600; letter-spacing:.06em; }
.value h3{ font-size:18px; font-weight:700; color:var(--ink); margin:0; letter-spacing:-0.015em; }
.value p{ font-size:14.5px; color:var(--body); line-height:1.55; margin:0; }
/* ─── FAQ / accordion ───────────────────────────────────── */
.faq{ display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.faq-item{ border-bottom:1px solid var(--line); padding:22px 28px; }
.faq-item:last-child{ border-bottom:0; }
.faq-item h3{ font-size:16px; font-weight:700; color:var(--ink); margin:0 0 8px; letter-spacing:-0.005em; }
.faq-item p{ font-size:14.5px; color:var(--body); line-height:1.6; margin:0; }
/* ─── Contact info column ───────────────────────────────── */
.contact-info{ display:grid; grid-template-columns:repeat(auto-fit, minmax(208px,1fr)); gap:16px; margin:0 0 44px; }
.contact-card{
display:flex; flex-direction:column; gap:12px;
padding:24px 22px;
background:#fff;
border:1px solid var(--line);
border-radius:14px;
box-shadow:0 16px 40px -16px rgba(15,8,32,.18);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -20px rgba(35,8,79,.28); border-color:var(--line2); }
.contact-card .ic{ width:46px; height:46px; flex:0 0 auto; border-radius:12px; background:var(--soft); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; }
.contact-card .ic svg{ width:22px; height:22px; }
.contact-card strong{ display:block; font-size:15px; color:var(--ink); letter-spacing:-0.005em; line-height:1.25; }
.contact-card span, .contact-card a{ font-size:14px; color:var(--body); line-height:1.45; }
.contact-card a:hover{ color:var(--primary); }
/* ─── Denuncia info column ──────────────────────────────── */
.denuncia-info ol{ padding-left:22px; color:var(--body); font-size:15px; line-height:1.6; display:grid; gap:8px; margin:0 0 24px; }
.denuncia-info ol li::marker{ color:var(--primary); font-weight:700; }
.denuncia-info .callout{ padding:20px 22px; background:var(--soft); border:1px solid var(--line2); border-radius:10px; }
.denuncia-info .callout strong{ display:block; font-size:14.5px; color:var(--primary); margin-bottom:4px; }
.denuncia-info .callout p{ font-size:14px; color:var(--body); margin:0; line-height:1.55; }
/* ─── Página de producto (PDP) ──────────────────────────── */
.pdp{ padding:48px 0 80px; }
.pdp-grid{ display:grid; grid-template-columns:0.85fr 1fr; gap:56px; align-items:flex-start; }
.pdp-gallery{ display:flex; flex-direction:column; gap:12px; max-width:440px; }
.pdp-main-img{ aspect-ratio:1/1; background:var(--gray2); border:1px solid var(--line); border-radius:14px; overflow:hidden; position:relative; }
.pdp-main-img img{ width:100%; height:100%; object-fit:cover; }
.pdp-main-img .badge{ position:absolute; top:18px; left:18px; padding:6px 12px; background:var(--primary); color:#fff; border-radius:5px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.pdp-thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.pdp-thumb{ aspect-ratio:1/1; background:var(--gray2); border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; transition:border-color .15s; }
.pdp-thumb.active, .pdp-thumb:hover{ border-color:var(--primary); }
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-info .crumbs{ font-family:'Overpass Mono', monospace; font-size:12.5px; color:var(--mute); margin-bottom:14px; letter-spacing:.02em; }
.pdp-info .crumbs a{ color:var(--primary); }
.pdp-info .cat-tag{ display:inline-flex; align-items:center; padding:5px 11px; background:var(--soft); color:var(--primary); border-radius:5px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.pdp-info h1{ font-size:36px; line-height:1.1; letter-spacing:-0.025em; font-weight:700; margin:14px 0 12px; color:var(--ink); }
.pdp-meta{ display:flex; align-items:center; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.pdp-code{ font-family:'Overpass Mono', monospace; font-size:12.5px; color:var(--mute); }
.rating{ display:flex; align-items:center; gap:8px; }
.stars{ display:inline-flex; gap:1px; color:#F59E0B; font-size:16px; line-height:1; }
.stars .empty{ color:var(--line2); }
.rating .num{ font-size:13.5px; font-weight:600; color:var(--ink); }
.rating .reviews{ font-size:13px; color:var(--mute); }
.pdp-stock{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--green); }
.pdp-stock::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--green); }
.price-box{ background:var(--gray2); border:1px solid var(--line); border-radius:12px; padding:24px 26px; margin:22px 0; }
.price-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.price-old{ font-size:15px; color:var(--mute); text-decoration:line-through; }
.price-now{ font-size:34px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1; }
.price-now .currency{ font-size:18px; color:var(--mute); font-weight:600; margin-right:4px; }
.price-disc{ padding:3px 9px; background:var(--soft); color:var(--primary); border-radius:4px; font-size:12px; font-weight:700; }
.price-note{ font-size:12.5px; color:var(--mute); margin-top:8px; line-height:1.5; }
.price-note strong{ color:var(--ink); font-weight:600; }
.pdp-qty{ display:flex; align-items:center; gap:14px; margin:18px 0 22px; }
.pdp-qty label{ font-size:13.5px; font-weight:600; color:var(--ink); }
.qty-input{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fff; }
.qty-input button{ width:40px; height:42px; background:none; font-size:18px; color:var(--ink); transition:background .15s; }
.qty-input button:hover{ background:var(--gray); color:var(--primary); }
.qty-input input{ width:56px; height:42px; text-align:center; border:0; font-family:'Overpass Mono', monospace; font-size:15px; font-weight:600; color:var(--ink); background:#fff; outline:none; }
.pdp-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.pdp-actions .btn{ flex:1; min-width:200px; justify-content:center; padding:15px 22px; font-size:15px; }
.pdp-highlights{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding-top:22px; border-top:1px solid var(--line); }
.pdp-hl{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; }
.pdp-hl .ic{ width:32px; height:32px; flex:0 0 auto; border-radius:7px; background:var(--soft); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; font-family:'Overpass Mono', monospace; }
.pdp-hl strong{ display:block; font-size:13.5px; color:var(--ink); margin-bottom:1px; }
.pdp-hl span{ font-size:12.5px; color:var(--body); line-height:1.4; }
/* ─── Tabs (descripción / specs / envío) ────────────────── */
.pdp-tabs{ margin-top:64px; }
.tabs-nav{ display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:32px; }
.tabs-nav button{ padding:14px 24px; font-size:14.5px; font-weight:600; color:var(--mute); border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:all .15s; }
.tabs-nav button.active{ color:var(--ink); border-color:var(--primary); }
.tabs-nav button:hover{ color:var(--ink); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.tab-panel p{ font-size:15px; line-height:1.7; color:var(--body); margin:0 0 14px; max-width:780px; }
.tab-panel ul{ font-size:15px; line-height:1.7; color:var(--body); padding-left:20px; }
.tab-panel ul li{ margin-bottom:4px; }
.specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; max-width:880px; }
.specs-row{ display:contents; }
.specs-row dt{ background:var(--gray2); padding:14px 22px; font-size:13.5px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.specs-row dd{ background:#fff; padding:14px 22px; font-size:14px; color:var(--body); margin:0; border-bottom:1px solid var(--line); }
.specs-row:last-child dt, .specs-row:last-child dd{ border-bottom:0; }
/* ─── Reviews resumen ───────────────────────────────────── */
.reviews-summary{ display:grid; grid-template-columns:240px 1fr; gap:48px; padding:32px; background:var(--gray2); border:1px solid var(--line); border-radius:12px; margin-bottom:32px; }
.reviews-score{ text-align:center; }
.reviews-score .big{ font-size:60px; font-weight:700; letter-spacing:-0.03em; color:var(--ink); line-height:1; }
.reviews-score .stars{ font-size:22px; margin:8px 0; justify-content:center; }
.reviews-score .total{ font-size:13px; color:var(--mute); }
.reviews-bars{ display:flex; flex-direction:column; gap:8px; }
.reviews-bar{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--body); }
.reviews-bar .lab{ width:50px; }
.reviews-bar .track{ flex:1; height:8px; background:var(--line); border-radius:99px; overflow:hidden; }
.reviews-bar .fill{ height:100%; background:var(--primary); border-radius:99px; }
.reviews-bar .pct{ font-family:'Overpass Mono', monospace; font-size:12px; color:var(--mute); width:38px; text-align:right; }
.review{ padding:22px 0; border-bottom:1px solid var(--line); }
.review:last-child{ border-bottom:0; }
.review-head{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.review-avatar{ width:38px; height:38px; border-radius:50%; background:var(--soft); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.review-author{ font-size:14px; font-weight:600; color:var(--ink); }
.review-date{ font-family:'Overpass Mono', monospace; font-size:11.5px; color:var(--mute); margin-left:auto; }
.review-text{ font-size:14.5px; color:var(--body); line-height:1.6; margin:0; }
/* ─── Footer ────────────────────────────────────────────── */
.footer{ background:var(--gray2); border-top:1px solid var(--line); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:48px; }
.footer h5{ font-size:12.5px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.08em; margin:0 0 18px; }
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer li, .footer p{ font-size:14px; color:var(--body); margin:0; line-height:1.55; }
.footer a:hover{ color:var(--primary); }
.footer-brand img{ height:46px; margin-bottom:20px; }
.footer-brand p{ max-width:300px; }
.footer-socials{ display:flex; gap:8px; margin-top:18px; }
.footer-soc{ width:36px; height:36px; border:1px solid var(--line2); border-radius:7px; display:inline-flex; align-items:center; justify-content:center; color:var(--body); font-size:12px; font-weight:700; transition:all .15s; }
.footer-soc:hover{ border-color:var(--primary); color:var(--primary); background:#fff; }
.footer-bottom{ margin-top:56px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--mute); }
.footer-bottom .mono{ font-size:12.5px; }
/* ─── Responsive ────────────────────────────────────────── */
@media (max-width:1180px){
.nav{ gap:22px; font-size:14px; }
.header .container{ gap:24px; }
.header-cta .btn-ghost{ display:none; }
.prods-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1100px){
.hero h1{ font-size:46px; }
.hero-grid{ grid-template-columns:1fr; min-height:auto; }
.hero-left{ padding:64px 0; }
.hero-right{ min-height:420px; }
.section-head h2{ font-size:36px; }
.page-header h1{ font-size:36px; }
.services{ grid-template-columns:repeat(2,1fr); }
.kpi-grid{ grid-template-columns:repeat(2,1fr); gap:32px; }
.kpi-item{ border-right:0; }
.cert-row{ grid-template-columns:repeat(2,1fr); }
.catalog-layout{ grid-template-columns:1fr; }
.filters{ position:static; }
.filters ul{ flex-direction:row; flex-wrap:wrap; }
.filters button{ width:auto; }
.two-col{ grid-template-columns:1fr; gap:32px; }
.values{ grid-template-columns:repeat(2,1fr); }
.pdp-grid{ grid-template-columns:1fr; gap:32px; }
.reviews-summary{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:980px){
.nav{ display:none; }
.nav.open{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; padding:18px 32px; border-bottom:1px solid var(--line); gap:14px; }
.nav-toggle{ display:inline-flex; }
.header-cta .btn-primary{ padding:11px 18px; font-size:14px; }
.prods-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
.container{ padding:0 20px; }
.header .container{ gap:18px; }
.header-cta .btn-ghost{ display:none; }
.logo img{ height:48px; }
.hero h1{ font-size:36px; }
.section{ padding:64px 0; }
.section-head{ flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:36px; }
.section-head h2{ font-size:28px; }
.page-header h1{ font-size:28px; }
.services{ grid-template-columns:1fr; }
.cats-grid{ grid-template-columns:1fr; }
.dual{ grid-template-columns:1fr; }
.dual-card{ border-right:0; border-bottom:1px solid var(--line); }
.news-grid{ grid-template-columns:1fr; }
.process-grid{ grid-template-columns:1fr; gap:40px; }
.cta-band .container{ grid-template-columns:1fr; padding:48px 20px; }
.footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
.cert .container{ flex-direction:column; align-items:flex-start; gap:24px; }
.cert-label{ flex:none; }
.values{ grid-template-columns:1fr; }
.prods-grid{ grid-template-columns:1fr; }
.pdp-info h1{ font-size:26px; }
.price-now{ font-size:28px; }
.pdp-highlights{ grid-template-columns:1fr; }
.specs{ grid-template-columns:1fr; }
.specs-row dt{ border-right:0; }
.tabs-nav{ overflow-x:auto; white-space:nowrap; }
.tabs-nav button{ padding:14px 18px; font-size:13.5px; }
}
/* ════════════ css/v3.css ════════════ */
/* ──────────────────────────────────────────────────────────
V3 — Enfoque comercial · menos texto, más impacto.
────────────────────────────────────────────────────────── */
:root{
--shadow-sm: 0 2px 6px -2px rgba(15,8,32,.06), 0 1px 2px rgba(15,8,32,.04);
--shadow-md: 0 12px 28px -10px rgba(15,8,32,.16), 0 4px 10px -4px rgba(15,8,32,.08);
--shadow-lg: 0 28px 60px -20px rgba(15,8,32,.28), 0 12px 24px -10px rgba(15,8,32,.12);
--radius:14px;
--radius-sm:10px;
--header-h:72px;
--topbar-h:36px;
}
body{ font-family:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.hero h1, .section-head h2, .cta-band h2{ font-weight:700; letter-spacing:-0.03em; font-feature-settings:"ss01","cv11"; }
/* ─── Topbar slim ───────────────────────────────────── */
.topbar{
position:fixed; top:0; left:0; right:0; z-index:60;
height:var(--topbar-h);
background:transparent;
color:#fff; font-size:12.5px; letter-spacing:.01em;
border-bottom:1px solid rgba(255,255,255,.08);
transition:background .25s ease, border-color .25s ease, transform .3s ease;
}
body.topbar-hidden .topbar{ transform:translateY(-100%); }
.topbar .container{ height:100%; display:flex; justify-content:space-between; align-items:center; padding-top:0; padding-bottom:0; }
.topbar a{ color:#fff; }
.topbar .pipe{ opacity:.3; margin:0 12px; }
.topbar .left{ display:flex; align-items:center; gap:10px; }
.topbar .left .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.22); }
body.scrolled .topbar{ background:var(--ink); border-bottom-color:rgba(255,255,255,.04); }
/* WordPress admin bar offset: empuja topbar y header debajo de la wpadminbar. */
body.admin-bar .topbar{ top:32px; }
body.admin-bar .header{ top:calc(var(--topbar-h) + 32px); }
@media screen and (max-width:782px){
body.admin-bar .topbar{ top:46px; }
body.admin-bar .header{ top:calc(var(--topbar-h) + 46px); }
}
/* ─── Header (transparent → white on scroll) ────────── */
.header{
position:fixed; top:var(--topbar-h); left:0; right:0; z-index:55;
height:var(--header-h);
background:transparent;
border-bottom:1px solid transparent;
box-shadow:none;
transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease, transform .3s ease;
}
body.topbar-hidden .header{ transform:translateY(calc(-100% - var(--topbar-h))); }
body.admin-bar.topbar-hidden .header{ transform:translateY(calc(-100% - var(--topbar-h) - 32px)); }
@media screen and (max-width:782px){
body.admin-bar.topbar-hidden .header{ transform:translateY(calc(-100% - var(--topbar-h) - 46px)); }
}
.header .container{ height:100%; display:flex; align-items:center; gap:36px; padding-top:0; padding-bottom:0; }
.logo{ display:flex; align-items:center; height:44px; flex:0 0 auto; }
.logo img{
height:44px; width:auto;
transition:filter .25s ease;
filter:brightness(0) invert(1);
}
.nav{
display:flex; gap:32px; flex:1;
font-size:14px; font-weight:500;
color:rgba(255,255,255,.78);
transition:color .25s ease;
}
.nav a{ position:relative; padding:6px 0; transition:color .15s; color:inherit; }
.nav a:hover{ color:#fff; }
.nav a.active{ color:#fff; font-weight:600; }
.nav a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:#fff; border-radius:2px; }
.header-cta{ display:flex; align-items:center; gap:10px; }
.header-cta .btn-ghost{ display:none; }
.header-cta .btn-primary{
background:#fff; color:var(--ink);
padding:11px 18px; font-size:13.5px;
border-radius:8px;
box-shadow:0 8px 20px -10px rgba(0,0,0,.4);
}
.header-cta .btn-primary:hover{ background:#F4F2F8; transform:translateY(-1px); }
body.scrolled .header{
background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(14px);
border-bottom-color:rgba(15,8,32,.06);
box-shadow:0 1px 0 rgba(15,8,32,.02);
}
body.scrolled .header .logo img{ filter:none; }
body.scrolled .nav{ color:var(--body); }
body.scrolled .nav a:hover{ color:var(--ink); }
body.scrolled .nav a.active{ color:var(--ink); }
body.scrolled .nav a.active::after{ background:var(--primary); }
body.scrolled .header-cta .btn-primary{
background:var(--primary); color:#fff;
box-shadow:0 8px 20px -10px rgba(91,33,182,.45);
}
body.scrolled .header-cta .btn-primary:hover{ background:var(--hover); }
.nav-toggle{ display:none; padding:9px 14px; border:1px solid var(--line2); border-radius:6px; font-size:13px; font-weight:600; color:var(--ink); }
/* ════════════ css/v3-hero.css ════════════ */
/* ─── Kicker — pura tipografía ────────────────────────── */
.eyebrow{ display:none !important; }
.kicker{
display:inline-block;
font-family:'Onest', sans-serif;
font-size:13px; font-weight:700;
color:var(--primary);
text-transform:uppercase;
letter-spacing:.2em;
margin-bottom:24px;
background:none; padding:0; border-radius:0;
}
.cta-band .kicker, .subscribe .kicker{ color:#C4A6FF; }
.section-head{ margin-bottom:64px; align-items:flex-end; }
.section-head h2{ font-size:52px; line-height:1.02; letter-spacing:-0.035em; max-width:780px; font-weight:700; }
.section-head .sub{ font-size:17px; max-width:480px; line-height:1.6; }
.section-head .section-cta{ flex:0 0 auto; align-self:flex-end; padding:13px 22px; font-size:14px; }
/* ─── HERO inmersivo · full viewport ────────────────── */
.hero-immersive{
position:relative;
min-height:100vh;
background:var(--ink);
color:#fff;
overflow:hidden;
isolation:isolate;
padding-bottom:128px;
border-bottom-left-radius:40px;
border-bottom-right-radius:40px;
}
.hero-immersive .container{
position:relative; z-index:2;
min-height:100vh;
display:flex; flex-direction:column; justify-content:center;
padding-top:calc(var(--topbar-h) + var(--header-h) + 24px);
padding-bottom:60px;
}
.hero-bg{
position:absolute; inset:0; z-index:0;
background-image:url('../img/home-hero.jpg');
background-size:cover; background-position:center;
filter:saturate(.85) brightness(.5);
transform:scale(1.04);
will-change:transform;
}
.hero-overlay{
position:absolute; inset:0; z-index:1;
background:
linear-gradient(95deg, rgba(15,8,32,.94) 0%, rgba(15,8,32,.78) 35%, rgba(15,8,32,.45) 70%, rgba(15,8,32,.65) 100%),
radial-gradient(120% 80% at 25% 30%, rgba(91,33,182,.35) 0%, rgba(15,8,32,0) 60%);
}
.hero-content{ max-width:880px; }
.hero-keywords{
display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
font-size:13px; font-weight:700;
color:rgba(196,166,255,.9);
text-transform:uppercase;
letter-spacing:.22em;
margin-bottom:36px;
}
.hero-keywords .sep{
width:5px; height:5px; border-radius:50%;
background:rgba(196,166,255,.5);
display:inline-block;
}
.hero-immersive h1{
font-size:88px; line-height:0.98; letter-spacing:-0.038em;
color:#fff; margin:0 0 32px;
font-weight:600;
text-wrap:balance;
max-width:880px;
}
.hero-immersive h1 .brand-name{
display:inline-block;
font-weight:800;
letter-spacing:-0.04em;
background:none !important;
background-clip:initial !important;
-webkit-background-clip:initial !important;
color:#C4A6FF !important;
}
.hero-immersive .hero-tagline{
font-size:18px; line-height:1.5;
color:rgba(255,255,255,.7);
margin:0 0 44px;
max-width:540px;
}
.hero-ctas{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.hero-immersive .btn-primary{
background:#fff; color:var(--ink);
padding:17px 28px; font-size:15px;
border-radius:9px;
box-shadow:0 16px 32px -12px rgba(0,0,0,.4);
}
.hero-immersive .btn-primary:hover{ background:#F4F2F8; }
.hero-textlink{
color:#fff; font-size:15px; font-weight:500;
display:inline-flex; align-items:center; gap:8px;
border-bottom:1px solid rgba(255,255,255,.4);
padding:4px 2px;
transition:border-color .2s, gap .2s;
}
.hero-textlink:hover{ border-color:#fff; gap:12px; }
.hero-scroll{
position:absolute; left:50%; bottom:32px; z-index:3;
transform:translateX(-50%);
display:flex; flex-direction:column; align-items:center; gap:10px;
color:rgba(255,255,255,.45);
font-size:11px; font-weight:600; letter-spacing:.2em;
text-transform:uppercase;
pointer-events:none;
}
.hero-scroll .line{
width:1.5px; height:36px;
background:linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%);
position:relative; overflow:hidden;
}
.hero-scroll .line::after{
content:''; position:absolute; left:0; right:0; top:0; height:30%;
background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%);
animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{
0%{ transform:translateY(-100%); opacity:0; }
20%{ opacity:1; }
100%{ transform:translateY(380%); opacity:0; }
}
/* ════════════ css/v3-sections.css ════════════ */
/* ─── Marcas marquee ────────────────────────────────── */
.brands{
padding:48px 0;
background:#fff;
border-bottom:1px solid var(--line);
}
.brands-head{
display:flex; align-items:center; gap:48px;
margin-bottom:32px;
padding:0 32px;
max-width:var(--max); margin-left:auto; margin-right:auto;
}
.brands-head .label{
font-size:12.5px; font-weight:600;
color:var(--mute);
text-transform:uppercase; letter-spacing:.16em;
flex:0 0 auto;
}
.brands-head .line{ flex:1; height:1px; background:var(--line); }
.brands-marquee{
position:relative; overflow:hidden;
mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brands-track{
display:flex; align-items:center; gap:80px;
width:max-content;
animation:brandsScroll 45s linear infinite;
}
.brands-marquee:hover .brands-track{ animation-play-state:paused; }
@keyframes brandsScroll{
0%{ transform:translateX(0); }
100%{ transform:translateX(-50%); }
}
.brand-item{
flex:0 0 auto;
height:64px;
display:flex; align-items:center; justify-content:center;
padding:0 8px;
opacity:.55;
filter:grayscale(100%);
transition:opacity .3s ease, filter .3s ease, transform .3s ease;
}
.brand-item:hover{ opacity:1; filter:grayscale(0%); transform:scale(1.05); }
.brand-item img{
max-height:100%; max-width:160px;
width:auto; height:auto;
object-fit:contain;
}
/* ─── Categorías · círculos (home) ────────────────────── */
.cats{ background:var(--gray); padding:88px 0; }
.cats-grid{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:32px;
max-width:1180px;
margin:0 auto;
align-items:start;
}
.cat{
display:flex; flex-direction:column;
align-items:center; text-align:center;
gap:18px;
text-decoration:none; color:inherit;
background:none; border:0; border-radius:0;
box-shadow:none;
padding:6px 4px;
aspect-ratio:auto;
overflow:visible;
position:static;
}
.cat .cat-img{
position:relative;
width:100%;
aspect-ratio:1/1;
border-radius:50%;
overflow:hidden;
background:#fff;
border:1px solid var(--line);
}
.cat img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
opacity:1;
transition:none;
}
.cat:hover .cat-img{ border-color:var(--line2); }
.cat-arrow{ display:none; }
.cat-veil{ display:none; }
.cat-meta{
position:static;
display:flex; flex-direction:column; gap:6px;
padding:0 6px;
color:var(--ink);
}
.cat-meta .cat-num{ display:none; }
.cat h3{
font-size:16.5px; font-weight:600;
letter-spacing:-0.01em; line-height:1.25;
margin:0; color:var(--ink);
}
.cat:hover h3{ color:var(--primary); }
.cat-count{
font-size:12.5px; line-height:1.45;
color:var(--mute);
font-weight:400;
}
@media (max-width:1100px){
.cats-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:760px; gap:28px; }
}
@media (max-width:640px){
.cats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:420px; gap:22px; }
}
/* ─── Catálogo: sub-bloque productos destacados + footer ─── */
.cats .catalog-sub{
margin-top:56px;
display:flex; align-items:center; gap:14px;
}
.cats .catalog-sub::before,
.cats .catalog-sub::after{
content:'';
flex:1; height:1px;
background:var(--line);
}
.cats .sub-kicker{
font-family:'Onest', sans-serif;
font-size:12.5px; font-weight:700;
color:var(--primary);
text-transform:uppercase;
letter-spacing:.2em;
}
.cats .catalog-foot{
display:flex; align-items:center; justify-content:center;
gap:12px;
margin-top:32px;
}
.cats .catalog-foot .btn{ padding:13px 22px; font-size:14px; }
/* ─── Productos · Style C "Glass premium" ───────────── */
.section{ padding:96px 0; }
.carousel{ position:relative; }
.carousel-track{
display:flex; gap:18px; overflow-x:auto;
scroll-snap-type:x mandatory; scroll-behavior:smooth;
padding:8px 32px 28px; margin:0 -32px;
scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.prod{
flex:0 0 280px; scroll-snap-align:start;
background:#fff;
border-radius:16px;
overflow:hidden;
border:0;
display:flex; flex-direction:column;
text-decoration:none; color:inherit;
box-shadow:0 1px 2px rgba(15,8,32,.05), 0 1px 0 rgba(255,255,255,.5) inset;
transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.prod:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px -14px rgba(15,8,32,.18), 0 4px 12px -4px rgba(15,8,32,.08);
}
.prod-img{
position:relative;
aspect-ratio:5/4;
background:#fff;
padding:14px 14px 0;
overflow:visible;
}
.prod-img-inner{
width:100%; height:100%;
border-radius:10px; overflow:hidden;
background:var(--gray);
}
.prod-img img{
width:100%; height:100%; object-fit:cover;
transition:transform .8s ease;
}
.prod:hover .prod-img img{ transform:scale(1.04); }
.prod-stock{
position:absolute; top:24px; right:24px;
background:#fff;
font-size:10.5px; font-weight:600;
color:var(--green);
padding:5px 10px; border-radius:99px;
letter-spacing:.04em;
box-shadow:0 2px 8px -2px rgba(15,8,32,.15);
display:inline-flex; align-items:center;
}
/* Sin puntito verde, solo texto */
.prod-stock::before{ display:none; }
.prod-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; }
.prod-head{
display:flex; justify-content:space-between; align-items:baseline;
gap:10px;
}
.prod-code{
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11.5px; font-weight:500;
color:var(--mute);
letter-spacing:.02em;
margin:0;
}
.prod-cat{
font-size:11.5px; font-weight:700;
color:var(--primary);
text-transform:uppercase; letter-spacing:.08em;
}
.prod h4{
margin:0;
font-size:16.5px; font-weight:600;
color:var(--ink); line-height:1.3; letter-spacing:-0.012em;
min-height:auto;
}
/* Footer legado ya no se usa */
.prod-foot{ display:none; }
.carousel-side{
position:absolute; top:calc(50% - 18px);
transform:translateY(-50%);
width:46px; height:46px; border-radius:50%;
background:#fff; border:1px solid var(--line);
display:inline-flex; align-items:center; justify-content:center;
color:var(--ink); z-index:5;
box-shadow:0 8px 22px -8px rgba(15,8,32,.28), 0 2px 4px rgba(15,8,32,.06);
transition:transform .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
cursor:pointer;
}
.carousel-side svg{ width:18px; height:18px; }
.carousel-side:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-50%) scale(1.06); }
.carousel-side.prev{ left:-22px; }
.carousel-side.next{ right:-22px; }
.carousel-side.disabled{ opacity:.35; pointer-events:none; }
.carousel-nav{ display:none; }
/* ─── Servicios ─────────────────────────────────────── */
.services-v2{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.svc-v2{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
padding:32px 28px 28px;
display:flex; flex-direction:column; gap:16px;
min-height:280px;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
cursor:pointer;
position:relative; overflow:hidden;
}
.svc-v2:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line2); }
.svc-v2 .svc-icon{
width:52px; height:52px; border-radius:12px;
background:var(--soft); color:var(--primary);
display:inline-flex; align-items:center; justify-content:center;
transition:transform .3s ease, background .3s, color .3s;
}
.svc-v2:hover .svc-icon{ transform:scale(1.06) rotate(-4deg); background:var(--primary); color:#fff; }
.svc-v2 .svc-icon svg{ width:26px; height:26px; }
.svc-v2 h3{ font-size:19px; font-weight:700; letter-spacing:-0.018em; line-height:1.22; color:var(--ink); margin:0; }
.svc-v2 p{ font-size:14.5px; line-height:1.55; color:var(--body); margin:0; flex:1; }
.svc-v2 .arrow-circle{
position:absolute; right:22px; top:28px;
width:32px; height:32px; border-radius:50%;
background:transparent; border:1px solid var(--line);
display:inline-flex; align-items:center; justify-content:center;
color:var(--ink); font-size:14px; transition:all .25s;
}
.svc-v2:hover .arrow-circle{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translate(2px,-2px); }
/* ════════════ css/v3-news.css ════════════ */
/* ─── Modelo dual ───────────────────────────────────── */
.dual-wrap{ background:var(--gray); }
.dual{
display:grid; grid-template-columns:1fr 1fr; gap:0;
background:#fff; border:1px solid var(--line);
border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow-md);
}
.dual-card{
padding:44px 40px;
display:flex; flex-direction:column; gap:14px;
min-height:420px; position:relative;
border-right:1px solid var(--line);
}
.dual-card:last-child{ border-right:0; }
.dual-card.dark{ background:var(--ink); color:#fff; border:0; }
.dual-card .dual-tag{
font-family:'Onest', sans-serif; font-weight:600;
font-size:11.5px; letter-spacing:.06em;
padding:5px 12px;
background:var(--soft); color:var(--primary);
border-radius:5px; align-self:flex-start;
text-transform:uppercase;
}
.dual-card.dark .dual-tag{ background:rgba(212,188,252,.18); color:#D4BCFC; }
.dual-card h3{ font-size:32px; font-weight:700; letter-spacing:-0.02em; margin:8px 0 6px; line-height:1.08; }
.dual-card.dark h3{ color:#fff; }
.dual-card > p{ font-size:15px; color:var(--body); margin:0; line-height:1.55; }
.dual-card.dark > p{ color:#B4A6D2; }
.dual-list{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:11px; }
.dual-list li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--body); }
.dual-card.dark .dual-list li{ color:#D8CFE9; }
.dual-list li::before{
content:''; flex:0 0 auto; width:18px; height:18px; margin-top:1px;
border-radius:50%;
background:var(--soft) url("data:image/svg+xml;utf8,") center/11px no-repeat;
}
.dual-card.dark .dual-list li::before{
background:rgba(212,188,252,.16) url("data:image/svg+xml;utf8,") center/11px no-repeat;
}
.dual-foot{ margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; }
.dual-foot a{ font-size:14px; font-weight:600; color:var(--primary); display:inline-flex; gap:6px; align-items:center; }
.dual-card.dark .dual-foot a{ color:#D4BCFC; }
.dual-foot small{
font-family:'Onest', sans-serif; font-weight:600;
font-size:11px; letter-spacing:.06em; color:var(--mute);
text-transform:uppercase;
}
.dual-card.dark .dual-foot small{ color:#9089AC; }
/* ─── Novedades featured carousel ────────────────────── */
.news-section{ background:#fff; }
.news-wrapper{
display:grid; grid-template-columns:1.4fr 1fr; gap:40px;
align-items:stretch;
}
.news-featured{
position:relative; overflow:hidden;
border-radius:var(--radius);
background:var(--ink); color:#fff;
min-height:520px;
isolation:isolate;
}
.news-featured .slide{
position:absolute; inset:0;
opacity:0; transform:scale(1.04);
transition:opacity .8s ease, transform 6.4s ease;
pointer-events:none;
}
.news-featured .slide.active{ opacity:1; transform:scale(1); pointer-events:auto; }
.news-featured .slide-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.news-featured .slide-veil{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(15,8,32,0) 30%, rgba(15,8,32,.55) 60%, rgba(15,8,32,.92) 100%);
}
.news-featured .slide-body{ position:absolute; left:36px; right:36px; bottom:36px; z-index:2; }
.news-featured .slide-tag{
display:inline-flex; align-items:center;
font-size:11px; font-weight:700;
color:#C4A6FF; text-transform:uppercase; letter-spacing:.15em;
padding:6px 12px;
background:rgba(196,166,255,.15);
border:1px solid rgba(196,166,255,.28);
border-radius:99px;
margin-bottom:18px;
}
.news-featured .slide-body h3{
font-size:34px; line-height:1.08; letter-spacing:-0.025em;
font-weight:700; margin:0 0 12px;
text-wrap:balance; max-width:560px;
}
.news-featured .slide-body p{
font-size:15px; color:rgba(255,255,255,.78);
line-height:1.55; margin:0 0 22px; max-width:520px;
}
.news-featured .slide-link{
display:inline-flex; align-items:center; gap:8px;
color:#fff; font-size:14px; font-weight:600;
border-bottom:1.5px solid rgba(255,255,255,.5);
padding:4px 2px;
transition:gap .2s, border-color .2s;
}
.news-featured .slide-link:hover{ gap:12px; border-color:#fff; }
.news-progress{
position:absolute; top:0; left:0; right:0; height:3px;
background:rgba(255,255,255,.12);
z-index:3;
}
.news-progress-fill{ height:100%; background:#C4A6FF; width:0%; transition:width .15s linear; }
.news-thumbs{ display:flex; flex-direction:column; gap:8px; }
.news-thumb{
display:grid; grid-template-columns:96px 1fr; gap:16px;
align-items:center;
padding:10px;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-sm);
cursor:pointer;
transition:border-color .2s ease, background .2s ease, transform .2s ease;
text-align:left;
}
.news-thumb:hover{ border-color:var(--line2); background:var(--gray2); transform:translateX(2px); }
.news-thumb.active{
border-color:var(--primary);
background:#fff;
box-shadow:0 6px 16px -8px rgba(91,33,182,.25);
}
.news-thumb-img{
width:96px; height:72px; border-radius:8px;
background-size:cover; background-position:center;
flex:0 0 auto;
}
.news-thumb-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.news-thumb-tag{
font-size:10.5px; font-weight:700;
color:var(--primary); text-transform:uppercase;
letter-spacing:.1em;
}
.news-thumb h4{
font-size:14.5px; font-weight:600;
color:var(--ink); line-height:1.3; margin:0;
overflow:hidden;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.news-controls{
margin-top:24px;
display:flex; align-items:center; justify-content:space-between;
gap:20px;
}
.news-dots{ display:flex; gap:8px; }
.news-dot{
width:8px; height:8px; border-radius:50%;
background:var(--line);
border:0; padding:0; cursor:pointer;
transition:background .25s, transform .25s, width .25s;
}
.news-dot.active{
background:var(--primary);
width:24px; border-radius:99px;
}
.news-arrows{ display:flex; gap:8px; }
.news-arrow{
width:42px; height:42px; border-radius:50%;
background:#fff; border:1px solid var(--line);
display:inline-flex; align-items:center; justify-content:center;
color:var(--ink); cursor:pointer;
transition:all .2s ease;
}
.news-arrow:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:scale(1.06); }
.news-arrow svg{ width:18px; height:18px; }
/* ════════════ css/v3-extra.css ════════════ */
/* ─── Suscríbete ────────────────────────────────────── */
.subscribe{
position:relative; overflow:hidden;
padding:80px 0;
background:linear-gradient(135deg, #1A0F30 0%, var(--ink) 50%, #2D1A55 100%);
color:#fff;
isolation:isolate;
}
.subscribe::before{
content:''; position:absolute;
width:700px; height:700px;
left:-200px; bottom:-300px;
background:radial-gradient(circle, rgba(124,58,237,.22) 0%, transparent 70%);
z-index:0;
}
.subscribe .container{
position:relative; z-index:1;
display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:center;
}
.subscribe h2{
font-size:44px; line-height:1.04; letter-spacing:-0.028em;
font-weight:700; margin:0 0 14px; color:#fff;
text-wrap:balance;
}
.subscribe p{
font-size:16px; line-height:1.55;
color:rgba(255,255,255,.7);
margin:0; max-width:480px;
}
.subscribe-form{
background:rgba(255,255,255,.06);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--radius);
padding:28px 28px 22px;
display:flex; flex-direction:column; gap:14px;
}
.subscribe-form label{
font-size:12.5px; font-weight:600;
color:rgba(255,255,255,.85);
letter-spacing:.05em;
}
.subscribe-form .row{ display:flex; gap:8px; }
.subscribe-form input{
flex:1;
padding:14px 16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.14);
border-radius:9px;
color:#fff; font-family:inherit; font-size:14.5px;
outline:none;
transition:border-color .15s, background .15s;
}
.subscribe-form input::placeholder{ color:rgba(255,255,255,.4); }
.subscribe-form input:focus{ border-color:#C4A6FF; background:rgba(255,255,255,.08); }
.subscribe-form button{
padding:14px 22px;
background:#fff; color:var(--ink);
font-weight:600; font-size:14px;
border-radius:9px;
transition:background .2s, transform .15s;
display:inline-flex; align-items:center; gap:8px;
border:0; cursor:pointer;
}
.subscribe-form button:hover{ background:#F4F2F8; transform:translateY(-1px); }
.subscribe-form .help{ font-size:12px; color:rgba(255,255,255,.5); }
.subscribe-form .status{ font-size:13px; font-weight:600; color:#86EFAC; min-height:1em; }
/* ─── CTA band ──────────────────────────────────────── */
.cta-band{
position:relative; overflow:hidden;
background:linear-gradient(135deg, #1A0F30 0%, var(--ink) 50%, #2D1A55 100%);
}
.cta-band::before{
content:''; position:absolute;
width:600px; height:600px;
right:-150px; top:-200px;
background:radial-gradient(circle, rgba(124,58,237,.18) 0%, transparent 70%);
}
.cta-band .container{ padding:72px 32px; position:relative; z-index:1; }
.cta-band h2{ font-size:42px; line-height:1.04; letter-spacing:-0.028em; }
.cta-band p{ font-size:16px; line-height:1.55; }
/* Banda oscura (suscríbete / cta) a lo ancho completo, solo esquinas superiores redondeadas */
.subscribe, .cta-band{
margin:0;
border-radius:28px 28px 0 0;
}
@media (max-width:760px){
.subscribe, .cta-band{ border-radius:20px 20px 0 0; }
}
/* ─── Footer ───────────────────────────────────────── */
.footer-brand img{ height:54px; filter:none; }
.section-foot{ margin-top:48px; display:flex; align-items:center; justify-content:center; gap:20px; }
/* CTA group para botones a la derecha de section-head */
.section-cta-group{
display:flex; gap:10px; align-items:center;
flex:0 0 auto; align-self:flex-end;
}
.section-cta-group .section-cta{ align-self:auto; }
.section-cta-group .btn-light svg{ flex:0 0 auto; }
/* ─── Scroll-reveal ─────────────────────────────────── */
.reveal{
opacity:0; transform:translateY(28px);
transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{
opacity:0; transform:translateY(20px);
transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:80ms; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:160ms; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:240ms; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:320ms; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:400ms; }
/* ─── Process steps (kept from base) ────────────────── */
.process-step strong, .process-num{ font-family:'Onest', sans-serif; font-weight:700; }
/* ─── Responsive ────────────────────────────────────── */
@media (max-width:1180px){
.hero-immersive h1{ font-size:68px; }
.section-head h2{ font-size:42px; }
.services-v2{ grid-template-columns:repeat(2,1fr); }
.news-wrapper{ grid-template-columns:1fr; }
.news-featured{ min-height:440px; }
.subscribe .container{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:980px){
.hero-immersive h1{ font-size:54px; }
.nav{ display:none; }
.nav.open{
display:flex; flex-direction:column;
position:absolute; top:100%; left:0; right:0;
background:#fff; padding:18px 32px;
border-bottom:1px solid var(--line); gap:14px;
color:var(--body);
}
.nav-toggle{ display:inline-flex; color:#fff; border-color:rgba(255,255,255,.3); }
body.scrolled .nav-toggle{ color:var(--ink); border-color:var(--line2); }
.brands-track{ gap:48px; }
.brand-item{ height:48px; }
.brand-item img{ max-width:120px; }
}
@media (max-width:760px){
:root{ --header-h:64px; }
.container{ padding:0 20px; }
.hero-immersive h1{ font-size:40px; }
.hero-immersive .hero-tagline{ font-size:16px; }
.hero-scroll{ display:none; }
.section{ padding:64px 0; }
.section-head{ flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:36px; }
.section-head h2{ font-size:30px; }
.cta-band h2, .subscribe h2{ font-size:30px; }
.services-v2{ grid-template-columns:1fr; }
.dual{ grid-template-columns:1fr; }
.dual-card{ border-right:0; border-bottom:1px solid var(--line); }
.news-thumbs{ flex-direction:row; overflow-x:auto; scrollbar-width:none; }
.news-thumb{ flex:0 0 280px; }
.news-featured .slide-body h3{ font-size:24px; }
.subscribe-form .row{ flex-direction:column; }
.cta-band .container{ grid-template-columns:1fr; padding:48px 20px; }
.footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
/* ════════════ Páginas internas (sin hero oscuro) ════════════ */
/* body.inner = header arranca sólido (como si fuera body.scrolled) y deja espacio arriba para topbar+header fixed */
body.inner{ padding-top: calc(var(--topbar-h) + var(--header-h)); }
body.inner .topbar{ background:var(--ink); border-bottom-color:rgba(255,255,255,.04); }
body.inner .header{
background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(14px);
border-bottom-color:rgba(15,8,32,.06);
box-shadow:0 1px 0 rgba(15,8,32,.02);
}
body.inner .header .logo img{ filter:none; }
body.inner .nav{ color:var(--body); }
body.inner .nav a:hover{ color:var(--ink); }
body.inner .nav a.active{ color:var(--ink); }
body.inner .nav a.active::after{ background:var(--primary); }
body.inner .header-cta .btn-primary{
background:var(--primary); color:#fff;
box-shadow:0 8px 20px -10px rgba(91,33,182,.45);
}
body.inner .header-cta .btn-primary:hover{ background:var(--hover); }
@media (max-width:980px){
body.inner .nav-toggle{ color:var(--ink); border-color:var(--line2); }
}
body.inner .page-header{ padding-top:48px; }
/* ════════════ Trust band — sellos de confianza (post-hero) ════════════ */
.trust-band{
background:transparent;
border-bottom:0;
padding:0;
margin-top:-88px;
position:relative;
z-index:3;
}
.trust-band .container{
padding-left:32px; padding-right:32px;
padding-bottom:0;
}
.trust-grid{
display:grid; grid-template-columns:repeat(4,1fr);
gap:16px;
align-items:stretch;
}
.trust-item{
background:#fff;
border-radius:14px;
padding:24px 22px;
display:flex; flex-direction:column;
align-items:flex-start;
gap:14px;
border:1px solid var(--line);
box-shadow:0 16px 40px -16px rgba(15,8,32,.18);
/* animación de entrada al scroll (JS agrega .in-view) */
opacity:0;
transform:translateY(32px);
transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.trust-item.in-view{
opacity:1;
transform:translateY(0);
}
.trust-item:nth-child(1){ transition-delay:.05s; }
.trust-item:nth-child(2){ transition-delay:.15s; }
.trust-item:nth-child(3){ transition-delay:.25s; }
.trust-item:nth-child(4){ transition-delay:.35s; }
.trust-ic{
width:28px; height:28px; flex:0 0 auto;
color:var(--primary);
}
.trust-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.trust-text strong{
display:block;
font-size:14px; font-weight:600;
color:var(--ink);
letter-spacing:-0.005em;
line-height:1.25;
}
.trust-text span{
font-size:12.5px;
color:var(--mute);
line-height:1.45;
}
@media (max-width:1100px){
.trust-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
.trust-band{ margin-top:-48px; }
.trust-grid{ grid-template-columns:1fr; gap:12px; }
}
/* ════════════════════════════════════════════════════════════
CATÁLOGO v2 · Hero bento + brands estáticas + secciones por
categoría + explorador con sidebar moderno + carrito drawer.
Sumado 2026-05-15.
════════════════════════════════════════════════════════════ */
/* ─── Carrito · botón header + badge ─────────────────────── */
.cart-toggle{
position:relative;
width:44px; height:44px; border-radius:8px;
border:1px solid var(--line2); background:#fff;
display:inline-flex; align-items:center; justify-content:center;
color:var(--ink);
transition:border-color .15s, background .15s, color .15s, transform .15s;
cursor:pointer;
}
.cart-toggle:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); }
.cart-toggle svg{ width:20px; height:20px; }
.cart-badge{
position:absolute; top:-6px; right:-6px;
min-width:20px; height:20px; padding:0 6px;
border-radius:99px;
background:var(--primary); color:#fff;
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11px; font-weight:700; letter-spacing:.02em;
display:inline-flex; align-items:center; justify-content:center;
border:2px solid #fff;
transform:scale(0); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.cart-toggle.has-items .cart-badge{ transform:scale(1); }
.cart-toggle.pulse{ animation:cartPulse .5s ease; }
@keyframes cartPulse{
0%,100%{ transform:translateY(0) scale(1); }
40%{ transform:translateY(-2px) scale(1.08); }
}
/* ─── Carrito · drawer lateral ───────────────────────────── */
.cart-overlay{
position:fixed; inset:0;
background:rgba(15,8,32,.45);
backdrop-filter:blur(2px);
opacity:0; pointer-events:none;
transition:opacity .25s ease;
z-index:90;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-panel{
position:fixed; top:0; right:0; bottom:0;
width:min(420px, 100vw);
background:#fff;
display:flex; flex-direction:column;
transform:translateX(100%);
transition:transform .32s cubic-bezier(.2,.7,.2,1);
box-shadow:-30px 0 60px -20px rgba(15,8,32,.35);
z-index:100;
}
.cart-panel.open{ transform:translateX(0); }
.cart-head{
padding:22px 26px;
border-bottom:1px solid var(--line);
display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
flex:0 0 auto;
}
.cart-head-kicker{
display:block;
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11px; font-weight:600;
color:var(--primary);
text-transform:uppercase; letter-spacing:.08em;
margin-bottom:4px;
}
.cart-head h3{
margin:0;
font-size:20px; font-weight:700;
color:var(--ink); letter-spacing:-0.02em;
line-height:1.2;
}
.cart-close{
width:36px; height:36px; border-radius:8px;
border:1px solid var(--line); background:#fff;
display:inline-flex; align-items:center; justify-content:center;
color:var(--ink);
transition:border-color .15s, background .15s, color .15s;
flex:0 0 auto;
}
.cart-close:hover{ border-color:var(--ink); }
.cart-close svg{ width:18px; height:18px; }
.cart-body{
flex:1 1 auto;
overflow-y:auto;
padding:0;
}
/* ─── Carrito · estado vacío ─────────────────────────────── */
.cart-empty{
padding:48px 32px;
text-align:center;
display:flex; flex-direction:column; align-items:center; gap:14px;
}
.cart-empty-ic{
width:72px; height:72px; border-radius:50%;
background:var(--gray);
display:inline-flex; align-items:center; justify-content:center;
color:var(--mute);
}
.cart-empty-ic svg{ width:34px; height:34px; }
.cart-empty h4{
margin:0;
font-size:18px; font-weight:700;
color:var(--ink); letter-spacing:-0.015em;
}
.cart-empty p{
margin:0;
font-size:14px; color:var(--mute); line-height:1.5;
max-width:280px;
}
.cart-empty .btn{ margin-top:10px; }
/* ─── Carrito · items ────────────────────────────────────── */
.cart-items{
list-style:none; padding:0; margin:0;
}
.cart-item{
display:grid;
grid-template-columns:64px 1fr auto;
gap:14px;
padding:18px 26px;
border-bottom:1px solid var(--line);
align-items:flex-start;
}
.cart-item-img{
width:64px; height:64px;
border-radius:8px;
background:var(--gray);
overflow:hidden;
flex:0 0 auto;
}
.cart-item-img img{ width:100%; height:100%; object-fit:cover; }
.cart-item-body{ min-width:0; }
.cart-item-meta{
display:flex; gap:6px; align-items:baseline;
margin-bottom:4px;
}
.cart-item-code{
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:10.5px; font-weight:500;
color:var(--mute);
}
.cart-item-cat{
font-size:10.5px; font-weight:700;
color:var(--primary);
text-transform:uppercase; letter-spacing:.06em;
}
.cart-item-name{
margin:0 0 10px;
font-size:14px; font-weight:600;
color:var(--ink); line-height:1.3; letter-spacing:-0.005em;
}
.cart-item-qty{
display:inline-flex; align-items:center;
border:1px solid var(--line2); border-radius:6px;
overflow:hidden;
background:#fff;
}
.cart-item-qty button{
width:28px; height:28px;
border:0; background:#fff;
font-size:14px; font-weight:600;
color:var(--ink);
transition:background .15s, color .15s;
cursor:pointer;
}
.cart-item-qty button:hover{ background:var(--soft); color:var(--primary); }
.cart-item-qty input{
width:42px; height:28px;
border:0; outline:none;
text-align:center;
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:13px; font-weight:600;
color:var(--ink);
border-left:1px solid var(--line); border-right:1px solid var(--line);
background:#fff;
}
.cart-item-qty input::-webkit-outer-spin-button,
.cart-item-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cart-item-qty input[type=number]{ -moz-appearance:textfield; }
.cart-item-remove{
width:30px; height:30px; border-radius:6px;
border:0; background:transparent;
color:var(--mute);
display:inline-flex; align-items:center; justify-content:center;
transition:background .15s, color .15s;
cursor:pointer; flex:0 0 auto;
}
.cart-item-remove:hover{ background:#FFE4E6; color:var(--red); }
.cart-item-remove svg{ width:16px; height:16px; }
/* ─── Carrito · footer ───────────────────────────────────── */
.cart-foot{
padding:20px 26px 22px;
border-top:1px solid var(--line);
background:var(--gray2);
flex:0 0 auto;
display:flex; flex-direction:column; gap:12px;
}
.cart-summary{
display:flex; align-items:baseline; justify-content:space-between;
font-size:13.5px; color:var(--mute);
}
.cart-summary strong{
color:var(--ink); font-size:16px;
font-family:'Overpass Mono', ui-monospace, monospace;
font-weight:700; letter-spacing:.01em;
}
.cart-checkout{
width:100%; justify-content:center;
padding:14px 22px;
}
.cart-clear{
font-size:12.5px; font-weight:500;
color:var(--mute);
text-align:center;
background:transparent; border:0;
padding:6px; cursor:pointer;
transition:color .15s;
}
.cart-clear:hover{ color:var(--red); }
.cart-disclaimer{
margin:0;
font-size:11.5px; color:var(--mute);
line-height:1.45; text-align:center;
}
/* ─── Carrito · toast ────────────────────────────────────── */
.cart-toast{
position:fixed; bottom:28px; left:50%;
transform:translateX(-50%) translateY(20px);
background:var(--ink); color:#fff;
padding:13px 22px;
border-radius:8px;
font-size:13.5px; font-weight:500;
display:inline-flex; align-items:center; gap:10px;
box-shadow:0 16px 40px -16px rgba(15,8,32,.5);
opacity:0; pointer-events:none;
transition:opacity .25s ease, transform .25s ease;
z-index:110;
}
.cart-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.cart-toast .toast-check{
width:22px; height:22px; border-radius:50%;
background:var(--green); color:#fff;
display:inline-flex; align-items:center; justify-content:center;
flex:0 0 auto;
}
.cart-toast .toast-check svg{ width:13px; height:13px; }
@media (max-width:760px){
.cart-panel{ width:100vw; }
.cart-toast{ left:16px; right:16px; transform:translateY(20px); width:auto; }
.cart-toast.show{ transform:translateY(0); }
}
/* ─── Catálogo Hero · bento estático ─────────────────────── */
.catalog-hero{
background:var(--gray);
border-bottom:1px solid var(--line);
padding:48px 0 64px;
}
.catalog-hero-head{
max-width:760px;
margin:0 0 36px;
}
.catalog-hero-head .crumbs{
font-family:'Overpass Mono', monospace;
font-size:12.5px; color:var(--mute);
margin-bottom:14px; letter-spacing:.02em;
}
.catalog-hero-head .crumbs a{ color:var(--primary); }
.catalog-hero-head h1{
font-size:54px; line-height:1.05; letter-spacing:-0.03em;
font-weight:700; margin:0; color:var(--ink);
}
.catalog-hero-head h1 .accent{ color:var(--primary); }
.catalog-hero-head p{
margin:18px 0 0;
font-size:17px; line-height:1.55;
color:var(--body); max-width:620px;
}
.catalog-bento{
display:grid;
grid-template-columns:1.45fr 1fr;
grid-template-rows:repeat(2, minmax(170px, 1fr));
gap:18px;
}
.bento{
position:relative; overflow:hidden;
border-radius:16px;
background:var(--ink);
display:block;
min-height:220px;
transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.bento:hover{
transform:translateY(-4px);
box-shadow:0 30px 60px -22px rgba(15,8,32,.32);
}
.bento-main{ grid-row:1 / 3; min-height:460px; }
.bento-side{ min-height:220px; }
.bento-bg{
position:absolute; inset:0;
background-size:cover; background-position:center;
transform:scale(1.02);
transition:transform 1.2s ease;
}
.bento:hover .bento-bg{ transform:scale(1.06); }
.bento-veil{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(15,8,32,.25) 30%, rgba(15,8,32,.85) 100%);
}
.bento-body{
position:absolute; left:28px; right:28px; bottom:28px;
color:#fff;
}
.bento-tag{
display:inline-block;
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11px; font-weight:600;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(6px);
color:#fff;
padding:5px 11px; border-radius:99px;
letter-spacing:.06em; text-transform:uppercase;
margin-bottom:14px;
}
.bento-main h2{
font-size:42px; line-height:1.05; letter-spacing:-0.02em;
font-weight:700; margin:0 0 12px;
color:#fff;
}
.bento-main p{
margin:0 0 18px;
font-size:15.5px; line-height:1.55;
color:rgba(255,255,255,.85);
max-width:380px;
}
.bento-side h3{
font-size:22px; line-height:1.18; letter-spacing:-0.018em;
font-weight:700; margin:0 0 10px;
color:#fff;
max-width:280px;
}
.bento-arrow{
display:inline-flex; align-items:center; gap:6px;
font-size:13.5px; font-weight:600;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.4);
padding-bottom:2px;
transition:border-color .2s, gap .2s;
}
.bento:hover .bento-arrow{ border-color:#fff; gap:10px; }
@media (max-width:900px){
.catalog-hero-head h1{ font-size:42px; }
.catalog-bento{
grid-template-columns:1fr;
grid-template-rows:auto;
}
.bento-main{ grid-row:auto; min-height:320px; }
.bento-main h2{ font-size:32px; }
}
/* ─── Catálogo · marcas estáticas ────────────────────────── */
.catalog-brands{
background:#fff;
padding:64px 0 56px;
border-bottom:1px solid var(--line);
}
.catalog-brands-head{
max-width:680px;
margin:0 0 36px;
}
.catalog-brands-head .kicker{
display:block;
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11.5px; font-weight:600;
color:var(--primary);
text-transform:uppercase; letter-spacing:.08em;
margin-bottom:10px;
}
.catalog-brands-head h2{
font-size:34px; line-height:1.08; letter-spacing:-0.02em;
font-weight:700; margin:0;
color:var(--ink);
}
.catalog-brands-head h2 .accent{ color:var(--primary); }
.catalog-brands-grid{
display:grid;
grid-template-columns:repeat(9, 1fr);
gap:14px;
align-items:center;
}
.cb-item{
aspect-ratio:1/1;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
display:flex; align-items:center; justify-content:center;
padding:18px;
transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cb-item:hover{
border-color:var(--line2);
transform:translateY(-3px);
box-shadow:0 14px 30px -16px rgba(15,8,32,.18);
}
.cb-item img{
max-width:100%; max-height:100%;
object-fit:contain;
filter:grayscale(100%); opacity:.7;
transition:filter .25s ease, opacity .25s ease;
}
.cb-item:hover img{ filter:grayscale(0%); opacity:1; }
@media (max-width:1100px){
.catalog-brands-grid{ grid-template-columns:repeat(5,1fr); }
}
@media (max-width:680px){
.catalog-brands-grid{ grid-template-columns:repeat(3,1fr); }
}
/* ─── Catálogo · secciones por categoría ─────────────────── */
.cat-section{ padding:52px 0 56px; }
.cat-section:first-of-type{ padding-top:36px; }
.cat-section.gray{ background:var(--gray2); }
.cat-section .section-head{
margin-bottom:24px;
align-items:flex-end;
}
.section-sub{
font-size:13.5px; color:var(--mute);
font-family:'Overpass Mono', ui-monospace, monospace;
letter-spacing:.02em;
align-self:flex-end;
}
.section-cta-link{
font-size:14px; font-weight:600;
color:var(--primary);
display:inline-flex; align-items:center; gap:6px;
align-self:flex-end;
transition:gap .2s;
}
.section-cta-link:hover{ gap:10px; }
.cat-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:18px;
}
@media (max-width:1100px){
.cat-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
.cat-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
}
@media (max-width:480px){
.cat-grid{ grid-template-columns:1fr; }
}
/* ─── Prod card v2 (con add-to-cart) ─────────────────────── */
.cat-grid .prod,
.explorer-grid .prod{
flex:initial;
background:#fff;
border-radius:16px;
overflow:hidden; border:0;
display:flex; flex-direction:column;
box-shadow:0 1px 2px rgba(15,8,32,.05);
transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
position:relative;
}
.cat-grid .prod:hover,
.explorer-grid .prod:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px -14px rgba(15,8,32,.18), 0 4px 12px -4px rgba(15,8,32,.08);
}
.prod-link{
display:flex; flex-direction:column;
color:inherit; text-decoration:none;
flex:1;
}
.cat-grid .prod-img,
.explorer-grid .prod-img{
position:relative;
aspect-ratio:5/4;
background:#fff;
padding:14px 14px 0;
overflow:visible;
}
.prod-add{
margin:0 18px 18px;
padding:11px 14px;
background:var(--ink); color:#fff;
border:0; border-radius:8px;
font-size:13.5px; font-weight:600;
letter-spacing:-0.005em;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
cursor:pointer;
transition:background .15s ease, transform .15s ease;
}
.prod-add svg{ width:15px; height:15px; }
.prod-add:hover{ background:var(--primary); }
.prod-add:active{ transform:scale(.98); }
.prod-add.added{
background:var(--green);
pointer-events:none;
}
/* Override del .prod-foot legado para cards nuevas */
.cat-grid .prod-foot,
.explorer-grid .prod-foot{ display:none; }
/* ─── Catálogo Explorador (sidebar + grid filtrado) ──────── */
.catalog-explorer{
background:#fff;
padding:96px 0;
border-top:1px solid var(--line);
}
.explorer-layout{
display:grid;
grid-template-columns:260px 1fr;
gap:40px;
align-items:flex-start;
}
.explorer-aside{ position:sticky; top:96px; }
.explorer-aside-title{
font-size:12px; font-weight:700;
color:var(--ink);
text-transform:uppercase; letter-spacing:.1em;
margin:0 0 14px;
}
.explorer-cats{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:6px;
}
.explorer-cats button{
width:100%;
display:flex; align-items:center; gap:12px;
padding:12px 14px;
border:1px solid transparent;
border-radius:10px;
background:transparent;
text-align:left;
cursor:pointer;
transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.explorer-cats button:hover{
background:var(--gray);
}
.explorer-cats button.active{
background:var(--soft);
border-color:var(--line2);
}
.ec-ic{
width:36px; height:36px; flex:0 0 auto;
border-radius:8px;
background:#fff;
border:1px solid var(--line);
color:var(--ink);
display:inline-flex; align-items:center; justify-content:center;
transition:background .18s, color .18s, border-color .18s;
}
.ec-ic svg{ width:18px; height:18px; }
.explorer-cats button.active .ec-ic{
background:var(--primary); color:#fff;
border-color:var(--primary);
}
.ec-text{
flex:1; display:flex; align-items:baseline; justify-content:space-between;
gap:10px;
}
.ec-text strong{
font-size:14px; font-weight:600;
color:var(--ink); letter-spacing:-0.005em;
}
.explorer-cats button.active .ec-text strong{ color:var(--primary); }
.ec-count{
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11.5px; font-weight:500;
color:var(--mute);
}
.explorer-cats button.active .ec-count{ color:var(--primary); }
.explorer-aside-help{
margin-top:28px;
padding:20px 18px;
background:var(--gray);
border:1px solid var(--line);
border-radius:12px;
display:flex; flex-direction:column; gap:6px;
}
.explorer-aside-help strong{
font-size:14px; font-weight:700;
color:var(--ink); letter-spacing:-0.005em;
}
.explorer-aside-help span{
font-size:13px; color:var(--body);
line-height:1.45;
}
.explorer-aside-help a{
margin-top:8px;
font-size:13px; font-weight:600;
color:var(--primary);
}
/* Explorer main */
.explorer-main{ min-width:0; }
.explorer-bar{
display:flex; align-items:center; justify-content:space-between;
padding:12px 16px;
margin-bottom:18px;
background:var(--gray);
border:1px solid var(--line);
border-radius:10px;
font-size:13.5px;
}
.explorer-active-label{ color:var(--mute); }
.explorer-active-label strong{ color:var(--ink); font-weight:600; }
.explorer-active-count{
font-family:'Overpass Mono', ui-monospace, monospace;
color:var(--mute);
}
.explorer-active-count strong{
color:var(--primary); font-weight:700;
margin-right:2px;
}
.explorer-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
}
@media (max-width:1280px){
.explorer-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px){
.explorer-layout{ grid-template-columns:1fr; }
.explorer-aside{ position:static; }
.explorer-cats{ flex-direction:row; flex-wrap:wrap; }
.explorer-cats li{ flex:1 1 calc(50% - 6px); }
.explorer-aside-help{ display:none; }
}
@media (max-width:760px){
.explorer-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
.explorer-cats li{ flex:1 1 100%; }
}
@media (max-width:480px){
.explorer-grid{ grid-template-columns:1fr; }
}
.explorer-empty{
padding:60px 24px;
background:var(--gray);
border:1px dashed var(--line2);
border-radius:12px;
text-align:center;
color:var(--mute);
font-size:14px;
}
.prod.hidden{ display:none; }
/* ════════════════════════════════════════════════════════════
CATÁLOGO v2.1 · Hero slider rotativo + 2 banners promo +
pills de categorías que filtran secciones.
Sumado 2026-05-16 (reemplaza bento + brands + explorer).
════════════════════════════════════════════════════════════ */
/* ─── Hero slider ────────────────────────────────────────── */
.catalog-slider-wrap{
padding:0 0 28px;
background:#fff;
}
/* Breadcrumb como overlay sobre el slider (sin franja blanca arriba) */
.catalog-crumbs{
position:absolute; z-index:5;
top:22px; left:80px;
font-family:'Overpass Mono', monospace;
font-size:12.5px; color:rgba(255,255,255,.78);
letter-spacing:.02em; margin:0;
}
.catalog-crumbs a{ color:#fff; }
@media (max-width:860px){ .catalog-crumbs{ left:32px; top:18px; } }
@media (max-width:640px){ .catalog-crumbs{ left:24px; } }
.cat-slider{
position:relative;
width:100vw;
margin-left:calc(50% - 50vw);
border-radius:0 0 28px 28px;
overflow:hidden;
background:var(--ink);
isolation:isolate;
}
.cat-slider-track{
display:flex;
transition:transform .55s cubic-bezier(.2,.7,.2,1);
width:100%;
}
.cat-slide{
flex:0 0 100%;
position:relative;
min-height:420px;
padding:56px 80px;
display:flex; align-items:center;
overflow:hidden;
}
.cat-slide-bg{
position:absolute; inset:0;
background-size:cover; background-position:center;
transform:scale(1.02);
transition:transform 8s ease;
}
.cat-slide.active .cat-slide-bg{ transform:scale(1.08); }
.cat-slide-veil{
position:absolute; inset:0;
background:linear-gradient(90deg, rgba(15,8,32,.88) 0%, rgba(15,8,32,.7) 50%, rgba(15,8,32,.35) 100%);
}
.cat-slide-body{
position:relative; z-index:2;
color:#fff;
max-width:540px;
}
.cat-slide-tag{
display:inline-block;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(6px);
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11px; font-weight:600;
color:#fff;
padding:6px 13px; border-radius:99px;
letter-spacing:.06em; text-transform:uppercase;
margin-bottom:20px;
}
.cat-slide h2{
font-size:46px; line-height:1.04; letter-spacing:-0.028em;
font-weight:700; margin:0 0 14px;
color:#fff;
}
.cat-slide p{
margin:0 0 26px;
font-size:16px; line-height:1.55;
color:rgba(255,255,255,.85);
max-width:460px;
}
.cat-slide-body .btn-primary{
background:#fff; color:var(--ink);
padding:13px 22px;
}
.cat-slide-body .btn-primary:hover{
background:var(--soft); color:var(--primary);
}
.cat-slide-sale{
position:absolute; top:50%; right:80px;
transform:translateY(-50%);
z-index:2;
text-align:center;
color:#fff;
padding:24px 32px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2);
border-radius:14px;
backdrop-filter:blur(8px);
min-width:160px;
}
.sale-label{
display:block;
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11px; font-weight:600;
color:rgba(255,255,255,.7);
text-transform:uppercase; letter-spacing:.08em;
margin-bottom:6px;
}
.sale-num{
display:block;
font-size:48px; font-weight:800;
letter-spacing:-0.04em;
color:#fff;
line-height:1;
}
.sale-sub{
display:block;
font-size:11px;
color:rgba(255,255,255,.65);
margin-top:8px;
letter-spacing:.02em;
}
.cat-slider-arrow{
position:absolute; top:50%;
transform:translateY(-50%);
width:44px; height:44px; border-radius:50%;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.25);
color:#fff;
display:inline-flex; align-items:center; justify-content:center;
z-index:5;
backdrop-filter:blur(8px);
transition:background .2s ease, transform .2s ease;
cursor:pointer;
}
.cat-slider-arrow svg{ width:18px; height:18px; }
.cat-slider-arrow:hover{
background:rgba(255,255,255,.3);
transform:translateY(-50%) scale(1.08);
}
.cat-slider-arrow.prev{ left:20px; }
.cat-slider-arrow.next{ right:20px; }
.cat-slider-dots{
position:absolute; left:50%; bottom:24px;
transform:translateX(-50%);
z-index:5;
display:flex; gap:8px;
}
.cat-slider-dots button{
width:24px; height:4px; border-radius:99px;
background:rgba(255,255,255,.35);
border:0; cursor:pointer;
padding:0;
transition:width .28s ease, background .28s ease;
}
.cat-slider-dots button.active{
width:38px;
background:#fff;
}
@media (max-width:900px){
.cat-slide{ padding:40px 32px; min-height:380px; }
.cat-slide h2{ font-size:34px; }
.cat-slide-sale{ right:32px; padding:18px 22px; min-width:120px; }
.sale-num{ font-size:36px; }
.cat-slider-arrow{ display:none; }
}
@media (max-width:640px){
.cat-slide{ padding:32px 24px 60px; min-height:auto; }
.cat-slide h2{ font-size:26px; }
.cat-slide p{ font-size:14px; }
.cat-slide-sale{
position:static; transform:none;
margin-top:24px;
align-self:flex-start;
}
.cat-slide{ flex-direction:column; align-items:flex-start; }
}
/* ─── Banners promo (2 cards) ────────────────────────────── */
.catalog-promos{
padding:8px 0 16px;
background:#fff;
}
.catalog-promos-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.catalog-promo{
display:grid;
grid-template-columns:1.05fr 1fr;
border-radius:16px;
overflow:hidden;
min-height:200px;
transition:transform .25s ease, box-shadow .25s ease;
text-decoration:none;
color:inherit;
}
.catalog-promo:hover{
transform:translateY(-4px);
box-shadow:0 22px 44px -22px rgba(15,8,32,.22);
}
.catalog-promo.promo-soft{ background:linear-gradient(135deg, #EFE9FB 0%, #DDD2F6 100%); }
.catalog-promo.promo-gray{ background:linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); }
.promo-body{
padding:28px 32px;
display:flex; flex-direction:column; gap:8px;
}
.promo-tag{
display:block;
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11px; font-weight:600;
color:var(--primary);
text-transform:uppercase; letter-spacing:.08em;
}
.promo-gray .promo-tag{ color:#92400E; }
.promo-body h3{
margin:4px 0 6px;
font-size:22px; line-height:1.22; letter-spacing:-0.018em;
font-weight:700;
color:var(--ink);
max-width:280px;
}
.promo-sale{
margin:0 0 14px;
font-size:14px;
color:var(--body);
}
.promo-sale strong{
color:var(--primary);
font-size:17px;
font-weight:700;
letter-spacing:-0.01em;
}
.promo-gray .promo-sale strong{ color:#B45309; }
.promo-btn{
margin-top:auto;
display:inline-flex; align-items:center; gap:6px;
background:var(--ink); color:#fff;
padding:10px 18px; border-radius:8px;
font-size:13px; font-weight:600;
align-self:flex-start;
transition:gap .2s ease, background .2s ease;
}
.catalog-promo:hover .promo-btn{ gap:10px; background:var(--primary); }
.promo-img{
position:relative;
overflow:hidden;
background:transparent;
}
.promo-img img{
width:100%; height:100%; object-fit:cover;
transition:transform .8s ease;
}
.catalog-promo:hover .promo-img img{ transform:scale(1.05); }
@media (max-width:760px){
.catalog-promos-grid{ grid-template-columns:1fr; gap:14px; }
.catalog-promo{ min-height:170px; }
}
@media (max-width:480px){
.catalog-promo{ grid-template-columns:1.4fr 1fr; }
.promo-body{ padding:22px 20px; }
.promo-body h3{ font-size:18px; }
}
/* ─── Categorías · cards con imagen ──────────────────────── */
.catalog-cats-section{
background:#fff;
padding:48px 0 32px;
}
.catalog-cats-head{
display:flex; align-items:flex-end; justify-content:space-between;
gap:32px; margin-bottom:24px;
}
.catalog-cats-head .kicker{
display:block;
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11.5px; font-weight:600;
color:var(--primary);
text-transform:uppercase; letter-spacing:.08em;
margin-bottom:10px;
}
.catalog-cats-head h2{
font-size:34px; line-height:1.08; letter-spacing:-0.022em;
font-weight:700; margin:0;
color:var(--ink);
}
.catalog-cats-head h2 .accent{ color:var(--primary); }
.catalog-cats-sub{
font-size:13.5px; color:var(--mute);
max-width:280px;
text-align:right;
}
.cat-cards-wrap{ position:relative; }
.cat-cards{
display:grid;
grid-template-columns:repeat(6, minmax(0, 1fr));
gap:32px;
max-width:1180px;
margin:0 auto;
align-items:start;
}
/* Círculos (mismo look que el home), conservando el filtro por .active */
.cat-card{
position:static;
aspect-ratio:auto;
width:100%; min-width:0;
border:0; padding:6px 4px; margin:0;
border-radius:0;
overflow:visible;
cursor:pointer;
background:none;
box-shadow:none;
display:flex; flex-direction:column;
align-items:center; text-align:center; gap:18px;
transition:none;
-webkit-appearance:none; appearance:none;
font:inherit;
}
.cat-card:hover{ transform:none; box-shadow:none; }
.cat-card-img{
position:relative; inset:auto;
width:100%; aspect-ratio:1/1;
border-radius:50%;
overflow:hidden;
background-image: var(--cat-img);
background-size: cover;
background-position: center;
background-color:#fff;
border:1px solid var(--line);
transition:border-color .2s ease, box-shadow .2s ease;
z-index:0;
}
.cat-card:hover .cat-card-img{ transform:none; border-color:var(--line2); }
.cat-card-veil{ display:none; }
.cat-card-arrow{ display:none; }
.cat-card-body{
position:static; inset:auto;
z-index:1;
padding:0 6px;
display:flex; flex-direction:column; gap:6px;
text-align:center;
}
.cat-card-title{
order:1;
font-size:16.5px; font-weight:600;
color:var(--ink);
letter-spacing:-0.01em;
line-height:1.25;
text-transform:none;
transition:color .2s ease;
}
.cat-card-count{
order:2;
font-family:'Onest', sans-serif;
font-size:12.5px; font-weight:400;
color:var(--mute);
letter-spacing:0;
text-transform:none;
line-height:1.45;
}
.cat-card:hover .cat-card-title{ color:var(--primary); }
.cat-card.active{ outline:0; }
.cat-card.active .cat-card-img{
border-color:var(--primary);
box-shadow:0 0 0 2px var(--primary);
}
.cat-card.active .cat-card-title{ color:var(--primary); }
.cat-cards-arrow{
position:absolute; top:50%;
transform:translateY(-50%);
width:38px; height:38px; border-radius:50%;
background:#fff; border:1px solid var(--line);
color:var(--ink);
display:none; align-items:center; justify-content:center;
cursor:pointer;
z-index:3;
box-shadow:0 8px 20px -8px rgba(15,8,32,.25);
transition:background .15s, color .15s, transform .15s;
}
.cat-cards-arrow svg{ width:16px; height:16px; }
.cat-cards-arrow:hover{
background:var(--ink); color:#fff;
transform:translateY(-50%) scale(1.08);
}
.cat-cards-arrow.prev{ left:-18px; }
.cat-cards-arrow.next{ right:-18px; }
.cat-cards-arrow.disabled{ opacity:.3; pointer-events:none; }
@media (max-width:1100px){
.cat-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); max-width:760px; gap:28px; }
}
@media (max-width:760px){
.catalog-cats-head{ flex-direction:column; align-items:flex-start; }
.catalog-cats-sub{ text-align:left; }
}
@media (max-width:640px){
.cat-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:420px; gap:22px; }
.cat-cards-arrow{ display:none; }
}
/* ─── Filtro: oculta cat-sections fuera de la categoría ──── */
.cat-section.filter-hidden{ display:none; }
/* ─── Modo "overview" (vista Todos): preview slider de cada categoría ─
En vista filtrada, .cat-section vuelve a grid 4-col con todos los productos. */
.cat-section.is-overview .cat-grid{
display:flex;
grid-template-columns:none;
gap:18px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
padding:4px 4px 24px;
margin:0 -32px;
padding-left:32px;
padding-right:32px;
}
.cat-section.is-overview .cat-grid::-webkit-scrollbar{ display:none; }
.cat-section.is-overview .cat-grid > .prod{
flex:0 0 calc((100% - 18px * 3 - 64px) / 4);
min-width:240px;
max-width:320px;
scroll-snap-align:start;
}
/* Cap visual: solo los primeros 7 productos en preview */
.cat-section.is-overview .cat-grid > .prod:nth-child(n+8){ display:none; }
@media (max-width:1100px){
.cat-section.is-overview .cat-grid > .prod{
flex:0 0 260px;
}
}
@media (max-width:760px){
.cat-section.is-overview .cat-grid > .prod{
flex:0 0 78%;
}
}
/* ───────── WHATSAPP FLOATING BUTTON ───────── */
.wa-float{
position:fixed;
right:22px;
bottom:22px;
width:58px;
height:58px;
border-radius:50%;
background:#25D366;
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 24px -6px rgba(37,211,102,.55), 0 4px 12px rgba(15,8,32,.18);
z-index:9999;
text-decoration:none;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wa-float:hover{
background:#1ebe5b;
transform:translateY(-2px) scale(1.04);
box-shadow:0 14px 32px -8px rgba(37,211,102,.65), 0 6px 16px rgba(15,8,32,.22);
}
.wa-float:focus-visible{
outline:3px solid #fff;
outline-offset:3px;
}
.wa-float svg{
width:30px;
height:30px;
fill:#fff;
}
.wa-float::before{
content:'';
position:absolute;
inset:0;
border-radius:50%;
background:#25D366;
z-index:-1;
animation:wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
0% { transform:scale(1); opacity:.6; }
80% { transform:scale(1.6); opacity:0; }
100% { transform:scale(1.6); opacity:0; }
}
.wa-tooltip{
position:absolute;
right:72px;
top:50%;
transform:translateY(-50%) translateX(6px);
background:#0F0820;
color:#fff;
font-size:13px;
font-weight:500;
padding:8px 12px;
border-radius:8px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
box-shadow:0 6px 18px rgba(15,8,32,.25);
}
.wa-tooltip::after{
content:'';
position:absolute;
right:-5px;
top:50%;
transform:translateY(-50%) rotate(45deg);
width:10px;
height:10px;
background:#0F0820;
}
.wa-float:hover .wa-tooltip,
.wa-float:focus-visible .wa-tooltip{
opacity:1;
transform:translateY(-50%) translateX(0);
}
@media (max-width:600px){
.wa-float{
right:16px;
bottom:16px;
width:54px;
height:54px;
}
.wa-tooltip{ display:none; }
}
/* ════════════ Modelo de operación · carrusel horizontal (Reddex-style) ════════════ */
.opmodel-wrap{ background:var(--gray); padding:96px 0; }
.opmodel-layout{
display:grid;
grid-template-columns:360px 1fr;
gap:80px;
align-items:center;
}
.opmodel-static{
display:flex; flex-direction:column; gap:18px;
}
.opmodel-static h2{
font-size:46px; font-weight:700;
letter-spacing:-0.028em; line-height:1.02;
margin:0;
}
.opmodel-static > p{
font-size:15px; color:var(--mute);
margin:0; line-height:1.65; max-width:34ch;
}
/* Deck area */
.opmodel-deck-area{ display:flex; flex-direction:column; gap:18px; }
.opmodel-deck{
position:relative;
height:420px;
}
.opmodel-card{
position:absolute; inset:0;
border-radius:18px; overflow:hidden;
background:#0e0828;
will-change:transform,opacity;
transition:transform .65s cubic-bezier(.22,.61,.36,1), opacity .5s ease, box-shadow .5s ease;
}
.opmodel-card img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
object-position:center right;
}
.opmodel-veil{
position:absolute; inset:0;
background:linear-gradient(90deg,
rgba(14,8,40,1) 0%,
rgba(14,8,40,.96) 28%,
rgba(14,8,40,.82) 48%,
rgba(14,8,40,0) 72%);
}
.opmodel-card.is-front{
transform:translateY(0) scale(1);
opacity:1; z-index:2;
box-shadow:0 40px 80px -32px rgba(0,0,0,.5);
}
.opmodel-card.is-back{
transform:translateY(24px) scale(.93);
opacity:.32; z-index:1;
box-shadow:none;
}
.opmodel-card-body{
position:relative; z-index:2;
height:100%; padding:40px 44px;
display:flex; flex-direction:column; gap:14px;
justify-content:center; color:#fff;
max-width:58%;
}
.opmodel-tag{
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:10.5px; font-weight:600;
letter-spacing:.08em; text-transform:uppercase;
color:var(--primary);
background:rgba(255,255,255,.95);
padding:5px 12px; border-radius:999px;
align-self:flex-start;
margin-bottom:4px;
}
.opmodel-card-body h3{
font-size:32px; font-weight:700;
letter-spacing:-0.022em; line-height:1.06;
margin:0; color:#fff;
}
.opmodel-card-body > p{
font-size:13.5px; color:rgba(255,255,255,.7);
margin:0; max-width:38ch;
}
.opmodel-list{
list-style:none; padding:0; margin:4px 0 0;
display:flex; flex-direction:column; gap:7px;
}
.opmodel-list li{
font-size:13.5px; color:#fff;
display:flex; gap:10px; align-items:flex-start;
}
.opmodel-list li::before{
content:''; flex:0 0 auto; width:18px; height:18px; margin-top:1px;
border-radius:50%;
background:var(--primary) url("data:image/svg+xml;utf8,") center/11px no-repeat;
}
.opmodel-link{
margin-top:8px; align-self:flex-start;
padding:12px 22px; border-radius:999px;
background:rgba(15,8,32,.35);
backdrop-filter:blur(16px) saturate(1.4);
-webkit-backdrop-filter:blur(16px) saturate(1.4);
border:1px solid rgba(255,255,255,.25);
color:#fff; font-size:14px; font-weight:600;
text-decoration:none; transition:background .2s, border-color .2s;
}
.opmodel-link:hover{ background:rgba(15,8,32,.55); border-color:rgba(255,255,255,.45); }
/* Pills — alineadas a la derecha */
.opmodel-pills{
display:flex; gap:8px;
justify-content:flex-end;
}
.opmodel-pill{
display:inline-flex; align-items:center; gap:9px;
background:#fff; border:1.5px solid var(--line);
border-radius:999px; padding:10px 20px;
cursor:pointer; font-family:'Onest', sans-serif;
font-size:14px; font-weight:500; color:var(--mute);
transition:all .25s;
}
.opmodel-pill-num{
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:11px; font-weight:600; letter-spacing:.06em;
}
.opmodel-pill.active{
background:var(--ink); border-color:var(--ink); color:#fff;
}
.opmodel-pill.active .opmodel-pill-num{ color:rgba(255,255,255,.6); }
.opmodel-pill:not(.active):hover{
border-color:var(--line2); color:var(--ink);
}
@media (max-width:1100px){
.opmodel-layout{ grid-template-columns:1fr; gap:40px; }
.opmodel-static h2{ font-size:38px; }
}
@media (max-width:640px){
.opmodel-wrap{ padding:64px 0; }
.opmodel-deck{ height:360px; }
.opmodel-card-body h3{ font-size:26px; }
.opmodel-card-body{ padding:28px 24px; }
}
/* ═══════════════════════════════════════════════════════════
SERVICIOS · Arco violeta (solo home)
═══════════════════════════════════════════════════════════ */
.svc-arch{
background:var(--bg);
padding:64px 0 0;
overflow:hidden;
}
/* El panel = el arco violeta */
.svc-arch-panel{
position:relative;
background:
radial-gradient(120% 90% at 50% -10%, #4A2592 0%, rgba(74,37,146,0) 60%),
linear-gradient(168deg, #3A1C7A 0%, #2C1660 58%, #251256 100%);
border-radius:80px 80px 0 0;
padding:84px 0 96px;
overflow:hidden;
isolation:isolate;
/* Animación: el arco sube */
transform:translateY(120px);
opacity:0;
transition:transform 1.05s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}
.svc-arch.is-in .svc-arch-panel{ transform:translateY(0); opacity:1; }
/* Halo superior suave dentro del arco */
.svc-arch-glow{
position:absolute; top:-40%; left:50%;
width:760px; height:760px; transform:translateX(-50%);
background:radial-gradient(circle, rgba(157,116,242,.40) 0%, rgba(157,116,242,0) 62%);
pointer-events:none; z-index:0;
opacity:0; transition:opacity 1.1s ease .25s;
}
.svc-arch.is-in .svc-arch-glow{ opacity:1; }
.svc-arch .container{ position:relative; z-index:1; }
/* Cabecera */
.svc-arch-head{
display:grid; grid-template-columns:1.45fr 1fr;
align-items:start; gap:40px;
margin-bottom:52px;
}
.svc-arch-kicker{
display:inline-block;
font-family:'Overpass Mono', ui-monospace, monospace;
font-size:12.5px; font-weight:500;
letter-spacing:.22em; text-transform:uppercase;
color:#B79CEB; margin-bottom:20px;
}
.svc-arch-head h2{
font-size:clamp(38px, 4.6vw, 60px);
font-weight:800; line-height:1.04;
letter-spacing:-0.025em;
color:#fff; margin:0;
}
.svc-arch-head h2 span{ color:#A98BE8; }
.svc-arch-sub{
font-size:16px; line-height:1.6;
color:rgba(255,255,255,.72);
margin:8px 0 0; max-width:340px;
justify-self:end; text-align:left;
}
/* Grid de tarjetas */
.svc-arch-grid{
display:grid; grid-template-columns:repeat(4,1fr);
gap:20px;
perspective:1200px;
}
.svc-card{
position:relative;
display:flex; flex-direction:column;
gap:0;
padding:28px 26px 30px;
border-radius:18px;
background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 100%);
border:1px solid rgba(255,255,255,.12);
color:inherit; text-decoration:none;
overflow:hidden;
/* Reveal escalonado */
transform:translateY(34px); opacity:0;
transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .6s ease,
background .25s ease, border-color .25s ease, box-shadow .3s ease;
transform-style:preserve-3d;
will-change:transform;
}
.svc-arch.is-in .svc-card{ transform:translateY(0); opacity:1; }
.svc-arch.is-in .svc-card:nth-child(1){ transition-delay:.18s,.18s,0s,0s,0s; }
.svc-arch.is-in .svc-card:nth-child(2){ transition-delay:.28s,.28s,0s,0s,0s; }
.svc-arch.is-in .svc-card:nth-child(3){ transition-delay:.38s,.38s,0s,0s,0s; }
.svc-arch.is-in .svc-card:nth-child(4){ transition-delay:.48s,.48s,0s,0s,0s; }
.svc-card:hover{
background:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 100%);
border-color:rgba(183,156,235,.45);
box-shadow:0 26px 50px -28px rgba(0,0,0,.7), inset 0 1px 24px -12px rgba(0,0,0,.4);
}
/* Resplandor que sigue al cursor (zona que "se hunde") */
.svc-card-spot{
position:absolute; inset:0;
pointer-events:none; z-index:2;
border-radius:inherit;
opacity:0;
transition:opacity .35s ease;
background:radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
rgba(169,139,232,.30) 0%,
rgba(124,58,237,.14) 32%,
rgba(124,58,237,0) 60%);
}
.svc-card:hover .svc-card-spot{ opacity:1; }
.svc-card-num{
position:relative; z-index:3;
font-family:'DM Mono', ui-monospace, monospace;
font-size:14px; font-weight:500;
font-variant-numeric:lining-nums tabular-nums;
color:rgba(255,255,255,.55); letter-spacing:.04em;
}
.svc-card-icon{
position:relative; z-index:3;
width:62px; height:62px; margin:22px 0 24px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:50%;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.05);
color:#B79CEB;
transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.svc-card:hover .svc-card-icon{
border-color:rgba(183,156,235,.6);
background:rgba(183,156,235,.12);
transform:translateY(-2px);
}
.svc-card-icon svg{ width:26px; height:26px; }
.svc-card h3{
position:relative; z-index:3;
font-size:21px; font-weight:700;
letter-spacing:-0.02em; line-height:1.2;
color:#fff; margin:0 0 10px;
}
.svc-card p{
position:relative; z-index:3;
font-size:14px; line-height:1.58;
color:rgba(255,255,255,.62);
margin:0 0 22px; flex:1;
}
/* Botón "Conocer más" */
.svc-arch-cta{
display:flex; justify-content:center;
margin-top:36px;
}
.svc-more{
position:relative; overflow:hidden;
display:inline-flex; align-items:center; gap:10px;
padding:16px 30px;
border-radius:16px;
font-size:15px; font-weight:600; letter-spacing:-0.01em;
color:#EDE6FB; text-decoration:none;
background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 100%);
border:1px solid rgba(255,255,255,.14);
transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease,
box-shadow .35s ease, color .3s ease, background .3s ease;
/* Reveal junto al arco */
opacity:0; transform:translateY(20px);
}
.svc-arch.is-in .svc-more{
opacity:1; transform:translateY(0);
transition-delay:.58s;
}
.svc-more .ar{ position:relative; z-index:2; transition:transform .3s ease; display:inline-block; }
.svc-more > :first-child{ position:relative; z-index:2; }
.svc-more-glow{
position:absolute; inset:0; z-index:1;
border-radius:inherit; pointer-events:none;
opacity:0; transition:opacity .35s ease;
background:
radial-gradient(120% 140% at 50% 0%, rgba(169,139,232,.55) 0%, rgba(124,58,237,0) 60%),
linear-gradient(180deg, rgba(149,108,232,.35) 0%, rgba(124,58,237,.12) 100%);
}
.svc-more:hover{
color:#fff;
border-color:rgba(183,156,235,.65);
transform:translateY(-2px);
box-shadow:0 14px 38px -16px rgba(124,58,237,.85), 0 0 26px -6px rgba(169,139,232,.5);
}
.svc-more:hover .svc-more-glow{ opacity:1; }
.svc-more:hover .ar{ transform:translateX(5px); }
@media (prefers-reduced-motion: reduce){
.svc-arch-panel, .svc-card, .svc-arch-glow, .svc-more{
transform:none !important; opacity:1 !important; transition:none !important;
scale:1 !important; filter:none !important;
}
}
@media (max-width: 1080px){
.svc-arch-grid{ grid-template-columns:repeat(2,1fr); }
.svc-arch-head{ grid-template-columns:1fr; gap:18px; }
.svc-arch-sub{ justify-self:start; max-width:480px; }
}
@media (max-width: 640px){
.svc-arch-panel{ border-radius:48px 48px 0 0; padding:60px 0 70px; }
.svc-arch-grid{ grid-template-columns:1fr; }
.svc-arch{ padding-top:40px; }
}
/* ═══════════════════════════════════════════════════════════
NOSOTROS · rediseño (solo page-quienes-somos)
═══════════════════════════════════════════════════════════ */
/* ── Hero · texto izquierda + imagen redondeada derecha ── */
.ab-hero{ background:#fff; padding:84px 0 92px; }
.ab-hero-grid{ display:grid; grid-template-columns:1fr 0.86fr; gap:72px; align-items:center; }
.ab-kicker{ display:inline-block; font-family:'Overpass Mono', monospace; font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); margin-bottom:24px; }
.ab-hero h1{ font-size:clamp(46px, 5.6vw, 78px); line-height:0.98; letter-spacing:-0.038em; font-weight:800; color:var(--ink); margin:0 0 26px; }
.ab-hero h1 .accent{ color:var(--primary); }
.ab-intro{ font-size:clamp(18px, 1.9vw, 21px); line-height:1.46; letter-spacing:-0.01em; color:var(--ink); font-weight:600; max-width:520px; margin:0 0 16px; }
.ab-lead{ font-size:16px; line-height:1.68; color:var(--body); max-width:500px; margin:0 0 32px; }
.ab-hero-tags{ display:flex; flex-wrap:wrap; gap:9px; }
.ab-hero-tags span{ padding:8px 16px; border:1px solid var(--line2); border-radius:999px; font-size:12.5px; font-weight:600; color:var(--body); background:var(--gray); }
.ab-hero-fig{ margin:0; border-radius:24px; overflow:hidden; aspect-ratio:4/4.6; background:var(--ink); box-shadow:0 30px 60px -32px rgba(15,8,32,.35); }
.ab-hero-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ── Banda violeta (frase fundacional) ── */
.ab-band{ padding:0 0 0; }
.ab-band-inner{
position:relative; overflow:hidden;
background:
radial-gradient(120% 140% at 12% 0%, #5A2EA6 0%, rgba(90,46,166,0) 58%),
linear-gradient(120deg, #3A1C7A 0%, #2C1660 60%, #251256 100%);
border-radius:32px; padding:72px 72px;
}
.ab-band-glow{ position:absolute; top:-50%; right:-6%; width:560px; height:560px;
background:radial-gradient(circle, rgba(157,116,242,.42) 0%, rgba(157,116,242,0) 62%); pointer-events:none; }
.ab-band-inner .ab-band-content{ position:relative; z-index:1; max-width:920px; }
.ab-band-mark{ display:block; font-family:'Overpass Mono', monospace; font-size:90px; line-height:.5; height:44px; color:#B79CEB; }
.ab-band blockquote{ margin:0; font-size:clamp(26px, 3.3vw, 44px); line-height:1.18; letter-spacing:-0.025em; font-weight:700; color:#fff; }
.ab-band blockquote .accent{ color:#C4A6FF; }
.ab-band cite{ display:block; margin-top:26px; font-style:normal; font-family:'Overpass Mono', monospace; font-size:12.5px; letter-spacing:.04em; color:rgba(255,255,255,.6); }
/* ── Historia ── */
.ab-h2{ font-size:clamp(32px, 3.6vw, 48px); line-height:1.04; letter-spacing:-0.032em; font-weight:700; color:var(--ink); margin:0 0 20px; }
.ab-h2 .accent{ color:var(--primary); }
.ab-body{ font-size:16.5px; line-height:1.68; color:var(--body); margin:0 0 16px; max-width:520px; }
.ab-hist-figure{ margin:0; border-radius:18px; overflow:hidden; background:var(--ink); aspect-ratio:5/5.3; position:relative; }
.ab-hist-figure img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:auto; border-radius:0; }
.ab-since{ display:inline-flex; align-items:center; gap:10px; margin-top:6px; font-family:'Overpass Mono', monospace; font-size:12.5px; letter-spacing:.04em; color:var(--mute); }
.ab-since::before{ content:''; width:22px; height:1.5px; background:var(--primary); }
/* ── Propósito · header centrado + tarjeta violeta + panel valores ── */
.ab-hist-sec{ position:relative; z-index:2; background:#fff; border-radius:0 0 44px 44px; }
.ab-purpose{ background:var(--gray); margin-top:-44px; padding-top:calc(var(--section-pad, 96px) + 44px); }
.ab-purpose-head{ max-width:620px; margin:0 auto 40px; text-align:center; }
.ab-purpose-head .kicker{ display:inline-block; margin-bottom:18px; }
.ab-purpose-head h2{ font-size:clamp(30px, 3.4vw, 46px); line-height:1.08; letter-spacing:-0.03em; font-weight:800; color:var(--ink); margin:0 0 18px; }
.ab-purpose-head h2 .accent{ color:var(--primary); }
.ab-purpose-head p{ font-size:16px; line-height:1.62; color:var(--body); margin:0; }
/* Capa: tarjeta violeta arriba, panel blanco encajado debajo */
.ab-stack{ position:relative; max-width:1040px; margin:0 auto; }
.ab-mv-card{
position:relative; z-index:2; width:min(680px, 86%); margin:0 auto;
background:
radial-gradient(120% 140% at 18% 0%, #5A2EA6 0%, rgba(90,46,166,0) 60%),
linear-gradient(125deg, #3A1C7A 0%, #2C1660 62%, #251256 100%);
border-radius:26px; padding:40px 44px 70px;
box-shadow:0 30px 60px -30px rgba(40,18,90,.6);
}
.ab-mv-card h3{ text-align:center; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#B79CEB; margin:0 0 28px; }
.ab-vrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 16px; }
.ab-vrow .ab-v{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.ab-vrow .ab-v.shift{ transform:translateY(26px); }
.ab-v-ic{ width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:background .25s ease, transform .25s ease; }
.ab-v:hover .ab-v-ic{ background:rgba(196,166,255,.28); transform:translateY(-3px); }
.ab-v-ic svg{ width:26px; height:26px; }
.ab-v strong{ font-size:16px; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.ab-panel{
position:relative; z-index:1; margin-top:-48px;
background:#fff; border-radius:26px; padding:78px 64px 56px;
box-shadow:0 26px 60px -36px rgba(15,8,32,.28); border:1px solid var(--line);
}
.ab-mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:860px; margin:0 auto; }
.ab-mv-col{ padding:6px 44px; }
.ab-mv-col + .ab-mv-col{ border-left:1px solid var(--line2); }
.ab-mv-col .mv-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.ab-mv-col .mv-ic{ width:34px; height:34px; border-radius:9px; background:var(--soft); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; }
.ab-mv-col .mv-ic svg{ width:19px; height:19px; }
.ab-mv-col h4{ font-size:21px; font-weight:700; letter-spacing:-0.018em; color:var(--ink); margin:0; }
.ab-mv-col p{ font-size:15px; line-height:1.64; color:var(--body); margin:0; }
.ab-eth{ text-align:center; margin-top:30px; font-size:13.5px; color:var(--mute); }
.ab-eth a{ color:var(--primary); font-weight:600; }
.ab-eth a:hover{ text-decoration:underline; }
/* ── Responsive ── */
@media (max-width:980px){
.ab-hero-grid{ grid-template-columns:1fr; gap:40px; }
.ab-hero-fig{ aspect-ratio:16/11; }
.ab-mv-card{ width:100%; }
.ab-panel{ padding:70px 32px 48px; }
.ab-mv-grid{ grid-template-columns:1fr; gap:0; }
.ab-mv-col{ padding:26px 0; }
.ab-mv-col + .ab-mv-col{ border-left:0; border-top:1px solid var(--line2); }
}
@media (max-width:620px){
.ab-hero{ padding:48px 0 56px; }
.ab-band-inner{ padding:44px 28px; border-radius:22px; }
.ab-mv-card{ padding:34px 24px 56px; }
.ab-vrow{ grid-template-columns:repeat(2,1fr); gap:22px 12px; }
}
/* ═══════════════════════════════════════════════════════════
PAGE HERO · banner oscuro full-width (páginas internas)
═══════════════════════════════════════════════════════════ */
.page-hero{
position:relative;
min-height:440px;
display:flex; align-items:center; justify-content:center;
text-align:center;
padding:96px 24px;
background:var(--ink);
color:#fff;
overflow:hidden;
isolation:isolate;
border-radius:0 0 28px 28px;
}
.page-hero-bg{
position:absolute; inset:0; z-index:0;
background-size:cover; background-position:center;
filter:saturate(.85) brightness(.5);
transform:scale(1.04);
}
.page-hero-veil{
position:absolute; inset:0; z-index:1;
background:
linear-gradient(180deg, rgba(15,8,32,.95) 0%, rgba(15,8,32,.72) 22%, rgba(15,8,32,.5) 50%, rgba(15,8,32,.52) 72%, rgba(15,8,32,.82) 100%),
radial-gradient(120% 80% at 50% 16%, rgba(91,33,182,.34) 0%, rgba(15,8,32,0) 55%);
}
.page-hero-body{ position:relative; z-index:2; max-width:780px; }
.page-hero .crumbs{
font-family:'Onest', system-ui, sans-serif;
font-size:12.5px; color:rgba(196,166,255,.92);
margin-bottom:18px; letter-spacing:0;
}
.page-hero .crumbs a{ color:#fff; }
.page-hero h1{
font-size:54px; line-height:1.04; letter-spacing:-0.03em;
font-weight:700; margin:0; color:#fff; text-wrap:balance;
}
.page-hero h1 .accent{ color:#C4A6FF; }
.page-hero p{
font-size:17px; line-height:1.55;
color:rgba(255,255,255,.72);
margin:18px auto 0; max-width:600px; text-wrap:pretty;
}
/* Páginas internas CON hero oscuro: la imagen sube detrás del nav flotante */
body.inner-hero{ padding-top:0; }
body.inner-hero .page-hero{
padding-top: calc(var(--topbar-h) + var(--header-h) + 48px);
padding-bottom: 84px;
min-height: 500px;
}
@media (max-width:760px){
.page-hero{ min-height:340px; padding:72px 20px; border-radius:0 0 20px 20px; }
.page-hero h1{ font-size:36px; }
.cat-slider{ border-radius:0 0 20px 20px; }
}
/* ═══════════════════════════════════════════════════════════
SERVICIOS · rediseño (router + modalidades + timeline + faq)
═══════════════════════════════════════════════════════════ */
/* Router de canales */
.svc-router{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.rcard{ border-radius:18px; padding:42px; display:flex; flex-direction:column; min-height:200px; position:relative; overflow:hidden; }
.rcard.dark{ background:var(--ink); color:#fff; }
.rcard .rglow{ display:none; }
.rcard.light{ background:var(--gray); border:1px solid var(--line); }
.ricon{ width:50px; height:50px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; position:relative; z-index:2; }
.rcard.dark .ricon{ background:rgba(212,188,252,.16); color:#D4BCFC; }
.rcard.light .ricon{ background:#fff; color:var(--primary); border:1px solid var(--line); }
.ricon svg{ width:25px; height:25px; }
.rcard h3{ font-size:27px; font-weight:700; letter-spacing:-0.02em; margin:22px 0 12px; line-height:1.12; position:relative; z-index:2; }
.rcard p{ font-size:15.5px; line-height:1.6; margin:0; position:relative; z-index:2; }
.rcard.dark p{ color:#B4A6D2; }
.rcard.light p{ color:var(--body); }
.rcta{ margin-top:auto; padding-top:30px; position:relative; z-index:2; }
.rbtn{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:9px; font-size:14.5px; font-weight:600; text-decoration:none; transition:transform .15s; }
.rbtn:hover{ transform:translateX(2px); }
.rcard.dark .rbtn{ background:#fff; color:var(--ink); }
.rcard.light .rbtn{ background:var(--primary); color:#fff; }
/* Modalidades Mercado Público */
.modal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mcard{ border:1px solid var(--line); border-radius:16px; padding:28px 24px; display:flex; flex-direction:column; gap:14px; background:#fff; transition:border-color .2s, box-shadow .2s, transform .2s; }
.mcard:hover{ border-color:var(--line2); box-shadow:0 18px 38px -24px rgba(15,8,32,.24); transform:translateY(-3px); }
.micon{ width:48px; height:48px; border-radius:12px; background:var(--soft); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; }
.micon svg{ width:24px; height:24px; }
.mcard h3{ font-size:18px; font-weight:700; letter-spacing:-0.012em; margin:0; line-height:1.2; color:var(--ink); }
.mcard p{ font-size:13.5px; color:var(--body); line-height:1.55; margin:0; flex:1; }
.mbadge{ align-self:flex-start; font-size:12px; font-weight:600; color:var(--primary); background:var(--soft); padding:6px 12px; border-radius:999px; }
.clarify{ display:flex; gap:14px; align-items:flex-start; margin-top:26px; padding:20px 22px; background:var(--soft); border-radius:12px; }
.clarify svg{ flex:0 0 auto; width:20px; height:20px; color:var(--primary); margin-top:1px; }
.clarify p{ margin:0; font-size:14px; line-height:1.55; color:var(--ink); }
.clarify strong{ font-weight:700; }
/* FAQ en Servicios: sigue el gris de la sección, sin fondo blanco */
.faq{ background:transparent; }
/* Cotización · timeline */
.cot-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.cot-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; }
.cot-step::after{ content:''; position:absolute; top:27px; left:54px; width:calc(100% - 30px); height:2px; background:var(--line); z-index:0; }
.cot-step:nth-child(4)::after{ display:none; }
.cot-tile{ position:relative; z-index:2; width:54px; height:54px; border-radius:15px; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.cot-tile svg{ width:26px; height:26px; }
.cot-no{ white-space:nowrap; font-size:13px; font-weight:700; color:var(--mute); margin:20px 0 7px; }
.cot-step h3{ font-size:18px; font-weight:700; letter-spacing:-0.015em; margin:0 0 8px; line-height:1.2; color:var(--ink); }
.cot-step p{ font-size:14px; color:var(--body); line-height:1.55; margin:0; }
@media (max-width:860px){
.svc-router, .modal-grid, .cot-track{ grid-template-columns:1fr; }
.cot-step::after{ display:none; }
}
/* ════════════════════════════════════════════════════════════
FIX MÓVIL · franja superior (topbar + header)
Agregado 2026-06-28. SOLO afecta celulares; el diseño desktop
queda intacto. Resuelve dos bugs en pantallas chicas:
1) El topbar se desbordaba (texto en 3 líneas) y tapaba el logo.
2) El botón "Menú" (hamburguesa) quedaba fuera de pantalla, así
que la navegación era inalcanzable. Ahora el botón
"Solicitar cotización" del header se oculta en móvil y vive
dentro del menú desplegable (.nav-cta-mobile en header.php).
════════════════════════════════════════════════════════════ */
/* CTA dentro del menú móvil: oculto por defecto (desktop) */
.nav-cta-mobile{ display:none; }
@media (max-width:980px){
/* Hamburguesa siempre pegada a la derecha apenas colapsa el nav */
.nav-toggle{ margin-left:auto; }
/* CTA full-width al final del menú desplegado.
Color explícito para que no lo pisen los overrides de estado
del header (transparente/scrolled) y quede siempre legible. */
.nav.open .nav-cta-mobile{
display:inline-flex; justify-content:center;
width:100%; margin-top:6px;
background:var(--primary); color:#fff;
}
.nav.open .nav-cta-mobile:hover{ background:var(--hover); color:#fff; }
}
@media (max-width:640px){
/* Topbar slim: dejar solo los íconos sociales en una línea */
.topbar .left{ display:none; }
.topbar .right > a,
.topbar .right > .pipe{ display:none; }
.topbar .container{ justify-content:flex-end; }
/* Header: logo a la izquierda + hamburguesa a la derecha.
Se oculta el CTA del header (queda dentro del menú). */
.header .container{ gap:14px; }
.header-cta{ display:none; }
}
/* ════════════════════════════════════════════════════════════
FIX MÓVIL · Hero del home más corto (solo celular)
Agregado 2026-06-28. En desktop el hero es full-viewport
(min-height:100vh). En celu eso lo hacía muy largo y la imagen
de fondo quedaba estirada. Acá lo dejamos del alto de su
contenido. NO se toca el desktop.
════════════════════════════════════════════════════════════ */
@media (max-width:640px){
.hero-immersive{ min-height:auto; padding-bottom:56px; }
.hero-immersive .container{ min-height:auto; padding-bottom:44px; }
}
/* ════════════════════════════════════════════════════════════
FIX MÓVIL · Modelo de operación (solo celular)
Agregado 2026-06-28. En desktop la tarjeta es imagen de fondo
con texto encima (max-width 58%) dentro de una caja de alto
fijo. En celu el texto no entraba y se recortaba (texto
fantasma). Acá la rearmamos: imagen como banner arriba + texto
debajo sobre el fondo oscuro, con ALTO AUTOMÁTICO (sin recorte).
La tarjeta de atrás se oculta para no dejar "fantasmas".
NO se toca el desktop.
════════════════════════════════════════════════════════════ */
@media (max-width:640px){
/* El deck deja de tener alto fijo: lo define la tarjeta activa */
.opmodel-deck{ height:auto; }
.opmodel-card{ display:flex; flex-direction:column; }
.opmodel-card.is-front{ position:relative; inset:auto; transform:none; opacity:1; }
.opmodel-card.is-back{ position:absolute; inset:0; transform:none; opacity:0; pointer-events:none; }
/* Imagen como banner superior (ya no de fondo) */
.opmodel-card img{
position:relative; inset:auto;
width:100%; height:172px;
object-position:center;
}
.opmodel-veil{ display:none; }
/* Texto debajo, a todo el ancho, sin solaparse ni recortarse */
.opmodel-card-body{
position:relative; height:auto; max-width:none;
justify-content:flex-start;
padding:24px 22px 26px; gap:12px;
}
.opmodel-card-body h3{ font-size:24px; }
.opmodel-card-body > p{ max-width:none; }
/* Pills apiladas full-width y centradas. Side-by-side no entraba:
"02 Empresas privadas" se cortaba en el borde (y la tapaba el
botón de WhatsApp). Apiladas entran completas y quedan parejas. */
.opmodel-pills{ flex-direction:column; align-items:stretch; gap:10px; }
.opmodel-pill{ flex:0 0 auto; width:100%; justify-content:center; white-space:nowrap; padding:13px 16px; }
}
/* Logo: color o blanco segun el estado (blanco solo en la barra del home sobre el hero) */
.logo img{ filter:none !important; }
.logo .logo-white{ display:none; }
.logo .logo-color{ display:block; }
body:not(.inner):not(.scrolled) .logo .logo-color{ display:none; }
body:not(.inner):not(.scrolled) .logo .logo-white{ display:block; }
/* Marcas: logos un poco mas grandes y mas visibles */
.brand-item{ height:90px; opacity:.62; }
.brand-item img{ max-width:210px; }
@media (max-width:768px){
.brand-item{ height:60px !important; }
.brand-item img{ max-width:150px !important; }
}
/* Formulario: tarjeta branded */
.form-card{
background:#fff;
border:1px solid var(--line, #ECE8F2);
border-radius:16px;
padding:36px;
max-width:760px;
margin:0 auto;
box-shadow:0 20px 50px -24px rgba(35,8,79,.28);
}
.form-card .eyebrow{ color:var(--primary, #7C3AED); }
.form .form-row input:focus,
.form .form-row textarea:focus,
.form .form-row select:focus{
border-color:var(--primary, #7C3AED) !important;
box-shadow:0 0 0 3px rgba(124,58,237,.15) !important;
outline:none;
}
.form .btn-primary{ width:100%; justify-content:center; margin-top:8px; }
@media (max-width:768px){ .form-card{ padding:22px; } }
/* Marcas: todas a la misma ALTURA (logos ya recortados al contenido) */
.brand-item{ height:auto !important; padding:0 12px; }
.brand-item img{ height:58px !important; width:auto !important; max-width:none !important; max-height:none !important; }
@media (max-width:768px){ .brand-item img{ height:42px !important; } }
/* Marcas: achicar las anchas (art queda como referencia) + carrusel arrastrable */
.brand-item img{ height:auto !important; width:auto !important; max-height:60px !important; max-width:160px !important; object-fit:contain; -webkit-user-drag:none; user-select:none; }
@media (max-width:768px){ .brand-item img{ max-height:44px !important; max-width:115px !important; } }
.brands-marquee{ overflow-x:auto !important; cursor:grab; scrollbar-width:none; -ms-overflow-style:none; }
.brands-marquee::-webkit-scrollbar{ display:none; }
.brands-marquee.dragging{ cursor:grabbing; }
img{ -webkit-user-drag:none; }
/* Marcas a color (sin gris), sin agrandar, sin hover-scale */
.brand-item{ opacity:1 !important; filter:none !important; }
.brand-item:hover{ opacity:1 !important; filter:none !important; transform:none !important; }
/* Marcas: gris por defecto; al hover -> color + escala (se traen adelante) + se frena */
.brand-item{ opacity:.6 !important; filter:grayscale(100%) !important; transition:opacity .3s ease, filter .3s ease, transform .25s ease; position:relative; }
.brand-item:hover{ opacity:1 !important; filter:grayscale(0%) !important; transform:scale(1.14) !important; z-index:2; }
/* Sin efecto de escala al hover: solo color + frena (sin "traer adelante") */
.brand-item:hover{ transform:none !important; }
/* Carrusel: volver a overflow hidden (fade de bordes original) + cursor de arrastre */
.brands-marquee{ overflow:hidden !important; overflow-x:hidden !important; cursor:grab; }
.brands-marquee.dragging{ cursor:grabbing; }