/*
Theme Name: Astra Child
Theme URI: https://xadsites.com
Author: XAD
Author URI: https://xadsites.com
Description: ALENA — weddings, private and brand events in Ibiza and the Balearic Islands. Mediterranean quiet luxury: an editorial, luminous site in which the place opens every story. Spanish and English built in, with Italian and French ready to switch on; hreflang and a language switcher that keeps the visitor on the same page. Every section is an Elementor widget with real content controls and also renders natively without it. Palette, type and contact details set once in the ALENA panel. Built by XAD.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alena
Tags: one-column, two-columns, custom-colors, custom-logo, featured-images, full-width-template, translation-ready
*/

/* ════════════════════════════════════════════════════════════════════
   TOKENS

   The palette is printed into <head> by inc/palette.php after this file;
   the values here are the brief's, as a fallback for the instant before
   that runs — never a second source of truth.

   Grid (brief, p. 5): 1440 desktop, 12 columns, margins 96, gutter 24;
   tablet 8 columns, margins 48; phone 4 columns, margins 24. Spacing on an
   8 base: 8 · 16 · 24 · 40 · 64 · 104 · 136 between sections.
   ════════════════════════════════════════════════════════════════════ */

:root {
	--lino: #FAF7F1;
	--cal: #F3EEE6;
	--arena: #E4D9C8;
	--piedra: #BDB09C;
	--taupe: #8F8170;
	--oliva: #4B4F39;
	--terracota: #A9745A;
	--tinta: #2B241E;
	--body: #4A3F35;
	--caption: #6E6152;
	--line: #BDB09C;
	--line-soft: #DAD1C3;
	--taupe-text: #6E6253;
	--caption-on-cal: #6E6152;
	--caption-on-arena: #66594B;
	--body-on-arena: #4A3F35;
	--accent-text: #8C5F49;
	--on-oliva: #F3EEE6;
	--body-on-oliva: #E4D9C8;
	--caption-on-oliva: #CBC0AF;
	--line-on-oliva: #6E705F;
	--on-tinta: #F3EEE6;
	--body-on-tinta: #BDB09C;
	--line-on-tinta: #4C4540;
	--error: #8A5843;

	--serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
	--sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	--s1: 8px;
	--s2: 16px;
	--s3: 24px;
	--s4: 40px;
	--s5: 64px;
	--s6: 104px;
	--s7: 136px;

	--m: clamp(24px, 6.667vw, 96px);
	--g: 24px;
	--sec-y: clamp(72px, 9.45vw, 136px);
	--max: 1440px;

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--bar-h: 88px;
}

/* ════════════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--cal);
	color: var(--body);
	font-family: var(--sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400; /* the serif is never bold (brief, p. 2) */
	color: var(--tinta);
	letter-spacing: -0.005em;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }

::selection { background: var(--arena); color: var(--tinta); }

.screen-reader-text, .al-hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.al-skip {
	position: absolute;
	left: var(--m); top: -100px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--tinta);
	color: var(--cal);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.al-skip:focus { top: 12px; }

/* ── Layout ─────────────────────────────────────────────────────────── */

.al-wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--m);
}
.al-wrap--read { max-width: calc(760px + 2 * var(--m)); }

/* Section rhythm is PADDING, never margin: Elementor puts every section in
   its own flex container, and flex rows do not collapse margins (Astra §2). */
.al-sec { padding-block: var(--sec-y); }

/* An anchored section lands below the sticky bar, not under it. */
section[id] { scroll-margin-top: 64px; }

/* ── Type ───────────────────────────────────────────────────────────── */

.al-label {
	font-family: var(--sans);
	font-size: 11.5px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tinta);
	margin: 0;
}

.al-h1 { font-size: clamp(48px, 6.1vw, 88px); line-height: 1; }
.al-h2 { font-size: clamp(38px, 4.45vw, 64px); line-height: 1; }
.al-h3 { font-size: clamp(26px, 2.36vw, 34px); line-height: 1.1; }

.al-lead {
	font-family: var(--serif);
	font-size: clamp(26px, 3.06vw, 44px);
	line-height: 1.22;
	color: var(--tinta);
	letter-spacing: -0.005em;
	margin: 0;
}

/* ── The caption: lugar y hora, like a travel diary ─────────────────── */

.al-cap {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 16px 0 0;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--caption-on-cal);
}
.al-cap__rule { flex: none; width: 36px; height: 1px; background: currentColor; }
.al-cap--light { color: var(--lino); margin: 0; }
.al-cap--on-oliva { color: var(--caption-on-oliva); }

/* ── Buttons and the editorial link ─────────────────────────────────── */

.al-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 13px 24px;
	border: 1px solid var(--tinta);
	border-radius: 0;
	background: transparent;
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 11.5px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
/* Secondary: a 1px rule; on hover, ink ground and lime text, 300 ms. */
.al-btn--line:hover, .al-btn--line[aria-current] { background: var(--tinta); color: var(--cal); }

/* Primary: only in the form and on contact. No radius, no shadow. */
.al-btn--solid {
	min-height: 56px;
	padding: 20px 44px;
	background: var(--tinta);
	color: var(--cal);
}
.al-btn--solid:hover { background: var(--oliva); border-color: var(--oliva); color: var(--cal); }
.al-btn--solid[disabled] { opacity: .6; cursor: progress; }

/* "Hover: the underline gathers itself up and is drawn again from left to
   right." */
.al-link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	min-height: 32px;
	font-family: var(--sans);
	font-size: 11.5px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tinta);
}
.al-link > span:last-child {
	padding-bottom: 5px;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
}
.al-link:hover > span:last-child,
.al-link:focus-visible > span:last-child { animation: al-redraw .7s var(--ease) both; }
.al-link__rule { width: 48px; height: 1px; background: currentColor; flex: none; }

@keyframes al-redraw {
	0%    { background-size: 100% 1px; background-position: 100% 100%; }
	45%   { background-size: 0 1px;    background-position: 100% 100%; }
	45.1% { background-size: 0 1px;    background-position: 0 100%; }
	100%  { background-size: 100% 1px; background-position: 0 100%; }
}

/* ── Photographs ────────────────────────────────────────────────────── */

.al-frame { position: relative; display: block; overflow: hidden; background: var(--arena); }
.al-frame img { width: 100%; height: 100%; object-fit: cover; }
.al-frame--4x5   { aspect-ratio: 4 / 5; }
.al-frame--3x4   { aspect-ratio: 3 / 4; }
.al-frame--3x5   { aspect-ratio: 3 / 5; }
.al-frame--3x2   { aspect-ratio: 3 / 2; }
.al-frame--21x10 { aspect-ratio: 21 / 10; }
.al-frame--8x7   { aspect-ratio: 8 / 7; }
.al-frame--auto img { height: auto; }

/* Images on entry: a vertical mask, 900 ms, and a slight zoom from 1.06 to 1.
   Text never moves. Hidden only when a script is there to show it again. */
.al-js [data-al-reveal] { clip-path: inset(0 0 100% 0); }
.al-js [data-al-reveal] img { transform: scale(1.06); }
.al-js [data-al-reveal].is-in { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease); }
.al-js [data-al-reveal].is-in img { transform: scale(1); transition: transform 1.6s var(--ease); }

/* ════════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════════ */

.al-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cal);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease);
}
.al-header.is-compact { border-bottom-color: var(--line-soft); }

.al-header__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--g);
	min-height: var(--bar-h);
	transition: min-height .35s var(--ease);
}
.al-header.is-compact .al-header__bar { min-height: 64px; }

.al-nav ul { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.al-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tinta);
	white-space: nowrap;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 8px) / 0 1px;
	transition: background-size .45s var(--ease);
}
.al-nav a:hover, .al-nav a[aria-current] { background-size: 100% 1px; }

.al-header__mark { justify-self: center; }
.al-header__right { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2.4vw, 36px); }

/* The logotype — the uploaded logo, or the word in Bodoni. */
.al-wordmark { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); }   /* the word is 24px; the tap target is not */
.al-wordmark span { font-family: var(--serif); font-weight: 400; letter-spacing: .07em; margin-right: -.07em; line-height: 1; }
.al-wordmark img { width: auto; }
.al-wordmark--bar span { font-size: 27px; }
.al-wordmark--bar img { height: 28px; }

/* On the home page the masthead IS the logotype; the small one arrives with
   the compact bar. */
.al-home .al-header:not(.is-compact) .al-header__mark { opacity: 0; visibility: hidden; }
.al-header__mark { transition: opacity .4s var(--ease), visibility .4s; }

.al-burger, .al-drawer__close {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--tinta);
	cursor: pointer;
	place-items: center;
}

/* ── The language switch: ES / EN, the current one underlined ───────── */

.al-lang ul { display: flex; align-items: center; }
.al-lang li { display: flex; align-items: center; }
.al-lang li + li::before { content: "/"; margin: 0 6px; color: var(--caption-on-cal); font-size: 11px; }
.al-lang a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px; min-height: 40px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .14em;
	color: var(--caption-on-cal);
}
.al-lang a[aria-current] { color: var(--tinta); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.al-lang a:hover { color: var(--tinta); }

/* ── The drawer (phones and small tablets) ──────────────────────────── */

.al-scrim {
	position: fixed; inset: 0; z-index: 90;
	background: rgba(43, 36, 30, .38);
	opacity: 0;
	transition: opacity .35s var(--ease);
}
.al-scrim.is-open { opacity: 1; }

.al-drawer {
	position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
	width: min(400px, 88vw);
	display: flex; flex-direction: column;
	padding: 18px var(--m) 32px;
	background: var(--cal);
	transform: translateX(-102%);
	transition: transform .45s var(--ease), visibility .45s;
	visibility: hidden;
	overflow-y: auto;
}
.al-drawer.is-open { transform: none; visibility: visible; }
.al-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.al-drawer__close { display: grid; margin-right: -10px; }
.al-wordmark--drawer span { font-size: 30px; }
.al-drawer__nav { margin-top: var(--s5); }
.al-drawer__nav li { border-top: 1px solid var(--line-soft); }
.al-drawer__nav li:last-child { border-bottom: 1px solid var(--line-soft); }
.al-drawer__nav a { display: flex; align-items: center; min-height: 60px; font-family: var(--serif); font-size: 28px; color: var(--tinta); }
.al-drawer__nav a[aria-current] { font-style: italic; }
.al-drawer__foot { margin-top: auto; padding-top: var(--s4); display: grid; gap: 4px; }
.al-drawer__detail { display: flex; align-items: center; min-height: 40px; color: var(--body); }

/* ════════════════════════════════════════════════════════════════════
   01 · MASTHEAD
   ════════════════════════════════════════════════════════════════════ */

.al-masthead { overflow-x: clip; }

.al-masthead__word {
	margin: clamp(4px, 1vw, 16px) 0 0;
	text-align: center;
	font-size: clamp(64px, 20.3vw, 292px);
	line-height: .86;
	letter-spacing: .07em;
	margin-right: -.07em;
	color: var(--tinta);
	white-space: nowrap;
}
.al-masthead__word span { display: inline-block; letter-spacing: inherit; }

/* Opening: the letters close from +20 % to +7 % in 1.4 s. Once. */
.al-js .al-masthead__word span { animation: al-track 1.4s var(--ease) both; }
@keyframes al-track {
	from { letter-spacing: .2em; opacity: .001; }
	30%  { opacity: 1; }
	to   { letter-spacing: .07em; opacity: 1; }
}

.al-masthead__line {
	display: grid;
	grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
	align-items: center;
	gap: var(--g);
	margin-top: clamp(18px, 2.5vw, 36px);
}
.al-masthead__rule { height: 1px; background: var(--line); }
.al-masthead__tag {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(18px, 1.53vw, 22px);
	line-height: 1.3;
	color: var(--tinta);
	white-space: nowrap;
}

.al-masthead__pano {
	position: relative;
	margin-top: clamp(28px, 3.2vw, 46px);
	aspect-ratio: 1440 / 563;
	overflow: hidden;
	background: var(--arena);
}
.al-masthead__pano img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }

/* …and the panorama is revealed from the bottom up. */
.al-js .al-masthead__pano img { animation: al-rise 1.3s .25s var(--ease) both; }
@keyframes al-rise {
	from { clip-path: inset(100% 0 0 0); transform: scale(1.06); }
	to   { clip-path: inset(0 0 0 0);    transform: scale(1); }
}

.al-masthead__over {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--g);
	padding: 72px var(--m) clamp(18px, 2vw, 30px);
	background: linear-gradient(to top, rgba(28, 23, 18, .58), rgba(28, 23, 18, 0));
}
.al-masthead__scroll {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lino);
}
.al-masthead__scroll svg { transition: transform .45s var(--ease); }
.al-masthead__scroll:hover svg { transform: translateY(4px); }

/* ════════════════════════════════════════════════════════════════════
   SECTION HEADS
   ════════════════════════════════════════════════════════════════════ */

.al-sechead {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--g);
	align-items: end;
	margin-bottom: var(--s5);
}
.al-sechead > :first-child { grid-column: 1 / 9; }
.al-sechead__aside { grid-column: 9 / 13; margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--body); }
.al-sechead--rule { border-top: 1px solid var(--line); padding-top: var(--s5); }
.al-sechead--three > :first-child { grid-column: 1 / 7; }
.al-sechead--three .al-sechead__aside { grid-column: 7 / 10; }
.al-sechead__link { grid-column: 10 / 13; justify-self: end; }

/* ════════════════════════════════════════════════════════════════════
   PAGE OPENING (inner pages)
   ════════════════════════════════════════════════════════════════════ */

.al-phero { padding-top: clamp(40px, 6vw, 88px); }
/* The title anchored to the top of the photograph, the introduction to its
   foot: the column spans the picture instead of floating beside it. */
.al-phero__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--g);
	align-items: stretch;
}
.al-phero__copy { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s5); padding-bottom: 34px; }
.al-phero__media { grid-column: 8 / 13; }
.al-phero--solo .al-phero__copy { grid-column: 1 / 11; }
.al-phero__title { font-size: clamp(56px, 8.2vw, 118px); line-height: .95; }
.al-phero__sub {
	margin: var(--s3) 0 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.25;
	color: var(--tinta);
}
.al-phero__lead { margin: var(--s4) 0 0; max-width: 46ch; font-size: 16px; color: var(--body); }

/* ════════════════════════════════════════════════════════════════════
   02 · STATEMENT
   ════════════════════════════════════════════════════════════════════ */

.al-intro__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--g);
	align-items: start;
}
.al-intro__copy { grid-column: 1 / 8; }
.al-intro__media { grid-column: 9 / 13; }
.al-intro--flip .al-intro__copy { grid-column: 6 / 13; grid-row: 1; }
.al-intro--flip .al-intro__media { grid-column: 1 / 5; grid-row: 1; }
.al-intro--solo .al-intro__copy { grid-column: 1 / 11; }
.al-intro__text { margin: var(--s4) 0 0; max-width: 52ch; font-size: 16px; }
.al-intro__link { margin-top: var(--s4); }

/* ════════════════════════════════════════════════════════════════════
   03 · THREE WAYS TO CELEBRATE
   ════════════════════════════════════════════════════════════════════ */

.al-universes { padding-top: 0; }
.al-universes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.al-universes__grid.al-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-universes__grid.al-cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

/* Equal length everywhere: the cards share a height and the links share a
   baseline, whatever their text (Astra Rule 6). */
.al-universe { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.al-universe__body { display: flex; flex-direction: column; flex: 1; padding-top: var(--s3); }
.al-universe__title { font-size: clamp(32px, 2.78vw, 40px); }
.al-universe__sub { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.35; color: var(--body); }
.al-universe__text { margin: var(--s2) 0 0; font-size: 14.5px; line-height: 1.75; }
.al-universe__link { margin-top: auto; padding-top: var(--s3); align-self: flex-start; }

/* ════════════════════════════════════════════════════════════════════
   04 · THE ALENA EXPERIENCE — the one block of strong colour
   ════════════════════════════════════════════════════════════════════ */

.al-experience { background: var(--oliva); color: var(--body-on-oliva); }
.al-experience__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--g);
	align-items: start;
}
.al-experience__media { grid-column: 1 / 6; }
.al-experience__copy { grid-column: 7 / 13; padding-top: var(--s1); }
.al-experience__grid--solo .al-experience__copy { grid-column: 1 / 13; }
.al-experience__title { color: var(--on-oliva); }
.al-experience__sub { margin: var(--s3) 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; color: var(--body-on-oliva); }
.al-experience .al-link, .al-experience :focus-visible { color: var(--on-oliva); outline-color: var(--on-oliva); }

.al-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--g); margin-top: var(--s5); }
.al-step { border-top: 1px solid var(--line-on-oliva); padding-top: var(--s4); min-width: 0; }
.al-step__n { display: block; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1; color: var(--caption-on-oliva); }
.al-step__title { margin-top: var(--s3); color: var(--on-oliva); }
.al-step__text { margin: 14px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--body-on-oliva); }

/* ════════════════════════════════════════════════════════════════════
   05 · DESTINATIONS
   ════════════════════════════════════════════════════════════════════ */

.al-dest__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-areas: "copy copy copy copy copy copy copy . media media media media";
	column-gap: var(--g);
	align-items: start;
}
.al-dest__copy { grid-area: copy; }
.al-dest__media { grid-area: media; margin-top: clamp(64px, 8vw, 116px); }
.al-dest__eyebrow { margin-bottom: var(--s3); }
.al-dest__lead { max-width: 44ch; margin: 0 0 var(--s4); font-size: 14.5px; line-height: 1.75; }
.al-dest__list { border-top: 1px solid var(--tinta); }
.al-dest__list li { border-bottom: 1px solid var(--line); }
.al-dest__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--g);
	width: 100%;
	padding: 6px 0 2px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}
.al-dest__name {
	font-family: var(--serif);
	font-size: clamp(48px, 5.6vw, 80px);
	line-height: 1.12;
	color: var(--taupe-text);
	transition: color .5s var(--ease);
}
.al-dest__item:hover .al-dest__name,
.al-dest__item:focus-visible .al-dest__name,
.al-dest__item.is-active .al-dest__name { color: var(--tinta); }
.al-dest__coords { flex: none; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; color: var(--caption-on-cal); padding-bottom: 14px; }
.al-dest__outro { margin: var(--s3) 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--tinta); }

.al-dest__frame { display: grid; }
.al-dest__img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.al-dest__img.is-active { opacity: 1; }
.al-dest__cap { display: none; }
.al-dest__cap.is-active { display: flex; }

/* ════════════════════════════════════════════════════════════════════
   06 · STORIES — an asymmetric editorial gallery
   ════════════════════════════════════════════════════════════════════ */

.al-stories__group + .al-stories__group { margin-top: var(--s6); }
.al-stories__a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.al-stories__a > .al-story--tall { grid-column: 1 / 6; }
.al-stories__stack { grid-column: 6 / 13; display: grid; gap: var(--s4); }
.al-stories__a > .al-stories__stack:only-child { grid-column: 1 / 13; }
.al-stories__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.al-stories__b { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); margin-top: var(--s5); align-items: start; }
.al-story--offset { grid-column: 2 / 7; }
.al-story--drop { grid-column: 8 / 13; margin-top: clamp(40px, 6.5vw, 96px); }

.al-story { display: block; min-width: 0; color: var(--tinta); }
.al-story__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-top: 14px; }
.al-story__title { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.al-story__meta { margin-left: auto; text-align: right; font-size: 10.5px; color: var(--caption-on-cal); }
a.al-story .al-story__title { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .45s var(--ease); }
a.al-story:hover .al-story__title { background-size: 100% 1px; }

/* ════════════════════════════════════════════════════════════════════
   07 · QUOTE
   ════════════════════════════════════════════════════════════════════ */

.al-quote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: clamp(420px, 44vw, 640px); }
.al-quote--solo { grid-template-columns: minmax(0, 1fr); }
.al-quote__media { position: relative; overflow: hidden; background: var(--arena); }
.al-quote__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.al-quote__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s4);
	padding: var(--s6) var(--m);
	background: var(--arena);
	text-align: center;
}
.al-quote__text p {
	margin: 0;
	max-width: 15ch;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(30px, 3.34vw, 48px);
	line-height: 1.18;
	color: var(--tinta);
}
.al-quote__sig { display: grid; justify-items: center; gap: 18px; }
.al-quote__rule { width: 40px; height: 1px; background: var(--tinta); }

/* ════════════════════════════════════════════════════════════════════
   08 · NOSOTRAS
   ════════════════════════════════════════════════════════════════════ */

.al-team__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.al-team__copy { grid-column: 1 / 6; }
.al-team__people { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.al-team__grid--solo .al-team__copy { grid-column: 1 / 9; }
.al-team__lead { margin: var(--s4) 0 0; font-family: var(--serif); font-size: clamp(22px, 1.8vw, 26px); line-height: 1.38; color: var(--tinta); }
.al-team__text { margin: var(--s3) 0 var(--s4); max-width: 46ch; font-size: 14.5px; line-height: 1.8; }
.al-person:nth-child(even) { margin-top: 70px; }
.al-person__empty { display: grid; place-items: center; padding: var(--s3); text-align: center; }
.al-person__empty .al-label { color: var(--caption-on-arena); font-size: 10.5px; line-height: 1.9; }
.al-person__name { margin: 18px 0 0; font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--tinta); }
.al-person__role { margin-top: 6px; font-size: 10.5px; color: var(--caption-on-cal); }

/* ════════════════════════════════════════════════════════════════════
   SERVICES · MOMENTS · VALUES — typographic lists
   ════════════════════════════════════════════════════════════════════ */

.al-services { padding-top: 0; }
.al-services__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); }
.al-services__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-service { display: flex; flex-direction: column; gap: 8px; padding: 22px 0 26px; border-top: 1px solid var(--line); min-width: 0; }
.al-service__name { font-family: var(--serif); font-size: clamp(22px, 1.95vw, 28px); line-height: 1.2; color: var(--tinta); }
.al-service__text { font-size: 14px; line-height: 1.7; }

.al-moments__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--g); counter-reset: none; }
.al-moment { display: flex; flex-direction: column; gap: 18px; padding-top: var(--s3); border-top: 1px solid var(--line); min-width: 0; }
.al-moment .al-step__n { color: var(--caption-on-cal); }
.al-moment__name { font-family: var(--serif); font-size: clamp(24px, 2.08vw, 30px); line-height: 1.15; color: var(--tinta); }
.al-moment__text { font-size: 14px; line-height: 1.7; }

.al-values { background: var(--lino); }
.al-values__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.al-values__head { grid-column: 1 / 5; }
.al-values__head .al-sechead__aside { margin-top: var(--s3); }
.al-values__list { grid-column: 6 / 13; border-top: 1px solid var(--line); }
.al-values__list li { padding: 16px 0 14px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2; color: var(--tinta); }

/* ════════════════════════════════════════════════════════════════════
   09 · CONTACT AND THE FORM
   ════════════════════════════════════════════════════════════════════ */

.al-contact { background: var(--arena); }
.al-contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.al-contact__copy { grid-column: 1 / 6; padding-top: var(--s3); }
.al-contact__panel { grid-column: 7 / 13; background: var(--lino); padding: clamp(28px, 3.9vw, 56px); }
.al-contact__title { font-size: clamp(48px, 5.6vw, 80px); line-height: 1; }
.al-contact__lead { margin: var(--s3) 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; color: var(--tinta); }
.al-contact__details { display: grid; gap: var(--s3); margin: var(--s5) 0 0; }
.al-contact__details dt { color: var(--caption-on-arena); font-size: 10.5px; }
.al-contact__details dd { margin: 6px 0 0; }
.al-contact__details a { display: inline-flex; align-items: center; min-height: 32px; font-size: 17px; color: var(--tinta); }

.al-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--g); }
.al-field { grid-column: 1 / -1; min-width: 0; }
.al-field--half { grid-column: auto; }
.al-label + input, .al-label + textarea { margin-top: 6px; }
.al-field .al-label { display: block; font-size: 11px; }
.al-opt { color: var(--caption-on-cal); font-weight: 400; letter-spacing: .08em; text-transform: lowercase; }

/* "Only the bottom line. Focus: a 2px ink line." — text fields only: the
   consent box and the choice radios keep their own shape. */
.al-field input:not([type=checkbox]):not([type=radio]), .al-field textarea {
	display: block;
	width: 100%;
	padding: 10px 0 9px;
	border: 0;
	border-bottom: 1px solid var(--taupe);
	border-radius: 0;
	background: transparent;
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}
.al-field textarea { resize: vertical; min-height: 104px; }
.al-field input::placeholder, .al-field textarea::placeholder { color: var(--caption-on-cal); opacity: 1; }
.al-field input:not([type=checkbox]):not([type=radio]):focus, .al-field textarea:focus { outline: none; border-bottom-color: var(--tinta); box-shadow: 0 1px 0 var(--tinta); }
.al-field.is-bad input:not([type=checkbox]):not([type=radio]), .al-field.is-bad textarea { border-bottom-color: var(--error); }
.al-field__err { margin: 6px 0 0; min-height: 0; font-size: 12.5px; color: var(--error); }
.al-field__err:empty { display: none; }

.al-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.al-choice legend { padding: 0; margin-bottom: 14px; }
.al-choice__row { display: flex; flex-wrap: wrap; gap: 10px; }
.al-choice__opt { position: relative; cursor: pointer; }
.al-choice__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.al-choice__opt span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 12px 20px;
	border: 1px solid var(--piedra);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tinta);
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.al-choice__opt:hover span { border-color: var(--tinta); }
.al-choice__opt input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--cal); }
.al-choice__opt input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 3px; }

.al-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 32px; font-size: 13.5px; line-height: 1.55; cursor: pointer; }
.al-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tinta); }
.al-consent a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

.al-form__foot { margin-top: var(--s4); }
.al-note { margin: 0 0 var(--s3); padding: 14px 18px; font-size: 14px; border-left: 2px solid var(--oliva); background: var(--cal); color: var(--tinta); }
.al-note--bad { border-left-color: var(--error); }

/* ════════════════════════════════════════════════════════════════════
   RUNNING TEXT · LISTS · NOT FOUND
   ════════════════════════════════════════════════════════════════════ */

.al-rich .al-h1, .al-rich .al-h2 { margin-bottom: var(--s5); }
.al-prose { font-size: 16px; line-height: 1.8; }
.al-prose h2 { margin: var(--s5) 0 var(--s2); font-size: 30px; line-height: 1.15; }
.al-prose h3 { margin: var(--s4) 0 12px; font-size: 22px; }
.al-prose a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.al-prose ul, .al-prose ol { margin: 0 0 1em 1.2em; list-style: disc; }
.al-prose strong { font-weight: 500; color: var(--tinta); }

.al-list-page .al-h1, .al-notfound .al-h1 { margin: var(--s3) 0 var(--s4); }
.al-list li { border-top: 1px solid var(--line); }
.al-list a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--g); padding: 20px 0; min-height: 40px; }
.al-list__title { font-family: var(--serif); font-size: 26px; color: var(--tinta); }
.al-notfound .al-lead { margin-bottom: var(--s5); }

/* ════════════════════════════════════════════════════════════════════
   FOOTER — in tinta
   ════════════════════════════════════════════════════════════════════ */

.al-footer { background: var(--tinta); color: var(--body-on-tinta); padding: var(--s6) 0 var(--s4); }
.al-footer :focus-visible { outline-color: var(--on-tinta); }
.al-footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--s5); align-items: start; }
.al-footer__brand { grid-column: 1 / 6; }
.al-wordmark--foot { color: var(--on-tinta); }
.al-wordmark--foot span { font-size: clamp(52px, 5vw, 72px); }
.al-wordmark--foot img { height: 56px; filter: brightness(0) invert(.95); }
.al-footer__tag { margin: var(--s3) 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.35; color: var(--body-on-tinta); }
.al-footer__col { grid-column: span 2; }
.al-footer__col:nth-of-type(1) { grid-column: 7 / 9; }
.al-footer__head { margin: 0 0 14px; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--body-on-tinta); }
.al-footer__col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14.5px; color: var(--on-tinta); background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 4px) / 0 1px; transition: background-size .45s var(--ease); }
.al-footer__col a:hover { background-size: 100% 1px; }
.al-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line-on-tinta); }
.al-footer__copy { margin: 0; font-size: 12.5px; }
.al-footer__details { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.al-footer__details a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; color: var(--on-tinta); }
.al-footer .al-lang a { color: var(--body-on-tinta); }
.al-footer .al-lang a[aria-current], .al-footer .al-lang a:hover { color: var(--on-tinta); }
.al-footer .al-lang li + li::before { color: var(--body-on-tinta); }

/* ════════════════════════════════════════════════════════════════════
   ELEMENTOR
   ════════════════════════════════════════════════════════════════════ */

/* The legacy section/column shape needs this said out loud (Astra §4). */
.elementor .elementor-widget-wrap > .elementor-element { width: 100%; }
.elementor-widget-container > .al-sec, .elementor-widget-container > section { margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   MOTION — one memorable gesture, the rest almost imperceptible.
   Curve: cubic-bezier(0.2, 0.7, 0.2, 1).
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
	.al-js [data-al-reveal] { clip-path: none; }
	.al-js [data-al-reveal] img, .al-js .al-masthead__pano img { transform: none; clip-path: none; }
	.al-js .al-masthead__word span { letter-spacing: inherit; opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet 8 columns, phone 4 (brief, p. 5)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
	:root { --bar-h: 72px; }
	.al-nav, .al-header__cta { display: none; }
	.al-burger { display: grid; margin-left: -10px; }
	.al-header__bar { grid-template-columns: 44px minmax(0, 1fr) auto; }
	.al-header__mark { grid-column: 2; }
	.al-header__right { grid-column: 3; }
	.al-wordmark--bar span { font-size: 24px; }
}

@media (max-width: 1024px) {
	.al-sechead > :first-child, .al-sechead--three > :first-child { grid-column: 1 / 13; }
	.al-sechead__aside, .al-sechead--three .al-sechead__aside { grid-column: 1 / 10; margin-top: var(--s3); }
	.al-sechead__link { grid-column: 1 / 13; justify-self: start; margin-top: var(--s3); }

	.al-phero__copy { grid-column: 1 / 13; }
	.al-phero__media { grid-column: 4 / 13; margin-top: var(--s4); }

	.al-intro__copy, .al-intro--flip .al-intro__copy { grid-column: 1 / 13; grid-row: auto; }
	.al-intro__media, .al-intro--flip .al-intro__media { grid-column: 5 / 13; grid-row: auto; margin-top: var(--s5); }

	.al-experience__media { grid-column: 1 / 9; }
	.al-experience__copy { grid-column: 1 / 13; padding-top: var(--s5); }

	.al-dest__grid { grid-template-areas: "copy copy copy copy copy copy copy copy copy copy copy copy" ". . . . media media media media media media media media"; }
	.al-dest__media { margin-top: var(--s5); }

	.al-team__copy { grid-column: 1 / 13; }
	.al-team__people { grid-column: 1 / 13; margin-top: var(--s5); }

	.al-values__head, .al-values__list { grid-column: 1 / 13; }
	.al-values__list { margin-top: var(--s4); }

	.al-contact__copy { grid-column: 1 / 13; padding-top: 0; }
	.al-contact__panel { grid-column: 1 / 13; margin-top: var(--s5); }

	.al-footer__brand { grid-column: 1 / 13; }
	.al-footer__col:nth-of-type(1) { grid-column: 1 / 5; }
	.al-footer__col { grid-column: span 4; }
}

@media (max-width: 768px) {
	.al-masthead__line { grid-template-columns: 1fr 1fr; row-gap: 14px; }
	.al-masthead__rule { display: none; }
	.al-masthead__tag { grid-column: 1 / -1; grid-row: 1; text-align: center; }
	.al-masthead__side--right { text-align: right; }
	.al-masthead__pano { aspect-ratio: 4 / 3; }
	.al-masthead__over { padding-top: 56px; }

	.al-universes__grid, .al-universes__grid.al-cols-2 { grid-template-columns: minmax(0, 1fr); gap: var(--s5); max-width: 520px; }

	.al-stories__a, .al-stories__b { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
	.al-stories__a > .al-story--tall, .al-stories__stack, .al-story--offset, .al-story--drop { grid-column: 1 / -1; }
	.al-story--drop { margin-top: 0; }
	.al-stories__b { margin-top: var(--s4); }

	.al-quote { grid-template-columns: minmax(0, 1fr); }
	.al-quote__media { min-height: 300px; }

	.al-services__list, .al-services__list--2, .al-moments__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Tap targets on a phone: 40px or more (Astra §13). */
	.al-footer__col a, .al-footer__details a, .al-contact__details a, .al-link { min-height: 40px; }
}

@media (max-width: 640px) {
	:root { --g: 16px; }
	/* The caption keeps the bottom of the panorama to itself; the scroll link
	   is the arrow alone, its words still read by a screen reader. */
	.al-masthead__scroll span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.al-masthead__scroll { min-width: 40px; justify-content: center; }
	.al-phero__media, .al-intro__media, .al-intro--flip .al-intro__media, .al-experience__media { grid-column: 1 / 13; }
	.al-dest__grid { grid-template-areas: "copy copy copy copy copy copy copy copy copy copy copy copy" "media media media media media media media media media media media media"; }
	.al-dest__coords { display: none; }
	.al-steps { grid-template-columns: minmax(0, 1fr); }
	.al-stories__pair { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
	.al-story__cap { flex-direction: column; gap: 4px; }
	.al-story__meta { margin-left: 0; text-align: left; }
	.al-services__list, .al-services__list--2, .al-moments__list { grid-template-columns: minmax(0, 1fr); }
	.al-person:nth-child(even) { margin-top: 40px; }
	.al-form__grid { grid-template-columns: minmax(0, 1fr); }
	.al-field--half { grid-column: 1 / -1; }
	.al-choice__row { display: grid; grid-template-columns: minmax(0, 1fr); }
	.al-choice__opt span { width: 100%; }
	.al-btn--solid { width: 100%; }
	.al-footer__col, .al-footer__col:nth-of-type(1) { grid-column: 1 / 13; }
	.al-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   THE ELEMENTOR EDITOR CANVAS

   Inside the editor's preview iframe nothing may sit over the canvas: the
   sticky bar would land on the widget the client is dragging, so it stands
   down; and nothing waits for a script to appear — the editor re-renders
   widgets, and a reveal that never fires would leave a section invisible.
   The front end is unaffected. Last in the file so it wins at equal weight.
   ════════════════════════════════════════════════════════════════════ */

body.al-editing .al-header { position: relative; }
body.al-editing.al-home .al-header .al-header__mark { opacity: 1; visibility: visible; }
body.al-editing [data-al-reveal] { clip-path: none; }
body.al-editing [data-al-reveal] img { transform: none; }
body.al-editing .al-masthead__word span,
body.al-editing .al-masthead__pano img { animation: none; clip-path: none; transform: none; opacity: 1; }