@charset "UTF-8";
/* Sara con Amor design system v01 (round 3, developer handoff v0.1), from 2026-10-26 */
/* Fonts stored on the site (Editor Assets > Fonts), with their weight ranges */
@font-face {
  font-family: "Fraunces";
  src: url("/storage/fonts/gjjqXVXhLlFXB279LhivX20dVaaDgOo43yctb19p.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/storage/fonts/2oFxWMdxtdnbqnvDZFJBMvWdWsdHSLmG3FMcsm5u.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/storage/fonts/Djqha5sGssnPAc6mH86safDOB0czDuzup4TZbqPb.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playwrite ES";
  src: url("/storage/fonts/EOsfUHCaYKKZ0IVKvlJMZENTEwepJH5LtPTqfp9a.woff2") format("woff2");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
/* tokens.css (design system v01, generated from tokens.json; its @font-face rules are above) */
/* Sara con Amor Design System — generated from tokens.json */
:root, [data-theme=lino] {
  --surface: var(--lino);
  --ink: var(--tinta);
  --ink-soft: var(--higuera);
  --heading: var(--higuera);
  --label: var(--corteza);
  --link: var(--corteza);
  --alert: var(--corteza);
  --line: #DCCFB7;
  --control-border: var(--higuera);
  --focus-ring: var(--tinta);
  --accent: var(--mandarina);
  --on-accent: var(--tinta);
  --higuera: #1F3D2B;
  --lino: #F6F0E6;
  --olivo: #A9B28C;
  --arena: #E6D9C3;
  --mandarina: #EE7A30;
  --limon: #F2CB57;
  --tinta: #16251C;
  --corteza: #9E4526;
  --shadow-card: 0 12px 26px rgba(40, 30, 15, 0.16);
  --shadow-lift: 0 20px 44px rgba(40, 30, 15, 0.22);
}

[data-theme=arena] {
  --surface: var(--arena);
  --ink: var(--tinta);
  --ink-soft: var(--higuera);
  --heading: var(--higuera);
  --label: var(--corteza);
  --link: var(--corteza);
  --alert: var(--corteza);
  --line: #C9BBA2;
  --control-border: var(--higuera);
  --focus-ring: var(--tinta);
}

[data-theme=olivo] {
  --surface: var(--olivo);
  --ink: var(--tinta);
  --ink-soft: var(--tinta);
  --heading: var(--tinta);
  --label: var(--tinta);
  --link: var(--tinta);
  --alert: var(--tinta);
  --line: #7E8869;
  --control-border: var(--tinta);
  --focus-ring: var(--tinta);
}

[data-theme=higuera] {
  --surface: var(--higuera);
  --ink: var(--lino);
  --ink-soft: var(--arena);
  --heading: var(--lino);
  --label: var(--limon);
  --link: var(--limon);
  --alert: var(--limon);
  --line: #3C5A46;
  --control-border: var(--arena);
  --focus-ring: var(--limon);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 48px;
  --space-8: 72px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --container: 1120px;
  --measure: 65ch;
  --gutter-phone: 16px;
  --gutter-desktop: 36px;
  --header-height: 96px;
  --header-height-phone: 58px;
  --breakpoint-tablet: 720px;
  --breakpoint-desktop: 1024px;
  --font-display: Fraunces, "Markazi Text", "Noto Sans Arabic", Georgia, serif;
  --font-text: Figtree, "Noto Sans Arabic", system-ui, sans-serif;
  --font-hand: "Playwrite ES", "Aref Ruqaa", "Noto Sans Arabic", cursive;
}

.sca-display {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  font-weight: 400;
}

.sca-title, .ds-imprint h1, .item-view__title {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.05;
  font-weight: 400;
}

.sca-heading {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
}

.sca-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 400;
}

.sca-subtitle {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
  font-style: italic;
}

.sca-quote {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 400;
  font-style: italic;
}

.sca-body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
}

.sca-small {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

.sca-label {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.sca-button {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}

.sca-note {
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
}

.sca-ar-display {
  font-family: var(--font-display);
  font-size: 70px;
  line-height: 1.2;
  font-weight: 500;
}

.sca-ar-title {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.25;
  font-weight: 500;
}

.sca-ar-heading {
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1.35;
  font-weight: 500;
}

.sca-ar-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 500;
}

.sca-ar-body {
  font-family: var(--font-text);
  font-size: 19px;
  line-height: 1.8;
  font-weight: 400;
}

.sca-ar-small {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400;
}

.sca-ar-label {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
}

.sca-ar-note {
  font-family: var(--font-hand);
  font-size: 24px;
  line-height: 1.6;
  font-weight: 400;
}

/* This site: the framework's Bootstrap and the old stylesheet, set aside inside the new markup */
/* Inside the new markup (.sca-site, the root of every rebuilt document), the framework's Bootstrap reboot and
   the old stylesheet's element rules give way: no default margins or list indents, the design system's heading
   face and the link colour of the ground. These come before the design system's components, so its own rules,
   of equal or greater weight, win wherever they set the same thing. */
.sca-site :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {
  margin: 0;
}

.sca-site :where(ul, ol) {
  padding-inline-start: 0;
}

.sca-site :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--heading);
}

.sca-site :where(a) {
  color: var(--link);
}

.sca-site :where(img) {
  max-width: 100%;
  height: auto;
}

/* components.css (design system v01) */
/* Sara con Amor — component styles. Every colour, size and step comes from tokens.css (tokens.json).
   Class names (sca-*) are the contract: the React components in bundle.js only render this markup. */
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body:lang(ar) {
  font-size: 19px;
  line-height: 1.8;
}

[data-theme] {
  background-color: var(--surface);
  color: var(--ink);
}

/* Type: Fraunces with the Soft axis, Playwrite with its school style set, labels in spaced capitals */
.sca-display, .sca-title, .ds-imprint h1, .item-view__title, .sca-heading, .sca-card-title, .sca-subtitle, .sca-quote, .sca-longword {
  font-variation-settings: "SOFT" 100, "WONK" 0;
}

.sca-display, .sca-title, .ds-imprint h1, .item-view__title, .sca-heading, .sca-card-title, .sca-subtitle {
  color: var(--heading);
  text-wrap: balance;
}

.sca-label {
  color: var(--label);
  text-transform: uppercase;
}

.sca-note {
  font-feature-settings: "ss01";
  color: var(--heading);
}

.sca-small {
  color: var(--ink-soft);
}

/* Arabic: with lang="ar" the same classes switch to the Arabic faces, about 10 % larger, no spacing, no italic */
:lang(ar) .sca-display {
  font-size: 70px;
  line-height: 1.2;
  font-weight: 500;
}

:lang(ar) .sca-title, :lang(ar) .ds-imprint h1, .ds-imprint :lang(ar) h1, :lang(ar) .item-view__title {
  font-size: 48px;
  line-height: 1.25;
  font-weight: 500;
}

:lang(ar) .sca-heading {
  font-size: 29px;
  line-height: 1.35;
  font-weight: 500;
}

:lang(ar) .sca-card-title {
  font-size: 24px;
  line-height: 1.35;
  font-weight: 500;
}

:lang(ar) .sca-subtitle {
  font-size: 26px;
  line-height: 1.45;
  font-weight: 500;
  font-style: normal;
}

:lang(ar) .sca-quote {
  font-size: 33px;
  line-height: 1.45;
  font-weight: 500;
  font-style: normal;
}

:lang(ar) .sca-body {
  font-size: 19px;
  line-height: 1.8;
}

:lang(ar) .sca-small {
  font-size: 15px;
  line-height: 1.8;
}

:lang(ar) .sca-label {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .sca-button {
  font-size: 16px;
}

:lang(ar) .sca-note {
  font-size: 24px;
  line-height: 1.6;
  font-feature-settings: normal;
}

:lang(ar) .sca-longword {
  font-style: normal;
  font-weight: 500;
  font-size: clamp(44px, 8.8vw, 106px);
}

/* Quotation marks by language */
:lang(es), :lang(ca), :lang(ar) {
  quotes: "«" "»" "“" "”";
}

:lang(fr) {
  quotes: "« " " »" "“" "”";
}

:lang(en) {
  quotes: "“" "”" "‘" "’";
}

/* Inks for the brand marks and drawings (one colour at a time) */
.sca-ink--current {
  color: inherit;
}

.sca-ink--heading {
  color: var(--heading);
}

.sca-ink--higuera {
  color: var(--higuera);
}

.sca-ink--lino {
  color: var(--lino);
}

.sca-ink--tinta {
  color: var(--tinta);
}

.sca-ink--mandarina {
  color: var(--mandarina);
}

.sca-ink--limon {
  color: var(--limon);
}

.sca-ink--olivo {
  color: var(--olivo);
}

.sca-svg {
  display: inline-block;
  line-height: 0;
}

.sca-svg svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Focus and links */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

/* A card that sets its own ground draws the ring inside, on that ground: outside it would sit on the page in the card's colour */
a.sca-card[data-theme]:focus-visible {
  outline-offset: -6px;
  border-radius: var(--radius-lg);
}

.sca-link, .sca-prose a, .item-view__content a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sca-link:hover, .sca-prose a:hover, .item-view__content a:hover {
  text-decoration-thickness: 2px;
}

/* Visually hidden text for screen readers */
.sca-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The hidden language names use a system face, so a page fetches no Arabic font for the word العربية */
.sca-langs .sca-sr {
  font-family: system-ui, sans-serif;
}

/* Layout helpers */
.sca-container, .item-view {
  box-sizing: border-box;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

.sca-section {
  padding-block: var(--space-7);
}

.sca-prose, .item-view__content {
  max-width: var(--measure);
}

.sca-prose p, .item-view__content p {
  margin: 0 0 1em;
}

.sca-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.sca-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: center;
  gap: var(--space-7);
}

.sca-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.sca-stack > * {
  margin: 0;
}

@media (max-width: 719px) {
  .sca-container, .item-view {
    padding-inline: var(--gutter-phone);
  }
  .sca-section {
    padding-block: var(--space-6);
  }
  .sca-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  .sca-title, .ds-imprint h1, .item-view__title {
    font-size: 34px;
  }
  .sca-quote {
    font-size: 24px;
  }
  :lang(ar) .sca-title, :lang(ar) .ds-imprint h1, .ds-imprint :lang(ar) h1, :lang(ar) .item-view__title {
    font-size: 38px;
  }
  :lang(ar) .sca-quote {
    font-size: 27px;
  }
}
/* Logo */
.sca-logo {
  color: var(--heading);
}

.sca-logo--signature {
  min-width: 150px;
}

.sca-logo--symbol {
  min-width: 16px;
}

/* Button */
.sca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

:lang(ar) .sca-btn {
  font-size: 16px;
}

.sca-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}

.sca-btn--primary:hover {
  box-shadow: var(--shadow-card);
}

.sca-btn--secondary {
  background: transparent;
  color: var(--heading);
  border-color: var(--control-border);
}

.sca-btn--secondary:hover {
  background: var(--line);
}

.sca-btn--text {
  min-height: 44px;
  padding: 0 4px;
  border-radius: 2px;
  background: none;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sca-btn:active {
  transform: translateY(1px);
}

.sca-btn[disabled], .sca-btn[aria-disabled=true] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Language switch: ES · CA · EN · FR · AR */
.sca-langs ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.sca-langs li {
  display: flex;
  align-items: center;
}

.sca-langs li + li::before {
  content: "·";
  color: var(--label);
  padding-inline: 4px;
}

.sca-langs__link {
  display: inline-block;
  min-width: 24px;
  padding: 6px 4px;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--label);
  text-align: center;
  text-decoration: none;
}

.sca-langs__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sca-langs__link[aria-current=true] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Site header */
.sca-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  box-sizing: border-box;
  min-height: var(--header-height);
  padding-inline: max(var(--gutter-desktop), (100% - var(--container)) / 2 + var(--gutter-desktop));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.sca-header__home {
  display: inline-flex;
  align-items: center;
  color: var(--heading);
  text-decoration: none;
}

.sca-header__signature {
  width: 150px;
}

.sca-header__symbol {
  display: none;
  width: 32px;
}

.sca-header__end {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.sca-header__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sca-header__nav a {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}

.sca-header__nav a:hover, .sca-header__nav a[aria-current=page] {
  text-decoration: underline;
  text-decoration-color: var(--heading);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.sca-header__menu {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--heading);
  cursor: pointer;
}

.sca-header__menu span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

/* Below 1024px (breakpoint-desktop): the symbol and a menu button; below 720px also the phone gutter */
@media (max-width: 1023px) {
  .sca-header {
    min-height: var(--header-height-phone);
    gap: var(--space-3);
  }
  .sca-header__signature {
    display: none;
  }
  .sca-header__symbol {
    display: block;
  }
  .sca-header__menu {
    display: inline-flex;
  }
  .sca-header__nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 10;
    padding: var(--space-4) var(--gutter-desktop) var(--space-5);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .sca-header__nav.is-open {
    display: block;
  }
  .sca-header__nav ul {
    flex-direction: column;
    gap: 0;
  }
  .sca-header__nav a {
    padding-block: var(--space-3);
    font-size: 17px;
  }
}
@media (max-width: 719px) {
  .sca-header {
    padding-inline: var(--gutter-phone);
  }
  .sca-header__nav {
    padding-inline: var(--gutter-phone);
  }
}
/* Hero */
.sca-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
  box-sizing: border-box;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-7) var(--gutter-desktop);
}

.sca-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.sca-hero__text > * {
  margin: 0;
}

.sca-hero__text .sca-btn {
  margin-top: var(--space-2);
}

@media (max-width: 719px) {
  .sca-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5) var(--gutter-phone) var(--space-6);
  }
  .sca-hero__media {
    order: -1;
  }
  .sca-hero .sca-display {
    font-size: 40px;
  }
  :lang(ar) .sca-hero .sca-display {
    font-size: 44px;
  }
}
/* Embrace frame: the line of the signature holding one photograph (once per page) */
.sca-embrace {
  position: relative;
  margin: 0 8.5% 9.5%;
  min-width: 0;
}

.sca-embrace__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 380/270;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.sca-embrace__line {
  position: absolute;
  inset-inline-start: -8.42%;
  top: 10.37%;
  width: 116.84%;
  pointer-events: none;
}

.sca-embrace figcaption {
  margin-top: 13%;
}

/* Section card */
.sca-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.sca-card--limon {
  --ink: var(--tinta);
  --ink-soft: var(--tinta);
  --heading: var(--tinta);
  --label: var(--tinta);
  --link: var(--tinta);
  --focus-ring: var(--tinta);
  background: var(--limon);
  color: var(--tinta);
}

.sca-card__drawing {
  width: 40px;
  color: var(--heading);
}

.sca-card__title {
  margin: 0;
}

.sca-card__text {
  margin: 0;
}

a.sca-card:hover .sca-card__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Quote */
.sca-quoteblock {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.sca-quote__text {
  margin: 0;
  color: var(--heading);
}

.sca-quote__text::before {
  content: open-quote;
}

.sca-quote__text::after {
  content: close-quote;
}

/* Spanish and Catalan close the quote before her full stop: «…». */
.sca-quote__text:lang(es)::after, .sca-quote__text:lang(ca)::after {
  content: none;
}

.sca-quote__text:lang(es) .sca-quote__words::after, .sca-quote__text:lang(ca) .sca-quote__words::after {
  content: close-quote;
}

.sca-quote__source {
  margin: 0;
  color: var(--label);
  font-size: 13px;
  font-weight: 600;
}

/* The long word */
.sca-longword {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

/* Route: a dashed path from a dot to a heart; it runs right to left in Arabic */
.sca-route {
  display: block;
  width: 100%;
  color: var(--heading);
  --heart: var(--mandarina);
}

[dir=rtl] .sca-route svg {
  transform: scaleX(-1);
}

/* Stop of La ruta del abrazo */
.sca-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--lino);
  box-shadow: var(--shadow-card);
}

.sca-stop__media {
  position: relative;
  flex: 1;
  min-height: 0;
}

.sca-stop__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sca-stop__postmark {
  position: absolute;
  top: 14px;
  inset-inline-end: -6px;
  width: 46%;
  transform: rotate(-8deg);
}

.sca-stop__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px;
  background: var(--lino);
}

.sca-stop__text > * {
  margin: 0;
}

.sca-stop__places {
  color: var(--higuera);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}

:lang(ar) .sca-stop__places {
  font-size: 24px;
}

/* Sign-off */
.sca-signoff {
  margin: 0;
}

/* Form fields */
.sca-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sca-field__label {
  color: var(--heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.sca-field__control {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
}

:lang(ar) .sca-field__control {
  font-size: 19px;
}

textarea.sca-field__control {
  min-height: 140px;
  resize: vertical;
}

.sca-field__hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.sca-field__error {
  margin: 0;
  color: var(--alert);
  font-size: 14px;
  font-weight: 600;
}

.sca-field.is-invalid .sca-field__control {
  border: 2px solid var(--alert);
  padding: 11px 13px;
}

.sca-field--check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 10px;
}

.sca-field--check .sca-field__control {
  width: 24px;
  min-height: 0;
  height: 24px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--heading);
  flex: none;
}

.sca-field--check .sca-field__label {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  font-size: 15px;
  color: var(--ink);
}

.sca-field--check .sca-field__hint, .sca-field--check .sca-field__error {
  flex-basis: 100%;
  padding-inline-start: 32px;
}

/* Footer */
.sca-footer {
  box-sizing: border-box;
  padding: var(--space-7) 0 var(--space-6);
  background: var(--surface);
  color: var(--ink);
}

.sca-footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-5) var(--space-6);
  box-sizing: border-box;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

.sca-footer__symbol {
  width: 48px;
  color: var(--heading);
}

.sca-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sca-footer__nav a {
  display: inline-block;
  min-height: 24px;
  color: var(--ink);
  text-decoration: none;
}

.sca-footer__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sca-footer__note {
  grid-column: 1/-1;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
}

@media (max-width: 719px) {
  .sca-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--gutter-phone);
  }
}
/* Drawing */
.sca-drawing {
  width: 40px;
  color: var(--heading);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
/* sca-site.css (the developer handoff v0.1's additions, a Proposal) */
/* Sara con Amor website: the job's additions to the design system v01.
   Status: Proposal (developer handoff v0.1), proposed for the design system's next version;
   when that version includes them, this file is dropped.
   Load it after tokens.css and components.css. Every colour, size, space and radius comes from
   the design system's tokens; type comes from its classes (sca-button, sca-heading, sca-small...)
   set in the markup. The only values of its own are noted where they are. */
/* The skip link: the first focus of every page, out of sight until it has focus.
   Markup: <a class="sca-skip sca-button" href="#contenido">, first in <body>. */
.sca-skip {
  position: absolute;
  z-index: 30;
  top: var(--space-2);
  inset-inline-start: var(--gutter-phone);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sca-skip:not(:focus) {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sara's long texts: the renderer gives h2 the class sca-heading and h3 sca-card-title (Front-end spec, Blocks) */
.sca-prose > :first-child, .item-view__content > :first-child {
  margin-top: 0;
}

.sca-prose .sca-heading, .item-view__content .sca-heading {
  margin: var(--space-7) 0 var(--space-4);
}

.sca-prose .sca-card-title, .item-view__content .sca-card-title {
  margin: var(--space-5) 0 var(--space-2);
}

.sca-prose ul, .item-view__content ul, .sca-prose ol, .item-view__content ol {
  margin: 0 0 1em;
  padding-inline-start: 1.25em;
} /* 1.25em: the bullet's indent */
.sca-prose li + li, .item-view__content li + li {
  margin-top: var(--space-1);
}

/* In a stack (.sca-stack lines its children up at the start and lets them shrink), cards and forms take the
   whole width of the column instead, as they do directly in a .sca-container */
.sca-stack > .sca-cards, .sca-stack > .sca-form {
  align-self: stretch;
}

/* A photograph between two prose blocks, outside the embrace (which holds one photograph per page).
   Markup: <figure class="sca-figure"><img ...><figcaption class="sca-small">...</figcaption></figure> */
.sca-figure {
  max-width: var(--measure);
  margin: var(--space-6) 0;
}

.sca-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.sca-figure figcaption {
  margin-top: var(--space-2);
}

/* The join form: fields from the design system's Field, the messages line, the spam trap, the sent panel */
.sca-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--measure);
  margin: 0;
}

.sca-form[hidden] {
  display: none;
}

.sca-form__end > .sca-form__msg {
  margin: 0;
}

.sca-form__end > .sca-form__msg:not(:empty) {
  margin-bottom: var(--space-3);
}

.sca-form__msg--alert {
  color: var(--alert);
  font-weight: 600;
}

.sca-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sca-form__sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: var(--measure);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.sca-form__sent[hidden] {
  display: none;
}

.sca-form__sent > * {
  margin: 0;
}

/* This site: the framework's own parts in the design system's dress */
/* The framework's own parts in the design system's dress (header, footer, forms, newsletter, comments,
   the video placeholder), and the sizes of the marks the builder's Icon component draws. Every value comes
   from the design system's tokens. */
/* Marks and drawings: the builder's Icon component draws them as a span holding the SVG; the design system's
   markup gives that span its proportions inline, here they come from its class, so nothing moves as it loads. */
.sca-header__signature {
  aspect-ratio: 951.54/504.78;
}

.sca-header__symbol, .sca-footer__symbol {
  aspect-ratio: 1;
}

.sca-drawing, .sca-card__drawing {
  aspect-ratio: 1;
}

.sca-embrace__line {
  aspect-ratio: 481.37/287;
}

.sca-route {
  aspect-ratio: 1033.01/121.16;
}

/* The header holds the skip link (absolute, so it takes no place in the row) and, for a reader who has signed
   in to comment or react, the account menu: the avatar, the name, and the menu the framework fills in. */
.sca-header .sca-skip {
  inset-inline-start: var(--gutter-phone);
}

.sca-header .sca-account .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
}

.sca-header .sca-account .dropdown-toggle::after {
  display: none;
}

.sca-header .sca-account .auth_avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.sca-header .sca-account .auth_name {
  padding: 0 !important;
}

.sca-header .sca-account .dropdown-menu {
  padding: var(--space-2) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.sca-header .sca-account .dropdown-item {
  padding: var(--space-2) var(--space-4);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
}

.sca-header .sca-account .dropdown-item:hover, .sca-header .sca-account .dropdown-item:focus {
  background: var(--arena);
  color: var(--ink);
}

@media (max-width: 1023px) {
  .sca-header .sca-account .auth_name {
    display: none !important;
  }
}
/* The footer's newsletter: the Campaigns module's signup form, on the footer's Higuera ground, drawn as the
   design system's Field and primary button. Its own stylesheet comes with the form; these rules outweigh it. */
.sca-footer__newsletter {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--measure);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.sca-footer .sca-newsletter .campaigns-signup {
  max-width: none;
  font-family: var(--font-text);
}

.sca-footer .sca-newsletter .campaigns-signup__label {
  margin-bottom: 6px;
  color: var(--heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.sca-footer .sca-newsletter .campaigns-signup__row {
  gap: var(--space-3);
}

.sca-footer .sca-newsletter .campaigns-signup__row input[type=email] {
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.4;
}

.sca-footer .sca-newsletter .campaigns-signup__row input[type=email]:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.sca-footer .sca-newsletter .campaigns-signup__row button {
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.sca-footer .sca-newsletter .campaigns-signup__row button:hover {
  box-shadow: var(--shadow-card);
}

.sca-footer .sca-newsletter .campaigns-signup__row button:active {
  transform: translateY(1px);
}

.sca-footer .sca-newsletter .campaigns-signup__consent {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: 14px;
  opacity: 1;
}

.sca-footer .sca-newsletter .campaigns-signup__consent a {
  color: var(--link);
  text-underline-offset: 3px;
}

.sca-footer .sca-newsletter .campaigns-signup__errors {
  background: var(--lino);
  color: var(--corteza);
}

.sca-footer .sca-newsletter .campaigns-signup--done {
  background: var(--lino);
  color: var(--tinta);
}

/* The framework's compliance line under the footer (the legal pages and the cookie preferences): with the new
   footer on the page, it carries on the footer's Higuera ground. */
.ds-compliance-footer-strip {
  background: var(--higuera);
  color: var(--arena);
  font-family: var(--font-text);
  font-size: 14px;
}

.ds-compliance-footer-strip a, .ds-compliance-footer-strip button {
  color: var(--limon);
}

/* The newest posts on the home page and the Blog (the builder's list of a category's pages, each post a card
   of the design system with its cover on top). */
.sca-posts {
  width: 100%;
}

.sca-post {
  gap: var(--space-2);
  padding: 0 0 18px;
  overflow: hidden;
}

.sca-post > :not(.sca-post__image) {
  margin-inline: 20px;
}

.sca-post__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.sca-post__date {
  margin-top: var(--space-2);
}

/* A post's summary can run long (it is the post's own description); the card shows its first four lines. */
.sca-post .sca-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.sca-posts + .sca-posts {
  margin-top: var(--space-4);
}

/* The way on at the end of the inner pages (the owner's step 10): the previous and next pages as two cards on
   Arena, then the way up as a link. A tighter section, so it reads with the text above it. */
.sca-section--tight {
  padding-block: var(--space-5);
}

.sca-pager {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sca-pager__card {
  min-height: 0;
}

.sca-pager__up {
  margin: 0;
}

/* Quién soy: her lines beside her photograph, one a line. */
.sca-lines {
  line-height: 1.45;
}

/* Reading width for a line of text outside the prose (a category's description) */
.sca-measure {
  max-width: var(--measure);
}

/* Medicina: each medicine's photograph beside its text, whole, never cropped */
.sca-medicine__figure {
  margin: 0;
  max-width: none;
}

/* The join form (the Forms module's form, in the design system's Field markup). The module adds its own
   error line after a control in error and keeps the send button disabled while it sends. */
.sca-form .sca-field__optional {
  font-weight: 400;
  color: var(--ink-soft);
}

.sca-form .sca-field .invalid-feedback {
  display: block !important;
  margin: 0;
  color: var(--alert);
  font-size: 14px;
  font-weight: 600;
}

.sca-form .sca-field:has(.invalid-feedback) .sca-field__control {
  border: 2px solid var(--alert);
  padding: 11px 13px;
}

.sca-form .form-group {
  margin: 0;
}

.sca-form .sca-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.sca-form__privacy {
  margin: 0;
}

.sca-form__privacy a {
  color: var(--link);
}

.sca-form-embed {
  width: 100%;
  max-width: var(--measure);
}

/* A video of Sara's talks: the builder's player waits for the visitor's choice (the cookie preference for
   external media). Its cover is shown whole and its notice under it, never on the photograph (D10), with the
   design's buttons. */
.sca-video {
  max-width: 860px;
}

.sca-video .ds-video-consent {
  flex-direction: column;
  align-items: stretch;
  aspect-ratio: auto;
  background: none;
  color: var(--ink);
  text-align: start;
}

.sca-video .ds-video-consent-cover {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.sca-video .ds-video-consent-body {
  max-width: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--arena);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
}

.sca-video .ds-video-consent-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--heading);
}

.sca-video .ds-video-consent-text {
  color: var(--ink);
}

.sca-video .ds-video-consent-actions {
  justify-content: flex-start;
  gap: var(--space-3);
}

.sca-video .ds-video-consent-actions button {
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid var(--control-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
}

.sca-video .ds-video-consent-play {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}

.sca-video .ds-video-consent-settings {
  background: transparent;
  color: var(--heading);
}

.sca-video .ds-video-consent-actions button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.sca-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: var(--radius-lg);
}

/* Comments and reactions on the Blog's posts (the Engagement module): its own stylesheet reads a few variables,
   given here the design system's values, so it sits on the posts as one of the design's Arena blocks. That
   stylesheet is printed inside the page, after this one, so the rules here are one step more specific than its
   single classes. */
body .ds-engagement {
  --ds-font-sans: var(--font-text);
  --ds-surface: var(--arena);
  --ds-surface-raised: var(--lino);
  --ds-text: var(--ink);
  --ds-text-muted: var(--ink-soft);
  --ds-border: var(--line);
  --ds-secondary: var(--corteza);
  max-width: calc(var(--measure) + 2 * var(--space-5));
  margin: var(--space-5) 0;
  border: 0;
  border-radius: var(--radius-lg);
  font-size: 17px;
}

.ds-engagement .ds-engagement-heading {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: var(--heading);
}

.ds-engagement .ds-engagement-primary {
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.ds-engagement .ds-engagement-input {
  border-color: var(--control-border);
  border-radius: var(--radius-md);
  background: var(--lino);
}

body .ds-engagement :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* The long word: the design sets it at 40 to 96 px and lets it break anywhere, which suits its short sample. Sara's
   own closing words are longer ("Un abrazoooooooooooo,", "A big huuuuuuuuuuuuuuggggg,"): at 40 px they break
   inside the word on a phone, a comma alone on the last line. A long one shrinks with the screen instead
   (checked at 320 to 1920 px: no word breaks); the design's 96 px stays its largest size. */
.sca-longword--long {
  font-size: clamp(22px, 7.5vw, 96px);
}

/* The builder publishes a space before every closing tag (a framework habit), which would show before the
   closing quotation mark the design system draws after Sara's words: the mark is drawn back over that space,
   exactly its width (Fraunces' space is 0.2em; measured 5.98px at 30px), so the French narrow space stays. */
.sca-quote__text::after, .sca-quote__words::after {
  margin-inline-start: -0.2em;
}

/* The framework's own pages and parts outside the rebuilt documents. Since the final stylesheet the body carries
   the design's font and ground, and these follow the design's frame and type. */
/* The legal pages: plain pages without a builder design (yet). Their seeded placeholder text brings its own
   Bootstrap section and title until the real texts are written (step 7). */
.item-view {
  padding-block: var(--space-7);
}

.item-view__title {
  margin: 0 0 var(--space-5);
}

.item-view__content :where(section, .container) {
  max-width: none;
  margin: 0;
  padding: 0;
}

.item-view__content :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--heading);
}

/* The legal notice: the framework's own page, without the site's header and footer. */
.ds-imprint h1 {
  margin: 0 0 var(--space-5);
}

.ds-imprint a {
  color: var(--link);
}

/* The cookie banner, in the design: on Lino, its text, links and buttons. Reject and Accept stay equal, as the
   handoff asks of any banner; Manage is a text button. Bootstrap's utilities on it carry !important, and its
   buttons take their colours from Bootstrap's own variables, set here. */
.ds-cookie-banner {
  background-color: var(--lino) !important;
  color: var(--ink);
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -10px 30px rgba(40, 30, 15, 0.14) !important;
  font-family: var(--font-text);
}

.ds-cookie-banner p, .ds-cookie-banner .form-check-label {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.ds-cookie-banner .text-muted {
  color: var(--ink-soft) !important;
}

.ds-cookie-banner a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-cookie-banner .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-width: 2px;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

.ds-cookie-banner .btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: var(--on-accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: var(--on-accent);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-active-color: var(--on-accent);
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.ds-cookie-banner .btn-primary:hover {
  box-shadow: var(--shadow-card);
}

.ds-cookie-banner .btn-outline-secondary {
  --bs-btn-color: var(--heading);
  --bs-btn-border-color: var(--control-border);
  --bs-btn-hover-bg: var(--line);
  --bs-btn-hover-color: var(--heading);
  --bs-btn-hover-border-color: var(--control-border);
  --bs-btn-active-bg: var(--line);
  --bs-btn-active-color: var(--heading);
  background-color: transparent;
  border-color: var(--control-border);
  color: var(--heading);
}

.ds-cookie-banner .btn-link {
  --bs-btn-color: var(--link);
  --bs-btn-hover-color: var(--link);
  --bs-btn-active-color: var(--link);
  padding: 0 4px;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-cookie-banner .badge {
  background-color: var(--arena) !important;
  color: var(--ink) !important;
  font-weight: 600;
}

.ds-cookie-banner .form-check-input:checked {
  background-color: var(--higuera);
  border-color: var(--higuera);
}

/* Its keyboard focus: the design's ring (Bootstrap's own focus is a shadow, which the buttons above leave out). */
.ds-cookie-banner .btn:focus-visible, .ds-cookie-banner a:focus-visible, .ds-cookie-banner .form-check-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------------------------------------
   Round 4 (2026-10-26): the brand book's own touches and the atmosphere of Sara's previous site
   --------------------------------------------------------------------------------------------------------- */
/* The orchard: a tree or road photograph across the page, softened, behind a calm panel. The panel carries the
   words, so text never sits on the photograph (the brand book's calm grounds); the photograph breathes behind it
   as Sara's previous site set its trees behind its pages (the owner, 2026-10-26). On a computer it drifts a
   little as the page scrolls (site.js). */
.sca-orchard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(64px, 11vw, 150px);
  background: var(--higuera);
}

.sca-orchard .sca-orchard__photo {
  position: absolute;
  inset: -10% 0 auto;
  z-index: -2;
  width: 100%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  filter: blur(6px) saturate(1.08);
  transform: translate3d(0, var(--sca-drift, 0px), 0) scale(1.06);
}

.sca-orchard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(31, 61, 43, 0.25), rgba(31, 61, 43, 0.5));
}

.sca-orchard__panel {
  box-sizing: border-box;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.sca-orchard__panel > :first-child {
  margin-top: 0;
}

.sca-orchard__panel > :last-child {
  margin-bottom: 0;
}

/* The seal of La ruta del abrazo: one ink (the ground's heading colour) and its Mandarina heart. As it comes into
   view its lettered ring turns into place, as the circle of letters on the previous site turned, and then rests:
   nothing keeps moving on its own (brand book, accessibility). */
.sca-seal {
  display: block;
  aspect-ratio: 1;
  color: var(--heading);
  --heart: var(--mandarina);
}

.sca-seal svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sca-seal .sca-seal__ring {
  transform-box: view-box;
  transform-origin: 300px 300px;
} /* the circle's centre in the seal's
own units: its drawing starts at 37,37, not 0,0, and the view-box origin is 0,0, so 50% 50% turned the ring about a point
37 units up and left of the centre, which showed as the ring sliding off the circle at the start of the turn */
.sca-seal.sca-anim .sca-seal__ring {
  transform: rotate(-150deg);
}

.sca-seal.sca-anim.is-seen .sca-seal__ring {
  animation: sca-turn 4s cubic-bezier(0.2, 0.6, 0.25, 1) 0.2s forwards;
}

@keyframes sca-turn {
  to {
    transform: rotate(0deg);
  }
}
.sca-route-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.sca-route-head__seal {
  flex: none;
  width: clamp(96px, 11vw, 136px);
}

/* The pen draws. site.js adds sca-anim (and is-seen once in view) only when the visitor has not asked for less
   motion; without it everything is simply there. The embrace is drawn as the signature makes it: from the right
   tip, round the bottom, up into the left; the route from its dot to its heart, which then beats once. */
@property --sca-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}
@property --sca-wipe {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
.sca-embrace__line {
  -webkit-mask-image: conic-gradient(from 40deg at 50% 30%, #000 var(--sca-sweep), transparent 0);
  mask-image: conic-gradient(from 40deg at 50% 30%, #000 var(--sca-sweep), transparent 0);
}

.sca-anim .sca-embrace__line {
  --sca-sweep: 0deg;
}

.sca-anim.is-seen .sca-embrace__line {
  animation: sca-sweep 1.9s cubic-bezier(0.45, 0.05, 0.3, 1) 0.25s forwards;
}

@keyframes sca-sweep {
  to {
    --sca-sweep: 360deg;
  }
}
.sca-route {
  -webkit-mask-image: linear-gradient(90deg, #000 var(--sca-wipe), transparent 0);
  mask-image: linear-gradient(90deg, #000 var(--sca-wipe), transparent 0);
}

.sca-route.sca-anim {
  --sca-wipe: 0%;
}

.sca-route.sca-anim.is-seen {
  animation: sca-wipe 2.2s cubic-bezier(0.45, 0.05, 0.3, 1) forwards;
}

@keyframes sca-wipe {
  to {
    --sca-wipe: 100%;
  }
}
.sca-route.is-seen svg path[style*=heart], .sca-hug.is-seen .sca-heart svg {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: sca-beat 0.8s ease-out 2.1s both;
}

@keyframes sca-beat {
  0%, 100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.4);
  }
  65% {
    transform: scale(0.94);
  }
}
/* A stop's postmark lands like a stamp, on the design's own angle; a stop card leans like a postcard */
.sca-anim .sca-stop__postmark {
  opacity: 0;
  transform: scale(1.6) rotate(-20deg);
}

.sca-anim.is-seen .sca-stop__postmark {
  animation: sca-stamp 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.5s forwards;
}

@keyframes sca-stamp {
  to {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }
}
.sca-stop--right {
  transform: rotate(1.6deg);
}

.sca-stop--left {
  transform: rotate(-1.6deg);
}

/* The long word stretches: after "abrazo" her pen keeps writing the repeated letters, left to right (their room
   is kept, so nothing moves; the generous insets leave the italic's overhang alone) */
.sca-anim .sca-longword__stretch {
  clip-path: inset(-25% 100% -25% 0);
}

.sca-anim.is-seen .sca-longword__stretch {
  animation: sca-stretch 1.7s cubic-bezier(0.35, 0.6, 0.4, 1) 0.3s forwards;
}

@keyframes sca-stretch {
  to {
    clip-path: inset(-25% -25% -25% 0);
  }
}
/* The postcard: a small photograph or a drawing on a card, tilted a little, its caption in Sara's hand. One size
   for every such picture, so none is stretched beyond its file. */
.sca-postcard {
  box-sizing: border-box;
  width: min(100%, 320px);
  margin: 0;
  padding: 12px 12px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.sca-postcard--left {
  transform: rotate(-1.6deg);
}

.sca-postcard--right {
  transform: rotate(1.4deg);
}

.sca-postcard .sca-postcard__image {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 2px;
}

.sca-postcard--drawing .sca-postcard__image {
  object-fit: contain;
}

.sca-postcard__caption {
  margin-top: 10px;
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.4;
}

/* Sara's portraits in round frames (brand book p. 3: the circles and round frames her previous site loved): the
   photograph in a circle, ringed by the pen's fine line, which draws itself once in view. One size everywhere. */
.sca-round {
  position: relative;
  box-sizing: border-box;
  flex: none;
  align-self: flex-start;
  width: clamp(140px, 17vw, 230px);
  aspect-ratio: 1;
  margin: 0;
  padding: 10px;
  color: var(--heading);
}

.sca-round .sca-round__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.sca-round--bw .sca-round__image {
  filter: grayscale(1);
}

.sca-round::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  -webkit-mask-image: conic-gradient(from 200deg, #000 var(--sca-sweep), transparent 0);
  mask-image: conic-gradient(from 200deg, #000 var(--sca-sweep), transparent 0);
}

.sca-round.sca-anim::before {
  --sca-sweep: 0deg;
}

.sca-round.sca-anim.is-seen::before {
  animation: sca-sweep 1.6s cubic-bezier(0.45, 0.05, 0.3, 1) 0.2s forwards;
}

.sca-orchard .sca-round {
  color: var(--lino);
}

/* On the orchard the portraits stand beside the panel, the second a little lower and overlapping the first */
.sca-orchard__row {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.sca-orchard__row .sca-orchard__panel {
  width: 100%;
  margin-inline: 0;
}

.sca-orchard__beside {
  display: flex;
  justify-content: center;
}

.sca-orchard__beside .sca-round + .sca-round {
  margin-inline-start: -24px;
  margin-top: 72px;
}

@media (min-width: 900px) {
  .sca-orchard__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
/* A page that opens on an orchard: its panel lines up with the page's text column below it */
.sca-orchard--opening .sca-orchard__panel {
  margin-inline: 0;
}

/* A stop's card beside an orchard's panel (a stop's opening), the panel first */
@media (min-width: 900px) {
  .sca-orchard__row--end {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.sca-orchard__beside .sca-stop {
  width: 340px;
  max-width: 100%;
}

/* The poster (guidelines p. 21: photograph above, title and seal below): La ruta del abrazo's opening. The seal
   sits on the photograph's lower edge on a disc of the page's ground; the title keeps clear of it. */
.sca-poster {
  --sca-poster-seal: clamp(96px, 13vw, 168px);
  padding-block: var(--space-6) var(--space-7);
}

.sca-poster__media {
  position: relative;
  margin-bottom: var(--space-5);
}

.sca-poster .sca-poster__photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 21/9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.sca-poster .sca-poster__seal {
  position: absolute;
  inset-inline-end: clamp(16px, 4vw, 56px);
  bottom: 0;
  box-sizing: border-box;
  width: var(--sca-poster-seal);
  padding: 8px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transform: translateY(50%);
}

.sca-poster__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline-end: calc(var(--sca-poster-seal) + var(--space-5));
}

.sca-poster__text > * {
  margin: 0;
}

@media (max-width: 719px) {
  .sca-poster .sca-poster__photo {
    aspect-ratio: 4/3;
  }
  .sca-poster__media {
    margin-bottom: calc(var(--sca-poster-seal) / 2 + var(--space-4));
  }
  .sca-poster__text {
    padding-inline-end: 0;
  }
}
/* La ruta alrededor del mundo as a map: the route runs between the stops' cards, its dot by the first and its
   heart by the last; on a phone the cards stand one under the other, joined by a dashed line */
.sca-routemap {
  position: relative;
  align-self: stretch;
  padding-block: var(--space-4);
}

.sca-routemap__line {
  position: absolute;
  top: 30%;
  inset-inline: calc(min(100%, 340px) + 14px);
  z-index: 0;
  width: auto;
}

.sca-routemap__stops {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sca-routemap__stop {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(100%, 340px);
}

.sca-routemap__stop .sca-stop {
  max-width: none;
}

.sca-routemap__link {
  margin: 0;
  font-size: 18px;
}

@media (max-width: 899px) {
  .sca-routemap__line {
    display: none;
  }
  .sca-routemap__stops {
    flex-direction: column;
    align-items: center;
  }
  .sca-routemap__stop + .sca-routemap__stop::before {
    content: "";
    align-self: center;
    height: 56px;
    border-inline-start: 3px dashed var(--heading);
  }
}
/* A sequence along the route (Actividades, Objetivos): a dashed line down the side, a dot at each step and the
   heart at its end. Each step's dot lands and its stretch of line is drawn as it comes into view. */
.sca-steps {
  max-width: var(--measure);
  margin: var(--space-6) 0 0;
  padding: 0 0 0 48px;
  list-style: none;
}

.sca-step {
  position: relative;
  padding-bottom: var(--space-6);
}

.sca-step::before {
  content: "";
  position: absolute;
  inset-inline-start: -44px;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--heading);
}

.sca-step::after {
  content: "";
  position: absolute;
  inset-inline-start: -35.5px;
  top: 34px;
  bottom: 6px;
  border-inline-start: 3px dashed var(--heading);
}

.sca-step .sca-step__title {
  margin: 0 0 var(--space-3);
}

.sca-step > .sca-prose, .sca-step > .item-view__content {
  margin: 0;
}

.sca-steps__end {
  width: 30px;
  margin: 0 0 0 -1px;
  color: var(--mandarina);
  --heart: var(--mandarina);
}

.sca-step.sca-anim::before {
  transform: scale(0);
}

.sca-step.sca-anim.is-seen::before {
  animation: sca-dot 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}

@keyframes sca-dot {
  to {
    transform: scale(1);
  }
}
.sca-step.sca-anim::after {
  clip-path: inset(0 0 100% 0);
}

.sca-step.sca-anim.is-seen::after {
  animation: sca-down 1.2s cubic-bezier(0.45, 0.05, 0.3, 1) 0.35s forwards;
}

@keyframes sca-down {
  to {
    clip-path: inset(0 0 0 0);
  }
}
.sca-steps__end.sca-anim.is-seen svg {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: sca-beat 0.8s ease-out 0.3s both;
}

/* A letter over its tree (La ruta del abrazo's story): the photograph stays in place while the letter is read,
   held inside its band (as the previous site's fixed backgrounds did), and the letter moves over it. overflow
   clip, not hidden: hidden would make the band a scroll box and stop the photograph from staying. */
.sca-orchard--tall {
  overflow: clip;
  padding-block: 0;
}

.sca-orchard--tall .sca-orchard__photo {
  position: sticky;
  inset: 0 auto auto auto;
  display: block;
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  transform: scale(1.06);
}

.sca-orchard--tall > .sca-container, .sca-orchard--tall > .item-view {
  padding-block: clamp(64px, 11vw, 150px);
}

.sca-letter .sca-orchard__panel {
  max-width: calc(var(--measure) + 2 * clamp(28px, 5vw, 64px));
  padding: clamp(28px, 5vw, 64px);
}

.sca-letter .sca-orchard__panel > .sca-longword {
  margin-top: var(--space-6);
  font-size: clamp(22px, 3.4vw, 44px);
  white-space: nowrap;
} /* her long word fits the letter's width, whole */
.sca-letter .sca-orchard__panel > .sca-signoff {
  margin-top: var(--space-3);
}

/* The prints: every picture in a story at one width, on a small card of the page's ground, tilted a little; on a
   computer each stands in the free space beside her text (the brand's split, words left and pictures right),
   next to the paragraph it comes before; elsewhere between her paragraphs. */
.sca-print {
  box-sizing: border-box;
  width: min(100%, 300px);
  margin: var(--space-6) 0;
  padding: 12px 12px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transform: rotate(-1.4deg);
}

.sca-print:nth-of-type(even) {
  transform: rotate(1.2deg);
}

.sca-print .sca-print__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 2px;
}

.sca-print__caption {
  margin-top: 10px;
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.4;
}

/* (only in a plain column: a split or a stack lays its pictures out itself) */
.sca-container:not(.sca-split):not(.sca-stack):has(> .sca-print), .item-view:not(.sca-split):not(.sca-stack):has(> .sca-print) {
  display: flow-root;
}

@media (min-width: 1100px) {
  .sca-container:not(.sca-split):not(.sca-stack) > .sca-print, .item-view:not(.sca-split):not(.sca-stack) > .sca-print {
    float: right;
    clear: right;
    margin: var(--space-2) 0 var(--space-6) var(--space-6);
  }
}
/* Sara's portraits beside her story (Quién soy): like the prints, in the free space beside her text on a
   computer, between her paragraphs elsewhere */
.sca-container:not(.sca-split):not(.sca-stack):has(> .sca-round), .item-view:not(.sca-split):not(.sca-stack):has(> .sca-round) {
  display: flow-root;
}

.sca-container:not(.sca-split):not(.sca-stack) > .sca-round, .item-view:not(.sca-split):not(.sca-stack) > .sca-round {
  margin: var(--space-6) auto;
}

@media (min-width: 1100px) {
  .sca-container:not(.sca-split):not(.sca-stack) > .sca-round, .item-view:not(.sca-split):not(.sca-stack) > .sca-round {
    float: right;
    clear: right;
    margin: var(--space-2) var(--space-6) var(--space-6) var(--space-6);
  }
}
/* Quién soy opens with her photograph in the embrace beside her lines, on the orchard; the lines appear one by one,
   as her previous page typed them, and then stay */
.sca-orchard__beside .sca-embrace {
  width: clamp(240px, 30vw, 400px);
}

.sca-orchard .sca-embrace {
  --heading: var(--lino);
}

.sca-lines .sca-lines__line {
  display: block;
}

.sca-lines.sca-anim .sca-lines__line {
  opacity: 0;
  transform: translateY(0.3em);
}

.sca-lines.sca-anim.is-seen .sca-lines__line {
  animation: sca-line 0.6s ease-out forwards;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(2) {
  animation-delay: 0.15s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(3) {
  animation-delay: 0.3s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(4) {
  animation-delay: 0.45s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(5) {
  animation-delay: 0.6s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(6) {
  animation-delay: 0.75s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(7) {
  animation-delay: 0.9s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(8) {
  animation-delay: 1.05s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(9) {
  animation-delay: 1.2s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(10) {
  animation-delay: 1.35s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(11) {
  animation-delay: 1.5s;
}

.sca-lines.sca-anim.is-seen .sca-lines__line:nth-child(n+12) {
  animation-delay: 1.65s;
}

@keyframes sca-line {
  to {
    opacity: 1;
    transform: none;
  }
}
/* The remedies (Medicina): her words on the left; on the right a still life of its photograph, its second one as
   a print leaning on it and its label in front (guidelines p. 17) */
.sca-split.sca-remedy {
  align-items: start;
}

@media (min-width: 720px) {
  .sca-split.sca-remedy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  }
} /* (on a phone the split stacks, as every split does) */
.sca-still {
  position: relative;
  padding-bottom: clamp(96px, 12vw, 136px);
}

.sca-still .sca-still__photo {
  display: block;
  width: 86%;
  height: auto;
  max-width: none;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transform: rotate(-1.2deg);
}

.sca-still__print {
  position: absolute;
  top: 30%;
  inset-inline-end: 0;
  box-sizing: border-box;
  width: 40%;
  padding: 8px 8px 10px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transform: rotate(3deg);
}

.sca-still__print .sca-still__print-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
}

.sca-still__label {
  position: absolute;
  inset-inline-start: 4%;
  bottom: 0;
}

/* Abracitos: a kraft tag, which swings once on its string */
.sca-tag {
  position: relative;
  box-sizing: border-box;
  width: 196px;
  padding: 36px 18px 22px;
  border-radius: 14px;
  background: #c9a77c;
  color: var(--higuera);
  text-align: center;
  box-shadow: var(--shadow-card);
  transform: rotate(-5deg);
  transform-origin: 50% 18px;
}

.sca-tag::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--lino);
  box-shadow: inset 0 1px 2px rgba(22, 37, 28, 0.35);
}

.sca-tag > p {
  margin: 0;
}

.sca-tag .sca-tag__symbol {
  display: block;
  width: 50px;
  margin: 0 auto 8px;
  color: var(--higuera);
}

.sca-tag__name {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: 30px;
  line-height: 1.1;
}

.sca-tag > .sca-tag__line {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sca-tag > .sca-tag__quote {
  margin-top: 10px;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
}

.sca-tag.sca-anim.is-seen {
  animation: sca-swing 1.8s ease-out 0.2s;
}

@keyframes sca-swing {
  0% {
    transform: rotate(-16deg);
  }
  30% {
    transform: rotate(3deg);
  }
  55% {
    transform: rotate(-9deg);
  }
  78% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}
/* Cosquillitas: a round lid label on Limón, which turns into place like a lid */
.sca-lid {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 196px;
  aspect-ratio: 1;
  padding: 20px;
  border: 8px solid var(--lino);
  border-radius: 50%;
  background: var(--limon);
  color: var(--tinta);
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--mandarina), var(--shadow-card);
}

.sca-lid > p {
  margin: 0;
}

.sca-lid .sca-lid__drawing {
  display: block;
  width: 38px;
  margin-bottom: 4px;
  color: var(--tinta);
}

.sca-lid__name {
  font-family: var(--font-hand);
  font-size: 21px;
  line-height: 1.35;
}

.sca-lid > .sca-lid__line {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}

.sca-lid.sca-anim {
  transform: rotate(-80deg);
}

.sca-lid.sca-anim.is-seen {
  animation: sca-lidturn 1.3s cubic-bezier(0.2, 0.6, 0.25, 1) 0.2s forwards;
}

@keyframes sca-lidturn {
  to {
    transform: rotate(0deg);
  }
}
/* The Cápsulas del Sí/No: a bottle label on Higuera, and its "¡Sí!" sticker, which lands like a stamp */
.sca-bottle {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 290px;
  padding: 18px 20px;
  border-radius: 8px;
  background: var(--higuera);
  color: var(--lino);
  box-shadow: var(--shadow-card);
  transform: rotate(-3deg);
}

.sca-bottle .sca-bottle__symbol {
  flex: none;
  width: 52px;
  color: var(--lino);
}

.sca-bottle__text > p {
  margin: 0;
}

.sca-bottle__name {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: 21px;
  line-height: 1.1;
  white-space: nowrap;
} /* the name stays whole */
.sca-bottle__name em {
  color: var(--limon);
}

.sca-bottle__text > .sca-bottle__line {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
}

.sca-bottle__text > .sca-bottle__brand {
  margin-top: 8px;
  color: var(--limon);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sca-sticker {
  position: absolute;
  inset-inline-end: -22px;
  bottom: -36px;
  display: grid;
  place-items: center;
  width: 84px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mandarina);
  color: var(--tinta);
  font-family: var(--font-hand);
  font-size: 24px;
  box-shadow: var(--shadow-card);
  transform: rotate(-10deg);
}

.sca-bottle.sca-anim .sca-sticker {
  opacity: 0;
  transform: scale(1.6) rotate(-30deg);
}

.sca-bottle.sca-anim.is-seen .sca-sticker {
  animation: sca-stick 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.6s forwards;
}

@keyframes sca-stick {
  to {
    opacity: 1;
    transform: rotate(-10deg);
  }
}
@media (max-width: 719px) {
  .sca-still__label {
    inset-inline-start: 0;
  }
  .sca-tag, .sca-lid {
    width: 168px;
  }
  .sca-bottle {
    width: 250px;
  }
}
/* El cuento de los tres abrazos: its three embraces (guidelines p. 21), one inside the other in Lino, Mandarina and
   Limón, drawn one after the other */
.sca-three {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 481.37/330;
  justify-self: center;
}

.sca-three .sca-three__embrace {
  position: absolute;
}

.sca-three .sca-three__embrace--lino {
  left: 0;
  top: 0;
  width: 100%;
  color: var(--lino);
}

.sca-three .sca-three__embrace--mandarina {
  left: 14%;
  top: 17%;
  width: 72%;
  color: var(--mandarina);
}

.sca-three .sca-three__embrace--limon {
  left: 28%;
  top: 33%;
  width: 44%;
  color: var(--limon);
}

.sca-three.sca-anim.is-seen .sca-three__embrace--mandarina {
  animation-delay: 0.75s;
}

.sca-three.sca-anim.is-seen .sca-three__embrace--limon {
  animation-delay: 1.25s;
}

.sca-prints {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  gap: var(--space-5);
}

.sca-prints > .sca-print {
  margin: 0;
}

.sca-section.sca-section--joined {
  padding-top: 0;
}

.sca-split.sca-service {
  align-items: start;
}

/* The children's paper chain across the page, as her Medicina page had it */
.sca-frieze {
  height: clamp(120px, 15vw, 190px);
  background-color: #efe7d8;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}

/* A drop-down's text sits in the middle of its 48 px (the field's padding is for text boxes, and clipped it) */
select.sca-field__control {
  padding-block: 0;
}

/* A form on its own card: Medicina's order and booking forms, Únete al camino's letter */
.sca-formcard {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--measure) + 2 * clamp(24px, 4vw, 44px));
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.sca-formcard > .sca-formcard__intro {
  margin: 0 0 var(--space-5);
}

/* Únete al camino: her invitation and, beside it, the form as the reply */
.sca-letterbox {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 992px) {
  .sca-letterbox {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  }
}
/* The posts' cards: one width everywhere, three to a row on a computer, whatever the number of posts (two posts
   stretched to half the page on the Blog and the home, a third of it on a category: the owner saw the sizes vary) */
.sca-cards:has(> .sca-post) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

/* La ruta's stories as postcards, on Lino, tilted a little (the guidelines give postcards to the route) */
.sca-posts--postcards .sca-post, .sca-route-posts .sca-post {
  --surface: var(--lino);
  padding: 10px 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--lino);
  box-shadow: var(--shadow-card);
  transform: rotate(-1.2deg);
}

.sca-posts--postcards .sca-post:nth-child(even), .sca-route-posts .sca-post:nth-child(even) {
  transform: rotate(1.1deg);
}

.sca-posts--postcards .sca-post > :not(.sca-post__image), .sca-route-posts .sca-post > :not(.sca-post__image) {
  margin-inline: 10px;
}

.sca-posts--postcards .sca-post__image, .sca-route-posts .sca-post__image {
  border-radius: 2px;
}

/* The hug (brand book p. 20): the long word on Limón, signed in her hand, with its heart */
.sca-hug {
  --heading: var(--tinta);
  --ink: var(--tinta);
  background: var(--limon);
  color: var(--tinta);
}

.sca-hug .sca-container, .sca-hug .item-view {
  position: relative;
}

.sca-hug .sca-heart {
  position: absolute;
  inset-inline-end: var(--gutter-desktop);
  bottom: 0;
  width: clamp(36px, 4vw, 52px);
  color: var(--mandarina);
  --heart: var(--mandarina);
}

/* End of the design system v01 block */