/* AIRE Core · estilos de FICHA — uno solo para los cinco tipos (STAY, EAT & DRINK, EXPERIENCES, WINE, MAKERS). Cambiar algo acá lo cambia en todas las fichas. Los bloques los arma el plugin (includes/ficha-shortcodes.php); Elementor solo los ordena. Escopado bajo #aire-maqueta para ganarle al CSS del kit de Elementor. ESCALA TIPOGRÁFICA (Fernando, 29/9): Material Design 2, «The type system» (m2.material.io/design/typography/the-type-system.html). Tamaños del spec; interlineados de la librería web de Material (MDC). Fraunces en títulos y en el cuerpo de la nota; Inter en fichas, datos e interfaz. H2 60/60 ........ nombre de un destino H3 48/50 ........ título de la nota, nombre de la ficha, título de listado H4 34/40 ........ nota principal (portada, Journal), Travel Book, lema; en mobile, los H2 y H3 H5 24/32 ........ títulos de sección, subtítulos de la nota, cita destacada H6 20/28 ........ bajadas, «Por qué lo elegimos», títulos de tarjeta Subtitle 1 16/24 títulos chicos (tarjeta relacionada, «Lo último») Body 1 16/24 .... cuerpo de la nota (Fraunces) y de la ficha (Inter) Body 2 14/20 .... datos, contacto, meta, footer, epígrafes en el visor Caption 12/20 ... epígrafes, fecha de verificación, letra chica Overline 12/16 .. antetítulos en mayúsculas (el spec dice 10; se usa 12, el valor de MDC web, por legibilidad: audiencia 35+) Button 14 ....... botones, chips, menú No se usan tamaños fuera de esta lista. Forma: 8 chips · 12 medios · 16 tarjetas y fotos · full botones. Grilla de 4px. Referencias de Fernando: Relais & Châteaux (barra fija en mobile) y la tarjeta "98 Beach" (relación de tamaños, tarjeta flotante con botón circular). */ /* Fondo blanco en todo el sitio (Fernando, 30/9: «llevemos todo a fondo blanco»; antes crema #FAF8F4). --paper sigue siendo el «claro» sobre tinta. */ body { margin: 0; background: #FFFFFF; } /* el kit de Elementor pone el body en blanco: en escritorio se veían franjas blancas a los costados del contenido (auditoría B2) */ html body.aire-page { background: #FFFFFF; } #aire-maqueta, #aire-maqueta * { box-sizing: border-box; } #aire-maqueta { font-family: 'Inter', system-ui, sans-serif; color: #1E1B16; background: #FFFFFF; /* texto chico sobre crema: mínimo 4,5:1 (WCAG AA, auditoría M1). --muted #6B665C 5,4:1 (antes #8A8478, 3,5:1) · --bronze-text #8A5A33 5,5:1 para rótulos en bronce (--bronze, 3,7:1, queda para superficies) */ --ink: #1E1B16; --ink-2: #3E3A32; --muted: #6B665C; --line: #E6E1D7; --line-2: #CFC8BA; --paper: #FFFFFF; --bronze: #A9754A; --bronze-text: #8A5A33; --brand: #d2b587; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px; } #aire-maqueta a { text-decoration: none; color: inherit; } #aire-maqueta p { margin: 0; } #aire-maqueta .serif { font-family: 'ivymode', 'Fraunces', Georgia, serif; } #aire-maqueta img { max-width: 100%; } /* Elementor pone 20px de separación fija entre los hijos de cada container: acá los espacios los decide este CSS. */ #aire-maqueta .e-con > .e-con-inner, #aire-maqueta.e-con > .e-con-inner { gap: 0 !important; } #aire-maqueta .elementor-widget-shortcode, #aire-maqueta .elementor-shortcode { width: 100%; } /* #aire-maqueta y .aire-content son el MISMO elemento (selector pegado). */ #aire-maqueta.aire-content { max-width: 1120px; width: 100%; margin: 0 auto; padding: 8px 48px 0; } /* ---------- header (MD3 top app bar, 64px) / footer ---------- */ /* Fijo arriba: el sticky va en el contenedor de la ubicación "header" de Elementor (hijo directo de la página); en el header en sí no tendría recorrido, porque su container mide lo mismo que él. */ .elementor-location-header { position: sticky; top: 0; z-index: 50; } #aire-maqueta .aire-header { position: relative; height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 48px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } #aire-maqueta .aire-header.is-scrolled { border-bottom-color: #ECE7DD; box-shadow: 0 6px 18px -14px rgba(30,27,22,.35); } #aire-maqueta .aire-logo { display: flex; align-items: center; flex: 0 0 auto; } #aire-maqueta .aire-logo-img, #aire-maqueta .aire-logo-svg { height: 28px; width: auto; display: block; } #aire-maqueta .aire-logo { gap: 12px; } #aire-maqueta .aire-logo-svg, #aire-maqueta .aire-logo-tb { color: var(--brand); } #aire-maqueta .aire-logo-tb { height: 26px; width: auto; display: block; } #aire-maqueta .aire-logo-sep { width: 1px; height: 28px; background: var(--line-2); display: block; } #aire-maqueta .aire-logo-text { font-size: 20px; font-weight: 560; color: var(--ink); } #aire-maqueta .aire-nav { flex: 1 1 auto; display: flex; justify-content: center; gap: 4px; } #aire-maqueta .nav-link { color: var(--ink-2); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px; padding: 10px 16px; border-radius: var(--r-full); white-space: nowrap; transition: background .15s ease; } #aire-maqueta .nav-link:hover { background: #EFEAE1; } #aire-maqueta .nav-link.is-active { background: var(--ink); color: var(--paper); } #aire-maqueta .aire-header-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } #aire-maqueta .aire-icon-btn { width: 40px; height: 40px; border-radius: var(--r-full); border: 0; background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } #aire-maqueta .aire-icon-btn:hover { background: #EFEAE1; } #aire-maqueta .aire-menu-toggle { display: none; } #aire-maqueta .aire-menu-toggle .aire-ico-close, #aire-maqueta .aire-menu-toggle[aria-expanded="true"] .aire-ico-open { display: none; } #aire-maqueta .aire-menu-toggle[aria-expanded="true"] .aire-ico-close { display: block; } #aire-maqueta .aire-search input { height: 40px; width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-full); background: #FFFFFF; padding: 0 16px; font: 400 14px/20px 'Inter', system-ui, sans-serif; color: var(--ink); outline: none; } #aire-maqueta .aire-search input:focus { border-color: var(--ink); } /* buscador del header: se despliega al tocar la lupa */ #aire-maqueta .aire-search--header { width: 0; overflow: hidden; transition: width .2s ease; } #aire-maqueta .aire-header.is-searching .aire-search--header { width: 240px; } #aire-maqueta .aire-header.is-searching .aire-nav { visibility: hidden; } /* menú de mobile: panel debajo de la barra, con la bajada de cada sección */ #aire-maqueta .aire-drawer { position: absolute; top: 64px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid #ECE7DD; box-shadow: 0 18px 30px -20px rgba(30,27,22,.35); padding: 12px 20px 20px; } #aire-maqueta .aire-drawer[hidden] { display: none; } #aire-maqueta .aire-drawer .aire-search { margin-bottom: 8px; } #aire-maqueta .aire-drawer-link { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px; border-bottom: 1px solid #EFEAE1; } #aire-maqueta .aire-drawer-link:last-child { border-bottom: 0; } #aire-maqueta .aire-drawer-link span { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 20px; line-height: 28px; font-weight: 440; color: var(--ink); } #aire-maqueta .aire-drawer-link small { font-size: 12px; line-height: 16px; color: var(--muted); } #aire-maqueta .aire-drawer-link.is-active span { color: var(--bronze-text); } #aire-maqueta .aire-footer { border-top: 1px solid #ECE7DD; margin-top: 24px; } #aire-maqueta .aire-footer-inner { max-width: 1120px; margin: 0 auto; padding: 48px 48px 32px; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; } #aire-maqueta .aire-footer-brand .aire-logo-img, #aire-maqueta .aire-footer-brand .aire-logo-svg { height: 32px; } #aire-maqueta .aire-footer-brand .aire-logo-tb { height: 30px; } #aire-maqueta .aire-footer-brand .aire-logo-sep { height: 32px; } #aire-maqueta .aire-footer-brand p { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); } #aire-maqueta .aire-footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; } #aire-maqueta .aire-footer-nav a { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); } #aire-maqueta .aire-footer-nav a:hover { color: var(--ink); } #aire-maqueta .aire-footer-legal { border-top: 1px solid #ECE7DD; padding: 16px 48px; text-align: center; font-size: 12px; line-height: 16px; color: var(--muted); } /* ---------- tipografía común ---------- */ /* Títulos de sección: en Fraunces, como el nombre de la ficha, más chicos (MD3 Headline Small 24/32; 22/28 en mobile). Pedido de Fernando, 28/9. */ #aire-maqueta .aire-label { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 24px; line-height: 32px; font-weight: 460; letter-spacing: -.003em; text-transform: none; color: var(--ink); margin: 0 0 12px; } #aire-maqueta .aire-eyebrow { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-text); margin: 0 0 8px; } #aire-maqueta .aire-h1 { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-weight: 460; font-size: 48px; line-height: 50px; letter-spacing: -.005em; margin: 0 0 8px; color: var(--ink); } /* Bajada de la ficha: en Fraunces itálica liviana, como una bajada de revista (misma letra que "Por qué lo elegimos"). Pedido de Fernando, 28/9. */ #aire-maqueta .aire-bajada { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-style: italic; font-weight: 340; font-size: 20px; line-height: 28px; letter-spacing: -.003em; color: #57524A; margin: 0 0 16px; } /* ---------- foto principal ---------- */ #aire-maqueta .aire-hero-wrap { position: relative; margin-top: 8px; } #aire-maqueta .aire-hero-photo { position: relative; height: 460px; border-radius: var(--r-lg); overflow: hidden; background: #C1A57E; } #aire-maqueta .aire-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #aire-maqueta .aire-badges-top { position: absolute; inset: 24px 24px auto 24px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; pointer-events: none; } #aire-maqueta .chip-dark { background: rgba(30,27,22,.55); backdrop-filter: blur(6px); color: var(--paper); padding: 6px 12px; border-radius: var(--r-sm); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; } #aire-maqueta .chip-accent { background: var(--bronze); color: #FFFFFF; padding: 6px 12px; border-radius: var(--r-sm); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; } #aire-maqueta .aire-badge-right { margin-left: auto; } /* persona sobre el borde de la foto (EAT & DRINK: el chef, solo con foto). Avatar de 96 px (72 en mobile, para no tocar la tarjeta de la última nota), agrandado a pedido de Fernando, 28/9. */ /* avatar centrado en el borde inferior de la foto: bottom = -(alto del avatar / 2) */ #aire-maqueta .aire-chef-block { position: absolute; left: 32px; bottom: -48px; z-index: 3; display: flex; align-items: center; gap: 12px; } #aire-maqueta .aire-avatar-float { width: 96px; height: 96px; border-radius: var(--r-full); background: #FFFFFF; padding: 4px; box-shadow: 0 10px 22px -10px rgba(30,27,22,.28); display: block; } #aire-maqueta .aire-avatar-float img { width: 100%; height: 100%; border-radius: var(--r-full); object-fit: cover; display: block; } #aire-maqueta .aire-chef-pill { background: var(--ink); color: var(--paper); font-size: 12px; line-height: 16px; font-weight: 600; padding: 8px 14px; border-radius: var(--r-full); white-space: nowrap; } #aire-maqueta .aire-chip.aire-chef-chip--alt { display: none; } /* .aire-chip: le gana a la regla general del chip */ /* última nota: tarjeta oscura flotando sobre el borde de la foto, con la imagen de la nota, título, fecha y el botón circular (referencia) */ #aire-maqueta .aire-note-float { position: absolute; right: 32px; bottom: -40px; z-index: 3; width: 248px; display: block; background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: 8px; box-shadow: 0 18px 36px -18px rgba(30,27,22,.45); transition: transform .2s ease; } #aire-maqueta .aire-note-float:hover { transform: translateY(-3px); } #aire-maqueta .aire-note-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #3A352D; } #aire-maqueta .aire-note-media img { width: 100%; height: 100%; object-fit: cover; display: block; } #aire-maqueta .aire-note-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 44px 6px 8px; } #aire-maqueta .aire-note-kicker { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #C9A27A; } #aire-maqueta .aire-note-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--paper); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #aire-maqueta .aire-note-meta { font-size: 12px; line-height: 16px; color: rgba(250,248,244,.6); } #aire-maqueta .aire-note-arrow { position: absolute; right: -14px; bottom: 16px; width: 44px; height: 44px; border-radius: var(--r-full); background: var(--paper); color: var(--ink); border: 4px solid var(--ink); display: flex; align-items: center; justify-content: center; } /* ---------- título, chips, botones ---------- */ #aire-maqueta .aire-title-block { margin-top: 48px; } #aire-maqueta:has(.aire-chef-block) .aire-title-block { margin-top: 64px; } /* avatar centrado: sobresale 48 px */ /* Chips (MD3 assist chip): 32px, radio 8, Label Large 14/20 */ #aire-maqueta .aire-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } #aire-maqueta .aire-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); white-space: nowrap; } #aire-maqueta .aire-chip svg { width: 16px; height: 16px; flex: 0 0 16px; } #aire-maqueta a.aire-chip--destino { transition: background .15s ease, border-color .15s ease; } #aire-maqueta a.aire-chip--destino:hover { background: #F5F2EC; border-color: var(--ink-2); } /* lo pago, identificado sin dominar (auditoría A5) */ #aire-maqueta .aire-recomendado { margin: -12px 0 24px; font-size: 12px; line-height: 20px; color: var(--muted); } #aire-maqueta .aire-chip-link { background: var(--ink); border-color: var(--ink); color: var(--paper); } #aire-maqueta .aire-chip-link:hover { background: #3A352D; } /* tarjeta hacia otra ficha (hotel ↔ restaurante): misma forma que la de la última nota en mobile, horizontal, con foto */ #aire-maqueta .aire-rel-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: -8px 0 24px; } #aire-maqueta .aire-rel-card { position: relative; display: flex; align-items: center; gap: 12px; width: 380px; max-width: 100%; padding: 8px; background: var(--ink); color: var(--paper); border-radius: var(--r-md); box-shadow: 0 18px 36px -22px rgba(30,27,22,.45); transition: transform .2s ease; text-decoration: none; } #aire-maqueta .aire-rel-card:hover { transform: translateY(-2px); } #aire-maqueta .aire-rel-media { flex: 0 0 72px; width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden; background: #3A352D; } #aire-maqueta .aire-rel-media img { width: 100%; height: 100%; object-fit: cover; display: block; } #aire-maqueta .aire-rel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 28px; } #aire-maqueta .aire-rel-title { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 16px; line-height: 24px; font-weight: 440; color: var(--paper); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #aire-maqueta .aire-rel-meta { font-size: 12px; line-height: 16px; color: rgba(250,248,244,.6); } /* Escritorio: la tarjeta va a la derecha del título y la bajada, en la misma columna que la de la última nota (mismo borde derecho y ancho), más compacta. En mobile y tablet, debajo de los chips. */ @media (min-width: 900px) and (max-width: 1023px) { #aire-maqueta .aire-title-block { position: relative; } #aire-maqueta .aire-title-block:has(.aire-rel-cards) { padding-right: 304px; } #aire-maqueta .aire-title-block .aire-rel-cards { position: absolute; top: 0; right: 32px; width: 248px; margin: 0; flex-direction: column; gap: 8px; } #aire-maqueta:has(.aire-chef-block) .aire-title-block .aire-rel-cards { top: -16px; } /* sigue 8 px debajo de la nota */ #aire-maqueta .aire-title-block .aire-rel-card { width: 100%; gap: 10px; padding: 8px; border-radius: var(--r-lg); } #aire-maqueta .aire-title-block .aire-rel-media { flex-basis: 56px; width: 56px; height: 56px; } #aire-maqueta .aire-title-block .aire-rel-title { font-size: 16px; line-height: 24px; } #aire-maqueta .aire-title-block .aire-rel-body { padding-right: 36px; } #aire-maqueta .aire-title-block .aire-rel-arrow { right: -14px; top: auto; bottom: 16px; transform: none; width: 44px; height: 44px; border-width: 4px; } } /* flecha: la misma que la tarjeta de la última nota (círculo claro con borde oscuro, saliendo del borde derecho); en mobile, centrada en alto como la nota en mobile */ #aire-maqueta .aire-rel-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: var(--r-full); background: var(--paper); color: var(--ink); border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; } /* Botones (MD3): 40px, padding 24 (16 del lado del ícono), Label Large 14/20 medium, ícono 16 a 8px. Negro = filled (principal); blanco con borde = outlined. */ #aire-maqueta .aire-cta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 56px; } #aire-maqueta .aire-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px 0 16px; border-radius: var(--r-full); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px; white-space: nowrap; transition: background .15s ease; } #aire-maqueta .aire-btn .aire-svg { flex: 0 0 auto; } #aire-maqueta .aire-btn--filled { background: var(--ink); color: var(--paper); } #aire-maqueta .aire-btn--filled:hover { background: #3A352D; } #aire-maqueta .aire-btn--outlined { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line-2); } #aire-maqueta .aire-btn--outlined:hover { background: #F5F2EC; } #aire-maqueta .aire-sticky-cta { display: none; } /* ---------- historia: sobre el fondo, a todo el ancho ---------- */ #aire-maqueta .aire-story { margin-bottom: 56px; } #aire-maqueta .aire-lead { margin-bottom: 40px; } #aire-maqueta .aire-lead p { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 20px; line-height: 28px; font-weight: 340; letter-spacing: -.003em; color: var(--ink); } #aire-maqueta .aire-body p { font-size: 16px; line-height: 24px; color: var(--ink-2); margin: 0 0 12px; } #aire-maqueta .aire-body p:last-child { margin-bottom: 0; } /* entre secciones de la historia (STAY tiene tres): 32px antes de cada título */ #aire-maqueta .aire-story .aire-body + .aire-label { margin-top: 32px; } /* ---------- Planifique su visita: ícono de la guía + texto al lado ---------- */ #aire-maqueta .aire-planifique { margin-bottom: 56px; padding-top: 32px; border-top: 1px solid var(--line); } #aire-maqueta .aire-services { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; } /* en tipo normal a 15px: las versalitas de 12px con tracking se leían mal (auditoría B5) */ #aire-maqueta .aire-service-cell { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-2); } /* 32px de caja: los dibujos de la guía ocupan ~2/3, se ven de ~22px (≈ 24dp MD3) */ #aire-maqueta .aire-service-cell svg { color: #2B2620; width: 32px; height: 32px; flex: 0 0 32px; } /* dato con rótulo (EXPERIENCES, WINE, MAKERS: la guía no tiene íconos para estos tipos) */ #aire-maqueta .aire-dato { align-items: flex-start; } #aire-maqueta .aire-dato-txt { display: flex; flex-direction: column; gap: 2px; } #aire-maqueta .aire-dato-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-text); } #aire-maqueta .aire-dato-valor { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); } #aire-maqueta .aire-verificado { margin: 28px 0 0; font-size: 12px; line-height: 20px; color: var(--muted); } /* ---------- galería ---------- */ /* Galería: filas de 3; la última fila se reparte sola (1 → a lo ancho, 2 → mitades), así no quedan huecos con cualquier cantidad de fotos. */ #aire-maqueta .aire-gallery { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; } #aire-maqueta .aire-gallery figure { flex: 1 1 calc(33.333% - 8px); min-width: calc(33.333% - 8px); margin: 0; height: 240px; border-radius: var(--r-md); overflow: hidden; background: #F0ECE3; } #aire-maqueta .aire-gallery a { display: block; width: 100%; height: 100%; cursor: zoom-in; } #aire-maqueta .aire-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } #aire-maqueta .aire-gallery a:hover img { transform: scale(1.03); } #aire-maqueta .aire-gallery a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ---------- ubicación y contacto ---------- */ #aire-maqueta .card { background: #FFFFFF; border-radius: var(--r-lg); border: 1px solid #F0ECE3; box-shadow: 0 12px 28px -20px rgba(30,27,22,.16); } #aire-maqueta .aire-ubicacion { margin-bottom: 56px; } #aire-maqueta .aire-ubicacion-card { display: grid; grid-template-columns: 3fr 2fr; overflow: hidden; } #aire-maqueta .aire-map-frame { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; } #aire-maqueta .aire-contacto { list-style: none; margin: 0; padding: 28px; display: flex; flex-direction: column; gap: 16px; justify-content: center; } #aire-maqueta .aire-contacto li { margin: 0; display: flex; flex-direction: column; gap: 4px; } #aire-maqueta .aire-contacto-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* área táctil de 44px sin cambiar el aspecto (auditoría M4) */ #aire-maqueta .aire-contacto a { color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; padding: 12px 0; margin: -12px 0; word-break: break-word; } #aire-maqueta .aire-contacto a:hover { text-decoration-color: var(--ink); } /* ---------- lo que publicamos (2 notas o más) ---------- */ #aire-maqueta .aire-notas { margin-bottom: 56px; padding-top: 32px; border-top: 1px solid var(--line); } #aire-maqueta .aire-notas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } #aire-maqueta .aire-nota-card { display: flex; flex-direction: column; gap: 8px; } #aire-maqueta .aire-nota-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #F0ECE3; } #aire-maqueta .aire-nota-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } #aire-maqueta .aire-nota-card:hover img { transform: scale(1.03); } #aire-maqueta .aire-nota-meta { font-size: 12px; line-height: 20px; color: var(--muted); margin-top: 4px; } #aire-maqueta .aire-nota-title { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 16px; line-height: 24px; font-weight: 440; color: var(--ink); } /* ---------- mobile (≤640px) ---------- */ @media (max-width: 640px) { #aire-maqueta.aire-content { padding: 8px 20px 0; } #aire-maqueta .aire-header { padding: 0 12px 0 20px; justify-content: space-between; } #aire-maqueta .aire-header .aire-logo-img, #aire-maqueta .aire-header .aire-logo-svg { height: 24px; } #aire-maqueta .aire-header .aire-logo { gap: 10px; } #aire-maqueta .aire-header .aire-logo-tb { height: 21px; } #aire-maqueta .aire-header .aire-logo-sep { height: 24px; } #aire-maqueta .aire-nav, #aire-maqueta .aire-search--header, #aire-maqueta .aire-search-toggle { display: none; } #aire-maqueta .aire-menu-toggle { display: inline-flex; width: 48px; height: 48px; } /* 16px: con menos, iOS hace zoom al tocar el campo */ #aire-maqueta .aire-search input { height: 48px; font-size: 16px; } #aire-maqueta .aire-footer-inner, #aire-maqueta .aire-footer-legal { padding-left: 20px; padding-right: 20px; } #aire-maqueta .aire-footer-inner { flex-direction: column; } #aire-maqueta .aire-hero-photo { height: 320px; } #aire-maqueta .aire-badges-top { inset: 16px 16px auto 16px; } #aire-maqueta .aire-chef-block { left: 12px; bottom: -36px; } /* con última nota, la tarjeta tapa el nombre del chef: queda el avatar sobre la foto y el nombre pasa a un chip debajo del título */ #aire-maqueta .aire-hero-wrap:has(.aire-note-float) .aire-chef-pill { display: none; } #aire-maqueta:has(.aire-note-float) .aire-chip.aire-chef-chip--alt { display: inline-flex; } #aire-maqueta .aire-avatar-float { width: 72px; height: 72px; } /* última nota en mobile: horizontal y compacta, sobre el borde de la foto */ /* nota centrada en el borde de la foto, a la misma altura que el avatar: 68 px de alto, bottom -34 */ #aire-maqueta .aire-note-float { right: 12px; bottom: -34px; width: 232px; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-md); } #aire-maqueta .aire-note-media { flex: 0 0 56px; width: 56px; height: 56px; aspect-ratio: auto; border-radius: var(--r-sm); } #aire-maqueta .aire-note-body { padding: 0 36px 0 0; } #aire-maqueta .aire-note-title { font-size: 14px; line-height: 20px; -webkit-line-clamp: 2; } #aire-maqueta .aire-note-meta { display: none; } #aire-maqueta .aire-note-arrow { right: -12px; bottom: auto; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-width: 3px; } #aire-maqueta .aire-title-block, #aire-maqueta:has(.aire-chef-block) .aire-title-block { margin-top: 52px; } #aire-maqueta .aire-h1 { font-size: 34px; line-height: 40px; } #aire-maqueta .aire-label { font-size: 24px; line-height: 32px; } #aire-maqueta .aire-bajada { font-size: 20px; line-height: 28px; } #aire-maqueta .aire-cta-row, #aire-maqueta .aire-story, #aire-maqueta .aire-planifique, #aire-maqueta .aire-gallery, #aire-maqueta .aire-ubicacion, #aire-maqueta .aire-notas { margin-bottom: 40px; } #aire-maqueta .aire-lead { margin-bottom: 32px; } #aire-maqueta .aire-lead p { font-size: 20px; line-height: 28px; } #aire-maqueta .aire-services { grid-template-columns: 1fr; gap: 12px; } #aire-maqueta .aire-gallery figure { flex-basis: calc(50% - 6px); min-width: calc(50% - 6px); height: 160px; } #aire-maqueta .aire-ubicacion-card { grid-template-columns: 1fr; } #aire-maqueta .aire-map-frame { min-height: 240px; } #aire-maqueta .aire-contacto { padding: 20px; } #aire-maqueta .aire-notas-grid { grid-template-columns: 1fr 1fr; gap: 16px; } #aire-maqueta .aire-nota-title { font-size: 16px; line-height: 24px; } /* Reservar y Llamar viven en la barra fija: en el contenido queda solo "Cómo llegar" (y si no hay dirección, la fila no se muestra). */ #aire-maqueta .aire-cta-row .aire-btn--filled, #aire-maqueta .aire-cta-row .aire-btn--llamar { display: none; } #aire-maqueta .aire-cta-row:not(:has(.aire-btn--llegar)) { display: none; } #aire-maqueta .aire-cta-row .aire-btn--llegar { flex: 1 1 auto; } /* Barra fija con las acciones principales (referencia Relais & Châteaux) */ #aire-maqueta .aire-sticky-cta { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid #F0ECE3; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); } #aire-maqueta .aire-sticky-cta .aire-btn { flex: 1 1 0; min-width: 0; padding: 0 16px; height: 48px; font-size: 14px; } #aire-maqueta .aire-footer { padding-bottom: 80px; } #aire-maqueta .aire-cta-row .aire-btn { height: 48px; } #aire-maqueta .aire-chip { height: 40px; } } /* ---------- listados: secciones (/stay/…) y Journal ---------- */ #aire-maqueta .aire-listado { padding: 40px 0 64px; } #aire-maqueta .aire-listado-head { max-width: 720px; margin: 0 0 24px; } #aire-maqueta .aire-listado-head .aire-h1 { margin-top: 0; } #aire-maqueta .aire-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; } #aire-maqueta .aire-filtro { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background .15s ease; } #aire-maqueta .aire-filtro span { color: var(--muted); font-weight: 400; } #aire-maqueta .aire-filtro:hover { background: #F5F2EC; } #aire-maqueta .aire-filtro.is-activo { background: var(--ink); border-color: var(--ink); color: var(--paper); } #aire-maqueta .aire-filtro.is-activo span { color: rgba(250,248,244,.7); } #aire-maqueta .aire-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; } #aire-maqueta .aire-card { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; } #aire-maqueta .aire-card-media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: #E9E3D8; margin-bottom: 12px; } #aire-maqueta .aire-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } #aire-maqueta .aire-card:hover .aire-card-media img { transform: scale(1.03); } #aire-maqueta .aire-card-badge { position: absolute; top: 12px; right: 12px; } #aire-maqueta .aire-card-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-text); } #aire-maqueta .aire-card-recomendado { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted); } /* nota sin foto (archivo 2010-2011): el logo sobre el fondo, no una caja vacía */ #aire-maqueta .aire-media-vacia { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #EFE9DE; } #aire-maqueta .aire-media-vacia svg { width: 34%; max-width: 120px; height: auto; color: #CDB894; } #aire-maqueta .aire-card-title { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 20px; line-height: 28px; font-weight: 440; color: var(--ink); } #aire-maqueta .aire-card-bajada { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-style: italic; font-weight: 340; font-size: 16px; line-height: 24px; color: #57524A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #aire-maqueta .aire-cards--notas .aire-card-title { font-size: 20px; line-height: 28px; } /* texto solo para lectores de pantalla y buscadores */ #aire-maqueta .aire-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #aire-maqueta .aire-listado--journal { padding-top: 24px; } /* Journal: la última nota, destacada */ #aire-maqueta .aire-destacada { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; align-items: center; margin: 0 0 56px; color: var(--ink); text-decoration: none; } #aire-maqueta .aire-destacada-media { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: #E9E3D8; } #aire-maqueta .aire-destacada-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } #aire-maqueta .aire-destacada:hover .aire-destacada-media img { transform: scale(1.02); } #aire-maqueta .aire-destacada-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } #aire-maqueta .aire-destacada-title { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 34px; line-height: 40px; font-weight: 440; letter-spacing: -.005em; } #aire-maqueta .aire-destacada-resumen { font-size: 16px; line-height: 24px; color: var(--ink-2); } #aire-maqueta .aire-destacada .aire-btn { margin-top: 8px; } #aire-maqueta .aire-paginacion { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; font-size: 14px; color: var(--muted); } @media (max-width: 900px) { #aire-maqueta .aire-cards { grid-template-columns: repeat(2, 1fr); } #aire-maqueta .aire-destacada { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; } #aire-maqueta .aire-destacada-title { font-size: 24px; line-height: 32px; } } @media (max-width: 640px) { #aire-maqueta .aire-listado { padding: 24px 0 48px; } #aire-maqueta .aire-cards { grid-template-columns: 1fr; gap: 32px; } #aire-maqueta .aire-filtros { margin-bottom: 24px; } #aire-maqueta .aire-filtro { height: 44px; padding: 0 16px; } /* muchas localidades: una fila que se desliza, sin ocupar media pantalla */ #aire-maqueta .aire-filtros--lugares { flex-wrap: nowrap; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; scrollbar-width: none; scroll-snap-type: x proximity; } #aire-maqueta .aire-filtros--lugares::-webkit-scrollbar { display: none; } #aire-maqueta .aire-filtros--lugares .aire-filtro { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; } } /* ---------- ficha: cuerpo en dos columnas (auditoría M2 y M3) ---------- */ #aire-maqueta .aire-nota-media, #aire-maqueta .aire-note-media { position: relative; } #aire-maqueta .aire-ficha-aside { display: none; } #aire-maqueta .aire-planifique .aire-services { grid-template-columns: repeat(2, 1fr); } @media (min-width: 1024px) { /* columna de lectura + columna derecha de 248px, alineada con la tarjeta de la última nota (mismo ancho y borde derecho: right 32px) */ #aire-maqueta .aire-ficha-cols { display: grid; grid-template-columns: minmax(0, 600px) 248px; justify-content: space-between; column-gap: 48px; padding-right: 32px; } #aire-maqueta .aire-ficha-main { min-width: 0; } #aire-maqueta .aire-ficha-aside { display: block; padding-top: 48px; } #aire-maqueta:has(.aire-chef-block) .aire-ficha-aside { padding-top: 64px; } #aire-maqueta:has(.aire-note-float) .aire-ficha-aside { padding-top: 72px; } /* la nota sobresale 40px de la foto */ #aire-maqueta .aire-aside-sticky { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 12px; } /* la tarjeta relacionada va en la columna, no al lado del título */ #aire-maqueta .aire-title-block .aire-rel-cards { display: none; } #aire-maqueta .aire-aside-rel { display: flex; flex-direction: column; gap: 8px; } #aire-maqueta .aire-aside-rel .aire-rel-card { width: 100%; gap: 10px; padding: 8px; border-radius: var(--r-lg); } #aire-maqueta .aire-aside-rel .aire-rel-media { flex-basis: 56px; width: 56px; height: 56px; } #aire-maqueta .aire-aside-rel .aire-rel-title { font-size: 16px; line-height: 24px; } #aire-maqueta .aire-aside-rel .aire-rel-body { padding-right: 36px; } #aire-maqueta .aire-aside-rel .aire-rel-arrow { right: -14px; top: auto; bottom: 16px; transform: none; width: 44px; height: 44px; border-width: 4px; } #aire-maqueta .aire-aside-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #F0ECE3; border-radius: var(--r-lg); box-shadow: 0 18px 36px -26px rgba(30,27,22,.35); } #aire-maqueta .aire-aside-title { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 20px; line-height: 28px; font-weight: 460; color: var(--ink); margin: -4px 0 4px; } #aire-maqueta .aire-btn--block { width: 100%; height: 44px; } #aire-maqueta .aire-aside-datos { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; } #aire-maqueta .aire-aside-datos li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); } #aire-maqueta .aire-aside-datos a { color: var(--ink); font-weight: 500; } #aire-maqueta .aire-aside-card .aire-verificado { margin: 2px 0 0; } /* en escritorio los botones viven en la columna derecha */ #aire-maqueta:has(.aire-aside-card) .aire-cta-row { display: none; } #aire-maqueta:has(.aire-aside-card) .aire-title-block .aire-meta-row { margin-bottom: 40px; } #aire-maqueta:has(.aire-aside-card) .aire-ficha-main .aire-planifique .aire-verificado { display: none; } } /* ---------- «También en…» ---------- */ #aire-maqueta .aire-cerca { margin-bottom: 56px; padding-top: 32px; border-top: 1px solid var(--line); } #aire-maqueta .aire-cards--cerca { grid-template-columns: repeat(4, 1fr); gap: 24px; } #aire-maqueta .aire-cards--cerca .aire-card-title { font-size: 20px; line-height: 28px; } @media (max-width: 900px) { #aire-maqueta .aire-cards--cerca { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { #aire-maqueta .aire-cerca { margin-bottom: 40px; } #aire-maqueta .aire-cards--cerca { grid-template-columns: 1fr 1fr; gap: 20px 12px; } #aire-maqueta .aire-cards--cerca .aire-card-title { font-size: 16px; line-height: 24px; } #aire-maqueta .aire-cards--cerca .aire-card-bajada { display: none; } } /* ---------- galería ampliada ---------- */ .aire-lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(20,18,15,.94); } .aire-lightbox::backdrop { background: rgba(20,18,15,.94); } .aire-lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 999px; border: 0; background: rgba(250,248,244,.12); color: #FAF8F4; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .aire-lightbox button:hover { background: rgba(250,248,244,.24); } .aire-lightbox .aire-lb-cerrar { top: 16px; right: 16px; } .aire-lightbox .aire-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); } .aire-lightbox .aire-lb-next { right: 16px; top: 50%; transform: translateY(-50%); } @media (max-width: 640px) { .aire-lightbox .aire-lb-prev, .aire-lightbox .aire-lb-next { top: auto; bottom: 24px; transform: none; } } /* ---------- NOTA (includes/nota.php) ---------- Lectura larga: cabecera y texto en la columna de lectura (600px, ~72-75 caracteres por línea); la foto principal y las grillas, más anchas. Títulos en Fraunces, texto en Inter 18/30. */ #aire-maqueta .aire-nota { padding: 32px 0 24px; } /* COLUMNA DE LECTURA: 600px en todo el sitio (nota, ficha, destino), ~72-75 caracteres a 16px en Fraunces y en Inter (Fernando, 29/9: la nota y la ficha tenían anchos distintos, 560 y 680) */ #aire-maqueta .aire-nota-head, #aire-maqueta .aire-nota-cuerpo, #aire-maqueta .aire-nota-fichas, #aire-maqueta .aire-nota-pie { max-width: 600px; margin-left: auto; margin-right: auto; } #aire-maqueta .aire-nota-volver { margin-bottom: 20px; } #aire-maqueta .aire-nota-volver a { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-text); } #aire-maqueta .aire-nota-volver a:hover { color: var(--ink); } #aire-maqueta .aire-nota-h1 { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 48px; line-height: 50px; font-weight: 440; letter-spacing: -.012em; color: var(--ink); margin: 0 0 20px; text-wrap: balance; } #aire-maqueta .aire-nota-bajada { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-style: italic; font-weight: 340; font-size: 20px; line-height: 28px; color: #57524A; margin: 0 0 24px; text-wrap: pretty; } #aire-maqueta .aire-nota-meta { font-size: 14px; line-height: 20px; color: var(--muted); margin: 0 0 32px; } #aire-maqueta .aire-nota-meta a { color: var(--ink-2); font-weight: 500; } #aire-maqueta .aire-nota-meta a:hover { color: var(--ink); } /* todas las fotos de la nota al mismo ancho: 900px, la principal también (Fernando, 29/9) */ #aire-maqueta .aire-nota-hero { margin: 0 auto 48px; max-width: 900px; } #aire-maqueta .aire-nota-hero img { width: 100%; height: auto; max-height: 680px; object-fit: cover; border-radius: var(--r-lg); display: block; background: #E9E3D8; } #aire-maqueta .aire-nota-hero figcaption, #aire-maqueta .aire-nota-cuerpo figcaption { margin-top: 10px; font-size: 12px; line-height: 20px; color: var(--muted); } /* Cuerpo de la NOTA en Fraunces (Fernando, 29/9: notas en Fraunces, fichas en Inter), a 16/24: Body 1 de la escala de Material (ver la cabecera). El eje de tamaño óptico ajusta solo la letra para texto. */ #aire-maqueta .aire-nota-cuerpo { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink); font-kerning: normal; text-rendering: optimizeLegibility; hanging-punctuation: first; } #aire-maqueta .aire-nota-cuerpo > p { margin: 0 0 1.1em; } #aire-maqueta .aire-nota-cuerpo strong, #aire-maqueta .aire-nota-cuerpo b { font-weight: 600; } /* capitular de tres líneas de 24px */ #aire-maqueta .aire-nota-cuerpo > p:first-child::first-letter { font-family: 'ivymode', 'Fraunces', Georgia, serif; float: left; font-size: 68px; line-height: 56px; font-weight: 400; padding: 4px 10px 0 0; color: var(--ink); } #aire-maqueta .aire-nota-cuerpo h2 { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 24px; line-height: 32px; font-weight: 460; letter-spacing: -.008em; color: var(--ink); margin: 56px 0 14px; } #aire-maqueta .aire-nota-cuerpo a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } #aire-maqueta .aire-nota-cuerpo a:hover { text-decoration-color: var(--ink); } #aire-maqueta .aire-nota-cuerpo strong, #aire-maqueta .aire-nota-cuerpo b { font-weight: 600; color: var(--ink); } #aire-maqueta .aire-nota-cuerpo ul, #aire-maqueta .aire-nota-cuerpo ol { margin: 0 0 24px; padding-left: 24px; } #aire-maqueta .aire-nota-cuerpo li { margin-bottom: 8px; } #aire-maqueta .aire-nota-cuerpo hr { border: 0; height: 1px; background: var(--line); margin: 40px 0; } #aire-maqueta .aire-nota-cuerpo img { max-width: 100%; height: auto; display: block; border-radius: var(--r-md); } /* fotos: salen de la columna de texto hasta 900px */ #aire-maqueta .aire-nota-foto, #aire-maqueta .aire-nota-fotos { margin: 40px 0; } @media (min-width: 1000px) { #aire-maqueta .aire-nota-foto, #aire-maqueta .aire-nota-fotos { width: 900px; margin-left: -150px; margin-right: -150px; } } #aire-maqueta .aire-nota-video { position: relative; aspect-ratio: 16 / 9; margin: 40px 0; border-radius: var(--r-md); overflow: hidden; background: #000; } #aire-maqueta .aire-nota-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } #aire-maqueta .aire-nota-audio { margin: 32px 0; } #aire-maqueta .aire-nota-audio iframe { width: 100%; border: 0; border-radius: var(--r-md); } /* los lugares de la nota: tarjeta completa con los botones */ #aire-maqueta .aire-nota-fichas { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); } #aire-maqueta .aire-nota-ficha { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; padding: 16px; margin-bottom: 16px; background: #FFFFFF; border: 1px solid #F0ECE3; border-radius: var(--r-lg); box-shadow: 0 12px 28px -22px rgba(30,27,22,.3); } #aire-maqueta .aire-nota-ficha-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #E9E3D8; } #aire-maqueta .aire-nota-ficha-media img { width: 100%; height: 100%; object-fit: cover; display: block; } #aire-maqueta .aire-nota-ficha-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } #aire-maqueta .aire-nota-ficha-title { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 24px; line-height: 32px; font-weight: 460; margin: 0; } #aire-maqueta .aire-nota-ficha-title a { color: var(--ink); } #aire-maqueta .aire-nota-ficha-bajada { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-style: italic; font-weight: 340; font-size: 16px; line-height: 24px; color: #57524A; } #aire-maqueta .aire-nota-ficha-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } /* compartir */ #aire-maqueta .aire-nota-pie { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); } #aire-maqueta .aire-compartir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } #aire-maqueta .aire-compartir-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 8px; } #aire-maqueta .aire-icon-btn--line { width: 44px; height: 44px; border: 1px solid var(--line-2); color: var(--ink); font-size: 16px; } #aire-maqueta .aire-icon-btn--line:hover { background: #F5F2EC; } #aire-maqueta .aire-copiar-ok { font-size: 12px; color: var(--muted); margin-left: 4px; } /* seguir leyendo */ #aire-maqueta .aire-nota-mas { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); } @media (max-width: 640px) { #aire-maqueta .aire-nota { padding-top: 20px; } #aire-maqueta .aire-nota-h1 { font-size: 34px; line-height: 40px; margin-bottom: 16px; } #aire-maqueta .aire-nota-cuerpo { font-size: 16px; line-height: 24px; } #aire-maqueta .aire-nota-cuerpo > p { margin-bottom: 1em; } #aire-maqueta .aire-nota-bajada { font-size: 20px; line-height: 28px; } #aire-maqueta .aire-nota-meta { margin-bottom: 24px; } #aire-maqueta .aire-nota-hero { margin: 0 -20px 32px; } #aire-maqueta .aire-nota-hero img { border-radius: 0; max-height: 520px; } #aire-maqueta .aire-nota-hero figcaption { padding: 0 20px; } #aire-maqueta .aire-nota-cuerpo h2 { font-size: 24px; line-height: 32px; margin-top: 44px; } #aire-maqueta .aire-nota-foto, #aire-maqueta .aire-nota-fotos { margin: 32px -20px; } #aire-maqueta .aire-nota-cuerpo .aire-nota-foto img, #aire-maqueta .aire-nota-cuerpo .aire-nota-fotos img { border-radius: 0; } #aire-maqueta .aire-nota-ficha { grid-template-columns: 1fr; padding: 12px; gap: 16px; } #aire-maqueta .aire-nota-ficha-btns { width: 100%; } #aire-maqueta .aire-nota-ficha-btns .aire-btn { flex: 1 1 0; height: 48px; } #aire-maqueta .aire-nota-mas { margin-top: 56px; } } /* ---------- búsqueda ---------- */ #aire-maqueta .aire-search--pagina { max-width: 560px; margin-top: 8px; } #aire-maqueta .aire-search--pagina input { height: 48px; font-size: 16px; } /* cada sección, un bloque separado por una línea: nombre + bajada a la izquierda, «Ver las N →» a la derecha */ #aire-maqueta .aire-listado--busqueda .aire-filtros { margin-top: 24px; } #aire-maqueta .aire-busqueda-bloque { padding: 32px 0 48px; border-top: 1px solid var(--line); } #aire-maqueta .aire-busqueda-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; } #aire-maqueta .aire-busqueda-head .aire-label { margin: 0; } #aire-maqueta .aire-busqueda-mas { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); padding: 12px 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; } #aire-maqueta .aire-busqueda-mas:hover { text-decoration-color: var(--ink); } #aire-maqueta .aire-busqueda-mas svg { width: 14px; height: 14px; } #aire-maqueta .aire-cuenta { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--muted); } #aire-maqueta .aire-busqueda-bajada { font-style: italic; font-weight: 340; color: #57524A; } #aire-maqueta .aire-busqueda-bajada::before { content: '· '; font-style: normal; } @media (max-width: 640px) { #aire-maqueta .aire-busqueda-bloque { padding: 24px 0 36px; } #aire-maqueta .aire-busqueda-head { flex-direction: column; gap: 0; margin-bottom: 16px; } #aire-maqueta .aire-busqueda-bajada { display: block; font-size: 16px; line-height: 24px; } #aire-maqueta .aire-busqueda-bajada::before { content: none; } #aire-maqueta .aire-busqueda-mas { padding: 12px 0 0; } } #aire-maqueta .aire-vacio { margin-top: 32px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 560px; } /* ---------- Journal: series ---------- */ #aire-maqueta .aire-filtros--series { margin: 0 0 16px; } #aire-maqueta .aire-filtros--series .aire-filtro { font-size: 14px; letter-spacing: .04em; } #aire-maqueta .aire-serie-bajada { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-style: italic; font-weight: 340; font-size: 20px; line-height: 28px; color: #57524A; margin: 0 0 24px; } #aire-maqueta .aire-listado--journal .aire-filtros--series + .aire-destacada { margin-top: 16px; } @media (min-width: 641px) { #aire-maqueta .aire-filtros--series { flex-wrap: wrap; } } /* ---------- newsletter ---------- */ #aire-maqueta .aire-newsletter { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; margin: 56px auto 0; max-width: 1024px; padding: 32px; background: #F1ECE2; border-radius: var(--r-lg); } #aire-maqueta .aire-nota .aire-newsletter { max-width: 600px; grid-template-columns: 1fr; gap: 16px; } #aire-maqueta .aire-newsletter-txt p { font-size: 14px; line-height: 20px; color: var(--ink-2); } #aire-maqueta .aire-newsletter .aire-label { margin-bottom: 8px; } #aire-maqueta .aire-nl-fila { display: flex; gap: 8px; } #aire-maqueta .aire-nl-fila input { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--line-2); border-radius: var(--r-full); background: #FFFFFF; padding: 0 20px; font: 400 16px/20px 'Inter', system-ui, sans-serif; color: var(--ink); } #aire-maqueta .aire-nl-fila input:focus { outline: 2px solid var(--ink); outline-offset: 1px; } #aire-maqueta .aire-nl-fila .aire-btn { height: 48px; padding: 0 24px; border: 0; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; } #aire-maqueta .aire-nl-ok { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--ink-2); cursor: pointer; } #aire-maqueta .aire-nl-ok input { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; accent-color: var(--ink); } #aire-maqueta .aire-nl-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } #aire-maqueta .aire-nl-msg { margin-top: 12px; font-size: 14px; line-height: 20px; font-weight: 500; } #aire-maqueta .aire-nl-msg--ok { color: #2F5D3A; } #aire-maqueta .aire-nl-msg--error, #aire-maqueta .aire-nl-msg--datos { color: #8A2E1F; } @media (max-width: 640px) { #aire-maqueta .aire-newsletter { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; } #aire-maqueta .aire-nl-fila { flex-direction: column; } } /* ---------- DESTINOS (includes/destinos.php) ---------- */ #aire-maqueta .aire-destino { padding: 24px 0 24px; } #aire-maqueta .aire-destino-head { margin-bottom: 32px; } #aire-maqueta .aire-destino-foto { margin: 0 0 32px; } #aire-maqueta .aire-destino-foto img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--r-lg); display: block; background: #E9E3D8; } #aire-maqueta .aire-destino-titulo { max-width: 720px; } #aire-maqueta .aire-destino-titulo .aire-h1 { font-size: 60px; line-height: 60px; letter-spacing: -.01em; } #aire-maqueta .aire-destino-intro { max-width: 600px; margin: 0 0 40px; } #aire-maqueta .aire-destino-intro p { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 20px; line-height: 28px; font-weight: 340; color: var(--ink); margin: 0 0 16px; } #aire-maqueta .aire-destino .aire-filtros { margin-bottom: 8px; } #aire-maqueta .aire-card-meta { font-size: 14px; line-height: 20px; color: var(--muted); } #aire-maqueta .aire-card--destino .aire-card-title { font-size: 24px; line-height: 32px; } #aire-maqueta .aire-busqueda-head .aire-label a { color: inherit; } #aire-maqueta .aire-cerca .aire-busqueda-head { margin-bottom: 20px; } #aire-maqueta .aire-cerca .aire-busqueda-head .aire-label { margin: 0; } html { scroll-behavior: smooth; } #aire-maqueta .aire-busqueda-bloque[id] { scroll-margin-top: 80px; } @media (max-width: 640px) { #aire-maqueta .aire-destino-foto { margin: 0 -20px 24px; } #aire-maqueta .aire-destino-foto img { height: 340px; border-radius: 0; } #aire-maqueta .aire-destino-titulo .aire-h1 { font-size: 34px; line-height: 40px; } #aire-maqueta .aire-destino-intro p { font-size: 20px; line-height: 28px; } } /* ---------- PORTADA (includes/portada.php) ---------- */ #aire-maqueta .aire-portada { padding: 24px 0 8px; } #aire-maqueta .aire-portada-lema { text-align: center; padding: 16px 0 32px; } #aire-maqueta .aire-portada-lema h1 { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-weight: 340; font-style: italic; font-size: 34px; line-height: 40px; letter-spacing: -.01em; color: var(--ink); margin: 0; } /* nota principal + «Lo último» */ #aire-maqueta .aire-portada-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; padding-bottom: 48px; } #aire-maqueta .aire-portada-lead { display: flex; flex-direction: column; gap: 10px; color: var(--ink); } #aire-maqueta .aire-portada-lead-media { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; background: #E9E3D8; margin-bottom: 8px; } #aire-maqueta .aire-portada-lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } #aire-maqueta .aire-portada-lead:hover .aire-portada-lead-media img { transform: scale(1.02); } #aire-maqueta .aire-portada-lead-title { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 34px; line-height: 40px; font-weight: 440; letter-spacing: -.012em; text-wrap: balance; } #aire-maqueta .aire-portada-lead-bajada { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-style: italic; font-weight: 340; font-size: 20px; line-height: 28px; color: #57524A; max-width: 640px; } #aire-maqueta .aire-portada-side { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--line); padding-left: 32px; } #aire-maqueta .aire-portada-side-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } #aire-maqueta .aire-portada-side-item { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); } #aire-maqueta .aire-portada-side-media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: #E9E3D8; } #aire-maqueta .aire-portada-side-media img { width: 100%; height: 100%; object-fit: cover; display: block; } #aire-maqueta .aire-portada-side-txt { display: flex; flex-direction: column; gap: 4px; } #aire-maqueta .aire-portada-side-title { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 16px; line-height: 24px; font-weight: 440; } #aire-maqueta .aire-portada-side-item:hover .aire-portada-side-title { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; } #aire-maqueta .aire-portada-side .aire-busqueda-mas { margin-top: 8px; align-self: flex-start; } #aire-maqueta .aire-cards--4, #aire-maqueta .aire-portada-destinos .aire-cards, #aire-maqueta .aire-portada-mix .aire-cards { grid-template-columns: repeat(4, 1fr); } /* travel book */ #aire-maqueta .aire-portada-tb { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; margin: 24px 0 0; padding: 48px; background: var(--ink); color: var(--paper); border-radius: var(--r-lg); } #aire-maqueta .aire-portada-tb .aire-eyebrow { color: #C9A27A; } #aire-maqueta .aire-portada-tb h2 { font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 34px; line-height: 40px; font-weight: 440; margin: 0 0 14px; color: var(--paper); } #aire-maqueta .aire-portada-tb p { font-size: 16px; line-height: 24px; color: rgba(250,248,244,.8); margin: 0 0 24px; max-width: 520px; } #aire-maqueta .aire-btn--light { background: var(--paper); color: var(--ink); height: 44px; padding: 0 22px; } #aire-maqueta .aire-btn--light:hover { background: #EFEAE1; } #aire-maqueta .aire-portada-tb-datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(250,248,244,.15); border-radius: var(--r-md); overflow: hidden; } #aire-maqueta .aire-portada-tb-datos li { background: var(--ink); padding: 18px 20px; font-size: 12px; line-height: 20px; color: rgba(250,248,244,.7); } #aire-maqueta .aire-portada-tb-datos strong { display: block; font-family: 'ivymode', 'Fraunces', Georgia, serif; font-size: 24px; line-height: 32px; font-weight: 440; color: var(--paper); } @media (max-width: 900px) { #aire-maqueta .aire-portada-top { grid-template-columns: 1fr; gap: 24px; } #aire-maqueta .aire-portada-side { border-left: 0; padding-left: 0; } #aire-maqueta .aire-portada-destinos .aire-cards, #aire-maqueta .aire-portada-mix .aire-cards { grid-template-columns: repeat(2, 1fr); } #aire-maqueta .aire-portada-tb { grid-template-columns: 1fr; padding: 32px; } } @media (max-width: 640px) { #aire-maqueta .aire-portada { padding-top: 8px; } #aire-maqueta .aire-portada-lema { padding: 12px 0 20px; } #aire-maqueta .aire-portada-lema h1 { font-size: 24px; line-height: 32px; } #aire-maqueta .aire-portada-lead-media { margin: 0 -20px 8px; border-radius: 0; aspect-ratio: 4 / 3; } #aire-maqueta .aire-portada-lead-title { font-size: 24px; line-height: 32px; } #aire-maqueta .aire-portada-lead-bajada { font-size: 16px; line-height: 24px; } #aire-maqueta .aire-portada-side-item { grid-template-columns: 80px 1fr; } #aire-maqueta .aire-portada-destinos .aire-cards, #aire-maqueta .aire-portada-mix .aire-cards { grid-template-columns: 1fr 1fr; gap: 20px 12px; } #aire-maqueta .aire-portada-destinos .aire-card-title, #aire-maqueta .aire-portada-mix .aire-card-title { font-size: 16px; line-height: 24px; } #aire-maqueta .aire-portada-mix .aire-card-bajada { display: none; } #aire-maqueta .aire-portada-tb { padding: 28px 20px; margin-left: -20px; margin-right: -20px; border-radius: 0; } #aire-maqueta .aire-portada-tb h2 { font-size: 24px; line-height: 32px; } } /* ---------- footer en columnas ---------- */ #aire-maqueta .aire-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } #aire-maqueta .aire-footer-col h2 { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 14px; } #aire-maqueta .aire-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } #aire-maqueta .aire-footer-col li a { display: inline-block; padding: 6px 0; font-size: 14px; line-height: 20px; color: var(--ink-2); } #aire-maqueta .aire-footer-col li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } #aire-maqueta .aire-footer-ig { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 0; font-size: 14px; font-weight: 500; color: var(--ink); } #aire-maqueta .aire-footer-journeys p { font-size: 14px; line-height: 20px; color: var(--ink-2); margin: 0 0 10px; } #aire-maqueta .aire-footer-journeys a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: #FFFFFF; font-size: 14px; font-weight: 500; color: var(--ink); } #aire-maqueta .aire-footer-journeys a:hover { background: #F5F2EC; } #aire-maqueta .aire-footer-journeys small { display: block; margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--muted); } @media (max-width: 900px) { #aire-maqueta .aire-footer-cols { grid-template-columns: 1fr 1fr; } #aire-maqueta .aire-footer-brand { grid-column: 1 / -1; } } @media (max-width: 640px) { #aire-maqueta .aire-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } #aire-maqueta .aire-footer-journeys { grid-column: 1 / -1; } } /* ---------- páginas institucionales, contacto, 404 ---------- */ #aire-maqueta .aire-pagina .aire-nota-head { margin-bottom: 8px; } #aire-maqueta .aire-pagina-cuerpo > p:first-child::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; font-family: inherit; } #aire-maqueta .aire-contacto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; } #aire-maqueta .aire-nota-cuerpo .aire-contacto-grid .card { padding: 24px; } #aire-maqueta .aire-contacto-grid .aire-label { font-size: 20px; line-height: 28px; margin: 0 0 10px; } #aire-maqueta .aire-contacto-grid p { font-size: 14px; line-height: 20px; margin: 0 0 12px; } #aire-maqueta .aire-contacto-grid .aire-contacto { padding: 0; } @media (min-width: 1000px) { #aire-maqueta .aire-pagina .aire-contacto-grid { width: 900px; margin-left: -150px; } } @media (max-width: 800px) { #aire-maqueta .aire-contacto-grid { grid-template-columns: 1fr; } } #aire-maqueta .aire-404 .aire-filtros { margin-top: 8px; } /* ---------- nota: firma y «Para visitar» ---------- */ #aire-maqueta .aire-nota-firma { margin: -20px 0 32px; font-size: 14px; line-height: 20px; color: var(--ink-2); } #aire-maqueta .aire-nota-visitar { max-width: 600px; margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--line); } #aire-maqueta .aire-nota-visitar .aire-contacto { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; } #aire-maqueta .aire-nota-visitar .aire-contacto li span:not(.aire-contacto-label) { font-size: 14px; line-height: 20px; color: var(--ink); } @media (max-width: 640px) { #aire-maqueta .aire-nota-visitar .aire-contacto { grid-template-columns: 1fr; padding: 20px; } #aire-maqueta .aire-nota-firma { margin-top: -12px; } } /* ---------- nota: fotos sin recorte (includes/nota.php, aire_core_dom_fotos) ---------- Filas con alto parejo: cada foto crece según su formato (flex-grow = ancho/alto, puesto en línea), así nada se corta. */ #aire-maqueta .aire-nota-fotos { display: flex; flex-direction: column; gap: 8px; } #aire-maqueta .aire-fila { display: flex; gap: 8px; align-items: flex-start; } #aire-maqueta .aire-foto { flex-basis: 0; min-width: 0; margin: 0; } #aire-maqueta .aire-foto img { width: 100%; height: auto; display: block; border-radius: var(--r-md); background: #E9E3D8; } #aire-maqueta .aire-foto figcaption, #aire-maqueta .aire-nota-hero figcaption { margin-top: 8px; font-size: 12px; line-height: 20px; color: var(--muted); } #aire-maqueta .aire-nota-foto .aire-foto { width: 100%; } #aire-maqueta .aire-nota-foto.is-vertical { max-width: 560px; margin-left: auto !important; margin-right: auto !important; width: auto !important; } #aire-maqueta .aire-nota-hero img[data-full], #aire-maqueta .aire-nota-cuerpo img[data-full] { cursor: zoom-in; } @media (max-width: 640px) { #aire-maqueta .aire-nota-fotos, #aire-maqueta .aire-fila { gap: 4px; } #aire-maqueta .aire-foto img { border-radius: 0; } #aire-maqueta .aire-foto figcaption { padding: 0 20px; } #aire-maqueta .aire-fila .aire-foto figcaption { display: none; } /* en filas, el epígrafe se lee en el visor */ #aire-maqueta .aire-nota-foto.is-vertical { max-width: none; margin-left: -20px !important; margin-right: -20px !important; } } /* ---------- nota: video (el reel) ---------- */ #aire-maqueta .aire-nota-reel { margin: 40px auto; max-width: 400px; } #aire-maqueta .aire-reel { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #111; aspect-ratio: 9 / 16; } #aire-maqueta .aire-nota-reel.is-horizontal { max-width: none; } #aire-maqueta .aire-nota-reel.is-horizontal .aire-reel { aspect-ratio: 16 / 9; } #aire-maqueta .aire-reel video { width: 100%; height: 100%; object-fit: cover; display: block; } #aire-maqueta .aire-reel-sonido { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(20,18,15,.6); color: #FAF8F4; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); } #aire-maqueta .aire-reel-sonido .aire-ico-sonido, #aire-maqueta .aire-reel-sonido[aria-pressed="true"] .aire-ico-mudo { display: none; } #aire-maqueta .aire-reel-sonido[aria-pressed="true"] .aire-ico-sonido { display: block; } @media (min-width: 1000px) { #aire-maqueta .aire-nota-reel.is-horizontal { width: 900px; margin-left: -150px; margin-right: -150px; } } @media (max-width: 640px) { #aire-maqueta .aire-nota-reel { max-width: none; margin: 32px -20px; } #aire-maqueta .aire-reel { border-radius: 0; max-height: 86vh; aspect-ratio: auto; height: min(86vh, calc((100vw) * 16 / 9)); } #aire-maqueta .aire-nota-reel.is-horizontal .aire-reel { height: auto; aspect-ratio: 16 / 9; } } /* ---------- nota: cita destacada ---------- */ #aire-maqueta .aire-nota-cuerpo blockquote { margin: 48px 0; padding: 28px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); text-align: center; font-family: 'ivymode', 'Fraunces', Georgia, serif; font-style: italic; font-weight: 340; font-size: 24px; line-height: 32px; color: var(--ink); text-wrap: balance; } #aire-maqueta .aire-nota-cuerpo blockquote p { margin: 0; } #aire-maqueta .aire-nota-cuerpo blockquote cite { display: block; margin-top: 12px; font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } @media (max-width: 640px) { #aire-maqueta .aire-nota-cuerpo blockquote { font-size: 20px; line-height: 28px; margin: 40px 0; } } /* ---------- visor de fotos ---------- */ .aire-lightbox figure { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 80px 24px; } .aire-lightbox img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 4px; } .aire-lightbox figcaption { display: flex; justify-content: space-between; gap: 24px; width: 100%; max-width: 900px; margin-top: 14px; font: 400 14px/20px 'Inter', system-ui, sans-serif; color: rgba(250,248,244,.85); } .aire-lightbox .aire-lb-num { flex: 0 0 auto; color: rgba(250,248,244,.6); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .aire-lightbox figure { padding: 56px 0 96px; } .aire-lightbox img { max-height: calc(100vh - 200px); border-radius: 0; } .aire-lightbox figcaption { padding: 0 20px; } } /* íconos SVG propios (aire_core_svg) */ #aire-maqueta .aire-svg { display: block; flex: 0 0 auto; } #aire-maqueta .aire-icon-btn--line .aire-svg { width: 18px; height: 18px; } #aire-maqueta .aire-icon-btn--line { display: inline-flex; align-items: center; justify-content: center; } /* ---------- nota: video al lado de una foto (aire_core_nota_cuerpo, 6b) ---------- */ #aire-maqueta .aire-fila .aire-nota-reel { margin: 0; max-width: none; } #aire-maqueta .aire-fila .aire-nota-reel .aire-reel { aspect-ratio: auto; height: 100%; border-radius: var(--r-md); } #aire-maqueta .aire-fila .aire-nota-reel video { height: 100%; } /* arriba, no estirado: si la foto tiene epígrafe, el video igual queda del alto de la foto */ #aire-maqueta .aire-nota-fotos--video .aire-fila { align-items: flex-start; } @media (max-width: 640px) { #aire-maqueta .aire-nota-fotos--video .aire-fila:first-child { flex-direction: column; } #aire-maqueta .aire-nota-fotos--video .aire-fila:first-child > .aire-foto { width: 100%; } #aire-maqueta .aire-fila .aire-nota-reel .aire-reel { border-radius: 0; height: min(86vh, calc(100vw * 16 / 9)); } } /* epígrafes: siempre derechos (el tema los ponía en itálica) */ #aire-maqueta .aire-nota figcaption { font-style: normal; } /* enlaces sueltos del texto viejo, en una línea: «Facebook · Instagram» */ #aire-maqueta .aire-nota-cuerpo .aire-nota-enlaces { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 20px; color: var(--muted); } /* ===================================================================== SISTEMA VISUAL v2 (29/9) — Fernando: «destacarnos, vanguardia, modernismo y sofisticación». Referencias: hotelería de lujo contemporánea (Aman, Rosewood, Six Senses) y revistas de diseño (Kinfolk, Cereal): la foto manda, la interfaz casi desaparece, movimiento lento y sutil. Forma: fotos, video y mapa con radio de 12px (Fernando, 29/9: prefiere las fotos redondeadas; se probó recto y 8); a sangre en mobile, rectas. La escala tipográfica (MD2) no cambia. Todo este bloque se puede sacar entero para volver a v1. ===================================================================== */ :root { --aire-ease: cubic-bezier(.2, .7, .2, 1); } /* 1. fotos, video y mapa: radio de 12px en todas las páginas (--r-md) */ #aire-maqueta .aire-hero-photo, #aire-maqueta .aire-card-media, #aire-maqueta .aire-destacada-media, #aire-maqueta .aire-nota-ficha-media, #aire-maqueta .aire-portada-lead-media, #aire-maqueta .aire-portada-side-media, #aire-maqueta .aire-gallery figure, #aire-maqueta .aire-nota-hero img, #aire-maqueta .aire-foto img, #aire-maqueta .aire-destino-foto img, #aire-maqueta .aire-nota-media, #aire-maqueta .aire-reel, #aire-maqueta .aire-fila .aire-nota-reel .aire-reel, #aire-maqueta .aire-map-frame { border-radius: 12px; } /* la tarjeta de ubicación recorta el mapa con su propio radio */ #aire-maqueta .aire-ubicacion-card .aire-map-frame { border-radius: 0; } /* a sangre en mobile (de borde a borde de la pantalla): rectas */ @media (max-width: 640px) { #aire-maqueta .aire-nota-hero img, #aire-maqueta .aire-foto img, #aire-maqueta .aire-reel, #aire-maqueta .aire-fila .aire-nota-reel .aire-reel, #aire-maqueta .aire-destino-foto img, #aire-maqueta .aire-portada-lead-media { border-radius: 0; } } /* 2. botones en tres niveles principal: tinta sólida; al pasar, bronce (el color de marca) secundario: borde fino de tinta; al pasar, se rellena enlace: texto con flecha que avanza (ver 3) */ #aire-maqueta .aire-btn { height: 48px; padding: 0 28px; gap: 10px; font-weight: 500; letter-spacing: .02em; transition: background-color .35s var(--aire-ease), color .35s var(--aire-ease), border-color .35s var(--aire-ease); } #aire-maqueta .aire-btn--filled { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); } #aire-maqueta .aire-btn--filled:hover { background: var(--bronze-text); border-color: var(--bronze-text); } #aire-maqueta .aire-btn--outlined { background: transparent; color: var(--ink); border: 1px solid var(--ink); } #aire-maqueta .aire-btn--outlined:hover { background: var(--ink); color: var(--paper); } #aire-maqueta .aire-btn:focus-visible, #aire-maqueta .aire-filtro:focus-visible, #aire-maqueta .aire-chip:focus-visible { outline: 2px solid var(--bronze-text); outline-offset: 3px; } #aire-maqueta .aire-btn--block { height: 48px; } #aire-maqueta .aire-sticky-cta .aire-btn--outlined { background: var(--paper); } #aire-maqueta .aire-btn--light { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); height: 48px; } #aire-maqueta .aire-btn--light:hover { background: transparent; color: var(--paper); } /* 3. enlaces «Ver las 19 →»: sin subrayado fijo; al pasar, aparece la línea y la flecha avanza */ #aire-maqueta .aire-busqueda-mas { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; letter-spacing: .02em; transition: text-decoration-color .35s var(--aire-ease); } #aire-maqueta .aire-busqueda-mas:hover { text-decoration-color: currentColor; } #aire-maqueta .aire-busqueda-mas svg { transition: transform .35s var(--aire-ease); } #aire-maqueta .aire-busqueda-mas:hover svg { transform: translateX(4px); } /* 4. chips y filtros: sin borde, en píldora, sobre crema */ #aire-maqueta .aire-chip, #aire-maqueta .aire-filtro { border: 0; background: #EFEAE1; border-radius: var(--r-full); height: 36px; padding: 0 16px; transition: background-color .3s var(--aire-ease), color .3s var(--aire-ease); } #aire-maqueta a.aire-chip--destino:hover, #aire-maqueta .aire-filtro:hover { background: #E4DCCD; border-color: transparent; } #aire-maqueta .aire-filtro.is-activo { background: var(--ink); color: var(--paper); } #aire-maqueta .aire-chip-link { background: var(--ink); color: var(--paper); } @media (max-width: 640px) { #aire-maqueta .aire-chip { height: 40px; } #aire-maqueta .aire-filtro { height: 44px; } } /* 5. tarjetas: foto vertical 4:5 en fichas y destinos (como la guía impresa), 3:2 en notas; la foto se acerca lento al pasar y el título se subraya */ #aire-maqueta .aire-card-media { aspect-ratio: 4 / 5; margin-bottom: 16px; } #aire-maqueta .aire-cards--notas .aire-card-media { aspect-ratio: 3 / 2; } #aire-maqueta .aire-card-media img, #aire-maqueta .aire-gallery img, #aire-maqueta .aire-destacada-media img, #aire-maqueta .aire-portada-lead-media img, #aire-maqueta .aire-nota-media img { transition: transform 1.2s var(--aire-ease); } #aire-maqueta .aire-card:hover .aire-card-media img, #aire-maqueta .aire-gallery a:hover img, #aire-maqueta .aire-destacada:hover .aire-destacada-media img, #aire-maqueta .aire-portada-lead:hover .aire-portada-lead-media img { transform: scale(1.04); } #aire-maqueta .aire-card-title { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .35s var(--aire-ease); } #aire-maqueta .aire-card:hover .aire-card-title { text-decoration-color: var(--brand); } /* 6. aparición al bajar: fundido y 24px hacia arriba (ficha.js marca solo lo que está fuera de pantalla al cargar; sin JS o con «reducir movimiento», todo se ve de entrada) */ .aire-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--aire-ease), transform .9s var(--aire-ease); } .aire-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .aire-reveal { opacity: 1; transform: none; transition: none; } } /* ===================================================================== SISTEMA VISUAL v2 · REFERENCIAS DE FERNANDO (29/9): tarjetas foto con velo del color de la foto y botón de vidrio, tarjetas de nota con la foto adentro, header en píldora flotante, sombras suaves en capas, carrusel horizontal en mobile y cabecera de nota centrada. ===================================================================== */ #aire-maqueta { --sombra-1: 0 1px 2px rgba(30,27,22,.05), 0 10px 28px -14px rgba(30,27,22,.22); --sombra-2: 0 2px 6px rgba(30,27,22,.06), 0 22px 44px -18px rgba(30,27,22,.34); --r-xl: 16px; } /* tarjetas: 16 (Fernando, 29/9: «reduciría el redondeo»; era 24) */ /* --- tarjeta foto (fichas y destinos) --- */ #aire-maqueta .aire-card--foto { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: rgb(var(--tinte, 30, 27, 22)); box-shadow: var(--sombra-1); color: #FFFFFF; transition: transform .5s var(--aire-ease), box-shadow .5s var(--aire-ease); } #aire-maqueta .aire-card--foto:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); } #aire-maqueta .aire-card--foto .aire-card-media { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; border-radius: 0; } #aire-maqueta .aire-card--foto .aire-card-media img { width: 100%; height: 100%; object-fit: cover; } /* velo: color de la foto, de sólido abajo a transparente, con desenfoque progresivo */ /* más denso detrás del texto (Fernando, 29/9: costaba leer): sólido hasta la mitad de la tarjeta, después se desvanece */ #aire-maqueta .aire-card-velo { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; z-index: 1; background: linear-gradient(to top, rgba(var(--tinte), .98) 0%, rgba(var(--tinte), .94) 45%, rgba(var(--tinte), .6) 72%, rgba(var(--tinte), 0) 100%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); -webkit-mask-image: linear-gradient(to top, #000 62%, transparent 100%); mask-image: linear-gradient(to top, #000 62%, transparent 100%); } #aire-maqueta .aire-card-info { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; display: flex; flex-direction: column; gap: 8px; text-shadow: 0 1px 14px rgba(0,0,0,.28); } #aire-maqueta .aire-card--foto .aire-card-eyebrow { color: rgba(255,255,255,.9); } #aire-maqueta .aire-card--foto .aire-card-title { color: #FFFFFF; text-decoration: none; } /* bajada de la tarjeta foto: Inter 14/20 (Body 2), derecha, hasta 3 líneas (Fernando, 29/9, referencia «Aqueduct»: cuerpo más chico e interlineado más cerrado) */ #aire-maqueta .aire-card--foto .aire-card-bajada { font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.9); -webkit-line-clamp: 3; } #aire-maqueta .aire-card--foto .aire-card-recomendado { color: rgba(255,255,255,.8); margin-top: 0; } /* botón de vidrio */ #aire-maqueta .aire-card-cta { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px 0 18px; text-shadow: none; border-radius: var(--r-full); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.34); color: #FFFFFF; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .02em; transition: background-color .35s var(--aire-ease), color .35s var(--aire-ease); } #aire-maqueta .aire-card--foto:hover .aire-card-cta { background: #FFFFFF; color: rgb(var(--tinte)); } #aire-maqueta .aire-card-cta svg { transition: transform .35s var(--aire-ease); } #aire-maqueta .aire-card--foto:hover .aire-card-cta svg { transform: translateX(3px); } /* --- tarjeta de nota: foto adentro, esquinas concéntricas (16 afuera, 10 adentro, 6 de margen) --- */ #aire-maqueta .aire-card--nota { background: #FFFFFF; border-radius: var(--r-xl); padding: 6px; box-shadow: var(--sombra-1); height: 100%; transition: transform .5s var(--aire-ease), box-shadow .5s var(--aire-ease); } #aire-maqueta .aire-card--nota:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); } #aire-maqueta .aire-card--nota .aire-card-media { aspect-ratio: 4 / 3; border-radius: 10px; margin: 0; } #aire-maqueta .aire-card-cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 12px 6px; } #aire-maqueta .aire-card--nota .aire-card-title { text-decoration: none; } #aire-maqueta .aire-card-pie { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; } #aire-maqueta .aire-card-lectura { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--muted); } #aire-maqueta .aire-card-flecha { width: 40px; height: 40px; border-radius: var(--r-full); background: #F1ECE2; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background-color .35s var(--aire-ease), color .35s var(--aire-ease); } #aire-maqueta .aire-card--nota:hover .aire-card-flecha { background: var(--ink); color: var(--paper); } #aire-maqueta .aire-cards { align-items: stretch; } /* --- header en píldora flotante --- */ .elementor-location-header { padding: 12px 24px 0; } #aire-maqueta .aire-header { max-width: 1120px; margin: 0 auto; border-radius: var(--r-full); padding: 0 12px 0 28px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--sombra-1); } #aire-maqueta .aire-header.is-scrolled { border-color: rgba(255,255,255,.6); box-shadow: var(--sombra-2); } #aire-maqueta .aire-drawer { top: calc(100% + 8px); border-radius: var(--r-xl); border: 0; box-shadow: var(--sombra-2); } @media (max-width: 640px) { .elementor-location-header { padding: 8px 12px 0; } #aire-maqueta .aire-header { padding: 0 6px 0 20px; } } /* --- carrusel horizontal en mobile (se asoma la tarjeta siguiente) --- */ @media (max-width: 640px) { #aire-maqueta .aire-busqueda-bloque .aire-cards, #aire-maqueta .aire-cerca .aire-cards, #aire-maqueta .aire-nota-mas .aire-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 20px; scrollbar-width: none; } #aire-maqueta .aire-busqueda-bloque .aire-cards::-webkit-scrollbar, #aire-maqueta .aire-cerca .aire-cards::-webkit-scrollbar, #aire-maqueta .aire-nota-mas .aire-cards::-webkit-scrollbar { display: none; } #aire-maqueta .aire-busqueda-bloque .aire-card, #aire-maqueta .aire-cerca .aire-card, #aire-maqueta .aire-nota-mas .aire-card { flex: 0 0 78%; scroll-snap-align: start; } #aire-maqueta .aire-cards--cerca .aire-card-bajada { display: -webkit-box; } } /* --- cabecera de la nota centrada (referencia «femme») --- */ #aire-maqueta .aire-nota-head { text-align: center; } #aire-maqueta .aire-nota-head .aire-nota-bajada { margin-left: auto; margin-right: auto; } #aire-maqueta .aire-nota-pie .aire-compartir { justify-content: center; } /* --- pie de tarjeta: tiempo de lectura + «Leer» (solo escritorio) --- */ #aire-maqueta .aire-card-pie { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } #aire-maqueta .aire-card-lectura { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; } #aire-maqueta .aire-card-leer { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: var(--r-full); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .02em; background: var(--ink); color: var(--paper); transition: background-color .35s var(--aire-ease), color .35s var(--aire-ease); } #aire-maqueta .aire-card--nota:hover .aire-card-leer { background: var(--bronze-text); } /* sobre la foto: tiempo en blanco y botón blanco con texto oscuro, como la referencia */ #aire-maqueta .aire-card--foto .aire-card-pie { padding-top: 14px; } #aire-maqueta .aire-card--foto .aire-card-lectura { color: rgba(255,255,255,.88); text-shadow: none; } #aire-maqueta .aire-card--foto .aire-card-leer { background: #FFFFFF; color: var(--ink); text-shadow: none; } #aire-maqueta .aire-card--foto:hover .aire-card-leer { background: var(--paper); } @media (max-width: 899px) { #aire-maqueta .aire-card-leer { display: none; } } /* --- escuchar la nota --- */ #aire-maqueta .aire-escuchar { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 6px; margin: -12px auto 32px; border: 1px solid var(--line-2); border-radius: var(--r-full); background: #FFFFFF; color: var(--ink); font: 500 14px/20px 'Inter', system-ui, sans-serif; letter-spacing: .02em; cursor: pointer; box-shadow: var(--sombra-1); transition: background-color .35s var(--aire-ease), color .35s var(--aire-ease), border-color .35s var(--aire-ease); } #aire-maqueta .aire-escuchar[hidden] { display: none; } #aire-maqueta .aire-escuchar-ico { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; } #aire-maqueta .aire-escuchar-min { color: var(--muted); font-weight: 400; } #aire-maqueta .aire-escuchar:hover, #aire-maqueta .aire-escuchar.is-activo { border-color: var(--ink); } #aire-maqueta .aire-escuchar.is-activo .aire-escuchar-ico { background: var(--bronze-text); } /* --- «Recomendados AIRE»: enlace a qué es, sin peso de insignia (A5, 29/9) --- */ #aire-maqueta .aire-recomendado a, #aire-maqueta .aire-verificado a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; } #aire-maqueta .aire-recomendado a:hover, #aire-maqueta .aire-verificado a:hover { color: var(--ink); text-decoration-color: currentColor; } /* --- Fase visual 2 (29/9): la nota con la foto a sangre --- */ /* Solo notas con foto de 1.600 px o más (aire_core_foto_sangre). La serie y el título van sobre la foto; el header pasa a fijo y transparente y vuelve a la píldora al bajar. Las fichas siguen con la foto en tarjeta. */ body:has(.aire-hero--sangre) { overflow-x: clip; } /* el contenedor de Elementor del header trae fondo crema: sobre la foto, sin fondo (la píldora tiene el suyo) */ body:has(.aire-hero--sangre) .elementor-location-header #aire-maqueta { background: transparent; } body:has(.aire-hero--sangre) .elementor-location-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; } /* --aire-vw: ancho visible sin la barra de scroll (lo fija ficha.js) */ #aire-maqueta .aire-nota:has(> .aire-hero--sangre) { padding-top: 0; } #aire-maqueta .aire-nota-hero.aire-hero--sangre { --aire-vw: calc(100vw - var(--aire-sb, 0px)); max-width: none; margin: -8px 0 48px; } #aire-maqueta .aire-hero--sangre .aire-hero-photo { position: relative; overflow: hidden; width: var(--aire-vw); margin-left: calc(50% - var(--aire-vw) / 2); height: min(86vh, 820px); min-height: 520px; background: rgb(var(--tinte)); } #aire-maqueta .aire-nota-hero.aire-hero--sangre img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; animation: aire-hero-in 1.2s var(--aire-ease) both; } /* velo del color de la foto abajo (para el título) y oscuro arriba (para el header) */ #aire-maqueta .aire-hero--sangre .aire-hero-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(var(--tinte), .9) 0%, rgba(var(--tinte), .5) 32%, rgba(var(--tinte), 0) 60%), linear-gradient(to bottom, rgba(20,18,15,.42) 0, rgba(20,18,15,0) 160px); } #aire-maqueta .aire-hero-texto { position: absolute; z-index: 2; left: 0; right: 0; bottom: 72px; padding: 0 48px; text-align: center; pointer-events: none; } #aire-maqueta .aire-hero-texto > * { max-width: 880px; margin-left: auto; margin-right: auto; } #aire-maqueta .aire-hero-texto a { pointer-events: auto; } #aire-maqueta .aire-hero-texto .aire-eyebrow, #aire-maqueta .aire-hero-texto .aire-eyebrow a { color: rgba(255,255,255,.9); margin-bottom: 16px; } /* H2 de Material Design 2 (60/60): el título manda sobre la foto */ #aire-maqueta .aire-hero-texto .aire-nota-h1 { color: #FFFFFF; font-size: 60px; line-height: 60px; margin: 0 auto; } #aire-maqueta .aire-nota-hero.aire-hero--sangre figcaption { max-width: 600px; margin: 10px auto 0; text-align: center; } @keyframes aire-hero-in { from { transform: scale(1.04); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { #aire-maqueta .aire-nota-hero.aire-hero--sangre img { animation: none; } } /* header transparente mientras está sobre la foto */ #aire-maqueta .aire-header { transition: background-color .35s var(--aire-ease), border-color .35s var(--aire-ease), box-shadow .35s var(--aire-ease); } #aire-maqueta .aire-header.is-sobre-foto { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #aire-maqueta .aire-header.is-sobre-foto .aire-logo-svg, #aire-maqueta .aire-header.is-sobre-foto .aire-logo-tb, #aire-maqueta .aire-header.is-sobre-foto .aire-icon-btn, #aire-maqueta .aire-header.is-sobre-foto .nav-link { color: #FFFFFF; } #aire-maqueta .aire-header.is-sobre-foto .aire-logo-sep { background: rgba(255,255,255,.5); } #aire-maqueta .aire-header.is-sobre-foto .nav-link:hover { background: rgba(255,255,255,.16); } #aire-maqueta .aire-header.is-sobre-foto .nav-link.is-active { background: #FFFFFF; color: var(--ink); } @media (max-width: 640px) { #aire-maqueta .aire-nota-hero.aire-hero--sangre { margin: -8px 0 32px; } #aire-maqueta .aire-hero--sangre .aire-hero-photo { height: 72svh; min-height: 440px; } #aire-maqueta .aire-hero-texto { bottom: 40px; padding: 0 20px; } /* H4 (34/40), como el título de la nota en mobile */ #aire-maqueta .aire-hero-texto .aire-nota-h1 { font-size: 34px; line-height: 40px; } #aire-maqueta .aire-nota-hero.aire-hero--sangre figcaption { padding: 0; } } /* --- Crédito de las fotos (Fernando, 30/9; includes/creditos.php) --- La «©» sobre la foto (Phosphor Light); al tocarla se despliega el fotógrafo o la fuente al lado. Arriba a la derecha de cada foto. */ #aire-maqueta .aire-foto, #aire-maqueta .aire-nota-hero { position: relative; } #aire-maqueta .aire-credito { position: absolute; z-index: 4; top: 14px; right: 14px; display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; max-width: calc(100% - 24px); } #aire-maqueta .aire-credito-btn { position: relative; flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: rgba(20,18,15,.22); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease; } #aire-maqueta .aire-credito-btn:hover, #aire-maqueta .aire-credito-btn[aria-expanded="true"] { background: rgba(20,18,15,.6); } /* el botón se ve chico (22 px, Fernando 1/10) pero se toca en 44 */ #aire-maqueta .aire-credito-btn::after { content: ''; position: absolute; inset: -11px; } #aire-maqueta .aire-credito-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } #aire-maqueta .aire-credito-txt { min-width: 0; padding: 6px 12px; border-radius: 999px; background: rgba(20,18,15,.72); color: #FFFFFF; font-family: inherit; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #aire-maqueta .aire-hero--sangre .aire-credito { top: 88px; } .aire-lightbox .aire-lb-credito { display: block; margin-top: 4px; color: rgba(255,255,255,.7); font-size: 12px; line-height: 16px; } /* Colores de cada sección (guía impresa 2026, Fernando 3/10). Hoy los usan los pines del mapa (Ajustes → Mapa de AIRE); quedan como tokens para el resto de la web. */ :root { --tipo-stay: #68A195; --tipo-eatdrink: #897332; --tipo-experience: #8C9998; --tipo-wine: #CD665A; --tipo-maker: #274262; }