/* ========================================================= V&V SCIENCE AND TECH SRL — Design System Negro + Dorado + Blanco · Manrope Fuente cargada vía en el de cada página (evita el @import, que bloquea el render en cascada) ========================================================= */ :root{ --black: #0A0A0A; --black-2: #151515; --gold: #B99A55; --gold-light: #D2BA7B; --gold-deep: #7C632F; --white: #FFFFFF; --bg-light: #F7F7F5; --text-gray: #656565; --border: #E5E3DE; --border-dark: rgba(255,255,255,.12); --font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --container: 1240px; --radius: 4px; --radius-lg: 8px; --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur: .5s; /* z-index scale */ --z-base: 1; --z-card: 10; --z-sticky: 50; --z-float: 400; --z-nav-drawer: 490; --z-header: 500; --z-skip: 1000; --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); } /* Transición nativa entre páginas (Chrome/Edge). Navegadores sin soporte simplemente navegan como siempre, sin animación: mejora progresiva. */ @view-transition{ navigation: auto; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } /* ========================================================= PAGE LOADER — pantalla de apertura con el logo CSS puro: funciona aunque JS falle, se retira sola sin intervención, no depende de window.load. ========================================================= */ #page-loader{ position:fixed; inset:0; z-index:2000; background: var(--black); display:flex; align-items:center; justify-content:center; animation: loaderOut .25s var(--ease) .75s forwards; } #page-loader::before{ content:""; position:absolute; inset:0; background-image: var(--noise); opacity:.035; mix-blend-mode: overlay; } .loader-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap: clamp(14px, 3vw, 24px); padding: 0 24px; max-width:100%; } .loader-inner img{ width: clamp(64px, 18vw, 130px); height:auto; animation: loaderZoom .5s var(--ease-out) both; } .loader-name{ font-family: var(--font-display); font-size: clamp(1.6rem, 8vw, 2.6rem); letter-spacing:.06em; color: var(--gold-light); max-width:100%; text-align:center; } .loader-name span{ display:inline-block; animation: loaderNameIn .4s var(--ease-out) .15s both; } @keyframes loaderZoom{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } } @keyframes loaderNameIn{ 0%{ opacity:0; transform: translateY(8px); } 100%{ opacity:1; transform: translateY(0); } } @keyframes loaderOut{ to{ opacity:0; visibility:hidden; } } @media (prefers-reduced-motion: reduce){ #page-loader{ display:none; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; } } body{ margin:0; font-family: var(--font); background: var(--white); color: var(--black); -webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; cursor:pointer; } button{ font-family: inherit; cursor:pointer; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,p{ margin:0; } h1,h2,h3,h4{ font-weight:700; letter-spacing:-.01em; } h1{ font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height:1.02; font-weight:600; letter-spacing:-.015em; } h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); line-height:1.15; font-weight:600; } h3{ font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.3; font-weight:600; } p{ font-weight:400; } .container{ max-width: var(--container); margin:0 auto; padding: 0 24px; } @media (max-width:640px){ .container{ padding: 0 20px; } } section{ position:relative; } /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; } /* -------- Eyebrow / labels -------- */ .eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-size: .78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--gold-deep); } .eyebrow::before{ content:""; width:9px; height:9px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); flex-shrink:0; } section.on-dark .eyebrow{ color: var(--gold-light); } section.on-dark .eyebrow::before{ border-color: var(--gold-light); } /* ========================================================= FIRMA VISUAL — geometría diagonal derivada de la "V" del logo Se usa con moderación: marcos de imagen protagonistas y separadores de sección. No es decoración suelta. ========================================================= */ .cut-br{ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%); } .cut-tl{ clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%, 0 36px); } @media (max-width:640px){ .cut-br{ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); } .cut-tl{ clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); } } /* Índice técnico tipo ficha de laboratorio: "N°01" */ .tech-index{ display:inline-flex; align-items:baseline; gap:6px; font-family: var(--font); font-size:.72rem; font-weight:700; letter-spacing:.08em; color: var(--gold-deep); } section.on-dark .tech-index{ color: var(--gold-light); } /* -------- Buttons -------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:48px; padding: 0 30px; border-radius: 999px; font-size: .92rem; font-weight:600; letter-spacing:.01em; border:1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease); white-space: nowrap; } .btn:active{ transform: scale(.97); } .btn-primary{ background: var(--gold); color: var(--black); border-color: var(--gold); box-shadow: 0 0 0 0 rgba(185,154,85,0); } .btn-primary:hover{ background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(185,154,85,.55); } .btn-primary:active{ transform: scale(.97); } .btn-outline-dark{ background:transparent; color: var(--black); border-color: var(--black); } .btn-outline-dark:hover{ background: var(--black); color:var(--white); transform: translateY(-2px); } .btn-outline-light{ background:transparent; color: var(--white); border-color: rgba(255,255,255,.4); } .btn-outline-light:hover{ background: var(--white); color:var(--black); border-color:var(--white); transform: translateY(-2px); } .btn-ghost-gold{ background:transparent; color: var(--gold-light); border-color: var(--gold); } .btn-ghost-gold:hover{ background: var(--gold); color:var(--black); } /* ========================================================= HEADER ========================================================= */ .site-header{ position: fixed; top:0; left:0; right:0; z-index: var(--z-header); background: rgba(10,10,10,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-dark); transition: background .3s var(--ease), box-shadow .3s var(--ease); } .site-header.scrolled{ box-shadow: 0 12px 32px -16px rgba(0,0,0,.5); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; height: 84px; } .brand-logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .brand-logo img{ height: 40px; width:auto; view-transition-name: site-logo; animation: logoIntro .7s var(--ease-out) both; } .brand-logo .brand-name{ font-family: var(--font-display); color: var(--white); font-weight:600; font-size:1.15rem; letter-spacing:0; line-height:1.1; animation: logoIntro .7s var(--ease-out) .08s both; } .brand-logo .brand-name span{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.14em; color: var(--gold-light); text-transform:uppercase; margin-top:2px;} @keyframes logoIntro{ from{ opacity:0; transform: scale(.82); } to{ opacity:1; transform: scale(1); } } .main-nav{ display:flex; align-items:center; gap: 40px; } .main-nav ul{ display:flex; gap:36px; } .main-nav a{ color: rgba(255,255,255,.82); font-size:.92rem; font-weight:500; position:relative; padding: 6px 0; min-height:44px; display:flex; align-items:center; } .main-nav a::after{ content:""; position:absolute; left:0; bottom:2px; width:0; height:1px; background: var(--gold); transition: width .3s var(--ease); } .main-nav a:hover{ color:var(--white); } .main-nav a:hover::after, .main-nav a.active::after{ width:100%; } .main-nav a.active{ color: var(--gold-light); } .header-actions{ display:flex; align-items:center; gap:16px; } .menu-toggle{ display:none; width:48px; height:48px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border-dark); border-radius: var(--radius); color: var(--white); } .menu-toggle span{ position:relative; width:20px; height:14px; display:block; } .menu-toggle span::before,.menu-toggle span::after,.menu-toggle i{ content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease);} .menu-toggle span::before{ top:0; } .menu-toggle span i{ top:6px; display:block; } .menu-toggle span::after{ bottom:0; } .menu-toggle[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg); } .menu-toggle[aria-expanded="true"] span i{ opacity:0; } .mobile-nav{ position: fixed; inset: 84px 0 0 0; background: var(--black); z-index: var(--z-nav-drawer); display:flex; flex-direction:column; padding: 32px 24px; transform: translateY(-8px); opacity:0; visibility:hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .mobile-nav.open{ opacity:1; transform:translateY(0); visibility:visible; } .mobile-nav ul{ display:flex; flex-direction:column; } .mobile-nav li{ opacity:0; transform:translateY(10px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); } .mobile-nav.open li{ opacity:1; transform:none; } .mobile-nav.open li:nth-child(1){ transition-delay:.05s; } .mobile-nav.open li:nth-child(2){ transition-delay:.09s; } .mobile-nav.open li:nth-child(3){ transition-delay:.13s; } .mobile-nav.open li:nth-child(4){ transition-delay:.17s; } .mobile-nav.open li:nth-child(5){ transition-delay:.21s; } .mobile-nav a{ display:flex; align-items:center; min-height:56px; font-size:1.2rem; font-weight:600; color:var(--white); border-bottom:1px solid var(--border-dark); transition: color .25s var(--ease), padding-left .25s var(--ease); } .mobile-nav a:hover, .mobile-nav a:active{ color: var(--gold-light); padding-left:6px; } .mobile-nav .btn{ margin-top:28px; width:100%; } @media (max-width: 900px){ .main-nav{ display:none; } .menu-toggle{ display:flex; } .header-actions{ gap:10px; } .header-actions > .btn{ display:none; } } @media (max-width: 420px){ .brand-logo .brand-name span{ display:none; } .site-header .container{ height:72px; } .site-header .container, .mobile-nav{ padding-left:16px; padding-right:16px; } .brand-logo img{ height:32px; } .mobile-nav{ inset: 72px 0 0 0; } } /* ========================================================= HERO ========================================================= */ .hero{ background: var(--black); color: var(--white); padding-top: 96px; position:relative; overflow:hidden; } .hero-pattern{ position:absolute; inset:0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px); pointer-events:none; } .hero::after{ content:""; position:absolute; inset:0; background-image: var(--noise); opacity:.035; mix-blend-mode: overlay; pointer-events:none; z-index:1; } .hero-grid{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; min-height: 620px; position:relative; z-index:2; } .hero-copy{ display:flex; flex-direction:column; justify-content:center; padding: 56px 56px 56px 0; } .hero-copy .eyebrow{ margin-bottom:22px; } .hero-copy h1{ margin-bottom:0; } .hero-copy h1 em{ font-style:italic; font-weight:500; color: var(--gold-light); } .hero-dual{ display:grid; grid-template-columns: 1fr 1fr; gap:32px; margin-top:40px; max-width:520px; } .hero-dual-item p{ color: rgba(255,255,255,.68); font-size:.94rem; line-height:1.55; margin-bottom:18px; } .hero-media{ position:relative; display:flex; align-items:center; justify-content:center; padding: 32px 24px; } .hero-media img{ position:relative; z-index:1; width:100%; height:100%; max-height:600px; object-fit:contain; display:block; animation: floatProduct 6s ease-in-out infinite; } .hero-media.reveal-media img{ animation-play-state: paused; } .hero-media-zoom{ padding: 8px; } .hero-media-zoom img{ max-height: 760px; } .hero-media.reveal-media.in img{ animation-play-state: running; } /* Fotos rectangulares reales enmarcadas como tarjeta, con la misma animacion flotante que el resto de las fotos de hero del sitio. */ .hero-media.framed{ padding:0; } .hero-media.framed img{ width:auto; height:auto; max-width:100%; max-height:480px; object-fit:contain; border-radius: var(--radius-lg); border:1px solid var(--border-dark); box-shadow: 0 30px 60px -28px rgba(0,0,0,.55); } @media (max-width: 900px){ .hero-media.framed img{ max-height:360px; } } @keyframes floatProduct{ 0%, 100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-14px) scale(1.015); } } @media (prefers-reduced-motion: reduce){ .hero-media img{ animation:none; } } .hero-brands{ position:relative; z-index:2; background: var(--bg-light); border-top:1px solid var(--border); padding: 30px 0 34px; } .hero-brands-label{ text-align:center; font-family: var(--font-display); font-style:italic; font-size:.92rem; color: var(--text-gray); margin: 0 0 20px; } /* Cinta infinita de logos: se duplica el set de logos y se traslada -50%, asi el loop es perfecto sin salto. Animacion CSS pura (transform) para que no genere lag ni dependa de JS/scroll. */ .marquee{ width:100%; overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track{ display:flex; width:max-content; animation: marquee-scroll 34s linear infinite; will-change: transform; } .marquee-group{ display:flex; align-items:center; flex-shrink:0; } .marquee-group img{ height:38px; width:auto; max-width:130px; object-fit:contain; margin: 0 32px; flex-shrink:0; filter: grayscale(1) opacity(.55); transition: filter var(--dur) var(--ease); } .marquee-group img:hover{ filter:none; } @keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } .marquee{ overflow-x:auto; } } @media (max-width: 900px){ .hero{ padding-top:84px; } .hero-grid{ grid-template-columns:1fr; min-height:auto; } .hero-copy{ padding: 56px 0 40px; order:1; } .hero-dual{ grid-template-columns:1fr; max-width:none; gap:24px; } .hero-media{ order:2; aspect-ratio: 4/3; } .marquee-group img{ height:28px; margin: 0 22px; } .marquee-track{ animation-duration: 22s; } } /* ========================================================= TRUST BAR ========================================================= */ .trust-bar{ background: var(--white); padding: 56px 0; border-bottom:1px solid var(--border); } .trust-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; } .trust-item{ text-align:left; padding-left:20px; border-left:2px solid var(--gold); } .trust-item .num{ font-size:1.9rem; font-weight:800; color:var(--black); display:block; margin-bottom:4px; } .trust-item p{ color: var(--text-gray); font-size:.92rem; } @media (max-width:760px){ .trust-grid{ grid-template-columns:1fr; gap:24px; } } /* ========================================================= ABOUT SUMMARY / SPLIT SECTION ========================================================= */ .split{ padding: 100px 0; background: var(--bg-light); } .split.on-white{ background: var(--white); } .split-grid{ display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 64px; align-items:center; } .split-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5; background: var(--black-2); border:1px solid var(--border); } .split-media img{ width:100%; height:100%; object-fit:cover; } .split-body .eyebrow{ margin-bottom:18px; } .split-body h2{ margin-bottom:20px; } .split-body p.lead{ color: var(--text-gray); font-size:1.05rem; margin-bottom:28px; max-width: 560px;} .split-media.order-first{ order:-1; } /* Cita editorial: el texto oficial hace de recurso visual principal cuando no hay fotografía corporativa real que mostrar. */ .editorial-lead{ font-family: var(--font-display); font-optical-sizing: auto; font-weight:500; font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height:1.35; color: var(--black); max-width: 620px; } .editorial-lead .hl{ color: var(--gold-deep); font-style:italic; } .split-media-logo.split-media img.floating-logo.floating-logo-sm{ max-width:260px; max-height:260px; } @media (max-width:640px){ .split-media-logo.split-media img.floating-logo.floating-logo-sm{ max-width:180px; max-height:180px; } } .value-list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 28px; margin-top:8px; } .value-item{ display:flex; gap:14px; align-items:flex-start; } .value-item .dot{ width:34px; height:34px; border-radius:50%; border:1px solid var(--gold); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--gold-deep); font-weight:700; font-size:.85rem; margin-top:2px; } .value-item strong{ display:block; font-size:.98rem; margin-bottom:2px; } .value-item p{ color:var(--text-gray); font-size:.88rem; margin:0; } @media (max-width:900px){ .split{ padding: 72px 0; } .split-grid{ grid-template-columns:1fr; gap:36px; } .split-media{ aspect-ratio: 16/10; order:-1 !important; } .value-list{ grid-template-columns:1fr; } } /* ========================================================= SECTION HEADERS (generic) ========================================================= */ .section-head{ max-width: 640px; margin-bottom: 52px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head .eyebrow{ margin-bottom:16px; } .section-head h2{ margin-bottom:16px; } .section-head p{ color: var(--text-gray); font-size:1.02rem; } .section-head.center .eyebrow{ justify-content:center; } .section-head.center .eyebrow::before{ display:none; } .section-foot{ display:flex; justify-content:center; margin-top:48px; } .represented-brands{ background: var(--bg-light); padding: 56px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .represented-brands .section-head{ margin-bottom:28px; } .represented-brands-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; } .brand-chip{ font-family: var(--font-display); font-size:.98rem; color: var(--black); background: var(--white); border:1px solid var(--border); border-radius:999px; padding: 10px 24px; } /* ========================================================= PRINCIPLES (editorial row, no cards) ========================================================= */ .principles{ padding: 88px 0 64px; background: var(--white); } .principles-row{ display:flex; flex-wrap:wrap; justify-content:center; max-width: 980px; margin: 0 auto; } .principle-item{ flex:1 1 220px; max-width:245px; padding: 0 28px; text-align:center; border-left:1px solid var(--border); } .principle-item:first-child{ border-left:none; } .principle-item h3{ font-size:1.05rem; margin-bottom:8px; } .principle-item p{ color: var(--text-gray); font-size:.85rem; line-height:1.55; } @media (max-width:760px){ .principles{ padding: 64px 0 48px; } .principle-item{ flex:1 1 45%; border-left:none; border-top:1px solid var(--border); padding:24px 16px 0; margin-top:24px; } .principle-item:nth-child(-n+2){ margin-top:0; padding-top:0; border-top:none; } } /* ========================================================= INTRO BREVE + ACCESOS DIRECTOS (home corporativo corto) ========================================================= */ .intro-brief{ padding: 76px 0; background: var(--bg-light); } .intro-grid{ display:grid; grid-template-columns: minmax(0,.6fr) minmax(0,2fr); gap: 40px; align-items:start; max-width: 920px; margin:0 auto; } .intro-kicker{ font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--gold-deep); padding-top:6px; position:relative; } .intro-kicker::before{ content:""; display:block; width:36px; height:2px; background: var(--gold); margin-bottom:14px; } .intro-brief .intro-text{ color: var(--black); font-size: 1.25rem; font-weight:500; line-height:1.55; margin-bottom:20px; } .link-more{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; color: var(--gold-deep); border-bottom:1px solid transparent; transition: border-color .25s var(--ease), color .25s var(--ease); } .link-more i{ font-style:normal; transition: transform .25s var(--ease); } .link-more:hover{ border-color: var(--gold-deep); } .link-more:hover i{ transform: translateX(4px); } .quick-links{ padding: 64px 0; background: var(--white); } .quick-links-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; } .quick-link{ position:relative; padding: 30px 24px 26px; border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); overflow:hidden; transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .quick-link:hover{ border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 20px 36px -22px rgba(10,10,10,.28); } .quick-link-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background: var(--bg-light); color: var(--gold-deep); margin-bottom:20px; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .quick-link-icon svg{ width:22px; height:22px; } .quick-link:hover .quick-link-icon{ background: var(--black); color: var(--gold-light); transform: scale(1.06); } .quick-link h3{ font-size:1.02rem; margin-bottom:6px; padding-right:20px; } .quick-link p{ color: var(--text-gray); font-size:.85rem; line-height:1.5; } .quick-link > i{ position:absolute; top:30px; right:22px; font-style:normal; color: var(--gold); opacity:0; transform:translateX(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .quick-link:hover > i{ opacity:1; transform:translateX(0); } @media (max-width:900px){ .intro-grid{ grid-template-columns:1fr; gap:16px; } } @media (max-width:760px){ .quick-links-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width:480px){ .intro-brief{ padding:48px 0; } .intro-brief .intro-text{ font-size:1.08rem; } .quick-links{ padding: 48px 0; } } /* ========================================================= CATEGORIES ========================================================= */ .categories{ padding: 100px 0; background: var(--white); } .category-tiles{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } .category-tile{ position:relative; display:block; aspect-ratio: 1/1; border-radius: var(--radius); overflow:hidden; background: var(--black-2); } .category-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease-out); } .category-tile:hover img{ transform: scale(1.08); } .tile-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,.55) 75%, rgba(10,10,10,.85) 100%); transition: background .35s var(--ease); } .category-tile:hover .tile-overlay{ background: linear-gradient(180deg, rgba(10,10,10,.1) 20%, rgba(10,10,10,.6) 70%, rgba(10,10,10,.88) 100%); } .tile-label{ position:absolute; left:0; right:0; bottom:0; padding: 18px 16px; } .tile-title{ display:flex; align-items:center; gap:8px; color: var(--white); font-size:1rem; font-weight:700; line-height:1.25; } .tile-title i{ font-style:normal; color: var(--gold-light); font-size:1rem; opacity:0; transform:translateX(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .category-tile:hover .tile-title i{ opacity:1; transform:translateX(0); } .category-tile::after{ content:""; position:absolute; left:16px; right:16px; bottom:0; height:2px; background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease-out); } .category-tile:hover::after{ transform: scaleX(1); } @media (max-width: 1024px){ .category-tiles{ grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width: 640px){ .categories{ padding:56px 0; } .category-tiles{ display:flex; grid-template-columns:none; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -20px; padding:0 20px 4px; } .category-tiles::-webkit-scrollbar{ display:none; } .category-tile{ flex:0 0 128px; width:128px; } .tile-title{ font-size:.86rem; } } /* ========================================================= SPLIT BLEED — fotografía a todo el borde, alternando lados ========================================================= */ .split-bleed{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); background: var(--bg-light); } .split-bleed-media{ position:relative; min-height:460px; overflow:hidden; order:2; } .split-bleed-media img{ width:100%; height:100%; object-fit:cover; display:block; } .split-bleed-media.contain{ display:flex; align-items:center; justify-content:center; padding:16px; } .split-bleed-media.contain img{ width:100%; height:100%; object-fit:contain; } .split-bleed-copy{ display:flex; align-items:center; order:1; } .split-bleed-copy .inner{ padding: 64px clamp(24px,6vw,88px); max-width:520px; } .split-bleed-copy .eyebrow{ margin-bottom:18px; } .split-bleed-copy h2{ margin-bottom:18px; } .split-bleed-copy p.lead{ color: var(--text-gray); font-size:1.02rem; line-height:1.7; margin-bottom:30px; } .split-bleed.media-left .split-bleed-media{ order:1; } .split-bleed.media-left .split-bleed-copy{ order:2; } .split-bleed.on-white{ background: var(--white); } .split-bleed.on-dark{ background: var(--black); } .split-bleed.on-dark .split-bleed-copy p.lead{ color: rgba(255,255,255,.7); } .split-bleed.on-dark .split-bleed-copy h2{ color: var(--white); } .split-bleed.on-dark .eyebrow{ color: var(--gold-light); } .split-bleed.on-dark .eyebrow::before{ border-color: var(--gold-light); } @media (max-width:900px){ .split-bleed{ grid-template-columns:1fr; } .split-bleed-media{ order:1 !important; min-height:320px; } .split-bleed-copy{ order:2 !important; } .split-bleed-copy .inner{ padding: 48px 24px; max-width:none; } } /* ========================================================= SPOTLIGHT (producto propio) ========================================================= */ .spotlight{ background: var(--black); color: var(--white); padding: 110px 0; position:relative; overflow:hidden; } .spotlight::after{ content:""; position:absolute; inset:0; background-image: var(--noise); opacity:.035; mix-blend-mode: overlay; pointer-events:none; } .spotlight-mark{ position:absolute; z-index:0; top:50%; left:6%; width:520px; max-width:70%; opacity:.05; transform: translateY(-50%); animation: floatLogo 9s ease-in-out infinite; pointer-events:none; user-select:none; } .spotlight-grid{ position:relative; z-index:1; display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 64px; align-items:center; } .spotlight-media{ position:relative; width:100%; aspect-ratio: 7/10; max-width: 430px; margin-left:auto; border-radius: var(--radius-lg); overflow:hidden; border: 1px solid var(--border-dark); } .spotlight-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-out); } .spotlight-media:hover img{ transform: scale(1.04); } .spotlight-body .eyebrow{ margin-bottom:20px; } .spotlight-body h2{ color:var(--white); margin-bottom:18px; } .spotlight-body .lead{ color: rgba(255,255,255,.68); font-size:1.05rem; line-height:1.7; margin-bottom:28px; max-width:460px; } .spotlight-specs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; } .spotlight-specs li span{ display:inline-flex; align-items:center; padding: 9px 16px; border:1px solid rgba(210,186,123,.35); border-radius:999px; font-size:.8rem; font-weight:600; color: var(--gold-light); letter-spacing:.02em; } @media (max-width:900px){ .spotlight{ padding:72px 0; } .spotlight-grid{ grid-template-columns:1fr; gap:36px; } .spotlight-media{ aspect-ratio:16/10; } .spotlight-mark{ display:none; } } /* ========================================================= PRODUCT GRID / CARDS ========================================================= */ .products-section{ padding: 100px 0; background: var(--bg-light); } .products-section.on-white{ background: var(--white); } .product-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; } @media (max-width:1180px){ .product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width:760px){ .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; } } @media (max-width:460px){ .product-grid{ grid-template-columns: 1fr; } } .product-card{ background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; position:relative; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .product-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease-out); z-index:2; pointer-events:none; } .product-card:hover::before{ transform: scaleX(1); } .product-card:hover{ border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 20px 36px -20px rgba(10,10,10,.28); } .product-card .thumb{ aspect-ratio: 1/1; background: var(--bg-light); overflow:hidden; position:relative; } .product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); } .product-card:hover .thumb img{ transform: scale(1.045); } .product-card .cat-pill{ position:absolute; top:12px; left:12px; background: rgba(10,10,10,.82); color: var(--gold-light); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding: 6px 10px; border-radius: 3px; } .product-card .body{ padding: 20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; } .product-card .brand{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-deep); } .product-card h3{ font-size:1.02rem; line-height:1.3; } .product-card .desc{ color: var(--text-gray); font-size:.85rem; line-height:1.5; flex:1; } .product-card .card-cta{ margin-top:10px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--black); border:1px solid var(--border); border-radius:999px; padding:0 18px; min-height:38px; transition: all .25s var(--ease); } .product-card .card-cta::after{ content:"→"; color:var(--gold); transition: transform .3s var(--ease); } .product-card:hover .card-cta{ border-color: var(--black); background: var(--black); color: var(--white); } .product-card:hover .card-cta::after{ color: var(--gold-light); transform: translateX(4px); } /* -------- category filter (productos.html) -------- */ .filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 44px; } @media (max-width:640px){ .filter-bar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:-20px; margin-right:-20px; padding:0 20px 4px; mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%); } .filter-bar::-webkit-scrollbar{ display:none; } .filter-btn{ flex-shrink:0; } } .filter-btn{ min-height:44px; padding: 0 20px; border-radius: 999px; border:1px solid var(--border); background: var(--white); font-size:.85rem; font-weight:600; color: var(--text-gray); transition: all .25s var(--ease); } .filter-btn:hover{ border-color: var(--gold); color: var(--black); } .filter-btn.active{ background: var(--black); border-color: var(--black); color: var(--white); } .no-price-note{ display:flex; align-items:center; gap:14px; color: var(--black); font-size:.86rem; line-height:1.5; margin-bottom: 36px; padding: 16px 22px; background: var(--bg-light); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); } .no-price-note .ico{ width:22px; height:22px; border-radius:50%; background: var(--gold); flex-shrink:0; display:flex; align-items:center; justify-content:center; } .no-price-note .ico::before{ content:"i"; color: var(--white); font-size:.72rem; font-weight:700; font-style:italic; font-family: Georgia, 'Times New Roman', serif; } .category-intro{ max-width: 760px; padding: 20px 24px; margin: -8px 0 32px; border-left: 2px solid var(--gold); background: var(--bg-light); color: var(--text-gray); font-size:.94rem; line-height:1.65; } .category-intro[hidden]{ display:none; } .meso-subgroup{ padding-top:8px; } .meso-subgroup + .meso-subgroup{ margin-top:48px; } .meso-subgroup h4{ font-family: var(--font-display); font-size:1.15rem; font-weight:600; color: var(--black); margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--border); } .meso-list, .meso-list-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap:16px; } .meso-list li{ background: var(--bg-light); border:1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .meso-list li:hover{ border-color: var(--gold); box-shadow: 0 10px 24px -18px rgba(10,10,10,.3); } .meso-list li strong{ display:block; font-family: var(--font-display); font-size:1.04rem; font-weight:600; color: var(--black); line-height:1.35; margin-bottom:8px; } .meso-list li span{ display:block; color: var(--text-gray); font-size:.88rem; line-height:1.6; } .meso-list li.has-link{ padding:0; cursor:pointer; } .meso-list li.has-link a{ display:block; padding:20px 22px; color:inherit; text-decoration:none; } .meso-list li.has-link .meso-more{ display:inline-flex; align-items:center; gap:4px; margin-top:12px; color: var(--gold-deep); font-size:.76rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; transition: gap .25s var(--ease); } .meso-list li.has-link:hover .meso-more{ gap:8px; color: var(--gold); } @media (max-width: 640px){ .meso-list, .meso-list-grid{ grid-template-columns: 1fr; } } /* ========================================================= PRODUCT DETAIL ========================================================= */ .product-detail{ padding: 128px 0 100px; background: var(--bg-light); } .pd-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items:flex-start; } .pd-gallery .main-img{ aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow:hidden; background: var(--white); border: 1px solid var(--border); margin-bottom: 14px; } .pd-gallery .main-img img{ width:100%; height:100%; object-fit:cover; } .pd-thumbs{ display:flex; gap:12px; } .pd-thumbs button{ width:76px; height:76px; border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--white); padding:0; flex-shrink:0; } .pd-thumbs button.active{ border-color: var(--gold); border-width:2px; } .pd-thumbs img{ width:100%; height:100%; object-fit:cover; } .pd-body .cat-pill-inline{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-deep); background: rgba(185,154,85,.12); padding: 6px 12px; border-radius: 3px; margin-bottom:18px; } .pd-body .brand{ font-size:.85rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--text-gray); margin-bottom:8px; } .pd-body h1{ font-size: clamp(1.8rem,3vw,2.4rem); margin-bottom:20px; } .pd-body .desc{ color: var(--text-gray); font-size:1.02rem; line-height:1.7; margin-bottom:28px; } .spec-list{ border-top:1px solid var(--border); margin-bottom:32px; } .spec-row{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); font-size:.92rem; } .spec-row .k{ color: var(--text-gray); flex-shrink:0; } .spec-row .v{ font-weight:600; text-align:right; } @media (max-width:480px){ .spec-row{ flex-direction:column; align-items:flex-start; gap:4px; } .spec-row .v{ text-align:left; } } .pd-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 20px;} .pd-note{ font-size:.82rem; color:var(--text-gray); display:flex; gap:8px; align-items:flex-start; } .pd-note .ico{ color: var(--gold-deep); flex-shrink:0; } @media (max-width:900px){ .pd-grid{ grid-template-columns:1fr; gap:32px; } } /* ========================================================= SERVICES ========================================================= */ .services{ padding:120px 0; background: var(--white); } .services-split{ display:grid; grid-template-columns: minmax(0,400px) minmax(0,1fr); gap: 64px; align-items:start; } .services-head{ position:sticky; top:120px; } .services-head h2{ margin-top:8px; } .services-mark-frame{ margin-top:48px; width:100%; max-width:400px; padding:10px; border:1px solid var(--border); } .services-mark{ position:relative; aspect-ratio:4/5; background: var(--black); overflow:hidden; display:flex; align-items:center; justify-content:center; } .services-mark::before{ content:""; position:absolute; inset:0; background-image: var(--noise); opacity:.06; mix-blend-mode: overlay; pointer-events:none; z-index:1; } .services-mark img{ position:relative; width:100%; height:100%; object-fit:cover; } .services-list{ display:flex; flex-direction:column; } .service-item{ position:relative; padding: 38px 0 38px 30px; border-bottom:1px solid var(--border); transition: background .3s var(--ease); } .services-list .service-item:first-child{ border-top:1px solid var(--border); } .service-item::before{ content:""; position:absolute; left:0; top:38px; bottom:38px; width:2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); } .service-item:hover{ background: var(--bg-light); } .service-item:hover::before{ transform: scaleY(1); } .service-item h3{ font-family: var(--font-display); font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight:600; margin-bottom: 10px; transition: color .3s var(--ease); } .service-item:hover h3{ color: var(--gold-deep); } .service-item p{ color: var(--text-gray); font-size:.95rem; max-width:460px; } @media (max-width:900px){ .services{ padding:80px 0; } .services-split{ grid-template-columns: 1fr; gap:36px; } .services-head{ position:static; } .services-mark-frame{ display:none; } } @media (max-width:640px){ .service-item{ padding:30px 0 30px 20px; } .service-item::before{ top:30px; bottom:30px; } } /* ========================================================= CTA BAND ========================================================= */ .cta-band{ background: var(--black); color: var(--white); padding: 88px 0; text-align:center; position:relative; overflow:hidden; } .cta-band::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 0%, rgba(185,154,85,.18), transparent 60%); } .cta-band::after{ content:""; position:absolute; inset:0; background-image: var(--noise); opacity:.035; mix-blend-mode: overlay; pointer-events:none; } .cta-band .inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; } .cta-band h2{ color: var(--white); margin-bottom:18px; } .cta-band p{ color: rgba(255,255,255,.66); margin-bottom:34px; font-size:1.05rem; } .cta-band .ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } /* ========================================================= BRANCHES ========================================================= */ .branches{ padding:100px 0; background: var(--bg-light); } .branches.on-white{ background: var(--white); } .btn-block{ width:100%; } .branch-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; } .branch-card{ background: var(--white); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; } .branch-card .city-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .branch-card h3{ font-size:1.2rem; } .branch-card .tag{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-deep); background: rgba(185,154,85,.12); padding:5px 10px; border-radius:3px; } .branch-card address{ font-style:normal; color: var(--text-gray); font-size:.94rem; margin-bottom:20px; line-height:1.6; } .branch-card .phones{ display:flex; gap:10px; flex-wrap:wrap; } .branch-card .phones a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:1px solid var(--border); border-radius: var(--radius); font-size:.86rem; font-weight:600; transition: all .25s var(--ease); } .branch-card .phones a:hover{ border-color:var(--gold); background: var(--bg-light); } @media (max-width:760px){ .branch-grid{ grid-template-columns:1fr; } .branches{ padding:64px 0; } } /* ========================================================= CONTACT PAGE EXTRAS ========================================================= */ .contact-info-band{ background: var(--white); padding: 72px 0; border-bottom: 1px solid var(--border); } .info-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:32px; } .info-card{ text-align:left; } .info-card .lbl{ font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px; display:block; } .info-card a, .info-card p{ font-size:1rem; font-weight:600; color: var(--black); } @media (max-width:760px){ .info-grid{ grid-template-columns:1fr; gap:24px; } } .contact-map{ background: var(--white); padding: 100px 0 0; } .contact-map .container{ text-align:center; max-width:640px; margin:0 auto 48px; } .contact-map .eyebrow{ justify-content:center; margin-bottom:16px; } .contact-map .eyebrow::before{ display:none; } .contact-map h2{ margin-bottom:14px; } .contact-map p.lead{ color: var(--text-gray); font-size:1rem; } .map-frame{ width:100%; height:420px; border-top:1px solid var(--border); } .map-frame iframe{ width:100%; height:100%; border:0; display:block; } @media (max-width:640px){ .map-frame{ height:300px; } } /* ========================================================= FOOTER ========================================================= */ .site-footer{ background: var(--black); color: rgba(255,255,255,.72); padding: 52px 0 0; } .footer-grid{ display:grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border-dark); } .footer-logo-row{ display:flex; align-items:center; gap:12px; margin-bottom:18px; } .footer-logo-row img{ height:34px; width:auto; flex-shrink:0; } .footer-brand-name{ color:var(--white); font-weight:700; font-size:1rem; line-height:1.2; } .footer-brand-name small{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.14em; color: var(--gold-light); text-transform:uppercase; margin-top:3px; } .footer-brand p{ font-size:.88rem; line-height:1.7; max-width:280px; color: rgba(255,255,255,.55); } .social-links{ display:flex; gap:12px; margin-top:20px; } .social-links a{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border-dark); border-radius:50%; color: rgba(255,255,255,.72); transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); } .social-links a:hover{ border-color: var(--gold); color: var(--gold-light); background: rgba(185,154,85,.1); } .social-links svg{ width:17px; height:17px; } .footer-col .footer-heading{ color:var(--white); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; } .footer-col ul{ display:flex; flex-direction:column; gap:0; } .footer-col a{ font-size:.88rem; color: rgba(255,255,255,.62); transition: color .25s var(--ease); display:inline-flex; align-items:center; min-height:34px; } .footer-col a:hover{ color: var(--gold-light); } .footer-col p{ font-size:.88rem; color: rgba(255,255,255,.62); margin-bottom:0; } .footer-col p a{ min-height:34px; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding: 18px 0; font-size:.78rem; color: rgba(255,255,255,.42); } .footer-bottom a{ color: rgba(255,255,255,.6); transition: color .25s var(--ease); } .footer-bottom a:hover{ color: var(--gold-light); } /* WhatsApp icon inline with phone numbers */ .wa-ico{ color:#25D366; flex-shrink:0; vertical-align:-2px; margin-right:2px; } .footer-col p a{ display:inline-flex; align-items:center; gap:6px; } @media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; gap:28px; } } /* ========================================================= WHATSAPP FLOAT ========================================================= */ .wa-float{ position: fixed; right: 22px; bottom: 22px; width: 58px; height:58px; border-radius:50%; background: #25D366; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); z-index: 400; transition: transform .25s var(--ease); } .wa-float:hover{ transform: scale(1.07); } .wa-float svg{ width:28px; height:28px; } /* ========================================================= FLOATING LOGO (quienes-somos editorial) ========================================================= */ .split-media-logo{ display:flex; align-items:center; justify-content:center; aspect-ratio: auto; min-height:320px; background:none; border:none; overflow:visible; } .split-media-logo.split-media img.floating-logo{ position:relative; z-index:2; width:auto; height:auto; max-width:280px; max-height:280px; object-fit:contain; filter: saturate(1.3) contrast(1.05); animation: floatLogo 5s ease-in-out infinite; user-select:none; } @keyframes floatLogo{ 0%, 100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-26px) scale(1.09); } } @media (max-width:640px){ .split-media-logo{ min-height:220px; } .split-media-logo.split-media img.floating-logo{ max-width:170px; max-height:170px; } } /* ========================================================= FORM (contact) ========================================================= */ .contact-form-section{ padding: 90px 0; background: var(--bg-light); } .form-card{ background: var(--white); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 44px; max-width: 720px; margin: 0 auto; } .field{ margin-bottom: 22px; } .field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:8px; } .field input, .field textarea, .field select{ width:100%; min-height:48px; padding: 12px 16px; border:1px solid var(--border); border-radius: var(--radius); font-family: inherit; font-size:.94rem; background: var(--white); color: var(--black); } .field textarea{ min-height:130px; resize:vertical; } .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--gold); outline:none; } .form-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; } @media (max-width:640px){ .form-row{ grid-template-columns:1fr; } .form-card{ padding:28px 22px; } } .form-feedback{ margin-top:16px; font-size:.88rem; font-weight:600; color: var(--gold-deep); text-align:center; } .form-feedback:empty{ display:none; } .form-feedback a{ text-decoration:underline; } /* ========================================================= REVEAL ANIMATION (discreet fade/slide) — progressive enhancement Contenido visible por defecto. Solo se oculta antes de animar si JS confirmó soporte (clase .js en , ver main.js). Sin JS, .reveal y .stagger-children se ven exactamente igual que el resto del contenido: nada depende de JS para existir. ========================================================= */ .js .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* Encabezados de sección: "focus pull" (nitidez + opacidad) en vez de fade-up, para que no todas las secciones entren con el mismo movimiento vertical. */ .js .reveal-focus{ opacity:0; filter: blur(6px); transition: opacity .8s var(--ease-out), filter .8s var(--ease-out); } .reveal-focus.in{ opacity:1; filter:none; } /* Bloques de imagen protagonistas: cortina que se retira, en vez de fade-up, coherente con el tratamiento editorial de imagen de la marca. */ .reveal-media{ position:relative; overflow:hidden; } .js .reveal-media::after{ content:""; position:absolute; inset:0; background: var(--black); transform-origin: right; transition: transform .9s var(--ease-out); z-index:2; pointer-events:none; } .reveal-media.in::after{ transform: scaleX(0); } /* Staggered reveal for grid/list groups — children animate individually */ .js .stagger-children > *{ opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .stagger-children.in > *{ opacity:1; transform:none; } .stagger-children.in > *:nth-child(1){ transition-delay:.03s; } .stagger-children.in > *:nth-child(2){ transition-delay:.09s; } .stagger-children.in > *:nth-child(3){ transition-delay:.15s; } .stagger-children.in > *:nth-child(4){ transition-delay:.21s; } .stagger-children.in > *:nth-child(5){ transition-delay:.27s; } .stagger-children.in > *:nth-child(6){ transition-delay:.33s; } .stagger-children.in > *:nth-child(7){ transition-delay:.39s; } .stagger-children.in > *:nth-child(n+8){ transition-delay:.45s; } @media (prefers-reduced-motion: reduce){ .reveal, .stagger-children > *{ opacity:1; transform:none; } .reveal-focus{ opacity:1; filter:none; } .reveal-media::after{ display:none; } } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* skip link */ .skip-link{ position:absolute; left:-999px; top:auto; background: var(--gold); color:var(--black); padding:12px 20px; z-index:1000; border-radius: var(--radius); font-weight:700; font-size:.85rem; } .skip-link:focus{ left:16px; top:16px; } /* ========================================================= 404 ========================================================= */ .error-404{ min-height: 70vh; display:flex; align-items:center; padding: 168px 0 80px; background: var(--black); color: var(--white); } .error-404 .container{ max-width:560px; } .error-404-code{ font-size:.85rem; font-weight:700; letter-spacing:.16em; color: var(--gold-light); margin-bottom:18px; } .error-404 h1{ color:var(--white); margin-bottom:16px; } .error-404 .lead{ color: rgba(255,255,255,.68); font-size:1.05rem; margin-bottom:32px; }