so it works with scripting off and
survives the move to WordPress without a JS dependency. */
.faq-head { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.faq-head .eyebrow { justify-content: center; }
.faq-head p { margin-inline: auto; }
.faqs { max-width: 880px; margin-inline: auto; }
/* No painted ground either: the rows are separated by a rule, not by a box.
With a background they became white strips whose question sat 4px from the
painted edge while the chevron sat 28px from the other — visibly lopsided. */
.faq {
border-bottom: 1px solid var(--line);
}
.faq > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 56px;
padding: 1.15rem 0;
font: 500 0.78rem/1.45 var(--font-body);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
transition: color var(--t-med) var(--ease-out-expo);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
content: "";
flex: none;
width: 10px; height: 10px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--t-med) var(--ease-out-expo);
color: var(--ink-muted);
}
.faq[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq[open] > summary { color: var(--brand-900); }
@media (hover: hover) and (pointer: fine) {
.faq > summary:hover { color: var(--brand-600); }
}
.faq > summary:focus-visible { outline: 2px solid var(--brand-400); outline-offset: -2px; }
.faq-body { padding: 0 0 1.5rem; }
.faq-body p { font-size: 0.95rem; color: var(--ink-body); max-width: 70ch; }
.faq-body p + p { margin-top: 0.75rem; }
/* ---------- Route map --------------------------------------------------
"Your route through Peru". The map itself is an image supplied per trip;
the stop list beneath it carries the same information as text. */
.routemap {
display: grid;
gap: 0;
/* stretch, not centre: the media half is a picture that runs to the panel's
own edge. Centred, it floated as a 240px band with 141px of ground above
and below it, which read as an image stuck to the right rather than as
half the panel. */
align-items: stretch;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--surface);
}
/* No align-items here: the media half is a picture that runs to the panel's
top, right and bottom edges. Centred, it floated with panel ground above
and below it while still touching the right, which is neither a bleed nor
an inset. */
@media (min-width: 820px) { .routemap { grid-template-columns: 0.8fr 1.2fr; } }
.routemap-copy { padding: clamp(1.5rem, 3vw, 2.5rem); }
.routemap-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.routemap-stops { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.routemap-stops li {
position: relative;
padding: 0.4rem 0 0.4rem 1.5rem;
font-size: 0.9rem;
color: var(--ink-body);
}
.routemap-stops li::before {
content: "";
position: absolute; left: 2px; top: 0.95rem;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
}
.routemap-stops li:not(:last-child)::after {
content: "";
position: absolute; left: 5.5px; top: 1.6rem; bottom: -0.3rem;
border-left: 1px dashed var(--brand-400);
}
/* The picture fills the height the copy sets, not the other way round. In
flow, the file's own proportions decided: a 721x1280 portrait asked for
1,176px of panel to hold 666px of list, and the box grew with the image.
Out of flow it contributes no height at all, so the text column sets the
row and the photograph crops into it. Swapping the file no longer moves
the layout. */
/* The tag is absolute. Without a positioned parent it anchored to the section
and landed 52px below the panel, full-bleed across the page. */
.routemap-media {
position: relative;
min-height: 240px;
background: var(--brand-050);
}
.routemap-media img,
.routemap-media iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
/* Stacked there is no text beside it to set the height, so give it one. */
@media (max-width: 819px) {
.routemap-media { aspect-ratio: 16 / 10; }
}
.routemap-media[data-placeholder] { display: block; padding: 0; }
/* A photograph standing in until the route map exists. No wash over it: with
the label gone, a half-desaturated picture just reads as broken. */
/* ---------- Day-by-day with a sticky map -------------------------------
Deck, ITINERARIO p2: "Itinerario en vertical", ref Original Travel. The
map holds while the days scroll past it. Single column on small screens,
where a sticky map would eat the viewport. */
/* ---------- Day by day --------------------------------------------------
An accordion on a timeline. The old shape was a two-column grid with a map
panel on the left that had no map in it, and four days stacked open beside
it — at eleven days that column would have run for four screens against an
empty box. Collapsed, the route reads as a list of days whatever the count;
the first is open so the page never starts closed. */
.routedays { list-style: none; margin: 0; padding: 0; }
.routeday { position: relative; padding-left: clamp(2.5rem, 4vw, 3.25rem); }
/* The line joins one marker to the next and stops at the last. */
.routeday:not(:last-child)::before {
content: "";
position: absolute; top: 2.2rem; bottom: -0.5rem;
left: clamp(0.9rem, 1.45vw, 1.19rem);
width: 1px;
background: var(--line);
}
.routeday-item { border-bottom: 1px solid var(--line); }
.routeday:last-child .routeday-item { border-bottom: 0; }
.routeday-item > summary {
list-style: none;
cursor: pointer;
display: flex; align-items: flex-start; gap: 1rem;
padding: 1.1rem 0;
transition: color var(--t-med) var(--ease-out-expo);
}
.routeday-item > summary::-webkit-details-marker { display: none; }
.routeday-n {
position: absolute;
left: 0; margin-top: 0.1rem;
width: clamp(1.85rem, 2.9vw, 2.4rem);
height: clamp(1.85rem, 2.9vw, 2.4rem);
display: grid; place-items: center;
border-radius: 50%;
background: var(--bg-page);
box-shadow: inset 0 0 0 1px var(--line);
font: 500 0.8rem/1 var(--font-body);
color: var(--ink-secondary);
transition: background-color var(--t-med) var(--ease-out-expo),
color var(--t-med) var(--ease-out-expo),
box-shadow var(--t-med) var(--ease-out-expo);
}
.routeday-item[open] .routeday-n {
background: var(--brand-900); color: var(--on-dark);
box-shadow: inset 0 0 0 1px var(--brand-900);
}
.routeday-head { flex: 1; display: grid; gap: 0.2rem; }
.routeday-route {
font-family: var(--font-display);
font-size: clamp(1.02rem, 1.35vw, 1.2rem);
font-weight: 430; line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
}
.routeday-brief {
font: 400 0.82rem/1.4 var(--font-body);
color: var(--ink-secondary);
}
/* Same chevron as the FAQ list, so the two behave alike. */
.routeday-item > summary::after {
content: "";
flex: none; align-self: center;
width: 9px; height: 9px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--t-med) var(--ease-out-expo);
color: var(--ink-muted);
}
.routeday-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.routeday-item > summary:focus-visible { outline: 2px solid var(--brand-400); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
.routeday-item > summary:hover .routeday-route { color: var(--brand-600); }
}
.routeday-body { padding: 0 0 1.5rem; }
.routeday-body > p,
.routeday-copy > p { font-size: 0.95rem; line-height: 1.7; color: var(--ink-body); max-width: 70ch; }
/* The eight-line group runs in two columns inside its own panel, so it does
not tower over the three beside it. */
/* ---------- Suggestions ------------------------------------------------
Deck, ITINERARIO p4: "Texto informativo sobre que otras actividades se
pueden hacer en este viaje." */
.suggestions {
background: var(--surface);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 3.5vw, 3rem);
}
/* A panel whose every child is still a placeholder drew as an empty slab the
width of the page. If there is nothing to show, there is no panel. */
.suggestions:not(:has(> :not([data-tbc]))) { display: none; }
.suggestion { padding-block: clamp(1rem, 2vw, 1.5rem); }
.suggestion:first-of-type { padding-top: 0.25rem; }
.suggestion h3 {
font-family: var(--font-body);
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-900);
}
.suggestion p { font-size: 0.93rem; color: var(--ink-body); max-width: 76ch; }
/* ---------- Editorial alternating rows ---------------------------------
Deck, DESTINATIONS p4: "Contenido dentro de la página con CTA que llevan
a un formulario." Ref Black Tomato "What to see and do". */
.edrow {
display: grid;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
@media (min-width: 820px) {
.edrow { grid-template-columns: 1fr 1fr; }
.edrow-media { height: clamp(200px, 20vw, 260px); }
.edrow-media img { height: 100%; aspect-ratio: auto; }
}
.edrow:first-of-type { padding-top: 0; }
.edrow img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
@media (min-width: 820px) {
.edrow-reverse .edrow-media { order: -1; }
}
.edrow h3 {
font-family: var(--font-body);
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--brand-900);
margin-bottom: 0.85rem;
}
.edrow p { font-size: 0.95rem; color: var(--ink-body); }
.edrow .btn { margin-top: 1.25rem; }
/* ---------- Places grid ------------------------------------------------
Deck, DESTINATIONS p2: "Countries → Places", ref Black Tomato. Name laid
over the photograph, nothing else. */
.places {
display: grid;
gap: clamp(0.85rem, 1.6vw, 1.25rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Five places, three across: wider cards than the auto-fit default gives
them, and no ragged row of one. */
.places-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .places-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .places-3 { grid-template-columns: 1fr; } }
.place {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
transition: transform var(--t-med) var(--ease-out-expo),
box-shadow var(--t-med) var(--ease-out-expo),
border-color var(--t-med) var(--ease-out-expo);
border-radius: var(--radius-card);
overflow: hidden;
text-decoration: none;
isolation: isolate;
}
.place img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
transition: transform 700ms var(--ease-out-expo);
}
.place::after {
content: "";
position: absolute; inset: 0; z-index: -1;
background: oklch(0.185 0.016 259 / 0.32);
transition: background-color var(--t-med) var(--ease-out-expo);
}
.place span {
font: 500 0.78rem/1.3 var(--font-body);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--on-dark);
text-align: center;
padding: 0.5rem 1rem;
text-shadow: 0 1px 12px oklch(0.185 0.016 259 / 0.7);
}
@media (hover: hover) and (pointer: fine) {
/* Three things at once, or the change reads as a rendering glitch rather
than an answer: the photograph pushes in, the veil lifts, and the card
itself rises off the page. */
.place:hover img { transform: scale(1.05); }
.place:hover::after { background: oklch(0.185 0.016 259 / 0.15); }
.place:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px oklch(0.255 0.060 259 / 0.18);
}
.place[data-placeholder]:hover { border-color: var(--brand-400); }
}
@media (prefers-reduced-motion: reduce) {
.place, .place img { transition: none; }
.place:hover { transform: none; }
.place:hover img { transform: none; }
}
.place:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 3px; }
/* Three of the seven places the client asked for have no photograph yet.
The tile still exists so the set is complete, but it reads as unfinished
rather than borrowing an image from somewhere else. */
.place[data-placeholder] {
background: var(--surface);
border: 1px dashed var(--line);
flex-direction: column;
}
.place[data-placeholder]::after { content: none; }
.place[data-placeholder] span { color: var(--ink-secondary); text-shadow: none; }
.place-pending {
display: block;
margin-top: 0.6rem;
font: 400 0.62rem/1.5 var(--font-body);
letter-spacing: 0.04em;
text-transform: none;
color: var(--ink-secondary);
}
/* ---------- Overview trio ----------------------------------------------
Deck, ITINERARIO p2: WHEN · PRICE · HOW LONG under the intro. */
.trio {
display: grid;
gap: clamp(1.25rem, 3vw, 2.5rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
text-align: center;
padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.trio-key {
display: block;
font: 500 0.66rem/1 var(--font-body);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.65rem;
}
.trio-val { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.trio-note { display: block; font-size: 0.78rem; color: var(--ink-secondary); margin-top: 0.3rem; }
/* A cell whose figure is still a placeholder rendered as a label and a note
with nothing between them. No figure, no cell. */
.trio > div:has(> .trio-val[data-tbc]) { display: none; }
/* ---------- Split intro with an image ----------------------------------
Deck, EXPERIENCES p2: "Faltaría agregar una imagen referente a la
experiencia." */
.introsplit { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 860px) {
.introsplit { grid-template-columns: 0.95fr 1.05fr; }
.introsplit-media { height: clamp(260px, 26vw, 360px); }
.introsplit-media img { height: 100%; aspect-ratio: auto; }
}
.introsplit img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.introsplit-body p + p { margin-top: 1rem; }
/* ---------- Day facts and the included groups ---------------------------
The client's itinerary carries a distance, an altitude line and the meals
for each day, and lists what is included in four named groups. Both are
their figures; the page only has to hold them legibly. */
.day-facts {
list-style: none; margin: 1rem 0 0; padding: 0;
display: grid; gap: 0.35rem;
border-top: 1px solid var(--line);
padding-top: 0.9rem;
}
.day-facts li {
display: grid; grid-template-columns: minmax(70px, 90px) 1fr;
gap: 0.9rem;
font-size: 0.85rem; line-height: 1.5;
color: var(--ink-body);
}
.day-fact-key {
font: 500 0.64rem/1.5 var(--font-body);
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-secondary);
}
/* Eighteen lines against five put one column at 1,189px and the other at 434
on a 1440 screen. Stacked instead, each half runs the full width and its own
grid decides the shape, so the two lengths never have to match. */
.incblock + .incblock {
margin-top: clamp(2rem, 4vw, 3.25rem);
padding-top: clamp(2rem, 4vw, 3.25rem);
border-top: 1px solid oklch(1 0 0 / 0.14);
}
.incblock h2 { margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem); }
/* auto-fit, so four named groups sit four across and a trip with two or six
still fills its row. */
.inc-groups {
display: grid;
gap: clamp(1.25rem, 2.6vw, 2.25rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
align-items: start;
}
/* Five short lines under a full-width heading left the block looking thin
against the eighteen above it. Heading and note hold one side, the list the
other, so the row is used by what is actually there. */
.incblock-not { display: grid; gap: clamp(1rem, 2.5vw, 2.25rem); }
@media (min-width: 820px) {
.incblock-not {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
align-items: start;
}
.incblock-not .cross-list { columns: 2; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
.incblock-not .cross-list li { break-inside: avoid; }
}
.incnot-head h2 { margin-bottom: 0.8rem; }
.incnot-head .inc-note { margin-top: 0; }
.inc-group h3 {
font: 500 0.66rem/1.4 var(--font-body);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--brand-200);
margin-bottom: 0.6rem;
}
.inc-note {
margin-top: 1.25rem;
font-size: 0.85rem; line-height: 1.6;
color: var(--on-dark-muted);
max-width: 46ch;
}
/* ---------- What to see and do -----------------------------------------
One stop per slide, the slide the width of the viewport: copy on the left,
photograph on the right, and the next stop arrives in its place. The track
is full-bleed; the content inside each slide sits in the same container as
the rest of the page, so nothing shifts as it advances. */
.seedo-rail .rail-track {
grid-auto-columns: 100%;
gap: 0;
padding-inline: 0;
scroll-padding-left: 0;
padding-bottom: 0;
}
/* The slide is the full width of the track; the panel inside it is the page's
own .wrap, so one slide reads as one object rather than as loose copy that
happens to move. The photograph runs to the panel's own edge. */
.seedo-slide { display: block; }
.seedo-split {
display: grid;
align-items: stretch;
padding: 0;
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow var(--t-med) var(--ease-out-expo);
}
@media (min-width: 780px) { .seedo-split { grid-template-columns: 1fr 1.05fr; } }
.seedo-copy {
padding: clamp(1.5rem, 3.2vw, 3rem);
display: flex; flex-direction: column; justify-content: center;
}
.seedo-copy h3 { margin-bottom: 0.75rem; }
.seedo-copy p { color: var(--ink-body); max-width: 46ch; }
.seedo-copy .btn { align-self: flex-start; margin-top: 1.5rem; }
.seedo-media { min-height: clamp(220px, 30vw, 420px); }
.seedo-media img,
.seedo-media .media-pending {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 0;
}
.seedo-media img { transition: transform 800ms var(--ease-out-expo); }
@media (hover: hover) and (pointer: fine) {
/* Not a link, so the answer stays quiet: the photograph pushes in and the
panel lifts off the page a little. */
.seedo-split:hover { box-shadow: 0 16px 40px oklch(0.255 0.060 259 / 0.14); }
.seedo-split:hover .seedo-media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.seedo-media img, .seedo-split { transition: none; }
.seedo-split:hover .seedo-media img { transform: none; }
}
/* The arrows belong to the slide above them, not to the section break. */
.seedo-rail .rail-nav {
max-width: var(--wrap-max);
margin: 1rem auto 0;
padding-inline: var(--pad-x);
}
/* ---------- Photographs in the split intro ------------------------------
The rail component with one photograph per slide: same track, same two
script, so there is no second carousel to keep alive. No buttons: it moves
on its own, and stops the moment the reader shows interest in it. */
.mediarail { position: relative; height: 100%; }
.mediarail .rail-track {
grid-auto-columns: 100%;
gap: 0;
height: 100%;
padding-bottom: 0;
border-radius: var(--radius-card);
}
.mediarail .rail-track > img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 0;
scroll-snap-align: center;
}
/* ---------- Indicative price row --------------------------------------
Deck, Machu Picchu p4: a row of "precio orientativo por persona" cards
under the travel styles, each with its own enquiry button. */
.pricerow {
display: grid;
gap: clamp(0.75rem, 1.5vw, 1.25rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pricecard {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: clamp(1rem, 2vw, 1.5rem);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.pricecard.is-featured { border-color: var(--brand-600); background: var(--brand-050); }
.pricecard-amount {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--brand-900);
}
.pricecard-amount.is-pending {
font-size: 0.8rem;
font-family: var(--font-body);
font-style: italic;
color: var(--ink-secondary);
}
.pricecard-note { font-size: 0.72rem; color: var(--ink-secondary); line-height: 1.45; }
.pricecard .btn { margin-top: auto; padding: 0.8rem 1rem; font-size: 0.68rem; }
/* Placeholder media, used until the client supplies photographs */
.media-pending {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
border: 1px dashed var(--line);
border-radius: var(--radius-card);
background: var(--surface);
padding: 1.5rem;
text-align: center;
}
/* Hero microcopy — the reassurance line the Home deck asks for under the
buttons: "Free personalized quote · Local Peru specialists · Support
throughout your journey". */
.hero-microcopy {
margin-top: 1.4rem;
font-size: 0.82rem;
color: oklch(1 0 0 / 0.78);
max-width: none;
}
@media (max-width: 680px) { .hero-microcopy { font-size: 0.78rem; } }
.final-cta-micro, .how-micro, .responsible-micro, .value-micro, .guides-note {
font-size: 0.82rem;
line-height: 1.55;
margin-block: 0.9rem 1.4rem;
max-width: 52ch;
}
.final-cta-micro { color: var(--on-dark-muted); }
.how-micro { color: var(--on-dark-muted); }
.responsible-micro, .value-micro, .guides-note { color: var(--ink-secondary); }
.guides-note { margin-bottom: 0.9rem; max-width: 46ch; }
.footer-top-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.footer-badges {
margin-top: 0.75rem;
font-size: 0.78rem;
color: var(--on-dark-muted);
}
.footer-contact-note {
font-size: 0.85rem;
line-height: 1.55;
color: var(--on-dark-body);
margin-bottom: 0.9rem;
max-width: 34ch;
}
.footer-city { font-size: 0.85rem; color: var(--on-dark-muted); margin-top: 0.4rem; }
.footer-send { display: block; margin-top: 1rem; }
.footer-send strong { display: block; }
.footer-send span { display: block; font-size: 0.78rem; color: var(--on-dark-muted); }
/* ============ Spacing repairs ============
Measured, not guessed: at 1280 these stacked siblings were between 0 and
6px apart, so a tag, a title and a paragraph read as one block of text. */
/* Guide cards: tag, heading and description were all touching. */
.guide-card .guide-tag { margin-bottom: 0.6rem; }
.guide-card h3 { margin-bottom: 0.55rem; }
/* A heading and the lead paragraph under it, where the two stack. */
.trending-head h2 + .section-head-lead,
.section-head-main h2 + .section-head-lead { margin-top: 0.9rem; }
/* The utility this list asked for did not exist, so it inherited nothing. */
.u-mt-sm { margin-top: 1.1rem; }
/* Two paragraphs of footer blurb ran together. */
.footer-brand p + p { margin-top: 0.7rem; }
/* Role cards sat 6px above the portraits below them. */
.valueprops + .team-grid { margin-top: clamp(2rem, 4vw, 3rem); }
/* Hero: the reassurance line was 4px under the buttons. */
.hero-actions + .hero-microcopy { margin-top: 1.5rem; }
/* Footer link lists: 6px on a 1.7 line-height reads as a wall. */
.footer-col a { padding-block: 0.15rem; }
/* ============ Alignment and label repairs ============ */
/* Root cause of the misaligned heads: the eyebrow and the lead are , and
the global `p { max-width: 62ch }` caps them. Inside a centred block that
cap leaves the box pinned left while the h2 — not a
— centres. Every
centred head needs the auto inline margin the heading gets for free. */
.trending-head > p,
.faq-head > p,
.guides-more > p,
/* The interior hero has the same fault and was never on this list: its
eyebrow measured 457px against a 1072px column, so the label sat hard left
under a centred headline. */
.page-hero-content > p,
.u-center > p { margin-inline: auto; }
/* Amber badges got a background but kept padding:0, so the text touched the
edges. A label on a ground needs room. */
.trending-badge {
padding: 0.34rem 0.7rem;
border-radius: var(--radius-btn);
line-height: 1;
}
.experts-faces .is-empty { padding: 0; display: grid; place-items: center; }
/* Microcopy sat orphaned below its button. Tie it to the action it explains. */
.guides-more > .btn + p,
.value-micro, .how-micro {
margin-top: 0.85rem;
text-align: center;
}
/* Value cards were a rule, a title and a paragraph — nothing to look at.
The icon sits above the rule and gives each card an anchor.
Only the stacking differs from the base icon now: above the title rather
than beside it. */
.value-card .value-icon {
display: block;
margin-bottom: 0.9rem;
}
/* Reassurance in the hero. Enrique's note was about what to convey, not a
string to paste under every button — it appeared four times, three of them
the same sentence reordered. It survives once, here, as a spaced row
instead of a run-on caption. */
.hero-assurances {
list-style: none;
margin: 1.6rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.5rem;
}
/* No tick marks. They were the only orange on the page and they sat in front
of every line, so the eye read the row as five warnings rather than as one
quiet band of facts. The gap alone separates them. */
.hero-assurances li {
font-size: 0.84rem;
color: oklch(1 0 0 / 0.82);
}
@media (max-width: 680px) {
.hero-assurances { gap: 0.3rem 1rem; }
.hero-assurances li { font-size: 0.79rem; }
}
/* ============ Deck layouts (pages 7-11) ============
Three structures the deck draws that the copy pass alone could not create:
the roles as a 2x2 block on a filled ground, the team as one large portrait
beside three small ones, and Trending as three cards of equal weight. */
/* --- p7-8 · the four roles as photo cards: one large, three small.
The deck asks for this block to read "similar a itinerarios de
inspiración", so it borrows that block's scrim-over-photo treatment. --- */
.rolecards {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(0.9rem, 1.8vw, 1.4rem);
align-items: stretch;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.rolecard-stack {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: clamp(0.9rem, 1.8vw, 1.4rem);
}
.rolecard {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--stone);
min-height: 150px;
}
.rolecard-feature { min-height: clamp(360px, 42vw, 520px); }
.rolecard img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
}
/* Same scrim as the inspiration cards, so white copy holds over any photo. */
.rolecard::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top,
oklch(0.185 0.016 259 / 0.90) 8%,
oklch(0.185 0.016 259 / 0.62) 46%,
oklch(0.185 0.016 259 / 0.22) 100%);
}
.rolecard-body {
position: absolute; inset-inline: 1.1rem; bottom: 1.05rem;
z-index: 1;
}
.rolecard-body h3 {
color: var(--on-dark);
font-size: 1rem; letter-spacing: 0.02em;
margin-bottom: 0.4rem;
display: flex; align-items: baseline; gap: 0.55rem;
}
.rolecard-body h3::before {
content: ""; flex: 0 0 auto;
width: 1.4rem; height: 2px;
background: var(--accent-amber);
transform: translateY(-0.28em);
}
.rolecard-feature .rolecard-body h3 { font-size: 1.3rem; }
.rolecard-body p {
color: oklch(1 0 0 / 0.88);
font-size: 0.84rem; line-height: 1.5;
margin: 0; max-width: 46ch;
}
.rolecard-feature .rolecard-body p { font-size: 0.92rem; }
@media (max-width: 900px) {
.rolecards { grid-template-columns: 1fr; }
.rolecard-feature { min-height: clamp(280px, 46vw, 380px); }
.rolecard-stack { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
.rolecard-stack { grid-template-columns: 1fr; }
.rolecard { min-height: 180px; }
}
/* --- p9-10 · Trending as three cards of equal weight --------------------- */
/* The block is the site's rail component: it scrolls, and main.js reveals the
arrows on its own as soon as the track overflows (and hides them when it
does not). So the two modes come from one piece of markup.
Wide enough for three: a plain three-track grid, nothing to scroll, arrows
stay hidden — with only three cards, everything is already on screen and a
carousel there would just be two dead buttons.
Narrower: the rail takes over, fixed track widths so the next card peeks
and the row genuinely overflows. Never two columns, which is what left one
card orphaned on its own row. */
.ideagrid {
grid-auto-columns: clamp(16rem, 74vw, 22rem);
gap: clamp(1rem, 2vw, 1.6rem);
}
/* Home runs this grid inside a rail on small screens. The standalone
listings do not, so they get real columns at every width. */
.ideagrid:not(.rail-track) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
@media (min-width: 1100px) {
.ideagrid {
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr);
overflow: visible;
}
}
@media (max-width: 1040px) { .ideagrid:not(.rail-track) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ideagrid:not(.rail-track) { grid-template-columns: 1fr; } }
/* The same tall card as "Six ways to meet Peru", but six of them rather than
eight, so three across leaves neither row ragged. align-items:start, not
stretch: a stretched grid item takes its height from the row, and the card's
aspect-ratio would then derive its WIDTH from that height. */
.ideagrid.tall-grid-exp {
align-items: start;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ideagrid.tall-grid-exp > .tall-card-wide { aspect-ratio: 4 / 5.2; }
@media (max-width: 1040px) { .ideagrid.tall-grid-exp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ideagrid.tall-grid-exp { grid-template-columns: 1fr; } }
/* Eight cards want four across, and the wider container the six used to
have: inside the 1200px cap they came out too small for the photographs.
Carries the same :not() as the rule above it, or that one's extra class
outweighs this and the grid silently stays at three. */
.ideagrid-4:not(.rail-track) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wrap:has(> .ideagrid-4) { max-width: 1600px; }
@media (max-width: 1280px) { .ideagrid-4:not(.rail-track) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1040px) { .ideagrid-4:not(.rail-track) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ideagrid-4:not(.rail-track) { grid-template-columns: 1fr; } }
/* --- CTA rows introduced by the deck ------------------------------------ */
.final-cta-actions, .guides-more-actions {
display: flex; flex-wrap: wrap; gap: 0.75rem;
margin-bottom: 0.9rem;
}
.guides-more-actions { justify-content: center; }
/* --- p4 · the deck lists the trip length as its own line, between the tag
and the title, so it stops being glued onto the meta line. --- */
.tall-card-days {
display: block;
font: 600 0.72rem/1 var(--font-body);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--on-dark);
/* Top corner, out of the stack at the foot of the card: it is the one fact
you scan a row of these for. Its own scrim, because the gradient below
only darkens the bottom. */
position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
margin: 0;
padding: 0.32rem 0.55rem;
background: oklch(0.185 0.016 259 / 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--radius-btn);
}
/* --- p12 · the CTA that closes the value block --- */
/* ========================================================================
Deck de septiembre — Tailor made · About us · Contact us · Responsible
======================================================================== */
/* --- The four facts under the hero copy. TAILOR MADE p2 sets them as a row
of pairs, the label above and the qualifier below. .stats-row is the same
idea but sized for a figure — "Cusco-based" at 2.6rem is a headline, not a
fact — so these are their own, smaller and on a dark ground. --- */
.hero-facts {
list-style: none;
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
border-top: 1px solid oklch(1 0 0 / 0.22);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.75rem, 2vw, 2rem);
text-align: left;
}
.hero-facts strong {
display: block;
font-family: var(--font-display);
font-size: clamp(0.95rem, 1.5vw, 1.2rem);
font-weight: 500; letter-spacing: -0.015em;
color: var(--on-dark);
margin-bottom: 0.3rem;
}
.hero-facts span {
display: block;
font-size: 0.76rem; line-height: 1.4;
color: oklch(1 0 0 / 0.76);
}
@media (max-width: 680px) {
/* Four across a phone gives each cell 80px, and "Before and during your
trip" breaks to four lines in it. Two by two instead. */
.hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --- .value-grid is fixed at two columns. Three cards in it leave one alone
on the second row, which reads as a card that failed to load. --- */
.value-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; }
@media (max-width: 860px) { .value-grid-3 { grid-template-columns: 1fr; } }
/* --- "Found a starting point?" — a block that closes a set of cards by
telling you what to do with them, so it is set apart from them rather than
looking like a fifth card. --- */
/* Iba centrado, y centrado es lo que le daba ese aire desordenado: tres lineas
de largos distintos colgando del eje, con la barra del pullquote a un lado
sin nada que la sostenga. Alineado a la izquierda cada linea arranca en el
mismo sitio y el bloque cierra. */
/* --- Traveler stories. Every quote is still a placeholder, and build.py marks
those with data-tbc, so the cards are hidden — and with nothing left to
introduce, the heading goes too. It all returns the moment real quotes
land, with no CSS change. --- */
.quotes-section:not(:has(blockquote:not([data-tbc]))) { display: none; }
.quote-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-card {
margin: 0;
padding: clamp(1.5rem, 2.5vw, 2rem);
background: var(--surface);
border-radius: var(--radius-lg);
}
.quote-card p {
font-family: var(--font-display);
font-size: clamp(1rem, 1.4vw, 1.15rem);
line-height: 1.55; font-weight: 400;
color: var(--ink);
}
.quote-card p::before { content: "\201C"; }
.quote-card p::after { content: "\201D"; }
.quote-card cite {
display: block; margin-top: 1.1rem;
font: 600 0.78rem/1.4 var(--font-body);
font-style: normal;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink-muted);
}
/* --- The two-step form. The bar is the only thing that says how much is
left; without it a "Continue" button is a promise of unknown length. --- */
.formsteps-head { display: grid; gap: 0.6rem; margin-bottom: 0.4rem; }
.formsteps-count {
font: 600 0.72rem/1 var(--font-body);
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-muted);
}
.formsteps-bar {
display: block; height: 3px;
background: var(--line);
border-radius: 100px;
overflow: hidden;
}
.formsteps-fill {
display: block; height: 100%; width: 50%;
background: var(--brand-900);
border-radius: 100px;
transition: width 420ms var(--ease-out-expo);
}
@media (prefers-reduced-motion: reduce) { .formsteps-fill { transition: none; } }
/* A fieldset is a block, and .trip-form's own gap does not reach inside one.
Without this the step's fields sit flush against each other. */
.formstep { display: grid; gap: 1rem; }
.steps-back {
justify-self: center;
background: none; border: none;
padding: 0.4rem;
font: 500 0.82rem/1 var(--font-body);
color: var(--ink-muted);
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.steps-back:hover { color: var(--brand-600); }
}
/* --- The people behind every journey. The deck provides the roles and the
one-line introductions but the names and portraits are still to come, so
build.py marks each card and CSS takes it down. A group heading over an
empty row, or an empty row itself, reads as a page that failed to load —
they come down with the cards and return with them. --- */
.team-group-title {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
font-weight: 500; letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.team-group-title + .team-grid { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.team-grid:not(:has(> :not([data-tbc]))) { display: none; }
/* This was written as :has(+ .team-grid:not(:has(…))) — a :has() inside a
:has(), which CSS does not allow. The whole rule was invalid, the browser
dropped it, and "Our travel team" and "Our guides" stood over nothing.
Stated the other way round it is one level deep and legal: the title is
hidden by default and appears when the grid behind it holds a real card. */
.team-group-title { display: none; }
.team-group-title:has(+ .team-grid > :not([data-tbc])) { display: block; }
/* The deck opens this section on "una fotografía grupal principal", before the
portraits — and Ref 11 hangs a filled block off the picture's corner with
the line that would otherwise float underneath it. */
.planta {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.planta-media { position: relative; margin: 0; }
.planta-media img {
width: 100%;
height: clamp(300px, 38vw, 500px);
object-fit: cover;
border-radius: var(--radius-xl);
}
.planta-note {
background: var(--brand-900);
color: var(--on-dark);
border-radius: var(--radius-xl);
padding: clamp(1.1rem, 2vw, 1.5rem);
font: 500 0.92rem/1.6 var(--font-body);
max-width: 24rem;
margin-top: 1rem;
}
@media (min-width: 900px) {
.planta { grid-template-columns: 1.05fr 0.95fr; }
/* Overhanging, as in the reference. The offset stays inside .wrap's own
gutter — --pad-x is 45px at this width and grows from there — so the
block never reaches the edge of the document. */
.planta-note {
position: absolute;
left: clamp(-1.5rem, -2vw, -1rem);
bottom: clamp(-1.5rem, -2vw, -1rem);
margin-top: 0;
max-width: 20rem;
}
}
.quote-grid-1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
/* Sandra: "no esta alineado a los demas elementos, el texto esta como
centrado pero no contempla el ancho de los demas elementos, eso desentona".
Medido en experiencias: este bloque arrancaba en x=344 y la seccion de
debajo en x=75. La medida corta se queda -- un parrafo de entrada a 900px se
lee mejor que a 1265 -- pero arranca donde arrancan todos los demas, no
centrada en la pagina.
Se mantiene el nombre de la clase para no tocar tres paginas por un
margen. */
/* Estrechar el propio .wrap lo sacaba de su sitio: el contenedor dejaba de
medir lo que miden los demas y su borde izquierdo caia en 64 mientras el
resto de la pagina arranca en 104. Lo que se estrecha ahora es el contenido,
no el contenedor, asi que la medida corta se conserva y el borde es el
mismo de siempre. */
.wrap.u-narrow-c { max-width: var(--wrap-max, 1232px); margin-inline: auto; }
.wrap.u-narrow-c > * { max-width: 900px; }
/* --- A line the deck sets apart from the paragraphs around it: RESPONSIBLE
p5, "The goal is not simply to travel less." --- */
.pullquote {
margin-top: clamp(1.75rem, 3vw, 2.5rem);
padding-left: clamp(1rem, 2vw, 1.5rem);
border-left: 3px solid var(--brand-600);
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.55;
color: var(--ink);
}
/* Same reason as .factlist: a list whose every row is still waiting on the
client keeps its gaps and pushes what follows down for nothing. The
"Where we want to go next" block is held until management confirms it. */
.check-list:not(:has(li:not([data-tbc]))) { display: none; }
/* ========================================================================
Referencias de Sandra — septiembre
Three layouts taken from the references, over sections the decks filled.
The site's own corners are 4-6px; these blocks are the only rounded ones
on it, which is the reference's look and a decision worth confirming
before it spreads to the other twelve pages.
======================================================================== */
:root { --radius-xl: 18px; }
/* --- The icon chip. Ref 1 and Ref 5 both set the glyph in a small tinted
square rather than loose above the title. One definition, both uses. --- */
/* Sandra: "manejas dos estilos de iconos, uno con fondo y el otro sin fondo;
en todo usalo sin fondo". Habia 49 .icon-chip en seis paginas con su caja
gris, y .value-icon sin ella. Manda el desnudo: el mismo tamano, el mismo
trazo y el color de acento de la marca, sin recuadro detras. */
.icon-chip {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
width: 28px; height: 28px;
border-radius: 0;
background: none;
color: var(--accent);
}
.icon-chip svg { width: 26px; height: 26px; }
.quad-card {
background: var(--bg-page);
border-radius: var(--radius-xl);
padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.quad-card h3 {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
font-weight: 500; letter-spacing: -0.02em;
color: var(--ink);
margin: 1.1rem 0 0.5rem;
}
.quad-card p {
font-size: 0.9rem; line-height: 1.6;
color: var(--ink-body);
}
/* --- Ref 5 · photograph one side, the steps stacked as rows --- */
.process-split {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
}
.process-media img {
width: 100%;
height: clamp(320px, 46vw, 560px);
object-fit: cover;
border-radius: var(--radius-xl);
}
.process-body h2 { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.process-steps {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 0.5rem;
}
.process-step {
display: flex;
align-items: flex-start;
gap: clamp(0.9rem, 1.6vw, 1.25rem);
padding: clamp(0.9rem, 1.6vw, 1.25rem);
border-radius: var(--radius-xl);
}
/* The reference marks the row you are on. Nothing here is interactive, so it
marks the one a traveller actually starts at. The reference sets a grey row
on a white page; this section is already tinted, so the row lifts to white
instead — --surface on sand is a difference you have to look for. */
/* Sandra: "ese esta con fondo blanco y el icono azul, dejalo igual que los
demas". El primer paso llevaba un suelo blanco y su icono en azul de
reposo, asi que de tres filas iguales una parecia ya pulsada. Las tres
arrancan iguales; lo unico que las distingue es el naranja del hover. */
.process-step.is-current { background: transparent; }
/* Sin fondo tambien aqui: la fila activa se distingue por su propio suelo,
no por un recuadro tras el icono. */
.process-step.is-current .icon-chip { background: none; color: var(--accent); }
.process-step h3 {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.7vw, 1.35rem);
font-weight: 500; letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 0.35rem;
}
.process-step p {
font-size: 0.92rem; line-height: 1.6;
color: var(--ink-body);
}
@media (min-width: 900px) {
.process-split { grid-template-columns: 0.85fr 1.15fr; }
}
/* --- Ref 2 · the set's own way out sits on the heading line --- */
.section-head-cta {
grid-template-columns: 1fr auto;
/* Con align-items:start el boton se pegaba al techo de la fila y quedaba
entre 29 y 53px por encima del centro de su titular, medido en cinco
cabeceras. Centrado contra el bloque de la izquierda cae en la linea del
titular, que es donde esta el ojo cuando busca la salida del conjunto. */
align-items: center;
}
@media (max-width: 760px) {
.section-head-cta { grid-template-columns: 1fr; }
.section-head-cta .btn { justify-self: start; }
}
/* ========================================================================
Segunda tanda de referencias — la rejilla de tarjetas macizas
Ref 7 ("Por que fazer parte do ecossistema"): a set of value cards as
filled tiles, the icon centred over a centred title and a short line.
These sections were a rule and two lines of text each, which is what
"no tiene ningun estilo" was about.
======================================================================== */
.value-grid {
gap: clamp(0.85rem, 1.6vw, 1.25rem);
max-width: 1100px;
}
.value-grid-3 { max-width: 1200px; }
.value-card {
padding: clamp(1.6rem, 2.8vw, 2.1rem) clamp(1.25rem, 2.2vw, 1.75rem);
text-align: center;
/* The client's own brand navy, filled. On a page of white sections a set of
short value props needs a ground of its own or it reads as loose text. */
background: var(--brand-900);
border-radius: var(--radius-xl);
color: var(--on-dark);
}
.value-card .value-icon {
margin-inline: auto;
/* 7.35:1 on this navy — the palette's one accent that works on dark. */
color: var(--brand-200);
}
.value-card h3 { color: var(--on-dark); }
.value-card p { color: var(--on-dark-body); font-size: 0.9rem; }
/* --- The commitments. Deck, ABOUT US p7 lists five; they were bullets under
a bare h3, with the section's CTA loose beneath them. A panel, the row
shape the process steps already use, and the CTA on the panel's own
heading line, as Ref 2 does with a set's way out. --- */
.commit-panel {
margin-top: clamp(2rem, 4vw, 3rem);
padding: clamp(1.5rem, 3vw, 2.5rem);
background: var(--surface);
border-radius: var(--radius-xl);
}
.commit-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.commit-head h3 {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2vw, 1.55rem);
font-weight: 500; letter-spacing: -0.02em;
color: var(--ink);
}
.commit-list {
list-style: none; margin: 0; padding: 0;
display: grid; gap: clamp(0.6rem, 1.2vw, 0.9rem);
}
.commit-list li {
display: flex; align-items: flex-start;
gap: clamp(0.85rem, 1.5vw, 1.15rem);
padding: clamp(0.85rem, 1.5vw, 1.15rem);
background: var(--bg-page);
border-radius: var(--radius-xl);
}
.commit-list .icon-chip { background: none; }
.commit-list h4 {
font: 600 0.98rem/1.35 var(--font-body);
color: var(--ink);
margin-bottom: 0.3rem;
}
.commit-list p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-body); }
@media (max-width: 760px) {
.commit-head { grid-template-columns: 1fr; }
.commit-head .btn { justify-self: start; }
}
/* ========================================================================
La placa de credenciales · y UN estándar de hover para todo
======================================================================== */
/* ========================================================================
Hover — un solo estándar
Sandra: "en algunas piezas se pinta todo el contenedor y en otras solo el
icono, eso no sigue reglas UX." It did not. This is the rule, and every
block on the site that is not a link now follows it:
the block's own ground moves one step, AND its icon moves with it.
Never the icon on its own, never the block on its own, never a lift —
a block that rises under the cursor promises a click it has not got.
Two grounds, so two steps. The grounds stay in the cool system — no warm
background anywhere, on any page. The warmth is carried by the marks
instead: the icon on a filled tile rests gold and goes amber, which is the
same amber the trip tags already use.
on a light ground block -> --brand-050, chip -> --bg-page, glyph -> --brand-600
on the filled navy block -> --brand-700, icon -> --accent-amber
Links and buttons keep the idiom they already had: buttons pop, cards that
are anchors lift. One duration for all of it.
======================================================================== */
:root { --t-hover: 260ms; }
.process-title em,
.process-step, .process-step .icon-chip,
.commit-list li, .commit-list li .icon-chip,
.quad-card, .quad-card .icon-chip,
.value-card, .value-card .value-icon,
.icon-chip {
transition: background-color var(--t-hover) var(--ease-out-expo),
color var(--t-hover) var(--ease-out-expo);
}
/* The icon on a filled tile is warm, not celeste. The palette's cool half was
doing all the work and the page had gone cold with it. */
.value-card .value-icon { color: var(--accent-soft); }
.process-title em { color: var(--ink); }
.process-title em:first-child { color: var(--brand-600); }
/* El estandar de hover vive al final de la hoja, no aqui: hay reglas de
color de reposo declaradas mas abajo que pesan lo mismo que el y le
ganaban por orden -- la linea de datos de la tarjeta se quedaba azul
sobre el naranja. Buscar "Estandar de hover" al final del archivo. */
@media (prefers-reduced-motion: reduce) {
.process-title em, .process-step, .process-step .icon-chip,
.commit-list li, .quad-card, .value-card, .value-card .value-icon,
.icon-chip { transition: none; }
}
/* --- A quality foundation: photograph and a timeline down the side ------
It had been a filled navy panel with nothing to look at in it. The block
takes the photograph its own closing sentence already names — the
sanctuary — and the progression the deck asks for runs down the other
side as a real timeline. Light ground, no panel. --- */
.quality-split {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
@media (min-width: 900px) {
.quality-split { grid-template-columns: 0.92fr 1.08fr; }
}
.quality-media { margin: 0; }
.quality-media img {
width: 100%;
height: clamp(300px, 40vw, 520px);
object-fit: cover;
border-radius: var(--radius-xl);
}
.quality-media figcaption {
margin-top: 1.1rem;
max-width: 54ch;
font-size: 0.86rem; line-height: 1.65;
color: var(--ink-muted);
}
.track {
list-style: none; margin: 0; padding: 0;
display: grid; gap: clamp(1.6rem, 3vw, 2.4rem);
}
.track li { position: relative; padding-left: 2.4rem; }
/* The dot sits on the line and punches a hole in it with a ring of the
page's own ground, so the rule appears to run behind rather than through. */
.track li::before {
content: "";
position: absolute; left: 0; top: 0.34rem;
width: 13px; height: 13px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--bg-page);
z-index: 1;
}
.track li::after {
content: "";
position: absolute; left: 6px; top: 0.34rem;
bottom: calc(-1 * clamp(1.6rem, 3vw, 2.4rem));
width: 1px;
background: var(--line);
}
.track li:last-child::after { content: none; }
.track strong {
display: block;
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.5vw, 1.28rem);
font-weight: 500; letter-spacing: -0.02em;
color: var(--ink);
}
.track > li > span {
display: block; margin-top: 0.25rem;
font: 600 0.68rem/1 var(--font-body);
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--accent);
}
.track p {
margin-top: 0.65rem;
font-size: 0.93rem; line-height: 1.65;
color: var(--ink-body);
}
/* --- La tarjeta, como la usa CONTACT US: a lead under the heading and
a way out at the foot of every card. Ref 1 has both; About us had neither,
because those four cards describe how we work and have nowhere to go. --- */
.quad-lead {
margin-top: 1rem;
max-width: 44ch;
font-size: 0.98rem; line-height: 1.7;
color: oklch(1 0 0 / 0.86);
}
.quad-card { display: flex; flex-direction: column; }
.quad-card p { flex: 1 1 auto; }
.quad-cue {
display: inline-flex; align-items: center; gap: 0.5rem;
margin-top: 1.1rem;
font: 600 0.78rem/1.3 var(--font-body);
color: var(--brand-600);
text-decoration: none;
word-break: break-word;
}
.quad-cue::after {
content: "";
width: 14px; height: 8px; flex: 0 0 auto;
background: currentColor;
clip-path: polygon(0 42%, 62% 42%, 62% 0, 100% 50%, 62% 100%, 62% 58%, 0 58%);
transition: transform var(--t-hover) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
.quad-cue:hover { text-decoration: underline; }
.quad-card:hover .quad-cue::after { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .quad-cue::after { transition: none; } }
/* --- A destination card with no photograph yet. Deck, DESTINATIONS: six in
two rows of three, and "no publicar páginas thin content solo para
completar la cuadrícula" — so Arequipa and Lima keep their place in the
grid at the same ratio and corners, on a brand ground, rather than
borrowing someone else's picture. --- */
.tall-card-bare { background: var(--brand-050); }
.tall-card-bare::after { content: none; }
/* It keeps the photograph card's ratio, so the row is one set of six rather
than four cards and two stubs -- measured, the alternative came out 102px
tall against 442. The name sits in the middle of its own panel instead of
at the foot of a picture it does not have. */
.tall-card-bare .tall-card-body {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: flex-start; justify-content: center;
padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.tall-card-bare h3 { color: var(--ink); }
.tall-card-bare .tall-card-cue { color: var(--ink); border-color: var(--line); }
@media (hover: hover) and (pointer: fine) {
.tall-card-bare:hover { background: var(--brand-150); }
}
/* ========================================================================
Itinerarios — una sola estructura para todos
Sandra, sobre el día a día y el bloque de incluidos: "lo menciono para que
la estructura sea la misma en todos los itinerarios". Un programa de once
días y uno de uno escriben el mismo marcado; lo que cambia es lo que hay
dentro, y el CSS decide la forma. Nadie tiene que elegir una variante.
· un día con fotos abre una segunda columna; sin fotos, el párrafo
ocupa la fila entera y no queda hueco
· una foto se ve sola, varias se convierten en carrusel — el mismo
marcado, porque las flechas solo aparecen si hay a dónde ir
· "What's included" con títulos de grupo se reparte en columnas; sin
títulos, el titular se pone al lado y los items a su derecha
======================================================================== */
/* ---------- El día, y las fotos a su lado ----------
Sandra marcó en verde la mitad derecha vacía: el texto usaba 70ch de una
fila de 1.200px y el resto era blanco. El cuerpo es una rejilla de dos
columnas, pero solo cuando el día trae media — así un día sin fotografías
sigue leyéndose como un párrafo a todo el ancho y no hay que escribirlo
de otra manera. */
@media (min-width: 860px) {
.routeday-body:has(.routeday-media) {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.75rem);
align-items: start;
}
/* La columna ya limita la medida; el tope de 70ch encogía el texto una
segunda vez y dejaba una franja muerta dentro de su propia columna. */
.routeday-body:has(.routeday-media) .routeday-copy > p { max-width: none; }
.routeday-body:has(.routeday-media) .day-facts { margin-top: 1.1rem; }
}
.routeday-media { margin-top: 1.25rem; }
@media (min-width: 860px) { .routeday-media { margin-top: 0; } }
.routeday-rail .rail-track {
/* Una foto por vista, no la que asoma: aquí el carrusel es del día, no de
la página, y media fotografía cortada al borde de un acordeón se lee
como un fallo de maquetación. */
grid-auto-columns: 100%;
gap: 0.75rem;
scroll-padding-left: 0;
padding-bottom: 0;
}
.routeday-shot { margin: 0; }
.routeday-shot img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: var(--radius-lg);
background: var(--brand-050);
}
.routeday-shot figcaption {
margin-top: 0.6rem;
font: 400 0.78rem/1.5 var(--font-body);
color: var(--ink-secondary);
}
/* El script esconde la fila entera cuando no hay scroll, así que un día de
una sola foto no paga el alto de unas flechas que no hacen nada. */
.routeday-rail .rail-nav { margin-top: 0.85rem; }
.routeday-rail .rail-btn { width: 36px; height: 36px; }
.routeday-rail .rail-btn svg { width: 17px; height: 17px; }
/* ---------- Incluye / no incluye, con o sin títulos de grupo ----------
Sandra: "en algunos itinerarios/programas no habrá título '2' y solo
serían los item '3'". Los dos casos se escriben igual —
— y el bloque cambia de forma según haya o no . */
/* Con títulos: la línea no se estira hasta los 600px que le tocarían con dos
grupos en una fila de 1.200. */
.inc-group:has(h3) .check-list { max-width: 42ch; }
/* Grupos mezclados, unos con nombre y otros sin él: el hueco del título se
reserva para que las listas arranquen a la misma altura en toda la fila.
0,66rem de texto a 1,4 de interlínea más 0,6rem de margen, que es
exactamente lo que ocupa un .inc-group h3. */
.inc-groups:has(h3) .inc-group:not(:has(h3))::before {
content: "";
display: block;
height: 1.52rem;
}
/* Sin ningún título: un día suelto con tres líneas dejaba el titular de pie
sobre una columna delgada y mucho azul vacío. El bloque gira — titular a
la izquierda, items a la derecha en dos columnas — que es la forma que ya
tenía "Not included" justo debajo. La banda queda del mismo alto por los
dos lados, la escriba quien la escriba. */
@media (min-width: 820px) {
.incblock:not(.incblock-not):not(:has(.inc-group h3)) {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
gap: clamp(1rem, 2.5vw, 2.25rem);
align-items: start;
}
.incblock:not(.incblock-not):not(:has(.inc-group h3)) > h2 { margin-bottom: 0; }
.incblock:not(.incblock-not):not(:has(.inc-group h3))
.inc-groups:has(.inc-group:only-child) .check-list {
columns: 2;
column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
.incblock:not(.incblock-not):not(:has(.inc-group h3)) .check-list li { break-inside: avoid; }
}
/* ---------- Travel guides relacionadas ----------
Documento Machu Picchu, §11: cuatro artículos elegidos a mano, con
categoría, título, descripción y fecha de última revisión. Cuatro, no tres
como en el índice del blog — y por debajo de 1.040 vuelven a los dos y al
uno que ya usaba .guides, para no abrir un tercer juego de reglas. */
.guides-related { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .guides-related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .guides-related { grid-template-columns: 1fr; } }
/* La fecha va donde el documento la pide, al pie de la tarjeta, en la misma
línea de base que el "Read the guide". Mientras Enrique no mande las
fechas reales el marcador la deja fuera de la página, no la inventa. */
.guide-card-rev {
margin-top: 0.75rem;
font: 400 0.72rem/1.5 var(--font-body);
color: var(--ink-muted);
}
/* ========================================================================
Machu Picchu — las piezas nuevas del documento de destino
Cuatro reglas pequeñas, ninguna componente nueva: la línea de duración y
exigencia sobre las tarjetas de "ways to visit", la lista con etiqueta
dentro de los tabs, la nota de temporada y la fecha de revisión que el
documento exige en el módulo de circuitos.
======================================================================== */
/* Documento, §3: "Incluir duración, exigencia física, forma de llegada y una
sola línea descriptiva." Los tres primeros son una sola línea sobre la
descripción, no tres etiquetas: leídos de un vistazo antes del párrafo.
Va con la clase de la tarjeta delante a propósito. .quad-card p pesa
una clase y un elemento, así que le gana a .quad-meta a secas por
especificidad y no por orden: sin esto la línea salía a 14,4px en gris de
cuerpo. Y ese mismo selector le da flex:1 1 auto a todos los de la
tarjeta, que estiraría esta línea como si fuese la descripción. */
.quad-card .quad-meta {
flex: none;
margin-bottom: 0.55rem;
font: 500 0.72rem/1.5 var(--font-body);
letter-spacing: 0.04em;
/* --brand-400 es el celeste: 4,3:1 sobre el fondo claro de la tarjeta, por
debajo del mínimo para un texto de este tamaño. --brand-600 es el azul de
enlace y pasa de sobra. */
color: var(--brand-600);
}
/* Las viñetas de los seis tabs. Casi todas del documento vienen como
"Etiqueta: texto", así que el hace de clave y el resto corre
detrás; las que no la llevan se leen igual. */
.tab-points {
margin: 1rem 0 0;
padding-left: 1.15rem;
display: grid;
gap: 0.6rem;
font-size: 0.92rem;
line-height: 1.65;
color: var(--ink-body);
max-width: 68ch;
}
.tab-points li::marker { color: var(--brand-400); }
.tab-points strong { color: var(--ink); font-weight: 600; }
.tabpanel-body .tab-points + .link-arrow { margin-top: 1.25rem; display: inline-flex; }
/* "Important distinction" del documento: el sitio abre todo el año, la red de
Caminos Inka cierra en febrero. Es una salvedad, no una viñeta más, así que
se separa del resto con su propio filete. */
.tab-note {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
font-size: 0.88rem;
line-height: 1.65;
color: var(--ink-secondary);
max-width: 68ch;
}
.tab-note strong { color: var(--ink); }
.tab-pending { margin-top: 1.1rem; }
/* Documento, §6, "Dynamic information": el módulo de circuitos tiene que
mostrar la fecha en que se revisó y enlazar a la información oficial. Las
dos van marcadas mientras no lleguen, así que esta regla solo se ve el día
que existan. */
.reviewed {
margin-top: 0.9rem;
font: 400 0.78rem/1.6 var(--font-body);
color: var(--ink-muted);
}
/* La barra de datos nació con cuatro columnas fijas. "At a glance" del
documento de Machu Picchu trae cinco datos, y el quinto se quedaba solo en
una segunda fila con su filete colgando. Se cuentan los items en vez de
pedir una clase nueva, así que cualquier destino que mande cinco datos cae
de pie sin tocar el marcado. Por debajo de 900 la barra ya es de dos
columnas y ahí 2+2+1 se lee como una lista, no como una fila rota. */
@media (min-width: 901px) {
.fact-bar:has(li:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
}
/* ========================================================================
Carruseles: el mismo comportamiento en todo el sitio
Sandra: "todos los carruseles deben ser automaticos y tmb con flechitas",
"los carruseles de todos, de todas las ventanas". Cada .rail lleva ya
data-autoplay y su fila de flechas; el script las ensena solo cuando hay a
donde ir, asi que un carril de una sola foto sigue sin mostrarlas.
======================================================================== */
/* --- La pieza del duo deja de ser una foto vertical suelta ---
Sandra: "podemos hacer la imagen mas rectangular pero horizontal y hacerlo
tipo carrusel". Pasa de un retrato 3/4 a un 3/2 apaisado y de una imagen a
varias. Ya no es un enlace: dentro de un las flechas no se pueden
pulsar sin irse de la pagina, asi que el enlace se queda donde ya estaba,
en la columna de texto. */
/* align-self: start, no center: era lo que dejaba el carrusel 197px por
encima del texto en la portada. */
.duo-rail { display: block; align-self: start; width: 100%; }
.duo-rail .rail-track {
grid-auto-columns: 100%;
gap: 0.6rem;
scroll-padding-left: 0;
padding-bottom: 0;
border-radius: var(--radius-lg);
}
.duo-rail .rail-track img {
width: 100%; height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: var(--radius-lg);
background: var(--brand-050);
}
.duo-rail .rail-nav { margin-top: 0.85rem; }
.duo-rail .rail-btn { width: 38px; height: 38px; }
/* Sobre el azul del bloque oscuro las flechas se dibujan al reves. */
.duo-dark .duo-rail .rail-btn {
background: oklch(1 0 0 / 0.12);
border-color: oklch(1 0 0 / 0.28);
color: var(--on-dark);
}
@media (hover: hover) and (pointer: fine) {
.duo-dark .duo-rail .rail-btn:hover {
background: oklch(1 0 0 / 0.2); border-color: oklch(1 0 0 / 0.45);
}
}
/* --- Cuatro tarjetas en una rejilla de tres ---
Sandra: "se ve mal 3 y 1 abajo". .spec-grid son tres columnas fijas, asi que
la cuarta se quedaba sola en una segunda fila con dos huecos al lado. Se
cuentan los items, como en la barra de datos: con cuatro son dos y dos. */
@media (min-width: 760px) {
.spec-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Siete tarjetas en tres columnas vuelven a dejar una sola en la ultima fila,
que es exactamente lo que Sandra marco con las cuatro. Con siete, cuatro
columnas reparten 4+3 y ninguna fila se queda coja. */
@media (min-width: 1040px) {
.spec-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Y tres tarjetas caben en tres columnas mucho antes de los 1040: por debajo
de ahi la rejilla pasaba a dos y dejaba la tercera sola. */
@media (min-width: 760px) {
.spec-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ========================================================================
Ref C — el mosaico bento
La referencia de las tarjetas verdes: una sola rejilla donde conviven
tarjetas macizas y tarjetas-foto, cada una con su icono arriba a la
izquierda y su flecha en circulo arriba a la derecha, y el texto de las
fotograficas apoyado abajo sobre la propia imagen.
Sustituye a la galeria de "una ancha arriba y dos debajo", que ademas
declaraba un `sizes` de 33vw para huecos de 1072 y 640 -- de ahi que se
viera borrosa.
======================================================================== */
.bento {
display: grid;
gap: clamp(0.85rem, 1.6vw, 1.25rem);
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(190px, auto);
}
.bento-tile {
position: relative;
display: flex; flex-direction: column; justify-content: flex-end;
padding: clamp(1.25rem, 2.2vw, 1.75rem);
border-radius: var(--radius-xl);
overflow: hidden;
isolation: isolate;
}
.bento-w2 { grid-column: span 2; }
.bento-h2 { grid-row: span 2; }
/* --- la variante fotografica: la imagen es el fondo, no un hijo mas --- */
.bento-photo > img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
}
/* Un velo que solo pesa en la mitad baja, que es donde cae el texto: asi la
fotografia se ve entera y la frase sigue legible. */
.bento-photo::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top,
oklch(0.215 0.02 259 / 0.82) 0%,
oklch(0.215 0.02 259 / 0.45) 34%,
oklch(0.215 0.02 259 / 0) 66%);
}
.bento-photo, .bento-photo h3, .bento-photo p { color: var(--on-dark); }
.bento-photo p { color: var(--on-dark-body); }
/* --- las macizas --- */
.bento-dark { background: var(--brand-900); color: var(--on-dark); }
.bento-dark h3 { color: var(--on-dark); }
.bento-dark p { color: var(--on-dark-body); }
.bento-light { background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--line-soft); }
.bento-tile h3 {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
font-weight: 430; line-height: 1.25; letter-spacing: -0.01em;
margin-bottom: 0.45rem;
}
.bento-tile p {
font-size: 0.87rem; line-height: 1.55;
color: var(--ink-body);
margin: 0; max-width: 42ch;
}
/* --- el icono arriba a la izquierda y la flecha arriba a la derecha --- */
.bento-mark {
position: absolute; top: clamp(1.1rem, 2vw, 1.5rem); left: clamp(1.1rem, 2vw, 1.5rem);
width: 28px; height: 28px; display: grid; place-items: center;
border-radius: 0;
background: none;
color: var(--on-dark);
}
.bento-light .bento-mark { background: none; color: var(--accent); }
.bento-cue {
position: absolute; top: clamp(1.1rem, 2vw, 1.5rem); right: clamp(1.1rem, 2vw, 1.5rem);
width: 38px; height: 38px; display: grid; place-items: center;
border-radius: 50%;
border: 1px solid oklch(1 0 0 / 0.45);
color: var(--on-dark);
transition: background-color var(--t-hover) var(--ease-out-expo),
border-color var(--t-hover) var(--ease-out-expo),
color var(--t-hover) var(--ease-out-expo);
}
.bento-light .bento-cue { border-color: var(--line); color: var(--brand-600); }
/* El mismo estandar de siempre: la pieza se pinta y su marca se mueve con
ella. Aqui la flecha es la marca. */
@media (hover: hover) and (pointer: fine) {
a.bento-tile:hover .bento-cue,
.bento-tile:hover .bento-cue {
background: var(--accent-amber);
border-color: var(--accent-amber);
color: var(--brand-900);
}
.bento-light:hover { background: var(--brand-150); box-shadow: inset 0 0 0 1px transparent; }
.bento-light:hover .bento-mark { background: var(--accent-amber); color: var(--brand-900); }
}
@media (max-width: 900px) {
.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-w2 { grid-column: span 2; }
.bento-h2 { grid-row: span 1; }
}
@media (max-width: 560px) {
.bento { grid-template-columns: 1fr; }
.bento-w2 { grid-column: span 1; }
}
/* ========================================================================
Ref B — dos paneles y una insignia en la junta
La referencia de la tarjeta de visita: una fotografia muy redondeada a un
lado, un panel macizo al otro, y un circulo montado justo en la costura que
cose los dos. Sirve para una declaracion que necesita peso y no solo
parrafos -- que es lo que le faltaba a "To know Peru is also to care for it".
======================================================================== */
.splitb {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(0.85rem, 1.6vw, 1.25rem);
align-items: stretch;
}
.splitb-media {
border-radius: var(--radius-xl);
overflow: hidden;
min-height: clamp(300px, 38vw, 520px);
}
.splitb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.splitb-panel {
background: var(--brand-900);
color: var(--on-dark);
border-radius: var(--radius-xl);
padding: clamp(1.9rem, 4vw, 3.4rem);
display: flex; flex-direction: column; justify-content: center;
}
.splitb-panel .eyebrow { color: var(--accent-soft); }
.splitb-panel h2 { color: var(--on-dark); margin-bottom: 1.1rem; }
.splitb-panel p { color: var(--on-dark-body); font-size: 0.97rem; line-height: 1.75; max-width: 46ch; }
.splitb-panel p + p { margin-top: 0.9rem; }
/* El circulo se apoya en la costura, mitad sobre la foto y mitad sobre el
panel. Es decorativo: no lleva texto que haga falta leer. */
.splitb-badge {
position: absolute; z-index: 2;
left: 50%; top: 50%; transform: translate(-50%, -50%);
width: clamp(64px, 8vw, 104px); aspect-ratio: 1;
border-radius: 50%;
background: var(--bg-page);
display: grid; place-items: center;
color: var(--brand-700);
box-shadow: 0 2px 18px oklch(0.215 0.02 259 / 0.18);
}
@media (max-width: 900px) {
.splitb { grid-template-columns: 1fr; }
.splitb-media { min-height: clamp(240px, 56vw, 360px); }
/* Apilados, la costura es horizontal: el circulo baja a ella. */
.splitb-badge { top: auto; left: 50%; transform: translate(-50%, -50%); }
}
/* ========================================================================
La foto y el texto de al lado, alineados
Sandra: "alinea la imagen con el texto del costado y eso hazlo en todos los
elementos parecidos de todas las paginas". Medido antes de tocar nada, en
las piezas de dos columnas de cuatro paginas:
.quality-split el pie de la foto caia 179px por debajo del texto
.planta la foto arrancaba 47px mas abajo
.introsplit 30px de desfase
.duo-grid 54px en una, 197px en la otra
La regla: el texto manda la altura de la fila y la fotografia se ajusta a
ella, asi que los dos bordes -- arriba y abajo -- quedan a ras. Un suelo
minimo evita que un texto corto deje la foto convertida en una tira.
Se queda fuera .planta, cuyo desfase es el diseno de la referencia 11: ahi
el bloque cuelga de la esquina de la foto a proposito.
======================================================================== */
.quality-split,
.process-split,
.introsplit,
.splitb { align-items: stretch; }
.quality-media,
.process-media,
.introsplit-media,
.splitb-media {
min-height: clamp(260px, 30vw, 440px);
display: flex; flex-direction: column;
}
.quality-media img,
.process-media img,
.introsplit img,
.splitb-media img {
width: 100%;
height: 100%;
min-height: 0;
/* el aspect-ratio dejaria de mandar la altura y volveria a descuadrar */
aspect-ratio: auto;
object-fit: cover;
}
/* El pie de foto no entra en el reparto: se queda pegado debajo. */
.quality-media figcaption { flex: none; }
/* En el duo, con align-self:start la fotografia se quedaba en su 3/2 -- 366x245
medidos -- dentro de una fila de 750 que marca el texto, y sobraban 500px de
nada a su derecha. Se estira a la fila: el 3/2 pasa a ser el minimo y
object-fit recorta, asi que la foto llena la columna en vez de flotar en
ella. Arriba y abajo quedan a ras. */
.duo-grid { align-items: stretch; }
.duo-grid > .duo-body { align-self: center; }
.duo-grid > .duo-rail { align-self: stretch; display: flex; flex-direction: column; }
/* Cuando el texto es mucho mas alto que el tope de la foto, el sobrante se
reparte arriba y abajo en vez de amontonarse debajo: centrada parece una
decision, pegada arriba con 600px de blanco debajo parece un fallo. */
.duo-rail .rail-track { flex: 1 1 auto; min-height: 0; align-items: center; }
.duo-rail .rail-nav { flex: none; }
/* Estirar sin tope revivia un fallo que ya estaba documentado aqui: con una
columna de texto de 925px la foto salia a 0.55 de proporcion, y a 700px de
ventana a 0.29 -- una tira que parte por la mitad al sujeto de una foto
apaisada. El tope es 3/4: la imagen crece con la fila hasta ahi y no mas.
cqw mide contra el ancho del propio carril, asi que el limite es de
proporcion y no de pixeles. */
.duo-rail { container-type: inline-size; }
.duo-rail .rail-track img {
height: 100%;
min-height: clamp(240px, 30vw, 420px);
max-height: 165cqw;
aspect-ratio: auto;
object-fit: cover;
}
/* Si el navegador no entiende cqw, la foto se queda en su 3/2 de siempre. */
@supports not (max-height: 1cqw) {
.duo-rail .rail-track img { max-height: none; aspect-ratio: 3 / 2; height: auto; }
}
@media (max-width: 900px) {
/* Apiladas ya no hay "al lado" que alinear, y el suelo minimo estorba. */
.quality-media, .process-media, .introsplit-media, .splitb-media { min-height: 0; }
.quality-media img, .process-media img, .introsplit img, .splitb-media img { height: auto; aspect-ratio: 3 / 2; }
}
/* Cinco tarjetas en dos columnas vuelven a dejar una sola abajo. Con tres
columnas salen 3+2 y la fila cierra. */
@media (min-width: 760px) {
.spec-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ========================================================================
Dos formas que no son una tarjeta
Sandra: "esta llena de cuadrados, no puedes organizar diferente la
informacion". Cierto: arreglar "faltan iconos" metiendo todo en tarjetas
dejo seis rejillas seguidas y treinta y seis recuadros iguales. Lo que
faltaba no era otra caja, era otra forma.
======================================================================== */
/* --- Filas: icono, titulo y texto, separadas por un filete y sin suelo ---
Para listas largas de cosas equivalentes. Se leen de corrido, ocupan la
mitad de alto que la misma informacion en tarjetas y no compiten con las
secciones que si son de tarjetas. */
.iconrows {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(2rem, 5vw, 4.5rem);
}
/* Sandra: "el primero muy pegado al texto, y no esta igual que los demas
elementos [...] como que estan redondeados, e incluso los iconos estan muy
pegados a la izquierda". Las tres eran ciertas: la fila no tenia relleno
lateral, asi que el icono salia pegado al borde y el naranja del hover
llegaba a ras; y las esquinas eran rectas mientras el resto del sitio va
redondeado. Ahora la fila tiene relleno por los cuatro lados y el mismo
radio que las tarjetas, y el filete separador se dibuja por dentro para que
no pelee con las esquinas. */
.iconrows > li {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(0.9rem, 1.6vw, 1.25rem);
/* La marca va centrada contra TODO el texto de la fila, no pegada al titulo. */
align-items: center;
padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1rem, 1.8vw, 1.35rem);
border-radius: var(--radius-xl);
}
.iconrows > li::before {
content: "";
position: absolute; top: 0;
left: clamp(1rem, 1.8vw, 1.35rem); right: clamp(1rem, 1.8vw, 1.35rem);
border-top: 1px solid var(--line-soft);
}
/* La primera de cada columna no lleva filete arriba: seria una raya suelta. */
.iconrows > li:nth-child(-n+2)::before { content: none; }
/* Y con la fila pintada, el filete sobra. */
@media (hover: hover) and (pointer: fine) {
.iconrows > li:hover::before { border-color: transparent; }
}
/* La primera fila no arranca pegada al parrafo que la precede. */
.iconrows { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.iconrows h3 {
font-size: clamp(0.98rem, 1.35vw, 1.12rem);
margin-bottom: 0.3rem;
}
.iconrows p { font-size: 0.89rem; line-height: 1.6; color: var(--ink-body); margin: 0; max-width: 46ch; }
.iconrows .icon-chip { margin: 0; }
@media (max-width: 820px) {
.iconrows { grid-template-columns: 1fr; }
.iconrows > li:nth-child(-n+2)::before { content: ""; }
.iconrows > li:first-child::before { content: none; }
}
/* --- Una secuencia en horizontal, con su hilo ---
Para lo que de verdad es un antes, un durante y un despues. Tres momentos
colgados de una linea, no tres cajas apiladas. */
.flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.5rem, 3.5vw, 3rem);
position: relative;
}
.flow-step { position: relative; padding-top: 3.4rem; }
/* El hilo pasa por detras de los numeros y se corta en el ultimo. */
.flow-step::before {
content: "";
position: absolute; top: 1.35rem; left: 2.9rem; right: calc(-1 * clamp(1.5rem, 3.5vw, 3rem));
height: 1px; background: var(--line);
}
.flow-step:last-child::before { content: none; }
.flow-n {
position: absolute; top: 0; left: 0;
width: 2.7rem; height: 2.7rem;
display: grid; place-items: center;
border-radius: 50%;
background: var(--brand-900); color: var(--on-dark);
font: 500 0.82rem/1 var(--font-body);
}
.flow-step > h3 {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
font-weight: 430; letter-spacing: -0.01em;
margin-bottom: 0.9rem;
}
.flow-step .check-list li { font-size: 0.89rem; line-height: 1.6; }
@media (max-width: 900px) {
.flow { grid-template-columns: 1fr; gap: 2rem; }
.flow-step::before { content: none; }
.flow-step { padding-top: 0; padding-left: 3.6rem; }
.flow-n { top: -0.2rem; }
}
/* Variante sin titulo: cuando el documento da una frase y no un epigrafe, no
se le inventa uno. La marca queda alineada con la primera linea. */
.iconrows-plain p { font-size: 0.95rem; line-height: 1.6; color: var(--ink); max-width: 44ch; }
/* Pieza de solo fotografia: el rotulo es el epigrafe del propio texto, sin
parrafo debajo, asi que no hace falta reservarle sitio. */
.bento-photo figcaption { margin: 0; }
.bento-photo figcaption h3 { margin: 0; }
/* Una columna: dentro de la mitad de un duo no caben dos. */
.iconrows-1col { grid-template-columns: 1fr; }
.iconrows-1col > li:nth-child(2)::before { content: ""; }
/* El boton de pausa del carrusel. Va con las flechas, mas discreto que ellas
porque no es la accion principal, pero del mismo tamano para que la fila de
controles no quede coja. */
.rail-pause { margin-right: 0; }
.rail-pause[aria-pressed="true"] {
background: var(--brand-050);
border-color: var(--brand-400);
color: var(--brand-700);
}
/* ========================================================================
La cartilla de conversion, en banda
Sandra: "hay varias de estas cartillas y la verdad estan muy feas [...]
organiza los elementos para que no haya espacios vacios como los que
tenemos ahora". El hueco venia de que el titular y el texto iban a la
izquierda y los botones centrados: entre unos y otros quedaba media caja
sin nada. Con botones, la cartilla se parte en dos columnas -- la
pregunta a un lado, la respuesta al otro -- y se acaba el hueco.
Sin botones sigue siendo una nota de una sola columna.
======================================================================== */
@media (min-width: 760px) {
/* Dos items y no cuatro: el texto entero a un lado, las acciones al otro.
Antes el titular y el parrafo eran items sueltos que caian en filas
distintas, y los botones, al cruzarlas, las estiraban las dos. */
}
/* ========================================================================
Un solo aire entre botones
Sandra: "botones muy juntos". Medidos los ocho contenedores que ponen dos
o mas botones en fila, en nueve paginas: casi todos a 12px, uno a 3 y otro
a 0 -- dos botones pegados sin nada entre ellos. Un boton relleno junto a
otro con borde a 12px se leen como una sola pieza partida.
Un valor para todos, y el mismo tambien cuando se apilan.
======================================================================== */
.header-actions,
.hero-actions,
.guides-more-actions,
.footer-top-actions,
.final-cta-actions,
.experts-actions,
.form-success-actions,
.guides-more,
/* La barra del encabezado es la excepcion con motivo: ahi el espacio es
escaso y los dos botones son la misma accion en dos formas. */
.header-actions { gap: 0.75rem; }
/* Y dos botones no se quedan pegados al texto que los precede. */
/* ========================================================================
La cartilla de conversion, en pequeno
Sandra, senalando el bloque "Go beyond the classic route": "puedes hacer
algo asi pero pequeno, un call to action". Es la misma pieza -- fotografia
a un lado, antetitulo, titular y boton al otro -- a la mitad de alto y sin
el bloque colgado de la esquina, que es lo que la hacia grande.
El suelo palido desaparece: la fotografia ya separa el bloque de lo que
tiene encima, y una banda de color mas era otro corte de pantalla.
======================================================================== */
/* La columna derecha puede llevar mas de un parrafo: cuando los lleva es un
bloque, no un , y sus parrafos necesitan su propio aire. */
.section-head-lead > p { margin: 0; }
.section-head-lead > p + p { margin-top: 0.9rem; }
/* Lista con un icono por linea, sin tarjeta ni filete: para enumeraciones
cortas donde una palomita repetida no significa nada -- cinco oficios no son
cinco cosas marcadas, son cinco cosas distintas. Donde la marca si dice algo
(incluido, no incluido, hazlo antes de viajar) la lista sigue siendo
.check-list. */
.iconlist {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 0.85rem;
}
.iconlist > li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.8rem;
align-items: center;
font-size: 0.95rem; line-height: 1.5;
color: var(--ink-body);
}
.iconlist-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
color: var(--accent);
flex: 0 0 auto;
}
/* ========================================================================
Ref B repartida en cuatro
Sandra: "la quiero como la imagen pero con una en cada esquina, derecha e
izquierda superior e inferior, y en el centro coloca algo, y quita la imagen
de fondo". La tarjeta de visita de la referencia monta el disco en la
costura de dos paneles; aqui hay cuatro, asi que el disco va en el cruce.
======================================================================== */
/* --- Ref 1 · the heading rides the photograph, the cards sit beside it --- */
.showcase {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
isolation: isolate;
}
.showcase-bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: -2;
}
.showcase-scrim {
position: absolute; inset: 0;
z-index: -1;
/* Pesaba a la izquierda, que es donde estaba el titular blanco. Con el
titular arriba y las cuatro tarjetas cubriendo el ancho de abajo, el velo
pasa a caer de arriba abajo. */
background:
linear-gradient(180deg, oklch(0.16 0.014 259 / 0.78) 0%,
oklch(0.16 0.014 259 / 0.5) 46%,
oklch(0.16 0.014 259 / 0.28) 100%);
}
.showcase-inner {
display: grid;
gap: clamp(1.75rem, 3.5vw, 3rem);
padding: clamp(1.5rem, 3.2vw, 2.75rem);
}
.showcase-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
@media (min-width: 900px) {
.showcase-inner { grid-template-columns: 1fr; }
.showcase-copy { max-width: 60ch; }
}
@media (max-width: 1040px) {
.showcase-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
/* Two cards across a phone gives each about 140px, which breaks
"Thoughtfully responsible" over three lines before the text starts. */
.showcase-cards { grid-template-columns: 1fr; }
}
.showcase-lead {
margin-top: 1rem;
max-width: 44ch;
font-size: 0.98rem; line-height: 1.7;
color: oklch(1 0 0 / 0.86);
}
.showcase-copy { align-self: center; }
.showcase-copy h2 { color: var(--on-dark); margin-bottom: 0; }
.showcase-copy h2 em { color: var(--brand-200); }
/* La tarjeta es .quad-card. Aqui cae sobre una fotografia oscura, no sobre el
fondo de pagina, asi que no necesita el filete que la hace existir alli. */
.showcase-cards > .quad-card { box-shadow: none; }
.quad {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.25rem, 3vw, 2.75rem);
}
/* .quad-card ya traia fondo, radio, tipografia y el hover naranja de arriba.
Lo unico que cambia es que antes se recortaba contra una fotografia oscura
y ahora cae sobre el fondo de pagina, que es casi el mismo blanco: sin
filete la tarjeta no existiria. Es lo que le paso a .spec-item. */
.quad-card { box-shadow: inset 0 0 0 1px var(--line-soft); }
/* La esquina que mira al centro se aparta del disco, y solo donde el disco
existe, que es donde hay cuatro cuadrantes. */
@media (min-width: 760px) {
.quad > .quad-card:nth-child(1) { padding-right: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.quad > .quad-card:nth-child(2) { padding-left: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.quad > .quad-card:nth-child(3) { padding-right: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); }
.quad > .quad-card:nth-child(4) { padding-left: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); }
}
/* El disco, igual en los dos sitios: en el cruce de las cuatro esquinas y en
el borde del panel de Travel style.
Sandra: "esas tres lineas en escala no tienen nada que ver, y las letras
alrededor igual". Eran un glifo inventado por mi y un anillo de texto que
repetia los tres niveles escritos justo debajo. Ahora los dos llevan el
logotipo entero -- entero, no la cupula recortada, que se leia como un
trozo.
Blanco detras y no azul: el logotipo tiene cuatro bandas de azul, de claro a
oscuro, y sobre el azul profundo las dos ultimas desaparecen. El aro navy le
da el borde que el blanco no tiene contra una pagina casi del mismo color; el
aro exterior, del color de lo que hay detras, es lo que lo hace parecer
recortado. */
.quad-badge, .levels-seal {
position: absolute; z-index: 2;
aspect-ratio: 1; border-radius: 50%;
background: oklch(1 0 0);
display: grid; place-items: center;
}
.quad-badge img, .levels-seal img { display: block; width: 66%; height: auto; }
.quad-badge {
left: 50%; top: 50%; transform: translate(-50%, -50%);
width: clamp(88px, 9.5vw, 132px);
box-shadow: inset 0 0 0 2px var(--brand-900),
0 0 0 clamp(8px, 1vw, 12px) var(--bg-page);
}
.levels-seal {
left: 50%; top: 0; transform: translate(-50%, -50%);
width: clamp(92px, 10vw, 140px);
box-shadow: inset 0 0 0 2px var(--brand-900),
0 0 0 clamp(9px, 1.1vw, 14px) var(--sand);
}
@media (max-width: 759px) {
/* Apiladas no hay cruce sobre el que apoyarlo. */
.quad { grid-template-columns: 1fr; }
.quad-badge { display: none; }
}
/* ========================================================================
Travel style — Sandra: "usa este estilo"
La referencia es un panel blanco con el disco montado en su borde superior
y tres tarjetas dentro: numero grande arriba, texto abajo, la del medio
rellena. Las tres paginas que llevan .levels -- destino, itinerario e
itinerario-southern-peru -- cambian con esta misma regla.
======================================================================== */
.levels-panel {
position: relative;
background: oklch(1 0 0);
border-radius: clamp(18px, 2.4vw, 32px);
padding: clamp(3rem, 5vw, 4.5rem) clamp(1rem, 2.2vw, 1.75rem) clamp(1rem, 2.2vw, 1.75rem);
margin-top: clamp(46px, 5.5vw, 70px); /* la mitad del disco sobresale */
}
.levels { align-items: stretch; gap: clamp(0.6rem, 1.2vw, 1rem); }
.level-card {
display: flex; flex-direction: column;
background: var(--brand-050);
border: 0;
border-radius: clamp(12px, 1.6vw, 22px);
padding: clamp(1.25rem, 2.4vw, 2rem);
/* El panel ya separa la tarjeta del fondo; el salto al pasar por encima
desentonaba con el resto del sitio, donde nada se mueve. */
transform: none;
}
.level-n {
font-family: var(--font-display);
font-size: clamp(1.9rem, 4vw, 3.25rem);
font-weight: 430; letter-spacing: -0.03em; line-height: 1;
color: var(--brand-700);
margin-bottom: clamp(1.4rem, 3vw, 2.5rem);
}
.level-card.is-featured { background: var(--brand-900); box-shadow: none; }
.level-card.is-featured::before { content: none; }
/* --brand-400 sobre el azul profundo da 2,77:1, por debajo del 3:1 que pide
un numero de este tamano. El celeste de --brand-200 pasa con 6,5:1 y es
el mismo acento que el sitio ya usa sobre fondo oscuro. */
.level-card.is-featured:not(:hover) .level-n { color: var(--brand-200); }
.level-card.is-featured:not(:hover) .level-tag { color: var(--accent-soft); }
.level-card.is-featured:not(:hover) h3 { color: var(--on-dark); }
.level-card.is-featured:not(:hover) li { color: var(--on-dark-body); }
/* Sandra: "no quiero que uses aspas, quiero que uses iconos". Era el caracter
\2713 puesto como texto; pasa a la misma mascara que .check-list, asi el
color lo sigue poniendo el CSS y hereda el blanco del hover. */
.level-card li::before {
content: ""; position: absolute; left: 0; top: 0.3em;
width: 1em; height: 1em;
background-color: var(--accent);
-webkit-mask: var(--mark-check) no-repeat center / contain;
mask: var(--mark-check) no-repeat center / contain;
}
.level-card.is-featured:not(:hover) li::before { background-color: var(--accent-soft); }
/* Las marcas de lista se pintan con background-color sobre una mascara, no
con color, asi que el estandar de hover no las alcanza solo. */
.level-card:hover li::before,
.packpanel-items > li:hover::before { background-color: #fff; }
@media (max-width: 720px) { .level-card { padding-block: clamp(1.1rem, 3vw, 1.5rem); }
.level-n { margin-bottom: 1rem; } }
/* ========================================================================
Estandar de hover — el ultimo bloque de la hoja, a proposito
Todo lo que se pinta al pasar por encima se declara aqui y solo aqui.
Va al final para que gane por orden a cualquier color de reposo de la
misma especificidad, ahora y cuando se anada el siguiente.
======================================================================== */
@media (hover: hover) and (pointer: fine) {
/* The heading follows the pointer down the rows: one phrase per step. */
.process-body:has(.process-step:hover) .process-title em:first-child { color: var(--ink); }
.process-body:has(.process-step:nth-child(1):hover) .process-title em:nth-child(1),
.process-body:has(.process-step:nth-child(2):hover) .process-title em:nth-child(2),
.process-body:has(.process-step:nth-child(3):hover) .process-title em:nth-child(3) {
color: var(--brand-600);
}
/* Light blocks — the same two moves everywhere. The extra selectors on the
process rows are specificity, not decoration: .process-steps
.process-step.is-current outranks a bare :hover and would otherwise keep
the row you are actually on at its resting colour. */
/* Sandra: "quiero que al pasar por encima de cada elemento se pinte de azul o
amarillo o celeste; blanco es muy poco llamativo." Tenia razon: el suelo
pasaba a --brand-050, que esta a 0.96 de luminosidad sobre una pagina que
esta a 0.995 -- un paso de nada que no se veia.
El suelo va ahora al celeste de la paleta y el icono al ambar, que son dos
de los tres colores que pidio. Sigue siendo una sola regla: el bloque se
mueve un paso y su icono se mueve con el. */
/* Sandra, con la referencia del sitio coral: "ese rojo es cuando pasa el
hover, ahi se revientan los colores con el boton o con el icono usado".
Eso es: el color estalla en la MARCA, no en el suelo. Pintar el bloque
entero de celeste era mucho fondo y poca senal.
El suelo apenas se mueve -- lo justo para que se note que la pieza
responde -- y el golpe de color se lo lleva el icono. */
/* Sandra: "cuando pase el mouse quiero que todo se pinte de naranja y las
letras y el icono cambien a blanco". Es una sola regla y se aplica igual a
todas las piezas: la pieza se llena del naranja de la marca y todo lo que
lleva dentro -- titulo, texto, icono, filete -- pasa a blanco.
Blanco sobre ese naranja mide 5.21:1, por encima del minimo para texto
normal, asi que el parrafo se sigue leyendo y no solo el titular. */
.quad-card:hover,
.packpanel-items > li:hover,
.commit-list li:hover,
.process-step:hover,
.spec-item:hover,
.level-card:hover,
.iconrows > li:hover,
.bento-light:hover,
.process-steps:hover .process-step.is-current:hover {
background: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
border-color: transparent;
}
/* Se enumeraban las etiquetas -- h3, p, li -- y el titular de .commit-list
es un h4, asi que se quedaba en negro sobre el naranja. Enumerar etiquetas
es apostar a acertarlas todas; esto cubre lo que haya dentro, ahora y
cuando se anada algo nuevo. */
.quad-card:hover,
.quad-card:hover *,
.packpanel-items > li:hover,
.packpanel-items > li:hover *,
.commit-list li:hover,
.commit-list li:hover *,
.process-step:hover,
.process-step:hover *,
.spec-item:hover,
.spec-item:hover *,
.level-card:hover,
.level-card:hover *,
.iconrows > li:hover,
.iconrows > li:hover *,
.bento-light:hover,
.bento-light:hover *,
.process-steps:hover .process-step.is-current:hover,
.process-steps:hover .process-step.is-current:hover * {
color: #fff;
}
/* El icono va desnudo, asi que lo que se pinta es su trazo. */
.quad-card:hover .icon-chip,
.commit-list li:hover .icon-chip,
.process-step:hover .icon-chip,
.spec-item:hover .icon-chip,
.level-card:hover .icon-chip,
.iconrows > li:hover .icon-chip,
.bento-light:hover .bento-mark,
.process-steps:hover .process-step.is-current:hover .icon-chip {
background: none;
color: #fff;
}
/* El boton no sigue al resto. El estandar pinta de blanco todo lo que hay
dentro, y el de la tarjeta rellena es claro: letra blanca sobre gris claro
sobre naranja no se lee. Se invierte -- blanco con letra negra, 15,6:1 --
y gana por especificidad, que son dos clases y un pseudo contra una clase
y el universal. */
.level-card:hover .level-cta,
.level-card:hover .level-cta * {
background: #fff;
color: var(--ink);
border-color: #fff;
}
/* La palomita verde de las listas tambien, o se queda gritando sobre naranja. */
.spec-item:hover .check-list li::before,
.level-card:hover .check-list li::before { color: #fff; }
/* Sandra: "no vas a pintar el icono amarillo y el fondo celeste". Cierto: dos
colores saturados a la vez se pelean y la pieza queda barata. Manda uno
solo. Si el que se pinta es el suelo, la marca se mueve con el pero se
queda en blanco, que sobre el celeste recorta limpio. El ambar se reserva
para los iconos sobre suelo oscuro, que es donde no compite con nada -- la
regla que ya tenian las piezas macizas. */
/* El filete de la tarjeta desaparece cuando el suelo ya la define. */
/* The resting tint leaves the row it was on as soon as the list is entered. */
.process-steps:hover .process-step.is-current { background: transparent; }
.process-steps:hover .process-step.is-current .icon-chip { background: none; }
/* Filled tiles deepen within their own hue — a shade, not a repaint. */
.value-card:hover { background: var(--brand-700); }
.value-card:hover .value-icon { color: var(--accent-amber); }
}
/* La unica frase de la seccion que no es una opcion sino una regla. En una
seccion clara, la unica pieza oscura es la que se lee primero. */
.ruleband {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(1rem, 2vw, 1.5rem);
align-items: center;
/* Sandra: "estan muy pegados". Solo tenia margen arriba, asi que el
carrusel de viajes que viene detras le quedaba pegado al canto. */
margin-block: clamp(2rem, 4vw, 3.25rem);
padding: clamp(1.5rem, 2.8vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
background: var(--brand-900);
border-radius: var(--radius-xl);
}
.ruleband .icon-chip { color: var(--accent-soft); margin: 0; }
.ruleband h3 {
font: 430 clamp(1.1rem, 1.7vw, 1.4rem)/1.25 var(--font-display);
letter-spacing: -0.02em;
color: var(--on-dark);
margin: 0 0 0.4rem;
}
.ruleband p {
font-size: 0.95rem; line-height: 1.7;
color: var(--on-dark-body);
margin: 0; max-width: 78ch;
}
.ruleband strong { color: var(--on-dark); font-weight: 600; }
@media (max-width: 620px) {
.ruleband { grid-template-columns: 1fr; gap: 0.9rem; }
}
/* ========================================================================
El precio, en la misma banda que cierra Journey ideas
Sandra: "donde va el precio no sigue el diseno que estamos manejando". Era
un panel gris con degradado, filete rosado, dos sombras y todo centrado --
nada de eso se usa ya en ninguna otra parte del sitio. Icono, cifra y boton
en una fila, que es ademas el orden en que se leen.
======================================================================== */
.price-banner {
margin-top: clamp(2rem, 4vw, 3.25rem);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: clamp(1rem, 2.4vw, 2rem);
align-items: center;
padding: clamp(1.5rem, 2.8vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
background: var(--brand-900);
border-radius: var(--radius-xl);
}
.price-banner .icon-chip { color: var(--accent-soft); margin: 0; }
.price-label {
display: block;
font: 600 0.72rem/1 var(--font-body);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent-soft);
margin-bottom: 0.5rem;
}
.price-amount {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3.2vw, 2.4rem);
font-weight: 430; line-height: 1.05; letter-spacing: -0.02em;
color: var(--on-dark);
margin: 0 0 0.45rem;
}
.price-per {
font-family: var(--font-body);
font-size: 0.9rem; font-weight: 400; letter-spacing: 0;
color: var(--on-dark-muted);
}
.price-conditions {
font-size: 0.85rem; line-height: 1.65;
color: var(--on-dark-body);
margin: 0; max-width: 62ch;
}
.price-banner .btn { white-space: nowrap; }
@media (max-width: 860px) {
.price-banner { grid-template-columns: 1fr; gap: 1.1rem; justify-items: start; }
}
/* La banda celeste titula con h2 en unas paginas y con h3 en otras -- donde
viene de un callout, la seccion ya tiene su h2 y bajar el nivel romperia el
orden del documento. La forma es la misma; solo cambia la etiqueta. */
.experts h3 {
color: var(--brand-950);
font-family: var(--font-display);
font-size: clamp(1.55rem, 2.9vw, 2.2rem);
font-weight: 430;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 0.6rem;
}
.experts .reviewed { color: var(--brand-900); }
.experts > div:not([class]) { min-width: 0; }
/* ========================================================================
.splitb con contenido a los dos lados
Sandra: "en un lado va una informacion y en la otra la otra info". En
responsable la izquierda es una fotografia; aqui las dos llevan filas, asi
que el lado claro necesita la forma de tarjeta que la fotografia le daba.
======================================================================== */
.splitb-side {
background: var(--bg-page);
border-radius: var(--radius-xl);
box-shadow: inset 0 0 0 1px var(--line-soft);
padding: clamp(1.9rem, 4vw, 3.4rem);
display: flex; flex-direction: column; justify-content: center;
}
/* .splitb-panel p pesa una clase y un elemento, asi que le gana a .eyebrow a
secas: el antetitulo del panel oscuro salia a 15,5px contra los 10,9px de
todos los demas de la pagina. */
.splitb-side > .eyebrow, .splitb-duo .splitb-panel > .eyebrow {
font: 500 0.68rem/1.4 var(--font-body);
letter-spacing: 0.14em; text-transform: uppercase;
margin-bottom: 0.35rem; max-width: none;
}
/* El disco mide 132px y la junta 20: entra 56px en cada panel, asi que la cara
que mira al centro se aparta algo mas. */
@media (min-width: 760px) {
.splitb-duo > .splitb-side { padding-right: clamp(3.5rem, 6.5vw, 5.5rem); }
.splitb-duo > .splitb-panel { padding-left: clamp(3.5rem, 6.5vw, 5.5rem); }
}
/* El aro del disco toma el color de la seccion, que aqui es la arena. */
.quad-badge-sand {
box-shadow: inset 0 0 0 2px var(--brand-900),
0 0 0 clamp(8px, 1vw, 12px) var(--sand);
}
/* Las filas dentro del panel oscuro. */
.splitb-panel .iconrows h3 { color: var(--on-dark); }
.splitb-panel .iconrows p { color: var(--on-dark-body); }
.splitb-panel .iconrows .icon-chip { color: var(--accent-soft); }
.splitb-panel .iconrows > li::before { border-top-color: oklch(1 0 0 / 0.16); }
@media (max-width: 759px) {
.splitb-duo > .quad-badge { display: none; }
}
/* La letra pequena de la banda: dentro de la copia, no colgando debajo. */
.experts-micro {
margin: 0.85rem 0 0;
font-size: 0.8rem; line-height: 1.5;
color: var(--brand-900);
opacity: 0.75;
}
/* ========================================================================
What to pack — paneles largos, uno por grupo
Enrique: "cambiar este formato por modales largos como estos ejemplos; la
cantidad puede cambiar segun los dias del itinerario". Sus dos ejemplos: un
panel ancho por grupo y, dentro, cada elemento en su cajita con el nombre en
negrita y el motivo debajo. Apilados caben dos, cuatro o seis grupos sin
tocar nada; la rejilla de 2x2 solo funcionaba con cuatro exactos.
======================================================================== */
.packpanels { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); }
.packpanel {
background: var(--surface);
border-radius: var(--radius-xl);
padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.packpanel-head {
display: flex; align-items: center; gap: 0.75rem;
margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem);
}
.packpanel-ic { flex: none; width: 26px; height: 26px; color: var(--accent); }
.packpanel-ic svg { display: block; width: 100%; height: 100%; }
.packpanel-head h3 {
margin: 0;
font: 500 clamp(1.1rem, 1.6vw, 1.3rem)/1.25 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink);
}
.packpanel-items {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
gap: clamp(0.55rem, 1vw, 0.75rem);
}
.packpanel-items > li {
position: relative;
padding: 0.85rem 1rem 0.85rem 2.6rem;
background: var(--bg-page);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--line-soft);
transition: background-color var(--t-hover) var(--ease-out-expo),
box-shadow var(--t-hover) var(--ease-out-expo);
}
/* La marca: la misma mascara que .check-list, asi el color lo pone el CSS y
hereda el blanco del hover. */
.packpanel-items > li::before {
content: "";
position: absolute; left: 1rem; top: 0.95rem;
width: 1rem; height: 1rem;
background-color: var(--accent);
-webkit-mask: var(--mark-check) no-repeat center / contain;
mask: var(--mark-check) no-repeat center / contain;
}
.packpanel-items strong {
display: block;
font-weight: 600; font-size: 0.92rem; line-height: 1.4;
color: var(--ink);
}
.packpanel-items span {
display: block; margin-top: 0.2rem;
font-size: 0.82rem; line-height: 1.5;
color: var(--ink-body);
}
/* ========================================================================
Travel style: el pie de cada tarjeta — precio orientativo y boton
Enrique: "poner precios y CTA". El precio no tiene fuente todavia y va con
el marcador del proyecto, que build.py oculta; el boton va visible. Empujado
al fondo, los tres botones quedan en la misma linea aunque las listas no
midan lo mismo.
======================================================================== */
.level-foot {
margin-top: auto;
padding-top: clamp(1.1rem, 2vw, 1.5rem);
display: grid; gap: 0.75rem;
/* Sandra: "centra el precio". La cifra, su leyenda y el boton como un solo
bloque centrado; centrar solo la cifra los dejaria descuadrados entre si. */
justify-items: center; text-align: center;
}
/* Como en la referencia que marco Enrique: la cifra grande y en color, la
leyenda pequena debajo, y el boton a su ancho, no estirado. */
.level-price {
margin: 0;
font: 500 clamp(1.6rem, 2.8vw, 2.1rem)/1.05 var(--font-display);
letter-spacing: -0.02em;
color: var(--accent);
}
.level-price-note {
display: block; margin-top: 0.35rem;
font: 400 0.78rem/1.4 var(--font-body);
letter-spacing: 0;
color: var(--ink-body);
}
/* --accent sobre el azul profundo mide ~2,6:1; --accent-soft pasa con 5,2. */
.level-card.is-featured:not(:hover) .level-price { color: var(--accent-soft); }
.level-card.is-featured:not(:hover) .level-price-note { color: var(--on-dark-body); }
.level-cta { width: auto; white-space: nowrap; }
/* La flecha del boton, como en la referencia de Enrique ("Quiero viajar →").
Misma punta que ya usa .quad-cue, para no dibujar una segunda. */
.level-cta { display: inline-flex; align-items: center; gap: 0.6rem; }
.level-cta::after {
content: "";
width: 14px; height: 8px; flex: 0 0 auto;
background: currentColor;
clip-path: polygon(0 42%, 62% 42%, 62% 0, 100% 50%, 62% 100%, 62% 58%, 0 58%);
transition: transform var(--t-hover) var(--ease-out-expo);
}
.level-card:hover .level-cta::after { transform: translateX(3px); }
/* La condicion que quedaba en la banda de precio: sin cifras, y ahora debajo
de las tres tarjetas, que es donde estan los precios. */
.levels-note {
margin: clamp(1rem, 2vw, 1.4rem) auto 0;
max-width: 62ch;
text-align: center;
}
/* El pie del bloque Responsible travel. Sandra: "el CTA no esta alineado" y
"poner [la lista] en una sola linea, en bold".
Los dos colgaban en el borde de la columna mientras el contenido de las
filas de encima arranca en el relleno de su tarjeta. Van a ese mismo borde,
y envueltos para que se muevan juntos: si uno se sangra y el otro no, quedan
descuadrados entre ellos. */
.duo-foot {
padding-left: clamp(1rem, 1.8vw, 1.35rem);
margin-top: clamp(1.1rem, 2vw, 1.6rem);
display: grid; justify-items: start;
gap: clamp(0.7rem, 1.2vw, 1rem);
}
.duo-foot .responsible-micro {
margin: 0;
font-size: 0.79rem;
font-weight: 600;
/* Heredaba 52ch de la regla que comparte con otros cuatro textos pequenos:
328px para una linea que mide 377, asi que con el tope no cabria nunca. */
max-width: none;
white-space: nowrap;
}
@media (max-width: 880px) {
/* Por debajo de aqui la columna no da los 377px; partirse es mejor que
desbordar. */
.duo-foot .responsible-micro { white-space: normal; max-width: 52ch; }
}
/* El enlace ya no necesita su margen: dentro de .duo-foot el hueco lo pone el
contenedor, y sumados daban 48px donde se piden 16. */
.duo-foot .link-arrow { margin-top: 0; }
/* ========================================================================
"Planning a tailor-made journey" — los cuatro apuntes de Sandra
======================================================================== */
/* 1. La entradilla se veia muy arriba: centrada contra el titular, su primera
linea empieza por encima de la de el. Se apoya en la base. Solo en este
bloque; los demas section-head se quedan centrados. */
.how .section-head { align-items: end; }
/* 2. "Esta muy largo de ancho, o sea alinealo al title": el parrafo corria los
325px de la columna entera. Se recoge a 28 caracteres, que lo deja del orden
del titular de encima. Sin marco: "encuadrar" no era poner caja. */
.how-steps { --how-col: 22ch; position: relative; }
.how-step p { max-width: none; }
@media (min-width: 901px) {
/* Solo en escritorio: por debajo mandan las reglas de 900 y 680, que pasan a
dos columnas y a una. Sin la condicion, esta ganaba por orden y en un movil
salian tres columnas de 90px con parrafos de once lineas. */
.how-steps {
grid-template-columns: repeat(3, minmax(0, var(--how-col)));
justify-content: space-between;
gap: clamp(2rem, 5vw, 4.5rem);
}
}
/* 3. Las flechas se dibujan desde la rejilla, no colgando de cada ficha: asi
caen en el centro real de cada hueco. Con tres columnas iguales de ancho c,
los dos cruces estan en 25% + c/4 y en 75% - c/4. */
.how-steps::before, .how-steps::after {
content: "";
position: absolute;
top: 50%; /* el centro de la fila, no la del numero */
width: 22px; height: 22px;
/* 2,5px el navegador los redondea a 2 en pantallas sin escalado. */
border-top: 3px solid var(--on-dark);
border-right: 3px solid var(--on-dark);
transform: translate(-50%, -50%) rotate(45deg);
opacity: 0.75;
}
.how-steps::before { left: calc(25% + var(--how-col) / 4); }
.how-steps::after { left: calc(75% - var(--how-col) / 4); }
@media (max-width: 900px) {
/* Apiladas o en dos columnas apuntarian al vacio. */
.how-steps::before, .how-steps::after { display: none; }
}
/* 4. La linea de abajo tenia 13,6px bajo el boton. Va con el contenedor y
el hermano delante porque quien mandaba era .guides-more > .btn + p, que
pesa dos clases y un elemento: .how .how-micro, con dos clases, perdia. */
.how .guides-more > .btn + .how-micro { margin-top: clamp(1.4rem, 2.4vw, 2rem); }
/* ========================================================================
Paneles con mapas — el documento de Machu Picchu dentro de las pestañas
Sandra: "¿esto puede ser más amplio según el contenido?" y "¿aquí podría
añadir imágenes y mapas?". El panel normal parte el texto en dos columnas,
que es lo que hace falta para tres párrafos; con mapas y listas largas de
por medio, una columna sola lee mejor y deja sitio a la imagen.
======================================================================== */
.tabpanel-rich { columns: auto; }
.tabpanel-rich > p { max-width: 72ch; }
.tabpanel-rich h3 {
font: 500 clamp(1.05rem, 1.5vw, 1.25rem)/1.3 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink);
margin: 1.75rem 0 0.6rem;
}
.tabpanel-rich > .tab-points { max-width: 72ch; }
/* El mapa, con su pie. Los siete salen del PDF del cliente a unos 1470px, así
que el mayor candidato cubre de sobra el hueco declarado. */
.tab-figure { margin: 1.4rem 0 0; max-width: 660px; }
.tab-figure img {
display: block; width: 100%; height: auto;
border-radius: var(--radius-lg);
}
.tab-figure figcaption {
margin-top: 0.55rem;
font: 400 0.8rem/1.5 var(--font-body);
color: var(--ink-secondary);
}
/* Cada ruta: el mapa a un lado y lo que se ve al otro. */
.routecard {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.25rem, 2.6vw, 2.25rem);
align-items: start;
margin-top: clamp(1.75rem, 3vw, 2.5rem);
padding-top: clamp(1.75rem, 3vw, 2.5rem);
border-top: 1px solid var(--line-soft);
}
.routecard .tab-figure { margin: 0; max-width: none; }
.routecard h3 { margin-top: 0; }
.routecard-hi {
margin: 1rem 0 0;
font: 600 0.72rem/1.4 var(--font-body);
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent);
}
.routecard .tab-points { margin-top: 0.5rem; }
@media (max-width: 760px) { .routecard { grid-template-columns: 1fr; } }
/* La tabla de grupos de Huayna Picchu. */
.tab-table {
width: 100%; max-width: 660px;
margin-top: 1.25rem;
border-collapse: collapse;
font-size: 0.88rem;
}
.tab-table caption {
text-align: left;
font: 600 0.72rem/1.4 var(--font-body);
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.5rem;
}
.tab-table th, .tab-table td {
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--line-soft);
text-align: left;
}
.tab-table thead th {
font-weight: 600; color: var(--ink);
border-bottom-color: var(--line);
}
.tab-table tbody th { font-weight: 600; color: var(--ink); }
.tab-table td { color: var(--ink-body); }
/* Sandra: "no llega a destacar en la página". El bloque de pestañas era texto
suelto sobre el fondo. Sobre su propia superficie se lee como una pieza, y
de paso los mapas tienen dónde apoyarse. */
.tabset {
background: var(--surface);
border-radius: var(--radius-xl);
padding: clamp(0.5rem, 1.6vw, 1.25rem) clamp(1rem, 2.6vw, 2.25rem)
clamp(1.5rem, 3vw, 2.25rem);
}
/* Con nueve pestañas la barra se desplazaba 12px: lo justo para cortar la
última y no lo bastante para que se note que hay más. Envuelve. */
@media (min-width: 761px) {
.tablist { flex-wrap: wrap; overflow-x: visible; }
}
/* Sandra: "dos secciones super pegadas" y despues "sigue muy pegado, y ademas
no hay un title para el carrusel". En el resto del sitio un carrusel siempre
viene detras de una cabecera; este salia a pelo. Ahora lleva la suya, y el
aire va entre el bloque de arriba y ese titulo. */
/* La cabecera del carrusel: la misma pieza que "Journey ideas / Make Machu
Picchu part of something bigger", que es lo que Sandra senalo. Sigue siendo
h3 -- el h2 de la seccion esta encima -- y solo toma su tamano. */
.section-head-rail { margin-top: clamp(4rem, 8vw, 7rem); }
.section-head-rail h3 {
font-family: var(--font-display);
font-size: clamp(1.85rem, 3.6vw, 2.8rem);
font-weight: 430;
line-height: 1.06;
letter-spacing: -0.035em;
color: var(--ink);
margin: 0;
}
.section-head-rail h3 em { color: var(--brand-600); font-style: normal; }
.splitb + .rail { margin-top: clamp(2rem, 4vw, 3.25rem); }
/* ========================================================================
Los paneles de pestañas, revisados
Sandra: "mejora visualmente la información de todas estas categorías;
ordena, alinea; si hay imágenes que sean vistosas, no pequeñas; agrega
color, iconos; diferencia cada cosa de otra; da espacio."
======================================================================== */
/* El icono del panel iba en azul y pequeño. Naranja, como todos los iconos
desnudos del sitio, y de un tamaño que se vea. */
.tabpanel:not([hidden]):not(:has(.tabpanel-split)) { --mark-w: clamp(2.2rem, 3.4vw, 2.9rem); }
.tabpanel-mark { color: var(--accent); }
/* El panel con mapas suelta la tercera columna vacía: esa columna existe para
centrar el texto cuando el panel es solo prosa, y aquí solo estrecha las
imágenes. */
@media (min-width: 621px) {
.tabpanel:not([hidden]):has(.tabpanel-rich) {
grid-template-columns: var(--mark-w) minmax(0, 1fr);
gap: clamp(1rem, 2.2vw, 1.75rem);
}
}
/* Cada asunto, separado del siguiente por un filete y aire, para que no se
lean como un bloque continuo. */
.tabpanel-rich h3 {
margin-top: clamp(2.25rem, 3.6vw, 3rem);
padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
border-top: 1px solid var(--line-soft);
}
.tabpanel-rich > *:first-child { margin-top: 0; }
/* Las imágenes, al ancho del panel. Antes estaban topadas a 660px, que dentro
de un panel de 1000 se veían pequeñas. */
/* 700px es el techo real: la variante mayor de estos mapas es 1400-1440px
(el original del cliente mide 1431-1472), y a doble densidad 700 pide 1400.
Un pixel mas y se ablandan en un portatil retina. */
.tab-figure { max-width: 700px; margin-top: clamp(1.5rem, 2.6vw, 2rem); }
.tab-figure img { box-shadow: inset 0 0 0 1px var(--line-soft); }
.tab-figure figcaption {
margin-top: 0.7rem;
padding-left: 0.9rem;
border-left: 2px solid var(--accent);
color: var(--ink-body);
}
/* Las listas dejan el punto por una marca, como el resto del sitio. */
.tab-points { list-style: none; padding-left: 0; gap: 0.7rem; }
.tab-points li { position: relative; padding-left: 1.85rem; }
.tab-points li::before {
content: "";
position: absolute; left: 0; top: 0.3em;
width: 1.05em; height: 1.05em;
background-color: var(--accent);
-webkit-mask: var(--mark-check) no-repeat center / contain;
mask: var(--mark-check) no-repeat center / contain;
}
/* En dos columnas, una lista partida por la mitad no se entiende. */
.tabpanel-body .tab-points, .tabpanel-body p { break-inside: avoid; }
/* Cada ruta: el mapa manda, y la ficha se separa de la anterior. */
.routecard {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.75rem);
margin-top: clamp(2.25rem, 4vw, 3.25rem);
padding-top: clamp(2.25rem, 4vw, 3.25rem);
}
.routecard .tab-figure figcaption { display: none; }
/* ========================================================================
Un solo sistema para los nueve paneles
Sandra: "hay cosas que colocas solo en una columna y otras en dos, no se
nota la división; hay información más larga que las imágenes y no se
adapta; hay cosas que están solo alineadas a la izquierda y queda mucho
espacio al lado derecho, parece documento; inspírate de los diseños que
tenemos."
Todos con el mismo esqueleto — entradilla, tarjetas, mapa a lo ancho, nota —
y con las piezas que el sitio ya usa: la rejilla de tarjetas es la de What
to pack.
======================================================================== */
/* Fuera las dos columnas de prosa: eran la mitad de la inconsistencia. */
.tabpanel-body { columns: auto; }
.tabpanel-body > p { max-width: 68ch; }
/* Los puntos de cada panel, en tarjetas. Rellenan el ancho, así que ya no
queda media columna vacía a la derecha. */
.tab-points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
gap: clamp(0.55rem, 1vw, 0.8rem);
max-width: none;
margin-top: clamp(1.1rem, 2vw, 1.5rem);
}
.tab-points li {
padding: 0.9rem 1rem 0.9rem 2.6rem;
background: var(--bg-page);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--line-soft);
font-size: 0.9rem;
}
.tab-points li::before { left: 1rem; top: 1rem; }
/* Cada asunto largo, una tarjeta. El filete y el aire sueltos no marcaban
división suficiente; una caja sí. */
.tabcards {
display: grid;
/* Sandra: "colocalo todo en una sola columna, no en dos". */
grid-template-columns: minmax(0, 1fr);
gap: clamp(0.85rem, 1.6vw, 1.25rem);
align-items: start;
margin-top: clamp(1.5rem, 2.6vw, 2rem);
}
.tabcard {
background: var(--bg-page);
border-radius: var(--radius-xl);
box-shadow: inset 0 0 0 1px var(--line-soft);
padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.tabpanel-rich .tabcard h3 {
margin: 0 0 0.6rem;
padding-top: 0;
border-top: 0;
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}
.tabcard > p:last-child { margin-bottom: 0; }
/* Sandra: "no es necesario poner cada uno en un recuadro". Dentro de una
tarjeta la caja de cada punto es una caja dentro de otra: no anade division,
solo ruido. La marca ya separa un punto del siguiente. */
.tabcard .tab-points > li {
background: none;
box-shadow: none;
padding: 0.15rem 0 0.15rem 1.85rem;
}
.tabcard .tab-points > li::before { left: 0; top: 0.35em; }
.tabcard .tab-points { gap: 0.55rem 2rem; }
/* La ficha de cada ruta ocupa la fila entera: el mapa arriba, a lo ancho de la
tarjeta, y debajo lo que se ve. Antes el texto era más largo que el mapa y
quedaban descuadrados. */
.routecard.tabcard {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1rem, 2vw, 1.5rem);
margin-top: 0;
padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
border-top: 0;
}
/* Sandra: "las rutas colocalas a todo el ancho, no en columnas". El mapa
arriba y debajo lo que se ve; partirlo en dos dejaba la lista en una tira
estrecha de un solo punto por linea. */
.routecard.tabcard {
/* 700 del mapa + el relleno de la ficha a cada lado */
max-width: calc(700px + 2 * clamp(1.25rem, 2.2vw, 1.75rem));
margin-inline: auto;
}
.routecard.tabcard .tab-figure { margin: 0; max-width: none; }
.routecard.tabcard h3 { margin-top: 0; }
/* ========================================================================
Los paneles, editables desde WordPress
Sandra: "recuerda que luego debe adaptarse a otra información si es que lo
modifico desde WP, así que ten cuidado el elemento que uses."
Lo de arriba se apoya en clases que yo escribo a mano (.tab-points,
.tab-figure, .tabcard…) y el editor de WordPress no las va a poner: de él
salen
,
, , , pelados. Así que el sistema
se declara también por elemento, y un panel escrito desde el editor cae solo
en la misma forma. Lo que sí trae clase manda, por especificidad.
======================================================================== */
/* Una lista escrita en el editor = la rejilla de tarjetas. */
.tabpanel-body ul:not([class]) {
list-style: none;
margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
gap: clamp(0.55rem, 1vw, 0.8rem);
}
.tabpanel-body ul:not([class]) > li {
position: relative;
padding: 0.9rem 1rem 0.9rem 2.6rem;
background: var(--bg-page);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--line-soft);
font-size: 0.9rem;
line-height: 1.65;
color: var(--ink-body);
}
.tabpanel-body ul:not([class]) > li::before {
content: "";
position: absolute; left: 1rem; top: 1rem;
width: 1.05em; height: 1.05em;
background-color: var(--accent);
-webkit-mask: var(--mark-check) no-repeat center / contain;
mask: var(--mark-check) no-repeat center / contain;
}
.tabpanel-body ol:not([class]) { margin: clamp(1.1rem, 2vw, 1.5rem) 0 0; padding-left: 1.3rem; }
.tabpanel-body ol:not([class]) > li { margin-bottom: 0.5rem; color: var(--ink-body); font-size: 0.9rem; }
/* Un encabezado escrito en el editor abre bloque, con su aire y su filete. */
.tabpanel-body > h3:not([class]), .tabpanel-body > h4:not([class]) {
margin: clamp(2rem, 3.4vw, 2.75rem) 0 0.6rem;
padding-top: clamp(1.1rem, 2vw, 1.5rem);
border-top: 1px solid var(--line-soft);
font: 500 clamp(1.05rem, 1.5vw, 1.25rem)/1.3 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink);
}
.tabpanel-body > *:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Cualquier imagen del editor: al ancho útil, nunca estirada, y con el mismo
tope de nitidez que los mapas. */
.tabpanel-body :is(figure, p) > img,
.tabpanel-body > img {
display: block;
/* Llena su caja. El tope de 700 que habia aqui dejaba un cuarto del ancho en
blanco a la derecha, que es lo que Sandra marcaba. */
width: 100%; max-width: 100%; height: auto;
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--line-soft);
}
.tabpanel-body figure:not([class]) { margin: clamp(1.5rem, 2.6vw, 2rem) 0 0; }
.tabpanel-body figure:not([class]) figcaption {
margin-top: 0.7rem;
padding-left: 0.9rem;
border-left: 2px solid var(--accent);
font: 400 0.8rem/1.5 var(--font-body);
color: var(--ink-body);
}
/* Una tabla del editor, con la misma forma que la de Huayna Picchu. */
.tabpanel-body table:not([class]) {
width: 100%; max-width: 700px;
margin-top: 1.25rem;
border-collapse: collapse;
font-size: 0.88rem;
}
.tabpanel-body table:not([class]) :is(th, td) {
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--line-soft);
text-align: left;
}
.tabpanel-body table:not([class]) thead th { font-weight: 600; color: var(--ink); border-bottom-color: var(--line); }
.tabpanel-body table:not([class]) td { color: var(--ink-body); }
/* Un bloque de cita del editor. */
.tabpanel-body blockquote:not([class]) {
margin: clamp(1.25rem, 2.2vw, 1.75rem) 0 0;
padding-left: 1.1rem;
border-left: 2px solid var(--accent);
color: var(--ink);
font-size: 0.98rem;
}
/* ========================================================================
Los paneles, al ancho de la sección
Sandra: "quitemos el fondo gris; la información no estás que la colocas en
el ancho de la sección, está muy pequeña algunas y otras muy extensas; hay
espacios en blanco, imágenes pequeñas, cosas desalineadas."
La causa de fondo era la rejilla del panel: una columna para el icono, otra
para el texto y una tercera vacía para centrarlo. Entre las dos laterales se
comían 146px de 1120 y todo lo de dentro arrancaba desviado. Fuera las tres:
el icono pasa a ser una marca encima y el contenido ocupa la sección entera,
con un solo borde izquierdo para todo.
======================================================================== */
.tabset { background: none; padding: 0; }
.tabpanel:not([hidden]),
.tabpanel:not([hidden]):not(:has(.tabpanel-split)),
.tabpanel:not([hidden]):has(.tabpanel-rich) {
display: block;
}
.tabpanel-mark {
grid-row: auto;
width: clamp(2.2rem, 3.4vw, 2.9rem);
height: clamp(2.2rem, 3.4vw, 2.9rem);
margin: 0 0 clamp(0.9rem, 1.6vw, 1.25rem);
}
.tabpanel-body { grid-column: auto; }
/* Las imágenes llenan su caja. El tope de 700 dejaba un cuarto del ancho en
blanco a su derecha; con la variante de 1440 llenar 1064 se ve nítido en una
pantalla normal. En una retina cae a 1,4 veces la densidad: para llenarla
del todo harían falta originales de 2400, que el cliente aún no manda. */
.tab-figure { max-width: none; }
.routecard.tabcard { max-width: none; margin-inline: 0; }
/* ========================================================================
Icono a la izquierda, texto al lado — en todo el panel
Sandra: "esos textos colócalos al lado del icono" (la entradilla) y "es
información, colócala de igual forma de la que tiene iconos y el texto al
costado" (las tarjetas). Una sola forma para las dos cosas.
======================================================================== */
.tabpanel-lead {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(0.9rem, 1.8vw, 1.4rem);
align-items: start;
}
.tabpanel-lead .tabpanel-mark { margin: 0; }
.tabpanel-lead > div > p:last-child { margin-bottom: 0; }
.tabcard-ic-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(0.8rem, 1.5vw, 1.1rem);
align-items: start;
}
.tabcard-ic {
flex: none;
width: 26px; height: 26px;
color: var(--accent);
}
.tabcard-ic svg { display: block; width: 100%; height: 100%; }
.tabcard-ic-row h3 { margin-top: 0; }
/* El título de cada panel. Sandra: "hay iconos sin título ni texto, no sé qué
estoy viendo" — el icono de Huayna Picchu había quedado solo junto al mapa. */
.tabpanel-lead .tabpanel-title {
margin: 0 0 0.5rem;
padding-top: 0;
border-top: 0;
font: 500 clamp(1.15rem, 1.7vw, 1.4rem)/1.25 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink);
}
.tabpanel-lead { margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
/* El pie de la imagen, alineado con ella. La barra naranja lo empujaba 0,9rem
a la derecha y quedaba descolgado del texto de abajo. */
.tab-figure figcaption {
margin-top: 0.85rem;
padding-left: 0;
border-left: 0;
position: relative;
padding-top: 0.6rem;
}
.tab-figure figcaption::before {
content: "";
position: absolute; left: 0; top: 0;
width: 2.25rem; height: 2px;
background: var(--accent);
}
/* Aire entre los bloques del panel: estaba todo pegado. */
.tabpanel-body > * + * { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.tabpanel-body > .tabcards + *, .tabpanel-body > * + .tabcards { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
/* La tabla de franjas: dos columnas, mañana y tarde. Se ajusta a su contenido
en vez de estirarse, y las celdas vacías de la tarde -- hay seis franjas de
mañana y tres de tarde -- no dibujan filete, para que no parezcan un fallo. */
.tab-table-slots { width: auto; min-width: min(100%, 30rem); }
.tab-table-slots td:empty { border-bottom-color: transparent; }
.tab-table-slots :is(th, td) { padding-right: clamp(1.25rem, 3vw, 2.5rem); }
/* La marca y el titulo, a la misma altura. */
.tabpanel-lead { align-items: start; }
.tabpanel-lead .tabpanel-mark { margin-top: 0.1rem; }
/* Sandra: "bájalas debajo del title". La entradilla cuelga del titular en vez
de ir a su derecha. Acotada con su propia clase: .section-head reparte en dos
columnas en el resto del sitio y eso no se toca. */
.section-head-stack {
grid-template-columns: minmax(0, 1fr);
/* Los 72px del hueco separan dos columnas; en una sola pasarían a ser
separación vertical entre titular y texto. */
gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.section-head-stack .section-head-lead { max-width: 72ch; padding-bottom: 0; }
/* "Ten cuidado, después de bajar ese texto, que quede mucho espacio en bottom":
el margen inferior de la cabecera existe para separarla de lo que viene
detrás, y en estas dos secciones no viene nada. Lo decide :has(), no una
clase, así que vuelve solo el día que alguien meta contenido debajo. */
.section:has(> .wrap > .section-head:only-child) .section-head { margin-bottom: 0; }