/*
Theme Name: 3chepes
Theme URI: https://treschepes.com
Description: GeneratePress child for Café Tres Chepes. Look recovered from the 2016 snapshot.
Author: Oscar Jardila
Template: generatepress
Version: 0.1.30
License: GNU General Public License v2 or later
Text Domain: 3chepes
Requires at least: 6.5
Requires PHP: 8.0
*/

:root {
	/* The landing pulls the hero up by exactly this much so the transparent
	   header sits over the photo. Both values must stay in step, so they read
	   from here instead of repeating a magic number. 161px is the 2016 header,
	   measured off the snapshot: the logo runs 13..161 and the nav sits
	   centred against it at 58..129, not above it. */
	--chepes-header-h: 161px;
	--chepes-dark: #080300;
	--chepes-nav: #FFB97E;
	--chepes-cta: #F28A2D;
	--chepes-cta-shadow: #D77620;
	--chepes-brown: #5F4242;
	--chepes-cream: #F1EEEC;
	--chepes-muted: #615B5B;
	--chepes-text: #222;
	--chepes-footer: #F3F0EE;
}

/* No `overflow-x: hidden` here. It silently breaks `position: sticky` on the
   header — the element scrolls away and the whole .is-stuck block below never
   applies. It was a guard against horizontal overflow; there is none left to
   guard against, so the guard costs more than it buys. */
html {
	scroll-behavior: smooth;
}

body {
	background: #fff;
	color: var(--chepes-text);
	font-family: Lora, Georgia, serif;
	font-size: 20px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.main-title {
	color: var(--chepes-brown);
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: 600;
	line-height: 1.2;
}

a {
	color: var(--chepes-cta);
}

a:hover {
	color: var(--chepes-brown);
}

.site-description {
	display: none;
}

/* Header — 2016: transparent over the hero photo, logo in the middle */
.site-header,
.main-navigation,
.main-navigation .inside-navigation {
	background-color: var(--chepes-dark) !important;
	border: 0;
	box-shadow: none;
}

.home .site-header,
.home .main-navigation,
.home .main-navigation .inside-navigation,
.page-template-landing-pages .site-header,
.page-template-landing-pages .main-navigation,
.page-template-landing-pages .main-navigation .inside-navigation {
	background-color: transparent !important;
	background-image: none !important;
}

.site-header {
	overflow: visible;
	position: sticky !important;
	top: 0;
	z-index: 200;
}

.home .site-header,
.page-template-landing-pages .site-header {
	left: auto;
	right: auto;
	width: 100%;
}

@media (min-width: 1024px) {
	.home .chepes-hero,
	.page-template-landing-pages .chepes-hero {
		margin-top: calc(-1 * var(--chepes-header-h));
	}
}

.site-header.is-stuck,
.site-header.is-stuck .main-navigation,
.site-header.is-stuck .main-navigation .inside-navigation,
.home .site-header.is-stuck,
.home .site-header.is-stuck .main-navigation,
.home .site-header.is-stuck .main-navigation .inside-navigation,
.page-template-landing-pages .site-header.is-stuck,
.page-template-landing-pages .site-header.is-stuck .main-navigation {
	background-color: var(--chepes-dark) !important;
}

.site-header.is-stuck {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.site-header.is-stuck .inside-header {
	min-height: 56px;
}

.site-header.is-stuck .site-logo {
	top: 4px;
}

.site-header.is-stuck .site-logo img,
.site-header.is-stuck .header-image.is-logo-image {
	width: 72px;
}

@media (min-width: 1024px) {
	/* 72px on #080300 hid the mark: the cup is the same brown as the bar
	   and the wordmark shrinks to ~14px. 108px keeps "Tres Chepes" readable.
	   The hole tracks the new width so the mark does not sit on Our coffee. */
	.site-header.is-stuck .inside-header {
		min-height: 96px;
	}

	.site-header.is-stuck .site-logo {
		top: 6px;
	}

	.site-header.is-stuck .site-logo img,
	.site-header.is-stuck .header-image.is-logo-image {
		width: 108px;
	}

	.site-header.is-stuck .main-navigation .main-nav > ul {
		margin-top: 22px;
	}

	.site-header.is-stuck .main-navigation .main-nav > ul > li:nth-child(3) {
		margin-right: 128px !important;
	}
}

.site-header.is-stuck .main-navigation .main-nav ul li a {
	padding-bottom: 16px;
	padding-top: 16px;
}

.home .inside-header,
.page-template-landing-pages .inside-header {
	flex-direction: row !important;
	align-items: center !important;
}

.home .site-logo,
.page-template-landing-pages .site-logo {
	margin: 0 !important;
	max-width: none !important;
}

/* GeneratePress inline-toggle stacks logo + nav; undo that on the landing. */
@media (min-width: 1024px) {
	.home.has-inline-mobile-toggle .inside-header,
	.page-template-landing-pages.has-inline-mobile-toggle .inside-header {
		align-items: center !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
	}

	.home.has-inline-mobile-toggle #site-navigation,
	.page-template-landing-pages.has-inline-mobile-toggle #site-navigation {
		flex-basis: 100% !important;
		margin: 0 !important;
	}
}

@media (min-width: 1024px) {
	.home.has-inline-mobile-toggle .mobile-menu-control-wrapper,
	.page-template-landing-pages.has-inline-mobile-toggle .mobile-menu-control-wrapper {
		display: none !important;
	}
}

.inside-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 1140px;
	margin: 0 auto;
	min-height: var(--chepes-header-h);
	padding: 0 20px;
	overflow: visible;
}

.site-logo {
	position: absolute;
	left: 50%;
	top: 13px;
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: auto;
}

.site-logo a {
	display: block;
}

.site-logo img,
.header-image.is-logo-image {
	width: 180px;
	height: auto;
	max-width: none;
}

.main-navigation {
	width: 100%;
	background: transparent !important;
}

.main-navigation .inside-navigation {
	background: transparent !important;
	justify-content: center;
}

@media (min-width: 1024px) {
	/* 2016 put the nav at y 58..129 inside a 161px header, so it reads as
	   centred against the logo rather than sitting on top of it. */
	.main-navigation .main-nav > ul {
		align-items: flex-start;
		display: flex !important;
		flex-wrap: nowrap;
		justify-content: center;
		margin-top: 31px;
	}

	/* The hole the logo sits in. 2016 did this with an empty 160px menu item
	   between "Semillas blog" and "Nuestro café"; this is the same gap as a
	   margin. The left group is wider than the right one, so centring the row
	   would put the hole left of the logo — the offset below re-centres it.
	   Both numbers depend on the menu labels; re-measure if they change. */
	.main-navigation .main-nav > ul > li:nth-child(3) {
		margin-right: 212px !important;
	}

	.main-navigation .main-nav > ul > li:nth-child(6) {
		margin-right: 48px;
	}

	/* ES / EN is not part of the 2016 design, so it does not belong in the
	   row — inside it, its width unbalances the two groups and drags the
	   logo hole off centre. Parked in the corner instead. */
	.main-navigation .main-nav > ul > li.chepes-lang {
		margin-left: 0;
		position: absolute;
		right: 0;
		top: 8px;
	}
}


.main-navigation .main-nav ul li a {
	background: transparent !important;
	color: var(--chepes-nav) !important;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 1px;
	/* GeneratePress ships a 60px line-height here, which with the old 32px
	   padding made every item 124px tall and stretched the header. 2016 used
	   a 17px line with 27px padding, giving 71px items. */
	line-height: 17px;
	padding: 27px 18px;
	white-space: nowrap;
	text-transform: none;
}

/* The desktop nav turns on at 1024, where the row has no room to spare:
   seven items plus a 200px hole for the logo. Tighten the horizontal padding
   until there is real headroom. Wrapping here is not cosmetic — the tallest
   item sets the header height, and the hero is pulled up by exactly
   --chepes-header-h, so a second row leaves a white band above the photo.
   This has to sit after the shorthand `padding` above, or it loses to it. */
@media (min-width: 1024px) and (max-width: 1179px) {
	.main-navigation .main-nav ul li a {
		letter-spacing: 0.5px;
		padding-left: 9px;
		padding-right: 9px;
	}
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-item > a:hover {
	color: #fff !important;
}

.main-navigation .main-nav ul ul {
	background: var(--chepes-dark);
}

/* ES / EN on one line. The nav's anchors are block-level, so left alone the
   two languages stack and the separator lands on a third row — which made
   this single item three times taller than the rest and, since it is the
   tallest flex child, set the height of the whole header. */
.chepes-lang {
	align-items: center;
	display: flex;
	margin-left: 10px;
	white-space: nowrap;
}

.chepes-lang a {
	padding-left: 7px !important;
	padding-right: 7px !important;
}

.chepes-lang span {
	color: var(--chepes-nav);
	opacity: 0.55;
}

.chepes-lang a[aria-current="true"] {
	color: #fff !important;
}

.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.mobile-menu-control-wrapper {
	background: transparent !important;
	color: var(--chepes-nav) !important;
}

.menu-toggle .mobile-menu {
	color: var(--chepes-nav);
}

/* Landing full-bleed */
.page-template-landing-pages .site-content,
.page-template-landing-pages .site-content.grid-container,
.home .site-content {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.page-template-landing-pages .content-area,
.page-template-landing-pages .site-main {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: none;
}

.chepes-home .wrap {
	margin: 0 auto;
	max-width: 1140px;
	padding: 0 20px;
}

.chepes-home {
	text-align: center;
}

.chepes-home section {
	padding: 80px 0;
}

.chepes-home h2 {
	margin: 0 0 0.5em;
	font-size: 1.9em;
	text-align: center;
}

.chepes-home .wrap > h3,
.page .wrap > h3 {
	color: var(--chepes-muted);
	font-family: Lora, Georgia, serif;
	font-size: 1.4em;
	font-weight: 400;
	margin-top: 0.715em;
}

.bg-cream {
	background-color: var(--chepes-cream);
}

/* Hero */
.chepes-hero,
.page-template-landing-pages .head {
	background-color: #1a1208;
	background-image: url("/wp-content/uploads/hero.jpg");
	background-position: 50% 28%;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	padding: 220px 0 146px;
	position: relative;
	text-align: center;
}

.chepes-hero .wrap,
.page-template-landing-pages .head .wrap {
	position: relative;
	z-index: 2;
}

.chepes-hero .background,
.page-template-landing-pages .head .background {
	display: none;
}

.chepes-hero::after,
.page-template-landing-pages .head::after {
	background: linear-gradient(to bottom, rgba(8, 3, 0, 0.42) 0%, rgba(8, 3, 0, 0.12) 38%, rgba(8, 3, 0, 0.35) 100%);
	bottom: 0;
	content: "";
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.page-template-landing-pages h1,
.chepes-hero h1 {
	color: #fff;
	font-size: 1.9em;
	margin: 0 auto;
	max-width: 728px;
	text-shadow: rgba(0, 0, 0, 0.5) 0 2px 2px;
}

.chepes-hero h2,
.page-template-landing-pages .head h2 {
	color: #fff;
	font-family: Lora, Georgia, serif;
	font-size: 1.4em;
	font-weight: 400;
	margin: 33px auto 0;
	max-width: 650px;
	text-shadow: rgba(0, 0, 0, 0.35) 0 1px 2px;
}

/* CTA */
.call-to-action {
	clear: both;
	margin-top: 1.5em;
	text-align: center;
}

.home .call-to-action,
.chepes-hero .call-to-action {
	margin-top: 3.125em;
}

.call-to-action a,
.call-to-action input {
	background-color: var(--chepes-cta);
	border: 0;
	border-radius: 5px;
	box-shadow: var(--chepes-cta-shadow) 1px 2px 0 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	height: 56px;
	letter-spacing: 0;
	line-height: 56px;
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	width: 220px;
}

.call-to-action a:hover,
.call-to-action input:hover {
	background-color: #E17F27;
	color: #fff;
}

.call-to-action.alt a {
	background-color: #863F00;
	box-shadow: #652F00 1px 2px 0 0;
	font-size: 0.7em;
	height: 44px;
	line-height: 44px;
	padding: 0 1em;
	width: auto;
	min-width: 280px;
}

.call-to-action.alt a:hover {
	background-color: #753700;
	color: #fff;
}

/* Quantity / frequency */
.cuanto-cafe select {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	border: 2px solid #bdc3c7;
	border-radius: 5px;
	color: #4F4F4F;
	cursor: pointer;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 0.8em;
	height: 45px;
	line-height: 45px;
	margin: 0 0.25em 0.5em 0;
	padding: 0 32px 0 14px;
	width: 190px;
	/* 2016 drew the arrow with a .caret span sitting over the select. Same
	   result without the extra markup. Without it, `appearance: none` leaves
	   a box with no hint that it opens. */
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23615b5b' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

/* These two dropdowns are the whole order control, so they must show focus.
   `outline: 0` used to remove it with nothing put back. */
.cuanto-cafe select:focus-visible {
	outline: 2px solid var(--chepes-brown);
	outline-offset: 2px;
}

.cuanto-cafe select.quantity {
	max-width: 70px;
	width: 70px;
	padding-right: 1.4em;
}

/* Steps */
.steps article {
	display: inline-block;
	margin: 0 4%;
	position: relative;
	vertical-align: top;
}

.steps article h3 {
	font-size: 1.2em;
	margin-bottom: 0.625em;
}

.steps article img {
	display: inline-block;
	max-height: 95px;
	max-width: 95px;
	vertical-align: middle;
}

.steps article p {
	color: var(--chepes-muted);
	font-size: 0.95em;
	margin-bottom: 0;
}

.steps article p.small,
article p.small {
	font-size: 0.8em;
}

.steps article .thumb {
	display: inline-block;
	height: 100px;
	margin-bottom: 1.75em;
	position: relative;
	text-align: center;
	width: 100px;
}

.steps .num {
	background-color: var(--chepes-brown);
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 0.75em;
	font-weight: 700;
	height: 30px;
	left: 0;
	line-height: 30px;
	position: absolute;
	top: 0;
	width: 30px;
	z-index: 1;
}

.steps.nuestro-cafe article .thumb {
	height: 170px;
	width: 170px;
}

.steps.nuestro-cafe article img {
	height: auto;
	max-height: none;
	max-width: 170px;
	width: auto;
}

.steps.two-steps article {
	margin: 0 9%;
	max-width: 30%;
}

.steps.three-steps article {
	margin: 0 3%;
	max-width: 27%;
}

.step-container {
	margin-top: 5em;
}

/* Cupping card */
#propiedades {
	background-color: #F5F3F1;
	list-style: none;
	margin: 1em 0 2em;
	padding: 2.5em 8% 0;
	text-align: center;
}

#propiedades li {
	color: var(--chepes-muted);
	display: inline-block;
	list-style: none;
	margin: 0 0 2.5em;
	vertical-align: top;
	width: 24%;
}

#propiedades li span {
	color: #893333;
	display: block;
	text-transform: uppercase;
}

/* Order teaser */
#pedir form {
	display: inline-block;
	padding-left: 1.4em;
	vertical-align: top;
	width: 362px;
}

#pedir h2 {
	margin-bottom: 2.4em;
}

#pedir h3 {
	color: var(--chepes-brown);
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	font-weight: 600;
	text-align: left;
}

#pedir img {
	max-height: 115px;
	width: auto;
}

#pedir .desc {
	display: inline-block;
	vertical-align: top;
	width: 362px;
}

#pedir .precio {
	color: #3E3E3E;
	font-size: 1.1em;
	margin: 1em 0 2em;
}

#pedir .small {
	margin-bottom: 0;
	text-align: left;
}

/* Testimonials */
#testimonios {
	text-align: left;
}

#testimonios .wrap {
	overflow: hidden;
}

#testimonios article {
	display: inline-block;
	margin-bottom: 1em;
	overflow: hidden;
	vertical-align: top;
	width: 30%;
}

#testimonios article img {
	border-radius: 50%;
	float: left;
	height: 50px;
	width: 50px;
}

#testimonios article p {
	color: #95a5a6;
	font-size: 0.8em;
	margin: 0 0 0 70px;
}

#testimonios p.autor,
#testimonios p.twitter {
	color: #2c3e50;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 0.8em;
	font-weight: 700;
}

#testimonios p.twitter {
	color: #95a5a6;
	font-size: 0.65em;
}

#testimonios .big-quote {
	color: #2c3e50;
	float: left;
	font-size: 1.6em;
	margin-left: 2em;
	margin-right: 4em;
	position: relative;
	text-align: left;
	width: 50%;
}

#testimonios .big-quote:before {
	content: "“";
	color: var(--chepes-nav);
	font-family: Georgia, serif;
	font-size: 2em;
	left: -36px;
	line-height: 1;
	position: absolute;
	top: -8px;
}

#testimonios .big-quote .autor > * {
	display: inline-block;
	vertical-align: middle;
}

#testimonios .big-quote .autor p {
	color: #95a5a6;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0.9px;
	margin: 0 0 0 1em;
	text-transform: uppercase;
}

#testimonios .big-quote img {
	float: none;
	height: 60px;
	margin-right: 0;
	width: 60px;
}

#testimonios .big-quote p {
	margin-left: 0;
}

#testimonios .big-quote > p {
	color: #2c3e50;
	font-size: 1em;
	margin-bottom: 1em;
}

/* FAQ teaser */
#faq article {
	display: inline-block;
	margin: 0 6.3%;
	text-align: left;
	vertical-align: top;
	width: 37%;
}

#faq article h3 {
	font-size: 1.2em;
	text-align: left;
}

#faq article p {
	color: var(--chepes-muted);
	font-size: 0.85em;
	text-align: left;
}

#faq h2 {
	margin-bottom: 2em;
}

#faq .call-to-action {
	margin-top: 1em;
}

/* Inner pages */
.inside-article {
	max-width: 740px;
	margin: 2.5em auto 4em;
	padding: 0 20px;
}

.entry-title {
	font-size: 2em;
	margin-bottom: 0.75em;
}

.entry-content a:not(.call-to-action a):not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content ul {
	margin: 0 0 1.5em 1.2em;
}

.entry-content ul > li {
	list-style: disc;
	margin-bottom: 0.5em;
}

/* Form fields on inner pages. Buttons are excluded: this rule comes after
   .call-to-action and at equal specificity, so without the exclusion it
   repainted every orange submit button transparent-with-a-grey-border. */
.page input:not([type="submit"]):not([type="button"]),
.page select:not(.cuanto-cafe select),
.page textarea {
	background: transparent;
	border: 2px solid #C5CACE;
	border-radius: 5px;
	color: #8A9798;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	font-weight: 600;
}

/* Footer */
.site-footer,
.site-info {
	background-color: var(--chepes-footer) !important;
	color: var(--chepes-brown);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.inside-site-info {
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem 20px;
	text-align: center;
}

.chepes-footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: center;
}

/* #bdc3c7 on the #F3F0EE footer is 1.57:1 — invisible. functions.php already
   declares footer_link_color as this brown; the stylesheet was contradicting
   it. Now 8.2:1. */
.chepes-footer-nav a {
	color: var(--chepes-brown);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.chepes-footer-nav a:hover {
	color: var(--chepes-cta);
}

.copyright-bar,
.site-info .copyright {
	color: var(--chepes-muted);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Blog / Semillas */
.archive .inside-article,
.blog .inside-article {
	max-width: 740px;
}

.chepes-home img {
	height: auto;
	max-width: 100%;
}

/* Mobile — hamburger from 1023 (GP nav_drop_point), not only 768 */
@media (max-width: 1023px) {
	html,
	body {
		/* Same reason as the root rule: no overflow-x here, or the header
		   stops sticking on phones. */
		max-width: 100%;
	}

	.grid-container,
	.site-header,
	.inside-header,
	.chepes-home,
	.chepes-home .wrap,
	.chepes-hero,
	.site-content,
	.site-main {
		box-sizing: border-box;
		max-width: 100% !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	.chepes-home h1,
	.chepes-home h2,
	.chepes-home h3,
	.chepes-home p,
	.chepes-hero h1,
	.chepes-hero h2 {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.site-header,
	.home .site-header,
	.page-template-landing-pages .site-header,
	.site-header .main-navigation,
	.home .main-navigation,
	.home .main-navigation .inside-navigation {
		background-color: var(--chepes-dark) !important;
	}

	.inside-header,
	.home .inside-header,
	.page-template-landing-pages .inside-header,
	.home.has-inline-mobile-toggle .inside-header {
		align-items: center !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: space-between;
		min-height: 56px;
		padding: 8px 12px !important;
		position: relative;
	}

	.inside-header > *:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
	}

	.site-logo,
	.home .site-logo,
	.page-template-landing-pages .site-logo,
	.site-header.is-stuck .site-logo {
		flex: 0 0 auto;
		left: 50% !important;
		margin: 0 !important;
		max-width: none !important;
		order: 2;
		pointer-events: auto;
		position: absolute !important;
		top: 6px !important;
		transform: translateX(-50%) !important;
		z-index: 6;
	}

	.site-logo img,
	.header-image.is-logo-image,
	.site-header.is-stuck .site-logo img {
		height: auto;
		max-width: none !important;
		width: 112px !important;
	}

	#site-navigation,
	.home.has-inline-mobile-toggle #site-navigation {
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		margin: 0 !important;
		order: 1;
		width: auto !important;
	}

	.main-navigation {
		flex: 0 0 auto;
		width: auto;
	}

	.main-navigation:not(.toggled) .main-nav > ul {
		display: none !important;
	}

	button.menu-toggle {
		align-items: center;
		color: var(--chepes-nav) !important;
		display: inline-flex !important;
		font-size: 13px;
		font-weight: 700;
		gap: 6px;
		height: 48px;
		justify-content: center;
		letter-spacing: 0.04em;
		line-height: 1;
		margin: 0;
		min-width: 48px;
		padding: 0 10px;
		text-transform: uppercase;
		width: auto !important;
	}

	.menu-toggle .gp-icon {
		color: var(--chepes-nav);
	}

	.main-navigation .main-nav > ul > li:nth-child(3),
	.site-header.is-stuck .main-navigation .main-nav > ul > li:nth-child(3) {
		margin-right: 0 !important;
	}

	.home .site-logo,
	.page-template-landing-pages .site-logo {
		margin-bottom: 0 !important;
	}

	.inside-header {
		overflow: visible;
	}

	/* Keep Menu + logo on the first row. The list hangs full-width
	   under .inside-header (position:relative), not under the 48px button. */
	#site-navigation.toggled,
	.main-navigation.toggled {
		flex: 0 0 auto !important;
		order: 1;
		position: static !important;
		width: auto !important;
	}

	#site-navigation.toggled .inside-navigation {
		display: block !important;
		position: static !important;
		width: auto !important;
	}

	.main-navigation.toggled .main-nav {
		display: block !important;
		width: auto !important;
	}

	.main-navigation.toggled .main-nav > ul {
		background: var(--chepes-dark);
		box-sizing: border-box;
		display: block !important;
		float: none !important;
		left: 0 !important;
		margin: 0;
		max-height: 70vh;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 8px 0 16px;
		position: absolute !important;
		right: 0 !important;
		text-align: left;
		top: 100%;
		width: 100% !important;
		z-index: 40;
	}

	.main-navigation.toggled .main-nav li {
		border-bottom: 1px solid rgba(255, 185, 126, 0.18);
		clear: both;
		display: block !important;
		float: none !important;
		width: 100% !important;
	}

	.main-navigation.toggled .main-nav li:last-child {
		border-bottom: 0;
	}

	/* ES / EN stays one row in the drawer too. The rule above forces every
	   item to `display: block !important`, which would otherwise put the two
	   languages and the separator on three separate lines. */
	.main-navigation.toggled .main-nav li.chepes-lang {
		align-items: center;
		display: flex !important;
		margin-left: 0;
	}

	.main-navigation.toggled .main-nav li.chepes-lang a {
		display: inline-block !important;
		padding-right: 6px !important;
		width: auto !important;
	}

	.main-navigation.toggled .main-nav li.chepes-lang a + span + a {
		padding-left: 6px !important;
	}

	.main-navigation.toggled .main-nav ul li a {
		display: block !important;
		font-size: 17px !important;
		letter-spacing: 0.4px;
		line-height: 1.3 !important;
		padding: 14px 16px !important;
		width: 100% !important;
	}

	.main-navigation.toggled .main-nav ul ul {
		background: #120800;
		box-shadow: none;
		display: block !important;
		float: none !important;
		height: auto !important;
		left: auto !important;
		opacity: 1 !important;
		padding-left: 12px;
		pointer-events: auto;
		position: static !important;
		right: auto !important;
		visibility: visible !important;
		width: 100% !important;
	}

	.chepes-lang {
		padding: 8px 8px 0;
	}

	.main-navigation.toggled .chepes-lang a {
		display: inline !important;
		padding: 14px 8px !important;
		width: auto !important;
	}

	.inside-header::after {
		content: "";
		flex: 0 0 48px;
		order: 3;
		width: 48px;
	}

	.chepes-hero,
	.page-template-landing-pages .head {
		padding: 36px 16px 44px !important;
	}

	.chepes-hero .wrap,
	.page-template-landing-pages .head .wrap {
		box-sizing: border-box;
		max-width: 100% !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
		width: 100% !important;
	}

	.page-template-landing-pages h1,
	.chepes-hero h1,
	.chepes-hero h2,
	.page-template-landing-pages .head h2,
	.chepes-home h2,
	.chepes-home h3,
	.chepes-home .wrap {
		box-sizing: border-box;
		max-width: 100% !important;
		overflow-wrap: break-word;
	}

	.page-template-landing-pages h1,
	.chepes-hero h1 {
		display: block;
		font-size: 1.2rem !important;
		line-height: 1.3;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 17rem !important;
		padding: 0 12px;
		white-space: normal !important;
	}

	.chepes-hero h2,
	.page-template-landing-pages .head h2 {
		display: block;
		font-size: 1rem !important;
		line-height: 1.4;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 0.75rem;
		max-width: 17rem !important;
		padding: 0 12px;
		white-space: normal !important;
	}

	.chepes-home h2,
	.chepes-home h3 {
		margin-left: auto;
		margin-right: auto;
		padding: 0 12px;
		white-space: normal !important;
	}

	.chepes-home section {
		padding: 56px 0;
	}

	.chepes-home .wrap {
		padding: 0 16px;
	}

	.chepes-home h2 {
		font-size: 1.55em;
	}

	.step-container {
		margin-top: 2.2em;
	}

	.steps.two-steps article,
	.steps.three-steps article {
		display: block;
		margin: 0 auto 2em;
		max-width: 340px;
	}

	.steps.three-steps article:last-child {
		margin-bottom: 0;
	}

	#propiedades {
		padding: 1.75em 4% 0;
	}

	#propiedades li {
		width: 48%;
	}

	#pedir form,
	#pedir .desc {
		display: block;
		margin: 0 auto;
		max-width: 340px;
		padding-left: 0;
		width: auto;
	}

	#pedir h3,
	#pedir .small {
		text-align: center;
	}

	.cuanto-cafe select,
	.cuanto-cafe select.quantity,
	#pedir form,
	#pedir .desc,
	.call-to-action,
	.call-to-action a,
	.call-to-action input {
		box-sizing: border-box;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 100% !important;
		width: 100%;
	}

	.call-to-action a,
	.call-to-action input {
		width: min(100%, 260px);
	}

	.call-to-action a,
	.call-to-action input {
		max-width: 100%;
	}

	.call-to-action.alt a {
		min-width: 0;
		width: auto;
		max-width: 100%;
		padding: 0 1.2em;
	}

	#testimonios {
		text-align: center;
	}

	#testimonios .wrap {
		overflow: visible;
	}

	#testimonios .big-quote,
	#testimonios article {
		display: block;
		float: none;
		margin: 0 auto 2em;
		max-width: 420px;
		text-align: left;
		width: auto;
	}

	#testimonios .big-quote {
		font-size: 1.25em;
		margin-left: 1.5em;
		margin-right: 1em;
	}

	#faq article {
		display: block;
		margin: 0 auto 1.5em;
		max-width: 520px;
		width: auto;
	}

	.inside-article {
		margin: 1.5em auto 3em;
		padding: 0 16px;
	}

	.entry-title {
		font-size: 1.6em;
	}
}

@media (max-width: 768px) {
	.chepes-home section {
		padding: 48px 0;
	}

	.steps.nuestro-cafe article .thumb {
		height: 140px;
		width: 140px;
	}

	.steps.nuestro-cafe article img {
		max-width: 140px;
	}
}

@media (max-width: 540px) {
	body {
		font-size: 17px;
	}

	.site-logo img,
	.header-image.is-logo-image,
	.site-header.is-stuck .site-logo img {
		max-width: none !important;
		width: 104px !important;
	}

	.chepes-hero,
	.page-template-landing-pages .head {
		padding: 32px 16px 40px !important;
	}

	.page-template-landing-pages h1,
	.chepes-hero h1 {
		font-size: 1.28rem !important;
		line-height: 1.25;
		max-width: 100% !important;
		white-space: normal !important;
	}

	.chepes-hero h2,
	.page-template-landing-pages .head h2 {
		font-size: 1.02rem !important;
		margin-top: 0.7em;
		max-width: 100% !important;
		white-space: normal !important;
	}

	.chepes-home h2 {
		font-size: 1.35em;
	}

	.chepes-home .wrap > h3,
	.page .wrap > h3 {
		font-size: 1.1em;
	}

	.steps article h3 {
		font-size: 1.08em;
	}

	#propiedades {
		padding: 1.25em 3% 0;
	}

	#propiedades li {
		margin-bottom: 1.4em;
		width: 100%;
	}

	#testimonios .big-quote {
		font-size: 1.15em;
		margin-left: 1.25em;
		margin-right: 0.5em;
	}

	#testimonios .big-quote:before {
		font-size: 1.6em;
		left: -22px;
	}

	.call-to-action a,
	.call-to-action input {
		font-size: 16px;
		height: 52px;
		line-height: 52px;
		width: min(220px, 100%);
	}

	.call-to-action.alt a {
		font-size: 0.85em;
		height: 48px;
		line-height: 48px;
		white-space: normal;
	}

	.chepes-footer-nav {
		flex-direction: column;
		gap: 0.75rem;
	}
}

/* =========================================================================
   Order module  (inc/order.php, page-comprar.php, page-buy.php)

   The 2016 checkout was a Stripe form that the archive never captured, so
   this is new rather than recovered. It borrows the page's existing
   vocabulary — cream panels, brown headings, the orange action — and adds
   nothing that is not already in the palette.

   One deliberate departure: the submit button uses a deeper orange than
   --chepes-cta. White on #F28A2D is 2.49:1, and the one control that has to
   be unmistakable is a poor place to fail contrast. #B35F14 reads as the
   same colour and measures 4.69:1.
   ========================================================================= */

.chepes-order {
	--chepes-cta-strong: #B35F14;
	margin: 0 auto;
	max-width: 1060px;
	padding: 3em 20px 4em;
	text-align: left;
}

.chepes-order h1 {
	font-size: 2.1em;
	margin-bottom: 0.2em;
}

.chepes-order .lede {
	color: var(--chepes-muted);
	font-size: 1.05em;
	margin-bottom: 2em;
	max-width: 36em;
}

.chepes-order-cols {
	display: grid;
	gap: 2.5em;
	grid-template-columns: minmax(0, 1fr) 21em;
	align-items: start;
}

.chepes-step {
	margin-bottom: 2.5em;
}

.chepes-step h2 {
	border-bottom: 1px solid #E4DEDA;
	font-size: 1.35em;
	margin-bottom: 1em;
	padding-bottom: 0.4em;
}

/* Fields ---------------------------------------------------------------- */

.chepes-field,
.chepes-qty {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.4em;
}

.chepes-field label,
.chepes-qty label,
.chepes-freq legend {
	color: var(--chepes-brown);
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 0.3em;
	padding: 0;
}

.chepes-order .hint {
	color: var(--chepes-muted);
	font-size: 0.8em;
	margin-bottom: 0.45em;
}

.chepes-order .err {
	color: #A3231B;
	font-size: 0.82em;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.chepes-order input[type="text"],
.chepes-order input[type="tel"],
.chepes-order input[type="number"],
.chepes-order textarea {
	background: #fff;
	border: 2px solid #BDC3C7;
	border-radius: 5px;
	color: var(--chepes-text);
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1em;
	padding: 0.7em 0.8em;
	width: 100%;
}

.chepes-order textarea {
	resize: vertical;
}

.chepes-field.is-bad input,
.chepes-field.is-bad textarea {
	border-color: #A3231B;
}

/* Every control shows focus. The order form is the one place on the site
   where losing your position costs a sale. */
.chepes-order :is(input, textarea, button, a):focus-visible {
	outline: 3px solid var(--chepes-brown);
	outline-offset: 2px;
}

/* Quantity stepper ------------------------------------------------------ */

.chepes-qty .stepper {
	display: flex;
	align-items: stretch;
	max-width: 11em;
}

.chepes-qty .stepper button {
	background: #fff;
	border: 2px solid #BDC3C7;
	color: var(--chepes-brown);
	cursor: pointer;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1;
	min-height: 48px;
	width: 48px;
}

.chepes-qty .stepper button:hover {
	background: var(--chepes-cream);
	color: var(--chepes-brown);
}

.chepes-qty .stepper .step-down {
	border-radius: 5px 0 0 5px;
	border-right: 0;
}

.chepes-qty .stepper .step-up {
	border-radius: 0 5px 5px 0;
	border-left: 0;
}

.chepes-qty .stepper input {
	border-radius: 0;
	min-height: 48px;
	text-align: center;
	width: 4.5em;
	-moz-appearance: textfield;
}

.chepes-qty .stepper input::-webkit-outer-spin-button,
.chepes-qty .stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Frequency cards ------------------------------------------------------- */

.chepes-freq {
	border: 0;
	margin: 0;
	padding: 0;
}

.chepes-freq legend {
	margin-bottom: 0.6em;
}

.freq-card {
	align-items: start;
	background: #fff;
	border: 2px solid #E4DEDA;
	border-radius: 6px;
	cursor: pointer;
	display: grid;
	gap: 0 0.75em;
	grid-template-columns: auto 1fr;
	margin-bottom: 0.6em;
	padding: 0.9em 1em;
}

.freq-card input {
	accent-color: var(--chepes-brown);
	grid-row: 1 / 3;
	height: 1.15em;
	margin: 0.15em 0 0;
	width: 1.15em;
}

.freq-label {
	color: var(--chepes-brown);
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: 600;
}

.freq-note {
	color: var(--chepes-muted);
	font-size: 0.82em;
}

/* Selected state is a border and a fill, never colour alone — the radio dot
   carries it too. */
.freq-card:has(input:checked) {
	background: var(--chepes-cream);
	border-color: var(--chepes-brown);
}

.freq-card:has(input:focus-visible) {
	outline: 3px solid var(--chepes-brown);
	outline-offset: 2px;
}

/* Summary --------------------------------------------------------------- */

.chepes-summary {
	background: var(--chepes-cream);
	border-radius: 8px;
	padding: 1.5em;
	position: sticky;
	top: 1.5em;
}

.chepes-summary h2 {
	border: 0;
	font-size: 1.15em;
	margin-bottom: 0.8em;
	padding: 0;
}

.chepes-summary dl {
	margin: 0 0 1em;
}

.chepes-summary dl > div {
	border-bottom: 1px solid #E1DAD5;
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.55em 0;
}

.chepes-summary dt {
	color: var(--chepes-muted);
	font-size: 0.85em;
}

.chepes-summary dd {
	color: var(--chepes-text);
	font-size: 0.85em;
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.sum-total {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.4em;
	margin: 0 0 1em;
}

.sum-total > span:first-child {
	color: var(--chepes-brown);
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: 600;
}

.sum-total strong {
	color: var(--chepes-brown);
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	margin-left: auto;
}

.sum-total .per {
	color: var(--chepes-muted);
	font-size: 0.78em;
	width: 100%;
	text-align: right;
}

.chepes-submit {
	background: var(--chepes-cta-strong);
	border: 0;
	border-radius: 5px;
	box-shadow: #8E4A0F 1px 2px 0 0;
	color: #fff;
	cursor: pointer;
	display: block;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1.05em;
	font-weight: 700;
	min-height: 56px;
	width: 100%;
}

.chepes-submit:hover {
	background: #9C5211;
	color: #fff;
}

.sum-note {
	color: var(--chepes-muted);
	font-size: 0.78em;
	margin: 0.9em 0 0;
}

/* Error summary --------------------------------------------------------- */

/* Focus lands here after a rejected submission so a screen reader and a
   sighted user end up in the same place. It is tabindex="-1", never reached
   by keyboard, so the browser's default ring is noise — the red rule and the
   heading already say where you are. */
.chepes-errors:focus {
	outline: none;
}

.chepes-errors {
	background: #FCEFEE;
	border-left: 4px solid #A3231B;
	margin-bottom: 2em;
	padding: 1em 1.25em;
}

.chepes-errors p {
	color: #A3231B;
	margin: 0 0 0.4em;
}

.chepes-errors ul {
	margin: 0 0 0 1.1em;
}

.chepes-errors li {
	list-style: disc;
	margin-bottom: 0.2em;
}

.chepes-errors a {
	color: #A3231B;
}

/* Confirmation ---------------------------------------------------------- */

.chepes-done .chepes-order-cols {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chepes-recap div {
	border-bottom: 1px solid #E4DEDA;
	display: flex;
	gap: 1em;
	justify-content: space-between;
	padding: 0.5em 0;
}

.chepes-recap dt {
	color: var(--chepes-muted);
	font-size: 0.9em;
}

.chepes-recap dd {
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.chepes-addr {
	line-height: 1.6;
}

.chepes-done .call-to-action {
	text-align: left;
}

@media (max-width: 860px) {
	.chepes-order-cols,
	.chepes-done .chepes-order-cols {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The summary stops being a sidebar and becomes the last thing you read
	   before the button, so it must not stick over the fields. */
	.chepes-summary {
		position: static;
	}
}

@media (max-width: 540px) {
	.chepes-order {
		padding: 2em 16px 3em;
	}

	.chepes-order h1 {
		font-size: 1.6em;
	}
}

/* /en/ is not a WP page, so body.home is missing unless functions.php
   adds it. :has(.chepes-home) covers both landings either way. */
body:has(.chepes-home) .site.container,
body:has(.chepes-home) .site.grid-container,
body:has(.chepes-home) .container.grid-container {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
}

body:has(.chepes-home) .site-content,
body:has(.chepes-home) .site-content.grid-container,
body:has(.chepes-home) .content-area,
body:has(.chepes-home) .site-main {
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

body:has(.chepes-home) .site-header,
body:has(.chepes-home) .main-navigation,
body:has(.chepes-home) .main-navigation .inside-navigation {
	background-color: transparent !important;
	background-image: none !important;
}

body:has(.chepes-home) .site-header.is-stuck,
body:has(.chepes-home) .site-header.is-stuck .main-navigation,
body:has(.chepes-home) .site-header.is-stuck .main-navigation .inside-navigation {
	background-color: var(--chepes-dark) !important;
}

@media (min-width: 1024px) {
	body:has(.chepes-home) .chepes-hero {
		margin-top: calc( -1 * var(--chepes-header-h) );
	}
}

/* =========================================================================
   2026 refresh — same 2016 colours, quieter shapes. Palette stays
   --chepes-dark #080300, nav #FFB97E, cta #F28A2D / #D77620, brown
   #5F4242, cream #F1EEEC, text #222, footer #F3F0EE, cupping #893333.
   ========================================================================= */

body {
	font-size: 19px;
	letter-spacing: 0.01em;
	line-height: 1.65;
}

.chepes-home section {
	padding: 96px 0;
}

.chepes-home h2 {
	font-size: clamp(1.7rem, 2.4vw, 2.15rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.chepes-hero h1,
.page-template-landing-pages h1 {
	font-size: clamp(1.75rem, 4.2vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.chepes-hero h2,
.page-template-landing-pages .head h2 {
	font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.call-to-action a,
.call-to-action input {
	border-radius: 999px;
	box-shadow: var(--chepes-cta-shadow) 1px 2px 0 0;
}

.call-to-action.alt a {
	border-radius: 999px;
}

.cuanto-cafe select {
	border-radius: 999px;
	height: 48px;
	line-height: 48px;
	padding: 0 36px 0 18px;
}

#propiedades {
	border-radius: 24px;
	margin: 1.5em auto 2.5em;
	max-width: 1100px;
	padding: 2.75em 6% 0.5em;
}

#pedir .precio {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1.45em;
	font-weight: 700;
}

#testimonios article img {
	height: 56px;
	width: 56px;
}

@media (max-width: 1023px) {
	.chepes-home section {
		padding: 64px 0;
	}
}

/* =========================================================================
   Legibility pass on the 2026 refresh.

   Measured by sampling the rendered pixels under each line of hero copy —
   the background is a photograph under a gradient, so nothing here can be
   reasoned about, only measured. Before: h1 1.48:1 at 1440, h2 1.45-1.68:1
   at every width, the orange button 2.57:1 with 30-40% of its area below
   the minimum.

   The brand orange is untouched. The button keeps #F28A2D and darkens its
   label instead, which both passes and reads as the more current treatment;
   darkening the fill would have changed the one colour the site is known by.
   ========================================================================= */

:root {
	/* #F28A2D as text on white is 2.49:1. Same hue, deep enough to read. */
	--chepes-link: #B35F14;
	/* On the orange fill. 7.1:1, where white was 2.49:1. */
	--chepes-cta-ink: #2B1400;
}

a {
	color: var(--chepes-link);
}

.entry-content a:not(.call-to-action a):not(.wp-block-button__link) {
	color: var(--chepes-link);
}

/* A scrim under the copy rather than over the whole photo: the farm stays
   bright at the edges and the words get a cushion exactly where they sit. */
.chepes-hero::after,
.page-template-landing-pages .head::after {
	background:
		radial-gradient(
			ellipse 68% 58% at 50% 44%,
			rgba(8, 3, 0, 0.62) 0%,
			rgba(8, 3, 0, 0.42) 45%,
			rgba(8, 3, 0, 0.12) 75%,
			rgba(8, 3, 0, 0) 100%
		),
		linear-gradient(
			to bottom,
			rgba(8, 3, 0, 0.42) 0%,
			rgba(8, 3, 0, 0.18) 38%,
			rgba(8, 3, 0, 0.38) 100%
		);
}

/* A tight halo carries the glyph edges where the photo is brightest. The
   old shadow was offset down-right, so it darkened one side and left the
   stems on their own. */
.chepes-hero h1,
.page-template-landing-pages h1 {
	text-shadow: 0 1px 2px rgba(8, 3, 0, 0.55), 0 0 18px rgba(8, 3, 0, 0.45);
}

.chepes-hero h2,
.page-template-landing-pages .head h2 {
	opacity: 1;
	text-shadow: 0 1px 2px rgba(8, 3, 0, 0.6), 0 0 14px rgba(8, 3, 0, 0.5);
}

/* Only the orange fill takes the dark label. The .alt variant is already a
   dark brown (#863F00) and keeps white on it at 7.7:1 — giving it the dark
   ink too put dark on dark at 2.27:1. */
.call-to-action:not(.alt) a,
.call-to-action:not(.alt) input,
.call-to-action:not(.alt) a:hover,
.call-to-action:not(.alt) input:hover {
	color: var(--chepes-cta-ink);
}

/* Headlines break into even lines instead of leaving one orphan word on the
   last row. The hero h1 was ending on "comprarlo" alone at 1440. */
.chepes-hero h1,
.page-template-landing-pages h1,
.chepes-hero h2,
.page-template-landing-pages .head h2,
.chepes-home h2,
.chepes-home .wrap > h3,
.steps article h3 {
	text-wrap: balance;
}

/* Body copy avoids a single word on the final line. */
.chepes-home p,
.entry-content p {
	text-wrap: pretty;
}

/* The hero copy was capped at a flat 17rem for everything under 1024, which
   is right at 390 and cramped everywhere above it: at 834 the headline fell
   into four lines about 180px wide with half the viewport unused beside it.
   Scaling the cap with the viewport keeps the narrow measure on a phone and
   lets it breathe on a tablet. */
@media (max-width: 1023px) {
	.chepes-hero h1,
	.page-template-landing-pages h1 {
		max-width: min(38rem, 90vw) !important;
	}

	.chepes-hero h2,
	.page-template-landing-pages .head h2 {
		max-width: min(32rem, 88vw) !important;
	}
}

/* =========================================================================
   Fidelity pass below the fold. Each of these was measured against the 2016
   snapshot; none is a preference.
   ========================================================================= */

/* The big opening quote mark has never rendered on this site. It is a
   ::before positioned at left:-36px, and TWO ancestors clip it — the article
   and the section's wrap, both `overflow: hidden` to contain floats.
   flow-root does the containing without the clipping, which is what
   overflow:hidden was standing in for before it existed. */
#testimonios .wrap,
#testimonios .big-quote {
	display: flow-root;
	overflow: visible;
}

/* Card images sat on the top edge of their round thumb — 0px above and 57px
   below in a 170px box — which pushed every heading about 28px away from the
   picture it belongs to. 2016 centred them with an inline-block strut; a
   flex box is the same result without the extra element. */
.steps article .thumb {
	align-items: center;
	display: flex;
	justify-content: center;
	/* flex makes this a block-level box, which a fixed width then pins to the
	   left of a centred card. The inline-block it used to be was centred by
	   the card's text-align; auto margins are how a block does the same. */
	margin-inline: auto;
}

/* "El café llega a tu casa los martes" is a footnote, not body copy. The
   existing rule is scoped `article p.small` and this paragraph sits in
   .desc, so it never matched. */
#pedir .small {
	font-size: 0.8em;
}

/* The buttons set 18px explicitly; in 2016 they set no size at all and
   inherited the 20px body. The FAQ button keeps its own smaller scale. */
.chepes-home .call-to-action a,
.chepes-home .call-to-action input {
	font-size: 20px;
}

#faq .call-to-action a {
	font-size: 0.7em;
}

/* =========================================================================
   2026 layout — grid, air, pills. Colours unchanged.
   ========================================================================= */

.chepes-hero,
.page-template-landing-pages .head {
	min-height: min(88vh, 820px);
	background-position: 50% 32%;
}

.chepes-hero .wrap,
.page-template-landing-pages .head .wrap {
	padding-left: 24px;
	padding-right: 24px;
}

.chepes-home .wrap {
	max-width: 1120px;
}

.steps.two-steps .step-container,
.steps.three-steps .step-container,
.steps.nuestro-cafe {
	display: grid;
	gap: 2.5rem 2rem;
	margin-top: 3.5em;
}

.steps.two-steps .step-container {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.steps.three-steps .step-container,
.steps.nuestro-cafe {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steps.two-steps article,
.steps.three-steps article,
.steps.nuestro-cafe article {
	display: block;
	margin: 0;
	max-width: none;
	width: auto;
}

#propiedades {
	display: grid;
	gap: 1.75rem 1.25rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

#propiedades li {
	display: block;
	margin: 0 0 1.5em;
	width: auto;
}

#pedir .wrap {
	align-items: center;
	display: flex;
	flex-direction: column;
}

#pedir .desc,
#pedir form {
	display: block;
	padding-left: 0;
	width: min(100%, 420px);
}

#testimonios .wrap {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
	overflow: visible;
}

#testimonios article,
#testimonios .big-quote {
	display: block;
	float: none;
	margin: 0;
	width: auto;
}

#testimonios .big-quote {
	background: var(--chepes-cream);
	border-radius: 20px;
	padding: 1.75rem 1.75rem 1.5rem 2.25rem;
}

#testimonios article:not(.big-quote) {
	background: #fff;
	border: 1px solid #e6e0dc;
	border-radius: 20px;
	padding: 1.5rem;
}

#faq .wrap {
	display: grid;
	gap: 0.85rem;
	justify-items: center;
}

#faq .wrap > h2,
#faq .wrap > .call-to-action {
	grid-column: 1 / -1;
}

#faq article {
	background: #fff;
	border-radius: 16px;
	display: block;
	margin: 0;
	max-width: 720px;
	padding: 1.15rem 1.4rem;
	text-align: left;
	width: 100%;
}

@media (max-width: 1023px) {
	.chepes-hero,
	.page-template-landing-pages .head {
		min-height: 0;
	}

	.steps.two-steps .step-container,
	.steps.three-steps .step-container,
	.steps.nuestro-cafe,
	#propiedades,
	#testimonios .wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	#propiedades {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#testimonios .big-quote {
		padding-left: 1.5rem;
	}
}

@media (max-width: 540px) {
	#propiedades {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The testimonials keep 2016's light grey, and it is the one place the
   original is not worth reproducing: #95a5a6 measures 2.56:1 on white and
   2.21:1 on the cream card, where AA asks 4.5. That is not a subtle miss —
   the quotes are body copy people are meant to read, and at 12.4px the
   @handles are the smallest text on the page.

   --chepes-muted is the site's own grey and reads the same way: subordinate
   to the quote, not competing with it. 6.65:1 on white, 5.76:1 on cream. */
#testimonios article p,
#testimonios p.twitter,
#testimonios .big-quote .autor p,
#testimonios span.twitter {
	color: var(--chepes-muted);
}

/* The cupping card is eight short label/value pairs, and on a phone it was
   rendering as eight full-width rows — 1080px of scrolling for something 2016
   fitted in 344px with two columns. Two up to 630px, four above it, which is
   what the original did.

   It is a grid now, so the column count is grid-template-columns; a width on
   the items does nothing, because a grid item is sized by its track. */
@media (max-width: 630px) {
	#propiedades {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 631px) and (max-width: 1023px) {
	#propiedades {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The order dropdowns were full-bleed below 1024 — 736px of select to pick
   the number 1. They stay inline and sized, as they are on desktop; only the
   height is kept at 48px so they remain a comfortable touch target. */
@media (max-width: 1023px) {
	.cuanto-cafe select {
		display: inline-block !important;
		max-width: none !important;
		min-height: 48px;
		width: 230px !important;
	}

	.cuanto-cafe select.quantity {
		width: 90px !important;
	}
}

/* The pull-quote was capped at 420px while the FAQ beside it ran to 720px.
   2016 let it fill the wrap; there is no reason for it to be the narrowest
   block on the page. */
@media (max-width: 1023px) {
	#testimonios .big-quote,
	#testimonios article {
		max-width: none;
	}
}

/* Footer links were 126x23 tap targets — the text box and nothing more,
   where 44x44 is the floor for a finger. Padding makes the target the size
   it looks like it is. */
.chepes-footer-nav a {
	display: inline-block;
	padding: 0.7rem 0.4rem;
}

.chepes-footer-nav {
	gap: 0 1.25rem;
}

/* On a phone the nav was flex-direction: column, so six links became six
   stacked rows. Letting them wrap puts two on a line: shorter to scroll and
   the same number of taps. */
@media (max-width: 1023px) {
	.chepes-footer-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 1.25rem;
	}
}

/* Mobile landing header is transparent (`body:has(.chepes-home)` beats the
   dark bar) but the hero was not pulled under it, so MENU sat on a white
   strip and the photo started below. Same overlay as desktop; 69px is the
   measured mobile header (logo 53 + 8px padding). Extra padding-top keeps
   the headline below the logo. */
@media (max-width: 1023px) {
	body:has(.chepes-home) {
		--chepes-header-h-mobile: 96px;
	}

	body:has(.chepes-home) .chepes-hero,
	body:has(.chepes-home) .head {
		margin-top: calc(-1 * var(--chepes-header-h-mobile));
		min-height: 70vh;
		padding-top: calc(var(--chepes-header-h-mobile) + 36px) !important;
	}
}

@media (max-width: 540px) {
	body:has(.chepes-home) .chepes-hero,
	body:has(.chepes-home) .head {
		padding-top: calc(var(--chepes-header-h-mobile) + 32px) !important;
	}
}

/* Sticky bar: the header is the dark sheet. GP sets .main-navigation to
   z-index 100, which stacks the nav box over the logo (5). Raising the
   mark to 120 did not land on the edge; drop the nav instead. */
.site-header.is-stuck .main-navigation,
.site-header.is-stuck #site-navigation,
body:has(.chepes-home) .site-header.is-stuck .main-navigation,
body:has(.chepes-home) .site-header.is-stuck #site-navigation {
	background-color: transparent !important;
	z-index: 1;
}

.site-header.is-stuck .site-logo {
	z-index: 5;
}