/* Portfolio UGC · Ana María — estilos (sistema visual Editorial, adaptado). Depende de ../tokens.css. Un solo archivo, todo el single-pager. */ *{box-sizing:border-box} html{overflow-x:clip;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip} .wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--pad-x)} .fullbleed{width:100vw;margin-left:calc(50% - 50vw)} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* Toggle idioma · pastilla con fondo propio, vive dentro del nav (no flota sobre las imágenes: hereda el fondo y el hide/show del nav). */ .lang-toggle{background:var(--paper);border:0;border-radius:999px;padding:8px 14px;font:inherit;font-size:.72rem;letter-spacing:.1em;cursor:pointer;color:var(--ink);flex:none} .lang-toggle__opt{opacity:.35;transition:opacity .25s} .lang-toggle__opt.is-active{opacity:1} .lang-toggle__sep{opacity:.35;margin:0 5px} /* Nav (sticky, siempre visible) · full-width, ancla del sticky al completo; .nav-inner reutiliza .wrap para el ancho de contenido */ nav{position:sticky;top:0;z-index:20;background:var(--bg)} .nav-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px var(--pad-x)} /* Cada sección con ancla (#videos, #photos...) reserva el alto real del nav sticky (91px desktop) para que al saltar por el menú el título y los primeros elementos (p.ej. los chips de vídeos) no queden tapados/pegados bajo el nav. En móvil el nav mide 67px (ver override abajo). */ #home, #photos, #brands, #videos, #mediaKit, #about, #feedback, #rates, #contact { scroll-margin-top: 91px; } .brand{font-weight:500;letter-spacing:.14em;font-size:1.05rem;text-decoration:none;color:var(--ink);flex:none} .navlinks{font-size:.72rem;letter-spacing:.1em;flex:1 1 auto;text-align:right} .navlinks a{color:var(--ink);text-decoration:none;margin-left:26px} .navlinks a.is-current{opacity:.45} .nav-controls{display:flex;align-items:center;gap:14px;flex:none} .nav-toggle{display:none} /* Cabeceras */ .page-hdr{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:center;padding:42px 0 56px} .desc{font-size:1rem;line-height:1.5;margin:0;color:var(--muted)} /* Cabeceras de sección (dentro del scroll) — mismo lenguaje editorial */ .section-hdr{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:end;padding:96px 0 28px} /* Si el header solo lleva el título (Marcas, Media kit, Vídeos), ocupa el ancho completo. */ .section-hdr:has(> .section-title:only-child){grid-template-columns:1fr} .section-hdr.center{text-align:center;grid-template-columns:1fr;justify-items:center;padding-top:120px} .section-title{margin:0;font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--fs-h2);line-height:1.2;overflow-wrap:break-word} .body-sm{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted);max-width:340px;justify-self:end} .section-hdr.center .body-sm{max-width:520px;justify-self:center} /* Ticker de works (hero) */ .ticker{overflow:hidden;margin-top:8px} .ticker-track{display:flex;gap:10px;width:max-content;animation:scrollx var(--ticker-dur) linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} @keyframes scrollx{to{transform:translateX(calc(-50% - 5px))}} .work{flex:0 0 auto;width:min(26vw,422px);margin:0} .work img{width:100%;aspect-ratio:var(--ar-hero);object-fit:cover;border-radius:var(--radius-img);transition:transform var(--dur-hover) var(--ease-hover)} .work:hover img{transform:scale(var(--hover-hero-scale))} .work figcaption{font-size:.72rem;color:var(--muted);margin-top:12px} /* Métricas · hairline arriba y abajo, lo mismo que separa servicios. flex + justify-content:center: cada cifra centrada en su eje y todo el bloque centrado en el ancho de la página (no estirado de borde a borde). */ /* Rejilla FIJA de 3 columnas (no flex-wrap): el nº de columnas no depende del ancho de viewport, así el tope de datos (LIMITS.metrics=6) siempre rellena exactamente 2 filas completas, en cualquier pantalla — nunca queda un ítem huérfano en su propia fila. */ .metrics{list-style:none;margin:56px 0 0;padding:22px 0;display:grid;grid-template-columns:repeat(6,1fr);justify-items:center;gap:32px 24px;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line)} .metrics li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.8rem;text-align:center} .metrics b{font-size:1.5rem;font-weight:400;letter-spacing:-.01em} .metrics span{color:var(--muted)} /* Pocas métricas: se centran (nº de columnas = nº de métricas) en vez de quedar pegadas a la izquierda con columnas vacías. Con 6 (el tope) usa la rejilla fija. */ .metrics:has(li:nth-child(5):last-child){grid-template-columns:repeat(5,auto);justify-content:center} .metrics:has(li:nth-child(4):last-child){grid-template-columns:repeat(4,auto);justify-content:center} .metrics:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,auto);justify-content:center} .metrics:has(li:nth-child(2):last-child){grid-template-columns:repeat(2,auto);justify-content:center} .metrics:has(li:nth-child(1):last-child){grid-template-columns:auto;justify-content:center} /* Banner fullbleed (Photos + About) */ .banner{aspect-ratio:var(--ar-banner);position:relative;overflow:hidden;margin-top:32px} .banner img{width:100%;height:100%;object-fit:cover;border-radius:0} /* Photos grid */ .photo-grid{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 10px} /* Pocas fotos: menos columnas para que no salgan diminutas ni dejen huecos. */ .photo-grid:has(.ph-card:nth-child(1):last-child){grid-template-columns:repeat(2,1fr)} .photo-grid:has(.ph-card:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)} .photo-grid:has(.ph-card:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)} .ph-card{margin:0} .ph-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-img);transition:transform var(--dur-hover) var(--ease-hover)} .ph-card:hover img{transform:scale(var(--hover-hero-scale))} .ph-card figcaption{margin-top:10px;font-size:.72rem;color:var(--muted)} /* Brands · logos ticker (mismo mecanismo que ticker de works, con su propio keyframe: el track es una mitad exacta duplicada, así que -50% cierra el loop sin huecos) */ .logos{overflow:hidden;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);padding:40px 0;margin-top:32px} .logos-track{display:flex;gap:140px;align-items:center;width:max-content;animation:scrollLogos var(--logos-dur) linear infinite} .logos:hover .logos-track{animation-play-state:paused} @keyframes scrollLogos{to{transform:translateX(-50%)}} /* Logos del creator, altura normalizada (funcionan con cualquier tamaño de origen). Por defecto en NEGRO (.is-mono); el creator puede activarlos a color. */ .logo{height:40px;max-width:160px;flex:0 0 auto;display:inline-flex;align-items:center;object-fit:contain;opacity:1;transition:opacity .25s;position:relative} .logo--img img{height:100%;width:auto;max-width:160px;object-fit:contain;display:block} /* Recolor al color del sistema (negro) por defecto: silueta del logo (su alpha) pintada con mask → cualquier logo subido queda uniforme, como la demo. */ .logos.is-mono .logo--img img{visibility:hidden} .logos.is-mono .logo--img::after{content:"";position:absolute;inset:0;background:#000;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;opacity:.82} .logos.is-mono .logo--img:hover::after{opacity:1} /* Videos · chips + reels grid (sin sticky ni stacking; movimiento propio de Editorial) */ /* Sticky también en desktop: el nav (91px) nunca queda tapado y los chips tienen un TOPE que los fija justo debajo, en vez de pasar por detrás del nav al hacer scroll normal (antes: se "aplastaban" contra el borde). */ /* top:90px (1px por debajo del nav de 91px): solapa 1px para que ningún reel asome por un seam sub-píxel entre el header y los filtros al hacer scroll (se veía en el zoom del preview). El nav (z-index 20) tapa ese 1px. */ .cat-chips{position:sticky;top:82px;z-index:15;background:var(--bg);box-shadow:0 -16px 0 var(--bg);display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;border-bottom:.5px solid var(--line);padding-bottom:20px} .cat-chip{background:var(--paper);border:0;border-radius:999px;padding:8px 14px;font:inherit;font-size:.78rem;color:var(--ink);cursor:pointer;transition:background .25s,color .25s} .cat-chip:hover{background:#e9e9e9} .cat-chip.is-active{background:var(--btn);color:var(--on-dark)} .reel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 10px;margin-top:16px} /* Pocos vídeos en total: menos columnas para que no queden diminutos. */ .reel-grid:has(.reel:nth-child(1):last-child){grid-template-columns:repeat(2,1fr)} .reel-grid:has(.reel:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)} .reel-grid:has(.reel:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)} .reel{margin:0;position:relative;transition:opacity .3s,transform .3s;overflow:hidden;border-radius:var(--radius-img)} .reel-media{width:100%;aspect-ratio:var(--ar-reel);overflow:hidden;border-radius:var(--radius-img)} .reel-media img,.reel-media video{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-hover) var(--ease-hover)} .reel:hover .reel-media img,.reel:hover .reel-media video{transform:scale(1.03)} .reel::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));border-radius:0 0 var(--radius-img) var(--radius-img);pointer-events:none} .reel figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:baseline;color:var(--on-dark);font-size:.78rem;z-index:1} .reel figcaption .muted{opacity:.85;font-size:.72rem} .reel.is-hidden{display:none} /* Servicios/kit/tarifas · hairline entre filas · fila 3 columnas */ .svc{padding:44px 0;display:grid;grid-template-columns:340px 1fr;column-gap:45px;align-items:start;border-top:.5px solid var(--line)} .svc h3{margin:0;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:400;line-height:1.2} .svc-body{display:flex;flex-direction:column;gap:14px;max-width:640px} .svc p.d-name{margin:0;color:var(--ink);font-size:1.05rem;font-weight:500;line-height:1.4} .svc p.d{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55} .svc .price{margin:0;font-size:.95rem} .rates-note{margin:28px 0 0;font-size:.85rem;color:var(--muted)} /* About */ .about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;padding:20px 0 32px} .lead{margin:0;font-size:var(--fs-lead);line-height:1.3} .intro-portrait{aspect-ratio:var(--ar-team);border-radius:var(--radius-img);overflow:hidden} .intro-portrait img{width:100%;height:100%;object-fit:cover} .about-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:32px} .about-body p{max-width:none} /* Feedback · tarjetas con fondo propio para distinguir cada opinión de un vistazo */ .testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:20px 0 32px} /* Una sola reseña: se centra en vez de dejar media fila vacía. */ .testimonials:has(.quote:nth-child(1):last-child){grid-template-columns:minmax(0,460px);justify-content:center} /* min-height fijo + footer empujado al fondo con margin-top:auto: el divisor queda a la misma altura en las 6 tarjetas, sin importar cuánto ocupe cada texto. */ .quote{margin:0;padding:36px 34px 28px;background:var(--paper);border-radius:var(--radius-img);position:relative;display:flex;flex-direction:column;min-height:264px} .quote::before{content:"“";position:absolute;top:14px;left:28px;font-size:3.2rem;line-height:1;color:var(--muted);opacity:.4;font-family:Georgia,serif} .quote p{margin:0 0 22px;font-size:1rem;line-height:1.55;overflow-wrap:break-word} .quote footer{display:flex;flex-direction:column;gap:2px;font-size:.85rem;border-top:.5px solid var(--line);padding-top:14px;margin-top:auto} .quote .qname{font-weight:500} .quote .qrole{color:var(--muted)} /* Contact */ .contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:20px 0 40px;align-items:start} /* Sin retrato de contacto: una sola columna (no deja media sección vacía). */ .contact:not(:has(.cportrait)){grid-template-columns:1fr;max-width:520px;margin:0 auto} .cinfo p.k{margin:0 0 4px;font-size:1.05rem;font-weight:500} .cinfo p.v{margin:0 0 22px;font-size:.95rem;color:var(--muted);overflow-wrap:break-word} .cinfo p.v a:hover{color:var(--ink)} .cportrait{width:min(100%,360px);aspect-ratio:319/367;justify-self:end;border-radius:var(--radius-img);overflow:hidden} .cportrait img{width:100%;height:100%;object-fit:cover} /* Footer */ footer{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:28px;margin-top:100px;padding:40px 0 60px;border-top:.5px solid var(--line)} footer a{display:block;color:var(--ink);text-decoration:none;font-size:1rem;margin-bottom:10px} .claim{text-align:center} .claim span{display:block;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:400;line-height:1.15} .credit{grid-column:1 / -1;margin:24px 0 0;font-size:.78rem;color:var(--muted);text-align:center} .credit a{display:inline;color:var(--ink)} /* ------------------------------ MÓVIL ≤ 809 ------------------------------ */ @media(max-width:809px){ :root{--pad-x:25px} #home, #photos, #brands, #videos, #mediaKit, #about, #feedback, #rates, #contact { scroll-margin-top: 67px; } /* Fila superior siempre: BRAND ······ ES·EN ☰. Sin pastillas de fondo, controles sencillos. El menú abierto cae como panel propio. */ .nav-inner{flex-wrap:wrap;gap:16px;padding:22px var(--pad-x)} .brand{order:1} .navlinks{order:3} /* z-index por encima de .navlinks (15): sin esto, el botón queda pintado DETRÁS del overlay blanco en cuanto se abre (z-index explícito de un hermano siempre gana sobre z-index:auto, sin importar el orden en el DOM), y no había forma de ver la X ni cerrar el menú. */ .nav-controls{order:2;margin-left:auto;gap:16px;position:relative;z-index:16} .lang-toggle{background:none;padding:0} /* Botón de menú: 2 líneas (no 3) que forman una X al abrir — mismas medidas que el .menu-btn de portfolio-bold (32×22, líneas a 6px/14px, junta en 10px al abrir) para que la separación se vea igual. */ .nav-toggle{position:relative;display:block;width:32px;height:22px;background:none;border:0;padding:0;cursor:pointer} .nav-toggle span{position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:top .2s,transform .2s} .nav-toggle span:nth-child(1){top:6px} .nav-toggle span:nth-child(2){top:14px} nav.nav-open .nav-toggle span:nth-child(1){top:10px;transform:rotate(45deg)} nav.nav-open .nav-toggle span:nth-child(2){top:10px;transform:rotate(-45deg)} /* Menú abierto: pantalla completa en blanco, opciones centradas en ambos ejes, con la tipografía de titulares de Editorial (Manrope, peso 400). */ .navlinks{position:fixed;inset:0;width:auto;display:none;flex-direction:column; align-items:center;justify-content:center;gap:8px;margin:0;padding:0; background:var(--bg);border-top:0;text-align:center;z-index:15} nav.nav-open .navlinks{display:flex} .navlinks a{display:block;width:auto;margin-left:0;padding:10px 0; font-family:var(--f-display);font-weight:var(--w-display); font-size:2rem;letter-spacing:0;border-bottom:0;color:var(--ink)} .page-hdr{grid-template-columns:1fr;gap:16px;padding:44px 0 28px} .hero-title{font-size:45px;line-height:1.2;text-wrap:balance} .hero-title br{display:none} .section-hdr{grid-template-columns:1fr;gap:12px;padding:64px 0 20px} .section-hdr.center{padding-top:72px} .body-sm{max-width:none;justify-self:start} .work{width:62vw} .metrics{grid-template-columns:repeat(3,1fr);gap:20px 12px} /* móvil: 3 columnas (2 filas); escritorio: 6 en una fila */ .banner{aspect-ratio:4/5;margin-top:20px} .photo-grid{grid-template-columns:repeat(2,1fr)} .reel-grid{grid-template-columns:repeat(2,1fr)} .logos-track{gap:56px} /* Tope de los filtros de vídeo: quedan fijos justo debajo del header (nav mide 67px en móvil) con fondo propio, en vez de perderse detrás del nav o desplazarse con el grid de reels. */ .cat-chips{position:sticky;top:66px;z-index:15;margin:0;padding:16px var(--pad-x) 16px;width:100vw;margin-left:calc(-1 * var(--pad-x));background:var(--bg)} .svc{grid-template-columns:1fr;gap:16px;padding:32px 0} .svc h3{font-size:1.6rem} .about-grid{grid-template-columns:1fr;gap:24px;padding:12px 0 24px} .about-body{grid-template-columns:1fr;gap:20px} /* Reseñas visibles en móvil: el creator elige cuántas (por defecto 3) */ .testimonials{grid-template-columns:1fr;gap:20px} .quote.is-mobile-extra{display:none} .contact{grid-template-columns:1fr;gap:24px} .cportrait{width:238px;max-width:80%;margin:0 auto} footer{grid-template-columns:1fr 1fr} .claim{grid-column:1 / -1;margin-top:12px} }