/* ═══════════════════════════════════════════════
CASAS AICU — style.css
Hoja de estilos compartida · v4.2
═══════════════════════════════════════════════ */
/* ── VARIABLES ─────────────────────────────── */
:root {
/* Colores */
--verde: #2d4a3e;
--verde-claro: #4a7c6a;
--crema: #f5efe6;
--arena: #e8dcc8;
--madera: #8b6343;
--madera-claro: #c49a6c;
--blanco: #faf8f4;
--texto: #1e2d28;
--gris: #6b7b75;
/* Tipografía */
--font-sans: 'Jost', sans-serif;
--font-serif: 'Playfair Display', serif;
/* Espaciado de secciones */
--section-pad: 70px 48px;
--section-max: 1100px;
/* Border radius */
--radius-sm: 4px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 50px;
--radius-circle: 50%;
}
/* ── RESET ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
background: var(--blanco);
color: var(--texto);
overflow-x: hidden;
margin: 0;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; }
/* ── TIPOGRAFÍA ─────────────────────────────── */
.eyebrow {
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
font-family: var(--font-sans);
color: var(--madera);
}
.eyebrow--light { color: var(--madera-claro); }
.section-title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 400;
color: var(--verde);
margin: 10px 0 8px;
}
.section-title em { color: var(--madera); font-style: italic; }
.section-title--light { color: var(--arena); }
.section-title--light em { color: var(--madera-claro); }
.section-subtitle {
font-size: 1rem;
color: var(--gris);
line-height: 1.7;
max-width: 560px;
margin: 0 auto;
}
/* ── LAYOUT ─────────────────────────────────── */
.section-inner {
max-width: var(--section-max);
margin: 0 auto;
padding: var(--section-pad);
}
.section-header {
text-align: center;
margin-bottom: 40px;
}
/* ── NAV ─────────────────────────────────────── */
.nav-logo img { height: 80px; width: auto; }
nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 40px;
background: rgba(45, 74, 62, 0.96);
backdrop-filter: blur(12px);
}
.nav-logo img { height: 80px; width: auto; }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-back {
color: rgba(232, 220, 200, 0.75);
text-decoration: none;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.2s;
}
.nav-back:hover { color: var(--arena); }
/* ── BOTONES ─────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 13px 28px;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: opacity 0.2s, transform 0.15s;
}
.btn:hover { opacity: 0.88; }
.btn:active { transform: scale(0.97); }
.btn-primary {
background: var(--madera-claro);
color: var(--verde);
}
.btn-outline {
background: rgba(255,255,255,0.08);
color: var(--arena);
border: 1.5px solid rgba(232,220,200,0.45);
backdrop-filter: blur(4px);
}
.btn-ghost {
background: rgba(255,255,255,0.12);
color: var(--arena);
border: 1px solid rgba(255,255,255,0.18);
}
.btn-ghost:hover { background: rgba(255,255,255,0.2); }
.btn-sm {
font-size: 0.78rem;
padding: 9px 20px;
}
.btn-full { width: 100%; }
/* ── CARDS ───────────────────────────────────── */
.card {
background: white;
border-radius: var(--radius-md);
padding: 22px 24px;
}
.card--crema { background: var(--crema); }
.card--verde {
background: rgba(255,255,255,0.06);
border-radius: var(--radius-md);
padding: 24px 28px;
}
.card--bordered {
border-top: 3px solid var(--verde);
}
.card--recommended {
border-top: 3px solid var(--madera-claro);
background: var(--crema);
}
/* ── AMENITY ICONS ───────────────────────────── */
.amenity-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px;
}
.amenity-item {
background: var(--crema);
border-radius: var(--radius-md);
padding: 16px;
text-align: center;
}
.amenity-item p:first-child { font-size: 1.4rem; margin-bottom: 6px; }
.amenity-item p:last-child {
font-size: 0.82rem;
color: var(--verde);
font-weight: 600;
font-family: var(--font-sans);
}
/* ── FORMS ───────────────────────────────────── */
input, select, textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-md);
background: rgba(255,255,255,0.1);
color: var(--arena);
font-family: var(--font-sans);
font-size: 0.94rem;
outline: none;
transition: border-color 0.2s;
}
input::placeholder, textarea::placeholder { color: rgba(232,220,200,0.4); }
input:focus, select:focus, textarea:focus {
border-color: var(--madera-claro);
}
select option { background: var(--verde); color: var(--arena); }
label {
display: block;
font-size: 0.78rem;
color: rgba(232,220,200,0.7);
margin-bottom: 5px;
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ── FOOTER ──────────────────────────────────── */
footer {
background: var(--verde);
color: var(--arena);
text-align: center;
padding: 40px 48px;
font-family: var(--font-sans);
font-size: 0.85rem;
}
.footer-logo {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
.footer-links {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
margin: 16px 0;
}
.footer-links a {
color: rgba(232,220,200,0.7);
text-decoration: none;
font-size: 0.8rem;
transition: color 0.2s;
}
.footer-links a:hover { color: var(--madera-claro); }
/* ── WA FLOAT ────────────────────────────────── */
.wa-float {
position: fixed;
bottom: 28px;
right: 28px;
background: #25d366;
width: 56px;
height: 56px;
border-radius: var(--radius-circle);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
z-index: 200;
transition: transform 0.2s;
}
.wa-float:hover { transform: scale(1.08); }
/* ── GALERÍA ─────────────────────────────────── */
.gal-thumb { width: 72px; min-width: 72px; }
.gal-thumb img { opacity: 0.65; transition: opacity 0.2s; }
.gal-thumb.active img, .gal-thumb:hover img { opacity: 1; }
.gal-thumb.active { outline: 2px solid var(--madera-claro); border-radius: var(--radius-sm); }
/* ── FILTER BAR (gastronomía) ────────────────── */
.filter-bar {
background: var(--verde);
padding: 14px 48px;
display: flex;
align-items: center;
gap: 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
position: sticky;
top: 0;
z-index: 90;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.filter-label {
color: rgba(232,220,200,0.55);
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
}
.filter-select {
flex: 1;
max-width: 420px;
background: rgba(0,0,0,0.25);
color: var(--madera-claro);
border: 1px solid rgba(196,154,108,0.35);
border-radius: var(--radius-md);
padding: 10px 14px;
font-family: var(--font-sans);
font-size: 0.88rem;
cursor: pointer;
outline: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.filter-select:hover, .filter-select:focus { border-color: var(--madera-claro); }
.filter-select option { background: var(--verde); color: var(--arena); }
/* ── OFICIAL ITEMS (gastronomía) ─────────────── */
.oficial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.oficial-item {
background: white;
border-radius: var(--radius-md);
padding: 18px 20px;
border-top: 3px solid var(--verde);
}
.oficial-item h4 {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--verde);
margin: 4px 0 4px;
font-weight: 400;
}
.oficial-cat {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--madera);
font-weight: 600;
margin: 0 0 2px;
}
/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 768px) {
:root { --section-pad: 48px 24px; }
nav { padding: 10px 20px; }
.filter-bar { padding: 12px 20px; gap: 10px; }
.filter-label { display: none; }
.amenity-grid { grid-template-columns: repeat(3, 1fr); }
.gal-thumb { width: 58px; min-width: 58px; }
}
@media (max-width: 480px) {
.amenity-grid { grid-template-columns: repeat(2, 1fr); }
.footer-links { gap: 14px; }
}
/* ═══════════════════════════════════════════════
INDEX
═══════════════════════════════════════════════ */
body.p-index html,
body.p-index body { height: 100%; overflow: hidden; }
body.p-index .hero {
width: 100%;
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center 60%;
background-color: #2d4a3e;
}
body.p-index .hero-overlay {
position: absolute;
inset: 0;
background: rgba(20,35,28,0.52);
pointer-events: none;
}
body.p-index .hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 24px 100px;
gap: 0;
width: 100%;
}
body.p-index .hero-logo { height: 180px; width: auto; margin-bottom: 24px; }
body.p-index .hero-sub {
font-family: 'Jost', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(232,220,200,0.7);
margin-bottom: 28px;
}
body.p-index .hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
max-width: 420px;
}
body.p-index .hero-btn-full {
grid-column: 1 / -1;
max-width: 200px;
margin: 0 auto;
width: 100%;
}
body.p-index .hero-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 10px;
text-decoration: none;
font-family: 'Jost', sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 12px;
transition: opacity 0.2s;
}
body.p-index .hero-btn:hover { opacity: 0.85; }
body.p-index .hero-btn-primary { background: #c49a6c; color: #2d4a3e; }
body.p-index .hero-btn-outline {
background: rgba(255,255,255,0.1);
color: #e8dcc8;
border: 1.5px solid rgba(232,220,200,0.35);
backdrop-filter: blur(4px);
}
body.p-index .dif-bar {
display: flex;
justify-content: center;
flex-wrap: wrap;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(6px);
padding-bottom: env(safe-area-inset-bottom, 16px);
}
body.p-index .dif-item {
padding: 10px 16px;
font-family: 'Jost', sans-serif;
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.88);
border-right: 1px solid rgba(255,255,255,0.15);
white-space: nowrap;
}
body.p-index .dif-item:last-child { border-right: none; }
body.p-index .wa-btn {
position: fixed;
right: 24px;
bottom: calc(110px + env(safe-area-inset-bottom, 16px));
width: 54px;
height: 54px;
background: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 16px rgba(37,211,102,0.4);
z-index: 200;
transition: transform 0.2s;
}
body.p-index .wa-btn:hover { transform: scale(1.08); }
@media (max-width: 420px) {
body.p-index .hero-logo { height: 120px; margin-bottom: 16px; }
body.p-index .hero-btn { font-size: 0.74rem; padding: 12px 8px; gap: 6px; }
body.p-index .hero-sub { margin-bottom: 20px; }
body.p-index .hero-grid { gap: 10px; }
body.p-index .dif-item { padding: 8px 10px; font-size: 0.62rem; }
}
body.p-index .bottom-fixed {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 100;
display: flex;
flex-direction: column;
}
body.p-index .farmacia-strip {
background: rgba(139,99,67,0.92);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 7px 16px;
border-top: 1px solid rgba(232,220,200,0.2);
}
body.p-index .farmacia-strip-label {
font-family: 'Jost', sans-serif;
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(232,220,200,0.7);
white-space: nowrap;
flex-shrink: 0;
}
body.p-index .farmacia-strip-data {
font-family: 'Jost', sans-serif;
font-size: 0.78rem;
font-weight: 500;
color: #f5efe6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.p-index .farmacia-strip-data a {
color: inherit;
text-decoration: none;
}
@media (max-width: 420px) {
body.p-index .farmacia-strip { padding: 6px 12px; }
body.p-index .farmacia-strip-data { font-size: 0.72rem; }
}
/* ═══════════════════════════════════════════════
DATOS-UTILES
═══════════════════════════════════════════════ */
body.p-datos html { scroll-behavior:smooth; }
body.p-datos body { font-family:'Jost',sans-serif; background:var(--blanco); color:var(--texto); overflow-x:hidden; }
/* NAV */
body.p-datos nav {
position:fixed; top:0; left:0; right:0; z-index:100;
display:flex; align-items:center; justify-content:space-between;
padding:16px 48px;
background:rgba(29,44,38,0.97); backdrop-filter:blur(12px);
}
body.p-datos .nav-logo img { height:64px; width:auto; }
body.p-datos .nav-actions { display:flex; align-items:center; gap:20px; }
body.p-datos .nav-back {
display:flex; align-items:center; gap:8px; color:var(--arena);
text-decoration:none; font-size:0.8rem; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; opacity:0.8; transition:opacity 0.2s;
}
body.p-datos .nav-back:hover { opacity:1; color:var(--madera-claro); }
body.p-datos .nav-cta {
background:var(--madera-claro); color:var(--verde); padding:9px 20px;
border-radius:var(--radius-md); text-decoration:none; font-size:0.8rem; font-weight:600;
letter-spacing:0.08em; text-transform:uppercase; transition:background 0.2s;
}
body.p-datos .nav-cta:hover { background:var(--arena); }
/* HERO */
body.p-datos .hero {
height:44vh; min-height:300px; position:relative;
display:flex; align-items:flex-end; padding:0 48px 48px;
background:
linear-gradient(160deg,rgba(20,35,28,0.72) 0%,rgba(45,74,62,0.3) 60%,rgba(20,35,28,0.88) 100%),
url('https://images.unsplash.com/photo-1599059813005-11265ba4b4ce?w=1400&q=80') center 40%/cover;
}
body.p-datos .hero-content { color:white; }
body.p-datos .hero-eyebrow { font-size:0.73rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--madera-claro); margin-bottom:10px; }
body.p-datos .hero-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.6rem); font-weight:400; line-height:1.1; }
body.p-datos .hero-title em { font-style:italic; color:var(--madera-claro); }
body.p-datos .hero-sub { margin-top:10px; font-size:0.95rem; color:rgba(255,255,255,0.72); font-weight:300; }
/* EMERGENCY BANNER */
body.p-datos .emerg-banner {
background:var(--madera);
padding:20px 48px;
display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;
}
body.p-datos .emerg-item {
display:flex; align-items:center; gap:10px;
background:rgba(255,255,255,0.12); border-radius:var(--radius-sm);
padding:10px 18px;
}
body.p-datos .emerg-num {
font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700;
color:white; line-height:1;
}
body.p-datos .emerg-label {
font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
color:rgba(255,255,255,0.85); font-weight:500;
}
body.p-datos .emerg-item a { text-decoration:none; color:inherit; }
/* CONTENT */
body.p-datos .content { max-width:980px; margin:0 auto; padding:56px 48px 120px; }
/* SECTION */
body.p-datos .seccion { margin-bottom:68px; scroll-margin-top:90px; }
body.p-datos .sec-header {
display:flex; align-items:center; gap:14px;
margin-bottom:28px; padding-bottom:14px;
border-bottom:2px solid var(--arena);
}
body.p-datos .sec-icon {
width:44px; height:44px; border-radius:var(--radius-sm);
background:var(--verde); color:var(--madera-claro);
display:flex; align-items:center; justify-content:center;
font-size:1.3rem; flex-shrink:0;
}
body.p-datos .sec-title {
font-family:'Playfair Display',serif; font-size:1.5rem;
font-weight:400; color:var(--verde);
}
body.p-datos .sec-sub { font-size:0.82rem; color:var(--gris); margin-top:2px; }
/* CARDS GRID */
body.p-datos .cards-grid {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
gap:16px;
}
body.p-datos .card {
background:white; border-radius:var(--radius-md);
border:1px solid var(--arena); padding:20px;
display:flex; flex-direction:column; gap:10px;
box-shadow:0 1px 4px rgba(0,0,0,0.05);
transition:box-shadow 0.2s;
}
body.p-datos .card:hover { box-shadow:0 4px 16px rgba(45,74,62,0.1); }
body.p-datos .card-name {
font-weight:600; font-size:0.95rem; color:var(--texto);
display:flex; align-items:center; gap:8px;
}
body.p-datos .card-name .emoji { font-size:1.1rem; }
body.p-datos .card-address {
font-size:0.8rem; color:var(--gris); line-height:1.4;
}
body.p-datos .card-actions { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
body.p-datos .card-btn {
display:flex; align-items:center; gap:8px;
padding:9px 14px; border-radius:var(--radius-sm);
text-decoration:none; font-size:0.8rem; font-weight:500;
transition:opacity 0.2s; letter-spacing:0.02em;
}
body.p-datos .card-btn:hover { opacity:0.82; }
body.p-datos .card-btn-phone {
background:var(--verde); color:white;
}
body.p-datos .card-btn-phone-alt {
background:rgba(45,74,62,0.08); color:var(--verde);
border:1px solid rgba(45,74,62,0.18);
}
body.p-datos .card-btn-map {
background:var(--crema); color:var(--madera);
border:1px solid var(--arena);
}
body.p-datos .card-btn-wa {
background:#25d366; color:white;
}
body.p-datos .card-note {
font-size:0.76rem; color:var(--gris); line-height:1.45;
padding-top:6px; border-top:1px solid var(--arena);
font-style:italic;
}
body.p-datos .card-tag {
display:inline-block; font-size:0.68rem; letter-spacing:0.08em;
text-transform:uppercase; padding:2px 8px; border-radius:4px;
background:var(--crema); color:var(--madera); font-weight:600;
}
/* ANCHOR MENU */
body.p-datos .anchor-menu {
background:var(--verde); padding:0 48px;
display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
border-bottom:1px solid rgba(255,255,255,0.08);
position:sticky; top:96px; z-index:90;
}
body.p-datos .anchor-menu::-webkit-scrollbar { display:none; }
body.p-datos .anchor-btn {
background:none; border:none; cursor:pointer;
color:rgba(232,220,200,0.55); font-family:'Jost',sans-serif;
font-size:0.75rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
padding:15px 18px; border-bottom:2px solid transparent;
transition:all 0.2s; white-space:nowrap; text-decoration:none;
display:block;
}
body.p-datos .anchor-btn:hover { color:var(--madera-claro); border-bottom-color:var(--madera-claro); }
/* FULL-WIDTH INFO BOX */
body.p-datos .info-box {
background:var(--crema); border-radius:var(--radius-md);
border-left:4px solid var(--madera-claro);
padding:18px 22px; margin-bottom:20px;
font-size:0.85rem; color:var(--texto); line-height:1.6;
}
body.p-datos .info-box strong { color:var(--verde); }
/* WA FLOAT */
body.p-datos .wa-btn {
position:fixed; right:24px; bottom:24px;
width:54px; height:54px; background:#25d366; border-radius:50%;
display:flex; align-items:center; justify-content:center;
text-decoration:none; box-shadow:0 4px 16px rgba(37,211,102,0.4);
z-index:200; transition:transform 0.2s;
}
body.p-datos .wa-btn:hover { transform:scale(1.08); }
/* RESPONSIVE */
@media (max-width:700px) {
body.p-datos nav { padding:12px 20px; }
body.p-datos .nav-logo img { height:48px; }
body.p-datos .hero { padding:0 20px 36px; }
body.p-datos .emerg-banner { padding:16px 20px; gap:8px; }
body.p-datos .emerg-num { font-size:1.2rem; }
body.p-datos .content { padding:40px 20px 100px; }
body.p-datos .anchor-menu { top:72px; padding:0 20px; }
body.p-datos .cards-grid { grid-template-columns:1fr; }
}
@media (max-width:420px) {
body.p-datos .emerg-item { padding:8px 12px; width:calc(50% - 6px); }
}
/* TURNO CARD */
body.p-datos .turno-card {
background: var(--verde);
border-radius: var(--radius-lg);
padding: 24px 28px;
margin-bottom: 48px;
color: white;
}
body.p-datos .turno-header {
display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px;
}
body.p-datos .turno-icon {
font-size: 2rem; line-height: 1; flex-shrink: 0;
}
body.p-datos .turno-title {
font-family: 'Playfair Display', serif;
font-size: 1.3rem; font-weight: 400;
color: var(--madera-claro); margin: 0 0 4px;
}
body.p-datos .turno-note {
font-size: 0.75rem; color: rgba(255,255,255,0.55);
margin: 0; letter-spacing: 0.03em;
}
body.p-datos .turno-body {
font-size: 1.05rem; font-weight: 500;
color: var(--arena); line-height: 1.6;
margin-bottom: 12px;
}
body.p-datos .turno-body a { color: var(--madera-claro); text-decoration: none; }
body.p-datos .turno-source {
font-size: 0.72rem; color: rgba(255,255,255,0.35);
margin: 0;
}
body.p-datos .turno-source a { color: rgba(255,255,255,0.45); }
/* ═══════════════════════════════════════════════
QUE-HACER
═══════════════════════════════════════════════ */
body.p-qh html { scroll-behavior:smooth; }
body.p-qh body { font-family:'Jost',sans-serif; background:var(--blanco); color:var(--texto); overflow-x:hidden; }
body.p-qh nav {
position:fixed; top:0; left:0; right:0; z-index:100;
display:flex; align-items:center; justify-content:space-between;
padding:16px 48px;
background:rgba(29,44,38,0.97); backdrop-filter:blur(12px);
}
body.p-qh .nav-logo img { height:64px; width:auto; opacity:1; }
body.p-qh .nav-back {
display:flex; align-items:center; gap:8px; color:var(--arena);
text-decoration:none; font-size:0.8rem; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; opacity:0.8; transition:opacity 0.2s;
}
body.p-qh .nav-back:hover { opacity:1; color:var(--madera-claro); }
body.p-qh .nav-cta {
background:var(--madera-claro); color:var(--verde); padding:9px 20px;
border-radius:var(--radius-md); text-decoration:none; font-size:0.8rem; font-weight:600;
letter-spacing:0.08em; text-transform:uppercase; transition:background 0.2s;
}
body.p-qh .nav-cta:hover { background:var(--arena); }
body.p-qh .hero {
height:52vh; min-height:360px; position:relative;
display:flex; align-items:flex-end; padding:0 48px 52px;
background:linear-gradient(160deg,rgba(20,35,28,0.65) 0%,rgba(45,74,62,0.3) 60%,rgba(20,35,28,0.82) 100%),
url('https://media.staticontent.com/media/pictures/13b60a5b-f162-42f4-a7bf-a47b868724ff') center/cover;
}
body.p-qh .hero-content { color:white; }
body.p-qh .hero-eyebrow { font-size:0.73rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--madera-claro); margin-bottom:10px; }
body.p-qh .hero-title { font-family:'Playfair Display',serif; font-size:clamp(2.2rem,5vw,4rem); font-weight:400; line-height:1.1; }
body.p-qh .hero-title em { font-style:italic; color:var(--madera-claro); }
body.p-qh .hero-sub { margin-top:10px; font-size:0.95rem; color:rgba(255,255,255,0.72); font-weight:300; }
body.p-qh .hero-source { margin-top:14px; font-size:0.72rem; color:rgba(255,255,255,0.45); letter-spacing:0.08em; }
body.p-qh .hero-source a { color:var(--madera-claro); text-decoration:none; }
body.p-qh .filter-bar {
background:var(--verde); padding:0 48px;
display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
border-bottom:1px solid rgba(255,255,255,0.08);
}
body.p-qh .filter-bar::-webkit-scrollbar { display:none; }
body.p-qh .filter-btn {
background:none; border:none; cursor:pointer;
color:rgba(232,220,200,0.55); font-family:'Jost',sans-serif;
font-size:0.77rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
padding:17px 20px; border-bottom:2px solid transparent;
transition:all 0.2s; white-space:nowrap;
}
body.p-qh .filter-btn:hover,
body.p-qh .filter-btn.active { color:var(--madera-claro); border-bottom-color:var(--madera-claro); }
body.p-qh .content { max-width:1200px; margin:0 auto; padding:64px 48px 100px; }
/* SEASONAL */
body.p-qh .seasonal {
display:grid; grid-template-columns:repeat(4,1fr);
gap:1px; background:var(--arena); border-radius:var(--radius-md);
overflow:hidden; margin-bottom:72px;
}
body.p-qh .season-col { background:var(--crema); padding:26px 22px; }
body.p-qh .season-col h4 {
font-family:'Playfair Display',serif; font-size:1rem;
color:var(--madera); margin-bottom:14px;
}
body.p-qh .season-col ul { list-style:none; }
body.p-qh .season-col li {
font-size:0.82rem; color:var(--gris); padding:5px 0;
border-bottom:1px solid rgba(0,0,0,0.05);
}
body.p-qh .season-col li::before { content:'· '; color:var(--madera-claro); font-weight:bold; }
/* CATEGORIA */
body.p-qh .categoria { margin-bottom:76px; scroll-margin-top:96px; }
body.p-qh .cat-header {
display:flex; align-items:flex-start; gap:16px; margin-bottom:32px;
padding-bottom:16px; border-bottom:1px solid var(--arena);
}
body.p-qh .cat-icon {
width:50px; height:50px; background:var(--verde); color:var(--madera-claro);
border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
font-size:1.4rem; flex-shrink:0; margin-top:4px;
}
body.p-qh .cat-header h2 { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:400; color:var(--verde); }
body.p-qh .cat-header h2 em { font-style:italic; color:var(--madera); }
body.p-qh .cat-header p { font-size:0.86rem; color:var(--gris); margin-top:5px; line-height:1.55; }
body.p-qh .cat-source { font-size:0.7rem; color:var(--madera); margin-top:4px; }
body.p-qh .cat-source a { color:var(--madera-claro); text-decoration:none; }
body.p-qh .cat-source a:hover { text-decoration:underline; }
/* CARDS */
body.p-qh .act-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:22px; }
body.p-qh .act-card {
background:var(--crema); border-radius:var(--radius-md); overflow:hidden;
border-left:3px solid transparent; transition:border-color 0.25s, box-shadow 0.25s;
}
body.p-qh .act-card:hover { border-left-color:var(--madera-claro); box-shadow:0 8px 26px rgba(0,0,0,0.08); }
body.p-qh .act-img { height:190px; overflow:hidden; background:var(--verde-claro); }
body.p-qh .act-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; display:block; }
body.p-qh .act-card:hover .act-img img { transform:scale(1.04); }
body.p-qh .act-body { padding:20px 22px; }
body.p-qh .act-season { font-size:0.67rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--madera); font-weight:600; margin-bottom:6px; }
body.p-qh .act-body h3 { font-family:'Playfair Display',serif; font-size:1.08rem; color:var(--verde); margin-bottom:8px; }
body.p-qh .act-body p { font-size:0.86rem; color:var(--gris); line-height:1.68; margin-bottom:12px; }
body.p-qh .act-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
body.p-qh .act-tag { background:var(--verde); color:var(--arena); font-size:0.67rem; padding:3px 9px; border-radius:var(--radius-md); }
body.p-qh .act-dist { font-size:0.74rem; color:var(--gris); padding-top:10px; border-top:1px solid rgba(0,0,0,0.07); }
body.p-qh .act-link { font-size:0.72rem; color:var(--madera-claro); text-decoration:none; font-weight:600; }
body.p-qh .act-link:hover { text-decoration:underline; }
/* TIP */
body.p-qh .tip-box {
background:var(--verde); border-radius:var(--radius-md); padding:20px 24px;
margin-top:28px; display:flex; gap:13px; align-items:flex-start;
}
body.p-qh .tip-box span { font-size:1.3rem; flex-shrink:0; margin-top:2px; }
body.p-qh .tip-box p { color:rgba(232,220,200,0.82); font-size:0.86rem; line-height:1.65; }
body.p-qh .tip-box strong { color:var(--madera-claro); }
/* BACK */
body.p-qh .back-cta { text-align:center; padding:64px 48px; background:var(--verde); }
body.p-qh .back-cta h3 { font-family:'Playfair Display',serif; font-size:1.7rem; color:var(--arena); font-weight:400; margin-bottom:22px; }
body.p-qh .back-cta a {
display:inline-block; border:1.5px solid var(--madera-claro); color:var(--madera-claro);
padding:13px 38px; text-decoration:none; font-size:0.83rem; font-weight:600;
letter-spacing:0.1em; text-transform:uppercase; border-radius:var(--radius-md); transition:all 0.25s; margin:6px;
}
body.p-qh .back-cta a:hover { background:var(--madera-claro); color:var(--verde); }
body.p-qh .back-cta .btn-solid { background:var(--madera-claro); color:var(--verde); }
body.p-qh .back-cta .btn-solid:hover { background:var(--arena); border-color:var(--arena); }
body.p-qh footer { background:#111c17; padding:32px 48px; text-align:center; }
body.p-qh footer p { color:rgba(232,220,200,0.38); font-size:0.78rem; margin:3px 0; }
@media (max-width:900px) {
body.p-qh nav { padding:13px 20px; }
body.p-qh .hero { padding:0 24px 44px; }
body.p-qh .filter-bar { padding:0 16px; }
body.p-qh .content { padding:44px 22px 70px; }
body.p-qh .act-grid { grid-template-columns:1fr; }
body.p-qh .seasonal { grid-template-columns:1fr 1fr; }
body.p-qh .back-cta { padding:46px 22px; }
}
@media (max-width:560px) { body.p-qh .seasonal { grid-template-columns:1fr; } }
/* FAVORITOS */
body.p-qh .fav-btn {
position:absolute; top:8px; right:8px;
background:none; border:none; cursor:pointer;
font-size:1.2rem; line-height:1; padding:4px;
color:rgba(0,0,0,0.2); transition:color 0.2s, transform 0.15s;
z-index:2;
}
body.p-qh .fav-btn:hover { color:var(--madera-claro); transform:scale(1.2); }
body.p-qh .fav-btn.active { color:#e8b84b; }
body.p-qh .activity-card { position:relative; }
/* ── QUÉ HACER PAGE ────────────────────────────────── */
body.p-qh .qh-hero {
background-color: var(--verde);
background-size: cover;
background-position: center 60%;
background-repeat: no-repeat;
padding: 60px 48px 44px;
padding-top: calc(72px + 48px);
text-align: center;
position: relative;
overflow: hidden;
}
body.p-qh .qh-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(20,35,28,0.55) 0%, rgba(20,35,28,0.35) 50%, rgba(20,35,28,0.55) 100%);
}
body.p-qh .qh-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(20,35,28,0.55) 0%, rgba(20,35,28,0.35) 50%, rgba(20,35,28,0.55) 100%);
}
body.p-qh .qh-hero-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
body.p-qh .season-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(196,154,108,0.18);
border: 1px solid rgba(196,154,108,0.4);
color: var(--madera-claro);
padding: 8px 20px;
border-radius: var(--radius-pill);
font-size: 0.9rem;
font-weight: 600;
font-family: var(--font-sans);
letter-spacing: 0.06em;
margin-bottom: 16px;
}
body.p-qh .rain-indicator {
display: none;
align-items: center;
gap: 6px;
background: rgba(100,150,200,0.25);
border: 1px solid rgba(100,150,200,0.5);
color: #a8d4f5;
padding: 4px 14px;
border-radius: var(--radius-pill);
font-size: 0.78rem;
font-family: var(--font-sans);
font-weight: 600;
margin-left: 8px;
}
body.p-qh .rain-indicator.visible { display: inline-flex; }
/* Season selector */
body.p-qh .season-selector {
background: var(--verde);
padding: 12px 48px;
display: flex;
align-items: center;
gap: 16px;
justify-content: center;
position: sticky;
top: 96px;
z-index: 90;
border-bottom: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 2px 16px rgba(0,0,0,0.2);
flex-wrap: wrap;
}
/* Search */
body.p-qh .qh-search {
width: 100%;
max-width: 320px;
padding: 9px 16px 9px 38px;
background: rgba(0,0,0,0.25);
border: 1px solid rgba(196,154,108,0.3);
border-radius: var(--radius-pill);
color: var(--arena);
font-family: var(--font-sans);
font-size: 0.88rem;
outline: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 12px center;
}
body.p-qh .qh-search::placeholder { color: rgba(196,154,108,0.5); }
/* Tag filters */
body.p-qh .tag-filters {
background: var(--blanco);
padding: 12px 48px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(0,0,0,0.06);
position: sticky;
top: 148px;
z-index: 89;
}
body.p-qh .tag-btn {
background: white;
border: 1.5px solid rgba(0,0,0,0.1);
color: var(--gris);
padding: 7px 14px;
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: all 0.2s;
}
body.p-qh .tag-btn:hover { border-color: var(--madera-claro); color: var(--madera); }
body.p-qh .tag-btn.active {
background: var(--verde);
border-color: var(--verde);
color: white;
}
body.p-qh .tag-count {
background: rgba(0,0,0,0.08);
border-radius: 20px;
padding: 1px 7px;
font-size: 0.7rem;
margin-left: 4px;
}
body.p-qh .tag-btn.active .tag-count { background: rgba(255,255,255,0.2); }
/* Activities grid */
body.p-qh .qh-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
max-width: 1200px;
margin: 0 auto;
}
body.p-qh .activity-card {
background: white;
border-radius: var(--radius-md);
padding: 16px 18px;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
border-top: 3px solid var(--verde);
display: flex;
flex-direction: column;
gap: 6px;
user-select: none;
}
body.p-qh .activity-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
body.p-qh .activity-card.imperdible { border-top-color: var(--madera-claro); }
body.p-qh .activity-card.hidden { display: none; }
body.p-qh .card-emoji { font-size: 1.5rem; line-height: 1; }
body.p-qh .card-name {
font-family: var(--font-serif);
font-size: 0.97rem;
font-weight: 400;
color: var(--verde);
line-height: 1.3;
}
body.p-qh .card-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2px;
flex-wrap: wrap;
gap: 4px;
}
body.p-qh .card-distance { font-size: 0.72rem; color: var(--gris); }
body.p-qh .card-price { font-size: 0.72rem; color: var(--madera); font-weight: 600; }
body.p-qh .card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
body.p-qh .card-tag {
font-size: 0.64rem;
padding: 2px 7px;
border-radius: 20px;
background: var(--crema);
color: var(--gris);
font-family: var(--font-sans);
font-weight: 500;
}
body.p-qh .card-tag.imperdible { background: rgba(196,154,108,0.15); color: var(--madera); }
body.p-qh .card-tag.lluvia { background: rgba(100,150,200,0.12); color: #5a8fc0; }
body.p-qh .card-tag.ninos { background: rgba(100,200,100,0.12); color: #4a8a4a; }
body.p-qh .card-tag.gratis { background: rgba(74,124,106,0.12); color: var(--verde-claro); }
body.p-qh .card-chevron {
font-size: 0.7rem;
color: var(--madera-claro);
margin-top: auto;
text-align: right;
}
/* Modal */
body.p-qh .modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 500;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(3px);
}
body.p-qh .modal-overlay.open { display: flex; }
body.p-qh .modal-box {
background: white;
border-radius: var(--radius-md);
max-width: 540px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
position: relative;
animation: modalIn 0.2s ease;
}
@keyframes modalIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
body.p-qh .modal-header {
background: var(--verde);
padding: 28px 28px 20px;
border-radius: var(--radius-md) var(--radius-md) 0 0;
position: sticky;
top: 0;
z-index: 1;
}
body.p-qh .modal-close {
position: absolute;
top: 16px; right: 16px;
background: rgba(255,255,255,0.15);
border: none;
color: var(--arena);
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
body.p-qh .modal-close:hover { background: rgba(255,255,255,0.25); }
body.p-qh .modal-emoji { font-size: 2rem; margin-bottom: 8px; }
body.p-qh .modal-title {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 400;
color: var(--arena);
margin: 0 0 6px;
}
body.p-qh .modal-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; }
body.p-qh .modal-desc {
font-size: 0.97rem;
color: var(--texto);
line-height: 1.7;
}
body.p-qh .modal-info-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.88rem;
color: var(--gris);
}
body.p-qh .modal-info-icon { width: 20px; flex-shrink: 0; text-align: center; }
body.p-qh .modal-info-label { font-weight: 600; color: var(--verde); margin-right: 4px; }
body.p-qh .modal-info-link { color: var(--madera); text-decoration: none; font-weight: 600; }
body.p-qh .modal-info-link:hover { text-decoration: underline; }
body.p-qh .modal-tags { display: flex; gap: 6px; flex-wrap: wrap; }
body.p-qh .modal-tag {
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 20px;
background: var(--crema);
color: var(--gris);
font-family: var(--font-sans);
font-weight: 500;
}
body.p-qh .modal-notes {
background: var(--crema);
border-radius: var(--radius-md);
padding: 14px 16px;
font-size: 0.88rem;
color: var(--gris);
line-height: 1.6;
border-left: 3px solid var(--madera-claro);
}
/* No results */
body.p-qh .no-results {
text-align: center;
padding: 60px 20px;
color: var(--gris);
font-family: var(--font-sans);
display: none;
}
body.p-qh .no-results.visible { display: block; }
/* Responsive */
@media (max-width: 768px) {
body.p-qh .qh-hero { padding: calc(96px + 40px) 20px 40px; }
body.p-qh .qh-content { padding: 32px 16px; }
body.p-qh .season-selector { padding: 12px 16px; gap: 8px; }
body.p-qh .tag-filters { padding: 12px 16px; }
body.p-qh .qh-grid { grid-template-columns: 1fr; }
body.p-qh .season-selector { top: 74px; }
body.p-qh .tag-filters { top: 126px; padding: 10px 16px; }
body.p-qh .season-btn { padding: 8px 14px; font-size: 0.78rem; }
body.p-qh .qh-search { max-width: 100%; }
}
/* ═══════════════════════════════════════════════
DONDE-COMER
═══════════════════════════════════════════════ */
body.p-dc html {scroll-behavior:smooth;}
body.p-dc body {font-family:'Jost',sans-serif;background:var(--blanco);color:var(--texto);overflow-x:hidden;}
body.p-dc nav {position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
justify-content:space-between;padding:16px 48px;
background:rgba(29,44,38,0.97);backdrop-filter:blur(12px);}
body.p-dc .nav-logo img {height:64px;width:auto;opacity:1;}
body.p-dc .nav-back {color:var(--arena);text-decoration:none;font-size:0.8rem;font-weight:500;
letter-spacing:0.08em;text-transform:uppercase;opacity:0.8;transition:opacity 0.2s;}
body.p-dc .nav-back:hover {opacity:1;color:var(--madera-claro);}
body.p-dc .nav-cta:hover {background:var(--arena);}
body.p-dc .hero {height:auto;min-height:160px;position:relative;display:flex;align-items:center;justify-content:center;
padding:110px 48px 40px;
background:var(--verde);text-align:center;}
body.p-dc .hero-content {color:white;}
body.p-dc .hero-eyebrow {font-size:0.73rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--madera-claro);margin-bottom:10px;}
body.p-dc .hero-title {font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.8rem);font-weight:400;line-height:1.1;}
body.p-dc .hero-title em {font-style:italic;color:var(--madera-claro);}
body.p-dc .hero-sub {margin-top:10px;font-size:0.93rem;color:rgba(255,255,255,0.7);font-weight:300;}
/* FILTER TABS */
body.p-dc .filter-bar {background:var(--verde);padding:14px 48px;display:flex;align-items:center;gap:14px;
border-bottom:1px solid rgba(255,255,255,0.08);position:sticky;top: 96px;z-index:90;
box-shadow:0 2px 12px rgba(0,0,0,0.18);}body.p-dc .filter-select:focus {border-color:var(--madera-claro);}
@media (max-width:600px){body.p-dc .filter-bar {padding:12px 24px;gap:10px;}}
body.p-dc .content {max-width:1100px;margin:0 auto;padding:56px 48px 90px;}
/* SECTION HEADER */
body.p-dc .sec-header {display:flex;align-items:flex-start;gap:16px;margin-bottom:28px;
padding-bottom:14px;border-bottom:2px solid var(--arena);scroll-margin-top:170px;}
body.p-dc .sec-icon {width:46px;height:72px;background:var(--verde);color:var(--madera-claro);
border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
font-size:1.25rem;flex-shrink:0;}
body.p-dc .sec-header h2 {font-family:'Playfair Display',serif;font-size:1.55rem;font-weight:400;color:var(--verde);}
body.p-dc .sec-header h2 em {font-style:italic;color:var(--madera);}
body.p-dc .sec-header p {font-size:0.83rem;color:var(--gris);margin-top:4px;line-height:1.5;}
body.p-dc .sec-note {font-size:0.7rem;color:var(--madera);margin-top:3px;}
body.p-dc .sec-note a {color:var(--madera-claro);text-decoration:none;}
body.p-dc .sec-note a:hover {text-decoration:underline;}
/* RESTAURANT CARDS - main */
body.p-dc .rest-card:hover {box-shadow:0 8px 28px rgba(0,0,0,0.1);transform:translateY(-3px);}
body.p-dc .rest-card:hover
.btn-wa:hover {background:#1da851;}
body.p-dc .btn-map:hover {background:var(--verde-claro);}
/* LIST TABLE - for markets/shops */
body.p-dc .shop-card:hover {box-shadow:0 5px 18px rgba(0,0,0,0.07);}
body.p-dc .oficial-item {background:var(--crema);border-radius:var(--radius-md);padding:14px 16px;
border-top:2px solid var(--arena);transition:border-color 0.2s;}
body.p-dc .oficial-item:hover {border-top-color:var(--madera-claro);}
body.p-dc .oficial-cat {font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--madera);font-weight:600;margin-bottom:4px;}
body.p-dc .oficial-item h4 {font-family:'Playfair Display',serif;font-size:0.95rem;color:var(--verde);margin-bottom:4px;}
body.p-dc .oficial-item p {font-size:0.78rem;color:var(--gris);margin-bottom:6px;}
body.p-dc .oficial-item a {font-size:0.72rem;color:var(--madera-claro);text-decoration:none;font-weight:600;}
body.p-dc .oficial-item a:hover {text-decoration:underline;}
/* TIP */
body.p-dc .section-gap {margin-bottom:64px;}
body.p-dc footer {background:#111c17;padding:28px 48px;text-align:center;}
body.p-dc footer p {color:rgba(232,220,200,0.38);font-size:0.77rem;margin:3px 0;}
@media(max-width:900px){
body.p-dc nav {padding:13px 20px;}
body.p-dc .hero {padding:96px 22px 40px;}
body.p-dc .filter-bar {padding:0 14px;}
body.p-dc .content {padding:44px 20px 70px;}
}
/* DC Modal */
body.p-dc .dc-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:500; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px); }
body.p-dc .dc-modal-overlay
.dc-modal-box { background:white; border-radius:var(--radius-md); max-width:480px; width:100%; max-height:80vh; overflow-y:auto; animation:modalIn 0.2s ease; }
@keyframes modalIn { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
body.p-dc .dc-modal-header { background:var(--verde); padding:22px 22px 16px; border-radius:var(--radius-md) var(--radius-md) 0 0; position:sticky; top:0; }
body.p-dc .dc-modal-close { position:absolute; top:12px; right:12px; background:rgba(255,255,255,0.15); border:none; color:var(--arena); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:0.9rem; display:flex; align-items:center; justify-content:center; }
body.p-dc .dc-modal-body { padding:20px 22px; display:flex; flex-direction:column; gap:10px; }
body.p-dc .dc-modal-row { display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:var(--gris); }
/* FAVORITOS DC */
body.p-dc .oficial-item { position:relative; }
body.p-dc .dc-fav-btn {
position:absolute; top:8px; right:8px;
background:none; border:none; cursor:pointer;
font-size:1.1rem; padding:3px 5px; line-height:1;
color:rgba(0,0,0,0.15); transition:color 0.2s, transform 0.15s;
z-index:2;
}
body.p-dc .dc-fav-btn:hover { color:var(--madera-claro); transform:scale(1.15); }
body.p-dc .dc-fav-btn.active { color:#e8b84b; }
/* ═══════════════════════════════════════════════
ESTADIA
═══════════════════════════════════════════════ */
body.p-estadia html { scroll-behavior: smooth; }
body.p-estadia body {
font-family: 'Jost', sans-serif;
background: var(--blanco);
color: var(--texto);
overflow-x: hidden;
}
/* NAV */
body.p-estadia nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 32px;
background: rgba(29, 44, 38, 0.92);
backdrop-filter: blur(12px);
transition: all 0.3s;
}
body.p-estadia .nav-links {
display: flex;
gap: 18px;
list-style: none;
}
body.p-estadia .nav-links a {
color: var(--arena);
text-decoration: none;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.85;
transition: opacity 0.2s, color 0.2s;
}
body.p-estadia .nav-links a:hover { opacity: 1; color: var(--madera-claro); }
body.p-estadia .nav-cta {
background: var(--madera-claro);
color: var(--verde) !important;
padding: 7px 16px;
border-radius:var(--radius-md);
font-weight: 600 !important;
opacity: 1 !important;
}
body.p-estadia .nav-cta:hover { background: var(--arena) !important; }
/* HERO */
body.p-estadia .hero {
height: 44vh;
min-height: 280px;
position: relative;
display: flex;
align-items: flex-end;
padding: 0 48px 48px;
margin-top: 96px;
overflow: hidden;
background: linear-gradient(160deg, rgba(20,35,28,0.72) 0%, rgba(45,74,62,0.3) 60%, rgba(20,35,28,0.88) 100%), var(--verde);
background-size: cover;
background-position: center 40%;
}
body.p-estadia .hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@keyframes heroZoom {
from { transform: scale(1.05); }
to { transform: scale(1.0); }
}
body.p-estadia .hero-content {
color: white;
position: relative;
z-index: 1;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
body.p-estadia .hero-eyebrow {
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--madera-claro);
font-weight: 500;
margin-bottom: 18px;
}
body.p-estadia .hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 1.05;
margin-bottom: 10px;
font-weight: 400;
}
body.p-estadia .hero-title em {
font-style: italic;
color: var(--madera-claro);
}
body.p-estadia .hero-subtitle {
font-size: 1.05rem;
color: rgba(255,255,255,0.8);
margin-bottom: 42px;
font-weight: 300;
letter-spacing: 0.04em;
}
body.p-estadia .hero-btns {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
body.p-estadia .btn-primary {
background: var(--madera-claro);
color: var(--verde);
padding: 14px 36px;
text-decoration: none;
font-weight: 600;
font-size: 0.88rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius:var(--radius-md);
transition: all 0.25s;
}
body.p-estadia .btn-primary:hover { background: white; }
body.p-estadia .btn-outline {
border: 1.5px solid rgba(255,255,255,0.6);
color: white;
padding: 14px 20px;
text-decoration: none;
font-weight: 400;
font-size: 0.88rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius:var(--radius-md);
transition: all 0.25s;
backdrop-filter: blur(4px);
background: rgba(255,255,255,0.08);
}
body.p-estadia .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: white; }
body.p-estadia .hero-scroll {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.55);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
animation: bounce 2s infinite;
}
body.p-estadia .hero-scroll::after {
content: '';
width: 1px;
height: 36px;
background: rgba(255,255,255,0.4);
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* SECTIONS */
body.p-estadia section { scroll-margin-top: 70px; }
body.p-estadia .section-tag {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--madera);
font-weight: 600;
margin-bottom: 12px;
}
body.p-estadia h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 400;
line-height: 1.2;
color: var(--verde);
}
body.p-estadia h2 em { font-style: italic; color: var(--madera); }
/* INTRO STRIP */
body.p-estadia .intro-strip {
background: var(--verde);
padding: 28px 48px;
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
body.p-estadia .strip-item {
text-align: center;
color: var(--arena);
}
body.p-estadia .strip-item strong {
display: block;
font-family: 'Playfair Display', serif;
font-size: 1.7rem;
color: var(--madera-claro);
}
body.p-estadia .strip-item span {
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.75;
}
/* CABAÑAS */
body.p-estadia .cabanas { padding: 100px 48px; background: var(--blanco); }
body.p-estadia .cabanas-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-estadia .cabanas-header p {
margin-top: 18px;
color: var(--gris);
line-height: 1.7;
font-size: 1.02rem;
}
body.p-estadia .cabanas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
max-width: 1200px;
margin: 0 auto 80px;
}
body.p-estadia .cabana-card {
background: var(--crema);
border-radius:var(--radius-md);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
body.p-estadia .cabana-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(29,44,38,0.12); }
body.p-estadia .cabana-img {
height: 220px;
background: var(--verde-claro);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
body.p-estadia .cabana-img img { width: 100%; height: 100%; object-fit: cover; }
body.p-estadia .cabana-num {
position: absolute;
top: 16px; left: 16px;
background: var(--madera-claro);
color: var(--verde);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.14em;
padding: 5px 12px;
border-radius:var(--radius-md);
}
body.p-estadia .cabana-body { padding: 24px; }
body.p-estadia .cabana-body h3 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: var(--verde);
margin-bottom: 8px;
}
body.p-estadia .cabana-body p { font-size: 0.88rem; color: var(--gris); line-height: 1.6; margin-bottom: 16px; }
body.p-estadia .cabana-features {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body.p-estadia .feature-tag {
background: var(--verde);
color: var(--arena);
font-size: 0.7rem;
padding: 4px 10px;
border-radius:var(--radius-md);
letter-spacing: 0.06em;
}
/* REGLAMENTO */
body.p-estadia .reglamento {
background: var(--verde);
padding: 90px 48px;
}
body.p-estadia .reglamento-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
}
body.p-estadia .reglamento h2 { color: var(--arena); }
body.p-estadia .reglamento h2 em { color: var(--madera-claro); }
body.p-estadia .reglamento .section-tag { color: var(--madera-claro); }
body.p-estadia .reglamento-intro { color: rgba(232,220,200,0.75); line-height: 1.7; margin-top: 18px; font-size: 0.95rem; }
body.p-estadia .reglas-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
body.p-estadia .regla-item {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius:var(--radius-md);
padding: 20px;
transition: background 0.2s;
}
body.p-estadia .regla-item:hover { background: rgba(255,255,255,0.11); }
body.p-estadia .regla-icon { font-size: 1.5rem; margin-bottom: 10px; }
body.p-estadia .regla-item h4 {
color: var(--madera-claro);
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.06em;
margin-bottom: 7px;
text-transform: uppercase;
}
body.p-estadia .regla-item p { color: rgba(232,220,200,0.8); font-size: 0.84rem; line-height: 1.6; }
/* TURISMO */
body.p-estadia .turismo { padding: 100px 48px; background: var(--crema); }
body.p-estadia .turismo-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-estadia .turismo-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-estadia .turismo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
body.p-estadia .turismo-card {
background: white;
border-radius:var(--radius-md);
padding: 28px;
border-bottom: 3px solid transparent;
transition: border-color 0.3s, box-shadow 0.3s;
}
body.p-estadia .turismo-card:hover { border-color: var(--madera-claro); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
body.p-estadia .turismo-icon { font-size: 2rem; margin-bottom: 14px; }
body.p-estadia .turismo-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
color: var(--verde);
margin-bottom: 10px;
}
body.p-estadia .turismo-card p { color: var(--gris); font-size: 0.88rem; line-height: 1.65; }
body.p-estadia .turismo-tag {
display: inline-block;
margin-top: 14px;
font-size: 0.72rem;
color: var(--madera);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid var(--madera-claro);
padding-bottom: 2px;
}
/* RESTAURANTES */
body.p-estadia .restaurantes { padding: 100px 48px; background: var(--blanco); }
body.p-estadia .restaurantes-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-estadia .restaurantes-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-estadia .rest-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
max-width: 1200px;
margin: 0 auto;
}
body.p-estadia .rest-card {
border: 1.5px solid var(--arena);
border-radius:var(--radius-md);
padding: 30px;
position: relative;
transition: border-color 0.3s, box-shadow 0.3s;
}
body.p-estadia .rest-card:hover { border-color: var(--madera-claro); box-shadow: 0 10px 32px rgba(0,0,0,0.07); }
body.p-estadia .rest-type {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--madera);
margin-bottom: 8px;
}
body.p-estadia .rest-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: var(--verde);
margin-bottom: 10px;
}
body.p-estadia .rest-card p { color: var(--gris); font-size: 0.87rem; line-height: 1.65; margin-bottom: 16px; }
body.p-estadia .rest-especialidad {
background: var(--crema);
border-radius:var(--radius-md);
padding: 12px 16px;
font-size: 0.82rem;
color: var(--verde);
}
body.p-estadia .rest-especialidad strong { color: var(--madera); font-weight: 600; }
body.p-estadia .rest-stars { color: var(--madera-claro); font-size: 0.85rem; margin-bottom: 6px; }
/* PROVEEDORES */
body.p-estadia .proveedores { padding: 100px 48px; background: var(--verde); }
body.p-estadia .proveedores-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-estadia .proveedores-header h2 { color: var(--arena); }
body.p-estadia .proveedores-header h2 em { color: var(--madera-claro); }
body.p-estadia .proveedores-header .section-tag { color: var(--madera-claro); }
body.p-estadia .proveedores-header p { margin-top: 18px; color: rgba(232,220,200,0.75); line-height: 1.7; }
body.p-estadia .prov-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 28px;
max-width: 1100px;
margin: 0 auto;
}
body.p-estadia .prov-category h4 {
color: var(--madera-claro);
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.15);
display: flex;
align-items: center;
gap: 8px;
}
body.p-estadia .prov-list { list-style: none; }
body.p-estadia .prov-list li {
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
color: rgba(232,220,200,0.85);
font-size: 0.88rem;
line-height: 1.5;
}
body.p-estadia .prov-list li strong { color: var(--arena); font-weight: 500; }
body.p-estadia .prov-list li span { display: block; font-size: 0.78rem; opacity: 0.65; margin-top: 2px; }
/* GALERIA */
body.p-estadia .galeria { padding: 100px 48px; background: var(--crema); }
body.p-estadia .galeria-header { max-width: 600px; margin: 0 auto 50px; text-align: center; }
body.p-estadia .galeria-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-estadia .galeria-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 240px);
gap: 12px;
max-width: 1200px;
margin: 0 auto;
}
body.p-estadia .gal-item {
border-radius:var(--radius-md);
overflow: hidden;
background: var(--verde-claro);
position: relative;
}
body.p-estadia .gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
body.p-estadia .gal-item:hover img { transform: scale(1.05); }
body.p-estadia .gal-item:first-child { grid-column: span 2; grid-row: span 2; }
body.p-estadia .gal-label {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(20,35,28,0.7));
color: rgba(232,220,200,0.9);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 16px 14px 10px;
opacity: 0;
transition: opacity 0.3s;
}
body.p-estadia .gal-item:hover .gal-label { opacity: 1; }
/* MAPA */
body.p-estadia .mapa-section { padding: 100px 48px; background: var(--blanco); }
body.p-estadia .mapa-header { max-width: 600px; margin: 0 auto 50px; text-align: center; }
body.p-estadia .mapa-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-estadia .mapa-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 320px;
gap: 28px;
align-items: start;
}
body.p-estadia .mapa-iframe-box {
border-radius:var(--radius-md);
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
height: 500px;
}
body.p-estadia .mapa-iframe-box iframe { width: 100%; height: 100%; border: none; }
body.p-estadia .mapa-puntos h4 {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
color: var(--verde);
margin-bottom: 18px;
}
body.p-estadia .mapa-punto {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--arena);
}
body.p-estadia .mapa-punto:last-child { border-bottom: none; }
body.p-estadia .mapa-punto-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
body.p-estadia .mapa-punto-info h5 { font-size: 0.88rem; font-weight: 600; color: var(--verde); margin-bottom: 2px; }
body.p-estadia .mapa-punto-info p { font-size: 0.78rem; color: var(--gris); line-height: 1.4; }
/* TESTIMONIOS */
body.p-estadia .testimonios { padding: 100px 48px; background: var(--crema); }
body.p-estadia .testimonios-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-estadia .testimonios-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-estadia .testi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
max-width: 1200px;
margin: 0 auto 50px;
}
body.p-estadia .testi-card {
background: white;
border-radius:var(--radius-md);
padding: 32px;
position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
transition: box-shadow 0.3s;
}
body.p-estadia .testi-card:hover { box-shadow: 0 10px 36px rgba(0,0,0,0.1); }
body.p-estadia .testi-comilla {
font-family: 'Playfair Display', serif;
font-size: 4rem;
line-height: 0.8;
color: var(--madera-claro);
opacity: 0.5;
margin-bottom: 12px;
}
body.p-estadia .testi-card p {
color: var(--gris);
font-size: 0.92rem;
line-height: 1.75;
font-style: italic;
margin-bottom: 22px;
}
body.p-estadia .testi-autor {
display: flex;
align-items: center;
gap: 14px;
}
body.p-estadia .testi-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--verde);
display: flex;
align-items: center;
justify-content: center;
color: var(--madera-claro);
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 700;
flex-shrink: 0;
}
body.p-estadia .testi-autor-info h5 { font-size: 0.88rem; font-weight: 600; color: var(--verde); }
body.p-estadia .testi-autor-info span { font-size: 0.75rem; color: var(--gris); }
body.p-estadia .testi-stars { color: var(--madera-claro); font-size: 0.85rem; margin-bottom: 14px; }
body.p-estadia .testi-plataforma {
position: absolute;
top: 18px; right: 18px;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--madera);
font-weight: 600;
background: var(--crema);
padding: 4px 10px;
border-radius:var(--radius-md);
}
body.p-estadia .testi-cta {
text-align: center;
margin-top: 14px;
}
body.p-estadia .testi-cta a {
display: inline-block;
border: 1.5px solid var(--verde);
color: var(--verde);
padding: 12px 32px;
text-decoration: none;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius:var(--radius-md);
transition: all 0.25s;
}
body.p-estadia .testi-cta a:hover { background: var(--verde); color: var(--arena); }
/* CONTACTO */
body.p-estadia .contacto { padding: 100px 48px; background: var(--blanco); }
body.p-estadia .contacto-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
body.p-estadia .contacto-info h2 { margin-bottom: 18px; }
body.p-estadia .contacto-info p { color: var(--gris); line-height: 1.7; margin-bottom: 36px; }
body.p-estadia .contact-items { display: flex; flex-direction: column; gap: 22px; }
body.p-estadia .contact-item {
display: flex;
align-items: flex-start;
gap: 16px;
}
body.p-estadia .contact-icon {
width: 44px; height: 44px;
background: var(--verde);
color: var(--madera-claro);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
border-radius:var(--radius-md);
flex-shrink: 0;
}
body.p-estadia .contact-item h5 {
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gris);
margin-bottom: 3px;
}
body.p-estadia .contact-item a,
body.p-estadia .contact-item p {
color: var(--verde);
font-weight: 500;
text-decoration: none;
font-size: 0.95rem;
}
body.p-estadia .contact-item a:hover { color: var(--madera); }
body.p-estadia .contacto-form {
background: var(--crema);
padding: 42px;
border-radius:var(--radius-md);
}
body.p-estadia .contacto-form h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--verde);
margin-bottom: 28px;
}
body.p-estadia .form-group { margin-bottom: 20px; }
body.p-estadia .form-group label {
display: block;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gris);
margin-bottom: 7px;
font-weight: 500;
}
body.p-estadia .form-group input,
body.p-estadia .form-group textarea,
body.p-estadia .form-group select {
width: 100%;
padding: 12px 16px;
background: white;
border: 1.5px solid var(--arena);
border-radius:var(--radius-md);
font-family: 'Jost', sans-serif;
font-size: 0.9rem;
color: var(--texto);
outline: none;
transition: border-color 0.2s;
}
body.p-estadia .form-group input:focus,
body.p-estadia .form-group textarea:focus,
body.p-estadia .form-group select:focus {
border-color: var(--verde-claro);
}
body.p-estadia .form-group textarea { resize: vertical; min-height: 110px; }
body.p-estadia .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.p-estadia .form-submit {
width: 100%;
background: var(--verde);
color: var(--arena);
border: none;
padding: 15px;
font-family: 'Jost', sans-serif;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius:var(--radius-md);
cursor: pointer;
transition: background 0.25s;
margin-top: 6px;
}
body.p-estadia .form-submit:hover { background: var(--verde-claro); }
/* FOOTER */
body.p-estadia footer {
background: #111c17;
padding: 52px 48px 36px;
text-align: center;
}
body.p-estadia .footer-logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--arena);
margin-bottom: 12px;
}
body.p-estadia .footer-logo span { color: var(--madera-claro); font-style: italic; }
body.p-estadia footer p {
color: rgba(232,220,200,0.45);
font-size: 0.82rem;
margin-bottom: 8px;
}
body.p-estadia .footer-links {
display: flex;
justify-content: center;
gap: 28px;
margin: 22px 0;
flex-wrap: wrap;
}
body.p-estadia .footer-links a {
color: rgba(232,220,200,0.5);
text-decoration: none;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: color 0.2s;
}
body.p-estadia .footer-links a:hover { color: var(--madera-claro); }
/* WHATSAPP FLOAT */
body.p-estadia .wa-float {
position: fixed;
bottom: 28px;
right: 28px;
background: #25d366;
color: white;
width: 56px; height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
text-decoration: none;
box-shadow: 0 6px 20px rgba(37,211,102,0.4);
z-index: 200;
transition: transform 0.2s;
}
body.p-estadia .wa-float:hover { transform: scale(1.1); }
/* RESPONSIVE */
@media (max-width: 900px) {
body.p-estadia nav { padding: 16px 24px; }
body.p-estadia .nav-links { display: none; }
body.p-estadia .intro-strip { gap: 30px; padding: 24px; }
body.p-estadia .cabanas,
body.p-estadia .turismo,
body.p-estadia .restaurantes,
body.p-estadia .proveedores,
body.p-estadia .galeria,
body.p-estadia .contacto { padding: 70px 24px; }
body.p-estadia .reglamento { padding: 70px 24px; }
body.p-estadia .reglamento-inner { grid-template-columns: 1fr; gap: 40px; }
body.p-estadia .reglas-grid { grid-template-columns: 1fr; }
body.p-estadia .contacto-inner { grid-template-columns: 1fr; gap: 40px; }
body.p-estadia .galeria-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
body.p-estadia .gal-item:first-child { grid-column: span 2; grid-row: span 1; height: 250px; }
body.p-estadia .gal-item { height: 180px; }
body.p-estadia .mapa-section { padding: 70px 24px; }
body.p-estadia .mapa-wrapper { grid-template-columns: 1fr; }
body.p-estadia .mapa-iframe-box { height: 360px; }
body.p-estadia .testimonios { padding: 70px 24px; }
}
/* PAISAJES STRIP */
body.p-estadia .paisajes { padding: 80px 48px; background: var(--verde); }
body.p-estadia .paisajes-header { max-width: 600px; margin: 0 auto 50px; text-align: center; }
body.p-estadia .paisajes-header h2 { color: var(--arena); }
body.p-estadia .paisajes-header h2 em { color: var(--madera-claro); }
body.p-estadia .paisajes-header .section-tag { color: var(--madera-claro); }
body.p-estadia .paisajes-header p { margin-top: 18px; color: rgba(232,220,200,0.75); line-height: 1.7; }
body.p-estadia .paisajes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 1200px;
margin: 0 auto;
}
body.p-estadia .paisaje-item {
border-radius:var(--radius-md);
overflow: hidden;
height: 260px;
position: relative;
}
body.p-estadia .paisaje-item:first-child { grid-column: span 2; }
body.p-estadia .paisaje-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
body.p-estadia .paisaje-item:hover img { transform: scale(1.04); }
body.p-estadia
body.p-estadia .hero { margin-top: 80px; height: 35vh; min-height: 220px; }
}
} .paisaje-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(20,35,28,0.75));
color: var(--arena);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 20px 16px 12px;
body.p-estadia #faq > div { padding: 80px 24px 50px; }
}
@media (max-width: 900px) {
body.p-estadia .paisajes { padding: 60px 24px; }
body.p-estadia .paisajes-grid { grid-template-columns: 1fr 1fr; }
body.p-estadia .paisaje-item:first-child { grid-column: span 2; height: 220px; }
body.p-estadia .paisaje-item { height: 180px; }
}
body.p-estadia .nav-page-btn {
border: 1.5px solid rgba(196,154,108,0.6) !important;
border-radius:var(--radius-md);
padding: 5px 10px !important;
color: var(--madera-claro) !important;
opacity: 1 !important;
transition: background 0.2s, border-color 0.2s !important;
}
body.p-estadia .nav-page-btn:hover {
background: rgba(196,154,108,0.15) !important;
border-color: var(--madera-claro) !important;
}
body.p-estadia .nav-page-btn--gastro {
background: var(--madera-claro) !important;
color: var(--verde) !important;
}
body.p-estadia .nav-page-btn--gastro:hover {
background: var(--arena) !important;
}
body.p-estadia .cabanas h2,
body.p-estadia .cabanas h2 em {
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
color: inherit;
}
body.p-estadia .cab-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 1100px;
margin: 0 auto;
}
body.p-estadia .cab-gallery-item {
aspect-ratio: 4/3;
overflow: hidden;
border-radius:var(--radius-md);
}
body.p-estadia .cab-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
display: block;
}
body.p-estadia .cab-gallery-item:hover img { transform: scale(1.04); }
@media(max-width:700px) {
body.p-estadia .cabanas h2,
body.p-estadia .cabanas h2 em {
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
color: inherit;
}
body.p-estadia .cab-gallery { grid-template-columns: 1fr 1fr; }
}
body.p-estadia .cab-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
body.p-estadia .cab-gi {
aspect-ratio: 4/3;
overflow: hidden;
border-radius:var(--radius-md);
}
body.p-estadia .cab-gi img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s;
}
body.p-estadia .cab-gi:hover img { transform: scale(1.04); }
body.p-estadia .btn-reserva-solid {
background: var(--verde);
color: var(--arena) !important;
padding: 13px 32px;
text-decoration: none !important;
font-family: 'Jost', sans-serif;
font-weight: 600;
font-size: 0.87rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius:var(--radius-md);
}
body.p-estadia .btn-reserva-outline {
border: 1.5px solid var(--madera-claro);
color: var(--madera-claro) !important;
padding: 12px 28px;
text-decoration: none !important;
font-family: 'Jost', sans-serif;
font-weight: 600;
font-size: 0.87rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius:var(--radius-md);
}
body.p-estadia .btn-reserva-solid:hover { background: var(--verde-claro); }
body.p-estadia .btn-reserva-outline:hover { background: rgba(196,154,108,0.1); }
@media(max-width:700px) {
body.p-estadia .cab-grid { grid-template-columns: 1fr 1fr; }
}
body.p-estadia .cgi { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-md); }
body.p-estadia .cgi img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.45s; }
body.p-estadia .cgi:hover img { transform:scale(1.04); }
@media(max-width:700px){ body.p-estadia #cabanas [style*="grid-template-columns:repeat(3"] { grid-template-columns:1fr 1fr !important; } }
body.p-estadia .cgrid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
body.p-estadia .cgi {aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-md);}
body.p-estadia .cgi img {width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.45s;}
body.p-estadia .cgi:hover img {transform:scale(1.04);}
@media(max-width:700px){body.p-estadia .cgrid {grid-template-columns:1fr 1fr;}}
/* Hamburger button */
body.p-estadia .hamburger {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 102;
}
body.p-estadia .hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--arena);
border-radius:var(--radius-md);
transition: transform 0.3s, opacity 0.3s;
}
body.p-estadia .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
body.p-estadia .hamburger.active span:nth-child(2) { opacity: 0; }
body.p-estadia .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Mobile dropdown */
body.p-estadia .mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(29,44,38,0.98);
backdrop-filter: blur(16px);
padding: 80px 32px 32px;
flex-direction: column;
gap: 0;
z-index: 99;
transform: translateY(-100%);
transition: transform 0.35s ease;
}
body.p-estadia .mobile-menu.open {
transform: translateY(0);
}
body.p-estadia .mobile-menu a {
display: block;
color: var(--arena);
text-decoration: none;
font-family: 'Jost', sans-serif;
font-size: 1rem;
font-weight: 400;
padding: 14px 0;
border-bottom: 1px solid rgba(232,220,200,0.1);
transition: color 0.2s;
}
body.p-estadia .mobile-menu a:hover { color: var(--madera-claro); }
body.p-estadia .mobile-page-link {
color: var(--madera-claro) !important;
font-weight: 500 !important;
}
body.p-estadia .mobile-wa {
background: var(--madera-claro) !important;
color: var(--verde) !important;
text-align: center;
border-radius:var(--radius-md);
padding: 14px !important;
margin-top: 12px;
font-weight: 600 !important;
border: none !important;
}
body.p-estadia .mobile-divider {
height: 1px;
background: rgba(196,154,108,0.3);
margin: 6px 0;
}
body.p-estadia .nav-links { display: none !important; }
body.p-estadia .hamburger { display: flex; }
body.p-estadia .mobile-menu { display: flex; }
body.p-estadia .nav-brand {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.85rem;
font-weight: 300;
letter-spacing: 0.18em;
color: var(--madera-claro);
text-transform: uppercase;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
body.p-estadia .nav-brand span {
color: rgba(232,220,200,0.4);
margin: 0 4px;
}
@media (max-width: 600px) {
body.p-estadia .nav-brand {
font-size: 0.68rem;
letter-spacing: 0.1em;
}
}
@media (max-width: 520px) {
body.p-estadia .hero-btns { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════
RESERVAR
═══════════════════════════════════════════════ */
body.p-reservar html { scroll-behavior: smooth; }
body.p-reservar body {
font-family: 'Jost', sans-serif;
background: var(--blanco);
color: var(--texto);
overflow-x: hidden;
}
/* NAV */
body.p-reservar nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 32px;
background: rgba(29, 44, 38, 0.92);
backdrop-filter: blur(12px);
transition: all 0.3s;
}
body.p-reservar .nav-links {
display: flex;
gap: 18px;
list-style: none;
}
body.p-reservar .nav-links a {
color: var(--arena);
text-decoration: none;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.85;
transition: opacity 0.2s, color 0.2s;
}
body.p-reservar .nav-links a:hover { opacity: 1; color: var(--madera-claro); }
body.p-reservar .nav-cta {
background: var(--madera-claro);
color: var(--verde) !important;
padding: 7px 16px;
border-radius:var(--radius-md);
font-weight: 600 !important;
opacity: 1 !important;
}
body.p-reservar .nav-cta:hover { background: var(--arena) !important; }
/* HERO */
body.p-reservar .hero {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
body.p-reservar .hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@keyframes heroZoom {
from { transform: scale(1.05); }
to { transform: scale(1.0); }
}
body.p-reservar .hero-content {
position: relative;
text-align: center;
color: white;
padding: 96px 24px 0;
animation: fadeUp 1.2s 0.3s both;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
body.p-reservar .hero-eyebrow {
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--madera-claro);
font-weight: 500;
margin-bottom: 18px;
}
body.p-reservar .hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 8vw, 6.5rem);
line-height: 1.05;
margin-bottom: 10px;
font-weight: 400;
}
body.p-reservar .hero-title em {
font-style: italic;
color: var(--madera-claro);
}
body.p-reservar .hero-subtitle {
font-size: 1.05rem;
color: rgba(255,255,255,0.8);
margin-bottom: 42px;
font-weight: 300;
letter-spacing: 0.04em;
}
body.p-reservar .hero-btns {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
body.p-reservar .btn-primary {
background: var(--madera-claro);
color: var(--verde);
padding: 14px 36px;
text-decoration: none;
font-weight: 600;
font-size: 0.88rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius:var(--radius-md);
transition: all 0.25s;
}
body.p-reservar .btn-primary:hover { background: white; }
body.p-reservar .btn-outline {
border: 1.5px solid rgba(255,255,255,0.6);
color: white;
padding: 14px 20px;
text-decoration: none;
font-weight: 400;
font-size: 0.88rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius:var(--radius-md);
transition: all 0.25s;
backdrop-filter: blur(4px);
background: rgba(255,255,255,0.08);
}
body.p-reservar .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: white; }
body.p-reservar .hero-scroll {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.55);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
animation: bounce 2s infinite;
}
body.p-reservar .hero-scroll::after {
content: '';
width: 1px;
height: 36px;
background: rgba(255,255,255,0.4);
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* SECTIONS */
body.p-reservar section { scroll-margin-top: 70px; }
body.p-reservar .section-tag {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--madera);
font-weight: 600;
margin-bottom: 12px;
}
body.p-reservar h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 400;
line-height: 1.2;
color: var(--verde);
}
body.p-reservar h2 em { font-style: italic; color: var(--madera); }
/* INTRO STRIP */
body.p-reservar .intro-strip {
background: var(--verde);
padding: 28px 48px;
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
body.p-reservar .strip-item {
text-align: center;
color: var(--arena);
}
body.p-reservar .strip-item strong {
display: block;
font-family: 'Playfair Display', serif;
font-size: 1.7rem;
color: var(--madera-claro);
}
body.p-reservar .strip-item span {
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.75;
}
/* CABAÑAS */
body.p-reservar .cabanas { padding: 100px 48px; background: var(--blanco); }
body.p-reservar .cabanas-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-reservar .cabanas-header p {
margin-top: 18px;
color: var(--gris);
line-height: 1.7;
font-size: 1.02rem;
}
body.p-reservar .cabanas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
max-width: 1200px;
margin: 0 auto 80px;
}
body.p-reservar .cabana-card {
background: var(--crema);
border-radius:var(--radius-md);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
body.p-reservar .cabana-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(29,44,38,0.12); }
body.p-reservar .cabana-img {
height: 220px;
background: var(--verde-claro);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
body.p-reservar .cabana-img img { width: 100%; height: 100%; object-fit: cover; }
body.p-reservar .cabana-num {
position: absolute;
top: 16px; left: 16px;
background: var(--madera-claro);
color: var(--verde);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.14em;
padding: 5px 12px;
border-radius:var(--radius-md);
}
body.p-reservar .cabana-body { padding: 24px; }
body.p-reservar .cabana-body h3 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: var(--verde);
margin-bottom: 8px;
}
body.p-reservar .cabana-body p { font-size: 0.88rem; color: var(--gris); line-height: 1.6; margin-bottom: 16px; }
body.p-reservar .cabana-features {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body.p-reservar .feature-tag {
background: var(--verde);
color: var(--arena);
font-size: 0.7rem;
padding: 4px 10px;
border-radius:var(--radius-md);
letter-spacing: 0.06em;
}
/* REGLAMENTO */
body.p-reservar .reglamento {
background: var(--verde);
padding: 90px 48px;
}
body.p-reservar .reglamento-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
}
body.p-reservar .reglamento h2 { color: var(--arena); }
body.p-reservar .reglamento h2 em { color: var(--madera-claro); }
body.p-reservar .reglamento .section-tag { color: var(--madera-claro); }
body.p-reservar .reglamento-intro { color: rgba(232,220,200,0.75); line-height: 1.7; margin-top: 18px; font-size: 0.95rem; }
body.p-reservar .reglas-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
body.p-reservar .regla-item {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius:var(--radius-md);
padding: 20px;
transition: background 0.2s;
}
body.p-reservar .regla-item:hover { background: rgba(255,255,255,0.11); }
body.p-reservar .regla-icon { font-size: 1.5rem; margin-bottom: 10px; }
body.p-reservar .regla-item h4 {
color: var(--madera-claro);
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.06em;
margin-bottom: 7px;
text-transform: uppercase;
}
body.p-reservar .regla-item p { color: rgba(232,220,200,0.8); font-size: 0.84rem; line-height: 1.6; }
/* TURISMO */
body.p-reservar .turismo { padding: 100px 48px; background: var(--crema); }
body.p-reservar .turismo-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-reservar .turismo-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-reservar .turismo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
body.p-reservar .turismo-card {
background: white;
border-radius:var(--radius-md);
padding: 28px;
border-bottom: 3px solid transparent;
transition: border-color 0.3s, box-shadow 0.3s;
}
body.p-reservar .turismo-card:hover { border-color: var(--madera-claro); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
body.p-reservar .turismo-icon { font-size: 2rem; margin-bottom: 14px; }
body.p-reservar .turismo-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
color: var(--verde);
margin-bottom: 10px;
}
body.p-reservar .turismo-card p { color: var(--gris); font-size: 0.88rem; line-height: 1.65; }
body.p-reservar .turismo-tag {
display: inline-block;
margin-top: 14px;
font-size: 0.72rem;
color: var(--madera);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid var(--madera-claro);
padding-bottom: 2px;
}
/* RESTAURANTES */
body.p-reservar .restaurantes { padding: 100px 48px; background: var(--blanco); }
body.p-reservar .restaurantes-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-reservar .restaurantes-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-reservar .rest-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
max-width: 1200px;
margin: 0 auto;
}
body.p-reservar .rest-card {
border: 1.5px solid var(--arena);
border-radius:var(--radius-md);
padding: 30px;
position: relative;
transition: border-color 0.3s, box-shadow 0.3s;
}
body.p-reservar .rest-card:hover { border-color: var(--madera-claro); box-shadow: 0 10px 32px rgba(0,0,0,0.07); }
body.p-reservar .rest-type {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--madera);
margin-bottom: 8px;
}
body.p-reservar .rest-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: var(--verde);
margin-bottom: 10px;
}
body.p-reservar .rest-card p { color: var(--gris); font-size: 0.87rem; line-height: 1.65; margin-bottom: 16px; }
body.p-reservar .rest-especialidad {
background: var(--crema);
border-radius:var(--radius-md);
padding: 12px 16px;
font-size: 0.82rem;
color: var(--verde);
}
body.p-reservar .rest-especialidad strong { color: var(--madera); font-weight: 600; }
body.p-reservar .rest-stars { color: var(--madera-claro); font-size: 0.85rem; margin-bottom: 6px; }
/* PROVEEDORES */
body.p-reservar .proveedores { padding: 100px 48px; background: var(--verde); }
body.p-reservar .proveedores-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-reservar .proveedores-header h2 { color: var(--arena); }
body.p-reservar .proveedores-header h2 em { color: var(--madera-claro); }
body.p-reservar .proveedores-header .section-tag { color: var(--madera-claro); }
body.p-reservar .proveedores-header p { margin-top: 18px; color: rgba(232,220,200,0.75); line-height: 1.7; }
body.p-reservar .prov-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 28px;
max-width: 1100px;
margin: 0 auto;
}
body.p-reservar .prov-category h4 {
color: var(--madera-claro);
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.15);
display: flex;
align-items: center;
gap: 8px;
}
body.p-reservar .prov-list { list-style: none; }
body.p-reservar .prov-list li {
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
color: rgba(232,220,200,0.85);
font-size: 0.88rem;
line-height: 1.5;
}
body.p-reservar .prov-list li strong { color: var(--arena); font-weight: 500; }
body.p-reservar .prov-list li span { display: block; font-size: 0.78rem; opacity: 0.65; margin-top: 2px; }
/* GALERIA */
body.p-reservar .galeria { padding: 100px 48px; background: var(--crema); }
body.p-reservar .galeria-header { max-width: 600px; margin: 0 auto 50px; text-align: center; }
body.p-reservar .galeria-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-reservar .galeria-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 240px);
gap: 12px;
max-width: 1200px;
margin: 0 auto;
}
body.p-reservar .gal-item {
border-radius:var(--radius-md);
overflow: hidden;
background: var(--verde-claro);
position: relative;
}
body.p-reservar .gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
body.p-reservar .gal-item:hover img { transform: scale(1.05); }
body.p-reservar .gal-item:first-child { grid-column: span 2; grid-row: span 2; }
body.p-reservar .gal-label {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(20,35,28,0.7));
color: rgba(232,220,200,0.9);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 16px 14px 10px;
opacity: 0;
transition: opacity 0.3s;
}
body.p-reservar .gal-item:hover .gal-label { opacity: 1; }
/* MAPA */
body.p-reservar .mapa-section { padding: 100px 48px; background: var(--blanco); }
body.p-reservar .mapa-header { max-width: 600px; margin: 0 auto 50px; text-align: center; }
body.p-reservar .mapa-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-reservar .mapa-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 320px;
gap: 28px;
align-items: start;
}
body.p-reservar .mapa-iframe-box {
border-radius:var(--radius-md);
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
height: 500px;
}
body.p-reservar .mapa-iframe-box iframe { width: 100%; height: 100%; border: none; }
body.p-reservar .mapa-puntos h4 {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
color: var(--verde);
margin-bottom: 18px;
}
body.p-reservar .mapa-punto {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--arena);
}
body.p-reservar .mapa-punto:last-child { border-bottom: none; }
body.p-reservar .mapa-punto-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
body.p-reservar .mapa-punto-info h5 { font-size: 0.88rem; font-weight: 600; color: var(--verde); margin-bottom: 2px; }
body.p-reservar .mapa-punto-info p { font-size: 0.78rem; color: var(--gris); line-height: 1.4; }
/* TESTIMONIOS */
body.p-reservar .testimonios { padding: 100px 48px; background: var(--crema); }
body.p-reservar .testimonios-header { max-width: 600px; margin: 0 auto 70px; text-align: center; }
body.p-reservar .testimonios-header p { margin-top: 18px; color: var(--gris); line-height: 1.7; }
body.p-reservar .testi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
max-width: 1200px;
margin: 0 auto 50px;
}
body.p-reservar .testi-card {
background: white;
border-radius:var(--radius-md);
padding: 32px;
position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
transition: box-shadow 0.3s;
}
body.p-reservar .testi-card:hover { box-shadow: 0 10px 36px rgba(0,0,0,0.1); }
body.p-reservar .testi-comilla {
font-family: 'Playfair Display', serif;
font-size: 4rem;
line-height: 0.8;
color: var(--madera-claro);
opacity: 0.5;
margin-bottom: 12px;
}
body.p-reservar .testi-card p {
color: var(--gris);
font-size: 0.92rem;
line-height: 1.75;
font-style: italic;
margin-bottom: 22px;
}
body.p-reservar .testi-autor {
display: flex;
align-items: center;
gap: 14px;
}
body.p-reservar .testi-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--verde);
display: flex;
align-items: center;
justify-content: center;
color: var(--madera-claro);
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 700;
flex-shrink: 0;
}
body.p-reservar .testi-autor-info h5 { font-size: 0.88rem; font-weight: 600; color: var(--verde); }
body.p-reservar .testi-autor-info span { font-size: 0.75rem; color: var(--gris); }
body.p-reservar .testi-stars { color: var(--madera-claro); font-size: 0.85rem; margin-bottom: 14px; }
body.p-reservar .testi-plataforma {
position: absolute;
top: 18px; right: 18px;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--madera);
font-weight: 600;
background: var(--crema);
padding: 4px 10px;
border-radius:var(--radius-md);
}
body.p-reservar .testi-cta {
text-align: center;
margin-top: 14px;
}
body.p-reservar .testi-cta a {
display: inline-block;
border: 1.5px solid var(--verde);
color: var(--verde);
padding: 12px 32px;
text-decoration: none;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius:var(--radius-md);
transition: all 0.25s;
}
body.p-reservar .testi-cta a:hover { background: var(--verde); color: var(--arena); }
/* CONTACTO */
body.p-reservar .contacto { padding: 100px 48px; background: var(--blanco); }
body.p-reservar .contacto-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
body.p-reservar .contacto-info h2 { margin-bottom: 18px; }
body.p-reservar .contacto-info p { color: var(--gris); line-height: 1.7; margin-bottom: 36px; }
body.p-reservar .contact-items { display: flex; flex-direction: column; gap: 22px; }
body.p-reservar .contact-item {
display: flex;
align-items: flex-start;
gap: 16px;
}
body.p-reservar .contact-icon {
width: 44px; height: 44px;
background: var(--verde);
color: var(--madera-claro);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
border-radius:var(--radius-md);
flex-shrink: 0;
}
body.p-reservar .contact-item h5 {
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gris);
margin-bottom: 3px;
}
body.p-reservar .contact-item a,
body.p-reservar .contact-item p {
color: var(--verde);
font-weight: 500;
text-decoration: none;
font-size: 0.95rem;
}
body.p-reservar .contact-item a:hover { color: var(--madera); }
body.p-reservar .contacto-form {
background: var(--crema);
padding: 42px;
border-radius:var(--radius-md);
}
body.p-reservar .contacto-form h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--verde);
margin-bottom: 28px;
}
body.p-reservar .form-group { margin-bottom: 20px; }
body.p-reservar .form-group label {
display: block;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gris);
margin-bottom: 7px;
font-weight: 500;
}
body.p-reservar .form-group input,
body.p-reservar .form-group textarea,
body.p-reservar .form-group select {
width: 100%;
padding: 12px 16px;
background: white;
border: 1.5px solid var(--arena);
border-radius:var(--radius-md);
font-family: 'Jost', sans-serif;
font-size: 0.9rem;
color: var(--texto);
outline: none;
transition: border-color 0.2s;
}
body.p-reservar .form-group input:focus,
body.p-reservar .form-group textarea:focus,
body.p-reservar .form-group select:focus {
border-color: var(--verde-claro);
}
body.p-reservar .form-group textarea { resize: vertical; min-height: 110px; }
body.p-reservar .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.p-reservar .form-submit {
width: 100%;
background: var(--verde);
color: var(--arena);
border: none;
padding: 15px;
font-family: 'Jost', sans-serif;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius:var(--radius-md);
cursor: pointer;
transition: background 0.25s;
margin-top: 6px;
}
body.p-reservar .form-submit:hover { background: var(--verde-claro); }
/* FOOTER */
body.p-reservar footer {
background: #111c17;
padding: 52px 48px 36px;
text-align: center;
}
body.p-reservar .footer-logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--arena);
margin-bottom: 12px;
}
body.p-reservar .footer-logo span { color: var(--madera-claro); font-style: italic; }
body.p-reservar footer p {
color: rgba(232,220,200,0.45);
font-size: 0.82rem;
margin-bottom: 8px;
}
body.p-reservar .footer-links {
display: flex;
justify-content: center;
gap: 28px;
margin: 22px 0;
flex-wrap: wrap;
}
body.p-reservar .footer-links a {
color: rgba(232,220,200,0.5);
text-decoration: none;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: color 0.2s;
}
body.p-reservar .footer-links a:hover { color: var(--madera-claro); }
/* WHATSAPP FLOAT */
body.p-reservar .wa-float {
position: fixed;
bottom: 28px;
right: 28px;
background: #25d366;
color: white;
width: 56px; height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
text-decoration: none;
box-shadow: 0 6px 20px rgba(37,211,102,0.4);
z-index: 200;
transition: transform 0.2s;
}
body.p-reservar .wa-float:hover { transform: scale(1.1); }
/* RESPONSIVE */
@media (max-width: 900px) {
body.p-reservar nav { padding: 16px 24px; }
body.p-reservar .nav-links { display: none; }
body.p-reservar .intro-strip { gap: 30px; padding: 24px; }
body.p-reservar .cabanas,
body.p-reservar .turismo,
body.p-reservar .restaurantes,
body.p-reservar .proveedores,
body.p-reservar .galeria,
body.p-reservar .contacto { padding: 70px 24px; }
body.p-reservar .reglamento { padding: 70px 24px; }
body.p-reservar .reglamento-inner { grid-template-columns: 1fr; gap: 40px; }
body.p-reservar .reglas-grid { grid-template-columns: 1fr; }
body.p-reservar .contacto-inner { grid-template-columns: 1fr; gap: 40px; }
body.p-reservar .galeria-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
body.p-reservar .gal-item:first-child { grid-column: span 2; grid-row: span 1; height: 250px; }
body.p-reservar .gal-item { height: 180px; }
body.p-reservar .mapa-section { padding: 70px 24px; }
body.p-reservar .mapa-wrapper { grid-template-columns: 1fr; }
body.p-reservar .mapa-iframe-box { height: 360px; }
body.p-reservar .testimonios { padding: 70px 24px; }
}
/* PAISAJES STRIP */
body.p-reservar .paisajes { padding: 80px 48px; background: var(--verde); }
body.p-reservar .paisajes-header { max-width: 600px; margin: 0 auto 50px; text-align: center; }
body.p-reservar .paisajes-header h2 { color: var(--arena); }
body.p-reservar .paisajes-header h2 em { color: var(--madera-claro); }
body.p-reservar .paisajes-header .section-tag { color: var(--madera-claro); }
body.p-reservar .paisajes-header p { margin-top: 18px; color: rgba(232,220,200,0.75); line-height: 1.7; }
body.p-reservar .paisajes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 1200px;
margin: 0 auto;
}
body.p-reservar .paisaje-item {
border-radius:var(--radius-md);
overflow: hidden;
height: 260px;
position: relative;
}
body.p-reservar .paisaje-item:first-child { grid-column: span 2; }
body.p-reservar .paisaje-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
body.p-reservar .paisaje-item:hover img { transform: scale(1.04); }
body.p-reservar .paisaje-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(20,35,28,0.75));
color: var(--arena);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 20px 16px 12px;
}
@media (max-width: 900px) {
body.p-reservar .paisajes { padding: 60px 24px; }
body.p-reservar .paisajes-grid { grid-template-columns: 1fr 1fr; }
body.p-reservar .paisaje-item:first-child { grid-column: span 2; height: 220px; }
body.p-reservar .paisaje-item { height: 180px; }
}
body.p-reservar .nav-page-btn {
border: 1.5px solid rgba(196,154,108,0.6) !important;
border-radius:var(--radius-md);
padding: 5px 10px !important;
color: var(--madera-claro) !important;
opacity: 1 !important;
transition: background 0.2s, border-color 0.2s !important;
}
body.p-reservar .nav-page-btn:hover {
background: rgba(196,154,108,0.15) !important;
border-color: var(--madera-claro) !important;
}
body.p-reservar .nav-page-btn--gastro {
background: var(--madera-claro) !important;
color: var(--verde) !important;
}
body.p-reservar .nav-page-btn--gastro:hover {
background: var(--arena) !important;
}
body.p-reservar .cabanas h2,
body.p-reservar .cabanas h2 em {
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
color: inherit;
}
body.p-reservar .cab-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 1100px;
margin: 0 auto;
}
body.p-reservar .cab-gallery-item {
aspect-ratio: 4/3;
overflow: hidden;
border-radius:var(--radius-md);
}
body.p-reservar .cab-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
display: block;
}
body.p-reservar .cab-gallery-item:hover img { transform: scale(1.04); }
@media(max-width:700px) {
body.p-reservar .cabanas h2,
body.p-reservar .cabanas h2 em {
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
color: inherit;
}
body.p-reservar .cab-gallery { grid-template-columns: 1fr 1fr; }
}
body.p-reservar .cab-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
body.p-reservar .cab-gi {
aspect-ratio: 4/3;
overflow: hidden;
border-radius:var(--radius-md);
}
body.p-reservar .cab-gi img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s;
}
body.p-reservar .cab-gi:hover img { transform: scale(1.04); }
body.p-reservar .btn-reserva-solid {
background: var(--verde);
color: var(--arena) !important;
padding: 13px 32px;
text-decoration: none !important;
font-family: 'Jost', sans-serif;
font-weight: 600;
font-size: 0.87rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius:var(--radius-md);
}
body.p-reservar .btn-reserva-outline {
border: 1.5px solid var(--madera-claro);
color: var(--madera-claro) !important;
padding: 12px 28px;
text-decoration: none !important;
font-family: 'Jost', sans-serif;
font-weight: 600;
font-size: 0.87rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius:var(--radius-md);
}
body.p-reservar .btn-reserva-solid:hover { background: var(--verde-claro); }
body.p-reservar .btn-reserva-outline:hover { background: rgba(196,154,108,0.1); }
@media(max-width:700px) {
body.p-reservar .cab-grid { grid-template-columns: 1fr 1fr; }
}
body.p-reservar .cgi:hover img { transform:scale(1.04); }
@media(max-width:700px){ body.p-reservar #cabanas [style*="grid-template-columns:repeat(3"] { grid-template-columns:1fr 1fr !important; } }
body.p-reservar .cgrid {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
body.p-reservar .cgi:hover img {transform:scale(1.04);}
@media(max-width:700px){body.p-reservar .cgrid {grid-template-columns:1fr 1fr;}}
/* Hamburger button */
body.p-reservar .hamburger {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 102;
}
body.p-reservar .hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--arena);
border-radius:var(--radius-md);
transition: transform 0.3s, opacity 0.3s;
}
body.p-reservar .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
body.p-reservar .hamburger.active span:nth-child(2) { opacity: 0; }
body.p-reservar .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Mobile dropdown */
body.p-reservar .mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(29,44,38,0.98);
backdrop-filter: blur(16px);
padding: 80px 32px 32px;
flex-direction: column;
gap: 0;
z-index: 99;
transform: translateY(-100%);
transition: transform 0.35s ease;
}
body.p-reservar .mobile-menu.open {
transform: translateY(0);
}
body.p-reservar .mobile-menu a {
display: block;
color: var(--arena);
text-decoration: none;
font-family: 'Jost', sans-serif;
font-size: 1rem;
font-weight: 400;
padding: 14px 0;
border-bottom: 1px solid rgba(232,220,200,0.1);
transition: color 0.2s;
}
body.p-reservar .mobile-menu a:hover { color: var(--madera-claro); }
body.p-reservar .mobile-page-link {
color: var(--madera-claro) !important;
font-weight: 500 !important;
}
body.p-reservar .mobile-wa {
background: var(--madera-claro) !important;
color: var(--verde) !important;
text-align: center;
border-radius:var(--radius-md);
padding: 14px !important;
margin-top: 12px;
font-weight: 600 !important;
border: none !important;
}
body.p-reservar .mobile-divider {
height: 1px;
background: rgba(196,154,108,0.3);
margin: 6px 0;
}
body.p-reservar .nav-links { display: none !important; }
body.p-reservar .hamburger { display: flex; }
body.p-reservar .mobile-menu { display: flex; }
body.p-reservar .nav-brand {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.85rem;
font-weight: 300;
letter-spacing: 0.18em;
color: var(--madera-claro);
text-transform: uppercase;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
body.p-reservar .nav-brand span {
color: rgba(232,220,200,0.4);
margin: 0 4px;
}
@media (max-width: 600px) {
body.p-reservar .nav-brand {
font-size: 0.68rem;
letter-spacing: 0.1em;
}
}
@media (max-width: 520px) {
body.p-reservar .hero-btns { grid-template-columns: 1fr !important; }
}
@media (max-width:768px) {
body.p-reservar .reservar-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
body.p-reservar .contacto-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
body.p-reservar .amenity-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
body.p-reservar .amenity-item { padding: 10px 6px !important; }
body.p-reservar .amenity-item p:first-child { font-size: 1.1rem !important; margin-bottom: 4px !important; }
body.p-reservar .amenity-item p:last-child { font-size: 0.68rem !important; }
}
/* Gallery fullscreen mobile */
body.p-reservar .gal-fullscreen {
position: fixed !important;
inset: 0 !important;
z-index: 400;
background: #000;
aspect-ratio: unset !important;
border-radius: 0 !important;
height: 100dvh !important;
}
body.p-reservar .gal-fullscreen .gal-slide img { object-fit: contain !important; }
@media (max-width: 768px) {
body.p-reservar #gal-main { cursor: zoom-in; }
}
@media (max-width: 600px) {
body.p-reservar .amenity-override { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
body.p-reservar .amenity-override > div { padding: 10px 6px !important; }
body.p-reservar .amenity-override p:first-child { font-size: 1.1rem !important; }
body.p-reservar .amenity-override p:last-child { font-size: 0.66rem !important; }
}
/* Reviews modal */
body.p-reservar .rev-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:500; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px); }
body.p-reservar .rev-overlay.open { display:flex; }
body.p-reservar .rev-box { background:white; border-radius:var(--radius-md); max-width:500px; width:100%; animation:modalIn 0.2s ease; }
body.p-reservar .rev-header { background:var(--verde); padding:24px 24px 18px; border-radius:var(--radius-md) var(--radius-md) 0 0; position:relative; }
body.p-reservar .rev-close { position:absolute; top:12px; right:12px; background:rgba(255,255,255,0.15); border:none; color:var(--arena); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:0.9rem; display:flex; align-items:center; justify-content:center; }
body.p-reservar .rev-body { padding:22px 24px; }
body.p-reservar .gal-thumb { width: 72px; min-width: 72px; }
body.p-reservar .gal-thumb img { opacity: 0.65; transition: opacity 0.2s; }
body.p-reservar .gal-thumb.active img,
body.p-reservar .gal-thumb:hover img { opacity: 1; }
body.p-reservar .gal-thumb.active { outline: 2px solid var(--madera-claro); }
@media (max-width: 600px) { body.p-reservar .gal-thumb { width: 60px; min-width: 60px; } }
@media (max-width:768px) {
body.p-reservar .reservar-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
body.p-estadia .estadia-hero-header {
padding: 76px 20px 28px;
}
body.p-estadia .estadia-hero-title {
font-size: clamp(1.5rem, 6vw, 2rem);
}
}