/*
Theme Name: Photo Explorer
Theme URI: https://www.photo-explorer.com
Author: Edgar E. Sacayón
Description: Minimal custom theme for Photo Explorer. Monochrome, dark-first, no build step, no framework. Pages are built from Gutenberg Custom HTML blocks using the .px-* classes defined below.
Version: 1.2.0
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: photo-explorer
*/

/* ===================================================================
   Everything below this line is the design system, unchanged.
   Source of truth. Do not add colours, fonts, radii or spacing values
   that are not defined here — add them to the design system instead.
   =================================================================== */

/* Photo Explorer — design system CSS (single file export)
   Monochrome, dark-first. Sections: colours, type, spacing, layout, motion,
   element base, component classes (.px-*).
   No @font-face by design: platform faces only (Tahoma / Arial / platform mono). */

:root{
/* Greyscale ramp — true neutral, no warm or cool cast */
--gs-0:#FFFFFF;
--gs-5:#FAFAFA;
--gs-10:#F2F2F2;
--gs-20:#E0E0E0;
--gs-40:#B3B3B3;
--gs-60:#757575;
--gs-75:#4A4A4A;
--gs-80:#333333;
--gs-90:#1C1C1C;
--gs-100:#000000;

/* Semantic aliases — dark-first. The ramp never changes; only these lines do. */
--color-surface:var(--gs-90);
--color-surface-alt:var(--gs-100);
--color-surface-placeholder:var(--gs-80);
--color-surface-inverse:var(--gs-0);

--color-text:var(--gs-10);
--color-text-strong:var(--gs-0);
--color-text-secondary:var(--gs-20);
--color-text-meta:var(--gs-40);
--color-text-disabled:var(--gs-60);
--color-text-inverse:var(--gs-100);

--color-rule:var(--gs-75);
--color-rule-strong:var(--gs-0);
--color-focus:var(--gs-0);
--color-focus-offset:var(--gs-100);

/* Interaction — monochrome only: value shifts, never hue shifts */
--color-action:var(--gs-0);
--color-action-hover:var(--gs-20);
--color-action-quiet-hover:var(--gs-80);

/* Validation stays monochrome: weight + rule + explicit text carry the state */
--color-error-text:var(--gs-0);
--color-error-rule:var(--gs-0);
}

:root{
/* Three roles. Display = Tahoma bold (never Arial Black), Body = Arial, Utility = platform mono. */
--font-display:Tahoma,Verdana,sans-serif;
--font-body:Arial,Helvetica,sans-serif;
--font-utility:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;

--weight-regular:400; /* @kind other */
--weight-bold:700; /* @kind other */

/* Fluid scale: ~1.2 at 360px widening to ~1.333 at 1280px */
--step--1:clamp(0.8125rem,0.79rem + 0.10vw,0.875rem); /* @kind other */
--step-0:clamp(1.0625rem,1.02rem + 0.19vw,1.1875rem); /* @kind other */
--step-1:clamp(1.25rem,1.16rem + 0.39vw,1.5rem); /* @kind other */
--step-2:clamp(1.5rem,1.32rem + 0.78vw,2rem); /* @kind other */
--step-3:clamp(1.8125rem,1.48rem + 1.44vw,2.6875rem); /* @kind other */
--step-4:clamp(2.1875rem,1.62rem + 2.47vw,3.5625rem); /* @kind other */
--step-5:clamp(2.625rem,1.71rem + 3.98vw,4.75rem); /* @kind other */

--leading-display:1.08; /* @kind other */
--leading-title:1.15; /* @kind other */
--leading-body:1.6; /* @kind other */
--leading-utility:1.45; /* @kind other */

--tracking-display:-0.022em; /* @kind other */
--tracking-title:-0.012em; /* @kind other */
--tracking-body:0; /* @kind other */
--tracking-utility:0.02em; /* @kind other */
--tracking-caps:0.14em; /* @kind other */

/* Semantic aliases */
--text-display:var(--step-5); /* @kind font */
--text-h1:var(--step-4); /* @kind font */
--text-h2:var(--step-3); /* @kind font */
--text-h3:var(--step-2); /* @kind font */
--text-h4:var(--step-1); /* @kind font */
--text-body:var(--step-0); /* @kind font */
--text-small:var(--step--1); /* @kind font */
--measure:66ch; /* @kind other */
}

:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-6:24px;
--space-8:32px;
--space-12:48px;
--space-16:64px;
--space-24:96px;
--space-32:128px;

/* Semantic aliases */
--gutter:var(--space-6);
--stack-tight:var(--space-2);
--stack:var(--space-4);
--stack-loose:var(--space-8);
--section-y:var(--space-24);
--grid-gap:var(--space-4);
}

:root{
--container:1160px; /* @kind spacing */
--container-prose:680px; /* @kind spacing */
--bleed:1600px; /* @kind spacing */
--radius:0; /* @kind radius */
--rule-width:1px; /* @kind spacing */
--rule:var(--rule-width) solid var(--color-rule); /* @kind other */
--rule-strong:var(--rule-width) solid var(--color-rule-strong); /* @kind other */
--hit-min:44px; /* @kind spacing */

/* Native ratios of the photographer */
--ratio-landscape:3/2; /* @kind other */
--ratio-portrait:2/3; /* @kind other */
--ratio-bleed:16/9; /* @kind other */
--ratio-square:1/1; /* @kind other */
}

:root{
--dur-fast:150ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:250ms; /* @kind other */
--ease:cubic-bezier(0.2,0,0.2,1); /* @kind other */
/* the only translate distance in the system */
--shift:4px; /* @kind spacing */
}
@media (prefers-reduced-motion:reduce){
:root{
--dur-fast:1ms; /* @kind other */
--dur-base:1ms; /* @kind other */
--dur-slow:1ms; /* @kind other */
--shift:0px; /* @kind spacing */
}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-surface);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);margin:0}
h1{font-size:var(--text-h1);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
h2{font-size:var(--text-h2);line-height:var(--leading-title);letter-spacing:var(--tracking-title)}
h3{font-size:var(--text-h3);line-height:var(--leading-title);letter-spacing:var(--tracking-title)}
h4{font-size:var(--text-h4);line-height:var(--leading-title);letter-spacing:var(--tracking-title)}
p{margin:0}
img{display:block;max-width:100%}
a{color:var(--color-text-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--color-action-hover)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:0 0 0 4px var(--color-focus-offset)}
hr{border:0;border-top:var(--rule);margin:0}

/* Photo Explorer component classes.
   Ready to become style.css in wp-content/themes/photo-explorer/.
   Order follows the brief: layout, tour card, tour detail header, field card,
   image grid, full-bleed image, lightbox, prose, pull quote, guide bio, accordion,
   enquiry form, language switcher, header, footer. */

/* ---- Layout ---- */
.px-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.px-prose-container{width:100%;max-width:var(--container-prose);margin-inline:auto;padding-inline:var(--gutter)}
.px-section{padding-block:var(--space-16)}
@media (min-width:900px){.px-section{padding-block:var(--section-y)}}
.px-section--alt{background:var(--color-surface-alt)}
.px-rule{border-top:var(--rule)}
.px-eyebrow{font-family:var(--font-utility);font-size:var(--text-small);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-text-meta)}

/* ---- Buttons ---- */
.px-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--hit-min);padding:var(--space-3) var(--space-6);border-radius:var(--radius);border:var(--rule-width) solid var(--color-action);background:var(--color-action);color:var(--color-text-inverse);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-bold);text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.px-button:hover{background:var(--color-action-hover);border-color:var(--color-action-hover);color:var(--color-text-inverse)}
.px-button:active{background:var(--color-action);border-color:var(--color-action)}
.px-button--secondary{background:transparent;color:var(--color-text-strong)}
.px-button--secondary:hover{background:var(--color-action-quiet-hover);border-color:var(--color-action);color:var(--color-text-strong)}
.px-button--quiet{background:transparent;border-color:transparent;color:var(--color-text-strong);padding-inline:var(--space-2)}
.px-button--quiet:hover{background:var(--color-action-quiet-hover);border-color:transparent;color:var(--color-text-strong)}
.px-button[disabled]{border-color:var(--color-text-disabled);background:var(--color-text-disabled);color:var(--color-surface);cursor:not-allowed}

/* ---- Image slot (marked empty slot — never stock, never AI) ---- */
.px-slot{position:relative;display:grid;place-items:center;background:var(--color-surface-placeholder);border:var(--rule);aspect-ratio:var(--ratio-landscape);overflow:hidden}
.px-slot--portrait{aspect-ratio:var(--ratio-portrait)}
.px-slot--bleed{aspect-ratio:var(--ratio-bleed)}
.px-slot--square{aspect-ratio:var(--ratio-square)}
.px-slot__note{font-family:var(--font-utility);font-size:var(--text-small);line-height:var(--leading-utility);color:var(--color-text-meta);text-align:center;padding:var(--space-4);max-width:36ch}
.px-slot__ratio{position:absolute;top:var(--space-2);left:var(--space-2);font-family:var(--font-utility);font-size:12px;letter-spacing:var(--tracking-utility);color:var(--color-text-meta)}
.px-slot > img{width:100%;height:100%;object-fit:cover}

/* ---- Caption ---- */
.px-caption{font-family:var(--font-utility);font-size:var(--text-small);line-height:var(--leading-utility);color:var(--color-text-meta);padding-top:var(--space-2)}
.px-caption__place{color:var(--color-text-secondary)}

/* ---- Tour card ---- */
.px-tour-card{display:flex;flex-direction:column;gap:var(--space-3);border-top:var(--rule);padding-top:var(--space-4)}
.px-tour-card__media{position:relative}
.px-tour-card__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-h4);line-height:var(--leading-title);letter-spacing:var(--tracking-title);color:var(--color-text-strong)}
.px-tour-card__meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);font-family:var(--font-utility);font-size:var(--text-small);color:var(--color-text-meta)}
.px-tour-card__summary{color:var(--color-text-secondary);font-size:var(--text-small);line-height:var(--leading-body)}
.px-tour-card a.px-tour-card__link{text-decoration:none}
.px-tour-card__link:hover .px-tour-card__title{color:var(--color-action-hover)}

/* ---- Tour detail header ---- */
.px-tour-header{display:flex;flex-direction:column;gap:var(--space-4);padding-block:var(--space-12)}
.px-tour-header__title{font-size:var(--text-h1)}
.px-tour-header__lede{font-size:var(--text-h4);line-height:1.4;color:var(--color-text-secondary);max-width:var(--measure)}
.px-tour-header__facts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);font-family:var(--font-utility);font-size:var(--text-small);color:var(--color-text-meta);border-top:var(--rule);padding-top:var(--space-3)}

/* ---- Field card (ficha de campo) — the signature device ---- */
.px-field-card{border:var(--rule-strong);padding:var(--space-6);font-family:var(--font-utility);font-size:var(--text-small);line-height:var(--leading-utility);background:var(--color-surface)}
.px-field-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);border-bottom:var(--rule-strong);padding-bottom:var(--space-3);margin-bottom:var(--space-3);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-size:12px;color:var(--color-text-strong)}
.px-field-card{container-type:inline-size}
.px-field-card__row{display:grid;grid-template-columns:1fr;gap:var(--space-1);padding-block:var(--space-2);border-bottom:var(--rule)}
@container (min-width:22rem){.px-field-card__row{grid-template-columns:minmax(6rem,max-content) 1fr;gap:var(--space-4)}}
.px-field-card__row:last-child{border-bottom:0;padding-bottom:0}
.px-field-card__key{color:var(--color-text-meta);letter-spacing:var(--tracking-utility)}
.px-field-card__val{color:var(--color-text)}

/* ---- Image grid / contact sheet ---- */
.px-grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.px-grid{grid-template-columns:repeat(3,1fr)}}
.px-grid--contact-sheet{gap:var(--space-2);grid-template-columns:repeat(3,1fr)}
@media (min-width:720px){.px-grid--contact-sheet{grid-template-columns:repeat(6,1fr)}}
.px-grid__item{display:flex;flex-direction:column}

/* ---- Full-bleed image ---- */
.px-bleed{width:100%;max-width:var(--bleed);margin-inline:auto}
.px-bleed__caption{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---- Lightbox ---- */
.px-lightbox{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:auto 1fr auto;background:var(--gs-100);color:var(--color-text-inverse)}
.px-lightbox__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-utility);font-size:var(--text-small);color:var(--gs-40);border-bottom:1px solid var(--gs-75)}
.px-lightbox__stage{display:grid;place-items:center;padding:var(--space-4);min-height:0}
.px-lightbox__caption{padding:var(--space-3) var(--space-4);font-family:var(--font-utility);font-size:var(--text-small);color:var(--gs-40);border-top:1px solid var(--gs-75)}
.px-lightbox__nav{background:transparent;border:1px solid var(--gs-75);color:var(--gs-0);min-height:var(--hit-min);min-width:var(--hit-min);cursor:pointer;font-family:var(--font-utility);transition:background var(--dur-fast) var(--ease)}
.px-lightbox__nav:hover{background:var(--gs-75)}

/* ---- Prose ---- */
.px-prose{max-width:var(--measure)}
.px-prose > * + *{margin-top:var(--space-6)}
.px-prose h2,.px-prose h3{margin-top:var(--space-12)}
.px-prose ul,.px-prose ol{padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}

/* ---- Pull quote ---- */
.px-pullquote{border-top:var(--rule-strong);border-bottom:var(--rule-strong);padding-block:var(--space-6);max-width:var(--measure)}
.px-pullquote__text{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-h3);line-height:var(--leading-title);letter-spacing:var(--tracking-title);color:var(--color-text-strong)}
.px-pullquote__source{font-family:var(--font-utility);font-size:var(--text-small);color:var(--color-text-meta);padding-top:var(--space-3)}

/* ---- Guide bio ---- */
.px-bio{display:grid;gap:var(--space-6);align-items:start}
@media (min-width:820px){.px-bio{grid-template-columns:280px 1fr;gap:var(--space-12)}}
.px-bio__credentials{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-utility);font-size:var(--text-small);color:var(--color-text-secondary)}
.px-bio__credentials li{border-top:var(--rule);padding-top:var(--space-2)}

/* ---- Accordion ---- */
.px-accordion{border-top:var(--rule)}
.px-accordion__item{border-bottom:var(--rule)}
.px-accordion__trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--hit-min);padding-block:var(--space-4);background:none;border:0;text-align:left;cursor:pointer;font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-bold);color:var(--color-text-strong)}
.px-accordion__sign{font-family:var(--font-utility);color:var(--color-text-meta)}
.px-accordion__panel{padding-bottom:var(--space-4);color:var(--color-text-secondary);max-width:var(--measure)}

/* ---- Enquiry form ---- */
.px-field{display:flex;flex-direction:column;gap:var(--space-2)}
.px-label{font-family:var(--font-utility);font-size:var(--text-small);letter-spacing:var(--tracking-utility);color:var(--color-text-secondary)}
.px-input,.px-textarea,.px-select{font-family:var(--font-body);font-size:var(--text-body);color:var(--color-text);background:var(--color-surface);border:var(--rule);border-radius:var(--radius);padding:var(--space-3);min-height:var(--hit-min);width:100%}
.px-textarea{min-height:9rem;resize:vertical}
.px-input:hover,.px-textarea:hover,.px-select:hover{border-color:var(--color-text-secondary)}
.px-input:focus-visible,.px-textarea:focus-visible,.px-select:focus-visible{border-color:var(--color-rule-strong)}
.px-field--error .px-input,.px-field--error .px-textarea{border-left:3px solid var(--color-error-rule);border-color:var(--color-error-rule)}
.px-field--error .px-label{color:var(--color-text-strong);font-weight:var(--weight-bold)}
.px-error{font-family:var(--font-utility);font-size:var(--text-small);color:var(--color-error-text);font-weight:var(--weight-bold)}
.px-help{font-family:var(--font-utility);font-size:var(--text-small);color:var(--color-text-meta)}

/* ---- Language switcher ---- */
.px-lang{display:inline-flex;font-family:var(--font-utility);font-size:var(--text-small);letter-spacing:var(--tracking-utility)}
.px-lang__item{min-height:var(--hit-min);display:inline-flex;align-items:center;padding-inline:var(--space-2);color:var(--color-text-meta);text-decoration:none}
.px-lang__item[aria-current="true"]{color:var(--color-text-strong);font-weight:var(--weight-bold)}
.px-lang__sep{display:inline-flex;align-items:center;color:var(--color-rule)}

/* ---- Header ---- */
.px-header{border-bottom:var(--rule);background:var(--color-surface)}
.px-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:72px}
.px-wordmark{font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);font-size:var(--text-h4);color:var(--color-text-strong);text-decoration:none;line-height:1}
.px-wordmark__sub{display:block;font-family:var(--font-utility);font-weight:var(--weight-regular);font-size:12px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-text-meta);padding-top:var(--space-1)}
.px-nav{display:flex;align-items:center;gap:var(--space-6)}
.px-nav__link{font-size:var(--text-small);color:var(--color-text-secondary);text-decoration:none;min-height:var(--hit-min);display:inline-flex;align-items:center}
.px-nav__link:hover{color:var(--color-text-strong)}
.px-nav__link[aria-current="page"]{color:var(--color-text-strong);box-shadow:inset 0 -1px 0 var(--color-rule-strong)}

/* ---- Footer ---- */
.px-footer{border-top:var(--rule-strong);padding-block:var(--space-12);font-size:var(--text-small);color:var(--color-text-secondary)}
.px-footer__grid{display:grid;gap:var(--space-8);grid-template-columns:1fr}
@media (min-width:760px){.px-footer__grid{grid-template-columns:2fr 1fr 1fr}}
.px-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.px-footer__meta{font-family:var(--font-utility);font-size:12px;color:var(--color-text-meta);padding-top:var(--space-8)}

/* ===================================================================
   THEME LAYER — additions to the design system
   -------------------------------------------------------------------
   Not in tokens.css. Uses existing tokens only: no new colours, fonts,
   spacing values or radii. Back-port into tokens.css when convenient.
   =================================================================== */

/* ---- Responsive header ----
   The system defines .px-header__inner and .px-nav as non-wrapping flex
   rows with no media queries, which overflows below ~820px. */
.px-header__inner{flex-wrap:wrap;gap:var(--space-3) var(--space-6);padding-block:var(--space-3)}
.px-nav{flex-wrap:wrap;gap:var(--space-1) var(--space-4);width:100%}
@media (min-width:820px){
.px-header__inner{flex-wrap:nowrap;gap:var(--space-6);padding-block:0}
.px-nav{flex-wrap:nowrap;gap:var(--space-6);width:auto}
}

/* ---- Grid: one card per row on phones ----
   The system's .px-grid is 2-up at every width below 720px, which leaves
   tour card images around 150px wide on a 360px screen — too small to
   judge a photograph, which is the entire point of these cards.
   The contact sheet is excluded: 3-up thumbnails are correct there. */
.px-grid:not(.px-grid--contact-sheet){grid-template-columns:1fr;gap:var(--space-12)}
@media (min-width:600px){
.px-grid:not(.px-grid--contact-sheet){grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
}
@media (min-width:960px){
.px-grid:not(.px-grid--contact-sheet){grid-template-columns:repeat(3,1fr)}
}

/* ---- Page head ----
   Replaces the ad-hoc inline padding used on the first draft of the home
   page. Inline styles are forbidden in page content. */
.px-page-head{display:flex;flex-direction:column;gap:var(--space-4);padding-bottom:var(--space-12)}
.px-page-head__lede{color:var(--color-text-secondary);max-width:var(--measure)}

/* ---- Footer contact block ---- */
.px-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.px-contact__label{display:block;font-family:var(--font-utility);font-size:var(--text-small);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-text-meta)}
.px-contact a,.px-contact span:not(.px-contact__label){display:inline-flex;align-items:center;min-height:var(--hit-min)}

/* ---- Long-word protection ----
   --text-h1 is 35px minimum; Spanish place names can exceed 360px. */
h1,h2,h3,h4,.px-tour-card__title,.px-pullquote__text,.px-wordmark{overflow-wrap:break-word}
.px-field-card__key,.px-field-card__val{overflow-wrap:break-word;min-width:0}

/* ---- Touch targets ----
   The system sets a 44px floor; .px-wordmark (36px) and footer links
   (15px) fell under it. Inline links inside prose are exempt and
   deliberately untouched. */
.px-wordmark{display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--hit-min)}
.px-footer__list a{display:inline-flex;align-items:center;min-height:var(--hit-min)}

/* ---- Añadidos: reset de figure y dos utilidades de composición ---- */
figure{margin:0}
.px-stack > * + *{margin-top:var(--space-6)}
/* ---- Action row ---- */
.px-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding-top:var(--space-8)}

/* ---- Portada de tour: imagen + ficha técnica ----
   Móvil: una columna, imagen arriba y ficha abajo.
   Escritorio (≥900px): imagen a la izquierda, ficha a la derecha. */
.px-tour-lead{display:grid;gap:var(--space-8);align-items:start}
@media (min-width:900px){
  .px-tour-lead{grid-template-columns:3fr 2fr;gap:var(--space-12)}
}
.px-tour-lead__aside{display:flex;flex-direction:column;gap:var(--space-6)}

/* ---- Secciones apiladas ----
   Evita 192px de aire entre dos .px-section consecutivas:
   deja el ritmo de 64px en móvil y 96px en escritorio. */
.px-section--stacked{padding-block:var(--space-8)}
@media (min-width:900px){
  .px-section--stacked{padding-block:var(--space-12)}
}

/* ---- Galería con espaciado amplio ---- */
.px-grid--airy{gap:var(--space-8)}
@media (min-width:900px){
  .px-grid--airy{gap:var(--space-12)}
}
.px-grid__item--wide{grid-column:span 2}

/* ---- Video insertado (16:9) ---- */
.px-video{position:relative;aspect-ratio:var(--ratio-bleed);border:var(--rule);background:var(--color-surface-placeholder)}
.px-video > iframe,.px-video > video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===================================================================
   THEME LAYER — hero and tour card alignment
   =================================================================== */


/* ---- New token -----------------------------------------------------------
   The only transparent value in the system. It exists solely so hero text
   stays above AA contrast over an unpredictable photograph.
   This is an amendment to the design system, not a workaround — record it.
   -------------------------------------------------------------------------- */
:root{
  --color-scrim:rgba(0,0,0,0.55);
}


/* ---- Hero banner ---------------------------------------------------------
   Mobile: square, so the text has room. Desktop: 16:9 as specified.
   Background stays --color-surface-placeholder until the photo is uploaded,
   so a missing file degrades to a dark panel instead of a broken layout.
   -------------------------------------------------------------------------- */
.px-hero{
  position:relative;
  display:grid;
  align-items:end;
  width:100%;
  max-width:var(--bleed);
  margin-inline:auto;
  aspect-ratio:var(--ratio-square);
  background:var(--color-surface-placeholder);
  overflow:hidden;
}
@media (min-width:900px){
  .px-hero{aspect-ratio:var(--ratio-bleed)}
}

.px-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.px-hero__scrim{
  position:absolute;
  inset:0;
  background:var(--color-scrim);
}

.px-hero__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding-block:var(--space-8);
}
@media (min-width:900px){
  .px-hero__inner{padding-block:var(--space-12)}
}

.px-hero__title{
  font-size:var(--text-h1);
  color:var(--color-text-strong);
}

.px-hero__lede{
  font-size:var(--text-h4);
  line-height:1.4;
  color:var(--color-text-strong);
  max-width:var(--measure);
}

/* The eyebrow sits on a photograph here, so it needs the brighter grey */
.px-hero .px-eyebrow{color:var(--color-text-secondary)}


/* ---- Tour card alignment -------------------------------------------------
   The cards were ragged because each one was only as tall as its own text.
   Stretching every card to the row height and pushing the button to the
   bottom gives one flat baseline across the row, whatever the copy length.
   -------------------------------------------------------------------------- */
.px-grid > .px-tour-card{height:100%}

.px-tour-card__summary{flex:1 1 auto}

.px-tour-card > .px-button{
  margin-top:var(--space-2);
  align-self:flex-start;
}

/* Keep each fact intact, and reserve two lines for the row.
   Without this, a short card ("Petén") keeps its facts on one line while the
   others wrap to two, and the titles below them start at different heights. */
.px-tour-card__meta > span{white-space:nowrap}
.px-tour-card__meta{min-height:calc(3.2em + var(--space-1))}


/* ---- Skip link ----
   Hidden until it receives keyboard focus. Uses existing tokens only. */
.px-skip{position:absolute;left:var(--space-4);top:var(--space-4);z-index:60;padding:var(--space-3) var(--space-4);background:var(--color-action);color:var(--color-text-inverse);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-bold);text-decoration:none;transform:translateY(-200%)}
.px-skip:focus-visible{transform:none}

/* ---- Footer contact links ----
   Contact values are links (WhatsApp, email); keep them white and underlined
   like every other link, and let a long email address wrap on small phones. */
.px-contact a{overflow-wrap:anywhere}

/* ===================================================================
   THEME LAYER — tour template: section rules, image frames
   =================================================================== */

/* ---- New alias ------------------------------------------------------------
   Frame for photographs and videos. --color-rule (#4A4A4A) almost vanishes
   against the #1C1C1C surface; --gs-60 (#757575) is visible but still quiet.
   Taken from the existing ramp. Record it in tokens.css.
   -------------------------------------------------------------------------- */
:root{
  --color-rule-image:var(--gs-60);
}

/* ---- Section rules ---------------------------------------------------------
   A thin grey line above each block of the tour page, at container width. */
.px-section--ruled > .px-container{border-top:var(--rule);padding-top:var(--space-8)}
@media (min-width:900px){
  .px-section--ruled > .px-container{padding-top:var(--space-12)}
}

/* ---- Image and video frames ---- */
.px-slot,.px-video{border-color:var(--color-rule-image)}

/* ---- Gallery: videos keep the 3:2 crop of the photos beside them ---- */
.px-grid .px-video{aspect-ratio:var(--ratio-landscape)}
.px-video > video{object-fit:cover}