(no en el ), para que el menú y el footer del sitio conserven sus propios estilos. */ .nx-portafolio *{box-sizing:border-box;} /* styles.css del sitio le da padding a todas las

; aquí no aplica. */ .nx-portafolio section.marca-seccion{padding:0;} .nx-portafolio{ background:var(--nx-cream); color:var(--nx-black); font-family:var(--nx-font-body); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; } .nx-portafolio img{max-width:100%;display:block;} .nx-portafolio a{color:inherit;text-decoration:none;} .nx-wrap{max-width:var(--nx-maxw);margin:0 auto;padding:0 24px;} .nx-portafolio h1,.nx-portafolio h2,.nx-portafolio h3,.nx-portafolio h4{ font-family:var(--nx-font-display); font-weight:400; margin:0 0 .4em; letter-spacing:.01em; } .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--nx-font-body); font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--nx-gold); margin-bottom:14px; } .eyebrow::before{content:'';width:22px;height:1px;background:var(--nx-gold);display:inline-block;} /* ========================================================= CATÁLOGO — intro + grid de marcas ========================================================= */ .catalogo-hero{ background:var(--nx-black); color:var(--nx-cream); padding:90px 0 80px; text-align:center; } .catalogo-hero h1{ color:var(--nx-white); font-size:clamp(34px,5vw,58px); font-weight:300; } .catalogo-hero em{color:var(--nx-gold-light);font-style:italic;} .catalogo-hero p{ max-width:560px;margin:18px auto 0;color:var(--nx-gray);font-size:15px; } .catalogo-hero .eyebrow{justify-content:center;} .catalogo-hero .eyebrow::before{display:none;} .catalogo-grid-wrap{padding:64px 0 90px;} .catalogo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:36px; } .marca-card{ display:block;background:var(--nx-white);border:1px solid var(--nx-cream-alt); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .marca-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px rgba(10,10,10,.10); border-color:var(--nx-gold); } /* Fondo claro y neutro + "contain" para que CUALQUIER logo se vea completo (con fondo blanco, transparente u oscuro), sin recortarse. */ .marca-card-media{ aspect-ratio:4/3;background:var(--nx-cream-alt); display:flex;align-items:center;justify-content:center;overflow:hidden; padding:22px; } .marca-card-media img{width:100%;height:100%;object-fit:contain;} .marca-card-media-empty{ width:100%;height:100%; background:linear-gradient(135deg,var(--nx-black-alt),var(--nx-black-soft)); } .marca-card-body{padding:22px 24px 26px;} .marca-card-body .eyebrow{font-size:10px;margin-bottom:8px;} .marca-card-body h3{font-size:24px;margin-bottom:6px;} .marca-card-body .ver-mas{ font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--nx-gray); } /* ========================================================= FICHA DE MARCA — envoltura general (los colores de aquí para abajo vienen de --marca-*, definidas en css/temas/.css — cada marca se ve distinta) ========================================================= */ .marca-tema{background:var(--marca-bg);} .marca-hero{background:var(--marca-hero-bg);color:var(--marca-hero-text);padding:70px 0 60px;text-align:center;} .marca-hero-inner{max-width:720px;margin:0 auto;} .marca-hero .eyebrow{justify-content:center;color:var(--marca-accent);} .marca-hero .eyebrow::before{background:var(--marca-accent);} .marca-hero-logo{ width:104px;height:104px;object-fit:contain;border-radius:50%;background:var(--nx-white); padding:14px;margin:0 auto 22px;box-shadow:0 6px 18px rgba(0,0,0,.18); } .marca-hero h1{color:inherit;font-size:clamp(32px,5vw,52px);font-family:var(--marca-font-display);} .marca-content{max-width:800px;margin:0 auto;padding:64px 24px 20px;font-family:var(--marca-font-body);} .marca-content h2{ font-size:26px;margin-top:0 0 18px;color:var(--marca-text);font-family:var(--marca-font-display); } .marca-content > p{color:var(--marca-text-soft);font-size:16px;} .marca-seccion{margin:0 0 64px;} .marca-seccion:last-child{margin-bottom:0;} .marca-seccion-titulo{ display:flex;align-items:center;gap:14px;margin-bottom:22px; } .marca-seccion-titulo .num{ width:34px;height:34px;flex:none;border-radius:50%; background:var(--marca-primary);color:var(--marca-primary-dark); display:flex;align-items:center;justify-content:center; font-family:var(--marca-font-body);font-size:13px;font-weight:600; } .marca-seccion-titulo h2{margin:0;} .marca-datos{ display:flex;flex-wrap:wrap;gap:14px 34px; margin:24px 0 8px;padding:20px 0;border-top:1px solid var(--marca-border);border-bottom:1px solid var(--marca-border); } .marca-datos div strong{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--marca-muted);margin-bottom:3px;} .marca-datos div span{font-size:15px;color:var(--marca-text);} /* --- Diseño de la marca: collage de 3 imágenes + visión --- */ .marca-collage{ display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:14px; margin:26px 0 30px; aspect-ratio:16/10; } .marca-collage figure{margin:0;overflow:hidden;background:var(--marca-surface);border-radius:var(--marca-radius);cursor:zoom-in;} .marca-collage figure img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;} .marca-collage figure:hover img{transform:scale(1.05);} .marca-collage figure:nth-child(1){grid-row:1/3;grid-column:1;} .marca-collage figure:nth-child(2){grid-row:1;grid-column:2;} .marca-collage figure:nth-child(3){grid-row:2;grid-column:2;} .marca-collage figure figcaption{display:none;} .marca-vision{ background:var(--marca-surface); border-left:4px solid var(--marca-primary); border-radius:var(--marca-radius); padding:22px 26px; margin:0; } .marca-vision p{margin:0;color:var(--marca-text);font-size:16px;font-style:italic;} .marca-vision .quien{ display:block;margin-top:12px;font-style:normal;font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--marca-muted); } /* --- Lo que se ha hecho: una tarjeta por red social --- */ .marca-hecho-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:20px; } .marca-hecho-item{ background:var(--marca-surface);border:1px solid var(--marca-border);border-radius:var(--marca-radius); overflow:hidden;transition:transform .2s ease, box-shadow .2s ease; } .marca-hecho-item:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(0,0,0,.10);} .marca-hecho-media{aspect-ratio:1/1;overflow:hidden;background:var(--marca-bg);cursor:zoom-in;} .marca-hecho-media img{width:100%;height:100%;object-fit:cover;} /* Tarjetas cuyo "Lo que se ha hecho" muestra el logo de la red social (fondo transparente) en vez de una foto: se centra con espacio alrededor en vez de llenar el cuadro a sangrado. */ .marca-hecho-media--logo{background:var(--marca-surface);} .marca-hecho-media--logo img{object-fit:contain;padding:26%;box-sizing:border-box;} .marca-hecho-body{padding:16px 18px;} .marca-hecho-red{ display:flex;align-items:center;gap:8px;margin-bottom:10px; font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--marca-muted); } .marca-hecho-red .ico{ width:22px;height:22px;border-radius:50%;background:var(--marca-primary);color:var(--marca-primary-dark); display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700; } .marca-hecho-link{ display:inline-flex;align-items:center;gap:6px; font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--marca-text); border-bottom:1px solid var(--marca-primary);padding-bottom:2px; } .marca-hecho-link:hover{color:var(--marca-primary-dark);} .btn, .btn-outline{ display:inline-block;padding:14px 28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase; margin:18px 8px 0 0;border:none;cursor:pointer;font-family:var(--marca-font-body);border-radius:var(--marca-radius); } .btn{background:var(--marca-primary);color:var(--marca-primary-dark);} .btn:hover{background:var(--marca-primary-dark);color:var(--marca-primary);} .btn-outline{border:1px solid var(--marca-text);color:var(--marca-text);background:transparent;} .btn-outline:hover{background:var(--marca-text);color:var(--marca-surface);} .marca-back{max-width:800px;margin:40px auto 90px;padding:0 24px;} .marca-back a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--marca-primary);padding-bottom:4px;color:var(--marca-text);} /* ========================================================= LIGHTBOX (ver imagen en grande) — ver js/script.js ========================================================= */ .nx-lightbox{ position:fixed;inset:0;background:rgba(10,10,10,.92); display:none;align-items:center;justify-content:center; padding:32px;z-index:400; } .nx-lightbox.is-open{display:flex;} .nx-lightbox img{max-width:min(92vw,1000px);max-height:88vh;width:auto;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5);} .nx-lightbox-close{ position:absolute;top:22px;right:28px;color:var(--nx-cream); font-family:var(--nx-font-body);font-size:13px;letter-spacing:.12em;text-transform:uppercase; border:1px solid rgba(247,244,239,.4);padding:8px 16px;cursor:pointer;background:transparent; } .nx-lightbox-close:hover{border-color:var(--nx-gold);color:var(--nx-gold);} @media (max-width:640px){ .marca-datos{flex-direction:column;gap:10px;} .marca-collage{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto;} .marca-collage figure{aspect-ratio:4/3;} .marca-collage figure:nth-child(1){grid-row:auto;grid-column:auto;} .marca-collage figure:nth-child(2){grid-row:auto;grid-column:auto;} .marca-collage figure:nth-child(3){grid-row:auto;grid-column:auto;} }