@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* ============================================================ CORPORACIÓN LON — Global Stylesheet ============================================================ */ :root { /* ── Marca (invariantes) ── */ --gold: #D19A1D; --gold-dark: #ca9a16; --gold-light:#D4AA20; --green: #173F35 ; --dorado-claro:#E8B93A; --crema:#F3E9C5; /* ── Superficies oscuras fijas (footer, page-hero, secciones .bg-dark-lon) ── */ --dark: #173F35; --dark-2: #2C2C2C; /* ── Semánticas — cambian según tema ── */ --body-bg: #F7F5F0; /* fondo página */ --card-bg: #FFFFFF; /* tarjetas y superficies elevadas */ --gray-bg: #F7F5F0; /* secciones .bg-gray-lon */ --gray-mid: #E8E4DC; /* bordes internos, stripes */ --border: #D6D1C7; /* bordes generales */ --text: #1A1A1A; /* texto principal */ --text-sub: #666666; /* texto secundario / subtítulos */ --text-heading: #1A1A1A; /* headings de sección */ --white: #FFFFFF; /* ── Secciones alternadas (bg-dark-lon) — flipean con el tema ── */ --alt-bg: #FFFFFF; --alt-text: #1A1A1A; --alt-text-muted: #666666; --alt-card-bg: #F7F5F0; --alt-card-border:#D6D1C7; --alt-divider: rgba(0,0,0,.08); /* ── Navbar (cambia con el tema) ── */ --nav-bg: #FFFFFF; --nav-bg-scroll:rgba(255,255,255,.97); --nav-link-c: rgba(30,20,5,.72); --nav-link-sub: rgba(30,20,5,.42); --nav-pill-bg: rgba(0,0,0,.055); --nav-pill-bd: rgba(0,0,0,.09); --nav-sep: rgba(0,0,0,.18); --nav-burger: rgba(20,14,2,.75); --nav-mobile-bg:#F0EDE6; --nav-mobile-bd:rgba(0,0,0,.07); --nav-mobile-lk:rgba(30,20,5,.78); /* ── Misc ── */ --font-head: "Poppins", sans-serif; --font-body: 'Poppins', sans-serif; --radius: 8px; --shadow: 0 4px 24px rgba(0,0,0,.10); --transition:all 0.3s ease; --nav-h: 82px; } /* ============================================================ DARK MODE — activo con data-theme="dark" en ============================================================ */ [data-theme="dark"] { --body-bg: #111111; --card-bg: #1E1E1E; --gray-bg: #161616; --gray-mid: #252525; --border: #2E2E2E; --text: #EDEAE4; --text-sub: #999999; --text-heading: #F0EDE8; --white: #1E1E1E; /* Bootstrap bg-white en modo dark */ --alt-bg: #1A1A1A; --alt-text: #FFFFFF; --alt-text-muted: rgba(255,255,255,.65); --alt-card-bg: rgba(255,255,255,.04); --alt-card-border:rgba(255,255,255,.08); --alt-divider: rgba(255,255,255,.07); --nav-bg: #141414; --nav-bg-scroll:rgba(14,11,3,.97); --nav-link-c: rgba(255,255,255,.75); --nav-link-sub: rgba(255,255,255,.40); --nav-pill-bg: rgba(255,255,255,.07); --nav-pill-bd: rgba(255,255,255,.14); --nav-sep: rgba(255,255,255,.20); --nav-burger: rgba(255,255,255,.80); --nav-mobile-bg:var(--dark-2); --nav-mobile-bd:rgba(255,255,255,.07); --nav-mobile-lk:rgba(255,255,255,.80); --shadow: 0 4px 24px rgba(0,0,0,.40); } /* ===== RESET / BASE ===== */ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; font-size:16px; } body { font-family:var(--font-body); color:var(--text); background:var(--body-bg); overflow-x:hidden; } h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); } img { max-width:100%; display:block; } a { text-decoration:none; } /* ===== UTILITY ===== */ .text-gold { color:var(--gold) !important; } .bg-gold { background-color:var(--gold) !important; } .bg-dark-lon { background-color:var(--alt-bg) !important; background-image:none; } .bg-gray-lon { background-color:var(--gray-bg) !important; } .section-pad { padding:96px 0; } .section-pad-sm { padding:64px 0; } .section-label { font-family:var(--font-head); font-size:.72rem; font-weight:400; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); margin-bottom:.5rem; display:block; } .section-title { font-family:var(--font-head); font-weight:500; font-size:clamp(1.6rem, 3.2vw, 2.5rem); color:var(--text-heading); line-height:1.15; } .section-title span { color:var(--gold); font-weight:700; } .section-title.light { color:var(--alt-text); } .section-title.light span { color:var(--gold); } .section-subtitle { font-size:1rem; color:var(--text-sub); line-height:1.7; max-width:620px; } .section-subtitle.light { color:var(--alt-text-muted); } .gold-bar { width:56px; height:4px; background:var(--gold); border-radius:2px; margin:1rem 0 2rem; } .gold-bar.center { margin-left:auto; margin-right:auto; } /* ===== BUTTONS ===== */ .btn-gold { display:inline-flex; align-items:center; gap:.5rem; background:var(--gold); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:.75rem 1.9rem; border-radius:4px; border:2px solid var(--gold); transition:var(--transition); cursor:pointer; } .btn-gold:hover { background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; transform:translateY(-2px); } .btn-outline-gold { display:inline-flex; align-items:center; gap:.5rem; background:transparent; color:var(--gold); font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:.75rem 1.9rem; border-radius:4px; border:2px solid var(--gold); transition:var(--transition); cursor:pointer; } .btn-outline-gold:hover { background:var(--gold); color:#fff; transform:translateY(-2px); } .btn-dark { display:inline-flex; align-items:center; gap:.5rem; background:var(--dark); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:.75rem 1.9rem; border-radius:4px; border:2px solid var(--dark); transition:var(--transition); cursor:pointer; } .btn-dark:hover { background:#333; color:#fff; transform:translateY(-2px); } /* ===== NAVBAR ===== */ #mainNav { position:fixed; top:0; left:0; right:0; z-index:1050; height:var(--nav-h); background:var(--nav-bg); border-bottom:1px solid var(--nav-pill-bd); transition:background .35s, box-shadow .35s, border-color .35s; display:flex; align-items:center; } #mainNav.scrolled { background:var(--nav-bg-scroll); border-color:transparent; box-shadow:0 2px 20px rgba(0,0,0,.12); } .nav-inner { display:flex; align-items:center; justify-content:space-between; width:100%; /*max-width:1260px;*/ margin:0 auto; padding:0 24px; } .nav-logo { display:flex; align-items:center; } .nav-logo-img { height:44px; width:auto; } .nav-links { display:flex; align-items:center; gap:.2rem; } .nav-link { font-family:var(--font-head); font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--nav-link-c); padding:.5rem .85rem; border-radius:4px; transition:color .22s, background .22s; } .nav-link:hover { color:var(--gold); } .nav-link.active { color:var(--gold); } .nav-right { display:flex; align-items:center; gap:.8rem; } .lang-toggle { display:flex; align-items:center; gap:.3rem; background:var(--nav-pill-bg); border:1px solid var(--nav-pill-bd); border-radius:20px; padding:.3rem .75rem; } .lang-btn { font-family:var(--font-head); font-size:.7rem; font-weight:800; color:var(--nav-link-sub); background:none; border:none; cursor:pointer; padding:0 .15rem; transition:color .2s; letter-spacing:.05em; } .lang-btn.active { color:var(--gold); } .lang-sep { color:var(--nav-sep); font-size:.65rem; } .nav-cta { font-size:.78rem !important; padding:.55rem 1.2rem !important; } /* Hamburger */ .nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; } .nav-burger span { display:block; width:24px; height:2px; background:var(--nav-burger); border-radius:2px; transition:var(--transition); } /* Mobile Nav */ .nav-mobile { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:var(--nav-mobile-bg); border-top:1px solid var(--nav-mobile-bd); z-index:1049; padding:1rem 1.5rem 1.5rem; flex-direction:column; gap:.3rem; } .nav-mobile.open { display:flex; } .nav-mobile .nav-link { color:var(--nav-mobile-lk); padding:.7rem .5rem; border-bottom:1px solid var(--nav-mobile-bd); } .nav-mobile .nav-link:last-child { border:none; } .nav-mobile-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--nav-mobile-bd); } /* .home #mainNav { background:transparent; border:0px none; } */ /* ===== PAGE HERO (inner pages) ===== */ .page-hero { padding-top:calc(var(--nav-h) + 64px); padding-bottom:64px; background:var(--dark); background-image:radial-gradient(ellipse at 20% 80%, rgba(201,162,39,.07), transparent 55%); } .page-hero-label { font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; } .page-hero-label::before { content:''; display:inline-block; width:28px; height:2px; background:var(--gold); } .page-hero h1 { font-family:var(--font-head); font-weight:900; font-size:clamp(1.8rem, 4vw, 3rem); color:#fff; line-height:1.1; margin-bottom:1rem; } .page-hero h1 span { color:var(--gold); } .page-hero p { color:rgba(255,255,255,.65); font-size:1.05rem; line-height:1.7; max-width:580px; } .breadcrumb-lon { display:flex; align-items:center; gap:.5rem; margin-bottom:1.2rem; flex-wrap:wrap; } .breadcrumb-lon a { font-family:var(--font-head); font-size:.72rem; font-weight:600; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.07em; transition:color .2s; } .breadcrumb-lon a:hover { color:var(--gold); } .breadcrumb-lon span { font-size:.65rem; color:rgba(255,255,255,.2); } .breadcrumb-lon .current { font-family:var(--font-head); font-size:.72rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.07em; } /* ===== TICKER ===== */ .brands-bar { background:var(--dark-2); padding:1rem 0; overflow:hidden; } .ticker-track { display:flex; gap:2.8rem; animation:ticker 30s linear infinite; width:max-content; } .ticker-track:hover { animation-play-state:paused; } @keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } } .ticker-item { display:flex; align-items:center; gap:.45rem; font-family:var(--font-head); font-size:.74rem; font-weight:700; color:rgba(255,255,255,.45); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .ticker-item i { color:var(--gold); font-size:.5rem; } /* ===== CARDS ===== */ .card-lon { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .3s, box-shadow .3s; height:100%; } .card-lon:hover { transform:translateY(-6px); box-shadow:0 14px 42px rgba(0,0,0,.12); } .card-lon-dark { background:var(--alt-card-bg); border:1px solid var(--alt-card-border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); height:100%; } .card-lon-dark:hover { background:var(--alt-card-bg); border-color:var(--gold); transform:translateY(-5px); } /* ===== ICON BOX ===== */ .icon-box { width:60px; height:60px; border-radius:12px; background:rgba(201,162,39,.1); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.4rem; flex-shrink:0; } .icon-box.dark { background:var(--alt-card-bg); } /* ===== FADE IN ===== */ .fade-up { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; } .fade-up.in { opacity:1; transform:translateY(0); } .fade-up.d1 { transition-delay:.1s; } .fade-up.d2 { transition-delay:.2s; } .fade-up.d3 { transition-delay:.3s; } .fade-up.d4 { transition-delay:.4s; } /* ===== FOOTER ===== */ .site-footer { background:#111; padding:72px 0 24px; } .footer-brand-corp { font-family:var(--font-head); font-weight:900; font-size:.58rem; color:var(--gold); letter-spacing:.18em; text-transform:uppercase; line-height:1; } .footer-brand-lon { font-family:var(--font-head); font-weight:900; font-size:1.4rem; color:#fff; line-height:1; letter-spacing:.04em; } .footer-tagline { font-size:.84rem; color:rgba(255,255,255,.38); line-height:1.7; margin-top:.7rem; max-width:230px; } .footer-heading { font-family:var(--font-head); font-weight:700; font-size:.72rem; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.9rem; } .footer-link { display:block; font-size:.85rem; color:rgba(255,255,255,.5); margin-bottom:.45rem; transition:color .2s; } .footer-link:hover { color:var(--gold); } .footer-divider { border-color:rgba(255,255,255,.07); margin:2rem 0 1.2rem; } .footer-copy { font-size:.76rem; color:rgba(255,255,255,.25); } .footer-social { display:flex; gap:.5rem; margin-top:1rem; } .footer-social a { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); font-size:.85rem; transition:var(--transition); } .footer-social a:hover { background:var(--gold); color:#fff; } /* ===== BACK TO TOP ===== */ #btt { position:fixed; bottom:1.8rem; right:1.8rem; z-index:900; width:42px; height:42px; border-radius:50%; background:var(--gold); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; box-shadow:0 4px 16px rgba(201,162,39,.4); } #btt.show { opacity:1; pointer-events:all; } #btt:hover { transform:translateY(-3px); } /* ===== RESPONSIVE ===== */ @media (max-width:991px) { .nav-links, .nav-cta { display:none !important; } .nav-burger { display:flex; } } @media (max-width:575px) { .section-pad { padding:64px 0; } } /* ============================================================ COMPONENTES DE PÁGINA — estilos que faltaban del demo HTML ============================================================ */ /* ===== HERO — HOME ===== */ #hero { min-height:100vh; padding-top:var(--nav-h); background:#0d0d0d; background-size:cover; background-position:center right; display:flex; align-items:center; position:relative; overflow:hidden; } .hero-overlay { position:absolute; right:0; top:0; width:60%; height:100%; background:linear-gradient(90deg, rgba(10,8,2,.93) 40%, rgba(10,8,2,.6) 72%, rgba(10,8,2,.2) 100%); pointer-events:none; } .hero-tag { display:inline-block; background:rgba(191,152,17,.13); border:1px solid rgba(191,152,17,.38); color:var(--gold); font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.4rem 1rem; border-radius:20px; margin-bottom:1.4rem; } .hero-title { font-family:var(--font-head); font-weight:700; font-size:clamp(2rem, 5vw, 3.8rem); color:#fff; line-height:1; margin-bottom:1.4rem; } .hero-title span { color:var(--gold); } .hero-desc { font-size:1.05rem; color:rgba(255,255,255,.7); line-height:1.75; max-width:520px; margin-bottom:2.2rem; } .hero-stats { display:flex; gap:2.5rem; flex-wrap:wrap; margin-bottom:2.4rem; } .hero-stat strong { display:block; font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:var(--gold); line-height:1; } .hero-stat span { font-size:.74rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.06em; } .hero-cert { display:flex; align-items:center; gap:.6rem; margin-top:2rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.1); font-family:var(--font-head); font-size:.74rem; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.45); text-transform:uppercase; } .hero-cert i { color:var(--gold); } /* ===== ABOUT PREVIEW — HOME ===== */ .about-img-home { width:100%; height:420px; border-radius:12px; background:linear-gradient(135deg, #f0ebe0, #e8dfc8); display:flex; align-items:center; justify-content:center; font-size:5rem; box-shadow:var(--shadow); position:relative; } .about-stat-card { position:absolute; bottom:-24px; right:-16px; background:var(--gold); color:#fff; border-radius:10px; padding:1.3rem 1.8rem; text-align:center; box-shadow:0 8px 28px rgba(191,152,17,.4); } .about-stat-card strong { display:block; font-family:var(--font-head); font-weight:400; font-size:3rem; line-height:1; } .about-stat-card span { font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; opacity:.9; } .feature-row { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.3rem; } .feature-icon { width:50px; height:50px; border-radius:50%; background:rgba(191,152,17,.1); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.1rem; flex-shrink:0; } .feature-title { font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--text-heading); margin-bottom:.2rem; } .feature-desc { font-size:.86rem; color:var(--text-sub); margin:0; } /* ===== PURPOSE — HOME ===== */ .purpose-quote { font-family:var(--font-head); font-style:italic; font-size:clamp(1.2rem, 2.5vw, 1.8rem); color:var(--alt-text); line-height:1.5; border-left:4px solid var(--gold); padding-left:1.4rem; } .pillar-card { background:var(--alt-card-bg); border:1px solid var(--alt-card-border); border-radius:10px; padding:1.6rem; transition:var(--transition); } .pillar-card:hover { background:var(--alt-card-bg); border-color:var(--gold); transform:translateY(-4px); } .pillar-num { font-family:var(--font-head); font-weight:900; font-size:2.8rem; color:rgba(191,152,17,.22); line-height:1; margin-bottom:.4rem; } .pillar-title { font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--gold); margin-bottom:.45rem; } .pillar-desc { font-size:.86rem; color:var(--alt-text-muted); margin:0; line-height:1.6; } /* ===== SERVICES PREVIEW — HOME ===== */ /* ── Service card — imagen arriba, badge sobre foto ── */ .svc-card-link { display:block; text-decoration:none; height:100%; } .svc-card { background:var(--card-bg); border-radius:12px; box-shadow:var(--shadow); height:100%; transition:var(--transition); overflow:hidden; border:1px solid var(--border); } .svc-card-link:hover .svc-card { transform:translateY(-6px); box-shadow:0 16px 48px rgba(0,0,0,.13); border-color:var(--gold); } /* Imagen con aspect-ratio 3/2 */ .svc-card-img-wrap { position:relative; aspect-ratio:3 / 2; overflow:hidden; background:linear-gradient(135deg, #e8dfc8, #f0ebe0); } .svc-card-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .svc-card-link:hover .svc-card-img-wrap img { /*transform:scale(1.05);*/ } /* Placeholder cuando no hay foto */ .svc-card-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--gold); opacity:.35; } /* Badge sobre la imagen */ .svc-tag { position:absolute; top:.85rem; left:.85rem; display:inline-flex; align-items:center; font-size:.65rem; font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:.28rem .7rem; border-radius:4px; backdrop-filter:blur(6px); z-index:1; display:none; } .svc-tag.corp { background:rgba(191,152,17,.88); color:#fff; } .svc-tag.ind { background:rgba(20,16,4,.72); color:rgba(255,255,255,.9); } /* Contenido bajo la imagen */ .svc-card-body { padding:0 1.5rem 1.6rem; } .svc-card-title { font-family:var(--font-head); font-weight:700; font-size:.97rem; color:var(--text-heading); margin-bottom:.5rem; line-height:1.3; } .svc-card-desc { font-size:.85rem; color:var(--text-sub); line-height:1.65; margin:0; } /* Flecha CTA sutil */ .svc-card-cta { display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem; font-family:var(--font-head); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); transition:gap .2s; } .svc-card-link:hover .svc-card-cta { gap:.55rem; } .icon-box { width:60px; height:60px; border-radius:12px; background:rgba(191,152,17,.1); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.4rem; flex-shrink:0; } /* ===== PARTNERS GRID — HOME ===== */ .partner-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:.7rem; } .partner-chip { background:var(--gray-bg); border-radius:6px; height:56px; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:.74rem; font-weight:700; color:#666; transition:var(--transition); border:1px solid transparent; text-align:center; padding:.4rem; } .partner-chip:hover { background:var(--gold); color:#fff; } /* ===== BRANDS — HOME ===== */ .brand-card { background:#fff; border-radius:10px; padding:1.8rem 1.4rem; text-align:center; box-shadow:var(--shadow); transition:var(--transition); border:2px solid transparent; height:100%; } .brand-card:hover { border-color:var(--gold); transform:translateY(-4px); } .brand-seg { display:inline-block; font-size:.68rem; font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); background:rgba(191,152,17,.1); padding:.2rem .6rem; border-radius:3px; margin-bottom:.6rem; } .brand-logo-wrap { background:transparent; padding:.6rem; margin-bottom:.6rem; display:flex; align-items:center; justify-content:center; height:110px; overflow:hidden; } .brand-logo-wrap img { width:100%; height:100%; object-fit:contain; } .brand-card p { font-size:.82rem; color:var(--text-sub); margin:0; line-height:1.5; } /* ===== CTA BANNER — HOME ===== */ .cta-banner { background:var(--gold); padding:80px 0; position:relative; overflow:hidden; } .cta-banner::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px); background-size:36px 36px; } .cta-banner .container { position:relative; z-index:1; } .cta-banner h2 { font-family:var(--font-head); font-weight:900; font-size:clamp(1.6rem, 3vw, 2.4rem); color:#fff; margin-bottom:.8rem; } .cta-banner p { color:rgba(255,255,255,.88); font-size:1.05rem; } .btn-white { display:inline-flex; align-items:center; gap:.5rem; background:#fff; color:var(--gold); font-family:var(--font-head); font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:.8rem 2rem; border-radius:4px; border:2px solid #fff; transition:var(--transition); } .btn-white:hover { background:transparent; color:#fff; } /* ===== BUTTONS ===== */ .btn-gold { display:inline-flex; align-items:center; gap:.5rem; background:var(--gold); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:.78rem 1.9rem; border-radius:4px; border:2px solid var(--gold); transition:var(--transition); cursor:pointer; text-decoration:none; } .btn-gold:hover { background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; transform:translateY(-2px); } .btn-outline-gold { display:inline-flex; align-items:center; gap:.5rem; background:transparent; color:var(--gold); font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:.78rem 1.9rem; border-radius:4px; border:2px solid var(--gold); transition:var(--transition); cursor:pointer; text-decoration:none; } .btn-outline-gold:hover { background:var(--gold); color:#fff; transform:translateY(-2px); } /* ===== BACK TO TOP ===== */ #btt { position:fixed; bottom:1.8rem; right:1.8rem; z-index:900; width:42px; height:42px; border-radius:50%; background:var(--gold); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; box-shadow:0 4px 16px rgba(191,152,17,.4); } #btt.show { opacity:1; pointer-events:all; } #btt:hover { transform:translateY(-3px); } /* ===== FOOTER ===== */ .site-footer { background:#111; padding:72px 0 24px; } .footer-tagline { font-size:.84rem; color:rgba(255,255,255,.38); line-height:1.7; margin-top:.7rem; max-width:230px; } .footer-heading { font-family:var(--font-head); font-weight:700; font-size:.72rem; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.9rem; } .footer-link { display:block; font-size:.85rem; color:rgba(255,255,255,.5); margin-bottom:.45rem; transition:color .2s; } .footer-link:hover { color:var(--gold); } .footer-divider { border-color:rgba(255,255,255,.07); margin:2rem 0 1.2rem; } .footer-copy { font-size:.76rem; color:rgba(255,255,255,.25); } .footer-social { display:flex; gap:.5rem; margin-top:1rem; } .footer-social a { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); font-size:.85rem; transition:var(--transition); } .footer-social a:hover { background:var(--gold); color:#fff; } /* ===== BRANDS BAR / TICKER ===== */ .brands-bar { background:var(--gray-mid); padding:2rem 0; overflow:hidden; } .ticker-track { display:flex; align-items:center; gap:3.5rem; animation:ticker 35s linear infinite; width:max-content; } .ticker-track:hover { animation-play-state:paused; } @keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } } .ticker-item { display:flex; align-items:center; flex-shrink:0; } .ticker-item img { height:32px; width:auto; max-width:100px; object-fit:contain; display:block; filter:grayscale(1) opacity(.5); transition:filter .35s ease; } .ticker-item:hover img { filter:grayscale(0) opacity(1); } /* ===== NAVBAR ===== */ #mainNav { position:fixed; top:0; left:0; right:0; z-index:1050; height:var(--nav-h); background:var(--nav-bg); border-bottom:1px solid var(--nav-pill-bd); transition:background .35s, box-shadow .35s, border-color .35s; display:flex; align-items:center; } #mainNav.scrolled { background:var(--nav-bg-scroll); border-color:transparent; box-shadow:0 2px 20px rgba(0,0,0,.12); } .nav-inner { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 32px; } .nav-logo { display:flex; align-items:center; } .nav-logo-img { height:44px; width:auto; } .nav-links { display:flex; align-items:center; gap:.2rem; } .nav-link { font-family:var(--font-head); font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--nav-link-c); padding:.5rem .85rem; border-radius:4px; transition:color .22s; text-decoration:none; } .nav-link:hover, .nav-link.active { color:var(--gold); } .nav-right { display:flex; align-items:center; gap:.8rem; } .nav-cta { font-size:.78rem !important; padding:.55rem 1.2rem !important; } .lang-toggle { display:flex; align-items:center; gap:.3rem; background:var(--nav-pill-bg); border:1px solid var(--nav-pill-bd); border-radius:20px; padding:.28rem .7rem; } .lang-btn { font-family:var(--font-head); font-size:.7rem; font-weight:800; color:var(--nav-link-sub); background:none; border:none; cursor:pointer; letter-spacing:.05em; transition:color .2s; text-decoration:none; } .lang-btn.active { color:var(--gold); } .lang-sep { color:var(--nav-sep); font-size:.65rem; } .nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; } .nav-burger span { display:block; width:24px; height:2px; background:var(--nav-burger); border-radius:2px; transition:var(--transition); } .nav-mobile { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:var(--nav-mobile-bg); border-top:1px solid var(--nav-mobile-bd); z-index:1049; padding:1rem 1.5rem 1.5rem; flex-direction:column; gap:.3rem; } .nav-mobile.open { display:flex; } .nav-mobile .nav-link { color:var(--nav-mobile-lk); padding:.7rem .5rem; border-bottom:1px solid var(--nav-mobile-bd); } .nav-mobile-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--nav-mobile-bd); } /* Logo — light mode usa versión color, dark mode usa versión blanca con screen */ .nav-logo-img { height:44px; width:auto; } .nav-logo-img.logo-dark { display:none; } .nav-logo-img.logo-light { display:block; } [data-theme="dark"] .nav-logo-img.logo-light { display:none; } [data-theme="dark"] .nav-logo-img.logo-dark { display:block; mix-blend-mode:screen; } /* bg-white helper — se invierte en dark */ .bg-white { background:var(--card-bg); } .gold-bar { width:52px; height:4px; background:var(--gold); border-radius:2px; margin:1rem 0 2rem; } .gold-bar.center { margin-left:auto; margin-right:auto; } /* ===== SECTION LABEL LIGHT ===== */ .section-label.light { color:var(--gold); } .section-subtitle { font-size:.97rem; color:var(--text-sub); line-height:1.7; max-width:620px; } .section-subtitle.light { color:var(--alt-text-muted); } /* ===== FADE ANIMATIONS ===== */ .fade-up { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; } .fade-up.in { opacity:1; transform:translateY(0); } .d1 { transition-delay:.1s; } .d2 { transition-delay:.2s; } .d3 { transition-delay:.3s; } .d4 { transition-delay:.4s; } /* ===== SECTION PADDING ===== */ .section-pad { padding:96px 0; } .bg-white { background:var(--card-bg); } .bg-gray-lon { background:var(--gray-bg) !important; } /* bg-dark-lon declarado en utility block — el gradiente solo en dark mode */ [data-theme="dark"] .bg-dark-lon { background-image:radial-gradient(ellipse at 20% 80%, rgba(191,152,17,.07), transparent 55%) !important; } /* ===== RESPONSIVE ===== */ @media (max-width:991px) { .nav-links, .nav-cta { display:none !important; } .nav-burger { display:flex; } } @media (max-width:767px) { .section-pad { padding:64px 0; } .hero-stats { gap:1.5rem; } .about-img-home { height:280px; } .about-stat-card { position:relative; bottom:auto; right:auto; margin-top:1rem; display:inline-block; } } @media (max-width:575px) { .hero-title { font-size:clamp(1.8rem, 7vw, 2.6rem); } .partner-grid { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); } } /* ============================================================ PÁGINAS INTERNAS — estilos de componentes ============================================================ */ /* ===== PAGE HERO (inner pages) ===== */ .page-hero { padding-top:calc(var(--nav-h) + 64px); padding-bottom:64px; background:var(--dark); background-image:radial-gradient(ellipse at 20% 80%, rgba(191,152,17,.07), transparent 55%); } .page-hero-label { font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; display:none; } .page-hero-label::before { content:''; display:inline-block; width:28px; height:2px; background:var(--gold); } .page-hero h1 { font-family:var(--font-head); font-weight:900; font-size:clamp(1.8rem, 4vw, 3rem); color:#fff; line-height:1.1; margin-bottom:1rem; } .page-hero h1 span { color:var(--gold); } .page-hero p { color:rgba(255,255,255,.65); font-size:1.05rem; line-height:1.7; max-width:580px; } /* ===== BREADCRUMB ===== */ .breadcrumb-lon { display:flex; align-items:center; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap; } .breadcrumb-lon a { font-family:var(--font-head); font-size:.72rem; font-weight:400; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.07em; transition:color .2s; } .breadcrumb-lon a:hover { color:var(--white); } .breadcrumb-lon span { font-size:.65rem; color:rgba(255,255,255,.2); } .breadcrumb-lon .current { font-family:var(--font-head); font-size:.72rem; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:.07em; } /* ===== INNER PAGE IMAGES PLACEHOLDER ===== */ .inner-img-wrap { width:100%; height:420px; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); position:relative; } .inner-img-ph { width:100%; height:100%; background:linear-gradient(135deg, #f0ebe0, #e8dfc8); display:flex; align-items:center; justify-content:center; font-size:5rem; } .inner-img-dark { width:100%; height:380px; border-radius:12px; background:var(--alt-card-bg); display:flex; align-items:center; justify-content:center; font-size:5rem; border:1px solid var(--alt-card-border); } /* ===== MISIÓN / VISIÓN ===== */ .mv-card { background:var(--alt-card-bg); border:1px solid var(--alt-card-border); border-radius:10px; padding:1.8rem; } .mv-card h3 { font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--gold); margin-bottom:.7rem; text-transform:uppercase; letter-spacing:.06em; } .mv-card p { color:var(--alt-text-muted); font-size:.9rem; line-height:1.7; margin:0; } /* ===== VALORES ===== */ .valor-card { background:#fff; border-radius:10px; padding:1.8rem; box-shadow:var(--shadow); height:100%; transition:var(--transition); border-left:4px solid transparent; } .valor-card:hover { border-left-color:var(--gold); transform:translateX(4px); } .valor-card h3 { font-family:var(--font-head); font-weight:700; font-size:.97rem; color:var(--dark); margin-bottom:.4rem; } .valor-card p { font-size:.86rem; color:#777; margin:0; line-height:1.65; } /* ===== PLANT FEATURE LIST ===== */ .plant-feature { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--alt-divider); } .plant-feature:last-child { border:none; } .plant-feature i { color:var(--gold); width:20px; text-align:center; } .plant-feature span { color:var(--alt-text-muted); font-size:.9rem; } /* ===== SERVICIOS PAGE ===== */ .svc-feature { display:flex; align-items:center; gap:.7rem; padding:.55rem 0; border-bottom:1px solid var(--gray-mid); } .svc-feature:last-child { border:none; } .svc-feature i { color:var(--gold); width:18px; } .svc-feature span { font-size:.88rem; color:#555; } .svc-img-wrap { border-radius:12px; overflow:hidden; box-shadow:var(--shadow); } .svc-img-ph { height:360px; background:linear-gradient(135deg, #f5f0e8, #ede5cf); display:flex; align-items:center; justify-content:center; font-size:4rem; color:var(--gold); } .svc-img-ph img { width:100%; height:100%; object-fit:cover; } .benefit-card-dark { text-align:center; padding:2.4rem 2rem; border-radius:10px; background:var(--alt-card-bg); border:1px solid var(--alt-card-border); transition:var(--transition); height:100%; } .benefit-card-dark:hover { border-color:var(--gold); transform:translateY(-5px); } .benefit-card-dark i { font-size:2.5rem; color:var(--gold); margin-bottom:1rem; display:block; } .benefit-card-dark h3 { font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--alt-text); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.7rem; } .benefit-card-dark p { font-size:.87rem; color:var(--alt-text-muted); margin:0; line-height:1.65; } /* ===== CATÁLOGO ===== */ .catalog-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem; } .filter-btn { font-family:var(--font-head); font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.45rem 1.2rem; border-radius:20px; border:1.5px solid var(--gray-mid); background:transparent; color:#666; cursor:pointer; transition:var(--transition); } .filter-btn.active, .filter-btn:hover { background:var(--gold); border-color:var(--gold); color:#fff; } .prod-card { border-radius:10px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.07); transition:var(--transition); background:#fff; height:100%; } .prod-card:hover { transform:translateY(-6px); box-shadow:0 14px 38px rgba(0,0,0,.13); } .prod-img { height:172px; display:flex; align-items:center; justify-content:center; font-size:3.8rem; position:relative; background:linear-gradient(135deg, #f5f0e8, #ede5cf); } .prod-badge { position:absolute; top:10px; right:10px; background:var(--gold); color:#fff; font-family:var(--font-head); font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.22rem .6rem; border-radius:3px; } .prod-body { padding:1.1rem; } .prod-cat { font-size:.68rem; font-family:var(--font-head); font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.3rem; } .prod-body h3 { font-family:var(--font-head); font-weight:700; font-size:.94rem; color:var(--dark); margin-bottom:.3rem; } .prod-body p { font-size:.82rem; color:#888; margin:0; } .cta-strip { background:var(--gold); padding:72px 0; position:relative; overflow:hidden; } .cta-strip::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px); background-size:36px 36px; } .cta-strip .container { position:relative; z-index:1; } .cta-strip h2 { font-family:var(--font-head); font-weight:900; font-size:clamp(1.5rem,3vw,2.2rem); color:#fff; margin-bottom:.7rem; } .cta-strip p { color:rgba(255,255,255,.88); font-size:1rem; } /* ===== MARCAS PAGE ===== */ .brand-logo-hero { background:#111; border-radius:10px; padding:1rem 1.5rem; margin-bottom:1rem; display:inline-flex; align-items:center; justify-content:center; } .brand-logo-hero img { max-height:80px; width:auto; max-width:260px; object-fit:contain; mix-blend-mode:screen; } .brand-block-img { background:#111; border-radius:12px; padding:2rem; display:flex; align-items:center; justify-content:center; min-height:280px; } .brand-block-img img { max-height:180px; width:auto; max-width:100%; object-fit:contain; } .brand-products-list { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; } .brand-product-tag { background:var(--gray-bg); border-radius:4px; padding:.25rem .7rem; font-size:.78rem; color:#666; font-family:var(--font-head); font-weight:600; } /* ===== CERTIFICACIONES PAGE ===== */ .cert-card-full { background:#fff; border-radius:12px; padding:2rem; box-shadow:var(--shadow); height:100%; transition:var(--transition); border-top:4px solid transparent; } .cert-card-full:hover { border-top-color:var(--gold); transform:translateY(-4px); } .cert-card-icon { width:60px; height:60px; border-radius:50%; background:rgba(191,152,17,.1); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.5rem; margin-bottom:1rem; } .cert-card-full h3 { font-family:var(--font-head); font-weight:900; font-size:1.2rem; color:var(--dark); margin-bottom:.3rem; } .cert-card-full h4 { font-family:var(--font-head); font-weight:700; font-size:.88rem; color:var(--gold); margin-bottom:.6rem; } .cert-card-full p { font-size:.87rem; color:#666; line-height:1.65; margin:0; } /* ===== POLÍTICAS ===== */ .politica-card { background:#fff; border-radius:12px; padding:1.8rem; box-shadow:var(--shadow); height:100%; transition:var(--transition); display:flex; flex-direction:column; gap:.6rem; } .politica-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.1); } .politica-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; } .politica-num { font-family:var(--font-head); font-weight:900; font-size:2rem; color:rgba(191,152,17,.2); line-height:1; } .politica-icon { width:44px; height:44px; border-radius:50%; background:rgba(191,152,17,.1); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1rem; } .politica-card h3 { font-family:var(--font-head); font-weight:700; font-size:.97rem; color:var(--dark); margin:0; } .politica-card p { font-size:.85rem; color:#777; line-height:1.65; margin:0; flex:1; } .politica-pdf-link { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-head); font-size:.76rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; margin-top:auto; transition:color .2s; } .politica-pdf-link:hover { color:var(--gold-dark); } .politica-pdf-link i { font-size:1rem; } .politica-pdf-soon { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-head); font-size:.74rem; font-weight:600; color:#bbb; margin-top:auto; } /* ===== CONTACTO PAGE ===== */ .contact-card { background:#fff; border-radius:14px; padding:2.4rem; box-shadow:var(--shadow); height:100%; } .contact-info-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.4rem; } .cinfo-icon { width:44px; height:44px; border-radius:50%; background:rgba(191,152,17,.1); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1rem; flex-shrink:0; } .contact-info-item h3 { font-family:var(--font-head); font-weight:700; font-size:.84rem; color:var(--dark); margin-bottom:.15rem; } .contact-info-item p { font-size:.86rem; color:#777; margin:0; } .reclamaciones-box { background:var(--gray-bg); border-radius:10px; padding:1.4rem; margin-top:1.5rem; } .reclamaciones-box h3 { font-family:var(--font-head); font-weight:700; font-size:.88rem; color:var(--dark); margin-bottom:.3rem; } .reclamaciones-box p { font-size:.82rem; color:#888; margin-bottom:.8rem; } .btn-reclamaciones { display:inline-flex; align-items:center; gap:.45rem; background:var(--dark); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; padding:.6rem 1.2rem; border-radius:5px; transition:var(--transition); } .btn-reclamaciones:hover { background:#c0392b; color:#fff; } .form-lbl { font-family:var(--font-head); font-size:.78rem; font-weight:700; color:#444; margin-bottom:.3rem; display:block; } .form-inp { border:1.5px solid #e0dbd0; border-radius:6px; padding:.72rem 1rem; font-size:.9rem; width:100%; transition:border-color .2s; font-family:var(--font-body); background:#fff; color:var(--text); } .form-inp:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(191,152,17,.1); outline:none; } textarea.form-inp { resize:vertical; min-height:120px; } /* ===== NEWS ===== */ .news-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); height:100%; display:flex; flex-direction:column; } .news-card:hover { transform:translateY(-5px); box-shadow:0 14px 40px rgba(0,0,0,.11); } .news-img { width:100%; height:200px; object-fit:cover; display:block; } .news-img-link { display:block; overflow:hidden; } .news-img-ph { height:200px; background:linear-gradient(135deg,#f0ebe0,#e8dfc8); display:flex; align-items:center; justify-content:center; font-size:2.5rem; } .news-body { padding:1.4rem; display:flex; flex-direction:column; flex:1; } .news-date { font-family:var(--font-head); font-size:.72rem; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.5rem; display:block; } .news-title { font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--dark); margin-bottom:.6rem; line-height:1.35; } .news-title a { color:inherit; transition:color .2s; } .news-title a:hover { color:var(--gold); } .news-excerpt { font-size:.86rem; color:#777; line-height:1.65; margin-bottom:1rem; flex:1; } .news-read-more { font-family:var(--font-head); font-size:.78rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; transition:color .2s; margin-top:auto; } .news-read-more:hover { color:var(--gold-dark); } .news-pagination { display:flex; justify-content:center; gap:.5rem; margin-top:3rem; flex-wrap:wrap; } .news-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--gray-mid); font-family:var(--font-head); font-size:.82rem; font-weight:700; color:#666; transition:var(--transition); } .news-pagination .page-numbers.current, .news-pagination .page-numbers:hover { background:var(--gold); border-color:var(--gold); color:#fff; } /* ===== ARTICLE (single-noticia) ===== */ .article-hero { padding-top:calc(var(--nav-h) + 64px); padding-bottom:40px; background:var(--dark); } .article-meta { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; font-family:var(--font-head); font-size:.76rem; font-weight:600; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.06em; } .meta-sep { color:rgba(255,255,255,.2); } .article-title { font-family:var(--font-head); font-weight:900; font-size:clamp(1.6rem,3.5vw,2.6rem); color:#fff; line-height:1.15; margin-bottom:.8rem; max-width:780px; } .article-lead { font-size:1.1rem; color:rgba(255,255,255,.65); line-height:1.7; max-width:680px; } .article-featured-img { background:var(--dark); padding-bottom:2rem; } .article-featured-img img { border-radius:12px; max-height:480px; width:100%; object-fit:cover; } .article-content { font-size:1rem; line-height:1.8; color:#333; } .article-content h2 { font-family:var(--font-head); font-weight:800; font-size:1.4rem; color:var(--dark); margin:2rem 0 .8rem; } .article-content h3 { font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--dark); margin:1.5rem 0 .6rem; } .article-content p { margin-bottom:1.2rem; } .article-content img { border-radius:8px; margin:1.5rem 0; } .article-content ul, .article-content ol { padding-left:1.5rem; margin-bottom:1.2rem; } .article-content li { margin-bottom:.4rem; } .article-share { display:flex; align-items:center; gap:.8rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--gray-mid); font-family:var(--font-head); font-size:.78rem; font-weight:700; color:#999; text-transform:uppercase; letter-spacing:.07em; } .article-share a { width:36px; height:36px; border-radius:50%; background:var(--gray-bg); display:flex; align-items:center; justify-content:center; color:#555; font-size:.9rem; transition:var(--transition); } .article-share a:hover { background:var(--gold); color:#fff; } /* ===== CERT BADGE (component) ===== */ .cert-badge { background:#fff; border-radius:10px; padding:1.4rem 1.2rem; text-align:center; box-shadow:var(--shadow); transition:var(--transition); height:100%; } .cert-badge:hover { transform:translateY(-3px); } .cert-badge i { font-size:2rem; color:var(--gold); margin-bottom:.6rem; display:block; } .cert-badge h4 { font-family:var(--font-head); font-weight:800; font-size:.9rem; color:var(--dark); margin-bottom:.3rem; } .cert-badge p { font-size:.76rem; color:#888; margin:0; } /* ===== POLÍTICAS — stat cards ===== */ .politica-stat { text-align:center; padding:1.8rem 1rem; background:#fff; border-radius:12px; box-shadow:var(--shadow); } .politica-stat strong { display:block; font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:var(--gold); line-height:1; margin-bottom:.4rem; } .politica-stat span { font-size:.82rem; color:#888; font-family:var(--font-head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; } /* ============================================================ NAVBAR DROPDOWNS ============================================================ */ .nav-links { display:flex; align-items:center; gap:.1rem; } .nav-item-wrap { position:relative; display:flex; align-items:center; } .nav-arrow { font-size:.55rem; margin-left:.35rem; transition:transform .25s ease; color:var(--nav-link-sub); } .nav-dropdown { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#1e1b10; border:1px solid rgba(191,152,17,.2); border-radius:8px; min-width:220px; padding:.5rem 0; list-style:none; margin:0; box-shadow:0 12px 40px rgba(0,0,0,.45); opacity:0; pointer-events:none; transform:translateX(-50%) translateY(6px); transition:opacity .22s ease, transform .22s ease; z-index:1060; /* triángulo */ } .nav-dropdown::before { content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:12px; height:6px; background:#1e1b10; clip-path:polygon(50% 0%, 0% 100%, 100% 100%); } .nav-item-wrap.has-dropdown:hover .nav-dropdown, .nav-item-wrap.has-dropdown:focus-within .nav-dropdown { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); } /* Puente invisible que cubre el gap entre nav-link y dropdown */ .nav-item-wrap.has-dropdown::after { content:''; position:absolute; top:100%; left:-10px; right:-10px; height:10px; /* cubre el gap de 8px + margen */ background:transparent; } .nav-item-wrap.has-dropdown:hover .nav-arrow, .nav-item-wrap.has-dropdown:focus-within .nav-arrow { transform:rotate(180deg); color:var(--gold); } .nav-item-wrap.has-dropdown:hover > .nav-link, .nav-item-wrap.has-dropdown:focus-within > .nav-link { color:var(--gold); } /* Ítems dentro del dropdown */ .nav-dropdown-item { display:block; padding:.65rem 1.2rem; font-family:var(--font-head); font-size:.76rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.7); transition:color .2s, background .2s; white-space:nowrap; text-decoration:none; } .nav-dropdown-item:hover, .nav-dropdown-item.active { color:var(--gold); background:rgba(191,152,17,.08); } .nav-dropdown li { list-style:none; margin:0; padding:0; } .nav-dropdown li + li { border-top:1px solid rgba(255,255,255,.05); } /* Separador visual dentro del dropdown (si un ítem padre no tiene URL) */ .nav-dropdown-label { display:block; padding:.5rem 1.2rem .2rem; font-family:var(--font-head); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(191,152,17,.5); } /* ===== MOBILE DROPDOWN ===== */ .nav-mobile .nav-item-wrap { flex-direction:column; align-items:flex-start; } .nav-mobile .nav-dropdown { position:static; opacity:1; pointer-events:all; transform:none; box-shadow:none; background:rgba(0,0,0,.04); border:none; border-radius:0; border-left:2px solid rgba(191,152,17,.3); margin-left:1rem; min-width:0; width:calc(100% - 1rem); padding:.3rem 0; display:none; } .nav-mobile .nav-item-wrap.open .nav-dropdown { display:block; } .nav-mobile .nav-item-wrap.open .nav-arrow { transform:rotate(180deg); } .nav-mobile .nav-dropdown::before { display:none; } .nav-mobile .nav-dropdown-item { padding:.5rem .8rem; font-size:.74rem; color:var(--nav-mobile-lk); } .nav-mobile .nav-dropdown-item:hover { color:var(--gold); background:none; } /* ============================================================ SINGLE PRODUCTO ============================================================ */ .producto-single { padding-top:var(--nav-h); } /* Breadcrumb bar */ .producto-breadcrumb-bar { background:var(--gray-bg); border-bottom:1px solid var(--gray-mid); padding:.7rem 0; } .breadcrumb-light a { color:#888; } .breadcrumb-light span { color:#aaa; } .breadcrumb-light .current { color:var(--dark); font-weight:700; } /* Hero */ .producto-hero { padding:56px 0 64px; background:#fff; } .producto-img-wrap { border-radius:12px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.1); background:linear-gradient(135deg, #f5f0e8, #ede5cf); aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center; } .producto-img { width:100%; height:100%; object-fit:cover; display:block; } .producto-img-ph { font-size:6rem; } .producto-familia { display:inline-block; font-family:var(--font-head); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); background:rgba(191,152,17,.1); padding:.25rem .75rem; border-radius:3px; margin-bottom:.8rem; } .producto-title { font-family:var(--font-head); font-weight:900; font-size:clamp(1.8rem, 3.5vw, 2.6rem); color:var(--dark); line-height:1.1; margin-bottom:.6rem; } .producto-excerpt { font-size:1rem; color:#666; line-height:1.7; margin-bottom:1.6rem; } /* Badges */ .producto-badges { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.6rem; } .producto-badge { display:flex; flex-direction:column; align-items:center; background:var(--gray-bg); border:1px solid var(--gray-mid); border-radius:8px; padding:.8rem 1.2rem; min-width:100px; text-align:center; flex:1; } .producto-badges .producto-badge:last-child { display:none; } .producto-badge i { font-size:1.1rem; color:var(--gold); margin-bottom:.3rem; } .badge-label { font-family:var(--font-head); font-size:.66rem; font-weight:600; color:#aaa; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.2rem; } .producto-badge strong { font-family:var(--font-head); font-size:.88rem; font-weight:700; color:var(--dark); } /* Marcas que lo comercializan */ .producto-brands-row { margin-bottom:1.4rem; } .producto-brands-label { font-family:var(--font-head); font-size:.76rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.7rem; } .producto-brands-logos { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; } .producto-brand-logo { background:#111; border-radius:6px; width:72px; height:42px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:.3rem; } .producto-brand-logo img { max-height:34px; width:auto; max-width:60px; object-fit:contain; mix-blend-mode:screen; } /* Presentaciones */ /* ===== PRESENTACIONES — CHIPS UNIFORMES ===== */ .producto-presentations { margin-bottom:1.6rem; } .producto-presentations-label { font-family:var(--font-head); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#888; margin-bottom:.7rem; } .producto-presentations-list { display:flex; flex-wrap:wrap; gap:.5rem; } .presentation-tag { font-family:var(--font-head); font-size:.84rem; font-weight:600; padding:.55rem 1.1rem; border-radius:8px; border:1.5px solid #ddd; color:var(--dark); background:#fff; } /* CTAs */ .producto-ctas { display:flex; flex-direction:column; gap:.7rem; } .btn-producto-cta { width:100%; justify-content:center; padding:.85rem 1.5rem; font-size:.84rem; text-transform:uppercase; letter-spacing:.07em; border-radius:5px; } .btn-dark { display:inline-flex; align-items:center; gap:.5rem; background:var(--dark); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:.78rem 1.9rem; border-radius:4px; border:2px solid var(--dark); transition:var(--transition); cursor:pointer; text-decoration:none; } .btn-dark:hover { background:#333; color:#fff; transform:translateY(-2px); } /* ===== TABS VERTICALES ===== */ .producto-tabs-section { padding:64px 0; background:var(--gray-bg); } .producto-tabs-wrap { display:flex; align-items:flex-start; gap:0; background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; } /* Nav izquierda */ .producto-tabs-nav { display:flex; flex-direction:column; min-width:220px; border-right:1px solid var(--gray-mid); flex-shrink:0; } .tab-btn { display:flex; align-items:center; gap:.7rem; padding:1.2rem 1.4rem; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--font-head); font-size:.82rem; font-weight:600; color:#888; letter-spacing:.04em; border-bottom:1px solid var(--gray-mid); transition:color .2s, background .2s, border-left .2s; border-left:3px solid transparent; } .tab-btn:last-child { border-bottom:none; } .tab-btn i { font-size:.9rem; color:#bbb; transition:color .2s; width:16px; } .tab-btn:hover { color:var(--gold); background:rgba(191,152,17,.04); } .tab-btn:hover i { color:var(--gold); } .tab-btn.active { color:var(--dark); background:rgba(191,152,17,.06); border-left-color:var(--gold); } .tab-btn.active i { color:var(--gold); } /* Contenido */ .producto-tabs-content { flex:1; min-width:0; } .tab-panel { display:none; } .tab-panel.active { display:block; } .tab-content-inner { padding:2rem 2.4rem; font-size:.95rem; color:#444; line-height:1.8; } .tab-content-inner h2, .tab-content-inner h3 { font-family:var(--font-head); font-weight:700; color:var(--dark); margin-bottom:.7rem; margin-top:1.5rem; } .tab-content-inner h2:first-child, .tab-content-inner h3:first-child { margin-top:0; } .tab-content-inner p { margin-bottom:1rem; } .tab-content-inner table { width:100%; border-collapse:collapse; font-size:.88rem; margin-top:1rem; } .tab-content-inner th, .tab-content-inner td { padding:.6rem .9rem; border:1px solid var(--gray-mid); text-align:left; } .tab-content-inner th { background:var(--gray-bg); font-family:var(--font-head); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:#666; } .tab-content-inner tr:nth-child(even) td { background:#fafaf8; } /* ===== MAQUILA CTA ===== */ .producto-maquila-cta { padding:56px 0; background:var(--dark); } .maquila-cta-box { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; background:rgba(255,255,255,.04); border:1px solid rgba(191,152,17,.25); border-radius:12px; padding:2.4rem; } .maquila-cta-icon { width:64px; height:64px; border-radius:50%; flex-shrink:0; background:rgba(191,152,17,.15); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.6rem; } .maquila-cta-content { flex:1; min-width:200px; } .maquila-cta-content h2 { font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:#fff; margin-bottom:.4rem; } .maquila-cta-content p { font-size:.9rem; color:rgba(255,255,255,.6); margin:0; line-height:1.6; } .maquila-cta-actions { display:flex; gap:.8rem; flex-wrap:wrap; flex-shrink:0; } /* ===== FORMULARIO PRODUCTO ===== */ .producto-form-section { padding:80px 0; background:var(--gray-bg); } .producto-form-box { background:#fff; border-radius:14px; padding:2.8rem; box-shadow:var(--shadow); } .producto-form-box h2 { font-family:var(--font-head); font-weight:900; font-size:clamp(1.4rem, 2.5vw, 1.9rem); color:var(--dark); margin-bottom:.5rem; } .producto-form-box h2 span { color:var(--gold); } .producto-form-box p { font-size:.92rem; color:#888; } /* ===== PRODUCTOS RELACIONADOS ===== */ .related-product-card { display:block; background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); text-decoration:none; height:100%; } .related-product-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(0,0,0,.11); } .related-product-img { width:100%; height:160px; object-fit:cover; display:block; } .related-product-ph { height:160px; background:linear-gradient(135deg,#f5f0e8,#ede5cf); display:flex; align-items:center; justify-content:center; font-size:2.5rem; } .related-product-body { padding:1rem 1.1rem; } .related-product-body h3 { font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--dark); margin-top:.3rem; } /* ===== RESPONSIVE TABS ===== */ @media (max-width:767px) { .producto-tabs-wrap { flex-direction:column; } .producto-tabs-nav { flex-direction:row; min-width:0; width:100%; border-right:none; border-bottom:1px solid var(--gray-mid); overflow-x:auto; } .tab-btn { border-bottom:none; border-left:none; border-bottom:3px solid transparent; white-space:nowrap; padding:.9rem 1rem; font-size:.74rem; } .tab-btn.active { border-left:none; border-bottom-color:var(--gold); } .maquila-cta-box { flex-direction:column; text-align:center; } .maquila-cta-actions { justify-content:center; } .producto-badges { gap:.4rem; } .producto-badge { min-width:80px; padding:.6rem .8rem; } } /* ===== ORIGIN FLAGS ===== */ .origin-flags { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; justify-content:center; } .origin-flag img { border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.2); display:block; } /* ===== DESCRIPCIÓN LARGA EN HERO DE PRODUCTO ===== */ .producto-excerpt-long { font-size:.95rem; color:#555; line-height:1.75; margin-bottom:1.4rem; } .producto-excerpt-long p { margin-bottom:.6rem; } .producto-excerpt-long p:last-child { margin-bottom:0; } /* ===== CTAS HORIZONTALES PRODUCTO ===== */ .producto-ctas-row { display:flex; gap:.8rem; flex-wrap:wrap; } .btn-producto-cta-h { display:inline-flex; align-items:center; gap:.5rem; padding:.78rem 1.6rem; border-radius:4px; font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.07em; text-transform:uppercase; transition:var(--transition); cursor:pointer; text-decoration:none; flex:1; justify-content:center; } /* ===== CATÁLOGO — mejoras ===== */ .filter-count { display:inline-flex; align-items:center; justify-content:center; background:rgba(0,0,0,.08); color:inherit; font-size:.65rem; font-weight:800; min-width:18px; height:18px; border-radius:9px; padding:0 5px; margin-left:.35rem; line-height:1; } .filter-btn.active .filter-count { background:rgba(255,255,255,.25); } .prod-card-link { display:block; text-decoration:none; height:100%; } .prod-card-img { width:100%; height:100%; object-fit:cover; display:block; } .prod-badge.nacional { background:#27ae60; } .prod-badge.importado { background:var(--gold); } .prod-flags { display:flex; gap:.25rem; align-items:center; margin-top:.4rem; flex-wrap:wrap; } .prod-flags img { border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.15); } .catalog-count { font-size:.82rem; color:#aaa; margin-top:2rem; text-align:right; } .catalog-empty { text-align:center; padding:4rem 0; } .catalog-empty p { color:#888; font-size:1rem; margin-bottom:1.2rem; } /* ===== NOTICIAS HOME ===== */ .home-news-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); height:100%; display:flex; flex-direction:column; } .home-news-card:hover { transform:translateY(-5px); box-shadow:0 14px 40px rgba(0,0,0,.11); } .home-news-card .news-img { width:100%; height:220px; object-fit:cover; display:block; } .home-news-card .news-img-link { display:block; overflow:hidden; flex-shrink:0; } .home-news-card .news-body { padding:1.4rem; display:flex; flex-direction:column; flex:1; } .home-news-card .news-title { font-size:1.05rem; line-height:1.35; } .home-news-card .news-excerpt { font-size:.88rem; flex:1; } /* Hero home — espejo horizontal */ #hero { transform:scaleX(-1); } #hero > * { transform:scaleX(-1); } /* ============================================================ HERO SLIDER (hero-slider.php) ============================================================ */ #heroSlider { position:relative; width:100%; overflow:hidden; } .hero-swiper { width:100%; height:100vh; min-height:600px; } .hero-slide-bg { position:absolute; inset:0; background-size:cover; background-position:center center; z-index:0; transform:scaleX(-1); } .hero-slide { position:relative; display:flex; align-items:center; background:#0d0d0d; background-size:cover; background-position:center center; overflow:hidden; } .hero-slide-inner { position:relative; z-index:2; padding-top:var(--nav-h); padding-bottom:5rem; } .hero-slide-overlay { position:absolute; inset:0; background:linear-gradient(100deg, rgba(8,6,1,.95) 30%, rgba(10,8,2,.65) 65%, rgba(20,16,4,.25) 100%); pointer-events:none; z-index:1; } .hero-slide-overlay--service { background:linear-gradient(100deg, rgba(8,6,1,.95) 30%, rgba(10,8,2,.65) 65%, rgba(20,16,4,.25) 100%); } .hero-slide-overlay--video { background:linear-gradient(to bottom, rgba(8,6,1,.35) 0%, rgba(8,6,1,.55) 50%, rgba(8,6,1,.80) 100%); } .hero-slide--maquila, .hero-slide--marcas { background:#0d0d0d; } .hero-video-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .hero-video-fallback { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 60% 40%, #1a1508 0%, #06050200 70%), #080601; } .hero-service-features { display:flex; flex-direction:column; gap:.55rem; margin:1.6rem 0 2rem; } .hsf-item { display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:rgba(255,255,255,.78); font-family:var(--font-body); } .hsf-item i { color:var(--gold); font-size:.85rem; flex-shrink:0; } /* ── Paginación ── */ .hero-pagination { position:absolute !important; bottom:2rem !important; left:50% !important; transform:translateX(-50%) !important; z-index:10; display:flex; gap:.3rem; justify-content:center; } .hero-pagination .swiper-pagination-bullet { width:20px; height:6px; border-radius:3px; background:rgba(255,255,255,.3); opacity:1; transition:background .3s, width .3s; } .hero-pagination .swiper-pagination-bullet-active { background:var(--gold); width:40px; } /* ── Flechas de navegación ── */ .hero-nav-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(6px); cursor:pointer; transition:background .25s, border-color .25s, transform .25s; display:flex; align-items:center; justify-content:center; } .hero-nav-btn:hover { background:var(--gold); border-color:var(--gold); transform:translateY(-50%) scale(1.08); } /* Swiper sobreescribe los ::after — resetear y usar iconos FA vía CSS */ .hero-prev { left:1.5rem; } .hero-next { right:1.5rem; } .hero-prev::after, .hero-next::after { font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.85rem; color:inherit; } .hero-prev::after { content:'\f053'; } /* fa-chevron-left */ .hero-next::after { content:'\f054'; } /* fa-chevron-right */ /* ── Responsive ── */ @media (max-width:767px) { .hero-swiper { height:100svh; min-height:580px; } .hero-slide-inner { padding-bottom:6rem; } .hero-nav-btn { width:38px; height:38px; } .hero-prev { left:.75rem; } .hero-next { right:.75rem; } .hero-service-features { gap:.45rem; } } @media (max-width:575px) { .hero-pagination .swiper-pagination-bullet { width:20px; } .hero-pagination .swiper-pagination-bullet-active { width:36px; } } /* ============================================================ THEME TOGGLE BUTTON Botón A/A del navbar — se agrega en nav.php junto al lang-toggle ============================================================ */ .theme-toggle { width:36px; height:36px; border-radius:50%; background:var(--nav-pill-bg); border:1px solid var(--nav-pill-bd); color:var(--nav-link-c); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:var(--transition); flex-shrink:0; } .theme-toggle:hover { background:var(--gold); color:#fff; border-color:var(--gold); } /* ============================================================ LÍNEA DE TIEMPO — section-historia.php ============================================================ */ .timeline { position:relative; padding:2rem 0 1rem; } /* Línea vertical central */ .timeline::before { content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:2px; background:linear-gradient(to bottom, transparent, rgba(191,152,17,.35) 8%, rgba(191,152,17,.35) 92%, transparent); } /* ── Item ── */ .tl-item { position:relative; display:flex; align-items:flex-start; margin-bottom:3.5rem; gap:0; } .tl-item:last-child { margin-bottom:0; } /* Items pares → tarjeta a la izquierda */ .tl-left { flex-direction:row-reverse; } /* Items impares → tarjeta a la derecha */ .tl-right { flex-direction:row; } /* ── Nodo central ── */ .tl-node { position:absolute; left:50%; transform:translateX(-50%); top:.8rem; z-index:2; flex-shrink:0; } .tl-node-inner { width:44px; height:44px; border-radius:50%; background:var(--dark-2); border:2px solid rgba(191,152,17,.4); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.9rem; transition:background .3s, border-color .3s, transform .3s; } .tl-item:hover .tl-node-inner, .tl-current .tl-node-inner { background:var(--gold); border-color:var(--gold); color:#fff; transform:scale(1.12); } /* ── Tarjeta ── */ .tl-card { width:calc(50% - 42px); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:1.6rem 1.8rem; transition:background .3s, border-color .3s, transform .3s; cursor:default; } .tl-left .tl-card { margin-right:auto; text-align:right; } .tl-right .tl-card { margin-left: auto; text-align:left; } .tl-item:hover .tl-card { background:rgba(191,152,17,.07); border-color:rgba(191,152,17,.25); transform:translateY(-3px); } /* ── Conector horizontal (línea card → nodo) ── */ .tl-card::after { content:''; position:absolute; top:1.55rem; width:42px; height:1px; background:rgba(191,152,17,.3); } .tl-left .tl-card::after { right:-42px; } .tl-right .tl-card::after { left: -42px; } /* ── Año ── */ .tl-year { font-family:var(--font-head); font-weight:900; font-size:2rem; color:rgba(191,152,17,.25); line-height:1; margin-bottom:.2rem; } /* ── Label ── */ .tl-label { font-family:var(--font-head); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); margin-bottom:.5rem; } /* ── Título ── */ .tl-title { font-family:var(--font-head); font-weight:800; font-size:1rem; color:#fff; margin-bottom:.6rem; line-height:1.3; } /* ── Cuerpo ── */ .tl-body { font-size:.86rem; color:rgba(255,255,255,.58); line-height:1.7; margin:0; } /* ── Badge "Hoy" ── */ .tl-badge-current { display:inline-flex; align-items:center; gap:.35rem; margin-top:.9rem; font-family:var(--font-head); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); background:rgba(191,152,17,.12); border:1px solid rgba(191,152,17,.3); border-radius:20px; padding:.25rem .75rem; } .tl-badge-current i { font-size:.55rem; animation:pulse-dot 1.8s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity:1; } 50% { opacity:.35; } } /* ── RESPONSIVE ── */ @media (max-width:767px) { /* Colapsar a columna única — línea a la izquierda */ .timeline::before { left:22px; transform:none; } .tl-item, .tl-left, .tl-right { flex-direction:column; padding-left:64px; } .tl-node { left:0; transform:none; top:0; } .tl-card { width:100%; text-align:left !important; } .tl-card::after { display:none; } .tl-left .tl-card { margin-right:0; } } @media (max-width:575px) { .tl-item { padding-left:52px; margin-bottom:2rem; } .tl-card { padding:1.2rem 1.3rem; } .tl-year { font-size:1.5rem; } } /* ============================================================ LÍNEA DE TIEMPO HORIZONTAL — section-historia v2 ============================================================ */ /* ── Wrapper extendido al borde ── */ .tl-swiper-wrap { position:relative; margin:0 0 2.5rem; /* permite que las flechas salgan del container */ } /* ── Swiper ── */ .tl-swiper { padding:2rem 0 2.5rem !important; /* peek:se ven parcialmente slides adyacentes */ overflow:visible !important; } /* Máscara para ocultar lo que sale de la pantalla */ .tl-swiper-wrap { overflow:hidden; padding:0 clamp(1.5rem, 5vw, 5rem); } /* ── Slide ── */ .tl-slide { position:relative; height:auto; opacity:.45; transform:scale(.94); transition:opacity .4s ease, transform .4s ease; } .tl-slide.swiper-slide-active { opacity:1; transform:scale(1); } /* ── Año tipográfico de fondo ── */ .tl-slide-bg-year { position:absolute; bottom:-1rem; right:-1rem; font-family:var(--font-head); font-weight:900; font-size:clamp(5rem, 14vw, 9rem); color:rgba(191,152,17,.07); line-height:1; letter-spacing:-.03em; pointer-events:none; user-select:none; transition:color .4s; /* Posicionado respecto a .tl-slide-card (position:relative + overflow:hidden) */ z-index:0; } .tl-slide.swiper-slide-active .tl-slide-bg-year { color:rgba(191,152,17,.13); } /* ── Tarjeta ── */ .tl-slide-card { background:var(--alt-card-bg); border:1px solid var(--alt-card-border); border-radius:16px; padding:2rem 2.2rem 2rem; height:100%; position:relative; overflow:hidden; transition:background .4s, border-color .4s; } .tl-slide.swiper-slide-active .tl-slide-card { border-color:var(--gold); } /* ── Top row:icono + año/label ── */ .tl-slide-top { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; position:relative; z-index:1; } .tl-slide-icon { width:48px; height:48px; border-radius:12px; background:rgba(191,152,17,.12); border:1px solid rgba(191,152,17,.2); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.1rem; flex-shrink:0; transition:background .4s, border-color .4s; } .tl-slide.swiper-slide-active .tl-slide-icon { background:rgba(191,152,17,.2); border-color:rgba(191,152,17,.45); } .tl-slide-year { font-family:var(--font-head); font-weight:900; font-size:1.43rem; /* 1.3 × 1.1 */ color:var(--gold); line-height:1; } .tl-slide-label { font-family:var(--font-head); font-size:.75rem; font-weight:700; /* .68 × 1.1 */ text-transform:uppercase; letter-spacing:.12em; color:var(--alt-text-muted); margin-top:.2rem; } /* ── Título ── */ .tl-slide-title { font-family:var(--font-head); font-weight:800; font-size:1.16rem; /* 1.05 × 1.1 */ color:var(--alt-text); line-height:1.3; margin-bottom:.8rem; position:relative; z-index:1; } /* ── Cuerpo ── */ .tl-slide-body { font-size:.96rem; /* .87 × 1.1 */ color:var(--alt-text-muted); line-height:1.72; margin:0; position:relative; z-index:1; } /* ── Stat destacado ── */ .tl-slide-stat { display:flex; align-items:baseline; gap:.5rem; margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--alt-divider); } .tl-slide-stat strong { font-family:var(--font-head); font-weight:900; font-size:1.65rem; /* 1.5 × 1.1 */ color:var(--gold); line-height:1; } .tl-slide-stat span { font-family:var(--font-head); font-size:.79rem; font-weight:600; /* .72 × 1.1 */ text-transform:uppercase; letter-spacing:.07em; color:var(--alt-text-muted); } /* ── Badge "Hoy" ── */ .tl-slide-now { display:inline-flex; align-items:center; gap:.35rem; margin-top:1.2rem; font-family:var(--font-head); font-size:.77rem; font-weight:700; /* .7 × 1.1 */ text-transform:uppercase; letter-spacing:.1em; color:var(--gold); background:rgba(191,152,17,.12); border:1px solid rgba(191,152,17,.3); border-radius:20px; padding:.25rem .8rem; } .tl-slide-now i { font-size:.6rem; animation:pulse-dot 1.8s ease-in-out infinite; } /* .55 × 1.1 */ /* ── Flechas de navegación ── */ .tl-nav-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.7); backdrop-filter:blur(6px); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:background .25s, color .25s, border-color .25s, transform .25s; } .tl-nav-btn:hover { background:var(--gold); border-color:var(--gold); color:#fff; transform:translateY(-50%) scale(1.1); } .tl-prev { left:.5rem; } .tl-next { right:.5rem; } /* ── Barra de años ── */ .tl-year-nav { position:relative; display:flex; align-items:flex-start; /* dots se alinean desde arriba */ justify-content:space-between; padding:0 0 1.6rem; /* espacio para las labels */ } .tl-year-line { position:absolute; top:4px; /* centro del círculo de 10px (5px) − 1px de línea ≈ 4px */ left:0; right:0; height:1px; background:var(--alt-card-border); } .tl-year-progress { position:absolute; top:0; left:0; height:100%; background:var(--gold); width:0%; transition:width .4s ease; } .tl-year-dot { position:relative; display:flex; flex-direction:column; align-items:center; gap:.45rem; background:none; border:none; cursor:pointer; padding:0; } /* Punto del dot */ .tl-year-dot::before { content:''; width:10px; height:10px; border-radius:50%; background:var(--alt-card-border); border:1.5px solid var(--alt-card-border); transition:background .25s, border-color .25s, transform .25s; flex-shrink:0; } .tl-year-dot.active::before, .tl-year-dot:hover::before { background:var(--gold); border-color:var(--gold); transform:scale(1.4); } .tl-year-dot-label { font-family:var(--font-head); font-size:.72rem; font-weight:700; /* .65 × 1.1 */ color:var(--alt-text-muted); letter-spacing:.05em; transition:color .25s; white-space:nowrap; } .tl-year-dot.active .tl-year-dot-label, .tl-year-dot:hover .tl-year-dot-label { color:var(--gold); } /* ── Responsive ── */ @media (max-width:991px) { .tl-year-dot-label { font-size:.64rem; } /* .58 × 1.1 */ } @media (max-width:767px) { /* En mobile ocultar algunos años intermedios para no saturar */ .tl-year-dot:nth-child(even) .tl-year-dot-label { display:none; } .tl-nav-btn { width:36px; height:36px; font-size:.75rem; } } @media (max-width:575px) { .tl-slide-card { padding:1.4rem 1.5rem; } .tl-slide-bg-year { font-size:5rem; } } /* ============================================================ NOSOTROS — placeholders e imagen body text ============================================================ */ /* ── Texto cuerpo (reemplaza inline style="color:#555") ── */ .nosotros-body-text { color:var(--text-sub); line-height:1.78; font-size:.97rem; } .nosotros-body-text.light { color:var(--alt-text-muted); } /* ── Tagline propósito ── */ .purpose-tagline { color:var(--alt-text-muted); font-family:var(--font-head); font-style:italic; font-size:1.05rem; border-left:3px solid var(--gold); padding-left:1rem; margin:0; } /* ── Placeholder Quiénes Somos ── */ .nosotros-img-ph { width:100%; height:420px; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:linear-gradient(135deg, #f0ebe0 0%, #e4d9c0 50%, #d8cdb0 100%); display:flex; align-items:stretch; } .nosotros-img-ph-inner { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem; background:linear-gradient(160deg, rgba(191,152,17,.08) 0%, rgba(191,152,17,.03) 100% ); } .nosotros-img-ph-icon { font-size:3.5rem; color:var(--gold); opacity:.7; } .nosotros-img-ph-label { font-family:var(--font-head); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); opacity:.8; } .nosotros-img-ph-stats { display:flex; gap:2rem; margin-top:.5rem; } .nosotros-img-ph-stats div { display:flex; flex-direction:column; align-items:center; } .nosotros-img-ph-stats strong { font-family:var(--font-head); font-weight:900; font-size:1.8rem; color:var(--dark); line-height:1; } .nosotros-img-ph-stats span { font-family:var(--font-head); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#888; margin-top:.2rem; } /* ── Placeholder Planta Industrial ── */ .planta-img-ph { width:100%; height:380px; border-radius:12px; overflow:hidden; border:1px solid rgba(191,152,17,.2); background:var(--alt-card-bg); border:1px solid var(--alt-card-border); display:flex; align-items:stretch; } .planta-img-ph-inner { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; padding:2rem; } .planta-img-ph-icon { font-size:3.2rem; color:var(--gold); opacity:.5; } .planta-img-ph-data { display:flex; align-items:center; gap:2rem; } .planta-stat { display:flex; flex-direction:column; align-items:center; gap:.15rem; } .planta-stat strong { font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:var(--gold); line-height:1; } .planta-stat span { font-family:var(--font-head); font-size:.78rem; font-weight:700; color:var(--alt-text); letter-spacing:.04em; } .planta-stat em { font-family:var(--font-head); font-size:.64rem; font-weight:600; font-style:normal; color:var(--alt-text-muted); text-transform:uppercase; letter-spacing:.08em; } .planta-stat-divider { width:1px; height:60px; background:var(--gold); opacity:.3; } .planta-img-ph-label { font-family:var(--font-head); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--alt-text-muted); } /* ── Responsive ── */ @media (max-width:767px) { .nosotros-img-ph { height:280px; } .nosotros-img-ph-stats { gap:1.2rem; } .nosotros-img-ph-stats strong { font-size:1.4rem; } .planta-img-ph { height:280px; } .planta-stat strong { font-size:1.7rem; } } /* ============================================================ PARTNERS — logo grid ============================================================ */ .partners-logo-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:1rem; } .partner-logo-chip { background:transparent; border:none; border-radius:0; height:72px; display:flex; align-items:center; justify-content:center; padding:.5rem 1rem; transition:var(--transition); } .partner-logo-chip:hover { transform:translateY(-2px); } .partner-logo-chip img { max-width:130px; max-height:48px; width:auto; height:auto; object-fit:contain; display:block; filter:none; transition:filter .3s ease, opacity .3s ease; opacity:.85; } .partner-logo-chip:hover img { filter:none; opacity:1; } @media (max-width:575px) { .partners-logo-grid { gap:.8rem; } .partner-logo-chip { height:56px; padding:.4rem .75rem; } .partner-logo-chip img { max-width:100px; max-height:36px; } } .page-template-template-marcas .brand-logo-hero { display:none; } #mainNav .nav-link { font-weight:500; } .home #mainNav { background:transparent; border-bottom:none; } .home #mainNav .nav-link { color:var(--white); } .home .nav-logo-img.logo-dark { display:block; } .home .nav-logo-img.logo-light { display:none; } .home #mainNav:not(.scrolled) .lang-toggle { border-color:#FFFFFF14; background:#FFFFFF50; backdrop-filter:blur(20px); } .home #mainNav:not(.scrolled) .lang-toggle .lang-btn:not(.active), .home #mainNav:not(.scrolled) .lang-sep { color:var(--white); } .home #mainNav:not(.scrolled) .lang-toggle .lang-btn.active { color:var(--green); } .lang-btn { font-weight:400; } #mainNav.scrolled { background:var(--white); } #mainNav.scrolled .nav-logo-img.logo-dark { display:none; } #mainNav.scrolled .nav-logo-img.logo-light { display:block; } #mainNav.scrolled .nav-link { color:var(--text); } /* HERO */ #hero { align-items:flex-end; } .hero-overlay { background:linear-gradient(90deg, rgba(31, 61, 53,.93) 40%, rgba(31, 61, 53,.6) 72%, rgba(31, 61, 53,.1) 100%); } .hero-title { font-size:clamp(1.8rem, 4.5vw, 3.2rem); font-weight:400; line-height:1.1; } .hero-bottom { padding-top:3rem; margin-top:1rem; margin-bottom:2rem; } .hero-marcas { display:flex; align-items:center; gap:30px; } .hero-marcas span { } .hero-marcas span img { width:auto; height:60px; } .hero-title { margin-bottom:3rem; } .hero-title span { white-space:nowrap; font-weight:700; text-transform:uppercase; } .hero-cert { display:inline-flex; gap:2rem ;line-height:1.3; text-transform:none; padding:0; margin:0 0 0 auto; border:none; } .hero-cert-2 { padding:2rem; margin:0 0 0 auto; border:1px solid #FFFFFF14; border-radius:1rem; background:#FFFFFF14; backdrop-filter:blur(20px); } .hero-cert i { color:var(--gold); } .hero-cert h2 { display:flex; align-items:center; font-size:.8rem; color:var(--white); gap:12px; margin:0; } .hero-cert h2 i { color:var(--gold); font-size:2em; } .hero-cert h2 strong { display:block; color:var(--gold); } .hero-cert .logos { display:flex; align-items:center; gap:20px; } .hero-cert .logos span { display:flex; width:64px; height:64px; align-items:center; justify-content:center } .hero-cert .logos span img { width:100%; height:100%; object-fit:cover; filter:brightness(0) invert(1); } .hero-cert .logos span img.logo-bpm { width:90%; height:90%; } .about-img-home { height:auto; aspect-ratio:3/4; } .partners { margin-top:5rem; } .partners .brands-bar { background:transparent none; padding:0; } #services-preview { background:var(--crema); } .svc-card { position:relative; border:none; } .svc-card-img-wrap { position:relative; aspect-ratio:2/3; } .svc-card-img-wrap:after { position:absolute; left:0; bottom:-10px; width:100%; height:50%; content:''; background:linear-gradient(to top, rgba(31, 61, 53, 1) 40%, rgba(31, 61, 53, .6) 72%, rgba(31, 61, 53, .0) 100%); } .svc-card { background:var(--green); color:var(--white); } .svc-card-body { position:absolute; bottom:0; left:0; width:100%; } .svc-card-title { color:var(--gold); font-size:1.3rem; } .svc-card-desc-cta { display:none; opacity:0; } .svc-card-desc { color:var(--white); } .svc-card-link:hover .svc-card-desc-cta { display:block; opacity:1; } /* ========================================================================== ACORDEÓN DE MARCAS ========================================================================== */ .marcas-accordion { display:flex; gap:1.25rem; height:480px; width:100%; align-items:stretch; } .marcas-accordion__item { flex:1; display:flex; transition:flex 0.5s cubic-bezier(0.25, 1, 0.5, 1); } .marcas-accordion__item:has(.is-active) { flex:3.5; } .marca-card { position:relative; width:100%; height:100%; border-radius:16px; overflow:hidden; background-color:#FFFFFF; cursor:pointer; box-shadow:0 4px 16px rgba(0, 0, 0, 0.06); } .marca-card__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; opacity:0; visibility:hidden; transition:opacity 0.4s ease, visibility 0.4s; } .marca-card.is-active .marca-card__bg { opacity:1; visibility:visible; } /* Overlay Oscuro inferior */ .marca-card::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 60%); z-index:1; opacity:0; transition:opacity 0.4s ease; } .marca-card.is-active::after { opacity:1; } /* CERRADO:Muestra solo el Logo */ .marca-card__collapsed-logo { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:1.25rem; opacity:1; visibility:visible; transition:opacity 0.3s ease, visibility 0.3s; } .marca-card__collapsed-logo img { max-width:85%; max-height:80px; object-fit:contain; } .marca-card.is-active .marca-card__collapsed-logo { opacity:0; visibility:hidden; pointer-events:none; } .marca-card__overlay { position:absolute; bottom:1.5rem; left:1.5rem; right:1.5rem; z-index:3; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s, visibility 0.35s; } .marca-card.is-active .marca-card__overlay { opacity:1; visibility:visible; transform:translateY(0); } .marca-card__body { display:flex; background:rgba(255,255,255,0.45); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.4); border-radius:14px; padding:1.25rem 1.5rem; /*max-width:340px;*/ box-shadow:0 8px 32px rgba(0,0,0,0.12); } .marca-card::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 35%, transparent 70%); z-index:1; opacity:0; transition:opacity 0.4s ease; } .marca-card.is-active::after { opacity:1; } .marca-card__overlay { position:absolute; bottom:1.5rem; left:1.5rem; right:1.5rem; z-index:3; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s, visibility 0.35s; display:flex; align-items:center; gap:1.25rem; } .marca-card.is-active .marca-card__overlay { opacity:1; visibility:visible; transform:translateY(0); } .marca-card__logo-badge { background:#FFFFFF; border-radius:12px; width:64px; height:64px; padding:0.5rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.15); } .marca-card__logo-badge img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; } .marca-card__content { display:flex; flex-direction:column; gap:0.2rem; } .marca-card__tag { display:inline-block; font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#D4AF37; margin-bottom:0; } .marca-card__text { font-size:0.85rem; color:#FFFFFF !important; margin:0; line-height:1.35; text-shadow:0 1px 2px rgba(0,0,0,0.5); } /* Móvil Responsivo */ @media (max-width:991.98px) { .marcas-accordion { flex-direction:column; height:auto; } .marcas-accordion__item, .marcas-accordion__item:has(.is-active) { flex:none; height:120px; transition:height 0.4s ease; } .marcas-accordion__item:has(.is-active) { height:320px; } }