/* ==========================================================================
   Senda Dorada — premium public experience
   A restrained coffee / gold / cream / botanical system layered over the
   existing static architecture. No build step and no external dependencies.
   ========================================================================== */

:root {
  --sd-ink: #1b100a;
  --sd-espresso: #26160e;
  --sd-brown: #3b2417;
  --sd-brown-soft: #563724;
  --sd-cream: #f7f0df;
  --sd-cream-2: #eadcc0;
  --sd-gold: #d6ad46;
  --sd-gold-light: #f2d488;
  --sd-gold-deep: #9b7123;
  --sd-leaf: #39704d;
  --sd-leaf-light: #75a982;
  --sd-copper: #a65b31;
  --sd-text: #fffaf0;
  --sd-text-muted: #d5c6ad;
  --sd-line: rgba(232, 199, 125, .22);
  --sd-glass: rgba(42, 25, 16, .72);
  --sd-glass-light: rgba(255, 249, 236, .08);
  --sd-shadow: 0 24px 70px rgba(8, 4, 2, .34);
  --sd-radius: 22px;
  --sd-radius-sm: 14px;
  --sd-ease: cubic-bezier(.22, .8, .24, 1);
}

html {
  scroll-padding-top: 92px;
}

body.sd-premium,
.sd-premium-page {
  color: var(--sd-text);
  background:
    radial-gradient(circle at 10% -10%, rgba(214, 173, 70, .13), transparent 31rem),
    radial-gradient(circle at 100% 20%, rgba(57, 112, 77, .11), transparent 34rem),
    var(--sd-espresso);
}

body.sd-premium::selection,
.sd-premium-page::selection {
  color: var(--sd-ink);
  background: var(--sd-gold-light);
}

.sd-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100500;
  transform: translateY(-160%);
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--sd-ink);
  background: var(--sd-gold-light);
  box-shadow: var(--sd-shadow);
  font: 700 13px/1 Poppins, sans-serif;
  transition: transform .18s var(--sd-ease);
}

.sd-skip-link:focus {
  transform: translateY(0);
}

body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sd-gold-light);
  outline-offset: 3px;
}

body :where(button, input, select, textarea, .btn, .nav-cta) {
  min-height: 44px;
}

.sd-route-contact .btn {
  min-height: 48px;
}

/* The protected Don Laverde widget injects its own visual rules later. These
   size-only overrides preserve every ID/event while keeping its close control
   comfortably tappable. */
#dl-head .dl-close {
  min-width: 44px !important;
  width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
}

/* El botón de enviar del chat medía 42 px de ancho: por debajo del mínimo
   táctil, y es el control que más se pulsa del widget. Se corrige aquí, no en
   don-laverde.js, para no alterar su huella. */
#dl-send {
  min-width: 44px !important;
  min-height: 44px !important;
}

body :where(button, .btn, .nav-cta) {
  touch-action: manipulation;
}

.nav {
  border-bottom: 1px solid rgba(242, 212, 136, .16);
  background: rgba(27, 16, 10, .76);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035), 0 10px 36px rgba(8, 4, 2, .18);
}

.nav.sd-scrolled {
  background: rgba(22, 12, 7, .9);
  box-shadow: 0 12px 42px rgba(8, 4, 2, .32);
}

.nav .nav-inner {
  min-height: 72px;
}

.nav-logo {
  gap: 11px;
  letter-spacing: -.01em;
}

.nav-logo-img {
  border: 1px solid rgba(242, 212, 136, .25);
  border-radius: 50% !important;
  background: var(--sd-cream);
  box-shadow: 0 0 0 4px rgba(214, 173, 70, .06), 0 8px 26px rgba(0, 0, 0, .25);
}

.nav-logo small {
  color: #bda98c;
}

.nav-links {
  gap: 2px;
}

.nav-links > a:not(.nav-cta) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 10px;
  color: #d9c9b0;
}

.nav-links > a:not(.nav-cta):hover,
.nav-links > a:not(.nav-cta)[aria-current="page"] {
  color: var(--sd-gold-light);
  background: rgba(242, 212, 136, .075);
}

.nav-cta,
.btn.btn-gold,
.sd-gold-button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 235, 178, .5);
  color: #211409;
  background:
    linear-gradient(180deg, rgba(255, 249, 220, .45), transparent 43%),
    linear-gradient(135deg, #f1d17b 0%, #d4aa43 51%, #b78329 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(83, 48, 9, .25),
    0 10px 24px rgba(171, 123, 37, .22);
}

.nav-cta::after,
.btn.btn-gold::after,
.sd-gold-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, .28) 45%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .24s var(--sd-ease);
}

.btn.btn-ghost,
.sd-ghost-button {
  border-color: rgba(242, 212, 136, .28);
  color: var(--sd-cream);
  background: rgba(255, 250, 240, .045);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.btn.btn-ghost:hover,
.sd-ghost-button:hover {
  border-color: rgba(242, 212, 136, .58);
  color: var(--sd-gold-light);
  background: rgba(242, 212, 136, .1);
}

.burger {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(242, 212, 136, .2);
  border-radius: 12px;
  color: var(--sd-gold-light);
  background: rgba(255, 255, 255, .045);
}

/* Golden farm-to-door journey — the road in the logo becomes a calm, readable
   commercial story. Each vehicle gets its own turn in one 24-second cycle. */
.sd-journey {
  width: min(660px, 100%);
  margin: 18px 0 8px;
  color: var(--sd-gold-light);
}

.sd-journey svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.sd-journey-road {
  fill: none;
  stroke: url("#sdJourneyGold");
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sd-draw-route 1.35s .2s var(--sd-ease) forwards;
}

.sd-journey-waypoints {
  fill: var(--sd-gold-light);
  opacity: .75;
}

.sd-journey-icon,
.sd-journey-door {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sd-journey-fill {
  fill: rgba(242, 212, 136, .16);
}

/* El avión va macizo: a 26 px una silueta llena se reconoce y un contorno de
   la misma forma se convierte en una mancha de líneas. */
.sd-journey-solid {
  fill: currentColor;
  stroke: none;
}

/* Las paradas quedan quietas y algo atenuadas: son el mapa, no el sujeto.
   El ojo sigue el envío, no cuatro dibujos moviéndose a la vez. */
.sd-journey-stop {
  opacity: .9;
}

/* El disco oscuro corta la línea detrás de cada icono: sin él, el trazo de la
   ruta cruza el dibujo y lo vuelve ilegible. */
.sd-journey-node {
  fill: #2b190d;
  stroke: rgba(242, 212, 136, .38);
  stroke-width: 1.2;
}

.sd-journey-dot {
  fill: var(--sd-gold-light);
  stroke: rgba(33, 19, 10, .8);
  stroke-width: 1.2;
}

/* La estela apunta hacia atrás; rotate="auto" en el animateMotion la mantiene
   alineada con la dirección de avance en toda la curva. */
.sd-journey-trail {
  fill: none;
  stroke: url("#sdJourneyGold");
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: .5;
}

.sd-journey-labels {
  fill: #bca77f;
  font: 700 9.5px/1 Poppins, sans-serif;
  letter-spacing: .12em;
}

.sd-journey-caption {
  display: block;
  margin-top: -3px;
  color: #bba98d;
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: .035em;
}

@keyframes sd-draw-route {
  to { stroke-dashoffset: 0; }
}

.sd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 720px;
  padding: 72px 0 58px;
  background:
    linear-gradient(96deg, rgba(25, 13, 7, .98) 0%, rgba(30, 17, 10, .92) 44%, rgba(30, 17, 10, .48) 72%, rgba(30, 17, 10, .68) 100%),
    url("/assets/img/farms/quebraditas/quebraditas-landscape.jpg") center / cover no-repeat;
}

.sd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 26%, rgba(242, 212, 136, .19), transparent 17rem),
    linear-gradient(180deg, transparent 72%, var(--sd-espresso));
}

.sd-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
  gap: clamp(30px, 5vw, 74px);
  align-items: center;
}

.sd-hero-grid > *,
.sd-paths,
.sd-path-card > span:nth-child(2) {
  min-width: 0;
}

.sd-hero-copy {
  max-width: 720px;
}

.sd-kicker,
.sd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sd-gold-light);
  font: 700 11px/1.3 Poppins, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sd-kicker::before,
.sd-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--sd-gold), transparent);
}

.sd-hero h1 {
  max-width: 780px;
  margin: 15px 0 0;
  color: #fffaf0;
  font-size: clamp(40px, 5.3vw, 72px);
  line-height: .99;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.sd-hero h1 span {
  color: var(--sd-gold-light);
}

.sd-hero-lede {
  max-width: 650px;
  margin: 18px 0 0;
  color: #e3d7c3;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.68;
}

.sd-hero-actions,
.sd-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.sd-human-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  color: #d8c6a8;
  font-size: 13px;
  text-decoration-color: rgba(242, 212, 136, .5);
  text-underline-offset: 4px;
}

.sd-human-link:hover {
  color: var(--sd-gold-light);
}

.btn:active,
.sd-gold-button:active,
.sd-copy-button:active {
  transform: scale(.98);
  transition-duration: 140ms;
}

.sd-paths {
  display: grid;
  gap: 11px;
}

.sd-path-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  gap: 13px;
  align-items: center;
  min-height: 112px;
  width: 100%;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(242, 212, 136, .22);
  border-radius: 20px;
  color: var(--sd-text);
  text-decoration: none;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 241, 193, .14), transparent 42%),
    linear-gradient(145deg, rgba(58, 37, 24, .82), rgba(29, 17, 11, .7));
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 48px rgba(6, 3, 1, .22);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .22s var(--sd-ease), border-color .22s, background-color .22s;
}

.sd-path-card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 212, 136, .25);
  border-radius: 14px;
  color: var(--sd-gold-light);
  background: rgba(242, 212, 136, .08);
}

.sd-path-card-icon svg {
  width: 23px;
  height: 23px;
}

.sd-path-card strong {
  display: block;
  margin-bottom: 4px;
  color: #fffaf0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sd-path-card small {
  display: block;
  color: #cbbba3;
  font-size: 11.5px;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sd-path-arrow {
  color: var(--sd-gold);
  font-size: 20px;
}

.sd-trust-ribbon {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  border-block: 1px solid rgba(242, 212, 136, .14);
  background:
    linear-gradient(90deg, rgba(214, 173, 70, .07), transparent 30%, rgba(57, 112, 77, .08)),
    #20130c;
}

.sd-trust-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sd-trust-item {
  min-height: 98px;
  padding: 18px 14px;
  border-right: 1px solid rgba(242, 212, 136, .12);
}

.sd-trust-item:last-child {
  border-right: 0;
}

.sd-trust-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--sd-cream);
  font-size: 12px;
}

.sd-trust-item span {
  color: #aa9a82;
  font-size: 10.5px;
  line-height: 1.45;
}

.sd-secondary-nav {
  padding: 24px 0 4px;
  background: var(--sd-espresso);
}

.sd-secondary-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sd-secondary-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid rgba(242, 212, 136, .16);
  border-radius: 999px;
  color: #cdbda4;
  background: rgba(255, 255, 255, .025);
  font-size: 12px;
  text-decoration: none;
}

.sd-secondary-links a:hover {
  border-color: rgba(242, 212, 136, .42);
  color: var(--sd-gold-light);
}

.sd-content-section {
  padding: clamp(64px, 8vw, 104px) 0;
}

.sd-section-head {
  max-width: 720px;
  margin-bottom: 34px;
}

.sd-section-head h2 {
  margin: 10px 0;
  color: var(--sd-cream);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.sd-section-head p {
  color: var(--sd-text-muted);
  line-height: 1.7;
}

.sd-photo-story {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 16px;
}

.sd-photo-card {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid rgba(242, 212, 136, .16);
  border-radius: var(--sd-radius);
  background: #1b110b;
  box-shadow: var(--sd-shadow);
}

.sd-photo-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sd-photo-card figcaption {
  position: absolute;
  inset: auto 14px 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  color: #f8efdf;
  background: rgba(25, 15, 9, .72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 12px;
  line-height: 1.5;
}

/* Shared page shells: Samples, Trust Center and refreshed utility pages. */
.sd-page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 120px) 0 54px;
  border-bottom: 1px solid var(--sd-line);
  background:
    radial-gradient(circle at 78% 25%, rgba(214, 173, 70, .15), transparent 23rem),
    linear-gradient(155deg, #321e13, #1a100a 68%);
}

.sd-page-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -190px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(242, 212, 136, .13);
  border-radius: 50%;
  box-shadow: inset 0 0 90px rgba(214, 173, 70, .05);
}

.sd-page-hero .wrap {
  position: relative;
  z-index: 1;
}

.sd-page-hero h1 {
  max-width: 840px;
  margin: 12px 0;
  color: var(--sd-cream);
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}

/* El acento dorado del titular interior. La regla existía solo para .sd-hero
   (la portada), así que /catalog/ y /documents.html ya traían el <span> en el
   HTML pero se veía crema, igual que el resto de la frase. Senda Dorada es
   dorada: el titular de cada página remata en oro. */
.sd-page-hero h1 span {
  color: var(--sd-gold-light);
}

.sd-page-hero p {
  max-width: 720px;
  color: var(--sd-text-muted);
  font-size: 16px;
  line-height: 1.72;
}

.sd-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border: 1px solid rgba(242, 212, 136, .25);
  border-radius: 14px;
  color: #e4d7c2;
  background: rgba(214, 173, 70, .07);
  font-size: 12px;
  line-height: 1.55;
}

.sd-notice[data-tone="green"] {
  border-color: rgba(117, 169, 130, .32);
  background: rgba(57, 112, 77, .12);
}

.sd-surface {
  border: 1px solid rgba(242, 212, 136, .17);
  border-radius: var(--sd-radius);
  background:
    linear-gradient(145deg, rgba(255, 251, 241, .06), rgba(255, 255, 255, .018)),
    rgba(42, 25, 16, .66);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: var(--sd-shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.sd-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 22px;
  align-items: start;
}

.sd-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sd-info-card {
  padding: 22px;
}

.sd-info-card h3 {
  margin: 0 0 8px;
  color: var(--sd-gold-light);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
}

.sd-info-card p,
.sd-info-card li {
  color: var(--sd-text-muted);
  font-size: 13px;
  line-height: 1.65;
}

.sd-info-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

.sd-detail-stack {
  display: grid;
  gap: 10px;
}

.sd-detail-stack details {
  overflow: hidden;
  border: 1px solid rgba(242, 212, 136, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

.sd-detail-stack summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 17px;
  color: var(--sd-cream);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.sd-detail-stack summary::-webkit-details-marker {
  display: none;
}

.sd-detail-stack summary::after {
  content: "+";
  color: var(--sd-gold);
  font-size: 21px;
}

.sd-detail-stack details[open] summary::after {
  content: "−";
}

.sd-detail-body {
  padding: 0 17px 17px;
  color: var(--sd-text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.sd-detail-body a {
  color: var(--sd-gold-light);
}

/* Evidence cards: a photograph tied to a caption that states something
   verifiable (named producer, process, altitude) instead of an adjective. */
.sd-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sd-evidence-card {
  overflow: hidden;
}

.sd-evidence-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #140c07;
}

.sd-evidence-card figcaption {
  padding: 13px 15px 15px;
  color: var(--sd-text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.sd-evidence-card figcaption strong {
  display: block;
  margin-bottom: 4px;
  color: var(--sd-gold-light);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Embedded interview: the player sits beside its context and transcript. */
.sd-media-split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
}

/* The interview was published square (its 1080x1080 original-aspect thumbnail
   confirms it), so the frame is 1:1 and capped. A 16:9 box would be mostly
   pillarbox. */
.sd-yt-frame {
  overflow: hidden;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  background: #0d0805;
}

.sd-yt-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* <video controls> is keyboard-focusable, but it is not one of the elements
   the shared :focus-visible rule near the top of this file covers, so a
   keyboard user would otherwise land on it with no visible ring. */
.sd-ambient video:focus-visible {
  outline: 3px solid var(--sd-gold-light);
  outline-offset: 3px;
}

.sd-video-lang {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 9px;
  padding: 5px 10px;
  border: 1px solid rgba(242, 212, 136, .3);
  border-radius: 999px;
  color: var(--sd-gold-light);
  background: rgba(214, 173, 70, .08);
  font: 700 10.5px/1 Poppins, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Both team photographs are 4:3 landscape. Side by side on a phone each cell
   is narrower than it is tall, which would crop the group down to one face,
   so they stack instead — at which point 240px tall matches 4:3 exactly and
   nothing is cropped at all. */
.sd-team-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Real product proof. Keep the complete 2.35:1 source visible: labels and both
   bags must never be cropped at any breakpoint. */
.sd-ambient {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  border: 1px solid rgba(242, 212, 136, .16);
  border-radius: var(--sd-radius);
  background: #140c07;
  box-shadow: var(--sd-shadow);
}

/* height:auto is load-bearing: without it the element keeps the literal pixel
   height of its height attribute instead of scaling with its width. */
.sd-ambient video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1280 / 544;
  object-fit: contain;
}

.sd-ambient-caption {
  margin: 0;
  padding: 10px 14px 12px;
  color: var(--sd-text-muted);
  font: 600 11px/1.45 Poppins, sans-serif;
  letter-spacing: .035em;
  text-align: center;
}

/* Product proof sits near the first buying decision, not inside the team
   section. The source is 2.35:1 and remains completely visible. */
.sd-packaging-proof {
  padding: clamp(62px, 7vw, 92px) 0;
  border-block: 1px solid rgba(242, 212, 136, .12);
}

.sd-packaging-grid {
  display: grid;
  grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
}

.sd-packaging-copy h2 {
  margin: 12px 0 15px;
  color: var(--sd-cream);
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.sd-packaging-copy p {
  margin: 0 0 12px;
  color: var(--sd-text-muted);
  font-size: 14px;
  line-height: 1.72;
}

.sd-packaging-note {
  padding: 12px 14px;
  border-left: 2px solid var(--sd-gold);
  border-radius: 0 10px 10px 0;
  background: rgba(214, 173, 70, .07);
}

.yt-inner {
  grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
  gap: clamp(30px, 5vw, 64px);
}

.yt-embed-wrap {
  max-width: 420px;
  background: #0d0805;
}

/* Natural-aspect masonry: portraits remain portraits, the two cherry photos
   no longer stretch to the height of a different grid row, and no card keeps
   an unexplained brown void below its caption. */
.sd-farm-gallery-grid {
  columns: 3 250px;
  column-gap: 16px;
}

.sd-farm-gallery-grid figure {
  width: 100%;
  display: inline-block;
  break-inside: avoid;
  margin: 0 0 16px !important;
  vertical-align: top;
  background: #1b110b;
}

.sd-farm-gallery-grid img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: block;
  object-fit: contain !important;
}

.sd-farm-gallery-grid figcaption {
  position: relative;
  padding-left: 22px !important;
}

.sd-farm-gallery-grid figcaption::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sd-gold);
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(214, 173, 70, .45);
}

/* Trust evidence rows should size to their own content. The old three-column
   grid stretched every short landscape card to the height of a portrait. */
.sd-evidence-grid {
  align-items: start;
}

.sd-evidence-card {
  align-self: start;
}

.sd-legacy-photo {
  max-width: 480px;
  margin: 18px auto 0;
}

.sd-legacy-photo img {
  width: auto !important;
  max-width: 100%;
  max-height: 440px;
  margin-inline: auto;
  object-fit: contain;
  background: #130b07;
}

/* The map drawing itself stays intact. These cards explain what each leg
   means commercially and use the available width below it. */
.sd-route-steps {
  max-width: 1060px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px auto 0;
}

.sd-route-steps article {
  min-height: 132px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(242, 212, 136, .16);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 251, 241, .045), rgba(255, 255, 255, .012));
}

.sd-route-step-num {
  flex: 0 0 auto;
  color: var(--sd-gold);
  font: 700 10px/1 Poppins, sans-serif;
  letter-spacing: .08em;
}

.sd-route-steps strong {
  display: block;
  margin-bottom: 5px;
  color: var(--sd-cream);
  font-size: 12px;
  line-height: 1.35;
}

.sd-route-steps p {
  margin: 0;
  color: #aa9980;
  font-size: 10.5px;
  line-height: 1.55;
}

.sd-route-contact {
  max-width: 1060px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin: 12px auto 0;
  padding: 16px 18px;
  border: 1px solid rgba(117, 169, 130, .27);
  border-radius: 16px;
  background: rgba(57, 112, 77, .1);
}

.sd-route-contact p {
  max-width: 670px;
  margin: 0;
  color: #c9bca7;
  font-size: 12px;
  line-height: 1.55;
}

.sd-route-contact strong {
  color: #f2eadc;
}

.sd-footer-contact {
  display: grid;
  gap: 8px;
}

.sd-footer-contact-link {
  min-height: 52px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(242, 212, 136, .15);
  border-radius: 12px;
  color: var(--sd-text);
  background: rgba(255, 255, 255, .025);
  text-decoration: none;
  transition: border-color .2s, background-color .2s, transform .2s;
}

.sd-footer-contact-link > span {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 212, 136, .22);
  border-radius: 10px;
  color: var(--sd-gold-light);
  background: rgba(214, 173, 70, .08);
  font: 800 9px/1 Poppins, sans-serif;
}

.sd-footer-contact-link strong {
  align-self: end;
  color: #f4ebdc;
  font-size: 11.5px;
}

.sd-footer-contact-link small {
  align-self: start;
  color: #a9977e;
  font-size: 9.5px;
}

.sd-footer-contact-link:hover {
  border-color: rgba(242, 212, 136, .38);
  background: rgba(214, 173, 70, .06);
  transform: translateY(-1px);
}

/* Sample selector */
.sd-sample-shell {
  padding: 24px;
}

.sd-sample-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.sd-sample-steps span {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(242, 212, 136, .16);
  border-radius: 11px;
  color: #cdbda4;
  background: rgba(18, 10, 6, .34);
  font-size: 11px;
  font-weight: 700;
}

.sd-sample-steps b {
  width: 24px;
  height: 24px;
  display: grid;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--sd-ink);
  background: var(--sd-gold);
  font-size: 11px;
}

.sd-sample-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 22px;
}

.sd-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sd-field {
  display: grid;
  gap: 6px;
}

.sd-field.full {
  grid-column: 1 / -1;
}

.sd-field label,
.sd-field legend {
  color: #d8c8af;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sd-field input,
.sd-field select,
.sd-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(242, 212, 136, .22);
  border-radius: 11px;
  color: var(--sd-cream);
  background: rgba(18, 10, 6, .62);
  font: 500 13px/1.4 Poppins, sans-serif;
}

.sd-field textarea {
  min-height: 84px;
  resize: vertical;
}

.sd-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sd-sample-details,
.sd-secondary-actions {
  border: 1px solid rgba(242, 212, 136, .16);
  border-radius: 11px;
  background: rgba(18, 10, 6, .32);
}

.sd-sample-details summary,
.sd-secondary-actions summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  color: #cfbea4;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.sd-sample-details textarea {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
}

.sd-policy-check {
  grid-column: 1 / -1;
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(117, 169, 130, .28);
  border-radius: 11px;
  color: #cdbda4;
  background: rgba(57, 112, 77, .09);
  font-size: 11px;
  line-height: 1.5;
}

.sd-policy-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  accent-color: var(--sd-gold);
}

.sd-policy-check a {
  color: var(--sd-gold-light);
}

/* El panel de la selección es el elemento más visible del selector: va en oro,
   no en verde. Es Senda Dorada. */
.sd-sample-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(242, 212, 136, .26);
  border-left: 3px solid var(--sd-gold);
  border-radius: 13px;
  background: linear-gradient(120deg, rgba(214, 173, 70, .14), rgba(214, 173, 70, .05));
}

/* Con la etiqueta a tamaño grande el texto se quedaba sin ancho y "Caturra
   Washed TS" caía en cuatro líneas. El bloque de texto crece y el botón no se
   parte; si no caben los tres en una fila, el botón baja entero. */
.sd-sample-selection > div {
  flex: 1 1 190px;
  min-width: 0;
}

.sd-sample-selection > .sd-gold-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* La etiqueta real del lote. Se sirve desde catalog.json, así que si un lote
   no la trae el <figure> queda oculto y la fila no se descuadra. */
.sd-sample-label {
  flex: 0 0 auto;
  margin: 0;
  padding: 5px;
  border: 1px solid rgba(242, 212, 136, .3);
  border-radius: 9px;
  background: rgba(18, 10, 6, .5);
  line-height: 0;
}

.sd-sample-label img {
  width: 112px;
  height: auto;
  border-radius: 5px;
}

.sd-sample-item-label {
  flex: 0 0 auto;
  width: 62px;
  height: auto;
  border-radius: 5px;
  border: 1px solid rgba(242, 212, 136, .22);
}

.sd-sample-selection strong,
.sd-sample-selection span {
  display: block;
}

.sd-sample-selection strong {
  color: var(--sd-cream);
  font-size: 13px;
}

.sd-sample-selection span {
  margin-top: 4px;
  color: #b9aa93;
  font-size: 11px;
  line-height: 1.45;
}

.sd-sample-selection span b {
  color: var(--sd-gold-light);
}

.sd-sample-selection button,
.sd-gold-button,
.sd-copy-button {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 11px;
  font: 700 12px Poppins, sans-serif;
  cursor: pointer;
}

.sd-sample-selection button:disabled,
.sd-sample-actions button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.sd-sample-items {
  display: grid;
  gap: 8px;
}

.sd-sample-item,
.sd-sample-empty {
  padding: 12px 14px;
  border: 1px solid rgba(242, 212, 136, .15);
  border-radius: 11px;
  background: rgba(18, 10, 6, .4);
}

.sd-sample-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sd-sample-item strong,
.sd-sample-item span {
  display: block;
}

.sd-sample-item strong {
  color: var(--sd-cream);
  font-size: 12px;
}

.sd-sample-item span,
.sd-sample-empty {
  color: #b9aa93;
  font-size: 11px;
  line-height: 1.45;
}

.sd-sample-remove {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid rgba(222, 126, 92, .34);
  border-radius: 9px;
  color: #f0c3ae;
  background: rgba(166, 91, 49, .1);
  font: 700 11px Poppins, sans-serif;
  cursor: pointer;
}

.sd-copy-button {
  border: 1px solid rgba(242, 212, 136, .32);
  color: var(--sd-gold-light);
  background: rgba(214, 173, 70, .08);
}

.sd-sample-checkout-note {
  margin: 12px 0 0;
  color: #9f907a;
  font-size: 10.5px;
  line-height: 1.5;
}

.sd-sample-return {
  margin-bottom: 20px;
}

.sd-field input:focus,
.sd-field select:focus,
.sd-field textarea:focus {
  border-color: var(--sd-gold);
  box-shadow: 0 0 0 3px rgba(214, 173, 70, .12);
}

.sd-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(242, 212, 136, .16);
  border-radius: 13px;
  background: rgba(18, 10, 6, .44);
}

.sd-segmented button {
  border: 1px solid transparent;
  border-radius: 9px;
  color: #c5b59d;
  background: transparent;
  font: 700 12px Poppins, sans-serif;
}

.sd-segmented button[aria-pressed="true"] {
  border-color: rgba(242, 212, 136, .26);
  color: var(--sd-ink);
  background: linear-gradient(135deg, var(--sd-gold-light), var(--sd-gold));
  box-shadow: 0 6px 18px rgba(157, 110, 27, .18);
}

.sd-sample-summary {
  position: sticky;
  top: 92px;
  padding: 22px;
}

.sd-sample-summary h3 {
  margin: 0 0 14px;
  color: var(--sd-cream);
  font-size: 23px;
}

.sd-price-panel {
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid rgba(242, 212, 136, .22);
  border-radius: 15px;
  background: rgba(214, 173, 70, .065);
}

.sd-price-panel small {
  color: #bbaa91;
  font-size: 10.5px;
}

.sd-price-panel strong {
  color: var(--sd-gold-light);
  font: 700 34px/1 "Playfair Display", Georgia, serif;
}

.sd-status-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(242, 212, 136, .22);
  border-radius: 999px;
  color: #d9c8ad;
  background: rgba(255, 255, 255, .035);
  font-size: 10px;
  font-weight: 700;
}

.sd-status-pill[data-status="verified"] {
  border-color: rgba(117, 169, 130, .42);
  color: #a9d5b3;
  background: rgba(57, 112, 77, .16);
}

.sd-summary-lines {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.sd-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 9px;
  border-bottom: 1px dashed rgba(242, 212, 136, .15);
  color: #b9aa93;
  font-size: 11.5px;
}

.sd-summary-line b {
  color: var(--sd-cream);
  text-align: right;
}

.sd-sample-actions {
  display: grid;
  gap: 8px;
}

.sd-sample-credit {
  margin: 0 0 15px;
  color: #b9aa93;
  font-size: 10.5px;
  line-height: 1.55;
}

.sd-secondary-actions {
  margin-top: 10px;
}

.sd-secondary-actions .sd-sample-actions {
  padding: 0 10px 10px;
}

.sd-sample-actions button,
.sd-sample-actions a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 11px;
  font: 700 12px Poppins, sans-serif;
  text-decoration: none;
}

.sd-sample-actions button[disabled] {
  cursor: not-allowed;
  opacity: .55;
}

.sd-wa-button {
  border: 1px solid rgba(127, 211, 152, .32);
  color: #082617;
  background: linear-gradient(135deg, #7ed69a, #3da861);
}

.sd-live-region {
  min-height: 22px;
  margin-top: 10px;
  color: #b7d7bf;
  font-size: 11px;
  line-height: 1.5;
}

.sd-error-state {
  padding: 22px;
  border: 1px solid rgba(222, 126, 92, .32);
  border-radius: 14px;
  color: #f0c3ae;
  background: rgba(166, 91, 49, .12);
  font-size: 13px;
  line-height: 1.65;
}

/* Shared PDP sample card, injected by product-page.js. */
.pdp-sample-card {
  margin-top: 14px;
  padding: 17px;
  border: 1px solid rgba(242, 212, 136, .22);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0, rgba(214, 173, 70, .12), transparent 12rem),
    rgba(255, 250, 240, .04);
}

.pdp-sample-card h2 {
  margin: 0 0 6px;
  color: var(--sd-gold-light);
  font-size: 18px;
}

.pdp-sample-card p {
  margin: 0;
  color: var(--sd-text-muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.pdp-sample-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 13px 0;
}

.pdp-sample-price {
  padding: 10px;
  border: 1px solid rgba(242, 212, 136, .14);
  border-radius: 10px;
  background: rgba(16, 9, 5, .3);
}

.pdp-sample-price small,
.pdp-sample-price span {
  display: block;
  color: #b8a68d;
  font-size: 9.5px;
}

.pdp-sample-price strong {
  display: block;
  margin: 2px 0;
  color: var(--sd-cream);
  font-size: 17px;
}

.pdp-sample-card .btn {
  width: 100%;
  justify-content: center;
}

/* Catalog polish layered over the existing explorer contract. */
.sd-x,
.sd-c {
  border-color: rgba(242, 212, 136, .2) !important;
  border-radius: var(--sd-radius) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(214, 173, 70, .08), transparent 26rem),
    linear-gradient(155deg, rgba(67, 42, 27, .92), rgba(36, 21, 13, .96)) !important;
  box-shadow: var(--sd-shadow), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.sd-x .sd-controls {
  padding: 12px;
  border: 1px solid rgba(242, 212, 136, .14);
  border-radius: 15px;
  background: rgba(16, 9, 5, .22);
}

.sd-x input,
.sd-x select,
.sd-c input,
.sd-c select {
  min-height: 46px;
}

.sd-x .sd-card {
  border-color: rgba(242, 212, 136, .16) !important;
  border-radius: 17px !important;
  background: linear-gradient(160deg, #493020, #302016) !important;
}

.sd-x .sd-card:hover {
  border-color: rgba(242, 212, 136, .55) !important;
  box-shadow: 0 22px 46px rgba(10, 5, 2, .36) !important;
}

.sd-x .sd-fmt button,
.sd-x .sd-qty-row .sd-add,
.sd-x .sd-compare-link,
.sdc-qty button,
.sdc-close {
  min-height: 44px;
}

.sd-x .sd-qty-row input {
  min-height: 44px;
  width: 70px !important;
}

.sd-product-compare {
  margin: 0 0 24px;
  padding: 22px;
}

.sd-product-compare-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}

.sd-product-compare h3 {
  margin: 0 0 5px;
  color: var(--sd-gold-light);
  font-size: 25px;
}

.sd-product-compare p {
  margin: 0;
  color: var(--sd-text-muted);
  font-size: 12px;
}

.sd-compare-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sd-compare-slot {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed rgba(242, 212, 136, .25);
  border-radius: 12px;
  color: #a99981;
  background: rgba(16, 9, 5, .22);
  font-size: 11px;
}

.sd-compare-slot b {
  display: block;
  color: var(--sd-cream);
}

.sd-compare-slot button {
  min-width: 44px;
  border: 0;
  border-radius: 9px;
  color: #d7c6a9;
  background: rgba(255, 255, 255, .05);
}

.sd-compare-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
}

.sd-compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 11px;
}

.sd-compare-table th,
.sd-compare-table td {
  padding: 11px;
  border-bottom: 1px solid rgba(242, 212, 136, .12);
  text-align: left;
  vertical-align: top;
}

.sd-compare-table th {
  width: 155px;
  color: #ab9a80;
  font-weight: 600;
}

.sd-compare-table td {
  color: #eadfce;
}

.sd-compare-table thead td {
  color: var(--sd-gold-light);
  font-weight: 700;
}

/* Utility legal pages */
.legal,
.docs-hero + section {
  max-width: 920px;
}

.legal h2 {
  scroll-margin-top: 98px;
}

.footer {
  border-top-color: rgba(242, 212, 136, .14);
  background:
    radial-gradient(circle at 8% 0, rgba(214, 173, 70, .08), transparent 24rem),
    #160d08;
}

/* The wholesale page keeps its established .sd-* contracts. */
.sd-nav {
  border-color: rgba(242, 212, 136, .18) !important;
  background: rgba(27, 16, 10, .76) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  box-shadow: 0 12px 38px rgba(8, 4, 2, .2);
}

.sd-nav-logo img {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(242, 212, 136, .22);
  border-radius: 50% !important;
}

.sd-nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.sd-wrap {
  border-color: rgba(242, 212, 136, .2) !important;
  background:
    radial-gradient(circle at 90% 0, rgba(214, 173, 70, .08), transparent 30rem),
    linear-gradient(160deg, rgba(59, 36, 23, .98), rgba(31, 18, 11, .98)) !important;
  box-shadow: var(--sd-shadow), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.sd-wrap :where(button, input, select, textarea, a.sd-btn, .sd-kit-btn) {
  min-height: 44px;
}

.sd-wrap :where(input, select, textarea):focus {
  border-color: var(--sd-gold) !important;
  box-shadow: 0 0 0 3px rgba(214, 173, 70, .13);
}

[data-sd-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--sd-ease), transform .55s var(--sd-ease);
}

[data-sd-reveal].sd-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1080px) {
  .sd-trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sd-trust-item:nth-child(3) {
    border-right: 0;
  }

  .sd-trust-item:nth-child(-n + 3) {
    border-bottom: 1px solid rgba(242, 212, 136, .12);
  }

  .sd-card-grid,
  .sd-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-route-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .sd-hero {
    min-height: auto;
    padding: 62px 0 44px;
    background:
      linear-gradient(180deg, rgba(25, 13, 7, .8), rgba(25, 13, 7, .97) 55%, var(--sd-espresso)),
      url("/assets/img/farms/quebraditas/quebraditas-landscape.jpg") 62% center / cover no-repeat;
  }

  .sd-hero-grid,
  .sd-two-col,
  .sd-sample-grid,
  .sd-photo-story,
  .sd-media-split,
  .sd-packaging-grid {
    grid-template-columns: 1fr;
  }

  .sd-packaging-copy {
    max-width: 680px;
  }

  .sd-paths {
    margin-top: 8px;
  }

  .sd-photo-card {
    min-height: 390px;
  }

  .sd-photo-card + .sd-photo-card {
    min-height: 320px;
  }

  .sd-sample-summary {
    position: static;
  }

  .sd-compare-slots {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .nav-links {
    padding: 10px !important;
    border: 1px solid rgba(242, 212, 136, .17);
    border-radius: 0 0 16px 16px;
    background: rgba(25, 14, 8, .97) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .nav-links > a,
  .nav-links > .nav-cta {
    width: 100%;
    justify-content: flex-start;
    min-height: 48px;
    padding-inline: 14px;
  }

  .sd-hero h1 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .sd-hero-lede {
    font-size: 15px;
  }

  .sd-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .sd-path-card {
    min-height: 104px;
    padding: 15px;
  }

  .sd-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-trust-item,
  .sd-trust-item:nth-child(3) {
    border-right: 1px solid rgba(242, 212, 136, .12);
    border-bottom: 1px solid rgba(242, 212, 136, .12);
  }

  .sd-trust-item:nth-child(even) {
    border-right: 0;
  }

  .sd-trust-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .sd-card-grid,
  .sd-form-grid,
  .sd-evidence-grid {
    grid-template-columns: 1fr;
  }

  .sd-team-photos {
    grid-template-columns: 1fr;
  }

  .yt-inner {
    grid-template-columns: 1fr;
  }

  .yt-embed-wrap {
    max-width: 340px;
  }

  .sd-route-contact {
    align-items: stretch;
    flex-direction: column;
  }

  .sd-route-contact .btn {
    width: 100%;
    justify-content: center;
  }

  .footer ul {
    gap: 0;
  }

  .footer ul li a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 8px;
  }

  .sd-skip-link:focus,
  .sd-skip-link:focus-visible {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .sd-field.full {
    grid-column: auto;
  }

  .sd-sample-shell,
  .sd-sample-summary,
  .sd-product-compare {
    padding: 17px;
  }

  .sd-sample-selection {
    align-items: stretch;
    flex-direction: column;
  }

  .sd-sample-selection button {
    width: 100%;
  }

  .sd-sample-item {
    align-items: flex-start;
  }

  .pdp-sample-prices {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .sd-journey {
    margin-top: 14px;
  }

  .sd-journey-labels {
    display: none;
  }

  .sd-journey-caption {
    margin-top: -10px;
    font-size: 9.5px;
  }

  .sd-route-steps {
    grid-template-columns: 1fr;
  }

  .sd-route-steps article {
    min-height: 0;
  }

  .sd-farm-gallery-grid {
    columns: 1;
  }

  .sd-legacy-photo img {
    max-height: 360px;
  }

  .sd-packaging-proof {
    padding-block: 54px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover::after,
  .btn.btn-gold:hover::after,
  .sd-gold-button:hover::after {
    transform: translateX(120%);
  }

  .sd-path-card:hover {
    border-color: rgba(242, 212, 136, .58);
    transform: perspective(900px) translateY(-2px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
}

@media (hover: none) {
  .nav-cta::after,
  .btn.btn-gold::after,
  .sd-gold-button::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .ticker-track {
    animation: none !important;
    transform: none !important;
  }

  [data-sd-reveal] {
    opacity: 1;
    transform: none;
  }

  .sd-path-card {
    transform: none !important;
  }

  /* Sin movimiento: la ruta queda dibujada y las cuatro paradas a plena
     opacidad. El envío desaparece; no hay nada que perseguir. */
  .sd-journey-shipment {
    display: none;
  }

  .sd-journey-stop {
    opacity: 1;
  }

  .sd-journey-road {
    stroke-dashoffset: 0;
  }
}