/* ========================================================= Mansion Clothes · secciones exclusivas de la home Depende de base.css (tokens, nav, footer, bolsa, botones). ========================================================= */ /* ===== HERO ===== */ .hero{ position:relative; min-height:100dvh; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--crema); overflow:hidden; background-image:url('../img/bg-percha.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; } /* El centro se aclara para que la fotografía se vea A TRAVÉS del cristal: con el scrim anterior la zona del panel quedaba plana y oscura, y el backdrop-filter no tenía nada que difuminar. Los bordes se oscurecen más para que el panel siga recortándose contra el fondo. */ .hero__scrim{ position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 50% 44%, rgba(10,18,13,.14), rgba(10,18,13,.72) 82%); } /* El panel de cristal es el único uso deliberado de glass del sitio: es la metáfora de la puerta de la casa, no decoración. */ .panel{ position:relative; z-index:2; width:min(600px,88vw); padding:56px 54px 52px; background:rgba(16,32,24,.58); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(246,241,231,.4); /* antes oro: con el botón dorado debajo eran dos oros en la misma pantalla */ box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.4); } .panel img.mark{ display:block; width:min(210px,56%); height:auto; margin:0 auto 28px; } .panel__title{ font-size:clamp(1.75rem,3vw,2.25rem); color:var(--crema); margin:0 0 18px; } .panel p.lead{ font-weight:300; font-size:var(--fs-lead); line-height:1.65; letter-spacing:.02em; color:rgba(246,241,231,.92); max-width:36ch; margin:0 auto 32px; } /* Entrada del hero: una sola coreografía al cargar, no un fundido repetido sección por sección. El estado natural es visible, así que con prefers-reduced-motion (que anula animaciones) todo se ve igualmente. */ @keyframes heroIn{ from{ opacity:0; transform:translateY(16px); } } .panel .mark,.panel__title,.panel .lead,.panel .btn{ animation:heroIn .9s var(--ease) backwards; } .panel__title{ animation-delay:.10s; } .panel .lead{ animation-delay:.20s; } .panel .btn{ animation-delay:.30s; } @media (prefers-reduced-transparency: reduce){ .panel{ background:rgba(16,32,24,.86); backdrop-filter:none; -webkit-backdrop-filter:none; } } /* ===== STATEMENT ===== Remata al marquee: el de arriba enseña las casas, esta frase dice qué significan. Menos aire arriba que abajo para que se lean como una secuencia y no como dos secciones sueltas. */ .statement{ padding:clamp(52px,6vw,80px) 0 clamp(88px,10vw,128px); text-align:center; } .statement h2{ font-size:var(--fs-h2); color:var(--verde); max-width:22ch; margin:0 auto; } .statement p{ font-weight:300; font-size:var(--fs-lead); color:var(--muted); max-width:52ch; margin:22px auto 0; } /* ===== MARCAS ===== */ .houses{ background:var(--verde); color:var(--crema); padding:clamp(48px,6vw,72px) 0; overflow:hidden; line-height:1.7; } /* es un h2 por semántica, pero se presenta como etiqueta: Cinzel a 12px no. */ .houses .lbl{ font-family:var(--font-body); font-weight:700; text-align:center; font-size:var(--fs-label); letter-spacing:.28em; text-transform:uppercase; color:var(--oro-soft); margin-bottom:34px; } .marquee{ display:flex; width:max-content; white-space:nowrap; will-change:transform; animation:slide 38s linear infinite; } /* min-width:100vw es la clave: si un juego fuera más estrecho que la pantalla, al desplazar -50% quedaría un hueco vacío a la derecha. */ .marquee__set{ display:flex; flex:none; min-width:100vw; justify-content:space-around; } .marquee span{ font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2.4vw,30px); color:rgba(246,241,231,.88); padding:0 clamp(20px,2.5vw,40px); position:relative; } /* separador en crema, no en oro: eran 16 puntos dorados a la vez */ .marquee span::after{ content:"·"; position:absolute; right:-4px; color:rgba(246,241,231,.45); } @keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* pausa también al enfocar con teclado, no solo al pasar el ratón */ .houses:hover .marquee,.houses:focus-within .marquee{ animation-play-state:paused; } /* ===== CATEGORÍAS ===== */ .cats{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.8vw,26px); padding:clamp(56px,7vw,96px) 0 clamp(72px,9vw,120px); } /* Sin el tope de altura, a 1440px cada tarjeta salía de 816px: en una pantalla de 900 solo cabía una y la sección se convertía en un muro. */ .cat{ position:relative; aspect-ratio:4/5; max-height:min(72vh,640px); overflow:hidden; display:block; } /* Las fotos son verticales de cuerpo entero. Centrado, un recorte más bajo corta la cabeza; al 28% el encuadre se queda en rostro y prenda. */ .cat img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; transition:transform 1s var(--ease); } .cat:hover img{ transform:scale(1.05); } .cat__ov{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,18,13,.72), rgba(10,18,13,.04) 58%); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(24px,3vw,40px); } .cat__ov h2{ color:var(--crema); font-size:var(--fs-h3); } .cat__ov .go{ margin-top:12px; color:var(--oro-soft); font-size:12px; letter-spacing:.24em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; transition:gap .3s var(--ease); } .cat:hover .go{ gap:15px; } /* ===== SELECCIÓN ===== */ .selection{ background:var(--crema); padding:clamp(72px,9vw,110px) 0; } .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px 32px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,52px); } .sec-head h2{ font-size:var(--fs-h2); color:var(--verde); } .sec-head .eyebrow{ display:block; margin-bottom:14px; } /* Enlace de sección. Antes era un botón con recuadro que pesaba lo mismo que el título y le disputaba la jerarquía; ahora acompaña en vez de competir. */ .link-arrow{ display:inline-flex; align-items:center; gap:10px; padding-bottom:5px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--verde); border-bottom:1px solid var(--line); transition:border-color .3s var(--ease), gap .3s var(--ease); } .link-arrow:hover{ border-color:var(--verde); gap:16px; } .link-arrow .ico{ font-size:15px; } /* Son cuatro piezas: la rejilla va 4 -> 2 -> 1. Nunca 3, porque dejaría una huérfana en su propia fila. Antes se quedaba en 4 columnas hasta los 860px y entre medias las tarjetas quedaban asfixiadas. */ .grid-prod{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,2.6vw,36px) clamp(16px,1.8vw,26px); } @media (max-width:1100px){ .grid-prod{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .grid-prod{ grid-template-columns:1fr; } } /* Sin tarjeta. El borde daba 1.27:1 (invisible) y el panel de papel sobre crema tampoco se distinguía: era chrome que no hacía nada. La foto se apoya directamente en el fondo de la sección y el texto va debajo. */ .prod{ display:flex; flex-direction:column; } .prod .ph{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#e7e0d0; display:block; } /* El botón vive fuera del enlace: un