/* Responsive finishing layer. Original artwork, colors and desktop hero retained. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(main, footer, dialog) :where(section, article, div, figure, nav, form, fieldset) { min-width: 0; }
:where(main, footer, dialog) :where(p, h2, h3, h4, h5, li, label, dt, dd, figcaption) { overflow-wrap: break-word; }
:where(button, a, input, select, textarea, summary) { touch-action: manipulation; }
/* A minimum height plus aspect-ratio formerly forced this stage to 1,013 px wide. */
.coe-cinema .coe-motion-stage { width: 100%; min-width: 0; aspect-ratio: auto; height: clamp(570px, 56vw, 840px); }
.coe-cinema .coe-motion { min-width: 0; max-width: 100%; }
dialog { max-width: calc(100% - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; }
:where(input, select, textarea) { max-width: 100%; }
textarea { resize: vertical; }

/* Tablets and narrow landscape windows need room for readable content too. */
@media (min-width: 761px) and (max-width: 1100px) {
  .sales-heading { flex-wrap: wrap; }
  .sales-heading .sales-shipping.delivery-brand { margin-left: auto; }
  #sol-manana .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sol-manana .product { grid-template-columns: minmax(0, 1fr); }
  #sol-manana .product-art { height: 340px; min-height: 340px; max-height: none; }
  #sol-manana .product-copy { padding: 25px; }
  #sol-manana #ruta { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .sales-first .classic-card { grid-template-columns: minmax(0, 1fr); }
  .sales-first .classic-copy { padding: 20px 12px; }
  .sales-first .classic-profile { max-width: none; }
  .booking-form-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .booking-gift { display: none; }
  .speaker-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .speaker-wide { grid-column: 1 / -1; }
  #juegos-tazas .cup-pack-grid { gap: 12px; }
  #juegos-tazas .cup-pack-grid .pack-kicker { flex-wrap: wrap; }
  #juegos-tazas .cup-pack-grid .pack-total { white-space: normal; }
  .book-store { gap: 5%; padding-inline: 4%; }
  .book-formats .spotify-stage { grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); }
  .audio-stage-content { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'brand' 'title' 'lead' 'actions' 'caption' 'release' 'photo' 'episode'; }
  #envios .delivery-details dl > div { grid-template-rows: 70px 1fr; }
  #envios .delivery-details dd { grid-template-rows: minmax(60px, auto) auto; }
  .speaker-form :is(input:not([type=checkbox]), select, textarea), #product-dialog select { font-size: 16px; }
  .jade-size-card dd { font-size: 27px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .reference-header { height: 76px; aspect-ratio: auto; }
  .header-reference, .reference-header nav { display: none; }
  .reference-header .brand { left: 20px; top: 7px; width: 248px; height: auto; display: block; }
  .reference-header .brand > .brand-reference { display: block; width: 100%; mix-blend-mode: lighten; }
  .reference-header .header-actions { right: 16px; width: 96px; gap: 8px; }
  .reference-header .header-actions svg { opacity: 1; width: 23px; height: 23px; }
  .reference-header .header-actions .divider { display: none; }
  .reference-header .icon-button { width: 44px; height: 44px; display: grid; place-items: center; }
}

@media (max-width: 760px) {
  /* Keep gutters consistent and allow long copy to reflow instead of clipping. */
  :root { --mobile-gutter: clamp(16px, 4.5vw, 24px); }
  .catalog { padding-inline: var(--mobile-gutter); }
  .book-store, .purpose-kits, .speaker-booking { margin-inline: var(--mobile-gutter); }
  .book-store, .purpose-kits { padding-inline: clamp(16px, 4vw, 24px); }
  .collection-title > p, .classic-profile, .section-copy { max-width: 100%; }
  .shop-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-nav a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 10px; font-size: 13px; text-align: center; }
  .shop-nav a:last-child { grid-column: 1 / -1; border-top: 1px solid #b49a6b55; }
  .shop-nav a:nth-child(even) { border-right: 0; }
  .sales-heading .sales-shipping.delivery-brand { grid-template-columns: auto 76px minmax(0, 1fr); gap: 10px; }
  .sales-heading .sales-shipping.delivery-brand > span { font-size: 11px; line-height: 1.6; }
  .sales-heading .sales-shipping.delivery-brand > span:last-child { font-size: 12px; }

  /* 44–48 px touch controls; 16 px form values also prevent iOS focus zoom. */
  :where(main, dialog, footer) button, :where(main, dialog, footer) select,
  :where(main, dialog, footer) input:not([type=checkbox]):not([type=radio]),
  :where(main, dialog, footer) summary { min-height: 44px; }
  :where(main, dialog, footer) button { min-width: 44px; }
  :where(main, dialog, footer) summary { padding-block: 12px; line-height: 1.5; cursor: pointer; }
  .reference-header .header-actions { width: 88px; gap: 0; right: 12px; }
  .reference-header .icon-button { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
  .reference-header .brand { max-width: calc(100% - 122px); }
  .reference-hero .hero-copy .buy-cta, .reference-hero .hero-copy .story-link { min-height: 44px; }
  .reference-hero .motion-toggle { min-height: 44px; font-size: 11px; }
  .shipping-ticker-toggle { min-width: 44px; }
  .shipping-ticker .ticker-route { font-size: 10px; letter-spacing: .13em; }
  .shipping-ticker .ticker-message-text { font-size: 13px; }
  #whatsapp { bottom: max(16px, env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); }
  #whatsapp .wa-icon { flex: none; }
  :where(.product-cta, .commerce-cta, .kit-buy, .solid-button, .outline-button, .gold-button, .booking-primary, .concierge-cta) { max-width: 100%; white-space: normal; }
  #cafe .commerce-cta, #sol-manana .product-copy .product-cta, .purpose-kit .kit-buy, .book-copy .kit-buy { min-height: 48px; font-size: 16px; line-height: 1.45; }
  .shipping-product-note, .ruta-discover, .jade-purpose, .jade-unique-cta, .kit-purpose-link,
  .book-kit-link, .program-link, .shipping-actions a, .audio-listen-cta, .spotify-neon-brand,
  .collab-actions > a, .partners-bottom a, #redes > a { min-height: 44px; display: flex; align-items: center; }
  .shipping-product-note, .ruta-discover, .kit-purpose-link { padding-block: 10px; }
  .audio-motion-toggle { width: 44px; height: 44px; flex: none; }
  .audio-follow-cta, .audio-listen-cta { min-height: 48px; }
  .methods { flex-wrap: wrap; gap: 10px; }
  .method { min-height: 48px; padding-inline: 18px; font-size: 16px; }

  /* Readable commerce information and fine print without changing hierarchy. */
  #cafe .classic-copy .collection-kicker, .collection-kicker, .section-index, .shipping-eyebrow,
  .personal-tag, #cafe #ruta .personal-tag, #ruta .product-copy .ruta-type { font-size: 11px; line-height: 1.6; letter-spacing: .08em; }
  /* Explicit floor for legacy section-specific uppercase label rules. */
  .collection-kicker { font-size: 11px !important; }
  #cafe .classic-profile, #cafe .product-copy > p:not(.commerce-price, .personal-timing, .ruta-type),
  .jade-craft-story, .kit-lead, .collection-title > p { font-size: 16px; line-height: 1.65; }
  #cafe .commerce-saving, #cafe .commerce-timing, #cafe .product-copy .personal-timing,
  .book-delivery, .kit-delivery, .kits-fine, .cup-packs-note, .jade-time, .jade-size-card > span,
  .jade-visual > small, .jade-options article p, .jade-options article .set-saving,
  .kit-includes span, .purchase-purpose, .purchase-purpose span,
  #juegos-tazas .cup-pack-grid .pack-saving, #juegos-tazas .cup-pack-grid .pack-comparison,
  .collab-campaign-note, #envios .delivery-cost, #envios .delivery-details dd small,
  .book-source, .gift-caption, #redes .footer-channel-note { font-size: 13px; line-height: 1.65; }
  .commerce-price span, .kit-price > span, .pack-total small, .jade-options article > strong small { font-size: 12px; white-space: normal; }
  .commerce-price, .kit-price { flex-wrap: wrap; }
  #cafe .classic-copy .commerce-price span { font-size: 12px; }
  #cafe .classic-copy .stock-tag, #cafe .classic-labels .stock-tag, .classic-view-label, .inspect-label { font-size: 11px; line-height: 1.4; }
  #juegos-tazas .cup-pack-grid .pack-kicker { font-size: 12px; flex-wrap: wrap; }
  #juegos-tazas .cup-pack-grid .pack-best-value { font-size: 10px; }
  .jade-options .set-badge, .kit-label { font-size: 11px; }
  .jade-size-card > p, .jade-size-card dt { font-size: 11px; letter-spacing: .03em; }
  .jade-size-card dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jade-size-card dd { font-size: clamp(23px, 6.5vw, 30px); }
  .jade-unique-eyebrow, .jade-promise-copy > span:first-child { font-size: 11px; }
  .jade-unique-wait p, .jade-promise-copy > small, .jade-promise-copy > .jade-guarantee-spanish,
  .jade-money-back summary, .jade-money-back p { font-size: 13px; line-height: 1.65; }
  .jade-unique-cta { font-size: 14px; }

  /* No fixed-height text wells on phones, including landscape and text zoom. */
  .ruta-showcase { height: auto; min-height: 790px; padding-bottom: 455px; }
  .ruta-showcase-copy { position: relative; inset: auto; width: auto; margin: 0; padding: 28px 24px 35px; }
  #en-ruta-ritual .ruta-showcase-copy h3 { font-size: clamp(38px, 12vw, 52px); }
  .ruta-showcase-copy .collection-kicker { font-size: 11px; }
  .ruta-showcase-copy > p:not(.collection-kicker), .ruta-demo-caption p { font-size: 16px; max-width: none; }
  .ruta-showcase-copy .product-cta { font-size: 14px; min-height: 48px; gap: 12px; }
  .ruta-showcase-caption { font-size: 10px; }
  .ruta-use-cases { font-size: 11px; gap: 15px; padding-inline: 20px; }
  .ruta-use-cases span { gap: 7px; }
  .ruta-demo-heading p, .ruta-modern-footer p, .ruta-demo-caption small { font-size: 13px; }
  .ruta-demo-tabs { gap: 8px; }
  .ruta-step-tab { padding-inline: 8px; }
  .ruta-step-tab strong { font-size: 16px; }
  .ruta-modern-footer .product-cta { font-size: 14px; }

  .book-formats .spotify-stage { grid-template-columns: minmax(0, 1fr); }
  .audio-stage-content { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'brand' 'title' 'lead' 'actions' 'caption' 'release' 'photo' 'episode'; gap: 15px; padding: 20px; }
  .audio-stage-topline, .audio-stage-id, .audio-stage-id b { font-size: 11px; letter-spacing: .07em; }
  .audio-stage-topline > span { max-width: calc(100% - 60px); }
  .spotify-neon-brand { width: 150px; max-width: 100%; }
  .book-formats .spotify-stage .audio-stage-lead { font-size: 16px; }
  .book-formats .spotify-stage .audio-follow-caption,
  .book-formats .spotify-stage .audio-photo-credit,
  .book-formats .spotify-stage .audio-episode-credit { font-size: 12px; line-height: 1.65; }
  .audio-stage-actions { gap: 12px; flex-wrap: wrap; }
  .audio-follow-cta, .audio-listen-cta { font-size: 14px; }
  .audio-release { padding-top: 14px; border-top: 1px solid #70ff9530; }
  .audio-release p > span { font-size: 11px; }
  .book-formats .spotify-stage .audio-release strong { font-size: 14px; }
  .audio-photo-credit a, .book-source a, .kits-fine a,
  .community-document figcaption a, .delivery-origin-fact a,
  .origin-panorama figcaption a, .coe-motion figcaption a,
  .coffee-photo-caption a, .coffee-erick-frame a,
  .speaker-evidence a, .community-history a, .shipping-faq a { display: inline-block; padding-block: 12px; min-height: 44px; }
  .collab-hero-copy > a, .partners-bottomline a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .coffee-photo-caption, .coffee-erick-frame figcaption { flex-wrap: wrap; gap: 8px; }
  .coffee-photo-caption a, .coffee-erick-frame a { font-size: 12px; }

  #proposito-sol .collab-identity small { font-size: 10px; line-height: 1.5; }
  #proposito-sol .collab-shared-purpose { font-size: 11px; }
  #proposito-sol .collab-campaign-note { font-size: 13px; line-height: 1.65; }
  #proposito-sol .community-document figcaption a, .origin-panorama figcaption a { font-size: 12px; line-height: 1.6; }
  #proposito-sol .collab-barrondo-mark { font-size: clamp(17px, 5vw, 25px); }
  #hope-programas .collection-kicker, #hope-programas .collab-program-number { font-size: 11px; }
  #hope-programas article p, #hope-programas .collab-section-heading > p { font-size: 15px; line-height: 1.7; }
  #hope-programas .program-link { display: flex; justify-content: center; font-size: 13px; min-height: 48px; }
  #envios .shipping-actions { flex-wrap: wrap; }
  #envios .shipping-actions a { min-height: 48px; font-size: 15px; }
  #envios .delivery-origin-fact p { font-size: 15px; }
  #envios .delivery-origin-fact a { font-size: 13px; }
  #envios .delivery-details dl > div, #envios .delivery-details dl > div:first-child { grid-template-rows: auto auto; }
  #envios .delivery-details dt { min-height: 46px; }
  .coe-cinema .coe-motion-stage { height: auto; min-height: 610px; }
  .coe-cinema .coe-motion-stage video { position: absolute; inset: 0; width: 100%; height: 100%; }
  .coe-cinema-overlay { position: relative; inset: auto; gap: 36px; min-height: 610px; padding: 29px 22px 88px; }
  .coe-cinema-brand p, .coe-record > p { font-size: 11px; }
  .coe-award-years span, .coe-award-years small { font-size: 12px; letter-spacing: .03em; }
  .coe-award-years strong { font-size: 36px; }
  .coe-history-copy .award-note { font-size: 13px !important; }
  .coe-motion figcaption { font-size: 12px; }
  .coe-cinema .coe-play { font-size: 13px; }
  #origen dt { font-size: 12px; }

  #comunidad .community-now-copy > p:not(.community-kicker),
  #comunidad .identity-copy > p:not(.community-kicker) { font-size: 16px; line-height: 1.65; }
  #comunidad .community-kicker, #comunidad .community-manifesto,
  #comunidad .community-channel-line, #comunidad .community-channel-line span:last-child { font-size: 11px; }
  #comunidad .community-manifesto { flex-wrap: wrap; gap: 12px; }
  #comunidad .community-play, #comunidad .monitor-reset,
  #comunidad .community-share, #comunidad .identity-styles button,
  #comunidad .identity-download, #comunidad .community-follow-main,
  #comunidad .monitor-follow { font-size: 13px; min-height: 48px; white-space: normal; }
  #comunidad .monitor-follow { min-width: 0; align-items: center; }
  #comunidad .monitor-caption, #comunidad .monitor-handle,
  #comunidad .community-data-note, #comunidad .community-data-note p,
  #comunidad .community-hub-footer, #comunidad .identity-visual > p,
  #comunidad .community-history summary { font-size: 13px; line-height: 1.6; }
  #comunidad .monitor-eyebrow, #comunidad .monitor-count-label,
  #comunidad .channel-id small, #comunidad .identity-name-label { font-size: 11px; }
  #comunidad .social-channel { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 18px 12px; }
  #comunidad .channel-id { font-size: 14px; flex-wrap: wrap; }
  #comunidad .channel-counter .digital-digit { width: clamp(15px, 4.5vw, 20px); }
  #comunidad .identity-visual { padding: 8px; }
  #comunidad .team-card { transform: none; }
  #comunidad .community-athlete a { font-size: 12px; min-height: 44px; padding-block: 12px; }
  #comunidad .community-history summary { min-height: 48px; }
  #comunidad #community-alias { font-size: 16px; min-height: 48px; }

  .booking-hero, .booking-form-layout { grid-template-columns: minmax(0, 1fr); }
  .booking-portrait { height: 420px; }
  .booking-form-layout { padding: 30px clamp(12px, 4vw, 22px); }
  .speaker-form { padding: 22px 16px; }
  .speaker-field-grid { grid-template-columns: minmax(0, 1fr); }
  .speaker-wide { grid-column: auto; }
  .speaker-form :is(input:not([type=checkbox]), select, textarea), .speaker-summary > textarea { font-size: 16px; min-height: 48px; }
  .speaker-form label, .speaker-form small, .speaker-form-note, .speaker-form-status { font-size: 13px; }
  .speaker-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .speaker-progress span { font-size: 11px; line-height: 1.5; }
  .speaker-extras > label, .speaker-consent { min-height: 44px; padding-block: 8px; align-items: flex-start; }
  .speaker-form input[type=checkbox] { width: 22px; height: 22px; flex-basis: 22px; }
  .speaker-form-actions { flex-wrap: wrap; }
  .speaker-form-actions button, .speaker-summary-actions button, .speaker-summary-actions a { min-height: 48px; font-size: 14px; }
  .speaker-pillars span, .speaker-distinction, .speaker-logo-row figcaption { font-size: 12px; }
  .speaker-evidence summary { font-size: 14px; }
  #redes .footer-social-label { font-size: 12px; }
  #redes .footer-community > p, .concierge > .eyebrow { font-size: 11px; }
  #redes .footer-socials { gap: 24px 8px; }
  #redes > span, #redes > a { font-size: 12px; }
  .partners-topline, .partner-caption, .partners-bottom { font-size: 11px; line-height: 1.6; }
  #official-partners .partner-caption, #official-partners .partners-bottomline > span { font-size: 11px; }
  #official-partners .partners-bottomline p, #official-partners .partners-bottomline a { font-size: 13px; }

  /* Modal galleries stay inside both the viewport and the virtual-keyboard area. */
  #product-dialog .detail-visual { height: clamp(250px, 48svh, 360px); min-height: 0; max-height: 360px; padding-bottom: 110px; }
  #product-dialog > .close { position: sticky; top: 8px; display: block; margin: 8px 8px -52px auto; }
  #product-dialog .detail-copy { padding: 28px 20px; }
  #product-dialog .detail-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #product-dialog .detail-gallery button { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
  #product-dialog .gallery-caption { bottom: 76px; font-size: 12px; line-height: 1.5; }
  #product-dialog .zoom-button { font-size: 13px; min-height: 44px; }
  #product-dialog .detail-copy h2 { font-size: clamp(30px, 8vw, 38px); }
  #product-dialog :is(select, textarea), .info-dialog :is(input, textarea, select) { font-size: 16px; min-height: 48px; }
  .grind-label, .bundle-roast-label, .detail-tech, .availability { font-size: 13px; line-height: 1.6; }
  #selection-list .selection-item { grid-template-columns: 40px minmax(0, 1fr); }
  #selection-list .selection-item button { grid-column: 2; justify-self: start; font-size: 14px; padding: 10px 0; }
}

@media (max-width: 540px) {
  .sales-first .classic-card { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .sales-first .classic-visual { height: 320px; }
  .sales-first .classic-copy { padding: 20px 0 4px; }
  .sales-first .classic-copy h4 { font-size: 32px; }
  .sales-first .classic-profile { max-width: none; }
  #sol-manana .product { grid-template-columns: minmax(0, 1fr); }
  #sol-manana .product-art { height: 330px; min-height: 330px; max-height: none; }
  #sol-manana .product-copy { padding: 20px; }
  #sol-manana .product-copy h3 { font-size: 32px; }
  #cafe .classic-visual .catalog-packshot img { max-width: 100%; }
  .jade-size-card dl { gap: 6px; }
  .jade-size-card dl > div { padding-right: 5px; }
  .jade-size-card dd { white-space: normal; }
  #comunidad .social-channel { grid-template-columns: minmax(0, 1fr); }
  #comunidad .channel-id { flex-wrap: nowrap; }
  #comunidad .channel-counter { justify-content: start; }
  #comunidad .community-hub-footer { flex-wrap: wrap; gap: 18px; }
  .speaker-form-actions button { flex: 1 1 110px; }
}

@media (max-width: 360px) {
  #comunidad h2 { font-size: clamp(45px, 15vw, 54px); }
  .book-copy h2, .jade-copy h3, #envios .delivery-story h2 { font-size: 37px; }
  .booking-pitch { padding-inline: 20px; }
  .booking-pitch h2 { font-size: 40px; }
  #redes .footer-social-label { font-size: 11px; }
  #libros .book-ticket { padding-inline: 12px; gap: 12px; }
  .jade-options article, #juegos-tazas .cup-pack-grid article { padding-inline: 18px; }
}

@media (pointer: coarse) {
  button, select, input:not([type=checkbox]):not([type=radio]), summary { min-height: 44px; }
  .audio-motion-toggle { min-width: 44px; }
}

/* Landscape phones and short windows: show the whole product before its details. */
@media (max-height: 600px) and (max-width: 1100px) {
  #product-dialog .detail-grid { grid-template-columns: minmax(0, 1fr); }
  #product-dialog .detail-visual { position: relative; top: auto; height: clamp(220px, 65svh, 320px); min-height: 0; max-height: 320px; padding: 18px 24px 105px; }
  #product-dialog .gallery-caption { bottom: 73px; font-size: 12px; }
  #product-dialog .zoom-button { min-height: 44px; }
  #product-dialog > .close { position: sticky; top: 8px; display: block; margin: 8px 8px -52px auto; }
}