/* ═══════════════════════════════════════════════════════════════ LANDING DE APARTAMENTO Misma estética que la home: Melodrama en titulares, Poppins en todo lo demás, fondo blanco y la foto como único color. Incluye el calendario de /reserva/ restilizado — el marcado lo genera calendar.js, aquí solo se le da forma. ═══════════════════════════════════════════════════════════════ */ :root { --display: "Melodrama", Georgia, serif; --body: "Poppins", system-ui, sans-serif; --tinta: #16150f; --e: cubic-bezier(.16,1,.3,1); /* Estas tres viven además en landing.css, pero esa hoja NO la cargan las fichas ni las páginas legales: ellas van con fuentes + apto (+ legal) y nada más. Al usarlas aquí sin declararlas, var() no resolvía y el fallo era silencioso: el pie se quedaba con fondo TRANSPARENTE sobre un hero position:sticky, así que la foto se veía a través y el texto del pie encima. Si se cambian, cambiarlas en los dos sitios. */ --night: oklch(20% 0.025 235); --estrella: #e8b024; --accent: oklch(45% 0.075 215); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #fff; color: var(--tinta); font-family: var(--body); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, dl, dd, figure { margin: 0; } ::selection { background: var(--tinta); color: #fff; } .eyebrow { font-size: .62rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(28,25,21,.45); } /* ── botones ── */ .b { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 15px 30px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-family: var(--body); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: transform .3s var(--e), background .3s, color .3s, border-color .3s; } .b:hover { transform: translateY(-2px); } .b--solid { background: var(--tinta); color: #fff; } .b--solid:hover { background: #2c2a20; } .b--ghost { background: none; color: var(--tinta); border-color: rgba(22,21,15,.28); } .b--ghost:hover { border-color: var(--tinta); background: rgba(22,21,15,.05); } /* ── CABECERA ── */ .tope { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(28,25,21,.1); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(20px,4vw,54px); } .tope__marca { display: inline-flex; align-items: center; gap: 12px; } .mark { width: 30px; height: 30px; flex: none; stroke-linejoin: round; } .tope__marca span { display: grid; gap: 2px; line-height: 1.15; font-weight: 500; font-size: .95rem; letter-spacing: -.035em; } .tope__marca i { font-style: normal; font-weight: 300; font-size: .52rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(28,25,21,.45); } .tope__nav { display: flex; gap: 26px; } .tope__nav a { position: relative; font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(28,25,21,.6); transition: color .3s; } .tope__nav a:hover, .tope__nav a[aria-current="page"] { color: var(--tinta); } .tope__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: currentColor; } .tope__cta { border: 1px solid rgba(28,25,21,.28); border-radius: 999px; padding: 11px 22px; font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; } .tope__cta:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); } /* ── MENÚ MÓVIL (mismo comportamiento que la home) ── */ .ham { display: none; width: 46px; height: 46px; padding: 0; margin-right: -8px; border: 0; background: none; cursor: pointer; place-items: center; align-content: center; gap: 6px; } .ham span { display: block; width: 22px; height: 1.5px; background: var(--tinta); border-radius: 2px; transition: transform .4s var(--e); } .ham[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); } .ham[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 60; background: var(--tinta); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 84px clamp(22px,6vw,40px) 34px; opacity: 0; visibility: hidden; pointer-events: none; } .menu.is-on { opacity: 1; visibility: visible; pointer-events: auto; } .menu__x { position: absolute; top: 14px; right: clamp(12px,4vw,24px); width: 52px; height: 52px; display: grid; place-items: center; border: 0; background: none; color: rgba(255,255,255,.6); cursor: pointer; transition: color .3s var(--e), transform .45s var(--e); } .menu__x:hover { color: #fff; transform: rotate(90deg); } .menu__nav { display: grid; justify-items: center; text-align: center; } .menu__nav a { position: relative; display: block; padding: 17px 0; font-family: var(--display); font-weight: 400; font-size: 1.65rem; letter-spacing: -.02em; color: #fff; } .menu__nav a { position: relative; } .menu__nav a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100%; height: 1px; background: #fff; transform: translateX(-50%) scaleX(0); transition: transform .5s var(--e); } .menu__nav a:hover::after, .menu__nav a:active::after { transform: translateX(-50%) scaleX(1); } .menu__pie { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; } .menu__cta { display: grid; place-items: center; min-height: 52px; border-radius: 999px; background: #fff; color: var(--tinta); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .menu__tel { text-align: center; min-height: 44px; display: grid; place-items: center; color: rgba(255,255,255,.6); font-size: .82rem; font-weight: 300; } body.menu-abierto { overflow: hidden; } /* entrada: sube con fundido, y apto.js garantiza el estado final a los 900 ms */ .menu.is-on .menu__nav a, .menu.is-on .menu__pie { animation: menuSube .72s both cubic-bezier(.22,1,.36,1); will-change: transform, opacity; } .menu.is-on .menu__nav a:nth-child(2) { animation-delay: .08s; } .menu.is-on .menu__nav a:nth-child(3) { animation-delay: .16s; } .menu.is-on .menu__nav a:nth-child(4) { animation-delay: .24s; } .menu.is-on .menu__pie { animation-delay: .34s; } @keyframes menuSube { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: none } } .menu.anim-ok .menu__nav a, .menu.anim-ok .menu__pie { animation: none !important; opacity: 1 !important; transform: none !important; } /* ── 01 · PORTADA ── */ .apto { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(28px,4vw,64px); max-width: 1360px; margin-inline: auto; padding: clamp(40px,7vh,84px) clamp(20px,4vw,54px); } .apto__foto { overflow: hidden; } .apto__foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 1.2s var(--e); } .apto__foto:hover img { transform: scale(1.04); } .apto__h { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem,4.6vw,3.8rem); line-height: 1.04; letter-spacing: -.018em; margin: 14px 0 18px; } .apto__p { font-size: .98rem; font-weight: 300; line-height: 1.8; color: #4a463c; max-width: 44ch; } .apto__specs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 28px 0 26px; border-top: 1px solid rgba(28,25,21,.14); border-bottom: 1px solid rgba(28,25,21,.14); } .apto__specs > div { padding: 15px 10px 15px 0; } .apto__specs > div + div { padding-left: 16px; border-left: 1px solid rgba(28,25,21,.1); } .apto__specs dt { font-size: .56rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(28,25,21,.45); } .apto__specs dd { margin-top: 5px; font-weight: 400; font-size: 1.55rem; letter-spacing: -.02em; } .apto__acts { display: flex; flex-wrap: wrap; gap: 11px; } /* ── 02 · GALERÍA ── */ .gal { max-width: 1360px; margin-inline: auto; padding: clamp(46px,8vh,100px) clamp(20px,4vw,54px); } .gal__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem,3.8vw,3.1rem); line-height: 1.06; letter-spacing: -.015em; margin: 12px 0 clamp(28px,4vh,44px); } .gal__rej { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(8px,1.1vw,14px); } .gal__i { padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; display: block; } .gal__i--gr { grid-column: span 2; grid-row: span 2; } .gal__i img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; filter: saturate(.95); transition: transform .8s var(--e), filter .5s; } .gal__i--gr img { aspect-ratio: 1; } .gal__i:hover img { transform: scale(1.05); filter: saturate(1.05); } .gal__i:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; } /* ── 03 · SERVICIOS ── */ .serv { background: #faf9f6; } .serv__in { max-width: 1240px; margin-inline: auto; padding: clamp(46px,8vh,100px) clamp(20px,4vw,54px); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px,5vw,72px); align-items: start; } .serv__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem,3.4vw,2.8rem); line-height: 1.08; letter-spacing: -.015em; margin-top: 12px; } .serv__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .serv__l li { padding: 15px 0; border-bottom: 1px solid rgba(28,25,21,.12); font-size: .92rem; font-weight: 300; color: #45413a; } .serv__l li:nth-child(odd) { padding-right: 20px; } .serv__l li:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(28,25,21,.1); } /* ── 04 · DISPONIBILIDAD ── */ .res { max-width: 1240px; margin-inline: auto; padding: clamp(46px,8vh,100px) clamp(20px,4vw,54px); } .res__cab { max-width: 46rem; } .res__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem,3.8vw,3.1rem); line-height: 1.06; letter-spacing: -.015em; margin: 12px 0 14px; } .res__p { font-size: .95rem; font-weight: 300; line-height: 1.75; color: #4a463c; max-width: 50ch; } .res__grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: clamp(24px,3.4vw,52px); margin-top: clamp(30px,4.5vh,52px); align-items: start; } /* calendario (marcado generado por calendar.js) */ .cal { position: relative; } .cal.is-loading { opacity: .45; pointer-events: none; } .cal__nav { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; } .cal__btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(28,25,21,.2); border-radius: 50%; background: none; color: var(--tinta); cursor: pointer; transition: background .3s, border-color .3s; } .cal__btn:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); } .cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,2.6vw,38px); } .month__name { font-family: var(--display); font-weight: 400; font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: 12px; } /* capitalize ponía "Agosto De 2026"; solo va en mayúscula la primera letra */ .month__name::first-letter { text-transform: uppercase; } .month__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; } .month__dow { display: grid; place-items: center; height: 26px; font-size: .56rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(28,25,21,.38); } .day { position: relative; aspect-ratio: 1; display: grid; place-content: center; gap: 1px; border: 0; background: none; border-radius: 2px; cursor: default; font-family: var(--body); font-size: .82rem; color: rgba(28,25,21,.3); transition: background .2s, color .2s; } .day--empty { visibility: hidden; } .day--past { color: rgba(28,25,21,.22); text-decoration: line-through; } .day--busy { color: rgba(28,25,21,.24); text-decoration: line-through; } .day--free { color: var(--tinta); cursor: pointer; } .day--free:hover { background: rgba(28,25,21,.07); } .day__price { font-size: .54rem; font-weight: 500; color: rgba(28,25,21,.45); } /* SELECCIÓN — los nombres exactos los pone calendar.js (renderDay): day--start (entrada), day--end (salida) y day--in-range (noches de en medio). No inventar otros: si el nombre no coincide, la selección simplemente no se ve, que es lo que pasaba. */ .day--start, .day--end { background: var(--tinta) !important; color: #fff !important; font-weight: 500; border-radius: 3px; } .day--start .day__price, .day--end .day__price { color: rgba(255,255,255,.6) !important; } .day--in-range { background: rgba(28,25,21,.09); color: var(--tinta); } .day--in-range .day__price { color: rgba(28,25,21,.5); } /* Se dejan las celdas como bloques sueltos a propósito: unirlas con un ::before en z-index negativo lo mete detrás del fondo de cualquier ancestro con color y desaparece. No merece la pena el riesgo. */ /* resumen */ .sum { position: sticky; top: 92px; border: 1px solid rgba(28,25,21,.16); padding: clamp(22px,2.4vw,30px); display: grid; gap: 16px; } .sum__t { font-family: var(--display); font-weight: 400; font-size: 1.4rem; letter-spacing: -.015em; } .sum__fechas { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; } .sum__f { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid rgba(28,25,21,.14); } .sum__f span { font-size: .54rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(28,25,21,.45); } .sum__f strong { font-weight: 500; font-size: .95rem; } .sum__f.is-active { border-color: var(--tinta); } .sum__flecha { color: rgba(28,25,21,.35); } .sum__hint { font-size: .8rem; font-weight: 300; line-height: 1.6; color: rgba(28,25,21,.55); } .sum__hint.is-error { color: #a8412a; } .sum__detalle { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(28,25,21,.14); } .sum__fila { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; font-weight: 300; color: #45413a; } .sum__fila--tot { padding-top: 8px; border-top: 1px solid rgba(28,25,21,.1); font-size: 1rem; font-weight: 400; color: var(--tinta); } .sum__fila--tot strong { font-weight: 500; } .sum__cta { min-height: 54px; border: 0; border-radius: 999px; cursor: pointer; background: var(--tinta); color: #fff; font-family: var(--body); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: background .3s, transform .25s var(--e); } .sum__cta:hover:not(:disabled) { background: #2c2a20; transform: translateY(-2px); } .sum__cta:disabled { background: rgba(28,25,21,.16); color: rgba(28,25,21,.45); cursor: default; } .sum__clear { border: 0; background: none; cursor: pointer; font-family: var(--body); font-size: .72rem; font-weight: 400; color: rgba(28,25,21,.5); text-decoration: underline; text-underline-offset: 3px; } .sum__nota { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(28,25,21,.35); } .booking__demo { margin-top: 12px; font-size: .72rem; color: #a8412a; } /* ── 05 · EL LUGAR ── */ .cerca { background: #faf9f6; } .cerca__in { max-width: 1240px; margin-inline: auto; padding: clamp(46px,8vh,100px) clamp(20px,4vw,54px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,72px); align-items: start; } .cerca__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem,3.6vw,2.9rem); letter-spacing: -.015em; margin: 12px 0 16px; } .cerca__p { font-size: .95rem; font-weight: 300; line-height: 1.8; color: #4a463c; max-width: 42ch; } .cerca__l { list-style: none; margin: 0; padding: 0; display: grid; } .cerca__l li { display: grid; gap: 3px; padding: 20px 0; border-bottom: 1px solid rgba(28,25,21,.13); } .cerca__l li:first-child { border-top: 1px solid rgba(28,25,21,.13); } .cerca__l b { font-weight: 500; font-size: 1.4rem; letter-spacing: -.02em; } .cerca__l span { font-size: .86rem; font-weight: 300; color: rgba(28,25,21,.6); } /* ── 06 · LA OTRA CASA ── */ .otra { max-width: 1240px; margin-inline: auto; padding: clamp(46px,8vh,100px) clamp(20px,4vw,54px); } .otra__c { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 14px 22px 14px 14px; border: 1px solid rgba(28,25,21,.16); transition: border-color .45s var(--e), transform .45s var(--e); } .otra__c:hover { border-color: rgba(28,25,21,.5); transform: translateY(-3px); } .otra__ph { width: 92px; height: 92px; flex: none; overflow: hidden; } .otra__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e); } .otra__c:hover .otra__ph img { transform: scale(1.08); } .otra__in { display: grid; gap: 4px; } .otra__in b { font-family: var(--display); font-weight: 400; font-size: 1.55rem; letter-spacing: -.015em; } .otra__in i { font-style: normal; font-size: .68rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: rgba(28,25,21,.45); } .otra__go { margin-left: auto; color: rgba(28,25,21,.45); transition: transform .45s var(--e), color .45s; } .otra__c:hover .otra__go { transform: translateX(6px); color: var(--tinta); } /* ── PIE ── */ .pie2 { background: var(--night); color: rgba(234,230,220,.72); padding: clamp(56px,9vh,100px) clamp(20px,4vw,54px) 0; } .pie2__top { max-width: 1240px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 26px; padding-bottom: clamp(34px,5vh,54px); border-bottom: 1px solid rgba(234,230,220,.14); } .pie2__marca { display: flex; align-items: flex-start; gap: 14px; color: #fff; } .pie2__marca span { display: grid; gap: 4px; font-weight: 500; font-size: 1.05rem; letter-spacing: -.035em; line-height: 1.2; } .pie2__marca i { font-style: normal; font-weight: 300; font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(234,230,220,.5); } .pie2__claim { max-width: 34ch; text-align: right; font-family: var(--display); font-weight: 400; font-size: clamp(1.05rem,2vw,1.5rem); line-height: 1.45; color: rgba(234,230,220,.9); } .pie2__cols { max-width: 1240px; margin-inline: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(20px,3vw,40px); padding: clamp(30px,5vh,50px) 0; } .pie2__col { display: grid; gap: 10px; align-content: start; } .pie2__col h4 { margin: 0 0 4px; font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(234,230,220,.42); } .pie2__col a, .pie2__col p { font-size: .86rem; font-weight: 300; line-height: 1.6; color: rgba(234,230,220,.82); } .pie2__col a { width: fit-content; display: grid; gap: 1px; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; } .pie2__col a em { font-style: normal; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(234,230,220,.4); } .pie2__col a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.4); } .pie2__reg { font-size: .68rem !important; color: rgba(234,230,220,.4) !important; } .pie2__legal { max-width: 1240px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0 28px; border-top: 1px solid rgba(234,230,220,.14); font-size: .7rem; font-weight: 300; color: rgba(234,230,220,.45); } /* ── VISOR ── */ .lb { position: fixed; inset: 0; z-index: 90; background: rgba(10,12,10,.94); display: grid; place-items: center; padding: 5vh 6vw; } .lb[hidden] { display: none; } .lb__img { max-width: 100%; max-height: 90vh; object-fit: contain; } .lb__close, .lb__nav { position: absolute; border: 0; background: none; cursor: pointer; color: #fff; font-size: 1.8rem; line-height: 1; width: 54px; height: 54px; display: grid; place-items: center; transition: opacity .3s; opacity: .7; } .lb__close:hover, .lb__nav:hover { opacity: 1; } .lb__close { top: 12px; right: 14px; } .lb__nav--prev { left: 8px; top: 50%; translate: 0 -50%; } .lb__nav--next { right: 8px; top: 50%; translate: 0 -50%; } .lb__count { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; font-size: .68rem; letter-spacing: .2em; color: rgba(255,255,255,.6); } /* ── MÓVIL ── */ @media (max-width: 900px) { .tope__nav, .tope__cta { display: none; } .ham { display: grid; } .apto { grid-template-columns: 1fr; padding-block: 26px 40px; } .gal__rej { grid-template-columns: repeat(2,1fr); } .gal__i--gr { grid-column: span 2; grid-row: auto; } .gal__i--gr img { aspect-ratio: 4/3; } .serv__in, .cerca__in, .res__grid { grid-template-columns: 1fr; } .cal__months { grid-template-columns: 1fr; } .sum { position: static; } .pie2__cols { grid-template-columns: repeat(2,minmax(0,1fr)); } .pie2__claim { text-align: left; } .gal, .serv__in, .res, .cerca__in, .otra { padding-block: 46px; } .b { width: 100%; } .apto__acts { width: 100%; } } @media (max-width: 560px) { .serv__l { grid-template-columns: 1fr; } .serv__l li:nth-child(even) { padding-left: 0; border-left: 0; } .serv__l li:nth-child(odd) { padding-right: 0; } .pie2__cols { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Selector de idioma dentro del menú de las landings */ .idiomas { display: flex; justify-content: center; gap: 4px; margin-bottom: clamp(18px,3vh,26px); } .idiomas a { padding: 8px 14px; border-radius: 999px; font-family: var(--body); font-size: .64rem; font-weight: 600; letter-spacing: .14em; color: rgba(255,255,255,.5); transition: color .3s, background .3s; } .idiomas a:hover { color: #fff; background: rgba(255,255,255,.12); } .idiomas a[aria-current="true"] { color: var(--tinta); background: #fff; } /* ── Descuento por reserva directa ── Va DEBAJO del total y sin sustituirlo. El motor de Smoobu cobra el importe completo y el 3 % se ajusta al confirmar; enseñar solo el precio rebajado sería anunciar un precio que no es el que se cobra. */ .sum__directa { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(28,25,21,.2); } .sum__directa span { font-size: .76rem; font-weight: 300; color: #4a463c; line-height: 1.4; } .sum__directa b { font-family: var(--body); font-weight: 600; color: #2f6b4f; } .sum__directa strong { font-family: var(--body); font-weight: 500; font-size: 1.05rem; letter-spacing: -.02em; color: #2f6b4f; white-space: nowrap; } .sum__nota--dto { color: rgba(28,25,21,.55); } /* ═══════════════════════════════════════════════════════════════ CÓMO FUNCIONA Los horarios NO son los mismos en las dos casas (Akiver sale a las 11:00, Iveka a las 10:00, y la entrada de Iveka tiene tope a medianoche). Van generados desde las condiciones de reserva para que no acaben copiados iguales, que es como se genera una reclamación. ═══════════════════════════════════════════════════════════════ */ /* El margen lateral va DENTRO del contenedor de 1240, no en la sección. Puesto en la sección, el ancho máximo se centraba sobre un área ya recortada y el titular de "Cómo funciona" acababa 54 px a la izquierda del de todas las demás. Es la desalineación que se veía al bajar. */ .prac { background: #f7f5f0; padding-block: clamp(46px,7vh,88px); } .prac__in { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px,4vw,54px); } /* El max-width se fue a .prac__intro. Aquí limitaba la retícula entera, así que la cabecera acababa en 787 px mientras las filas de datos de debajo llegaban a 1279: el bloque quedaba colgando a la izquierda. La medida de lectura hay que limitarla en el párrafo, no en el grid. */ .prac__cab { margin-bottom: clamp(26px,4vh,40px); } .prac__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem,4vw,3.1rem); line-height: 1.04; letter-spacing: -.022em; margin: 12px 0 14px; } .prac__p { font-size: .95rem; font-weight: 300; line-height: 1.8; color: #4a463c; } .prac__datos { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(14px,2.4vw,32px); margin: 0 0 14px; padding: clamp(20px,2.6vh,28px) 0; border-block: 1px solid rgba(28,25,21,.15); } .prac__datos dt { font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(28,25,21,.45); } .prac__datos dd { margin: 7px 0 0; font-family: var(--body); font-weight: 400; font-size: clamp(.95rem,1.5vw,1.15rem); letter-spacing: -.015em; color: var(--tinta); line-height: 1.3; } .prac__flex { margin: 0 0 clamp(28px,4vh,44px); font-size: .82rem; font-weight: 300; color: rgba(28,25,21,.6); } .prac__cols { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(22px,3vw,46px); } .prac__cols h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: clamp(1.1rem,1.8vw,1.4rem); letter-spacing: -.02em; } .prac__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .prac__cols li { position: relative; padding-left: 16px; font-size: .86rem; font-weight: 300; line-height: 1.7; color: #4a463c; } .prac__cols li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: rgba(28,25,21,.4); } .prac__cols strong { font-weight: 500; color: var(--tinta); } .prac__pie { margin: clamp(26px,4vh,40px) 0 0; font-size: .74rem; font-weight: 300; color: rgba(28,25,21,.5); } .prac__pie a { color: var(--tinta); border-bottom: 1px solid rgba(28,25,21,.3); } @media (max-width: 900px) { .prac__cols { grid-template-columns: 1fr; gap: 26px; } } @media (max-width: 620px) { .prac__datos { grid-template-columns: 1fr 1fr; gap: 18px; } } /* ── Visita virtual ── Solo aparece si hay URL configurada. El marco arranca como una portada con botón; el iframe se crea al pulsarlo. */ .tour { background: #fff; padding: clamp(46px,7vh,88px) clamp(20px,4vw,54px); } .tour__in { max-width: 1240px; margin-inline: auto; } .tour__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem,4vw,3.1rem); line-height: 1.04; letter-spacing: -.022em; margin: 12px 0 14px; } .tour__p { max-width: 56ch; font-size: .95rem; font-weight: 300; line-height: 1.8; color: #4a463c; margin-bottom: clamp(22px,3.4vh,34px); } .tour__marco { position: relative; aspect-ratio: 16/9; border-radius: 3px; background: #efece4; display: grid; place-content: center; gap: 12px; justify-items: center; text-align: center; padding: 20px; } .tour__marco.is-on { background: #000; padding: 0; display: block; } .tour__marco iframe { width: 100%; height: 100%; border: 0; display: block; } .tour__b { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 28px; border: 0; border-radius: 999px; cursor: pointer; background: var(--tinta); color: #fff; font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: transform .3s var(--e), background .3s; } .tour__b:hover { transform: translateY(-2px); background: #2c2a20; } .tour__aviso { margin: 0; max-width: 46ch; font-size: .72rem; font-weight: 300; line-height: 1.6; color: rgba(28,25,21,.55); } /* ── Visita virtual ── Solo aparece si hay URL configurada en contenido/tour360.json. El marco arranca como una portada con botón; el iframe se crea al pulsarlo, no antes: así la web mantiene sus cero terceros para quien no lo pida. */ .tour { background: #fff; padding: clamp(46px,7vh,88px) clamp(20px,4vw,54px); } .tour__in { max-width: 1240px; margin-inline: auto; } .tour__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem,4vw,3.1rem); line-height: 1.04; letter-spacing: -.022em; margin: 12px 0 14px; } .tour__p { max-width: 56ch; font-size: .95rem; font-weight: 300; line-height: 1.8; color: #4a463c; margin-bottom: clamp(22px,3.4vh,34px); } .tour__marco { position: relative; aspect-ratio: 16/9; border-radius: 3px; background: #efece4; display: grid; place-content: center; gap: 12px; justify-items: center; text-align: center; padding: 20px; } .tour__marco.is-on { background: #000; padding: 0; display: block; } .tour__marco iframe { width: 100%; height: 100%; border: 0; display: block; } .tour__b { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 28px; border: 0; border-radius: 999px; cursor: pointer; background: var(--tinta); color: #fff; font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: transform .3s var(--e), background .3s; } .tour__b:hover { transform: translateY(-2px); background: #2c2a20; } .tour__aviso { margin: 0; max-width: 46ch; font-size: .72rem; font-weight: 300; line-height: 1.6; color: rgba(28,25,21,.55); } /* ═══════════════════════════════════════════════════════════════ FICHA DE DATOS — rediseño Eran tres números en fila pegados al techo de la columna derecha, con trescientos píxeles de vacío debajo. Ahora es una ficha vertical que ocupa la columna entera: etiqueta a la izquierda, dato a la derecha, una línea fina entre filas. Y se le añaden los horarios reales, que es la duda que más se pregunta antes de reservar. ═══════════════════════════════════════════════════════════════ */ .apto__specs { display: block; grid-template-columns: none; margin: 0; border: 0; border-top: 1px solid rgba(28,25,21,.16); } .apto__specs > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: clamp(13px,1.8vh,18px) 0 !important; border-bottom: 1px solid rgba(28,25,21,.1); border-left: 0 !important; } .apto__specs dt { font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(28,25,21,.45); } .apto__specs dd { margin: 0 !important; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem,2.6vw,2.1rem); line-height: 1; letter-spacing: -.02em; color: var(--tinta); } /* los horarios no son cifras sueltas: se escriben en la de texto */ .apto__specs > div:nth-child(n+4) dd { font-family: var(--body); font-weight: 400; font-size: clamp(1rem,1.6vw,1.2rem); letter-spacing: -.01em; } /* la columna derecha deja de estar centrada: la ficha empieza arriba, a la altura del titular */ @media (min-width: 901px) { .apto { align-items: start; } .apto__foto { position: sticky; top: 92px; } } /* Mismo criterio que en hero.css: nada de subrayados por defecto. */ a { text-decoration: none; } .prac__pie a, .tour__aviso a { text-decoration: underline; text-underline-offset: 3px; } /* ═══════════════════════════════════════════════════════════════ FICHA DE DATOS — alineación Los valores iban en Melodrama grande: cada glifo tiene una caja distinta (el 1 casi sin ancho, el 2 con remates) y a 400 px de su etiqueta parecían flotar sueltos. Pasan a Poppins medio, tamaño contenido, y cada fila se alinea por el centro con menos recorrido entre etiqueta y valor. ═══════════════════════════════════════════════════════════════ */ .apto__specs { max-width: 420px; } .apto__specs > div { align-items: center; } .apto__specs dd { font-family: var(--body) !important; font-weight: 500 !important; font-size: 1.06rem !important; letter-spacing: -.01em !important; } /* los botones, alineados entre sí y con la ficha */ .apto__acts { max-width: 420px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .apto__acts .b { width: 100%; padding-inline: 12px; white-space: nowrap; } @media (max-width: 900px) { .apto__specs, .apto__acts { max-width: none; } } /* ═══════════════════════════════════════════════════════════════ QUÉ INCLUYE — etiquetas, no tabla La lista iba en dos columnas con línea bajo cada celda y otra vertical entre ellas: al tener textos de distinta altura las rayas nunca casaban y parecía descuadrado. Etiquetas en fila, como en la home. ═══════════════════════════════════════════════════════════════ */ .serv__l { display: flex !important; flex-wrap: wrap; gap: 9px; grid-template-columns: none !important; align-content: start; } .serv__l li { padding: 9px 17px !important; border: 1px solid rgba(28,25,21,.16) !important; border-radius: 999px; border-left: 1px solid rgba(28,25,21,.16) !important; font-size: .82rem; font-weight: 300; color: #3d3a32; } /* ═══════════════════════════════════════════════════════════════ CIMA — el arranque de cada casa, a lo grande La misma gramática que el hero de la home: la foto ocupando la pantalla, un velo plano y el nombre encima con su sombra. Debajo, una franja blanca con los cinco datos. Sustituye al formato foto-izquierda / texto-derecha. Regla de la casa: el velo es PLANO (nada de elipses que parecen manchas) y ninguna animación parte de opacidad 0. ═══════════════════════════════════════════════════════════════ */ .cima { position: relative; isolation: isolate; overflow: hidden; height: calc(100svh - 73px); min-height: 540px; max-height: 900px; display: flex; align-items: flex-end; color: #fff; background: var(--night); } .cima__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12) contrast(1.03); } .cima__velo { position: absolute; inset: 0; z-index: -1; background: rgba(8,10,8,.38); } .cima__in { width: 100%; max-width: 1240px; margin-inline: auto; padding: clamp(28px,5vh,64px) clamp(20px,4vw,54px); } .cima .eyebrow { color: rgba(255,255,255,.72); text-shadow: 0 1px 12px rgba(6,8,6,.7); } .cima__h { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem,6.4vw,5.2rem); line-height: 1; letter-spacing: -.025em; margin: 14px 0 16px; max-width: 14ch; text-shadow: 0 2px 34px rgba(6,8,6,.8), 0 1px 4px rgba(6,8,6,.5); } .cima__p { max-width: 52ch; font-size: clamp(.92rem,1.4vw,1.05rem); font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.88); text-shadow: 0 1px 16px rgba(6,8,6,.75); margin-bottom: clamp(20px,3vh,30px); } .cima__acts { display: flex; flex-wrap: wrap; gap: 11px; } /* sobre foto oscura los botones se invierten: el principal es blanco */ .cima .b--solid { background: #fff; color: var(--tinta); border-color: #fff; } .cima .b--solid:hover { background: #f0ece1; border-color: #f0ece1; } .cima .b--ghost { color: #fff; border-color: rgba(255,255,255,.55); background: none; } .cima .b--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); } /* ── La franja de datos ── */ .banda { background: #fff; border-bottom: 1px solid rgba(28,25,21,.1); } .banda__l { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px,4vw,54px); display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); } .banda__l > div { padding: clamp(18px,2.6vh,26px) clamp(10px,1.4vw,20px); display: grid; gap: 5px; } .banda__l > div + div { border-left: 1px solid rgba(28,25,21,.1); } .banda__l dt { font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(28,25,21,.45); } .banda__l dd { margin: 0; font-family: var(--body); font-weight: 500; font-size: clamp(1rem,1.6vw,1.25rem); letter-spacing: -.015em; color: var(--tinta); } @media (max-width: 760px) { .cima { height: calc(96svh - 66px); } /* minmax(0,1fr): con 1fr a secas el mínimo de contenido manda y el botón de texto largo salía más ancho que su gemelo */ .cima__acts { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); width: 100%; } .cima .b { font-size: .62rem; } .cima .b { width: 100%; padding-inline: 10px; white-space: nowrap; display: grid; place-items: center; } .banda__l { grid-template-columns: repeat(2, minmax(0,1fr)); } .banda__l > div + div { border-left: 0; } .banda__l > div:nth-child(even) { border-left: 1px solid rgba(28,25,21,.1); } .banda__l > div { border-bottom: 1px solid rgba(28,25,21,.08); } } /* ═══════════════════════════════════════════════════════════════════ REDISEÑO DE LA LANDING · la gramática de la home ═══════════════════════════════════════════════════════════════════ La home es blanca casi entera y rompe el fondo tres veces contadas: hero negro, mapa oscuro y UNA banda crema. La landing llegó a tener cuatro fondos en ocho secciones, con dos cremas casi iguales (#faf9f6 y #f7f5f0) que no se leían como ritmo sino como manchas. Aquí se deja un solo color, en "cómo funciona", que hace de respiro igual que la banda de la zona en la home. */ .ficha, .res, .cerca, .otra { background: #fff; } .serv { background: none; } /* la sección ya no existe; por si queda alguna */ /* ── La casa: datos + servicios + fotos ── Antes eran tres secciones: una tira de 85 px con los datos, una rejilla de 1247 px y un bloque de servicios de 237. Juntas forman una sección con cuerpo, que es como se comporta cada casa en la home. */ .ficha { padding-block: clamp(56px,8vh,104px) clamp(46px,7vh,88px); } .ficha__in { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px,4vw,54px); } .ficha__h { font-family: var(--display); font-weight: 400; font-size: clamp(2rem,4.4vw,3.2rem); line-height: 1.04; letter-spacing: -.02em; color: var(--tinta); margin: 10px 0 0; } /* Las líneas finas de la home: el dato grande, la etiqueta pequeña encima y un filete que las separa. */ .ficha__specs { display: grid; gap: clamp(18px,2.4vw,34px); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: clamp(34px,4.6vh,54px) 0 0; padding: 0; } .ficha__specs div { border-top: 1px solid rgba(28,25,21,.14); padding-top: 12px; } .ficha__specs dt { font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(28,25,21,.5); } .ficha__specs dd { margin: 6px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem,2.6vw,2.1rem); line-height: 1; color: var(--tinta); } .ficha__am { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(30px,4vh,46px) 0 0; padding: 0; list-style: none; } .ficha__am li { border: 1px solid rgba(28,25,21,.16); border-radius: 100px; padding: 9px 17px; font-size: .82rem; color: rgba(28,25,21,.78); } /* ── La tira de fotos ── Es el mismo componente de la home. Vive en hero.css, que la landing no carga, así que se repite aquí. Si se toca uno hay que tocar el otro: son dos copias del mismo componente, no dos componentes. */ .tira { margin-top: clamp(38px,5.5vh,64px); } .tira__via { display: flex; gap: clamp(6px,.8vw,12px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-inline: clamp(20px,4vw,54px); scroll-padding-inline: clamp(20px,4vw,54px); scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .tira__via::-webkit-scrollbar { display: none; } .tira__via.is-arrastrando { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; } /* Ojo con esta regla: mientras está puesta, nada de dentro recibe eventos. Por eso anim.js solo la pone cuando hay arrastre de verdad (más de 6 px). Si se pone al pulsar, el clic deja de abrir el visor. */ .tira__via.is-arrastrando * { pointer-events: none; } .tira__f { flex: 0 0 clamp(230px,25vw,336px); scroll-snap-align: center; position: relative; display: block; overflow: hidden; padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 4/3; border-radius: 2px; } /* La curva se llama --e en esta hoja y --vh-ease en hero.css. Copiar la regla tal cual dejaba la transición sin curva definida: la declaración entera se descarta en silencio y el zoom de la foto pierde el suavizado. Es lo mismo que pasó con --tinta. */ .tira__f img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--e), filter .5s; } .tira__f:hover img { transform: scale(1.06); filter: saturate(1.08); } .tira__f:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; } .tira__f--mas { background: #f5f3ee; display: grid; place-items: center; } .tira__f--mas span { display: grid; gap: 2px; text-align: center; font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(28,25,21,.55); } .tira__f--mas b { font-family: var(--display); font-weight: 400; font-size: 2.4rem; letter-spacing: -.02em; color: var(--tinta); line-height: 1; } .tira__f--mas:hover { background: #efece4; } @media (max-width: 900px) { .tira__f { flex-basis: 74vw; } } /* ── Cabeceras a dos columnas ── El titular solo, alineado a la izquierda, dejaba media pantalla vacía justo encima de unas filas de datos que sí ocupan todo el ancho. Ese desequilibrio es lo que se leía como "descuadrado". Poniendo contenido a la derecha —los servicios en la ficha, el texto en la práctica— las dos mitades pesan lo mismo y las filas de abajo ya no cuelgan de un bloque estrecho. */ .ficha__cab, .prac__cab { display: grid; align-items: end; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px,4vw,64px); } .ficha__cab .ficha__am, .prac__intro { margin: 0; } .prac__intro { display: grid; gap: 14px; } /* La misma retícula que las specs, para que las columnas de arriba y las líneas de abajo compartan borde izquierdo y derecho. */ .ficha__specs { margin-top: clamp(40px,5.4vh,62px); } @media (max-width: 860px) { .ficha__cab, .prac__cab { grid-template-columns: 1fr; gap: clamp(20px,4vw,30px); } } /* la medida de lectura, en el párrafo y no en la retícula */ .prac__intro { max-width: 52ch; } /* ═══════════════════════════════════════════════════════════════ RESERVA · el estilo de la maqueta D sobre el calendario REAL Ojo: aquí no hay marcado nuevo. calendar.js sigue generando lo mismo (.month, .day, .day__price…) y por eso los PRECIOS POR DÍA siguen saliendo — en la maqueta no estaban porque era estática. ═══════════════════════════════════════════════════════════════ */ /* cabecera en dos columnas, como todas las de la página */ .res__cab { max-width: none; display: grid; align-items: start; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,4vw,64px); } .res__cab .res__p { margin-top: 26px; } /* el calendario respira sobre una línea, sin caja */ .cal { border-top: 1px solid rgba(28,25,21,.14); padding-top: 4px; } .month__name { font-family: var(--display); font-weight: 400; font-size: 1.35rem; letter-spacing: -.01em; margin: 14px 0 10px; text-transform: capitalize; } .month__dow { font-size: .56rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(28,25,21,.35); display: grid; place-items: center; padding: 8px 0; } .day { border-radius: 3px; } .day--start, .day--end { border-radius: 3px; } /* el resumen, con el borde fino y las esquinas de la maqueta */ .sum { border-radius: 3px; } /* la nota del descuento se lee, no se calcula */ .sum__nota--dto { color: #1f7a45; } /* ═══ VALORACIONES · como en la home, con reseñas reales ═══ */ .val2 { max-width: 1240px; margin-inline: auto; padding: clamp(56px,8vh,104px) clamp(20px,4vw,54px); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px,4vw,72px); align-items: start; } .val2__n { font-family: var(--display); font-weight: 400; font-size: clamp(4rem,8vw,6.5rem); line-height: 1; color: var(--tinta); } .val2__n i { font-style: normal; font-size: 1.4rem; color: rgba(28,25,21,.4); } .val2__stars { color: var(--estrella); letter-spacing: .2em; margin: 6px 0 8px; } .val2__meta { font-size: .85rem; color: rgba(28,25,21,.55); } .val2 figure { margin: 0 0 14px; background: #f5f3ee; border-radius: 3px; padding: clamp(22px,3vw,34px); } .val2 blockquote { margin: 0; font-size: .95rem; font-weight: 300; line-height: 1.85; color: #35322a; } .val2 figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(28,25,21,.1); display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; } .val2 figcaption span { color: rgba(28,25,21,.45); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; } /* ═══ CIERRE OSCURO · el "¿Cuándo vienes?" de la maqueta ═══ Sustituye a la antigua sección .cerca: las distancias viven aquí. El fondo es --night, el mismo negro azulado del pie (.pie2) y de .prac: va pegado al pie y con --tinta (negro cálido) se notaba la costura entre los dos, como si fueran dos piezas distintas. */ .fin { background: var(--night); color: #fff; text-align: center; padding: clamp(64px,10vh,120px) 20px; } .fin .eyebrow { color: rgba(255,255,255,.5); } .fin__h { font-family: var(--display); font-weight: 400; color: #fff; font-size: clamp(2rem,4.2vw,3.2rem); line-height: 1.04; letter-spacing: -.02em; margin: 10px 0 0; } .fin__p { color: rgba(255,255,255,.65); font-weight: 300; font-size: .9rem; line-height: 1.9; max-width: 52ch; margin: 16px auto 30px; } .fin__p span { white-space: nowrap; } .fin__p span + span::before { content: "·"; margin: 0 9px; color: rgba(255,255,255,.3); } /* Los dos enlaces editoriales (a /la-zona/ y /donde-alojarse-en-cantabria/). Debían salir con el estilo de .mapa__mas/.zona__esmas de hero.css, pero esa hoja no la carga la ficha de la casa: llegaban sin margen, pegados al botón de abajo. Colores en blanco translúcido porque, a diferencia de esos otros, aquí el fondo es oscuro. */ .fin__mas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(16px,3vw,30px); font-size: .8rem; margin: 18px 0 clamp(32px,5vw,46px); } .fin__mas a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,.35); transition: text-decoration-color .2s, color .2s; } .fin__mas a:hover { color: #fff; text-decoration-color: currentColor; } .fin__mas a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .fin .b { background: #fff; color: var(--tinta); border: 0; } @media (max-width: 860px) { .res__cab, .val2 { grid-template-columns: 1fr; } .res__cab .res__p { margin-top: 0; } } /* Colocación explícita de la cabecera de reserva. La retícula a secas repartía los TRES hijos (eyebrow, h2, p) en dos columnas por orden de llegada: el titular acababa arriba a la derecha y el párrafo debajo a la izquierda, cruzados. */ .res__cab .eyebrow { grid-column: 1; grid-row: 1; } .res__cab .res__h { grid-column: 1; grid-row: 2; } .res__cab .res__p { grid-column: 2; grid-row: 1 / span 2; } /* La nota del descuento es una frase, no una etiqueta: sin mayúsculas ni tracking de eyebrow, que en tres líneas se hacen ilegibles. */ .sum__nota--dto { text-transform: none; letter-spacing: 0; font-size: .78rem; line-height: 1.7; font-weight: 400; } /* "agosto de 2026" → "Agosto de 2026". Con capitalize salía "Agosto De 2026", con la preposición en mayúscula. */ .month__name { text-transform: none; } .month__name::first-letter { text-transform: uppercase; } /* En estrecho, la colocación explícita de la cabecera de reserva se deshace: si el párrafo se queda clavado en la columna 2, el grid crea esa columna implícita aunque la retícula sea de una. */ @media (max-width: 860px) { .res__cab .eyebrow, .res__cab .res__h, .res__cab .res__p { grid-column: auto; grid-row: auto; } } /* ═══════════════════════════════════════════════════════════════ HERO DE LANDING · centrado y con la entrada de la home Calcado del hero de la home (.vh): mismo velo que oscurece el CENTRO —donde está el texto— y no los bordes, misma entrada vhUp escalonada con la misma curva y los mismos retardos, y el mismo zoom lento de la foto. Si se toca la home, tocar esto también. ═══════════════════════════════════════════════════════════════ */ .cima { align-items: center; } .cima__in { max-width: 46rem; text-align: center; margin-block: auto; } .cima__h { margin-inline: auto; } .cima__p { margin-inline: auto; max-width: 40ch; } .cima__acts { justify-content: center; } /* el velo de la home: radial al centro + degradado vertical */ .cima__velo { background: radial-gradient(76% 62% at 50% 52%, rgba(6,8,6,.34) 0%, rgba(6,8,6,.14) 58%, transparent 100%), linear-gradient(180deg, rgba(6,8,6,.34) 0%, transparent 24%, transparent 62%, rgba(6,8,6,.56) 100%); } /* el zoom lento de la foto, como el .vh__img.is-on de la home */ @keyframes cimaZoom { from { transform: scale(1.06) } to { transform: scale(1.14) } } .cima__img { animation: cimaZoom 7s linear both; } /* la entrada: mismos nombres de tiempos que vhUp en hero.css */ @keyframes cimaUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } } .cima .eyebrow { animation: cimaUp .9s .18s both var(--e); } .cima__h { animation: cimaUp 1.05s .28s both var(--e); } .cima__p { animation: cimaUp .95s .46s both var(--e); } .cima__acts { animation: cimaUp .95s .58s both var(--e); } /* RED DE SEGURIDAD, igual que en la home: si la animación no llega a ejecutarse (pestaña en segundo plano, compositor saturado) el bloque se quedaría invisible PARA SIEMPRE por el fill "both". apto.js añade .anim-listo al body a los 4,2 s pase lo que pase. */ .anim-listo .cima .eyebrow, .anim-listo .cima__h, .anim-listo .cima__p, .anim-listo .cima__acts { animation: none !important; opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .cima .eyebrow, .cima__h, .cima__p, .cima__acts, .cima__img { animation: none; } } /* ── Ajuste: el hero vuelve a la izquierda ── Alineado con el INICIO de la cabecera: el texto arranca en el mismo borde que el logo (el mismo clamp de padding), no en el centro ni en la caja de 1240. La entrada, el zoom y la red de seguridad se quedan como están. El velo vuelve a cargar el peso a la izquierda, que es donde ahora vive el texto. */ .cima__in { max-width: none; margin: 0; text-align: left; padding-inline: clamp(20px,4vw,54px); } .cima__h { margin-inline: 0; } .cima__p { margin-inline: 0; } .cima__acts { justify-content: flex-start; } .cima__velo { background: linear-gradient(80deg, rgba(6,8,6,.6) 0%, rgba(6,8,6,.32) 36%, rgba(6,8,6,.06) 64%, transparent 82%), linear-gradient(180deg, transparent 58%, rgba(6,8,6,.48) 100%); } /* ── La nota del descuento, en voz baja ── Iba entera en verde y negrita: parecía una alerta, no una nota. El verde se queda solo como acento en lo importante; el resto, texto normal. Y cuenta lo que dijo Iván: transferencia, Bizum o efectivo, y el 3 % aplicado al confirmar por WhatsApp. */ .sum__nota--dto { color: rgba(28,25,21,.6); font-weight: 300; } .sum__nota--dto strong { color: #1f7a45; font-weight: 500; } /* ── "Cómo funciona" descargada: tres frases, no tres listas ── */ .prac__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,3.5vw,54px); margin-top: clamp(26px,4vh,40px); } .prac__cols h3 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; margin: 0 0 10px; } .prac__cols p { font-size: .88rem; font-weight: 300; line-height: 1.8; color: #4a463c; } .prac__cols strong { font-weight: 500; color: var(--tinta); } .prac__pie { margin-top: clamp(30px,4.5vh,46px); font-size: .74rem; font-weight: 300; line-height: 1.8; color: rgba(28,25,21,.5); max-width: 74ch; } @media (max-width: 860px) { .prac__cols { grid-template-columns: 1fr; } } /* ── "Cómo funciona" con la jerarquía de la home ── Todo pesaba lo mismo y la banda quedaba plana. Se le da el ritmo del resto de la web: los cuatro datos en Melodrama grande (como las specs de la ficha), y cada columna con su índice dorado y su línea fina arriba, el mismo lenguaje que las fichas del mapa de la home. */ .prac__cab { align-items: start; } .prac__datos dd { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem,2.2vw,1.9rem); letter-spacing: -.01em; } .prac__cols { counter-reset: paso; } .prac__cols article { border-top: 1px solid rgba(28,25,21,.14); padding-top: 16px; } .prac__cols article::before { counter-increment: paso; content: "0" counter(paso); display: block; margin-bottom: 10px; font-family: var(--body); font-size: .6rem; font-weight: 600; letter-spacing: .26em; color: rgba(201,154,46,.9); } .prac__cols h3 { font-size: 1.35rem; color: var(--tinta); } /* ═══ "Cómo funciona" v5 · horarios grandes + fichas ═══ Historia corta: v3 puso los seis datos en una columna estrecha a la derecha (hueco muerto a la izquierda); la v4 los repartió en dos columnas de filas con etiqueta al lado, y en móvil esas dos columnas estrangulaban el texto a cuatro palabras por línea. v5 separa por jerarquía en vez de por rejilla: · Los DOS horarios arriba, grandes en Melodrama. Es el dato que más se consulta y el único que cambia entre las dos casas. · Los otros cuatro, en fichas blancas sobre el crema. Sin filetes ni etiquetas al lado: cada ficha tiene su título arriba y su frase debajo, con el ancho entero para respirar. En móvil todo pasa a una columna, que es donde la v4 se rompía. */ .prac__horas { margin: clamp(30px,4.5vh,48px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,48px); } .prac__horas > div { border-top: 1px solid rgba(28,25,21,.16); padding-top: 14px; } .prac__horas dt { font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(201,154,46,.95); } .prac__horas dd { margin: 8px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem,3vw,2.3rem); line-height: 1.1; letter-spacing: -.015em; color: var(--tinta); } .prac__fichas { margin: clamp(22px,3.4vh,34px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,1.6vw,20px); } .prac__fichas > div { background: #fff; border-radius: 4px; padding: clamp(20px,2.6vw,30px); } .prac__fichas dt { font-family: var(--display); font-weight: 400; font-size: 1.2rem; letter-spacing: -.01em; color: var(--tinta); } .prac__fichas dd { margin: 9px 0 0; font-size: .89rem; font-weight: 300; line-height: 1.75; color: #4a463c; } .prac__fichas dd strong { font-weight: 500; color: var(--tinta); } @media (max-width: 720px) { .prac__fichas { grid-template-columns: 1fr; } .prac__horas { gap: 18px; } } /* ═══ VALORACIONES · el carrusel de la home, clase por clase ═══ Reescrito A MANO. La primera vez se copió de hero.css cortando por números de línea y el corte partió una regla por la mitad: la llave sin cerrar se tragaba las reglas siguientes y el carrusel salía en columna. Las reglas de un CSS se copian enteras o no se copian. */ .val { padding: clamp(64px,10vh,120px) clamp(20px,4vw,54px); background: #fff; } .val__in { max-width: 1240px; margin-inline: auto; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,2.2fr); gap: clamp(30px,5vw,84px); align-items: start; } .val__num { margin: 12px 0 0; font-family: var(--body); font-weight: 300; font-size: clamp(3.2rem,6.4vw,5rem); line-height: 1; letter-spacing: -.045em; color: var(--tinta); display: flex; align-items: baseline; gap: 8px; } .val__num i { font-style: normal; font-size: .28em; font-weight: 400; letter-spacing: 0; color: rgba(28,25,21,.4); } .val__stars { margin: 10px 0 0; color: var(--estrella); font-size: .92rem; letter-spacing: .22em; } .val__meta { margin: 16px 0 0; font-size: .78rem; font-weight: 300; line-height: 1.7; color: rgba(28,25,21,.5); } .val__vp { overflow: hidden; transition: height .5s cubic-bezier(.16,1,.3,1); } .val__pista { display: flex; will-change: transform; } .val__c { flex: 0 0 100%; margin: 0; padding: 0; border: 0; display: grid; gap: 18px; align-content: start; align-self: start; } .val__s { margin: 0; color: var(--estrella); font-size: .92rem; letter-spacing: .22em; } .val__c blockquote { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem,2.4vw,1.85rem); line-height: 1.55; letter-spacing: -.01em; color: #1c1a14; } .val__c figcaption { display: flex; align-items: baseline; gap: 12px; } .val__c figcaption b { font-family: var(--body); font-weight: 500; font-size: 1rem; letter-spacing: -.02em; color: var(--tinta); } .val__c figcaption span { font-size: .62rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: rgba(28,25,21,.45); } .val__ctrl { display: flex; align-items: center; gap: 10px; margin-top: 26px; } .val__b { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(28,25,21,.25); border-radius: 999px; background: none; color: var(--tinta); cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s; } .val__b:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); transform: scale(1.06); } .val__b:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; } .val__pos { margin-left: 8px; font-size: .68rem; font-weight: 400; letter-spacing: .2em; color: rgba(28,25,21,.45); } .val__pos b { color: var(--tinta); font-weight: 500; } @media (max-width: 860px) { .val__in { grid-template-columns: 1fr; } } /* la cabecera del carrusel no necesita sticky en la landing: la sección es baja y el sticky provocaba un salto al ajustar la altura del visor */ .val .val__cab { position: static; } .val .eyebrow { color: rgba(28,25,21,.45); } /* ═══════════════════════════════════════════════════════════════ EL CONTENIDO SE SUBE ENCIMA DEL HERO · igual que en la home El hero se queda pegado arriba y la página pasa por encima con la esquina redondeada y una sombra proyectada hacia arriba: se lee como una capa que sube, no como dos bloques pegados. Requisito del sticky: ningún ancestro puede tener overflow distinto de visible. En la home hubo que neutralizar un overflow-x:clip heredado; aquí se declara explícito por si acaso. ═══════════════════════════════════════════════════════════════ */ /* overflow-x: CLIP, no visible ni hidden. Los tres son distintos: · hidden → crea un contenedor de scroll y ROMPE position:sticky · visible → no rompe el sticky, pero deja escapar cualquier desborde horizontal y en móvil la página se va de lado · clip → corta el desborde SIN crear contenedor de scroll: el sticky sigue funcionando. Es el único que sirve para las dos cosas. Se puso 'visible' al montar el hero pegajoso y por eso la web se salía en móvil. */ html, body { overflow-x: clip; } .cima { position: sticky; top: 0; z-index: 0; } .sube { position: relative; z-index: 2; margin-top: clamp(-40px,-4vh,-24px); border-radius: clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px) 0 0; background: #fff; box-shadow: 0 -22px 54px -22px rgba(8,10,8,.55); } /* la primera sección hereda el redondeo, si no asoma su fondo por las esquinas y se ve un pico blanco sobre la foto */ .sube > :first-child { border-radius: inherit; } .pie2 { position: relative; z-index: 2; } /* Con el hero pegado arriba, la cabecera tiene que ir POR ENCIMA (z 40) o el hero la taparía al desplazarse. */ .tope { z-index: 40; } @media (prefers-reduced-motion: reduce) { .cima { position: relative; } } /* ── La ficha de reseña, exactamente como en la home ── Antes aquí el texto iba en Melodrama grande y sin fondo. La home lo tiene resuelto de otra forma y es la que manda: ficha crema, comilla grande de adorno, texto en Poppins ligero, separador antes de la firma y un círculo a modo de avatar. Copiado de hero.css tal cual. */ .val__c { background: #f5f3ee; border-radius: 3px; padding: clamp(26px,3.4vw,40px); } .val__c blockquote { font-family: var(--body); font-weight: 300; font-size: clamp(1.05rem,1.7vw,1.32rem); line-height: 1.72; letter-spacing: -.005em; color: #232019; } /* la comilla grande da peso visual sin cargar de color */ .val__c blockquote::before { content: "\201C"; display: block; font-family: var(--display); font-size: 3.4rem; line-height: .5; margin-bottom: 20px; color: rgba(22,21,15,.22); } .val__s { color: #b5851f; letter-spacing: .26em; } .val__c figcaption { margin-top: clamp(18px,2.4vh,26px); padding-top: clamp(14px,2vh,18px); border-top: 1px solid rgba(28,25,21,.14); align-items: center; flex-wrap: wrap; } .val__c figcaption b { font-size: 1.05rem; font-weight: 500; color: var(--tinta); } .val__c figcaption b::before { content: ""; display: inline-block; width: 26px; height: 26px; border-radius: 50%; margin-right: 11px; vertical-align: -8px; background: rgba(28,25,21,.1); } .val__c figcaption span { color: rgba(28,25,21,.55); } /* el hueco entre fichas del carrusel, como en la home */ .val__pista { gap: clamp(18px,2.4vw,34px); } /* ── Fuera las sombras de texto del hero ── Se pusieron para que el titular blanco se leyera sobre la foto sin oscurecerla entera, pero ensucian la tipografía: Melodrama es de trazo fino y la sombra la emborrona. El contraste pasa a hacerlo SOLO el velo, que para eso está: se sube un punto por la izquierda, que es donde vive el texto. */ .cima .eyebrow, .cima__h, .cima__p { text-shadow: none; } .cima__velo { background: linear-gradient(80deg, rgba(6,8,6,.72) 0%, rgba(6,8,6,.46) 34%, rgba(6,8,6,.12) 62%, transparent 80%), linear-gradient(180deg, transparent 55%, rgba(6,8,6,.5) 100%); } /* La comilla decorativa en Georgia, no en Melodrama: Melodrama dibuja ese glifo diminuto y a 54 px seguía viéndose como una mota. */ .val__c blockquote::before { font-family: Georgia, "Times New Roman", serif; font-size: 4.2rem; line-height: .62; margin-bottom: 14px; } /* ── Menú móvil: opciones más juntas ── Cada enlace llevaba 17 px arriba y abajo; con cuatro opciones el bloque quedaba desparramado por toda la pantalla. Se aprieta el interlineado y el tamaño sube un punto: se lee como una lista, no como cuatro islas. El teléfono se retiró del panel; el contacto vive en el pie. */ .menu__nav a { padding: 11px 0; font-size: 1.5rem; } .menu__pie { padding-top: 18px; } /* ── Hero difuminado en móvil ── La home lo hace bajo 720 px: en pantalla pequeña la foto compite con el titular y un desenfoque leve la manda al fondo sin apagarla. Aquí igual, con los mismos números. */ @media (max-width: 720px) { .cima__img { filter: saturate(1.14) contrast(1.03) brightness(.99) blur(2.5px); } } /* ── Red de seguridad del hero pegajoso ── TODO lo que va después del hero tiene que estar por encima de él. Si una sección se queda fuera de .sube —pasó con el cierre, que se insertaba entre y