/* ============================================================ BELLA FLOR · BODAS & EVENTOS — secciones ============================================================ */ /* ---------- Estados de revelado ---------- Nacen VISIBLES. El JS solo los esconde si el movimiento esta permitido (clase .js-movimiento en ). Sin JS o con reduced-motion, se lee todo. */ .js-movimiento .revelar { opacity: 0; filter: blur(6px); transform: translate3d(0, 1.2rem, 0); } .js-movimiento .revelar.visible { opacity: 1; filter: blur(0); transform: none; transition: opacity 1s var(--ease-suave), filter 1.1s var(--ease-suave), transform 1.1s var(--ease-suave); } /* ---------- Cortina de entrada ---------- */ .cortina { position: fixed; inset: 0; z-index: 200; background: var(--marfil); pointer-events: none; } .cortina[hidden] { display: none; } /* ---------- EL TALLO ---------- */ .tallo { position: absolute; top: 100svh; bottom: 0; left: max(calc(var(--borde) * 0.34), 0.55rem); width: 64px; z-index: 1; pointer-events: none; } .tallo__svg { display: block; } .tallo__linea { opacity: 0.9; } .tallo__hoja { transform-box: fill-box; } .tallo__nodo { transform-box: fill-box; } /* En movil la banda del tallo se come el borde: se estrecha y se apaga un poco para que nunca compita con el texto. */ @media (max-width: 560px) { .tallo { left: 0; width: 26px; opacity: 0.72; } } .cierre__rosa .rosa__svg { width: 100%; height: 100%; } /* ---------- Marco superior ---------- */ .marco { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.4vh, 1.9rem) var(--borde) clamp(1.6rem, 3.4vh, 2.6rem); } /* Velo marfil detras del marco. Sin esto el contenido le pasa por debajo y el logo queda encima del texto — ilegible en cualquier posicion de scroll. Se desvanece hacia abajo para que no se lea como una barra pegada. */ .marco::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( to bottom, var(--marfil) 0%, rgb(253 252 247 / 0.96) 48%, rgb(253 252 247 / 0.75) 72%, rgb(253 252 247 / 0) 100% ); } .marco__logo { display: grid; gap: 0.34em; line-height: 1; } /* "Bella" en tinta y "Flor" en oro: dos valores distintos de verdad. Dos oros casi iguales se leian como error, no como intencion. */ .marco__logo-nombre { font-family: var(--display); font-size: clamp(1.35rem, 1.8vw, 1.7rem); font-weight: 300; letter-spacing: 0.01em; color: var(--tinta); } .marco__logo-nombre em { font-style: italic; color: var(--oro-viejo); } .marco__logo-desc { font-size: clamp(0.5rem, 0.62vw, 0.6rem); letter-spacing: var(--ls-rotulo-corto); } .marco__tel { font-size: var(--t-rotulo); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-rotulo-corto); color: var(--oro-texto); white-space: nowrap; transition: color 0.4s var(--ease-sobrio); } .marco__tel:hover { color: var(--oro-profundo); } /* ══════════════════ HERO ══════════════════ */ /* NO usar grid con filas 1fr aqui: el reparto de sobrante abre huecos muertos entre eyebrow, titular, sub y botones. Bloque centrado en vertical, franja de feria anclada abajo. Anclar TODO abajo (flex-end) dejaba huecos de 302px en 390 y 617px en 820 — sin foto detras eso no se lee como aire, se lee como agujero. Centrado, los margenes quedan parejos a cualquier alto de viewport. Cuando entre ph_pareja, volver a flex-end es cambiar esta linea. */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; /* el padding superior reserva la altura real del marco fijo; el inferior deja sitio a la franja de feria, que va absoluta */ padding: clamp(6rem, 14vh, 9rem) var(--borde) clamp(7rem, 13vh, 9rem); overflow: clip; isolation: isolate; } .hero__medio { position: absolute; inset: 0; z-index: -1; overflow: clip; } /* ---------- El interruptor: data-hero="tipografico" | "foto" ---------- */ /* Plan B (ACTIVO): sin foto. Bloque centrado, auras encendidas, foto apagada. No es un hueco esperando imagen — es una portada tipografica cerrada. */ .hero[data-hero='tipografico'] .hero__foto { display: none; } /* Doble marco de portada: linea dorada + linea fantasma interior, con esquineros. Es el ornamento del sistema (Manual §5) y es lo que convierte el aire del hero sin foto en un encuadre deliberado en vez de un vacio. Solo existe en el plan B: con foto detras estorbaria. */ .hero[data-hero='tipografico'] .hero__marco { position: absolute; inset: clamp(0.7rem, 2.2vw, 2.2rem); /* el borde superior tiene que librar el marco fijo, si no queda cortado por debajo del velo del logo */ top: clamp(4.6rem, 11vh, 7rem); z-index: 0; pointer-events: none; border: 1px solid var(--oro-claro); opacity: 0.55; } .hero[data-hero='tipografico'] .hero__marco::before { /* linea fantasma interior */ content: ''; position: absolute; inset: 6px; border: 1px solid var(--hairline); } /* Esquineros: dos trazos cortos que engrosan solo las esquinas. */ .hero[data-hero='tipografico'] .hero__marco::after { content: ''; position: absolute; inset: -1px; background: linear-gradient(var(--oro-viejo), var(--oro-viejo)) left top / 1px 2.2rem no-repeat, linear-gradient(var(--oro-viejo), var(--oro-viejo)) left top / 2.2rem 1px no-repeat, linear-gradient(var(--oro-viejo), var(--oro-viejo)) right top / 1px 2.2rem no-repeat, linear-gradient(var(--oro-viejo), var(--oro-viejo)) right top / 2.2rem 1px no-repeat, linear-gradient(var(--oro-viejo), var(--oro-viejo)) left bottom / 1px 2.2rem no-repeat, linear-gradient(var(--oro-viejo), var(--oro-viejo)) left bottom / 2.2rem 1px no-repeat, linear-gradient(var(--oro-viejo), var(--oro-viejo)) right bottom / 1px 2.2rem no-repeat, linear-gradient(var(--oro-viejo), var(--oro-viejo)) right bottom / 2.2rem 1px no-repeat; } .hero[data-hero='foto'] .hero__marco { display: none; } /* Con foto: texto anclado abajo sobre la imagen, auras retiradas y el velo marfil haciendo su trabajo de siempre. */ .hero[data-hero='foto'] { justify-content: flex-end; } .hero[data-hero='foto'] .hero__auras { display: none; } .hero__foto, .hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__foto img { object-fit: cover; object-position: center 32%; /* tratada a la paleta en el navegador: si el JPG llega sin tratar, igual aterriza en el marfil/oro sin pelearse con el resto */ filter: saturate(0.9) contrast(1.02); } /* Fallback sin foto: auras. Nunca un hueco, nunca un placeholder gris. */ .hero__auras { position: absolute; inset: -12%; } /* Blur alto + paradas intermedias: sin eso el gradiente radial muestra anillos concentricos (banding) que se leen como error de render. */ .aura { position: absolute; border-radius: 50%; filter: blur(110px); will-change: transform; } .aura--1 { width: 62vmax; height: 62vmax; top: -20%; right: -14%; background: radial-gradient( circle, rgb(214 186 116 / 0.58) 0%, rgb(214 186 116 / 0.34) 34%, rgb(214 186 116 / 0.12) 58%, transparent 76% ); } .aura--2 { width: 52vmax; height: 52vmax; bottom: -24%; left: -16%; background: radial-gradient( circle, rgb(244 238 226 / 0.95) 0%, rgb(244 238 226 / 0.55) 40%, transparent 74% ); } /* Floracion de la derecha: sin foto, es lo que sostiene esa mitad del cuadro. */ .aura--3 { width: 44vmax; height: 44vmax; top: 18%; right: 6%; background: radial-gradient( circle, rgb(201 124 93 / 0.26) 0%, rgb(201 124 93 / 0.14) 38%, rgb(168 134 61 / 0.08) 62%, transparent 78% ); } /* Velo marfil: opaco abajo, translucido arriba. Deja respirar el texto. */ .hero__velo { position: absolute; inset: 0; background: linear-gradient( to top, var(--marfil) 0%, rgb(253 252 247 / 0.94) 22%, rgb(253 252 247 / 0.62) 52%, rgb(253 252 247 / 0.28) 100% ); } .hero__texto { position: relative; z-index: 1; display: grid; gap: clamp(0.9rem, 1.8vh, 1.5rem); align-content: end; justify-items: start; } .hero__titular { font-size: var(--t-hero); line-height: 0.88; letter-spacing: -0.028em; /* medida en em del propio display: fuerza el titular a 2 lineas, no a una columna de palabras sueltas */ max-width: 4.6em; } .hero__sub { max-width: 40ch; color: var(--tinta-70); font-size: clamp(1rem, 1.15vw, 1.2rem); } .hero__acciones { display: flex; flex-wrap: wrap; align-items: center; /* si no, el flex estira los botones a bloques */ gap: 0.8rem; margin-top: 0.7rem; } /* Anclada al pie del hero. Antes iba en el flujo y a 390 quedaba 1px por debajo del fold: la fecha de la feria no se veia NUNCA en un telefono. Absoluta, entra a cualquier alto de viewport. */ .hero__feria { position: absolute; z-index: 1; left: var(--borde); right: var(--borde); bottom: clamp(1.6rem, 4vh, 3rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline); font-size: 0.9rem; color: var(--tinta-70); } /* ---------- Botones ---------- */ .boton { display: inline-block; padding: 0.95em 1.9em; line-height: 1.15; font-size: var(--t-rotulo); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-rotulo-corto); text-indent: var(--ls-rotulo-corto); transition: background-color 0.45s var(--ease-sobrio), color 0.45s var(--ease-sobrio), border-color 0.45s var(--ease-sobrio); } .boton--solido { background: var(--oro-profundo); color: var(--marfil); border: 1px solid var(--oro-profundo); } .boton--solido:hover { background: var(--oro-viejo); border-color: var(--oro-viejo); } .boton--linea { border: 1px solid var(--hairline); color: var(--oro-profundo); } .boton--linea:hover { border-color: var(--oro-viejo); color: var(--oro-viejo); } /* ══════════════════ Estructura comun de seccion ══════════════════ */ main > section { position: relative; z-index: 2; padding: var(--seccion) var(--borde); /* El marco es fijo: sin esto, cualquier salto de ancla (#perfil, #colecciones) deja el rotulo de la seccion debajo del logo. */ scroll-margin-top: clamp(4.5rem, 11vh, 7rem); } .seccion__cabeza { display: grid; gap: 1.1rem; max-width: var(--medida); margin-bottom: clamp(3rem, 7vh, 5.5rem); } .seccion__num { color: var(--tinta-70); } .seccion__titulo { font-size: var(--t-h1); } .seccion__intro { color: var(--tinta-70); max-width: 48ch; } /* ══════════════════ MANIFIESTO ══════════════════ */ .manifiesto { display: grid; gap: clamp(1.5rem, 4vh, 2.6rem); justify-items: start; text-align: left; } .manifiesto__texto { display: grid; gap: 0.1em; font-family: var(--display); font-size: var(--t-h1); font-weight: 300; line-height: 1.02; color: var(--oro-profundo); max-width: 18ch; } .manifiesto__texto .linea { display: block; } .manifiesto__pie { color: var(--tinta-70); max-width: 40ch; } /* ══════════════════ COLECCIONES ══════════════════ */ .coleccion-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); /* stretch, no start: con bordes visibles y contenidos de largo muy distinto, los bajos desparejos se ven descuidados */ align-items: stretch; } .coleccion { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 0.85rem; padding: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 2.4vw, 2.2rem); background: var(--marfil); border: 1px solid var(--hairline); } .coleccion--destacada { background: var(--pergamino); border-color: var(--oro-claro); } .coleccion__badge { position: absolute; top: 0; left: clamp(1.5rem, 2.4vw, 2.2rem); transform: translateY(-50%); padding: 0.45em 1.1em; background: var(--terracota); color: var(--marfil); font-size: 0.6rem; font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-rotulo-corto); text-indent: var(--ls-rotulo-corto); } .coleccion__filete { width: 7.5rem; margin-bottom: 0.2rem; } .coleccion__nombre { font-size: var(--t-h3); } .coleccion__sub { color: var(--tinta-70); font-size: 1.15rem; line-height: 1.3; } .coleccion__precio { display: grid; gap: 0.35rem; margin: 0.7rem 0 0.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); } .coleccion__precio strong { font-family: var(--display); font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--oro-profundo); } .coleccion__lista { display: grid; gap: 0.42rem; margin: 0; padding: 0; list-style: none; color: var(--tinta-70); font-size: 0.94rem; line-height: 1.45; } .coleccion__lista li { padding-left: 1.1rem; position: relative; } .coleccion__lista li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; background: var(--oro-claro); transform: rotate(45deg); } .coleccion__flores { display: grid; gap: 0.35rem; margin-top: 0.7rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline); color: var(--tinta-70); font-size: 0.88rem; line-height: 1.45; } .colecciones__nota { margin-top: clamp(2.2rem, 5vh, 3.4rem); max-width: 52ch; color: var(--tinta-70); font-size: 0.92rem; } /* ══════════════════ PERFIL / QUIZ ══════════════════ */ .quiz { min-height: 22rem; } .quiz__aviso { padding: 1.4rem; border: 1px solid var(--hairline); color: var(--tinta-70); } /* ══════════════════ GALERIA ══════════════════ */ .galeria__grid { display: grid; gap: clamp(0.8rem, 1.6vw, 1.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } /* Sin fotos no se muestra un grid vacio: se oculta la seccion completa. */ .galeria[hidden] { display: none; } /* ══════════════════ PROCESO ══════════════════ */ .proceso__lista { display: grid; gap: clamp(2rem, 4vw, 3.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; list-style: none; } .paso { display: grid; gap: 0.7rem; align-content: start; padding-top: 1.4rem; border-top: 1px solid var(--hairline); } .paso__num { color: var(--tinta-70); } .paso__titulo { font-size: var(--t-h3); } .paso p { color: var(--tinta-70); font-size: 0.95rem; } /* ══════════════════ TAMBIEN HACEMOS ══════════════════ */ .tambien { display: grid; gap: clamp(1.6rem, 3.5vh, 2.6rem); justify-items: center; text-align: center; background: var(--pergamino); } .tambien__claim { font-size: var(--t-h2); color: var(--oro-profundo); line-height: 1.05; } .tambien__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.2rem; margin: 0; padding: 0; list-style: none; font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: var(--ls-rotulo-corto); color: var(--tinta-70); } .tambien__b2b { max-width: 46ch; color: var(--tinta-70); font-size: 0.95rem; } /* ══════════════════ CIERRE ══════════════════ */ .cierre { display: grid; gap: clamp(1.3rem, 3vh, 2.2rem); justify-items: center; text-align: center; } /* Es el remate de la pagina, no un icono: necesita presencia. */ .cierre__rosa { width: clamp(9.5rem, 19vw, 16rem); aspect-ratio: 1; margin-bottom: 0.2rem; } .cierre__titular { font-size: var(--t-h1); } .cierre__frase { font-size: clamp(1.2rem, 1.9vw, 1.6rem); color: var(--tinta-70); /* 26ch partia la frase en 3 lineas cortas centradas: se leia como poema mal maquetado, no como frase de marca */ max-width: 36ch; } .cierre__datos { display: grid; gap: 0.9rem; justify-items: center; margin: 0.8rem 0 0.4rem; } .cierre__tel { font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 300; letter-spacing: 0.01em; color: var(--oro-profundo); transition: color 0.4s var(--ease-sobrio); } .cierre__tel:hover { color: var(--oro-viejo); } .cierre__dir { font-style: normal; font-size: 0.92rem; line-height: 1.7; color: var(--tinta-70); } /* ══════════════════ PIE ══════════════════ */ .pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 2.4rem var(--borde); border-top: 1px solid var(--hairline); font-size: 0.82rem; color: var(--tinta-70); } .pie__marca { color: var(--oro-texto); } /* ---------- Movil ---------- */ @media (max-width: 640px) { .hero__texto { max-width: none; } /* El letterspacing de rotulo a 0.38em es lo que partia el eyebrow. */ .hero .rotulo { letter-spacing: 0.26em; text-indent: 0.26em; } .tambien__lista { flex-direction: column; gap: 0.5rem; } }