body { margin: 0; font-family: var(--font-text); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.co-pad { padding: var(--space-5); }
.co-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.co-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* Casa scopes: each casa has ONE color (--casa) and a fixed accent (--casa-2) for stickers and bands.
   Two golds: sol for Casa Oro, oro for Café Oro and Oro Chocolate. */
.co-casa-grupo { --casa: var(--arena); --on-casa: var(--on-light); --casa-mark: var(--sol); --casa-2: var(--sol); --on-casa-2: var(--on-light); }
.co-casa-hostel { --casa: var(--sol); --casa-mark: var(--casa); --on-casa: var(--on-light); --casa-2: var(--verde); --on-casa-2: var(--on-light); }
.co-casa-cafe { --casa: var(--negro); --casa-mark: var(--casa); --on-casa: var(--on-dark); --casa-2: var(--oro); --on-casa-2: var(--on-light); --sign-band: var(--oro); }
.co-casa-nuestra { --casa: var(--turquesa); --casa-mark: var(--casa); --on-casa: var(--on-light); --casa-2: var(--buganvilia); --on-casa-2: var(--on-dark); }
.co-casa-andalucia { --casa: var(--selva); --casa-mark: var(--casa); --on-casa: var(--on-dark); --casa-2: var(--celeste); --on-casa-2: var(--on-light); }
.co-casa-pacifico { --casa: var(--marino); --casa-mark: var(--casa); --on-casa: var(--on-dark); --casa-2: var(--azafran); --on-casa-2: var(--on-light); --sign-band: var(--azafran); }
.co-casa-ruth { --casa: var(--miel); --casa-mark: var(--casa); --on-casa: var(--on-light); --casa-2: var(--morado); --on-casa-2: var(--on-dark); }
.co-casa-pita { --casa: var(--tomate); --casa-mark: var(--casa); --on-casa: var(--on-dark); --casa-2: var(--sol); --on-casa-2: var(--on-light); }
.co-casa-chocolate { --casa: var(--cacao); --casa-mark: var(--casa); --on-casa: var(--on-dark); --casa-2: var(--oro); --on-casa-2: var(--on-light); --sign-band: var(--oro); }

/* Night: dark casa colors would vanish on the noche ground, so their marks switch to their accent */
[data-theme="noche"] .co-casa-pacifico, [data-theme="noche"] .co-casa-cafe, [data-theme="noche"] .co-casa-chocolate { --casa-mark: var(--casa-2); }
[data-theme="noche"] .co-casa-andalucia, [data-theme="noche"] .co-casa-pita, [data-theme="noche"] .co-casa-experiencias { --casa-mark: var(--casa-2); }
.co-casa-experiencias { --casa: var(--mar); --casa-mark: var(--casa); --on-casa: var(--on-dark); --casa-2: var(--sol); --on-casa-2: var(--on-light); }

/* Display face: soft and a little wonky at size */
.co-disp { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-optical-sizing: auto; }
.co-label { font: 600 14px/18px var(--font-text); letter-spacing: 1.2px; text-transform: uppercase; }

/* Button */
.co-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-sm); border: var(--stroke-hair) solid transparent; font: 600 15px/1 var(--font-text); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: filter var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out), transform var(--duration-instant) var(--ease-out); }
.co-btn:active { transform: scale(0.97); }
.co-btn-sol { background: var(--sol); color: var(--on-light); }
.co-btn-casa { background: var(--casa, var(--sol)); color: var(--on-casa, var(--on-light)); }
.co-btn-casa.co-casa-grupo { background: var(--sol); }
.co-btn-dark { background: var(--ink); color: var(--surface); }
.co-btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.co-btn-sol:hover, .co-btn-casa:hover, .co-btn-dark:hover { filter: brightness(0.94); }
.co-btn-outline:hover { background: var(--surface-raised); }
.co-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-btn-lg { min-height: 52px; padding: 0 var(--space-6); font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .co-btn { transition: none; } .co-btn:active { transform: none; } }

/* CasaBadge */
.co-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border-radius: var(--radius-pill); background: var(--surface-raised); border: var(--stroke-hair) solid var(--line); color: var(--ink); font: 600 14px/20px var(--font-text); }
.co-badge-dot { width: 18px; height: 18px; border-radius: var(--radius-round); background: var(--casa-mark, var(--casa)); flex: none; }

/* SocialSquare */
.co-square { width: 320px; aspect-ratio: 1; display: flex; flex-direction: column; background: var(--casa); color: var(--on-casa); position: relative; overflow: hidden; box-sizing: border-box; }
.co-square-photo { height: 46%; background: center / cover no-repeat; flex: none; }
.co-square-body { flex: 1; display: flex; flex-direction: column; padding: var(--space-5); gap: var(--space-2); }
.co-square-head { font-size: 38px; line-height: 38px; font-weight: 800; margin: 0; }
.co-square-photo + .co-square-body .co-square-head { font-size: 30px; line-height: 31px; }
.co-square-sub { font: 400 14px/20px var(--font-text); margin: 0; }
.co-square-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font: 600 14px/18px var(--font-text); border-top: 2px solid currentColor; padding-top: var(--space-2); }
.co-square .co-sticker { position: absolute; top: var(--space-4); right: var(--space-4); }
.co-square-has-sticker .co-square-head { padding-right: 112px; }

/* Sticker */
.co-sticker { width: 116px; height: 116px; border-radius: var(--radius-round); background: var(--casa-2, var(--sol)); color: var(--on-casa-2, var(--on-light)); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-2); box-sizing: border-box; transform: rotate(-8deg); font: 800 19px/19px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; box-shadow: 0 0 0 3px var(--cal); flex-direction: column; }
.co-sticker-gloss { display: block; margin-top: 2px; font: 600 14px/15px var(--font-text); }

/* MenuSection */
.co-menu { background: var(--surface-warm); color: var(--ink); padding: var(--space-6); max-width: 520px; box-sizing: border-box; }
.co-menu-title { margin: 0; font-size: 32px; line-height: 36px; font-weight: 700; color: var(--ink); }
.co-menu-title-en { margin: var(--space-1) 0 0; color: var(--ink-muted); font: italic 400 15px/20px var(--font-display); }
.co-menu-band { height: var(--stroke-band); background: var(--casa-mark, var(--casa)); margin: var(--space-4) 0 var(--space-2); }
.co-menu-item { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--stroke-hair) solid var(--line); }
.co-menu-item:last-child { border-bottom: 0; }
.co-menu-name { font: 600 18px/24px var(--font-display); }
.co-menu-name-en { font: italic 400 14px/20px var(--font-display); color: var(--ink-muted); }
.co-menu-desc { grid-column: 1; font: 400 14px/21px var(--font-text); color: var(--ink-muted); margin-top: var(--space-1); }
.co-menu-price { grid-column: 2; grid-row: 1; font: 600 16px/24px var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* TourBoard */
.co-tour { width: 320px; background: var(--casa); color: var(--on-casa); padding: var(--space-5); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-2); }
.co-tour-route { margin: 0; font-size: 40px; line-height: 38px; font-weight: 900; text-transform: uppercase; color: var(--on-casa); }
.co-tour-time { font: 700 30px/34px var(--font-text); font-variant-numeric: tabular-nums; margin-top: var(--space-3); }
.co-tour-meta { font: 400 14px/20px var(--font-text); }
.co-tour-band { height: var(--stroke-band); background: var(--casa-2); }

/* RateSheet */
.co-rates { background: var(--surface-raised); color: var(--ink); max-width: 720px; border-top: var(--stroke-band) solid var(--casa-mark, var(--casa)); }
.co-rates-head { padding: var(--space-5) var(--space-5) var(--space-3); }
.co-rates-title { margin: 0; font-size: 28px; line-height: 32px; font-weight: 700; }
.co-rates-sub { margin: var(--space-1) 0 0; font: 400 14px/20px var(--font-text); color: var(--ink-muted); }
.co-rates table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-text); font-variant-numeric: tabular-nums; }
.co-rates th { text-align: left; padding: var(--space-2) var(--space-5); background: var(--surface-warm); font: 600 14px/18px var(--font-text); letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink); }
.co-rates th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-muted); }
.co-rates td { padding: var(--space-3) var(--space-5); border-bottom: var(--stroke-hair) solid var(--line); vertical-align: top; }
.co-rates td:first-child { font-weight: 600; }
.co-rates td small { display: block; font-weight: 400; color: var(--ink-muted); }
.co-rates-notes { padding: var(--space-3) var(--space-5) var(--space-5); font: 400 14px/20px var(--font-text); color: var(--ink-muted); }

/* SkitCard */
.co-skit { width: 225px; aspect-ratio: 9 / 16; background: var(--casa); color: var(--on-casa); position: relative; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
.co-skit-photo { flex: 1; background: center / cover no-repeat; }
.co-skit-ep { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--cal); color: var(--negro); padding: 3px var(--space-2); }
.co-skit-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); border-top: var(--stroke-band) solid var(--casa-2); }
.co-skit-title { margin: 0; font-size: 24px; line-height: 27px; font-weight: 700; }
.co-skit-sub { margin: 0; font: 400 14px/20px var(--font-text); }
.co-skit .co-sticker { position: absolute; top: var(--space-3); right: var(--space-3); width: 68px; height: 68px; font-size: 14px; line-height: 14px; }
/* SignPanel */
.co-sign { display: inline-grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--negro); color: var(--cal); outline: var(--stroke-hair) solid var(--line); min-width: 300px; max-width: 560px; border-left: 10px solid var(--sign-band, var(--casa-mark, var(--casa))); }
.co-stack > .co-sign { align-self: flex-start; }
.co-sign-icon { width: 40px; height: 40px; background: var(--cal); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.co-sign-es { font: 700 26px/28px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.co-sign-en { font: 400 14px/18px var(--font-text); opacity: 0.85; }
.co-sign-arrow { font: 700 32px/1 var(--font-text); }

/* Bilingual */
.co-bi p { margin: 0; }
.co-bi-primary { font: 600 24px/30px var(--font-display); color: var(--ink); }
.co-bi-secondary { margin-top: var(--space-1) !important; font: italic 400 17px/24px var(--font-display); color: var(--ink-muted); }

/* CasaCard */
.co-card { width: 320px; background: var(--surface-raised); color: var(--ink); display: flex; flex-direction: column; }
.co-card-media { aspect-ratio: 4 / 3; background: center / cover no-repeat; border-bottom: var(--stroke-band) solid var(--casa-mark, var(--casa)); }
.co-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); }
.co-card-name { margin: var(--space-1) 0 0; font-size: 26px; line-height: 30px; font-weight: 700; }
.co-card-line { margin: 0; font: 400 16px/24px var(--font-text); }
.co-card-line-en { margin: 0; font: 400 14px/20px var(--font-text); color: var(--ink-muted); }
.co-card-facts { margin: var(--space-1) 0 var(--space-2); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font: 500 14px/20px var(--font-text); color: var(--ink-muted); }
.co-card-facts li::before { content: "· "; color: var(--ink); font-weight: 700; }

/* StatusTag: internal tools only */
.co-status { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 14px/20px var(--font-text); color: var(--status); }
.co-status::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-round); background: currentColor; flex: none; }
.co-status-ok { --status: var(--ok); } .co-status-aviso { --status: var(--aviso); } .co-status-error { --status: var(--error); } .co-status-info { --status: var(--info); }

/* Cards that link respond to touch */
a.co-card, .co-card[data-href] { transition: transform var(--duration-instant) var(--ease-out); }
a.co-card:active, .co-card[data-href]:active { transform: scale(0.99); }

/* SocialSquare layouts: photo (top half photo), full (photo fills, text on a color panel), type (no photo, big type, optional pattern) */
.co-square-full .co-square-photo { position: absolute; inset: 0; height: auto; }
.co-square-full .co-square-body { position: relative; margin-top: auto; flex: none; background: var(--casa); }
.co-square-full .co-square-head { font-size: 30px; line-height: 31px; }
.co-square-pattern { position: absolute; inset: 0; background: center / 56px repeat; opacity: 0.15; pointer-events: none; }
.co-square-type .co-square-body { position: relative; }
.co-square-type .co-square-head { font-size: 44px; line-height: 44px; }

/* RateSheet: edition flag and validity line */
.co-rates-flag { display: inline-block; margin-bottom: var(--space-2); color: var(--error); }
.co-rates-valid { margin: var(--space-2) 0 0; font: 600 14px/20px var(--font-text); color: var(--ink); }

/* CasaCard: public price line */
.co-card-rate { margin: 0; font: 400 15px/22px var(--font-text); font-variant-numeric: tabular-nums; }