/* Hallmark · shape: del sol al fuego (custom) · genre: editorial · theme: custom (by request: prompt-redesign.md) · brand: Abanú Village (spec 2026-11-13, brief and assets/marca) · job: book · redesign: full · copy: verbatim · idea: "a design refuge among pines, from sun to fire: the page walks a day at Abanú, from afternoon light on the pool to the pink sky and the fire at night, signed by the brush logo, the 88 butterfly and the pink of Village" · vibe: "warm cinematic refuge among pines, brush and butterfly"
 * paper: oklch(95.9% 0.010 87) · accent: oklch(61.4% 0.187 3) · display: Newsreader 300 with italic · body: Hanken Grotesk · outlier: Caveat 600 (handwritten notes, one per section) · hero: full-screen crossfade of three photographs with a slow Ken Burns, the head over a dark veil at the foot, a clean bottom edge; the 88 butterfly flies in, perches beside the head, then flies to whichever WhatsApp button is at hand · nav: transparent over the hero with the white logo, paper with blur after it; six links and Consultar; a hamburger opening a full-screen pine menu on phones · footer: night pine under a row of solid pine tips rising from it, the white logo large, address and contacts · imagery: the owners' photographs, 89 in seven galleries, warmed and unified, AVIF, WebP and JPG · signature: the 88 butterfly that lands on the hero head and then follows you to the WhatsApp button, and the brush underline drawn under one word of every head
 * axes: light/roman-serif/chromatic-pink · posture: full palette (paper and toasted paper fields; pine and night pine for the dark sections; Abanú pink as the accent on numbers, stars, links and brush strokes; pool turquoise only for the pool; a texture of orange and cream streaks made from their own sunset photographs, ink text on it, only in the sunsets) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V4 · weakest: R, the client's prompt asks for many moves (Ken Burns, flight, brush, parallax, counters, carousels, grain); each is held to one place or one job and all stop under reduced motion */
/* Hallmark · hero-review: folded into the finish review · finish-review: subagent · fix · 8 findings · 7 resolved (the butterfly perches on pinos and above the head on phones, the sunset starts on bright amber above the edge, no photo enlarged past its width at 1600 and up, gallery and lightbox captions, a Consultar row in the comparator, larger intro facts, the FAQ in two columns and a larger footer logo) 1 kept (the footer pine row stays night pine on pine) · gap: none */
/* Hallmark · v3 by request: no pause control in the hero (the slides stop on hover, focus and off screen), solid pine tips instead of the pine row and none on the hero, a hamburger menu, the butterfly redrawn with wings that flap and a job (it marks the WhatsApp action), a streaked sunset texture from their own photos instead of the gradient (clouds tried and dropped), the film strip no longer traps vertical scroll, the official WhatsApp glyph, the logo viewBox fixed, the property drawn again with maritime pines and the stone base, custom select and date picker */
/* Hallmark · by request 38i · one word of each head in italic (the emotional word), from the client's prompt; the Floor gate reports it and the client chose it on the record (2026-11-13) */
/* Hallmark · dropped #coleccion, the v1 heads, ids and pictures · the client's redesign prompt replaces the structure, copy and photographs; #coleccion is now #casas, and the footer links #como-llegar */
/* Hallmark · waive 38iii · one word per head in italic carries a pink brush stroke drawn after the head enters · the client's art direction asks for the brush underline under one keyword per title */
/* Hallmark · waive 11 · photographs inside links zoom to 1.04 on hover, slowly, on fine pointers only · the client's prompt asks for a slow 1.04 zoom on photos */
/* Hallmark · waive 80 · the drawing of the property is the client's own ornament from assets/marca, drawn in by its stroke · the client's prompt asks for complejo-linea.svg to draw itself in the intro */
/* Hallmark · waive 29 · a warm amber glow breathes at low opacity over the three fire photographs, 9s, paused off screen · the client's prompt asks for a soft warm glow on the fire photos */
/* Hallmark · waive 83 · photographs cover 36% of the page below the hero, all of them the owners' own, in galleries, a film strip and a mosaic · the client's review of the first version asked for many more of their 89 photographs to choose by */
/* Hallmark · dismissed 59 · eleven sections: the client's prompt names ten sections plus the footer, in this order */
/* Hallmark · waive 66 · one small line at the foot of the hero links to the next section · the client's prompt asks for a small scroll indicator */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/newsreader.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/hanken-grotesk.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/caveat-600.woff2") format("woff2"); }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
body { font-size: var(--text-body); line-height: 1.6; font-synthesis: none; --logo-tinta: var(--color-ink); --logo-village: var(--color-mauve); }
h1, h2, h3, h4 { font-weight: 300; letter-spacing: var(--tracking-display); color: inherit; }
h2 { font-size: var(--text-section); line-height: 1.04; max-width: 17ch; }
h3 { font-size: var(--text-title); line-height: 1.05; }
h4 { margin: 0; font: 600 var(--text-md)/1.3 var(--font-body); letter-spacing: 0; }
em { font-style: italic; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.lead { font-size: var(--text-lead); line-height: 1.55; max-width: 52ch; }
.num, .cifras dd { font-variant-numeric: tabular-nums lining-nums; }
strong, b { font-weight: 600; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 22px; height: 22px; flex-shrink: 0; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* Oscuro: cada sección oscura cambia su tinta en la misma regla */
.oscuro, .hero, .anio, .reservar, .pie { --color-focus: var(--color-focus-dark); --logo-tinta: var(--color-on-dark); --logo-village: var(--color-pink-light); }

/* Grano de película sobre fotos grandes y secciones oscuras */
.grano { position: relative; isolation: isolate; }
.grano::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.btn span { text-decoration: underline 1px transparent; text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.btn .i { transition: transform var(--dur-short) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-pine); color: var(--color-on-dark); }
.btn--primary:hover { background: var(--color-pine-2); }
.btn--claro { background: var(--color-paper); color: var(--color-pine-night); }
.btn--claro:hover { background: var(--color-paper-2); }
.btn--linea { background: transparent; border-color: var(--color-ink); color: var(--color-ink); min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--linea:hover { background: var(--color-paper-2); }
.btn--sobre-foto { min-height: 52px; padding: 0 var(--space-lg); font-size: var(--text-md); border-color: var(--color-on-dark); color: var(--color-on-dark); }
.btn--sobre-foto:hover { background: color-mix(in oklab, var(--color-on-dark) 14%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .i { transform: translateX(2px); }
  .btn:hover span { text-decoration-color: currentColor; }
}
.link { color: var(--color-pink-ink); font-weight: 600; text-decoration: underline 1.5px; text-decoration-color: color-mix(in oklab, var(--color-pink) 55%, transparent); text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: currentColor; color: var(--color-ink); }

/* Subrayado de pincel y anotaciones a mano */
.pincel { position: relative; z-index: 0; font-style: italic; white-space: nowrap; }
.pincel__trazo { position: absolute; z-index: -1; left: -3%; bottom: -0.04em; width: 106%; height: 0.3em; fill: var(--color-pink); opacity: 0.9; }
.nota { font: 600 var(--text-nota)/1.05 var(--font-hand); letter-spacing: 0; color: var(--color-mauve); }
.nota--foto { position: absolute; z-index: 4; padding: var(--space-sm) var(--space-md); background: var(--color-paper); color: var(--color-mauve); border-radius: 3px; transform: rotate(-3deg); box-shadow: var(--shadow-nota); max-width: 80%; }

/* Estrellas: llenas en rosa, la última según la nota */
.estrellas { display: inline-flex; gap: var(--space-3xs); vertical-align: middle; }
.estrella { position: relative; display: inline-block; width: 18px; height: 18px; color: var(--color-rule); }
.estrella .i { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.estrella__on { position: absolute; inset: 0; color: var(--color-pink); clip-path: inset(0 calc(100% - var(--lleno)) 0 0); }
.oscuro .estrella, .hero .estrella, .anio .estrella { color: color-mix(in oklab, var(--color-on-dark) 30%, transparent); }
.hero .estrella__on, .anio .estrella__on { color: var(--color-pink-light); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); color: var(--color-ink); background: color-mix(in oklab, var(--color-paper) 88%, transparent); box-shadow: var(--shadow-nav); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.js .nav:not(.is-solid) { background: transparent; box-shadow: none; color: var(--color-on-dark); -webkit-backdrop-filter: none; backdrop-filter: none; --logo-tinta: var(--color-on-dark); --logo-village: var(--color-pink-light); --color-focus: var(--color-on-dark); }
.nav__in { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--nav-h); }
.nav__logo { display: block; flex-shrink: 0; border-radius: var(--radius-input); }
.nav__logo svg { display: block; height: 52px; width: auto; aspect-ratio: 2250 / 1344; }
.nav__links { display: flex; gap: var(--space-lg); margin-left: auto; }
.nav__links a, .menu__panel nav a, .pie__links a { white-space: nowrap; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; color: inherit; text-decoration: underline 1.5px transparent; text-underline-offset: 0.35em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.nav__links a:hover { text-decoration-color: var(--color-pink); }
.btn--nav { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.js .nav:not(.is-solid) .btn--nav { background: transparent; border-color: var(--color-on-dark); }
.js .nav:not(.is-solid) .btn--nav:hover { background: color-mix(in oklab, var(--color-on-dark) 14%, transparent); }

.menu { display: none; }
.menu summary { position: relative; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; list-style: none; transition: background-color var(--dur-press) var(--ease-out); }
.menu summary:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.hamburguesa { position: relative; display: block; width: 22px; height: 14px; }
.hamburguesa span { position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform var(--dur-short) var(--ease-in-out), opacity var(--dur-press) var(--ease-out); }
.hamburguesa span:nth-child(1) { top: 0; }
.hamburguesa span:nth-child(2) { top: 6.25px; }
.hamburguesa span:nth-child(3) { top: 12.5px; }
.menu[open] .hamburguesa span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.menu[open] .hamburguesa span:nth-child(2) { opacity: 0; }
.menu[open] .hamburguesa span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.menu[open] summary { color: var(--color-on-dark); }
.menu__panel { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--space-xl); padding: calc(var(--nav-h) + var(--space-xl)) var(--gutter) var(--space-4xl); background: var(--color-pine); color: var(--color-on-dark); overflow-y: auto; --color-focus: var(--color-focus-dark); }
.menu__panel nav { display: grid; gap: var(--space-2xs); }
.menu__panel nav a { font: 300 clamp(2rem, 7vw, 2.75rem)/1.2 var(--font-display); letter-spacing: -0.02em; color: inherit; text-decoration: none; }
.menu__panel nav a:hover { color: var(--color-pink-light); }
.menu__panel .btn { align-self: flex-start; }
.menu__pinos { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72px; color: var(--color-pine-night); }
.menu[open] .menu__panel { animation: menuEntra var(--dur-med) var(--ease-out); }
@keyframes menuEntra { from { opacity: 0; } to { opacity: 1; } }
.nav:has(.menu[open]) { background: transparent; box-shadow: none; color: var(--color-on-dark); -webkit-backdrop-filter: none; backdrop-filter: none; --logo-tinta: var(--color-on-dark); --logo-village: var(--color-pink-light); }
.nav:has(.menu[open]) .nav__logo, .nav:has(.menu[open]) .menu summary { position: relative; z-index: 2; }

/* 1. Hero */
.hero { position: relative; min-height: 600px; height: 100svh; color: var(--color-on-dark); overflow: hidden; isolation: isolate; }
.hero__fotos { position: absolute; inset: 0; z-index: 0; background: var(--color-pine-night); color: var(--color-on-dark); }
.hero__slide { position: absolute; inset: 0; transition: opacity 1500ms var(--ease-in-out); }
html:not(.js) .hero__slide:not(:first-child) { display: none; }
.js .hero__slide:not(.is-on) { opacity: 0; }
.hero__slide picture, .hero__slide img { display: block; width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; transform-origin: 60% 55%; }
.hero__slide.is-vivo img { animation: kenBurns 7600ms linear forwards; }
@keyframes kenBurns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.2%, -1%, 0); } }
.hero__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in oklab, var(--color-scrim) 88%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 66%, transparent) 38%, color-mix(in oklab, var(--color-scrim) 22%, transparent) 68%, transparent 86%), linear-gradient(to right, color-mix(in oklab, var(--color-scrim) 52%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 26%, transparent) 42%, transparent 64%), linear-gradient(to bottom, color-mix(in oklab, var(--color-scrim) 74%, transparent), color-mix(in oklab, var(--color-scrim) 40%, transparent) 10%, transparent 24%); }
.hero::after { z-index: 2; }
.hero__contenido { position: absolute; inset: auto 0 0; z-index: 4; display: grid; justify-items: start; gap: var(--space-lg); padding-bottom: var(--space-3xl); }
.hero__titulo { position: relative; }
.hero h1 { font-size: var(--text-display); line-height: 1; max-width: 13ch; text-wrap: balance; }
.hero__bajada { font-size: var(--text-lead); line-height: 1.5; max-width: 40ch; color: var(--color-on-dark); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xs); }
.hero__sello { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-on-dark); }
.hero__sello p { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.hero__sello p span + span { padding-left: var(--space-md); border-left: 1px solid color-mix(in oklab, var(--color-on-dark) 45%, transparent); }
.hero__lugar { align-items: center; gap: var(--space-xs) !important; }
.hero__lugar .i { width: 18px; height: 18px; }
.hero__bajar { position: absolute; z-index: 5; right: var(--gutter); bottom: var(--space-3xl); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in oklab, var(--color-on-dark) 60%, transparent); border-radius: 50%; color: var(--color-on-dark); transition: background-color var(--dur-short) var(--ease-out); }
.hero__bajar:hover { background: color-mix(in oklab, var(--color-scrim) 60%, transparent); }
.hero__bajar .i { width: 18px; height: 18px; transform: rotate(90deg); }
.hero__bajar:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pinos-corte { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 6; display: block; width: 100%; height: clamp(48px, 6vw, 96px); color: var(--color-paper); pointer-events: none; }

/* La mariposa 88: entra volando, se posa sobre "pinos" y, cuando dejás el hero, vuela a posarse en el botón de WhatsApp */
.mariposa-vuelo { position: absolute; z-index: 2; bottom: 96%; left: 50%; width: clamp(64px, 5.6vw, 88px); font-style: normal; pointer-events: none; }
.mariposa-vuelo.is-libre { position: fixed; left: 0; top: 0; bottom: auto; z-index: calc(var(--z-sticky-nav) + 10); will-change: transform; }
.mv { display: block; width: 100%; height: auto; overflow: visible; }
.mv__ala { transform-box: view-box; transform-origin: 0 0; transform: scaleX(0.94); transition: transform var(--dur-med) var(--ease-out); }
.mariposa-vuelo.is-volando .mv__ala { animation: aletea 190ms var(--ease-in-out) infinite alternate; }
.mariposa-vuelo.is-aleteo .mv__ala { animation: aleteaLento 560ms var(--ease-in-out) 2 alternate; }
@keyframes aletea { from { transform: scaleX(1); } to { transform: scaleX(0.12); } }
@keyframes aleteaLento { from { transform: scaleX(0.94); } to { transform: scaleX(0.3); } }
html:has(.menu[open], dialog[open], .cal:not([hidden]), .sel__lista:not([hidden])) .mariposa-vuelo.is-libre { opacity: 0; }
.vuela .flotante__mariposa { display: none; }

/* Entrada del hero y reveals de sección: visibles sin script */
.js [data-entra] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(400ms + var(--d, 0) * 110ms); }
.js .is-listo [data-entra] { opacity: 1; transform: none; }
.js [data-reveal] > :not(.titulo-palabras) { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--r, 0) * 90ms + 120ms); }
.js [data-reveal].is-in > :not(.titulo-palabras) { opacity: 1; transform: none; }
.js .titulo-palabras .palabra { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); transition-delay: calc(var(--p, 0) * 45ms); }
.js .titulo-palabras.is-in .palabra { opacity: 1; transform: none; }
.js .hero .titulo-palabras .palabra { opacity: 1; }
.js .titulo-palabras .pincel__trazo { clip-path: inset(0 100% 0 0); transition: clip-path 760ms var(--ease-out); transition-delay: var(--trazo, 600ms); }
.js .titulo-palabras.is-in .pincel__trazo { clip-path: inset(0 0 0 0); }

/* Fotos: marco y zoom lento */
.zoom, .zoom img { display: block; width: 100%; height: 100%; }
.zoom { overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.zoom img { object-fit: cover; transition: transform var(--dur-zoom) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a:hover .zoom img, .zoom:hover img { transform: scale(1.04); }
}

/* 2. El lugar */
.lugar { position: relative; padding-block: var(--section-gap-s) var(--space-2xl); }
.lugar__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.lugar__texto { grid-column: 1 / span 7; display: grid; gap: var(--space-xl); }
.lugar__texto h2 { max-width: 15ch; }
.lugar__texto .lead { color: var(--color-ink-2); }
.lugar__foto { position: relative; grid-column: 9 / -1; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.lugar__foto .nota--foto { left: -12%; bottom: 10%; max-width: 92%; }
.datos { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); }
.datos li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-md); border-top: 1px solid var(--color-ink); font: 300 1.375rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.datos .i { width: 34px; height: 34px; color: var(--color-pink-ink); }
.lugar__dibujo { margin-top: var(--space-2xl); color: var(--color-pine); }
.lugar__dibujo svg { display: block; width: 100%; height: auto; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .lugar__dibujo svg { stroke-dashoffset: 1; transition: stroke-dashoffset 2600ms var(--ease-in-out); }
.js .lugar__dibujo.is-in svg { stroke-dashoffset: 0; }

/* 3. Las casas */
.casas { padding-block: var(--section-gap-s) var(--section-gap); }
.casas__cabeza { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.casas__cabeza .lead { color: var(--color-ink-2); }
.pestanas { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); margin-bottom: var(--space-2xl); background: color-mix(in oklab, var(--color-paper) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-rule); }
.pestanas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pestana { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-md); align-items: center; padding: var(--space-md) var(--space-xs); border: 0; background: transparent; color: var(--color-muted); text-align: left; cursor: pointer; transition: color var(--dur-press) var(--ease-out); }
.pestana .i { grid-row: 1 / span 2; width: 30px; height: 30px; }
.pestana__nombre { font: 300 clamp(1.375rem, 1vw + 1rem, 2rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.pestana__cap { font-size: var(--text-sm); }
.pestana::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--color-pink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); }
.pestana:hover { color: var(--color-ink-2); }
.pestana[aria-selected="true"] { color: var(--color-ink); }
.pestana[aria-selected="true"] .i { color: var(--color-pink-ink); }
.pestana[aria-selected="true"]::after { transform: scaleX(1); }
.pestana:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }

.fichas { display: grid; gap: var(--section-gap-s); }
.ficha { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; scroll-margin-top: calc(var(--nav-h) + 96px); }
.ficha:focus { outline: none; }
.ficha.is-entrando { animation: fichaEntra 320ms var(--ease-out); }
@keyframes fichaEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.galeria { grid-column: 1 / span 7; position: sticky; top: calc(var(--nav-h) + 112px); display: grid; gap: var(--space-sm); min-width: 0; }
.galeria__escena { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); }
.galeria__principal { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.galeria__principal picture, .galeria__principal img { display: block; width: 100%; height: 100%; }
.galeria__principal img { object-fit: cover; transition: opacity var(--dur-short) var(--ease-out); }
.galeria__principal img.is-cambiando { opacity: 0.4; }
.galeria__principal:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.galeria__flecha { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; translate: 0 -50%; border: 0; border-radius: 50%; background: color-mix(in oklab, var(--color-paper) 88%, transparent); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.galeria__flecha:hover { background: var(--color-paper); }
.galeria__flecha:active { transform: scale(0.96); }
.galeria__flecha:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.galeria__flecha--prev { left: var(--space-md); }
.galeria__flecha--prev .i { transform: rotate(180deg); }
.galeria__flecha--next { right: var(--space-md); }
.galeria__contador { position: absolute; z-index: 4; left: var(--space-md); bottom: var(--space-md); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-scrim) 72%, transparent); color: var(--color-on-dark); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.galeria .nota--foto { top: var(--space-lg); right: var(--space-md); }
.galeria__pie { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.galeria__miniaturas { display: flex; gap: var(--space-xs); padding: var(--space-3xs) var(--space-3xs) var(--space-xs); overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x proximity; scrollbar-width: thin; }
.galeria__miniaturas li { flex: 0 0 auto; scroll-snap-align: start; }
.galeria__mini { display: block; width: 96px; height: 72px; border-radius: 4px; overflow: hidden; outline: 2px solid transparent; outline-offset: 1px; opacity: 0.7; transition: opacity var(--dur-press) var(--ease-out); }
.galeria__mini picture, .galeria__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria__mini:hover { opacity: 1; }
.galeria__mini[aria-current="true"] { opacity: 1; outline-color: var(--color-pink); }
.galeria__mini:focus-visible { opacity: 1; outline-color: var(--color-focus); }

.ficha__info { grid-column: 9 / -1; display: grid; gap: var(--space-lg); align-content: start; }
.ficha__num { font: 300 var(--text-num)/0.9 var(--font-display); letter-spacing: -0.03em; color: var(--color-pink); font-variant-numeric: lining-nums; }
.ficha__info h3 { margin-top: calc(-1 * var(--space-sm)); }
.ficha__bajada { color: var(--color-ink-2); max-width: 48ch; }
.tecnica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); margin: 0; }
.tecnica > div { display: grid; align-content: start; gap: var(--space-2xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.tecnica dt { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.tecnica dt .i { width: 20px; height: 20px; color: var(--color-ink-2); }
.tecnica dd { margin: 0; padding-left: 28px; font: 300 1.75rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.tecnica dd span { display: block; margin-top: var(--space-3xs); font: 400 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }
.distinta__titulo { margin-top: var(--space-xs); }
.distinta { display: grid; gap: var(--space-sm); margin-top: calc(-1 * var(--space-xs)); }
.distinta li { display: flex; gap: var(--space-sm); align-items: flex-start; line-height: 1.4; }
.distinta .i { color: var(--color-pink-ink); }
.calificacion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.calificacion strong { margin-right: var(--space-2xs); font: 300 1.5rem/1 var(--font-display); color: var(--color-ink); font-variant-numeric: lining-nums; }
.calificacion--chica strong { font-size: 1.25rem; }
.ficha__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.aviso { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-input); font-size: var(--text-sm); color: var(--color-ink-2); }
.aviso .i { width: 20px; height: 20px; }
.cabanas-tres { display: grid; gap: var(--space-xs); }
.cabanas-tres li { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-md); row-gap: var(--space-3xs); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.cabanas-tres__nombre { font: 300 1.5rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.cabanas-tres__nombre span { margin-right: var(--space-xs); color: var(--color-pink); font-variant-numeric: lining-nums; }
.cabanas-tres__nota { grid-column: 1; font: 600 1.375rem/1 var(--font-hand); color: var(--color-mauve); }
.cabanas-tres .calificacion { grid-column: 1; }
.cabanas-tres .btn { grid-column: 2; grid-row: 1 / span 3; }

.comparador { margin-top: var(--section-gap-s); display: grid; gap: var(--space-xl); }
.comparador__titulo { font-size: var(--text-section); line-height: 1.04; }
.comparar { width: 100%; border-collapse: collapse; }
.comparar th, .comparar td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-top: 1px solid var(--color-rule); text-align: left; vertical-align: top; }
.comparar thead td { border-top: 0; }
.comparar thead th { border-top: 0; padding-bottom: var(--space-sm); font: 300 var(--text-title)/1 var(--font-display); letter-spacing: -0.02em; }
.comparar thead th a { color: inherit; text-decoration: underline 1.5px transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.comparar thead th a:hover { text-decoration-color: var(--color-pink); }
.comparar tbody th { width: 22%; font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.comparar tbody th .i { display: inline-block; width: 20px; height: 20px; margin-right: var(--space-xs); vertical-align: -5px; color: var(--color-ink-2); }
.comparar td { width: 26%; }
.comparar__accion td { vertical-align: middle; }
.comparar__accion .btn { white-space: nowrap; }
.comparar-tarjetas { display: none; }

/* 4. La piscina */
.piscina { padding-bottom: var(--section-gap); }
.piscina__banda { position: relative; max-width: 1600px; margin-inline: auto; min-height: 760px; overflow: hidden; display: grid; align-items: center; }
.piscina__foto { position: absolute; inset: -8% 0; z-index: 0; }
.piscina__foto picture, .piscina__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.piscina__capa { position: relative; z-index: 4; padding-block: var(--space-3xl); }
.piscina__panel { display: grid; gap: var(--space-lg); max-width: 36rem; padding: var(--space-xl); background: var(--color-paper); border-radius: var(--radius-card); }
.piscina__panel h2 { font-size: clamp(2rem, 2vw + 1.1rem, 3.25rem); }
.piscina__panel p { color: var(--color-ink-2); }
.piscina__datos { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.piscina__datos li { display: flex; align-items: center; gap: var(--space-xs); font-weight: 600; }
.piscina__datos .i { color: var(--color-turq-ink); width: 26px; height: 26px; }
.ola { width: 100%; height: 22px; color: var(--color-turq); }
.piscina__tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.piscina__tira a { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-card); }
.piscina__tira a:focus-visible, .fuego a:focus-visible, .masonry a:focus-visible, .tira a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* 5. Atardeceres y noches */
.atardecer { --color-focus: var(--color-ink); position: relative; padding-block: var(--section-gap) var(--section-gap); color: var(--color-ink); background-color: var(--color-dusk-luz); background-image: url("img/atardecer-vetas-1600.jpg"); background-image: image-set(url("img/atardecer-vetas-1600.avif") type("image/avif"), url("img/atardecer-vetas-1600.webp") type("image/webp"), url("img/atardecer-vetas-1600.jpg") type("image/jpeg")); background-size: cover; background-position: center; overflow: hidden; }
@media (max-width: 40rem) { .atardecer { background-image: url("img/atardecer-vetas-900.jpg"); background-image: image-set(url("img/atardecer-vetas-900.avif") type("image/avif"), url("img/atardecer-vetas-900.webp") type("image/webp"), url("img/atardecer-vetas-900.jpg") type("image/jpeg")); } }
.atardecer > * { position: relative; z-index: 1; }
.atardecer::after { z-index: 2; }
.atardecer__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.atardecer__cabeza h2 { max-width: 14ch; }
.atardecer .pincel__trazo { fill: var(--color-pink); }
.atardecer__frase { margin-top: var(--space-3xl); font: italic 300 var(--text-frase)/1.05 var(--font-display); letter-spacing: -0.025em; max-width: 18ch; }

/* Carruseles: scroll-snap nativo, arrastre, flechas y puntos */
.carrusel { position: relative; }
.rail { scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.carrusel .rail { display: flex; gap: var(--space-md); overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-y: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.carrusel .rail > li { flex: 0 0 auto; scroll-snap-align: start; }
.rail.is-arrastrando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rail.is-arrastrando a { pointer-events: none; }
.carrusel__controles { display: flex; gap: var(--space-xs); }
html:not(.js) .carrusel__controles { display: none; }
.carrusel__flecha { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out); }
.carrusel__flecha:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
.carrusel__flecha:active { transform: scale(0.96); }
.carrusel__flecha:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.carrusel__flecha:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.carrusel__flecha--prev .i { transform: rotate(180deg); }
.carrusel__puntos { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-lg); }
.carrusel__puntos span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.3; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.carrusel__puntos span.is-on { opacity: 1; transform: scale(1.4); }
.tira { --alto: clamp(300px, 30vw, 460px); }
.tira__item figure { display: grid; gap: var(--space-xs); padding-bottom: var(--space-xs); }
.tira__item a { display: block; height: var(--alto); aspect-ratio: var(--ar); border-radius: var(--radius-card); overflow: hidden; }
.tira__item a picture, .tira__item a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tira .nota { color: var(--color-ink); font-size: 1.625rem; }

/* 6. Todo el año */
.anio { padding-block: var(--section-gap); background: var(--color-pine-night); color: var(--color-on-dark); }
.anio__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; position: relative; z-index: 1; }
.anio__texto { grid-column: 1 / span 5; display: grid; gap: var(--space-xl); }
.anio__texto h2 { max-width: 12ch; }
.anio .pincel__trazo { fill: var(--color-pink-light); }
.anio .lead { color: var(--color-on-dark-2); }
.cita { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-dark); }
.cita blockquote { margin: 0; }
.cita blockquote p { font: italic 300 clamp(1.5rem, 1vw + 1.1rem, 2rem)/1.25 var(--font-display); text-indent: -0.4em; }
.cita figcaption { font-size: var(--text-sm); color: var(--color-on-dark-2); }
.fuego { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 10vw, 150px); grid-template-areas: "a a b c" "a a e e" "d d f g" "d d f g"; gap: var(--space-sm); }
.fuego li { position: relative; min-width: 0; }
.fuego a { display: block; height: 100%; border-radius: var(--radius-card); }
.fuego__a { grid-area: a; } .fuego__b { grid-area: b; } .fuego__c { grid-area: c; } .fuego__d { grid-area: d; } .fuego__e { grid-area: e; } .fuego__f { grid-area: f; } .fuego__g { grid-area: g; }
.brasa::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-card); pointer-events: none; background: radial-gradient(60% 60% at 50% 60%, var(--color-glow), transparent 70%); mix-blend-mode: soft-light; opacity: 0.08; }
.anio.is-vivo .brasa::after { animation: brasa 9s var(--ease-in-out) infinite alternate; }
@keyframes brasa { from { opacity: 0.06; } to { opacity: 0.32; } }

/* 7. Reseñas */
.resenas { padding-block: var(--section-gap) var(--section-gap-s); background: var(--color-paper-2); }
.resenas__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-2xl) 0 var(--space-3xl); }
.cifras > div { display: grid; align-content: start; gap: var(--space-xs); padding-inline: var(--space-xl); border-left: 1px solid var(--color-rule); }
.cifras > :first-child { padding-left: 0; border-left: 0; }
.cifras dd { margin: 0; order: 1; display: grid; justify-items: start; gap: var(--space-xs); font: 300 var(--text-figure)/1 var(--font-display); letter-spacing: -0.03em; }
.cifras dt { order: 2; font-size: var(--text-sm); color: var(--color-ink-2); }
.cifras dd > .i { width: 26px; height: 26px; color: var(--color-pink-ink); }
.resenas__lista { padding-bottom: var(--space-xs); }
.resena { width: calc((100% - 2 * var(--space-md)) / 3); display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); background: var(--color-paper); border-radius: var(--radius-card); }
.resena blockquote { margin: 0; }
.resena blockquote p { font: 300 1.25rem/1.45 var(--font-display); text-indent: -0.35em; }
.resena__quien { font-size: var(--text-sm); color: var(--color-ink-2); }
.resena__quien strong { display: block; color: var(--color-ink); }
.resenas .carrusel__puntos { color: var(--color-ink); }
.resenas__todas { margin-top: var(--space-xl); }

/* 8. Punta del Diablo */
.diablo { padding-block: var(--section-gap) var(--space-3xl); }
.diablo__cabeza { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; margin-bottom: var(--space-2xl); }
.diablo__cabeza h2 { grid-column: 1 / span 6; }
.diablo__cabeza .lead { grid-column: 7 / -1; color: var(--color-ink-2); }
.masonry { columns: 4 240px; column-gap: var(--space-md); }
.masonry li { break-inside: avoid; margin-bottom: var(--space-md); }
.masonry__item { position: relative; }
.masonry__item a { display: block; border-radius: var(--radius-card); overflow: hidden; }
.masonry__item img { display: block; width: 100%; height: auto; transition: transform var(--dur-zoom) var(--ease-out); }
.masonry__item .nota { position: absolute; left: var(--space-sm); bottom: var(--space-sm); z-index: 2; padding: var(--space-xs) var(--space-sm); background: var(--color-paper); border-radius: 3px; transform: rotate(-2deg); font-size: 1.5rem; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .js .masonry__item .nota { opacity: 0; transform: rotate(-2deg) translateY(6px); }
  .masonry__item:hover .nota, .masonry__item:focus-within .nota { opacity: 1; transform: rotate(-2deg); }
  .masonry__item a:hover img { transform: scale(1.04); }
}

/* 9. Cómo llegar */
.llegar { padding-block: var(--space-3xl) var(--section-gap-l); }
.llegar__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: center; }
.llegar__mapa { position: relative; grid-column: 1 / span 7; height: 520px; padding: var(--space-md); }
.llegar__mapa::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(var(--color-pine), var(--color-pine)) top left / 44px 2px no-repeat, linear-gradient(var(--color-pine), var(--color-pine)) top left / 2px 44px no-repeat,
  linear-gradient(var(--color-pine), var(--color-pine)) top right / 44px 2px no-repeat, linear-gradient(var(--color-pine), var(--color-pine)) top right / 2px 44px no-repeat,
  linear-gradient(var(--color-pine), var(--color-pine)) bottom left / 44px 2px no-repeat, linear-gradient(var(--color-pine), var(--color-pine)) bottom left / 2px 44px no-repeat,
  linear-gradient(var(--color-pine), var(--color-pine)) bottom right / 44px 2px no-repeat, linear-gradient(var(--color-pine), var(--color-pine)) bottom right / 2px 44px no-repeat; }
.llegar__mapa iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); filter: saturate(0.7) sepia(0.14) contrast(1.02); }
.llegar__mariposa { position: absolute; z-index: 2; top: 50%; left: 50%; width: 44px; translate: -10% -150%; pointer-events: none; filter: var(--shadow-mariposa); }
.llegar__mariposa svg { display: block; width: 100%; height: auto; overflow: visible; }
.llegar__tarjeta { grid-column: 9 / -1; display: grid; gap: var(--space-xl); }
.llegar__tarjeta h2 { font-size: var(--text-section); }
.llegar__datos { display: grid; gap: var(--space-md); }
.llegar__datos li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.llegar__datos .i { color: var(--color-pink-ink); }
.llegar__acciones { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* 10. Reservar */
.reservar { position: relative; padding-block: var(--section-gap) var(--section-gap-s); background: var(--color-pine); color: var(--color-on-dark); }
.pinos-corte--arriba { top: 1px; bottom: auto; translate: 0 -100%; color: var(--color-pine); }
.reservar__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.reservar__texto { grid-column: 1 / span 5; display: grid; gap: var(--space-xl); }
.reservar .pincel__trazo { fill: var(--color-pink-light); }
.reservar .lead { color: var(--color-on-dark-2); }
.condiciones { display: grid; gap: var(--space-sm); }
.condiciones li { display: flex; align-items: center; gap: var(--space-sm); }
.condiciones .i { color: var(--color-pink-light); }
.fill { display: inline-block; padding: 0 0.5em; border: 1px dashed currentColor; border-radius: var(--radius-pill); font-size: var(--text-md); color: var(--color-on-dark-2); }
.consulta { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); padding: var(--space-xl); background: var(--color-pine-2); border-radius: var(--radius-card); }
.campo { display: grid; gap: var(--space-xs); min-width: 0; align-content: start; }
.campo--full { grid-column: 1 / -1; }
.campo label { font-size: var(--text-sm); font-weight: 600; }
.campo__select, .campo__fecha { position: relative; }
.campo select, .campo input { width: 100%; min-width: 0; min-height: 52px; padding: 0 var(--space-2xl) 0 var(--space-md); border: 1px solid var(--color-on-dark-2); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); -webkit-appearance: none; appearance: none; outline: 2px solid transparent; outline-offset: 2px; }
.campo__select::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--color-ink); border-bottom: 1.5px solid var(--color-ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.campo__fecha > .i { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--color-ink-2); pointer-events: none; }
.campo__fecha input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.campo select:hover, .campo input:hover { border-color: var(--color-on-dark); }
.campo select:focus-visible, .campo input:focus-visible { outline-color: var(--color-focus); }
.campo input[aria-invalid="true"] { border-color: var(--color-error); }
.campo select:disabled, .campo input:disabled { opacity: 0.55; cursor: not-allowed; }
.consulta .btn { width: 100%; margin-top: var(--space-xs); }
/* Selects y calendario propios: el control nativo queda debajo como fuente del valor */
.js .campo .nativo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.js .campo__select::after, .js .campo__fecha > .i { display: none; }
.sel, .fecha { position: relative; }
.campo:has([aria-expanded="true"]) { position: relative; z-index: var(--z-dropdown); }
.sel__boton, .fecha__boton { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-on-dark-2); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); text-align: left; cursor: pointer; transition: border-color var(--dur-press) var(--ease-out); }
.sel__boton:hover, .fecha__boton:hover { border-color: var(--color-on-dark); }
.sel__boton:focus-visible, .fecha__boton:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sel__boton[aria-invalid="true"], .fecha__boton[aria-invalid="true"] { border-color: var(--color-error); }
.sel__boton:disabled, .fecha__boton:disabled { opacity: 0.55; cursor: not-allowed; }
.sel__texto, .fecha__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__texto small { margin-left: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.fecha__texto.is-vacia { color: var(--color-muted); }
.sel__flecha { width: 9px; height: 9px; margin-right: var(--space-2xs); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.sel__boton[aria-expanded="true"] .sel__flecha { transform: translateY(20%) rotate(225deg); }
.sel__mini, .sel__op img { width: 40px; height: 30px; flex-shrink: 0; border-radius: 3px; object-fit: cover; }
.fecha__boton .i { width: 20px; height: 20px; color: var(--color-ink-2); }
.sel__lista, .cal { --color-focus: var(--color-pink-ink); }
.sel__lista, .cal { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--space-xs)); left: 0; padding: var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-popover); transform-origin: top center; }
.sel__lista { right: 0; max-height: 340px; overflow-y: auto; margin: 0; list-style: none; }
.sel__lista[hidden], .cal[hidden] { display: none; }
.sel__lista:not([hidden]), .cal:not([hidden]) { animation: popEntra 180ms var(--ease-out); }
@keyframes popEntra { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: none; } }
.sel__op { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); cursor: pointer; }
.sel__op small { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.sel__op.is-activa { background: var(--color-paper-2); }
.sel__op[aria-selected="true"] { font-weight: 600; }
.sel__op[aria-selected="true"]::after { content: ""; width: 6px; height: 11px; margin-left: auto; border-right: 2px solid var(--color-pine); border-bottom: 2px solid var(--color-pine); transform: rotate(45deg) translate(-2px, -2px); }
.cal { width: 328px; max-width: calc(200% + var(--space-md)); padding: var(--space-md); }
.fecha--der .cal { left: auto; right: 0; transform-origin: top right; }
.cal__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.cal__mes { font: 300 1.375rem/1 var(--font-display); letter-spacing: -0.01em; text-transform: none; }
.cal__nav { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-press) var(--ease-out); }
.cal__nav:hover { background: var(--color-paper-2); }
.cal__nav:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal__nav--prev .i { transform: rotate(180deg); }
.cal__nav .i { width: 18px; height: 18px; }
.cal__semana, .cal__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3xs); }
.cal__semana span { padding-block: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.cal__dia { display: grid; place-items: center; aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--color-ink); font-size: var(--text-sm); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-press) var(--ease-out); }
.cal__dia:hover { background: var(--color-paper-2); }
.cal__dia:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.cal__dia:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; }
.cal__dia.is-hoy { box-shadow: inset 0 0 0 1px var(--color-rule); }
.cal__dia.is-rango { border-radius: 4px; background: var(--color-paper-2); }
.cal__dia.is-llegada, .cal__dia[aria-pressed="true"] { background: var(--color-pine); color: var(--color-on-dark); }
.cal__pie { display: flex; justify-content: space-between; margin-top: var(--space-sm); font-size: var(--text-sm); }
.cal__pie button { min-height: 40px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-pink-ink); font-weight: 600; cursor: pointer; }
.cal__pie button:hover { background: var(--color-paper-2); }
.cal__pie button:focus-visible { outline: 2px solid var(--color-focus); }
.consulta__ayuda { min-height: 1lh; font-size: var(--text-sm); color: var(--color-on-dark-2); }
.faq { margin-top: var(--space-3xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.faq__titulo { grid-column: 1 / -1; margin-bottom: var(--space-lg); }
.faq details { border-top: 1px solid var(--color-rule-dark); border-bottom: 1px solid var(--color-rule-dark); margin-top: -1px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); min-height: 64px; padding-block: var(--space-sm); font: 300 1.375rem/1.25 var(--font-display); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex-shrink: 0; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq summary:hover { color: var(--color-pink-light); }
.faq__r { padding-bottom: var(--space-lg); color: var(--color-on-dark-2); }
.faq details[open] .faq__r { animation: fichaEntra 260ms var(--ease-out); }

/* Pie */
.pie { position: relative; padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-pine-night); color: var(--color-on-dark); }
.pie .pinos-corte--arriba { color: var(--color-pine-night); }
.pie__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: end; }
.pie__logo { grid-column: 1 / span 4; display: block; width: max-content; border-radius: var(--radius-input); }
.pie__logo svg { display: block; height: clamp(120px, 15vw, 240px); width: auto; aspect-ratio: 2250 / 1344; }
.pie__dir { grid-column: 5 / span 3; font-style: normal; color: var(--color-on-dark-2); }
.pie__links { grid-column: 8 / span 3; display: grid; gap: var(--space-xs); }
.pie__dir a, .pie__links a, .pie__fine a { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-on-dark); text-decoration: underline 1px; text-decoration-color: color-mix(in oklab, var(--color-on-dark) 35%, transparent); text-underline-offset: 0.25em; }
.pie__links a:hover, .pie__fine a:hover { text-decoration-color: var(--color-pink-light); }
.pie__links .i { width: 18px; height: 18px; }
.pie__fine { grid-column: 11 / -1; font-size: var(--text-sm); color: var(--color-on-dark-2); }

/* Botón flotante de WhatsApp en el celular */
.flotante { display: none; }

/* Lightbox */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: color-mix(in oklab, var(--color-scrim) 94%, transparent); color: var(--color-on-dark); overflow: hidden; --color-focus: var(--color-focus-dark); }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; animation: menuEntra var(--dur-med) var(--ease-out); }
.lightbox__escena { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-3xl) var(--space-4xl) calc(var(--space-3xl) + var(--space-lg)); touch-action: pan-y; }
.lightbox__escena img { display: block; max-width: 100%; max-height: calc(100dvh - 2 * var(--space-3xl) - var(--space-lg)); width: auto; height: auto; object-fit: contain; border-radius: 4px; transform-origin: center; }
.lightbox__pie { position: absolute; left: 50%; bottom: calc(var(--space-lg) + 1.6em); translate: -50% 0; width: min(90%, 40rem); text-align: center; font-size: var(--text-sm); color: var(--color-on-dark-2); }
.lightbox__contador { position: absolute; left: 50%; bottom: var(--space-lg); translate: -50% 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid color-mix(in oklab, var(--color-on-dark) 40%, transparent); border-radius: 50%; background: color-mix(in oklab, var(--color-scrim) 50%, transparent); color: var(--color-on-dark); cursor: pointer; transition: background-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.lightbox__btn:hover { background: color-mix(in oklab, var(--color-on-dark) 16%, transparent); }
.lightbox__btn:active { transform: scale(0.96); }
.lightbox__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.lightbox__cerrar { top: var(--space-lg); right: var(--space-lg); }
.lightbox__prev { left: var(--space-lg); top: 50%; translate: 0 -50%; }
.lightbox__prev .i { transform: rotate(180deg); }
.lightbox__next { right: var(--space-lg); top: 50%; translate: 0 -50%; }
.lightbox__prev:active, .lightbox__next:active { transform: scale(0.96); }

/* Pantallas muy anchas: solo la foto de 2048 px, para no agrandar ninguna más allá de su ancho */
@media (min-width: 100rem) {
  .hero__slide:not(:first-child) { display: none; }
}

/* Debajo de 64rem: una columna, menú a pantalla completa, pestañas compactas */
@media (max-width: 63.99rem) {
  .mariposa-vuelo { bottom: 210%; left: 26%; width: 56px; }
  :root { --nav-h: 64px; }
  .nav__links, .btn--nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .nav__logo svg { height: 44px; }
  .lugar__grid, .ficha, .anio__grid, .llegar__grid, .reservar__grid, .pie__grid, .diablo__cabeza { grid-template-columns: minmax(0, 1fr); }
  .lugar__texto, .lugar__foto, .datos, .galeria, .ficha__info, .anio__texto, .fuego, .llegar__mapa, .llegar__tarjeta, .reservar__texto, .consulta, .pie__logo, .pie__dir, .pie__links, .pie__fine, .diablo__cabeza h2, .diablo__cabeza .lead { grid-column: 1; grid-row: auto; }
  .lugar__foto { aspect-ratio: 4 / 3; }
  .lugar__foto .nota--foto { left: var(--space-md); }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria { position: static; }
  .ficha__info { margin-top: var(--space-xl); }
  .resena { width: 82%; max-width: 26rem; }
  .comparar { display: none; }
  .comparar-tarjetas { display: grid; gap: var(--space-md); }
  .comparar-tarjetas > li { padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); }
  .comparar-tarjetas h4 { font: 300 var(--text-title)/1.1 var(--font-display); letter-spacing: -0.02em; margin-bottom: var(--space-sm); }
  .comparar-tarjetas dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-md); margin: 0; font-size: var(--text-sm); }
  .comparar-tarjetas dt { color: var(--color-muted); }
  .comparar-tarjetas dd { margin: 0; }
  .comparar-tarjetas .btn { margin-top: var(--space-md); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .piscina__banda { min-height: 0; display: block; }
  .piscina__foto { position: relative; inset: auto; height: 62vw; min-height: 300px; }
  .piscina__capa { padding-block: 0; margin-top: -72px; }
  .piscina__panel { padding: var(--space-lg); }
  .piscina__tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-block: var(--space-xl) var(--space-2xl); }
  .cifras > div { padding: var(--space-lg) 0 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .cifras > :first-child { padding-top: 0; border-top: 0; }
  .masonry { columns: 2; }
  .llegar__mapa { height: 420px; }
  .hero__bajar { display: none; }
  .flotante { position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-toast); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--color-pine); color: var(--color-on-dark); box-shadow: var(--shadow-flotante); transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); --color-focus: var(--color-focus-dark); }
  .js .flotante:not(.is-visible) { transform: translateY(140%); opacity: 0; }
  .flotante .i { width: 28px; height: 28px; }
  .flotante:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .flotante__mariposa { position: absolute; top: -10px; left: -8px; width: 24px; }
  .flotante__mariposa svg { display: block; width: 100%; height: auto; overflow: visible; }
  .lightbox__escena { padding: var(--space-3xl) var(--space-xs) calc(var(--space-4xl) + var(--space-md)); }
  .lightbox__escena img { max-height: calc(100dvh - var(--space-3xl) - var(--space-4xl) - var(--space-md)); }
  .cita blockquote p, .resena blockquote p { text-indent: 0; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--space-md); translate: none; }
}
@media (max-width: 40rem) {
  .solo-ancho { display: none; }
  .cal, .fecha--der .cal { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; bottom: var(--space-md); width: auto; max-width: none; transform-origin: bottom center; }
  .hero__contenido { gap: var(--space-md); }
  .hero__acciones { width: 100%; }
  .hero__acciones .btn { flex: 1 1 auto; }
  .pestana { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--space-sm) var(--space-2xs); }
  .pestana .i { grid-row: auto; width: 24px; height: 24px; }
  .pestana__nombre { font-size: 1.25rem; }
  .pestana__cap { font-size: var(--text-xs); }
  .tecnica { grid-template-columns: minmax(0, 1fr); }
  .cabanas-tres li { grid-template-columns: minmax(0, 1fr); }
  .cabanas-tres .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--space-xs); }
  .consulta { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg) var(--space-md); }
  .fuego { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; grid-template-areas: "a a" "a a" "b c" "e e" "d d" "f g"; }
  .tira { --alto: 300px; }
  .galeria__flecha { width: 44px; height: 44px; }
}

/* Sin movimiento: todo en su estado final, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-vivo img, .mv__ala, .anio.is-vivo .brasa::after, .ficha.is-entrando, .menu[open] .menu__panel, .lightbox[open], .faq details[open] .faq__r, .sel__lista, .cal { animation: none !important; }
  .js [data-entra], .js [data-reveal] > *, .js .titulo-palabras .palabra { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .titulo-palabras .pincel__trazo { clip-path: none !important; transition: none !important; }
  .js .lugar__dibujo svg { stroke-dashoffset: 0 !important; transition: none !important; }
  .btn:active, .carrusel__flecha:active, .galeria__flecha:active, .lightbox__btn:active { transform: none; }
  .zoom img, .masonry__item img { transition: none; }
  a:hover .zoom img, .zoom:hover img, .masonry__item a:hover img { transform: none; }
  .flotante { transition: none; }
  [data-parallax] { transform: none !important; }
}