/* ============================================================ Central — clon estructural (plantilla de demostración) Paleta: bone / off-white con tinta casi negra (estilo minimalista) ============================================================ */ /* ------------------------------------------------------------ TIPOGRAFÍA — PP Editorial Sans (Pangram Pangram) NOTA DE LICENCIA: los archivos provistos son "Personal Use Only" (Befonts). Para el sitio publicado (uso comercial) se necesita la licencia comercial de Pangram Pangram. Rangos de peso: 200 = Ultralight · 300–600 = Medium · 700–900 = Ultrabold ------------------------------------------------------------ */ @font-face { font-family: "PP Editorial Sans"; src: url("assets/fonts/PPEditorialSans-Ultralight.woff2") format("woff2"); font-weight: 100 250; font-style: normal; font-display: swap; } @font-face { font-family: "PP Editorial Sans"; src: url("assets/fonts/PPEditorialSans-UltralightItalic.woff2") format("woff2"); font-weight: 100 250; font-style: italic; font-display: swap; } @font-face { font-family: "PP Editorial Sans"; src: url("assets/fonts/PPEditorialSans-Medium.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; } @font-face { font-family: "PP Editorial Sans"; src: url("assets/fonts/PPEditorialSans-Ultrabold.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; } @font-face { font-family: "PP Editorial Sans"; src: url("assets/fonts/PPEditorialSans-UltraboldItalic.woff2") format("woff2"); font-weight: 700 900; font-style: italic; font-display: swap; } /* PP Editorial New (serif) — usada en cursiva ultralight para los titulares tipo "lead" (framer-18ykh1x). */ @font-face { font-family: "PP Editorial New"; src: url("assets/fonts/PPEditorialNew-Ultralight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "PP Editorial New"; src: url("assets/fonts/PPEditorialNew-UltralightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: "PP Editorial New"; src: url("assets/fonts/PPEditorialNew-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PP Editorial New"; src: url("assets/fonts/PPEditorialNew-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } :root { --bg: #f2f2f2; /* fondo */ --bg-2: #ece8df; /* tono ligeramente más oscuro para bloques */ --ink: #1b1916; /* tinta casi negra */ --ink-soft: #5c574d; /* texto secundario */ --line: #d8d2c5; /* líneas/divisores */ --accent: #1b1916; --serif: "PP Editorial Sans", Georgia, serif; --sans: "PP Editorial Sans", "Helvetica Neue", Arial, sans-serif; --maxw: 1240px; --ph: #ddd7ca; /* placeholder de imagen */ } * { margin: 0; padding: 0; box-sizing: border-box; } /* Fondo del documento oscuro: la zona de rebote/barra inferior de iOS (abajo del todo) queda como el footer, en vez de mostrar blanco. El contenido claro lo cubre el , así que no cambia. */ html { scroll-behavior: smooth; background-color: rgb(34, 34, 34); } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; } /* ---------- placeholders de imagen ---------- */ [data-ph] { position: relative; background: var(--ph); background-image: linear-gradient(135deg, rgba(0,0,0,.03) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.03) 50%, rgba(0,0,0,.03) 75%, transparent 75%); background-size: 22px 22px; } [data-ph]::after { content: attr(data-ph); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,0,0,.32); } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .4s ease, box-shadow .4s ease; } .nav__inner { width: 100%; padding: 32px; display: flex; align-items: center; justify-content: space-between; transition: padding .4s ease; } /* Estado scrolled: el nav sigue transparente (igual que Central); solo cambia el color del texto. La altura/padding no varían. */ .nav.is-scrolled { background: transparent; } .nav__logo { display: inline-flex; align-items: center; text-decoration: none; color: rgb(242, 242, 242); transition: color .4s ease; } .nav__logo-svg { display: block; height: 32px; width: auto; fill: currentColor; } .nav__links { display: flex; align-items: center; gap: 28px; } .nav__links a { text-decoration: none; color: rgb(242, 242, 242); font-family: var(--sans); font-weight: 400; font-size: 10px; line-height: 14.4px; letter-spacing: 1.5px; text-transform: uppercase; position: relative; transition: color .4s ease; } .nav__links a { transition: color .4s ease, opacity .3s ease; } .nav__links a:hover { opacity: .6; } .nav__lang-globe { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; background: none; border: none; cursor: pointer; color: rgb(242, 242, 242); transition: color .4s ease, opacity .3s ease; } .nav__lang-globe:hover { opacity: .65; } .nav__lang-globe svg { display: block; width: 18px; height: 18px; } .nav__lang-text { display: none; } /* "ESP" solo se muestra en el menú móvil */ /* Selector de idioma: desplegable con las dos opciones (✓ en la activa) */ .nav__lang { position: relative; display: inline-flex; align-items: center; } .nav__lang-menu { position: absolute; top: calc(100% + 12px); right: 0; display: none; flex-direction: column; min-width: 88px; background: rgb(242, 242, 242); border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: 6px 0; z-index: 200; } .nav__lang.is-open .nav__lang-menu { display: flex; } .nav__lang-opt { position: relative; background: none; border: none; cursor: pointer; font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgb(34, 34, 34); text-align: left; padding: 8px 18px 8px 30px; transition: opacity .2s ease; } .nav__lang-opt:hover { opacity: .55; } .nav__lang-opt.is-active::before { content: "✓"; position: absolute; left: 13px; } /* Estado con scroll: fondo claro → texto oscuro para legibilidad */ .nav.is-scrolled .nav__logo, .nav.is-scrolled .nav__links a, .nav.is-scrolled .nav__lang-globe { color: rgb(34, 34, 34); } .nav.is-scrolled .nav__burger span { background: rgb(34, 34, 34); } .nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; } .nav__burger span { width: 24px; height: 1.5px; background: rgb(242, 242, 242); transition: .3s; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: 100vh; min-height: 620px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .hero__split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; } .hero__half { position: relative; overflow: hidden; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero__overlay { position: absolute; inset: 0; background: transparent; pointer-events: none; } /* Etiquetas de las esquinas inferiores del hero (dirección / Instagram) */ .hero__address, .hero__ig { position: absolute; bottom: 32px; z-index: 2; font-family: var(--sans); font-weight: 400; font-size: 10px; line-height: 14.4px; letter-spacing: 2px; text-transform: uppercase; color: rgb(242, 242, 242); text-decoration: none; } .hero__address { left: 32px; max-width: 60vw; } .hero__ig { right: 32px; transition: opacity .3s ease; } .hero__ig:hover { opacity: .65; } .addr-br { display: none; } /* salto de la dirección: oculto en escritorio, visible en móvil */ .hero__content { position: relative; z-index: 2; color: #f6f3ec; padding: 0 24px; } .hero__eyebrow { font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; margin-bottom: 26px; opacity: .9; } .hero__title { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 6.5vw, 92px); line-height: 1.05; letter-spacing: 0.01em; } .hero__sub { margin-top: 26px; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: 0.04em; font-weight: 300; opacity: .92; } /* ============================================================ SECCIÓN VERTICAL (réplica EXACTA de framer-b1mdq4) grid-template-columns: repeat(3, minmax(50px, 1fr)) (3 columnas fluidas) grid-template-rows: repeat(2, min-content) + auto-rows min-content gap 24px · padding 72px · centrado · tinta rgb(34,34,34) ============================================================ */ .vrt { display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-template-rows: repeat(2, min-content); grid-auto-rows: min-content; justify-content: center; align-items: start; gap: 40px 24px; /* huecos pequeños; la altura la crea el contenido apilado */ padding: 72px 72px 236px; /* más aire abajo antes del footer, como el original (~208px) */ background: var(--bg); color: rgb(34, 34, 34); } .vrt--span3 { grid-column: 1 / -1; } /* Intro centrado (Ultralight 28/40) */ .vrt__intro { font-family: var(--sans); font-weight: 200; font-size: 28px; line-height: 40px; text-align: center; text-transform: uppercase; color: rgb(34, 34, 34); } /* Lead = framer-18ykh1x: título 4 líneas (343px) + párrafo (~318px), flex column alineado a la izquierda */ .vrt__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; /* sin margen extra: el lead arranca justo donde acaba el video de arriba, igual que Central ("En nuestra mesa..." pegado al borde inferior de la imagen) */ } .vrt__lead h1 { max-width: 343px; font-family: "PP Editorial New", Georgia, serif; font-weight: 200; font-style: italic; font-size: 32px; line-height: 40px; text-align: left; margin-bottom: 0; } .vrt__lead p { max-width: 318px; margin-left: 100px; } /* párrafo indentado a la derecha, como el original */ /* Cuerpo justificado (Ultralight 14/20) */ .vrt__lead p, .vrt__body { font-family: var(--sans); font-weight: 200; font-size: 14px; line-height: 20px; text-align: justify; color: rgb(34, 34, 34); } .vrt__body { align-self: start; } /* Párrafos a un lado del video: centrados verticalmente con la imagen */ .vrt__body.vrt--c3, .vrt__block.vrt--c3 { align-self: center; } /* Colocación por columnas (spine central de videos + textos a los lados) */ .vrt--c1 { grid-column: 1; } .vrt--c2 { grid-column: 2; } .vrt--c3 { grid-column: 3; } /* Bloque de texto (columna izq/der) */ .vrt__block { align-self: start; display: flex; flex-direction: column; gap: 14px; } /* Último bloque (columna derecha continua): título y enlace a la derecha, párrafos justificados ocupando el ancho de la columna — igual que INVESTIGACIÓN. */ .vrt__block.vrt__block--end { align-self: start; } /* texto arriba; el título queda cerca del video de la fila anterior */ .vrt__block--end .vrt__h5 { text-align: right; margin-bottom: 49px; } /* aire bajo el título, como INVESTIGACIÓN */ .vrt__block--end .vrt__link { align-self: flex-end; } /* El video del último bloque baja para dejar aire respecto al video anterior */ .vrt__video--low { align-self: start; margin-top: 208px; } /* Etiqueta-enlace pequeña (Medium 10/13 · ls 1.5 · rgb(51,51,51)), subrayada con línea de 1px del ancho del texto, centrada verticalmente con el video de su fila — igual que EXPERIENCIAS / RESERVAS en el original. */ .vrt__label { align-self: start; /* pegado a la parte de arriba del video */ justify-self: center; /* centrado en el espacio vacío de su columna */ display: inline-block; width: max-content; font-family: var(--sans); font-weight: 500; font-size: 10px; line-height: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: rgb(51, 51, 51); text-decoration: none; border-bottom: 1px solid rgb(51, 51, 51); padding-bottom: 6px; transition: opacity .3s ease; } .vrt__label:hover { opacity: .6; } /* Enlace pequeño en mayúsculas (Medium 10 · ls 1.5) */ .vrt__link { align-self: start; font-family: var(--sans); font-weight: 500; font-size: 10px; line-height: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: rgb(34, 34, 34); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: opacity .3s ease; } .vrt__link:hover { opacity: .6; } /* Subtítulo h5 (PP Editorial New cursiva 16/18 · ls .5), igual que "CENTRAL" en el original */ .vrt__h5 { font-family: "PP Editorial New", Georgia, serif; font-weight: 200; font-style: italic; font-size: 16px; line-height: 18px; letter-spacing: 0.5px; text-align: left; text-transform: uppercase; color: rgb(34, 34, 34); } /* Columna pequeña (izquierda) con su contenido centrado vertical */ .vrt__col { align-self: start; display: flex; flex-direction: column; justify-content: center; gap: 12px; } /* CTA grande (PP Editorial New cursiva 36 · ls 10 · derecha), igual que "MATER" en el original */ .vrt__cta { align-self: center; justify-self: end; font-family: "PP Editorial New", Georgia, serif; font-weight: 200; font-style: italic; font-size: 36px; line-height: 43.2px; letter-spacing: 10px; text-align: right; color: rgb(34, 34, 34); text-decoration: none; transition: opacity .3s ease; } .vrt__cta:hover { opacity: .6; } /* Bloques de video (cuadrados, columna central) */ .vrt__video { width: 280px; height: 280px; max-width: 100%; justify-self: center; align-self: center; overflow: hidden; /* recorta el video que sobresale por el zoom */ } /* El