/* ============================================================ HOTEL PRÍNCIPE — Hoja de Estilos Principal Paleta corporativa: - Marrón roble fuerte, marrón/vinotinto mates - Fondo beige con texturas tipo pared - Dorado mate como acento ============================================================ */ :root { /* ---------------------------------------------------------- Paleta REAL del Hotel Príncipe, medida de las fotos de las instalaciones: crema de pared, greige de terrazo/columnas, madera miel del artesonado, vinotinto del Salón, teal de la piscina y dorado del logo. Base clara y aireada. ---------------------------------------------------------- */ /* Maderas cálidas (techo artesonado, listones) */ --roble-oscuro: #3E2B23; /* roble muy fuerte (madera/acentos oscuros) */ --roble: #5A4636; /* madera media */ --madera: #8C7864; /* caramelo real del artesonado */ --madera-claro: #A88F76; /* Vinotinto (pared del Salón Crepúsculo) */ --vinotinto: #6E3B3B; /* vinotinto mate */ --vinotinto-osc: #552E2E; /* Greige / piedra (piso de terrazo, columnas) — NUEVO, real */ --greige: #8C8C7E; --greige-claro: #B7B4A6; --greige-osc: #565349; /* Teal de la piscina — NUEVO, acento fresco real */ --teal: #4E8E90; --teal-osc: #356E70; /* Cremas de pared (base clara real) */ --beige: #F3EDE1; /* fondo tipo pared */ --beige-claro: #F8F3E9; --crema: #FCF9F2; /* Dorado del logo (corona ★★★★) */ --dorado: #B08D57; /* dorado mate */ --dorado-claro: #C9AC7C; /* Tinta / texto */ --tinta: #33302B; /* texto principal */ --tinta-suave: #6C645A; /* Tipografía — Sistema: Cormorant Garamond (títulos/decorativos) + Inter (funcional) */ --font-display: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif; --font-serif: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Métricas */ --container: 1180px; --radius: 6px; --shadow-soft: 0 18px 45px -18px rgba(62, 43, 35, 0.35); --transition: all .35s cubic-bezier(.25, .8, .3, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* El recorte horizontal va en la RAÍZ (html), no en el body: html es el contenedor de scroll del viewport, así que frena el paneo lateral en iOS/Android reales SIN romper el position:sticky del portal (que se ancla al viewport). El body se deja sin overflow-x para que no se convierta en un segundo contenedor de scroll. */ overflow-x: hidden; } body { font-family: var(--font-sans); font-weight: 400; color: var(--tinta); background-color: var(--beige); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Sin overflow-x aquí a propósito: el recorte horizontal se hace en (ver arriba). Poner overflow-x en el body lo volvería contenedor de scroll y rompería el position:sticky del portal. */ } /* Textura de pared (ruido sutil) aplicada al fondo global */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.22 0 0 0 0 0.17 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .container { width: min(var(--container), 92%); margin-inline: auto; position: relative; z-index: 1; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--roble-oscuro); color: var(--crema); padding: .6rem 1.2rem; z-index: 200; } .skip-link:focus { left: 0; } /* ============================================================ BOTONES ============================================================ */ .btn { display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; padding: 1.05rem 2.6rem; border: 1px solid transparent; cursor: pointer; transition: var(--transition); position: relative; } .btn--gold { background: linear-gradient(135deg, var(--dorado-claro) 0%, var(--dorado) 55%, #9c7a47 100%); color: #fff; border-color: rgba(120, 92, 52, .5); box-shadow: 0 12px 28px -12px rgba(176, 141, 87, .65), inset 0 1px 0 rgba(255, 255, 255, .22); } .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(176, 141, 87, .8), inset 0 1px 0 rgba(255, 255, 255, .3); } .btn--ghost { border-color: rgba(251, 247, 238, .5); color: var(--crema); background: transparent; } .btn--ghost:hover { border-color: var(--dorado-claro); color: var(--dorado-claro); transform: translateY(-3px); } .btn--full { width: 100%; text-align: center; } /* ============================================================ HEADER / NAVEGACIÓN ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.1rem 0; transition: var(--transition); background: linear-gradient(180deg, rgba(30, 20, 15, .55), transparent); } .site-header.scrolled { background: rgba(62, 43, 35, .96); backdrop-filter: blur(12px); padding: .6rem 0; box-shadow: 0 8px 30px -12px rgba(0, 0, 0, .5); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav__brand { display: flex; align-items: center; gap: .7rem; color: var(--crema); } .nav__brand-crown { width: 34px; color: var(--dorado-claro); display: inline-flex; } .nav__brand-crown svg { width: 100%; height: auto; } .nav__brand-text { display: flex; flex-direction: column; line-height: 1.15; } .nav__brand-text strong { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: .04em; } .nav__brand-text small { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dorado-claro); } .nav__menu { display: flex; align-items: center; gap: 1.6rem; } .nav__link { font-size: .78rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: rgba(251, 247, 238, .85); padding: .4rem 0; position: relative; transition: var(--transition); } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--dorado-claro); transition: width .35s ease; } .nav__link:hover { color: var(--dorado-claro); } .nav__link:hover::after { width: 100%; } .nav__link--cta { border: 1px solid var(--dorado); padding: .55rem 1.3rem; color: var(--dorado-claro); } .nav__link--cta:hover { background: var(--dorado); color: var(--crema); } .nav__link--cta::after { display: none; } /* ---------- Menú con grupos desplegables ---------- */ .nav__group { position: relative; } .nav__group-toggle { font-family: inherit; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; } .nav__caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .3s ease; opacity: .75; } .nav__submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 216px; background: rgba(46, 32, 25, .98); backdrop-filter: blur(12px); border-top: 2px solid var(--dorado); box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .6); padding: .5rem 0; opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility .3s; z-index: 120; } .nav__group:hover .nav__submenu, .nav__group:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav__group:hover .nav__caret, .nav__group:focus-within .nav__caret { transform: rotate(225deg) translate(-1px, -1px); } .nav__sublink { display: block; padding: .6rem 1.5rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(251, 247, 238, .82); white-space: nowrap; transition: var(--transition); } .nav__sublink:hover { color: var(--dorado-claro); background: rgba(255, 255, 255, .06); padding-left: 1.8rem; } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .5rem; z-index: 110; } .nav__toggle span { width: 26px; height: 2px; background: var(--crema); transition: var(--transition); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--crema); overflow: hidden; } .hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(110, 59, 59, .55) 0%, transparent 55%), radial-gradient(ellipse at 75% 80%, rgba(176, 141, 87, .25) 0%, transparent 50%), linear-gradient(160deg, #2E1F19 0%, var(--roble-oscuro) 45%, #4A3226 100%); } /* Foto real del lobby como fondo del hero (con scrim para legibilidad). */ .hero__bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .hero__bg-texture { position: absolute; inset: 0; opacity: .35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.05' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.69 0 0 0 0 0.55 0 0 0 0 0.34 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23w)'/%3E%3C/svg%3E"); } .hero__bg-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 18, 13, .58) 0%, rgba(28, 18, 13, .34) 42%, rgba(28, 18, 13, .66) 100%), radial-gradient(ellipse at center, transparent 32%, rgba(20, 12, 8, .6) 100%); } .hero__content { max-width: 860px; } .hero__pretitle { display: flex; align-items: center; justify-content: center; gap: 1.2rem; font-size: .78rem; letter-spacing: .38em; text-transform: uppercase; color: var(--dorado-claro); margin-bottom: 1.6rem; } .hero__pretitle .line { width: 55px; height: 1px; background: linear-gradient(90deg, transparent, var(--dorado)); } .hero__pretitle .line:last-child { background: linear-gradient(90deg, var(--dorado), transparent); } .hero__title { font-family: var(--font-display); font-size: clamp(2.7rem, 8vw, 5.6rem); font-weight: 600; letter-spacing: .03em; line-height: 1.08; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); } .hero__crown { width: 46px; margin: 1.4rem auto; color: var(--dorado); } .hero__crown svg { width: 100%; height: auto; } .hero__subtitle { font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: clamp(1.02rem, 2.1vw, 1.28rem); line-height: 1.6; letter-spacing: .01em; color: #FBF5EA; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); max-width: 640px; margin: 0 auto 2.6rem; } .hero__actions { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; } .hero__scroll { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); } .hero__scroll-line { display: block; width: 1px; height: 56px; background: linear-gradient(180deg, var(--dorado), transparent); animation: scrollPulse 2.2s ease-in-out infinite; } /* ============================================================ SECCIONES — base ============================================================ */ .section { padding: 6.5rem 0; position: relative; } .section--alt { background: var(--beige-claro); } .section--dark { background: radial-gradient(ellipse at 20% 10%, rgba(110, 59, 59, .4) 0%, transparent 55%), linear-gradient(165deg, #33231C 0%, var(--roble-oscuro) 60%, #452F24 100%); color: var(--crema); } .section__label { font-size: .74rem; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; color: var(--dorado); margin-bottom: .9rem; } .section__label::before { content: ''; display: inline-block; width: 34px; height: 1px; background: var(--dorado); vertical-align: middle; margin-right: .8rem; } .section__title { font-family: var(--font-serif); font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 600; line-height: 1.2; color: var(--roble-oscuro); margin-bottom: 1.4rem; max-width: 720px; } .section--dark .section__title, .section__head--light .section__title { color: var(--crema); } .section__head { text-align: center; max-width: 760px; margin: 0 auto 3.6rem; } /* Corona de marca sobre cada encabezado centrado (detalle de marca) */ .section__head::before { content: ''; display: block; width: 34px; height: 21px; margin: 0 auto 1.15rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20' fill='none'%3E%3Cpath d='M2 18h28M3 15l2-10 6 5 5-8 5 8 6-5 2 10H3z' stroke='%23B08D57' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .9; } .section__head .section__title { margin-inline: auto; } .section__head .section__label::before { display: none; } .section__head .section__label::after { content: ''; display: block; width: 34px; height: 1px; background: var(--dorado); margin: .7rem auto 0; } .section__intro { font-size: 1.14rem; line-height: 1.75; color: var(--tinta-suave); margin-bottom: 1.1rem; } .section__paragraph { font-size: 1.05rem; line-height: 1.85; color: #4A443C; /* más contraste para lectura larga */ margin-bottom: 1.15rem; } .section--dark .section__intro, .section--dark .section__paragraph, .section__head--light .section__intro { color: rgba(251, 247, 238, .84); } /* ============================================================ MARCOS DE IMAGEN Y PLACEHOLDERS ============================================================ */ .media-frame { position: relative; } .media-frame__border { position: absolute; inset: -14px; border: 1px solid var(--dorado); opacity: .55; transform: translate(14px, 14px); pointer-events: none; transition: var(--transition); } .media-frame:hover .media-frame__border { transform: translate(8px, 8px); } .media-frame iframe { width: 100%; height: 420px; border: 0; display: block; filter: sepia(.25) saturate(.85); } .media-placeholder { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1.2rem; position: relative; overflow: hidden; background: linear-gradient(145deg, var(--madera) 0%, var(--roble) 55%, var(--roble-oscuro) 100%); } .media-placeholder::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.008 0.06' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.67 0 0 0 0 0.49 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); opacity: .8; } .media-placeholder::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 25%, rgba(201, 172, 124, .28), transparent 60%); } /* Foto real dentro del marco: cubre el placeholder y su textura, conservando proporción, bordes y overlays decorativos del frame. Si la foto no existe, el helper media() no la imprime y se ve el degradado original (nada se desmejora). */ .media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; filter: saturate(1.04) contrast(1.02); transition: var(--transition); } /* Viñeta editorial uniforme sobre las fotos reales (no sobre placeholders) */ .media-placeholder:has(> .media-img)::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 60%, rgba(20, 13, 9, .30)); pointer-events: none; } .media-placeholder__year { font-family: var(--font-serif); font-size: 3rem; font-style: italic; color: rgba(201, 172, 124, .7); position: relative; z-index: 3; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); } .media-frame--tall .media-placeholder { aspect-ratio: 3 / 4; } /* Variantes tonales para diferenciar placeholders */ .media-placeholder--room-2 { background: linear-gradient(145deg, var(--vinotinto) 0%, var(--vinotinto-osc) 60%, var(--roble-oscuro) 100%); } .media-placeholder--room-3 { background: linear-gradient(145deg, #8A6A45 0%, var(--madera) 55%, var(--roble-oscuro) 100%); } .media-placeholder--restaurante { background: linear-gradient(160deg, var(--vinotinto) 0%, var(--roble) 65%, var(--roble-oscuro) 100%); } .media-placeholder--art-1 { background: linear-gradient(135deg, var(--vinotinto) 0%, var(--roble-oscuro) 100%); } .media-placeholder--art-2 { background: linear-gradient(135deg, var(--madera) 0%, var(--vinotinto-osc) 100%); } .media-placeholder--art-3 { background: linear-gradient(135deg, #8A6A45 0%, var(--roble) 100%); } .media-placeholder--art-4 { background: linear-gradient(135deg, var(--roble) 0%, var(--vinotinto) 100%); } .media-placeholder--art-5 { background: linear-gradient(135deg, var(--vinotinto-osc) 0%, var(--madera) 100%); } .media-placeholder--art-6 { background: linear-gradient(135deg, var(--roble-oscuro) 0%, #8A6A45 100%); } /* ============================================================ HISTORIA ============================================================ */ .historia__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4.5rem; align-items: center; } .historia__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 4.5rem; padding-top: 3rem; border-top: 1px solid rgba(176, 141, 87, .35); } .stat { text-align: center; } .stat__number { font-family: var(--font-serif); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600; color: var(--vinotinto); display: block; line-height: 1; } .stat__text { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); margin-top: .5rem; display: block; } /* ============================================================ GRIDS DE TARJETAS ============================================================ */ .cards-grid { display: grid; gap: 2rem; } .cards-grid--3 { grid-template-columns: repeat(3, 1fr); } /* ---------- Tarjetas de habitación ---------- */ .room-card { background: var(--crema); box-shadow: var(--shadow-soft); overflow: hidden; transition: var(--transition); border-bottom: 3px solid transparent; } .room-card:hover { transform: translateY(-10px); border-bottom-color: var(--dorado); box-shadow: 0 28px 60px -20px rgba(62, 43, 35, .45); } .room-card__media { position: relative; overflow: hidden; } .room-card__media .media-placeholder { aspect-ratio: 16 / 10; transition: transform .6s ease; } .room-card:hover .media-placeholder { transform: scale(1.06); } .room-card__badge { position: absolute; top: 1rem; right: 1rem; background: rgba(62, 43, 35, .85); color: var(--dorado-claro); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; padding: .35rem .9rem; backdrop-filter: blur(4px); } .room-card__body { padding: 1.8rem; } .room-card__name { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; color: var(--roble-oscuro); margin-bottom: .6rem; } .room-card__desc { font-size: .98rem; line-height: 1.65; color: var(--tinta-suave); margin-bottom: 1rem; } .room-card__amenities { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; } .room-card__amenities li { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--madera); border: 1px solid rgba(107, 74, 56, .3); padding: .25rem .7rem; border-radius: 20px; } .room-card__link, .event-card__link { font-size: .8rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--vinotinto); transition: var(--transition); } .room-card__link:hover { color: var(--dorado); letter-spacing: .22em; } /* ---------- Tarjetas de servicio ---------- */ .service-card { background: linear-gradient(180deg, #FCF9F2 0%, #F4EDDF 100%); padding: 2.7rem 1.9rem 2.4rem; text-align: center; border: 1px solid rgba(120, 92, 52, .16); border-radius: 6px; box-shadow: 0 16px 40px -24px rgba(62, 43, 35, .5); transition: var(--transition); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, var(--dorado-claro), var(--dorado)); transition: width .45s ease; } .service-card:hover { transform: translateY(-8px); border-color: rgba(176, 141, 87, .5); box-shadow: 0 28px 52px -24px rgba(62, 43, 35, .58); } .service-card:hover::before { width: 100%; } .service-card__name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--roble-oscuro); margin: 1rem 0 .5rem; } .service-card__text { font-size: .96rem; line-height: 1.6; color: var(--tinta-suave); } /* ---------- Iconos (círculo dorado con símbolo) ---------- */ .icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: none; border-radius: 50%; position: relative; background: linear-gradient(140deg, var(--dorado-claro) 0%, var(--dorado) 72%); box-shadow: 0 10px 22px -10px rgba(176, 141, 87, .7), inset 0 1px 0 rgba(255, 255, 255, .35); } .icon::before { font-family: var(--font-serif); font-size: 1.5rem; color: #fff; line-height: 1; } .icon--wifi::before { content: '≋'; } .icon--restaurant::before { content: '❧'; } .icon--event::before { content: '✦'; } .icon--parking::before { content: 'P'; font-weight: 600; } .icon--reception::before { content: '☏'; } .icon--gallery::before { content: '◫'; } .icon--palette::before { content: '❦'; } .icon--frame::before { content: '▣'; } .icon--music::before { content: '♪'; } /* ============================================================ ARTE & CULTURA ============================================================ */ .arte { background: radial-gradient(ellipse at 80% 15%, rgba(110, 59, 59, .5) 0%, transparent 50%), linear-gradient(170deg, #35251D 0%, var(--roble-oscuro) 55%, #3F2B21 100%); color: var(--crema); } .arte__texture { position: absolute; inset: 0; opacity: .3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.67 0 0 0 0 0.49 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)'/%3E%3C/svg%3E"); } .arte__features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-bottom: 4rem; text-align: center; } .arte-feature h3 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; margin: 1rem 0 .5rem; color: var(--dorado-claro); } .arte-feature p { font-size: .98rem; line-height: 1.65; color: rgba(251, 247, 238, .82); } .arte-feature .icon::before { color: #fff; } .arte__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .arte__item { position: relative; overflow: hidden; cursor: pointer; } .arte__item .media-placeholder { aspect-ratio: 1 / 1; transition: transform .7s ease, filter .7s ease; } .arte__item:hover .media-placeholder { transform: scale(1.08); filter: brightness(1.15); } .arte__item::after { content: ''; position: absolute; inset: 10px; z-index: 3; border: 1px solid rgba(201, 172, 124, .28); transition: var(--transition); pointer-events: none; } .arte__item:hover::after { inset: 8px; border-color: rgba(201, 172, 124, .75); } /* ============================================================ RESTAURANTE ============================================================ */ .restaurante__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4.5rem; align-items: center; } .restaurante__tags { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 2rem; } .restaurante__tags li { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vinotinto); border: 1px solid rgba(110, 59, 59, .35); padding: .35rem .95rem; border-radius: 20px; } .restaurante__horarios { border-top: 1px solid rgba(176, 141, 87, .35); padding-top: 1.6rem; max-width: 420px; } .horario { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .8rem; } .horario__dia { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--roble-oscuro); white-space: nowrap; } .horario__dots { flex: 1; border-bottom: 1px dotted rgba(107, 74, 56, .5); } .horario__hora { font-size: .88rem; color: var(--tinta-suave); white-space: nowrap; } /* ============================================================ EVENTOS ============================================================ */ .event-card { background: rgba(251, 247, 238, .04); border: 1px solid rgba(201, 172, 124, .25); padding: 2.6rem 2rem; text-align: center; transition: var(--transition); backdrop-filter: blur(2px); } .event-card:hover { transform: translateY(-8px); border-color: var(--dorado); background: rgba(251, 247, 238, .07); } .event-card__ornament { width: 40px; height: 1px; background: var(--dorado); margin: 0 auto 1.4rem; position: relative; } .event-card__ornament::before { content: '◆'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .55rem; color: var(--dorado); background: transparent; } .event-card__name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--dorado-claro); margin-bottom: .3rem; } .event-card__capacity { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(251, 247, 238, .6); margin-bottom: 1rem; } .event-card__text { font-size: .98rem; line-height: 1.65; color: rgba(251, 247, 238, .84); margin-bottom: 1.5rem; } .event-card__link { color: var(--dorado-claro); } .event-card__link:hover { color: var(--crema); letter-spacing: .22em; } /* ============================================================ TESTIMONIOS ============================================================ */ .testimonial { background: linear-gradient(180deg, #FCF9F2 0%, #F4EDDF 100%); padding: 2.8rem 2rem 2.3rem; border: 1px solid rgba(120, 92, 52, .16); border-radius: 6px; box-shadow: 0 16px 40px -24px rgba(62, 43, 35, .5); position: relative; transition: var(--transition); } .testimonial:hover { transform: translateY(-6px); border-color: rgba(176, 141, 87, .45); box-shadow: 0 28px 52px -24px rgba(62, 43, 35, .58); } .testimonial::before { content: '“'; position: absolute; top: 2px; left: 20px; font-family: var(--font-serif); font-size: 5rem; color: rgba(176, 141, 87, .32); line-height: 1; } .testimonial__stars { color: var(--dorado); letter-spacing: .2em; margin-bottom: 1rem; } .testimonial__text { font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; color: var(--tinta); margin-bottom: 1.4rem; } .testimonial__author cite { display: block; font-style: normal; font-weight: 500; color: var(--vinotinto); } .testimonial__author span { font-size: .8rem; color: var(--tinta-suave); } /* ============================================================ UBICACIÓN ============================================================ */ .ubicacion__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; } .ubicacion__direccion { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--vinotinto); margin: 1rem 0 1.8rem; } .ubicacion__puntos li { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid rgba(176, 141, 87, .25); } .ubicacion__punto-nombre { font-weight: 400; } .ubicacion__punto-distancia { font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dorado); } /* ============================================================ CONTACTO ============================================================ */ .contacto { overflow: hidden; } .contacto__texture { position: absolute; inset: 0; opacity: .25; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.67 0 0 0 0 0.49 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)'/%3E%3C/svg%3E"); } .contacto__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; } .contacto__datos { margin: 2rem 0; } .contacto__datos li { padding: 1rem 0; border-bottom: 1px solid rgba(201, 172, 124, .25); } .contacto__dato-label { display: block; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--dorado-claro); margin-bottom: .2rem; } .contacto__datos a, .contacto__datos span:not(.contacto__dato-label) { font-family: var(--font-serif); font-size: 1.15rem; color: var(--crema); transition: var(--transition); overflow-wrap: anywhere; } .contacto__datos a:hover { color: var(--dorado-claro); } .contacto__redes { display: flex; gap: 1rem; flex-wrap: wrap; } .contacto__red { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dorado-claro); border: 1px solid rgba(201, 172, 124, .4); padding: .5rem 1.2rem; transition: var(--transition); } .contacto__red:hover { background: var(--dorado); color: var(--crema); border-color: var(--dorado); } /* ---------- Formulario ---------- */ .contact-form { background: var(--crema); padding: 2.6rem 2.4rem; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .55); color: var(--tinta); } .contact-form__title { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; color: var(--roble-oscuro); text-align: center; margin-bottom: 1.8rem; } .contact-form__title::after { content: ''; display: block; width: 44px; height: 2px; background: var(--dorado); margin: .8rem auto 0; } .contact-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; } .contact-form__field { margin-bottom: 1.1rem; } .contact-form__field label { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--madera); margin-bottom: .35rem; } .contact-form__field input, .contact-form__field select, .contact-form__field textarea { width: 100%; /* min-width:0 evita que el ancho intrínseco de (picker de iOS/Safari) desborde su columna del grid en móvil. */ min-width: 0; max-width: 100%; font-family: var(--font-sans); font-size: .95rem; color: var(--tinta); background: var(--beige-claro); border: 1px solid rgba(107, 74, 56, .25); padding: .8rem 1rem; transition: var(--transition); border-radius: var(--radius); } .contact-form__field input:focus, .contact-form__field select:focus, .contact-form__field textarea:focus { outline: none; border-color: var(--dorado); box-shadow: 0 0 0 3px rgba(176, 141, 87, .18); background: #fff; } .contact-form__note { text-align: center; font-size: .8rem; color: var(--tinta-suave); margin-top: 1rem; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: #2A1D16; color: rgba(251, 247, 238, .75); padding-top: 4.5rem; position: relative; } .site-footer__ornament { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(500px, 80%); height: 1px; background: linear-gradient(90deg, transparent, var(--dorado), transparent); } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 3rem; padding-bottom: 3.5rem; } .site-footer__brand .nav__brand-crown { width: 40px; margin-bottom: .8rem; color: var(--dorado); } .site-footer h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--crema); margin-bottom: .8rem; } .site-footer h4 { font-size: .78rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--dorado-claro); margin-bottom: 1.2rem; } .site-footer p, .site-footer li { font-size: .9rem; } /* El email/dirección largos no deben ensanchar la columna (tracks 1fr = min-content): se parten y así no provocan desbordamiento horizontal. */ .site-footer__col { min-width: 0; } .site-footer p, .site-footer li, .site-footer a { overflow-wrap: anywhere; } .site-footer li { margin-bottom: .55rem; } .site-footer a { transition: var(--transition); } .site-footer a:hover { color: var(--dorado-claro); } .site-footer__bottom { border-top: 1px solid rgba(201, 172, 124, .15); padding: 1.4rem 0; text-align: center; } .site-footer__bottom p { font-size: .78rem; letter-spacing: .08em; color: rgba(251, 247, 238, .45); } .site-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .site-footer__legal { display: flex; gap: 1.4rem; flex-wrap: wrap; } .site-footer__legal li { margin-bottom: 0; } .site-footer__legal a { font-size: .74rem; letter-spacing: .1em; color: rgba(251, 247, 238, .55); } .site-footer__legal a:hover { color: var(--dorado-claro); } @media (max-width: 700px) { .site-footer__bottom-inner { justify-content: center; } } /* ============================================================ AVISO DE COOKIES ============================================================ */ .cookie-notice { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 150; width: min(880px, 94%); display: flex; align-items: center; gap: 1.8rem; background: rgba(42, 29, 22, .97); border: 1px solid rgba(201, 172, 124, .35); border-top: 3px solid var(--dorado); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); padding: 1.5rem 2rem; backdrop-filter: blur(8px); } /* IMPORTANTE: display:flex anularía el atributo [hidden] (mismo bug histórico del modal de museografía). No eliminar esta regla. */ .cookie-notice[hidden] { display: none; } .cookie-notice p { font-size: .95rem; color: rgba(251, 247, 238, .85); line-height: 1.65; } .cookie-notice a { color: var(--dorado-claro); border-bottom: 1px solid rgba(201, 172, 124, .5); } .cookie-notice a:hover { color: var(--crema); } .cookie-notice__btn { font-family: var(--font-sans); font-size: .8rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--crema); background: var(--dorado); border: none; padding: .95rem 2rem; cursor: pointer; white-space: nowrap; transition: var(--transition); } .cookie-notice__btn:hover { background: var(--dorado-claro); color: var(--roble-oscuro); } @media (max-width: 560px) { .cookie-notice { flex-direction: column; text-align: center; gap: .9rem; } /* Hero: evitar que el título/subtítulo rocen los bordes */ .hero__title { font-size: clamp(2rem, 8.5vw, 2.7rem); letter-spacing: .02em; } .hero__subtitle { font-size: 1rem; line-height: 1.55; } .hero__pretitle { font-size: .64rem; letter-spacing: .24em; gap: .7rem; } .hero__pretitle .line { width: 28px; } } /* ============================================================ MUSEOGRAFÍA (sección en la landing) ============================================================ */ .museografia__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4.5rem; align-items: center; } .museografia__cta { margin-top: 1.2rem; } .museografia__pasos { display: flex; flex-direction: column; gap: 1.6rem; } .paso { display: flex; gap: 1.4rem; align-items: flex-start; background: linear-gradient(180deg, #FCF9F2 0%, #F4EDDF 100%); padding: 1.7rem 1.9rem; border: 1px solid rgba(120, 92, 52, .14); border-left: 3px solid var(--dorado); border-radius: 6px; box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .5); transition: var(--transition); } .paso:hover { transform: translateX(8px); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .58); } .paso__numero { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 600; color: rgba(176, 141, 87, .55); line-height: 1; } .paso__titulo { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--roble-oscuro); margin-bottom: .25rem; } .paso__texto { font-size: .96rem; line-height: 1.6; color: var(--tinta-suave); } @media (max-width: 860px) { .museografia__grid { grid-template-columns: 1fr; gap: 3rem; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { /* En tablet el contenido cabe mejor: secciones menos altas. */ .section { padding: 5.25rem 0; } .cards-grid--3 { grid-template-columns: repeat(2, 1fr); } .arte__features { grid-template-columns: 1fr; gap: 2rem; } .arte__gallery { grid-template-columns: repeat(2, 1fr); } .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Las HABITACIONES son SIEMPRE el recorrido con scroll (suites); la cuadrícula de tarjetas se retira en todos los tamaños. En tablet/desktop es el recorrido pinned; en móvil, un carrusel horizontal deslizable (ver scrollytelling.css). El ancla #habitaciones cae justo en el recorrido, que va inmediatamente después. */ .habitaciones { display: none; } @media (max-width: 860px) { .historia__grid, .restaurante__grid, .ubicacion__grid, .contacto__grid { grid-template-columns: 1fr; gap: 3rem; } .historia__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } .stat { min-width: 0; } .stat__text { overflow-wrap: break-word; } .restaurante__media { order: -1; } /* Contenedor a ancho completo con padding en móvil (evita desbordes) */ .container { width: 100%; max-width: 100%; padding-inline: 1.25rem; } /* El marco dorado desplazado (.media-frame__border) sobresale 28px por la derecha; en una sola columna (imagen a todo el ancho) eso provocaba ~8px de desbordamiento horizontal. Se recoge el desplazamiento para que quede dentro del viewport, conservando el detalle decorativo. */ .media-frame__border { inset: -6px; transform: translate(6px, 6px); } /* Los grids de una columna no deben crecer por el min-content de imágenes */ .historia__grid, .restaurante__grid, .ubicacion__grid, .contacto__grid, .museografia__grid { grid-template-columns: minmax(0, 1fr); } /* Menú móvil */ .nav__toggle { display: flex; } .nav__menu { position: fixed; inset: 0; background: rgba(42, 29, 22, .98); flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.15rem; padding: 5.5rem 1.5rem 3rem; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .4s ease; z-index: 105; } .nav__menu.open { opacity: 1; visibility: visible; } .nav__link { font-size: 1rem; } /* Grupos: en móvil se muestran expandidos (sin desplegar) */ .nav__group { width: 100%; text-align: center; } .nav__group-toggle { width: 100%; justify-content: center; font-size: .78rem; color: var(--dorado); } .nav__caret { display: none; } .nav__submenu { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; background: none; border-top: none; box-shadow: none; backdrop-filter: none; display: flex; flex-direction: column; gap: .9rem; padding: .8rem 0 .2rem; } .nav__sublink { color: rgba(251, 247, 238, .78); font-size: .9rem; padding: 0; white-space: normal; } .nav__sublink:hover { padding-left: 0; background: none; } .nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle.open span:nth-child(2) { opacity: 0; } .nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (max-width: 560px) { .section { padding: 4.5rem 0; } .cards-grid--3 { grid-template-columns: 1fr; } /* Galería de arte: 2 columnas en móvil (evita 6 cuadros enormes apilados) */ .arte__gallery { grid-template-columns: repeat(2, 1fr); gap: .8rem; } .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } .hero__actions .btn { width: 100%; text-align: center; } .contact-form { padding: 2rem 1.4rem; } .media-frame__border { display: none; } } /* ============================================================ MEJORAS — Fotos reales de las instalaciones (banda de eventos, sección Piscina) ============================================================ */ /* --- Banda con foto del gran salón (sección Eventos, fondo oscuro) --- */ .eventos__feature { margin: 0 0 3.2rem; } .eventos__feature-media { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--radius); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); } .eventos__feature-media .media-img { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); } .eventos__feature:hover .media-img { transform: scale(1.04); } .eventos__feature-cap { margin-top: .9rem; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--dorado-claro); } /* --- Sección Piscina --- */ .piscina { background: var(--beige-claro); } .piscina__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6rem; align-items: stretch; } .piscina__main, .piscina__side figure { position: relative; overflow: hidden; border-radius: var(--radius); margin: 0; box-shadow: var(--shadow-soft); } .piscina__main { aspect-ratio: 4 / 3; height: 100%; } .piscina__side { display: flex; flex-direction: column; gap: 1.6rem; } .piscina__side figure { aspect-ratio: 16 / 10; flex: 1; } .piscina__main .media-img, .piscina__side .media-img { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); } .piscina__main:hover .media-img, .piscina__side figure:hover .media-img { transform: scale(1.05); } .piscina__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem 1.4rem; margin-top: 1.8rem; } .piscina__features li { position: relative; padding-left: 1.5rem; font-size: .96rem; color: var(--tinta-suave); } .piscina__features li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--dorado); box-shadow: 0 0 0 3px rgba(176, 141, 87, .16); } /* Tablet incluido: en 1.5fr/1fr la columna lateral (foto + features) quedaba muy estrecha y apretada. Se apila a una sola columna desde tablet hacia abajo. */ @media (max-width: 1024px) { .piscina__grid { grid-template-columns: 1fr; } .piscina__main { aspect-ratio: 16 / 10; } .eventos__feature-media { aspect-ratio: 16 / 9; } } /* ============================================================ SISTEMA TIPOGRÁFICO — HOTEL PRÍNCIPE Cormorant Garamond (títulos / decorativos) + Inter (funcional). Solo propiedades tipográficas (family, weight, style, spacing, line-height, transform, size). No toca colores ni layout. ============================================================ */ /* ---- 1. TÍTULOS Y TEXTOS DECORATIVOS → Cormorant ---- */ h1, h2, h3, h4, .hero__title, .section__title, .esencia__panel-titulo, .nav__brand-text strong, .site-footer__brand h3, .contact-form__title, .room-card__name, .suites__nombre, .event-card__name, .service-card__name, .paso__titulo, .arte-feature h3, .esencia__valor h4, .site-footer__col h4, blockquote, .testimonial__text { font-family: var(--font-serif); } /* h1 — título principal */ .hero__title { font-weight: 400; letter-spacing: .04em; line-height: 1.14; } /* h2 — títulos de sección */ .section__title { font-weight: 500; letter-spacing: .03em; line-height: 1.2; } /* nombres de habitaciones / sub-títulos decorativos */ .suites__nombre, .room-card__name, .event-card__name, .service-card__name, .paso__titulo, .esencia__panel-titulo, .arte-feature h3, .esencia__valor h4, .contact-form__title, .site-footer__brand h3, .site-footer__col h4 { font-weight: 500; letter-spacing: .03em; line-height: 1.2; } /* .nav-menu — enlaces del menú → Inter para máxima nitidez/legibilidad */ .nav__link, .nav__group-toggle, .nav__sublink { font-family: var(--font-sans); font-weight: 500; letter-spacing: .13em; text-transform: uppercase; } /* blockquote / testimonios */ blockquote, .testimonial__text { font-weight: 400; font-style: italic; letter-spacing: .02em; line-height: 1.6; } /* ---- 2. TEXTOS FUNCIONALES Y CUERPO → Inter ---- */ body, p, span, li, input, textarea, select, button, label, .section__intro, .section__paragraph, .room-card__desc, .service-card__text, .event-card__text, .arte-feature p, .paso__texto, .esencia__panel-texto, .esencia__valor p, .suites__desc, .contacto__dato-label, .site-footer__col li, .site-footer__col p, .site-footer__legal a, .site-footer__bottom p, .contact-form__note, .cookie-notice p { font-family: var(--font-sans); } /* p — párrafos y descripciones largas (400: bien notorio, no el 300 fino) */ p, .section__intro, .section__paragraph, .room-card__desc, .service-card__text, .event-card__text, .arte-feature p, .paso__texto, .esencia__panel-texto, .esencia__valor p, .suites__desc { font-weight: 400; line-height: 1.7; } /* .btn / CTA — botones de reserva */ .btn, .btn--gold, .nav__link--cta { font-family: var(--font-sans); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } /* formularios: campos y etiquetas */ input, textarea, select, .contact-form__field input, .contact-form__field textarea, .contact-form__field select { font-weight: 400; letter-spacing: .02em; } .contact-form label { font-weight: 400; letter-spacing: .02em; } /* footer: dirección, teléfono, enlaces legales */ .site-footer__col li, .site-footer__col p, .site-footer__legal a, .site-footer__bottom p { font-weight: 300; letter-spacing: .04em; } /* .contact-info — datos de contacto destacados */ .contacto__datos li a { font-weight: 700; letter-spacing: .02em; } /* .small-print — letra pequeña (nota del form, aviso de cookies) */ .contact-form__note, .cookie-notice p { font-weight: 300; letter-spacing: .04em; font-size: .8rem; } /* ---- 3. RESPONSIVE (solo texto) ---- */ @media (max-width: 768px) { .suites__nombre, .section__title { font-weight: 400; } p, .section__paragraph { line-height: 1.8; } }