/* ============================================================================= Vella Boutique — Home (Fase 5B · dirección de arte) Todo cuelga de .vella-home, la clase que el tema hijo añade al sólo en la portada. Tipografía: Baskervville. Corinthia únicamente como acento, una vez en toda la página. ========================================================================== */ .vella-home { --v-tinta: #340E21; --v-oro: #C8A259; --v-magenta: #D03982; --v-amarillo: #FCC10A; --v-terracota: #EA874D; --v-champagne: #F7EED9; --v-rosa: #F6D7E6; --v-terra-claro:#F7CFB8; --v-blanco: #FFFDFB; --v-linea: rgba(52, 14, 33, .14); --v-serif: "Baskervville", Baskerville, "Baskerville Old Face", Georgia, serif; --v-script: "Corinthia", "Snell Roundhand", cursive; --v-ritmo: clamp(72px, 7.5vw, 124px); --v-ancho: 1320px; } /* -------------------------------------------------------------------------- 1 · Base y ritmo -------------------------------------------------------------------------- */ /* La portada arranca en el slider: se retira el aire que el tema reserva encima del contenido. El selector lleva body para ganar a la regla del tema sin recurrir a !important. */ body.vella-home .site-content, body.vella-home .main-page-wrapper, body.vella-home .wd-content-layout { padding-block: 0; margin-bottom: 0; } .vella-home .page-title, .vella-home .wd-page-title, .vella-home .title-size-default { display: none; } .vella-home .vella-sec { font-family: var(--v-serif); color: var(--v-tinta); padding-block: var(--v-ritmo); } .vella-home .vella-sec > .e-con-inner { max-width: var(--v-ancho); } .vella-home .vella-sec a { text-decoration: none; } /* Las secciones a sangre rompen el contenedor del tema sin tocar su plantilla. */ .vella-home .vella-slider, .vella-home .vella-editorial, .vella-home .vella-cierre { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); } /* -------------------------------------------------------------------------- 2 · Tipografía -------------------------------------------------------------------------- */ .vella-home .vella-h2 .elementor-heading-title { font-family: var(--v-serif); font-weight: 400; font-size: clamp(28px, 3vw, 42px); line-height: 1.16; letter-spacing: .02em; color: var(--v-tinta); margin: 0; text-wrap: balance; } .vella-home .vella-sub { margin: 16px auto 0; max-width: 46ch; text-align: center; } .vella-home .vella-sub p { font-family: var(--v-serif); font-size: 15px; line-height: 1.75; color: rgba(52, 14, 33, .64); margin: 0; } .vella-home .vella-sub-izq { text-align: left; margin-inline: 0; } .vella-home .vella-entrada p { font-family: var(--v-serif); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.8; color: rgba(52, 14, 33, .78); margin: 24px 0 0; max-width: 44ch; } .vella-home .vella-lookbook > .e-con-inner > .vella-h2 { text-align: center; } /* Único Corinthia de la Home. */ .vella-home .vella-script .elementor-heading-title { font-family: var(--v-script); font-size: clamp(56px, 5.2vw, 84px); line-height: .88; color: var(--v-oro); margin: 0 0 4px; } /* -------------------------------------------------------------------------- 3 · Botones -------------------------------------------------------------------------- */ .vella-home .vella-btn .elementor-button, .vella-home .vh-cta .elementor-button { font-family: var(--v-serif); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; border-radius: 0; line-height: 1; box-shadow: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .vella-home .vella-btn-linea .elementor-button { background: transparent; color: var(--v-tinta); border: 1px solid var(--v-linea); padding: 17px 34px; } .vella-home .vella-btn-linea .elementor-button:hover { border-color: var(--v-tinta); background: var(--v-tinta); color: var(--v-champagne); } .vella-home .vella-btn-oro .elementor-button { background: transparent; color: var(--v-oro); border: 1px solid var(--v-oro); padding: 17px 34px; } .vella-home .vella-btn-oro .elementor-button:hover { background: var(--v-oro); color: var(--v-tinta); } /* -------------------------------------------------------------------------- 4 · Slider de portada -------------------------------------------------------------------------- */ .vella-home .vella-slider { padding: 0; } .vella-home .vella-slider-wd { width: 100%; } .vella-home .vella-slider-wd .elementor-widget-container { margin: 0; } .vella-home .wd-slider { background: var(--v-champagne); } /* El contenido del slide se alinea con el ancho de contenido del sitio. */ .vella-home .wd-slide-container.container { max-width: var(--v-ancho); } .vella-home .vh-slide { padding: 0; max-width: 600px; position: relative; z-index: 2; } /* Centro óptico: el bloque se apoya un punto por encima del centro geométrico para que el CTA entre en el primer viewport de un portátil de 700-760 px. Se usa "top" y no "transform" porque la animación de entrada ya ocupa el transform del mismo elemento. */ @media (min-width: 768px) { .vella-home .vh-slide { top: -16px; } } /* Un velo clarísimo sólo en el tercio izquierdo, donde va el texto. No oscurece la fotografía ni toca a la modelo: sube un punto el contraste. */ .vella-home .wd-slide .wd-slide-bg::after { content: ""; position: absolute; inset: 0 55% 0 0; background: linear-gradient(to right, rgba(255, 253, 251, .34), rgba(255, 253, 251, 0)); pointer-events: none; } /* El copy entra con un desplazamiento mínimo. Un solo bloque, no línea a línea, y sólo en la diapositiva activa. */ @media (prefers-reduced-motion: no-preference) { .vella-home .wd-carousel-item.wd-active .vh-slide, .vella-home .swiper-slide-active .vh-slide { animation: vella-entra .62s cubic-bezier(.2, .7, .3, 1) both; } } @keyframes vella-entra { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: translateY(0); } } /* Sello de marca: un trazo dorado y la palabra en versalitas muy espaciadas. El trazo es un pseudoelemento, no añade nada al documento. */ .vella-home .vh-eyebrow .elementor-heading-title { font-family: var(--v-serif); font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--v-oro); margin: 0 0 16px; display: flex; align-items: center; gap: 14px; } .vella-home .vh-eyebrow .elementor-heading-title::before { content: ""; width: 34px; height: 1px; background: var(--v-oro); flex: none; } /* Firma Corinthia: probada y descartada en 5B.1 (redundante con el eyebrow "VELLA BOUTIQUE" y competía con el headline). Ver informe, apartado E. */ .vella-home .vh-title .elementor-heading-title { font-family: var(--v-serif); font-weight: 400; font-size: clamp(38px, 5vw, 74px); line-height: .99; letter-spacing: .002em; color: var(--v-tinta); margin: 0; text-wrap: nowrap; } .vella-home .vh-sub p { font-family: var(--v-serif); font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.72; color: rgba(52, 14, 33, .74); margin: 16px 0 0; max-width: 36ch; } /* El botón sube: en un portátil estándar debe verse sin desplazarse. */ .vella-home .vh-cta { margin-top: 24px; } .vella-home .vh-cta .elementor-button { background: var(--v-tinta); color: var(--v-champagne); border: 1px solid var(--v-tinta); border-radius: 1px; padding: 19px 46px; letter-spacing: .22em; transition: background-color .24s ease, border-color .24s ease, color .24s ease; } .vella-home .vh-cta .elementor-button-text::after { content: "→"; display: inline-block; margin-left: 16px; color: var(--v-oro); transform: translateX(0); transition: transform .24s ease, color .24s ease; font-size: 1.05em; } .vella-home .vh-cta .elementor-button:hover { background: var(--v-oro); border-color: var(--v-oro); color: var(--v-tinta); } .vella-home .vh-cta .elementor-button:hover .elementor-button-text::after { transform: translateX(3px); color: var(--v-tinta); } /* Controles mínimos: flechas finas y puntos discretos. */ /* Controles: una flecha fina, sin caja. El área táctil sigue siendo amplia aunque el icono sea pequeño. */ .vella-home .wd-slider .wd-nav-arrows .wd-btn-arrow, .vella-home .wd-slider .wd-btn-arrow { background: transparent; border: 0; border-radius: 0; color: var(--v-tinta); box-shadow: none; width: 58px; height: 58px; opacity: .7; transition: opacity .26s ease, color .26s ease, transform .26s ease; } .vella-home .wd-slider .wd-btn-arrow .wd-arrow-inner { font-size: 26px; } .vella-home .wd-slider .wd-btn-arrow:hover { background: transparent; color: var(--v-oro); opacity: 1; } .vella-home .wd-slider .wd-btn-arrow.wd-prev:hover { transform: translateX(-3px); } .vella-home .wd-slider .wd-btn-arrow.wd-next:hover { transform: translateX(3px); } /* Indicadores: dos trazos finos en lugar de bolas. */ .vella-home .wd-slider .wd-nav-pagin { gap: 10px; } .vella-home .wd-slider .wd-nav-pagin-item { background: rgba(200, 162, 89, .65); /* inactivo: oro suave */ border: 0; border-radius: 0; width: 28px; height: 2px; min-width: 0; min-height: 0; opacity: 1; transition: background-color .32s ease, width .32s ease; } .vella-home .wd-slider .wd-nav-pagin-item::before, .vella-home .wd-slider .wd-nav-pagin-item::after { content: none; } .vella-home .wd-slider .wd-nav-pagin-item.wd-active { background: var(--v-tinta); width: 44px; } /* Móvil: la fotografía es horizontal, así que en lugar de recortar a la modelo la imagen se muestra arriba y el texto debajo, sobre champagne. */ @media (max-width: 1024px) { /* La fotografía no vive en .wd-slide sino en su capa .wd-slide-bg. El encuadre se desplaza al 68 % horizontal, que es donde está la modelo en las dos imágenes, para que no quede fuera al recortar en vertical. */ /* El tema genera su propia regla de posición para esta capa y la sirve desde una hoja en caché; se sobrescribe aquí de forma explícita. */ .vella-home .wd-slide .wd-slide-bg { background-size: cover !important; background-position: 68% center !important; } .vella-home .wd-slide { background-color: var(--v-champagne); } .vella-home .wd-slide-container.container { align-items: flex-end; padding-bottom: 0; } /* El tema fija el ancho del contenido de la diapositiva con un estilo en línea; aquí se anula para que el bloque de texto ocupe todo el ancho. */ .vella-home .wd-slide-inner, .vella-home .wd-slide-inner > .elementor { width: 100% !important; max-width: none !important; } .vella-home .vh-slide { max-width: none !important; width: 100%; background: var(--v-champagne); padding: 30px 24px 34px; text-align: center; box-shadow: 0 -24px 40px -18px rgba(52, 14, 33, .10); } .vella-home .vh-sub p { margin-inline: auto; } .vella-home .vh-cta { margin-top: 26px; } .vella-home .vh-eyebrow .elementor-heading-title { margin-bottom: 14px; } } @media (max-width: 767px) { /* En pantallas estrechas el titular puede partirse: mejor eso que reducirlo hasta hacerlo irrelevante. */ .vella-home .vh-title .elementor-heading-title { text-wrap: balance; } .vella-home .vh-eyebrow .elementor-heading-title { justify-content: center; } } @media (max-width: 575px) { .vella-home .vh-slide { padding: 26px 20px 30px; } .vella-home .vh-cta .elementor-button { padding: 16px 26px; font-size: 11.5px; } } /* -------------------------------------------------------------------------- 5 · Comprar por categoría — cuadrícula asimétrica -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- EL LOOK PERFECTO PARA TI · fase 5B.2.1 Campaña editorial a todo el ancho. El contenedor de sección es "full", así que el fondo llega de borde a borde del viewport; el aire lo pone .vl-wrap, que es quien lleva el ancho máximo. No hay tarjetas: hay una composición. -------------------------------------------------------------------------- */ /* Full bleed real. El contenedor de Elementor está limitado a 1192 px, así que marcar la sección como "full" no bastaba: se sale de él con márgenes negativos calculados y recupera el ancho del viewport. NO se recorta aquí: el tema ya trae html { overflow-x: hidden } y body { overflow-x: clip }, que impiden la barra horizontal. Recortar en .elementor —que mide 1192 px— devolvía las secciones a su caja y dejaba las franjas blancas laterales. */ .vella-home .vella-look { position: relative; isolation: isolate; overflow: hidden; /* las manchas pueden salirse sin desbordar */ width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); padding: 0; padding-block: clamp(66px, 6vw, 92px) clamp(80px, 7.2vw, 112px); background: #FCF7EE; --v-look-max: 1560px; } /* Luz, no formas. Dos manchas enormes y difusas, parcialmente fuera de cuadro. */ .vella-home .vella-look::before { content: ""; position: absolute; inset: -18% -12% -22% -14%; z-index: -2; pointer-events: none; background: radial-gradient(46% 38% at 8% 6%, rgba(247, 238, 217, .96) 0%, rgba(247, 238, 217, 0) 72%), radial-gradient(52% 44% at 96% 22%, rgba(246, 215, 230, .52) 0%, rgba(246, 215, 230, 0) 70%), radial-gradient(40% 52% at 84% 96%, rgba(247, 207, 184, .42) 0%, rgba(247, 207, 184, 0) 68%), radial-gradient(58% 40% at 26% 88%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 66%); } /* Marca de agua tipográfica: casi imperceptible, detrás de todo. */ .vella-home .vella-look::after { content: "VELLA"; position: absolute; left: clamp(-30px, -1vw, 0px); bottom: clamp(10px, 3vw, 54px); z-index: -1; font-family: var(--v-serif); font-size: clamp(120px, 17vw, 260px); line-height: .8; letter-spacing: .02em; color: rgba(52, 14, 33, .035); pointer-events: none; user-select: none; white-space: nowrap; } /* El aire editorial. */ .vella-home .vl-wrap { padding: 0 clamp(22px, 5vw, 90px); --width: 100%; max-width: var(--v-look-max); margin-inline: auto; gap: 0; } /* ---- Encabezado: pegado a la composición, no flotando sobre ella ---- */ .vella-home .vl-cabecera { padding: 0; --width: 100%; --align-items: center; align-items: center; text-align: center; gap: 0; margin-bottom: clamp(28px, 2.6vw, 42px); } .vella-home .vl-script .elementor-heading-title { font-family: var(--v-script); font-size: clamp(46px, 3.9vw, 60px); line-height: .72; color: var(--v-oro); margin: 0; } .vella-home .vl-titulo .elementor-heading-title { font-family: var(--v-serif); font-weight: 400; font-size: clamp(34px, 3.7vw, 56px); line-height: 1.08; letter-spacing: .045em; /* antes .1em: las letras iban demasiado sueltas */ text-transform: uppercase; color: var(--v-tinta); margin: 10px 0 0; text-wrap: balance; } .vella-home .vl-sub { --width: auto; padding: 0; } .vella-home .vl-sub p { font-family: var(--v-serif); font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.6; color: rgba(52, 14, 33, .82); /* antes .6: se perdía */ margin: 14px 0 0; } /* ---- Composición ---- */ .vella-home .vl-composicion { padding: 0; --width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 34px); align-items: start; } /* Tres bloques idénticos: mismo ancho, misma altura de fotografía, mismo arranque y mismo cierre. El orden es el que manda; la personalidad la pone cada fotografía y el marco rosa de Faldas. */ .vella-home .vl-vestidos, .vella-home .vl-conjuntos, .vella-home .vl-faldas { margin-top: 0; } .vella-home .vl-card { padding: 0; --width: 100%; gap: 0; position: relative; /* Sin esto el contenedor flex de Elementor deja que la imagen se encoja a su proporción natural en lugar de ocupar la columna. */ --align-items: stretch; align-items: stretch; } /* La fotografía va envuelta en un enlace, que es inline por naturaleza: si no se convierte en bloque, la imagen se encoge a su proporción natural. */ .vella-home .vl-foto .elementor-widget-container, .vella-home .vl-foto a { display: block; width: 100%; } .vella-home .vl-faldas .vl-foto a { width: auto; } .vella-home .vl-foto { margin: 0; overflow: hidden; line-height: 0; width: 100%; --width: 100%; text-align: initial; } .vella-home .vl-foto img { display: block; width: 100%; object-fit: cover; transition: transform .72s cubic-bezier(.2, .7, .3, 1); } .vella-home .vl-card:hover .vl-foto img { transform: scale(1.025); } /* Una sola altura para las tres. Cambia el encuadre, no el tamaño. */ .vella-home .vl-vestidos .vl-foto img, .vella-home .vl-conjuntos .vl-foto img { height: clamp(420px, 39vw, 600px); } .vella-home .vl-vestidos .vl-foto img { object-position: 50% 18%; } .vella-home .vl-conjuntos .vl-foto img { object-position: 50% 32%; } /* ---- Etiquetas: tres relaciones distintas con su fotografía ---- */ .vella-home .vl-eti { padding: 0; --width: auto; gap: 0; } .vella-home .vl-num .elementor-heading-title { font-family: var(--v-serif); font-size: 13px; letter-spacing: .2em; color: var(--v-oro); margin: 0 0 12px; } .vella-home .vl-nombre .elementor-heading-title { font-family: var(--v-serif); font-weight: 400; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.06; letter-spacing: .09em; text-transform: uppercase; color: var(--v-tinta); margin: 0; } .vella-home .vl-micro p { font-family: var(--v-serif); font-size: 14.5px; line-height: 1.5; color: rgba(52, 14, 33, .68); margin: 10px 0 0; } .vella-home .vl-cta { margin-top: 18px; --width: auto; } .vella-home .vl-cta .elementor-button { background: transparent; border: 0; padding: 0; color: var(--v-tinta); font-family: var(--v-serif); font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; line-height: 1; box-shadow: none; position: relative; } .vella-home .vl-cta .elementor-button-text::after { content: "→"; display: inline-block; margin-left: 14px; color: var(--v-oro); font-size: 14px; transform: translateX(0); transition: transform .5s cubic-bezier(.2, .7, .3, 1); } .vella-home .vl-card:hover .vl-cta .elementor-button-text::after { transform: translateX(5px); } /* Un filete dorado que aparece bajo el CTA, sin teñir el bloque entero. */ .vella-home .vl-cta .elementor-button::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 1px; background: var(--v-oro); transition: width .5s cubic-bezier(.2, .7, .3, 1); } .vella-home .vl-card:hover .vl-cta .elementor-button::after { width: calc(100% - 26px); } /* Un solo sistema para las tres etiquetas: mismo orden, misma tipografía, misma alineación, siempre bajo su fotografía. Cambia la posición dentro de la retícula, no el sistema gráfico. */ .vella-home .vl-eti { padding-top: clamp(18px, 1.6vw, 26px); text-align: left; } /* Sin superposiciones: las tres etiquetas viven debajo de su fotografía, con el mismo aire y el mismo eje. */ .vella-home .vl-eti-vestidos, .vella-home .vl-eti-conjuntos, .vella-home .vl-eti-faldas { margin: 0; padding-top: clamp(18px, 1.6vw, 26px); background: transparent; max-width: 100%; } /* El marco rosa ocupa exactamente la misma caja que las otras dos fotografías; dentro, la prenda respira. Así el bloque pesa igual sin fingir que su fotografía es de campaña. */ .vella-home .vl-faldas .vl-marco { height: clamp(420px, 39vw, 600px); padding: clamp(18px, 1.6vw, 26px); background: linear-gradient(158deg, var(--v-rosa) 0%, rgba(247, 207, 184, .72) 100%); --width: 100%; --justify-content: center; justify-content: center; align-items: center; gap: 0; overflow: hidden; } .vella-home .vl-faldas .vl-foto { width: auto; margin-inline: auto; height: 100%; } .vella-home .vl-faldas .vl-foto a { height: 100%; width: auto; } .vella-home .vl-faldas .vl-foto img { height: 100%; width: auto; margin-inline: auto; } /* -------------------------------------------------------------------------- Tablet -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .vella-home .vl-composicion { gap: clamp(14px, 1.8vw, 22px); } .vella-home .vl-vestidos .vl-foto img, .vella-home .vl-conjuntos .vl-foto img, .vella-home .vl-faldas .vl-marco { height: clamp(320px, 34vw, 430px); } .vella-home .vl-nombre .elementor-heading-title { font-size: clamp(17px, 1.9vw, 23px); } .vella-home .vella-look::after { font-size: clamp(110px, 19vw, 200px); } } /* -------------------------------------------------------------------------- Composición vertical: se rediseña, no se encoge -------------------------------------------------------------------------- */ @media (max-width: 860px) { .vella-home .vella-look { padding-block: clamp(56px, 11vw, 80px) clamp(64px, 12vw, 96px); } .vella-home .vl-wrap { padding-inline: clamp(18px, 5vw, 34px); } .vella-home .vl-composicion { grid-template-columns: 1fr; gap: clamp(46px, 10vw, 68px); } .vella-home .vl-vestidos, .vella-home .vl-conjuntos, .vella-home .vl-faldas { grid-column: 1 / -1; margin-top: 0; } /* Apiladas, las tres conservan la misma altura de imagen. */ .vella-home .vl-vestidos .vl-foto img, .vella-home .vl-conjuntos .vl-foto img, .vella-home .vl-faldas .vl-marco { height: clamp(400px, 96vw, 520px); } .vella-home .vl-faldas .vl-marco { max-width: 100%; } .vella-home .vella-look::after { font-size: clamp(96px, 30vw, 150px); bottom: 18px; } } @media (max-width: 480px) { .vella-home .vl-titulo .elementor-heading-title { font-size: clamp(28px, 8.4vw, 36px); } .vella-home .vl-script .elementor-heading-title { font-size: clamp(40px, 12vw, 50px); } .vella-home .vl-nombre .elementor-heading-title { font-size: clamp(20px, 6vw, 26px); } } /* -------------------------------------------------------------------------- 6 · Tarjeta de producto — caja visual 2:3, sólo presentación -------------------------------------------------------------------------- */ .vella-home .vella-grid .wd-products { --wd-gap-lg: clamp(16px, 1.8vw, 28px); } .vella-home .vella-grid .product-element-top, .vella-home .vella-grid .product-image-link { display: block; aspect-ratio: 2 / 3; overflow: hidden; } .vella-home .vella-grid .product-element-top img, .vella-home .vella-grid .product-image-link img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; } .vella-home .vella-grid .wd-entities-title, .vella-home .vella-grid .wd-entities-title a { font-family: var(--v-serif); font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--v-tinta); text-transform: none; } .vella-home .vella-grid .price, .vella-home .vella-grid .price .amount, .vella-home .vella-grid .price bdi { font-family: var(--v-serif); font-weight: 400; font-size: 14px; color: var(--v-oro); } .vella-home .vella-grid .wd-product-cats, .vella-home .vella-grid .wd-product-brands-links, .vella-home .vella-grid .star-rating, .vella-home .vella-grid .product-rating, .vella-home .vella-grid .wd-product-sku, .vella-home .vella-grid .wd-product-desc { display: none; } /* -------------------------------------------------------------------------- 7 · Selección Vella — una pieza protagonista y tres acompañantes -------------------------------------------------------------------------- */ .vella-home .vella-seleccion { background: var(--v-blanco); } /* Antes: encabezado a todo lo ancho, fotografía enorme a la izquierda y tres productos diminutos a la derecha con un vacío de ~300 px debajo. Ahora el encabezado vive dentro de la columna de productos —título y subtítulo como una unidad, sobre el mismo eje— y la fotografía cede ancho para que las tarjetas crezcan. */ .vella-home .vs-cuerpo { padding: 0; --width: 100%; display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 44px); } .vella-home .vs-protagonista, .vella-home .vs-derecha, .vella-home .vs-secundarios { padding: 0; --width: 100%; min-width: 0; } .vella-home .vs-derecha { gap: 0; } .vella-home .vs-cabecera { padding: 0; --width: 100%; margin-bottom: clamp(24px, 2.4vw, 38px); } .vella-home .vs-cabecera .vella-h2 .elementor-heading-title { text-align: left; } .vella-home .vs-cabecera .vella-sub { text-align: left; margin: 12px 0 0; max-width: 42ch; } .vella-home .vs-cabecera .vella-sub p { font-size: clamp(16px, 1.15vw, 18px); color: rgba(52, 14, 33, .74); } .vella-home .vs-uno .wd-products { --wd-col-lg: 1; --wd-col-md: 1; --wd-col-sm: 1; --wd-col-xs: 1; } .vella-home .vs-tres .wd-products { --wd-col-lg: 3; --wd-col-md: 3; --wd-col-sm: 3; --wd-col-xs: 2; } /* WooCommerce envuelve la miniatura en un sin altura propia: si no se estira, el height:100% de la imagen no tiene contra qué resolverse. */ .vella-home .vs-uno .product-element-top, .vella-home .vs-tres .product-element-top { overflow: hidden; } .vella-home .vs-uno .product-element-top .wd-product-img-link, .vella-home .vs-tres .product-element-top .wd-product-img-link { display: block; height: 100%; } /* Contenedores 2:3 idénticos: las tres acompañantes se alinean por altura aunque sus archivos originales tengan proporciones distintas. */ .vella-home .vs-tres .product-element-top { aspect-ratio: 2 / 3; } .vella-home .vs-tres .product-element-top img { width: 100%; height: 100%; object-fit: cover; } .vella-home .vs-uno .product-element-top { aspect-ratio: 2 / 3; } .vella-home .vs-uno .product-element-top img { width: 100%; height: 100%; object-fit: cover; } .vella-home .vs-uno .wd-entities-title, .vella-home .vs-uno .wd-entities-title a { font-size: 19px; } .vella-home .vs-uno .price, .vella-home .vs-uno .price bdi { font-size: 16px; } /* Apilada (tablet y móvil): la fotografía editorial ocupa todo el ancho, así que su altura se acota — con proporción 2:3 llegaría a 1400 px. */ @media (max-width: 1024px) { .vella-home .vs-uno .product-element-top { aspect-ratio: auto; height: clamp(400px, 58vw, 560px); overflow: hidden; } .vella-home .vs-uno .product-element-top img, .vella-home .vs-uno .product-element-top a img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 22%; } } /* Las acompañantes dejan de ser miniaturas. */ .vella-home .vs-tres .wd-entities-title, .vella-home .vs-tres .wd-entities-title a { font-size: 15.5px; line-height: 1.4; } .vella-home .vs-tres .price, .vella-home .vs-tres .price bdi { font-size: 14.5px; } @media (min-width: 1025px) { .vella-home .vs-cuerpo { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); align-items: start; gap: clamp(26px, 2.8vw, 46px); } /* La fotografía editorial se acota en altura para cerrar casi a la misma línea que la columna de productos: se acaba el vacío inferior. */ .vella-home .vs-uno .product-element-top { aspect-ratio: auto; height: clamp(480px, 42vw, 640px); } } /* -------------------------------------------------------------------------- 8 · Bloque editorial rosa -------------------------------------------------------------------------- */ .vella-home .vella-editorial { padding: 0; background: var(--v-rosa); display: grid; grid-template-columns: 1fr; align-items: stretch; } .vella-home .vella-editorial-foto { padding: 0; --width: 100%; min-width: 0; justify-content: center; } .vella-home .vella-editorial-img, .vella-home .vella-editorial-img .elementor-widget-container, .vella-home .vella-editorial-img figure { margin: 0; } .vella-home .vella-editorial-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 14%; } .vella-home .vella-editorial-texto { padding: clamp(56px, 7vw, 116px) clamp(24px, 6vw, 104px); display: flex; flex-direction: column; justify-content: center; --width: 100%; } @media (min-width: 1025px) { .vella-home .vella-editorial { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); min-height: 660px; } .vella-home .vella-editorial-foto, .vella-home .vella-editorial-texto { grid-column: auto; height: 100%; } .vella-home .vella-editorial-texto { padding-right: clamp(60px, 9vw, 180px); } } /* -------------------------------------------------------------------------- 9 · Conjuntos — editorial a la izquierda, producto a la derecha -------------------------------------------------------------------------- */ .vella-home .vella-conjuntos { background: var(--v-champagne); padding-block: 0; display: grid; grid-template-columns: 1fr; align-items: stretch; } .vella-home .vj-foto { padding: 0; --width: 100%; min-width: 0; } .vella-home .vj-img, .vella-home .vj-img .elementor-widget-container, .vella-home .vj-img figure { margin: 0; height: 100%; } .vella-home .vj-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .9s cubic-bezier(.2, .7, .3, 1); } .vella-home .vj-foto { overflow: hidden; } .vella-home .vj-foto:hover .vj-img img { transform: scale(1.025); } .vella-home .vj-texto { padding: var(--v-ritmo) clamp(24px, 5vw, 76px); display: flex; flex-direction: column; justify-content: center; gap: 0; --width: 100%; } .vella-home .vj-texto .vella-sub { margin-top: 14px; } .vella-home .vj-grid { margin-top: clamp(28px, 3vw, 44px); width: 100%; } .vella-home .vj-grid .wd-products { --wd-col-lg: 3; --wd-col-md: 3; --wd-col-sm: 3; --wd-col-xs: 2; } .vella-home .vj-texto .vella-btn { margin-top: clamp(28px, 3vw, 40px); } .vella-home .vj-texto .vella-btn .elementor-button { display: inline-block; } @media (max-width: 1024px) { .vella-home .vj-img img { aspect-ratio: 3 / 2; height: auto; } } @media (min-width: 1025px) { .vella-home .vella-conjuntos { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); } .vella-home .vj-foto, .vella-home .vj-texto { grid-column: auto; height: 100%; } } /* -------------------------------------------------------------------------- 10 · Lookbook — mosaico de revista con aire -------------------------------------------------------------------------- */ .vella-home .vella-lookbook { background: var(--v-blanco); } /* Antes: mosaico de 1320 px y 521 px de alto flotando en blanco. Ahora ocupa ~94 % del ancho disponible, los huecos se cierran y la pieza gana altura: se lee como una campaña, no como una galería. */ .vella-home .vella-lookbook > .e-con-inner > .vella-h2 { text-align: left; margin-bottom: clamp(34px, 3.2vw, 50px); } .vella-home .vella-lookbook-mosaico { padding: 0; margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); max-width: none; margin-inline: 0; --width: 100%; } .vella-home .vella-lb { margin: 0; overflow: hidden; } /* Cada pieza llena su celda: sin esto el widget conserva la proporción del archivo y las filas quedan desiguales. */ .vella-home .vella-lb, .vella-home .vella-lb .elementor-widget-container, .vella-home .vella-lb a { display: block; height: 100%; } .vella-home .vella-lb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .3, 1); } .vella-home .vella-lb:hover img { transform: scale(1.035); } @media (min-width: 768px) { /* Una pieza grande a la izquierda (41 %) y cuatro en dos filas a la derecha. Sin huecos vacíos: el mosaico es una sola pieza. */ .vella-home .vella-lookbook-mosaico { grid-template-columns: minmax(0, 41fr) minmax(0, 29.5fr) minmax(0, 29.5fr); grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(520px, 46vw, 760px); } .vella-home .vella-lb-1 { grid-column: 1; grid-row: 1 / span 2; } .vella-home .vella-lb-2 { grid-column: 2; grid-row: 1; } .vella-home .vella-lb-3 { grid-column: 3; grid-row: 1; } .vella-home .vella-lb-4 { grid-column: 2; grid-row: 2; } .vella-home .vella-lb-5 { grid-column: 3; grid-row: 2; } /* Encuadres: la cara nunca queda contra el borde superior. */ .vella-home .vella-lb-1 img { object-position: 50% 22%; } .vella-home .vella-lb-2 img, .vella-home .vella-lb-3 img, .vella-home .vella-lb-4 img, .vella-home .vella-lb-5 img { object-position: 50% 26%; } } @media (max-width: 767px) { /* Móvil: la primera a todo el ancho y las cuatro restantes en dos columnas. */ .vella-home .vella-lb img { aspect-ratio: 3 / 4; height: auto; } .vella-home .vella-lb-1 { grid-column: 1 / -1; } .vella-home .vella-lb-1 img { aspect-ratio: 4 / 5; } } /* -------------------------------------------------------------------------- 11 · Cierre de marca -------------------------------------------------------------------------- */ .vella-home .vella-cierre { background: var(--v-tinta); text-align: center; align-items: center; padding-inline: 24px; } .vella-home .vella-cierre > * { max-width: 720px; width: 100%; } .vella-home .vella-h2-cierre .elementor-heading-title { color: var(--v-champagne); font-size: clamp(28px, 3.6vw, 48px); letter-spacing: .035em; } .vella-home .vella-cierre .vella-entrada p { color: rgba(247, 238, 217, .8); max-width: 48ch; margin-inline: auto; text-align: center; } .vella-home .vella-cierre .vella-btn { margin-top: 38px; } /* -------------------------------------------------------------------------- 12 · Movimiento y foco -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .vella-home .vella-lb img, .vella-home .vj-img img, .vella-home .vl-foto img, .vella-home .vella-btn .elementor-button, .vella-home .vl-cta .elementor-button-text::after, .vella-home .vh-cta .elementor-button-text::after { transition: none; } .vella-home .vella-lb:hover img, .vella-home .vl-card:hover .vl-foto img, .vella-home .vj-foto:hover .vj-img img { transform: none; } } .vella-home .vella-sec a:hover, .vella-home .vella-sec a:focus { color: var(--v-magenta); } .vella-home .vella-sec :focus-visible, .vella-home .wd-slider :focus-visible { outline: 2px solid var(--v-oro); outline-offset: 3px; } /* ========================================================================== FASE 5B.3 · Anchos de la portada Full-width controlada: el FONDO de cada sección llega al borde del viewport y el CONTENIDO vive en un envoltorio propio. Cada sección usa el suyo —no hay un único max-width global— para que la página tenga ritmo. Todo cuelga de .vella-home: la ficha de producto, la tienda, las categorías y el resto del sitio no se ven afectados. ========================================================================== */ /* Nada de recorte en .elementor: ese elemento mide 1192 px y recortaría justo lo que queremos que se salga. La barra horizontal ya la evita el tema con html { overflow-x: hidden }. */ /* --- 1 · Secciones que seguían encajonadas en 1192 px --- */ .vella-home .vella-seleccion, .vella-home .vella-conjuntos, .vella-home .vella-lookbook { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); } /* --- 2 · Envoltorio interno, uno por sección --- */ /* Selección Vella · 1600 px */ .vella-home .vella-seleccion > .e-con-inner { max-width: 1600px; width: 100%; padding-inline: clamp(24px, 4.6vw, 80px); } /* Conjuntos · 1600 px. No tiene .e-con-inner —es un contenedor "full" del constructor—, así que el envoltorio se consigue con un padding que crece hasta centrar el contenido en pantallas anchas. */ .vella-home .vella-conjuntos { padding-inline: max(clamp(24px, 4.6vw, 80px), calc((100vw - 1600px) / 2)); } /* Lookbook · más ancho y con menos aire lateral: el mosaico debe respirar. */ .vella-home .vella-lookbook > .e-con-inner { max-width: 1760px; width: 100%; padding-inline: clamp(20px, 3vw, 56px); } /* Cierre de marca · ya era full; su contenido se centra y se acota para que la línea de texto no se estire de más. */ .vella-home .vella-cierre { padding-inline: max(clamp(24px, 5vw, 90px), calc((100vw - 1600px) / 2)); } .vella-home .vella-cierre .vella-h2-cierre .elementor-heading-title, .vella-home .vella-cierre .vella-entrada { max-width: 820px; margin-inline: auto; } /* --- 3 · Copy del slider dentro de un envoltorio editorial --- El tema mete el contenido de cada slide dentro de su .container central, que a 1440 mide 1178 px: por eso el copy arrancaba a 193 px del borde. Se libera ese contenedor sólo dentro del slider de la portada y el envoltorio pasa a ser el nuestro. */ .vella-home .wd-slider .wd-slide .container { max-width: none; width: 100%; padding-inline: 0; } .vella-home .wd-slide .wd-slide-inner { max-width: 1560px !important; width: 100% !important; margin-inline: auto; padding-inline: clamp(24px, 5vw, 90px); } /* El copy se apoya en el borde izquierdo del envoltorio, no en su centro. */ .vella-home .wd-slide .wd-slide-inner > .elementor { align-items: flex-start; } .vella-home .vh-slide { align-self: flex-start; margin-inline: 0; } /* --- 4 · Tablet y móvil: el ancho es el del viewport, con aire mínimo --- */ @media (max-width: 1024px) { .vella-home .vella-seleccion > .e-con-inner, .vella-home .vella-conjuntos { padding-inline: clamp(24px, 3.4vw, 40px); } .vella-home .vella-lookbook > .e-con-inner { padding-inline: clamp(20px, 2.6vw, 34px); } .vella-home .vella-cierre { padding-inline: clamp(24px, 3.4vw, 40px); } } @media (max-width: 767px) { .vella-home .vella-seleccion > .e-con-inner, .vella-home .vella-conjuntos, .vella-home .vella-cierre { padding-inline: 18px; } .vella-home .vella-lookbook > .e-con-inner { padding-inline: 16px; } .vella-home .wd-slide .wd-slide-inner { padding-inline: 20px; } } /* ========================================================================== FASE 5B.4 · Retícula editorial común Las tres secciones comparten envoltorio, aire lateral, ritmo vertical y escala tipográfica. La asimetría vive dentro de esa retícula, no fuera. ========================================================================== */ .vella-home .vella-look, .vella-home .vella-seleccion, .vella-home .vella-lookbook { padding-block: clamp(80px, 7vw, 110px) clamp(90px, 8vw, 130px); } /* Envoltorio: mismo eje para Look y Selección; el Lookbook, por ser el más fotográfico, respira un poco más ancho y con menos aire lateral. */ .vella-home .vl-wrap { max-width: 1660px; width: 100%; margin-inline: auto; padding-inline: clamp(32px, 4vw, 72px); } /* Selección es un contenedor "full" del constructor: no tiene .e-con-inner, así que el envoltorio se consigue con un padding que crece hasta centrar el contenido a 1660 px en pantallas anchas. */ .vella-home .vella-seleccion { padding-inline: max(clamp(32px, 4vw, 72px), calc((100vw - 1660px) / 2)); } .vella-home .vella-lookbook > .e-con-inner { max-width: 1760px; width: 100%; margin-inline: auto; padding-inline: clamp(28px, 3vw, 50px); } /* Escala tipográfica común de sección. */ .vella-home .vella-seleccion .vella-h2 .elementor-heading-title, .vella-home .vella-lookbook .vella-h2 .elementor-heading-title { font-size: clamp(32px, 3.4vw, 50px); letter-spacing: .015em; } .vella-home .vl-titulo .elementor-heading-title { font-size: clamp(32px, 3.4vw, 52px); } .vella-home .vella-seleccion .vella-sub p, .vella-home .vl-sub p { font-size: clamp(16px, 1.15vw, 18px); } /* El encabezado del Look cede altura: la composición empieza antes. */ .vella-home .vl-cabecera { margin-bottom: clamp(26px, 2.4vw, 40px); } .vella-home .vl-sub { padding-bottom: 28px; } @media (max-width: 1024px) { .vella-home .vl-wrap, .vella-home .vella-seleccion { padding-inline: clamp(24px, 3.4vw, 40px); } .vella-home .vella-lookbook > .e-con-inner { padding-inline: clamp(20px, 2.6vw, 34px); } } @media (max-width: 767px) { .vella-home .vella-look, .vella-home .vella-seleccion, .vella-home .vella-lookbook { padding-block: clamp(56px, 11vw, 78px) clamp(62px, 12vw, 92px); } .vella-home .vl-wrap, .vella-home .vella-seleccion { padding-inline: 18px; } .vella-home .vella-lookbook > .e-con-inner { padding-inline: 16px; } } /* ========================================================================== TEASER VELLA · puente entre el comercio y el editorial (Fase 7) Va después de Selección Vella. No cuenta la historia: sólo invita. COPY PROVISIONAL — pendiente del texto institucional definitivo. ========================================================================== */ .vella-home .vella-teaser { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); padding: 0; background: radial-gradient(58% 82% at 88% 8%, rgba(246, 215, 230, .55) 0%, rgba(246, 215, 230, 0) 64%), radial-gradient(52% 70% at 4% 92%, rgba(247, 207, 184, .42) 0%, rgba(247, 207, 184, 0) 60%), var(--v-champagne); } .vella-home .vt-wrap { max-width: 1660px; width: 100%; margin-inline: auto; padding: clamp(64px, 6vw, 96px) clamp(24px, 4vw, 72px); --width: 100%; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: clamp(28px, 4vw, 70px); align-items: center; } .vella-home .vt-foto, .vella-home .vt-texto { padding: 0; --width: 100%; gap: 0; } .vella-home .vt-img { margin: 0; overflow: hidden; line-height: 0; width: 100%; --width: 100%; } .vella-home .vt-img .elementor-widget-container, .vella-home .vt-img a { display: block; width: 100%; } .vella-home .vt-img img { display: block; width: 100%; height: clamp(340px, 34vw, 520px); object-fit: cover; object-position: 50% 24%; transition: transform .8s cubic-bezier(.2, .7, .3, 1); } .vella-home .vt-img:hover img { transform: scale(1.025); } .vella-home .vt-script .elementor-heading-title { font-family: var(--v-script); font-size: clamp(44px, 3.6vw, 60px); line-height: .76; color: var(--v-oro); margin: 0 0 8px; } .vella-home .vt-titulo .elementor-heading-title { font-family: var(--v-serif); font-weight: 400; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.14; letter-spacing: .015em; color: var(--v-tinta); margin: 0; text-wrap: balance; } .vella-home .vt-copy p { font-family: var(--v-serif); font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.78; color: rgba(52, 14, 33, .78); margin: 18px 0 0; max-width: 42ch; } .vella-home .vt-cta { margin-top: 26px; --width: auto; } .vella-home .vt-cta .elementor-button { background: transparent; border: 0; padding: 0; color: var(--v-tinta); font-family: var(--v-serif); font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; line-height: 1; box-shadow: none; position: relative; } .vella-home .vt-cta .elementor-button-text::after { content: "→"; display: inline-block; margin-left: 14px; color: var(--v-oro); transition: transform .5s cubic-bezier(.2, .7, .3, 1); } .vella-home .vt-cta .elementor-button::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 1px; background: var(--v-oro); transition: width .5s cubic-bezier(.2, .7, .3, 1); } .vella-home .vt-cta .elementor-button:hover .elementor-button-text::after { transform: translateX(5px); } .vella-home .vt-cta .elementor-button:hover::after { width: calc(100% - 26px); } @media (max-width: 860px) { .vella-home .vt-wrap { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 34px); padding-inline: 18px; } .vella-home .vt-img img { height: clamp(320px, 78vw, 420px); } } @media (prefers-reduced-motion: reduce) { .vella-home .vt-img img { transition: none; } .vella-home .vt-img:hover img { transform: none; } }