/* Fase 3 — Colores de la marca (paleta de Marien).
   Capa aparte: el CSS de la plantilla queda intacto y aquí solo se redefinen sus variables de color
   (--token-…). Se carga después de los estilos de la plantilla, así que estos valores ganan, y tema.ts
   los copia también a body[toggle-theme="light|dark"].

   Paleta (muestreada del archivo de Marien, mediana de cada franja):
     Vanilla Silk  #EEE2D4   fondo claro
     Alpine Oat    #D7C6B4   superficies suaves
     Warm Greige   #B29C91   gris cálido / acento en oscuro
     Cherry Velvet #481D20   acento
     Bordeaux Noir #32191F   texto / fondo oscuro

   Equivalencias con la plantilla (rol → antes → ahora): */
body {
  --token-cef68b67-6b0e-4d79-a940-e4de007f530e: #32191f; /* tinta          #121212 → Bordeaux Noir */
  --token-7f8fbaf5-53f0-4608-bf71-05cd1534e0fa: #eee2d4; /* papel          #fffcfb → Vanilla Silk */
  --token-6744a900-f238-4330-83eb-a35e58de0390: #eee2d4; /* crema fija     #fffcfb → Vanilla Silk */
  --token-541a8b41-e7c9-4662-82df-9b495f42e23a: #481d20; /* acento rojo    #e9281f → Cherry Velvet */
  --token-35e246dc-1aac-418d-a241-cb02ad4aa69b: #32191f; /* negro          #121212 → Bordeaux Noir */
  --token-26a64796-7045-4e3f-98f8-6a424bcbc92b: #32191f99; /* tinta 60 %  */
  --token-67604f36-a46c-43f6-8eea-601e7af37592: #32191f4d; /* tinta 30 %  */
  --token-320ddbd2-7dd6-4dd0-82b7-9e19a241960d: #32191f26; /* líneas 15 % */
  --token-812ac243-1de4-4ec4-beee-82d749290b60: #eee2d426; /* crema 15 %  */
  --token-a421854f-8fa0-40e3-92e7-aa10efc041e9: #eee2d499; /* crema 60 %  */
  --token-843e4627-9c97-4486-aae4-53b1002086f7: #b29c91; /* gris           gray    → Warm Greige */
  --token-7324d5f7-ab77-49fc-b2b4-3eacabe22c17: #b29c91; /* fondo portada  #638daf → Warm Greige */
  --token-a7e3b504-fb9c-4d80-9786-1d7557a738a7: #b29c91; /* arena          #dcab89 → Warm Greige */
  --token-e46c8f0f-7e26-4181-851d-afa7d8e78ad0: #d7c6b4; /* gris claro     #d8dde0 → Alpine Oat */
  --token-679f5545-188b-422a-864c-ee100093fbb6: #d7c6b4e6; /* beige 90 %  #cebfb3e6 → Alpine Oat */
  --token-599ecf81-cee2-4028-8827-4a863bc98899: #b29c91e6; /* celeste 90 % #a7c9d6e6 → Warm Greige */
  --token-288c9f83-15f3-4dcb-bc93-c668cfab3bbf: #481d20e6; /* café 90 %   #565047e6 → Cherry Velvet */
  --token-6ca7dfff-250a-446e-af20-e095a8e06579: #32191f; /* negro          #000    → Bordeaux Noir */
  --token-9e2b6614-26e2-4f9a-984a-19fc7298ccf5: #32191f; /* negro          #000    → Bordeaux Noir */
  --token-9a31a49f-af10-4db6-8d51-0b043911d581: #32191fe6; /* negro 90 % */
  --token-33c7b817-4214-4cb0-997c-6921fce3bac3: #32191f99; /* negro 60 % */
}

/* Logo del menú: la plantilla lo dibuja como máscara (SVG "GEN STUDIO") pintada con el color del
   tema; se cambia la máscara por la palabra SAHOS (public/brand/sahos-wordmark.png, recortada). */
.framer-IPbZa {
  -webkit-mask: url("/prueba/_a/sahos/sahos-wordmark.png") center / contain no-repeat;
  mask: url("/prueba/_a/sahos/sahos-wordmark.png") center / contain no-repeat;
  aspect-ratio: 803 / 143;
}

/* Barra de arriba (la arma scripts/web-replica/marca.mjs, la conducta motor/marca.ts): reemplaza el menú en cápsula
   de la plantilla, que queda escondido (su interruptor de tema lo usa el botón nuevo). Pedido de Marien: logo a la
   izquierda, enlaces en el medio, claro/oscuro al lado de la bolsa a la derecha. Colores fijos (Bordeaux Noir y
   Vanilla Silk): se ve igual sobre fotos y en los dos temas. En teléfono los enlaces van en un panel. */
nav.framer-iSFqU { display: none !important; }
.sahos-barra {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  color: #eee2d4;
  /* el mismo vino oscuro siempre (pedido de Marien): opaco, así no cambia de tono según lo que pase por debajo */
  background: #2f171c;
  border-bottom: 1px solid rgba(238, 226, 212, 0.12);
  font-family: "DM Sans", "DM Sans Placeholder", sans-serif;
}
.sahos-barra__fila {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  padding: 0 clamp(16px, 2.5vw, 40px);
}
.sahos-barra__logo { justify-self: start; display: block; padding: 8px 0; color: inherit; }
.sahos-barra__logo span {
  /* versión de letras opacas (marca/fotos/sahos-wordmark-solido.png): la original tiene trazos semitransparentes y
     sobre la barra vino se veía apagada */
  display: block;
  width: 112px;
  aspect-ratio: 803 / 143;
  background: currentColor;
  -webkit-mask: url("/prueba/_a/sahos/sahos-wordmark-solido.png") center / contain no-repeat;
  mask: url("/prueba/_a/sahos/sahos-wordmark-solido.png") center / contain no-repeat;
}
.sahos-barra__enlaces { display: flex; gap: clamp(24px, 3vw, 48px); }
.sahos-barra__enlace {
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.3s ease, opacity 0.3s ease;
}
.sahos-barra__enlace:hover { background-size: 100% 1px; }
.sahos-barra__acciones { justify-self: end; display: flex; align-items: center; gap: 4px; }
.sahos-barra__boton {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sahos-barra__boton:hover { background: rgba(238, 226, 212, 0.1); }
.sahos-barra__boton svg { width: 21px; height: 21px; }
.sahos-barra :focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.sahos-barra__luna, html[toggle-theme="dark"] .sahos-barra__sol { display: none; }
html[toggle-theme="dark"] .sahos-barra__luna { display: block; }
.sahos-barra__sol, .sahos-barra__luna { line-height: 0; }
.sahos-barra__cuenta {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #eee2d4;
  color: #32191f;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.sahos-barra__cuenta[hidden] { display: none; }
.sahos-barra__abrir { display: none; }
.sahos-barra__abrir span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s ease, top 0.3s ease;
}
.sahos-barra__abrir span:first-child { top: 16px; }
.sahos-barra__abrir span:last-child { top: 23px; }
.sahos-barra--abierta .sahos-barra__abrir span:first-child { top: 19.5px; transform: rotate(45deg); }
.sahos-barra--abierta .sahos-barra__abrir span:last-child { top: 19.5px; transform: rotate(-45deg); }
.sahos-barra__panel { display: none; }
@media (max-width: 809.98px) {
  .sahos-barra__fila { grid-template-columns: 1fr auto; height: 56px; }
  .sahos-barra__logo span {
  /* versión de letras opacas (marca/fotos/sahos-wordmark-solido.png): la original tiene trazos semitransparentes y
     sobre la barra vino se veía apagada */ width: 96px; }
  .sahos-barra__enlaces { display: none; }
  .sahos-barra__abrir { display: grid; }
  .sahos-barra__panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px 24px;
    border-top: 1px solid rgba(238, 226, 212, 0.12);
  }
  .sahos-barra__enlace--panel { font-size: 14px; padding: 12px 0; background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sahos-barra * { transition: none !important; }
}

/* Español: los títulos en mayúsculas animados por letra van dentro de una caja que recorta justo a la
   altura de la letra y se comía la tilde de la Ñ ("CAMPAÑA"). En español esas cajas no recortan; las letras
   igual entran con su animación (empiezan transparentes). En inglés queda como la plantilla. */
html[lang="es"] .framer-vqitl8,
html[lang="es"] .framer-1679yqk,
html[lang="es"] [data-framer-name="Hero Container"] [data-framer-name="H1 Title"],
html[lang="es"] [data-framer-name="Hero Container"] [data-framer-name="Studio"] { overflow: visible; }
/* En teléfono ese título va con interlineado 0,8 y la tilde quedaba fuera de la línea: se le da 1. */
@media (max-width: 809.98px) {
  html[lang="es"] .framer-vqitl8 h2 { line-height: 1; }
}

/* Inicio · tarjetas de prenda (las agrega scripts/web-replica/marca.mjs en la sección de prendas).
   Igual que la referencia de Marien: cuadro blanco con esquinas redondeadas, la foto de la prenda sobre blanco, el
   nombre y el precio. Va a la izquierda, sobre la foto grande, a ~21 % del borde y en la mitad de abajo; en teléfono,
   abajo a la izquierda y más chica. Colores fijos: se ve igual en claro y en oscuro. */
.sahos-prenda {
  position: absolute;
  z-index: 2;
  left: 21%;
  bottom: 8%;
  width: clamp(180px, 13.5vw, 250px);
  padding: 0 0 clamp(16px, 1.3vw, 22px);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: #fff;
  color: #1f1a1b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  overflow: hidden;
}
.sahos-prenda p { margin: 0; padding: 0 clamp(14px, 1.2vw, 20px); font-family: "DM Sans", "DM Sans Placeholder", sans-serif; }
.sahos-prenda__foto { display: block; width: 100%; height: auto; aspect-ratio: 640 / 560; object-fit: contain; background: #fff; }
.sahos-prenda__nombre { margin-top: clamp(10px, 0.9vw, 14px) !important; font-weight: 500; font-size: clamp(14px, 1vw, 16px); line-height: 1.3; }
.sahos-prenda__precio { margin-top: clamp(12px, 1.2vw, 20px) !important; font-weight: 600; font-size: clamp(13px, 0.95vw, 15px); line-height: 1.2; }

@media (max-width: 809.98px) {
  /* teléfono: chiquita abajo a la izquierda (referencia de Marien), para que no tape la cara de la modelo */
  .sahos-prenda { top: auto; bottom: 24px; left: 16px; width: 116px; padding-bottom: 10px; border-radius: 8px; }
  .sahos-prenda p { padding: 0 10px; }
  .sahos-prenda__nombre { margin-top: 4px !important; font-size: 12px; }
  .sahos-prenda__precio { margin-top: 4px !important; font-size: 11px; }
}

/* Inicio · lema (sección "Why"; lo arma scripts/web-replica/marca.mjs). Composición pedida por Marien con su
   referencia: frase escrita a mano en tono vino montada sobre el título en serif (Instrument Serif, la de la
   plantilla), última palabra en cursiva con un trazo debajo, y una línea corta con palabras en negrita.
   Letra a mano: Corinthia (elegida por Marien; The Corinthia Project Authors, licencia OFL, vendor/LICENSE-corinthia.txt).
   Vino: un tono más claro que Cherry Velvet para que se distinga del texto en Bordeaux Noir. */
@font-face {
  font-family: "Corinthia";
  src: url("/prueba/_rt/vendor/corinthia-latin.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
.sahos-lema {
  --sahos-vino: #7b2c33;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3vw, 44px);
  width: 100%;
  padding: clamp(24px, 4vw, 64px) 24px;
  color: var(--token-cef68b67-6b0e-4d79-a940-e4de007f530e, #32191f);
  text-align: center;
}
body[toggle-theme="dark"] .sahos-lema { --sahos-vino: #c47a80; }
.sahos-lema__titulo {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.52em;
  font: 400 clamp(46px, 7.4vw, 116px) / 0.96 "Instrument Serif", "Instrument Serif Placeholder", serif;
  letter-spacing: -0.01em;
}
.sahos-lema__linea { display: block; white-space: nowrap; }
.sahos-lema__firma {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -0.42em;
  font: 400 1.22em / 1 "Corinthia", cursive;
  letter-spacing: 0;
  color: var(--sahos-vino);
  white-space: nowrap;
  transform: rotate(-6deg);
  transform-origin: 0 100%;
}
.sahos-lema--firma-larga .sahos-lema__firma { font-size: 1.02em; left: -0.3em; }
@media (max-width: 809.98px) { .sahos-lema--firma-larga .sahos-lema__firma { font-size: 0.84em; left: -0.12em; } }
.sahos-lema__realce { position: relative; display: inline-block; font-style: italic; }
.sahos-lema__trazo {
  position: absolute;
  left: -4%;
  bottom: -0.16em;
  width: 110%;
  height: 0.26em;
  overflow: visible;
  fill: none;
  stroke: var(--sahos-vino);
  stroke-width: 2.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.sahos-lema__texto {
  margin: 0;
  max-width: 30em;
  font: 400 clamp(14px, 1.15vw, 17px) / 1.6 "DM Sans", "DM Sans Placeholder", sans-serif;
}
.sahos-lema__texto strong { font-weight: 700; }

/* Entrada (motor/marca.ts pone .sahos-anima y, al verse, .sahos-visto): las líneas suben, la frase a mano se
   "escribe" de izquierda a derecha y después se dibuja el trazo. Sin JavaScript o con movimiento
   reducido se ve directamente. */
.sahos-lema.sahos-anima .sahos-lema__linea,
.sahos-lema.sahos-anima .sahos-lema__texto { opacity: 0; transform: translateY(0.35em); }
.sahos-lema.sahos-anima .sahos-lema__texto { transform: translateY(16px); }
.sahos-lema.sahos-anima .sahos-lema__firma { clip-path: inset(-20% 115% -40% -15%); }
.sahos-lema.sahos-anima .sahos-lema__trazo path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sahos-lema.sahos-visto .sahos-lema__linea,
.sahos-lema.sahos-visto .sahos-lema__texto {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.sahos-lema.sahos-visto .sahos-lema__linea + .sahos-lema__linea { transition-delay: 0.12s; }
.sahos-lema.sahos-visto .sahos-lema__texto { transition-delay: 0.5s; }
.sahos-lema.sahos-visto .sahos-lema__firma { clip-path: inset(-20% -5% -40% -15%); transition: clip-path 1.5s cubic-bezier(0.45, 0, 0.2, 1) 0.35s; }
.sahos-lema.sahos-visto .sahos-lema__trazo path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s cubic-bezier(0.45, 0, 0.2, 1) 1.3s; }
.sahos-lema.sahos-visto .sahos-lema__trazo path + path { transition-delay: 1.55s; }

/* Inicio · título de la sección de campaña: "The Marilyn Collection" (lo arma marca.mjs). Como la referencia
   "DESIGN Success" de Marien: MARILYN grande en Instrument Serif y "Collection" a mano (Corinthia, vino) montada
   sobre la mitad de abajo, un poco inclinada. Arriba "The" y abajo "Seasonal exclusives", espaciados. */
.sahos-coleccion {
  /* Vino más vivo que el del lema: aquí la palabra a mano cruza MARILYN y tiene que destacar. */
  --sahos-vino: #9c3943;
  --sahos-halo: var(--token-7f8fbaf5-53f0-4608-bf71-05cd1534e0fa, #eee2d4);
  /* Grilla de una columna del ancho de MARILYN: así "The" puede empezar donde empieza la M. */
  /* Tres columnas: la del medio es del ancho de la palabra grande y "The"/"Las" se alinea con su primera letra; la
     frase de abajo cruza las tres, así una frase larga (en español, en teléfono) no ensancha la del medio y no corre
     "Las" a la izquierda (pedido de Marien: "Las" sobre la P de PIEZAS). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  /* Aire antes de las fotos (pedido de Marien: que no quede pegado). */
  padding-bottom: clamp(32px, 5vw, 88px);
  color: var(--token-cef68b67-6b0e-4d79-a940-e4de007f530e, #32191f);
  text-align: center;
}
body[toggle-theme="dark"] .sahos-coleccion { --sahos-vino: #d88f95; }
.sahos-coleccion p { margin: 0; }
.sahos-coleccion > * { grid-column: 2; }
.sahos-coleccion > .sahos-coleccion__abajo { grid-column: 1 / -1; }
.sahos-coleccion__arriba,
.sahos-coleccion__abajo {
  font: 600 clamp(11px, 0.9vw, 13px) / 1 "DM Sans", "DM Sans Placeholder", sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  padding-left: 0.42em; /* compensa el espaciado de la última letra */
}
.sahos-coleccion__titulo {
  position: relative;
  margin: clamp(10px, 1.2vw, 18px) 0 0;
  padding-bottom: 0.3em;
  font: italic 400 clamp(84px, 14vw, 216px) / 0.86 "Instrument Serif", "Instrument Serif Placeholder", serif;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.sahos-coleccion__nombre { display: block; }
.sahos-coleccion__firma {
  position: absolute;
  z-index: 1;
  left: 22%;
  top: 40%;
  font: normal 400 0.9em / 1 "Corinthia", cursive;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--sahos-vino);
  /* Contorno del color del fondo: separa la palabra a mano de MARILYN donde se cruzan (como la referencia). */
  -webkit-text-stroke: 0.09em var(--sahos-halo);
  paint-order: stroke fill; /* el contorno va por detrás: la letra queda entera y se "corta" MARILYN alrededor */
  transform: rotate(-7deg);
  transform-origin: 0 50%;
}
.sahos-coleccion__arriba { text-align: left; padding-left: calc(clamp(84px, 14vw, 216px) * 0.12); } /* la M en cursiva arranca más a la derecha arriba */
.sahos-coleccion__abajo {
  margin-top: clamp(14px, 1.4vw, 22px);
  /* Con su propio ancho (puede ser más larga que la palabra grande), centrada; en teléfono parte en dos líneas. */
  justify-self: center;
  width: max-content;
  max-width: calc(100vw - 48px);
  text-align: center;
  line-height: 1.6;
}
/* Prendas: PIECES es más corta que MARILYN, así que "Marilyn" va más abajo, más a la derecha y más chica. */
.sahos-coleccion--piezas .sahos-coleccion__titulo { padding-bottom: 0.42em; }
.sahos-coleccion--piezas .sahos-coleccion__firma { left: 30%; top: 52%; font-size: 0.74em; }
/* Historia · "The Process by hand": la palabra a mano baja menos y va más chica, y la frase de abajo con más aire (la
   "y" y la "h" no la tapan). */
.sahos-coleccion--proceso .sahos-coleccion__titulo { padding-bottom: 0.5em; }
.sahos-coleccion--proceso .sahos-coleccion__firma { left: 30%; top: 44%; font-size: 0.7em; }
/* Inicio · "Marilyn Colección" sobre las prendas: más aire arriba y abajo para que se luzca (pedido de Marien). */
[data-sahos-pagina="inicio"] [data-framer-name="Portfolio Section"] .sahos-coleccion { padding-block: clamp(48px, 7vw, 128px); }
/* Promesas: la sección fija el título arriba y las fotos suben por una caja que empieza justo debajo; el título va
   más chico que el de Marilyn para caber entero encima (pedido de Marien: que la foto no lo corte). "To you" /
   "Contigo" más a la derecha, debajo de la S y la E; la "g" y la "y" bajan: más aire antes de la línea de abajo. */
.sahos-coleccion--promesa { padding-bottom: 0; }
.sahos-coleccion--promesa .sahos-coleccion__titulo { font-size: clamp(64px, 9vw, 128px); padding-bottom: 0.62em; }
/* y por delante de las fotos, por si en alguna pantalla igual se tocan */
.framer-9gtgza .sahos-coleccion { position: relative; z-index: 3; }
.sahos-coleccion--promesa .sahos-coleccion__firma { left: 50%; top: 46%; font-size: 0.8em; }
html[lang="es"] .sahos-coleccion--promesa .sahos-coleccion__firma { left: 44%; }
.sahos-coleccion--promesa .sahos-coleccion__arriba { padding-left: calc(clamp(64px, 9vw, 128px) * 0.12); }

.sahos-coleccion.sahos-anima .sahos-coleccion__arriba,
.sahos-coleccion.sahos-anima .sahos-coleccion__nombre,
.sahos-coleccion.sahos-anima .sahos-coleccion__abajo { opacity: 0; transform: translateY(0.3em); }
.sahos-coleccion.sahos-anima .sahos-coleccion__arriba,
.sahos-coleccion.sahos-anima .sahos-coleccion__abajo { transform: translateY(12px); }
.sahos-coleccion.sahos-anima .sahos-coleccion__firma { clip-path: inset(-70% 115% -60% -15%); }
.sahos-coleccion.sahos-visto .sahos-coleccion__arriba,
.sahos-coleccion.sahos-visto .sahos-coleccion__nombre,
.sahos-coleccion.sahos-visto .sahos-coleccion__abajo {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.sahos-coleccion.sahos-visto .sahos-coleccion__nombre { transition-delay: 0.08s; }
.sahos-coleccion.sahos-visto .sahos-coleccion__abajo { transition-delay: 0.9s; }
.sahos-coleccion.sahos-visto .sahos-coleccion__firma { clip-path: inset(-70% -10% -60% -15%); transition: clip-path 1.4s cubic-bezier(0.45, 0, 0.2, 1) 0.45s; }

/* Modo oscuro: fondo Bordeaux Noir, texto Vanilla Silk; el acento pasa a Warm Greige porque
   Cherry Velvet casi no se distingue sobre Bordeaux Noir. */
@media (prefers-color-scheme: dark) {
  body {
    --token-cef68b67-6b0e-4d79-a940-e4de007f530e: #eee2d4;
    --token-7f8fbaf5-53f0-4608-bf71-05cd1534e0fa: #32191f;
    --token-6744a900-f238-4330-83eb-a35e58de0390: #eee2d4;
    --token-35e246dc-1aac-418d-a241-cb02ad4aa69b: #481d20;
    --token-320ddbd2-7dd6-4dd0-82b7-9e19a241960d: #eee2d426;
    --token-67604f36-a46c-43f6-8eea-601e7af37592: #eee2d44d;
    --token-541a8b41-e7c9-4662-82df-9b495f42e23a: #b29c91;
    --token-26a64796-7045-4e3f-98f8-6a424bcbc92b: #eee2d499;
    --token-812ac243-1de4-4ec4-beee-82d749290b60: #32191f26;
  }
}

/* Inicio · promesas: debajo de cada promesa, en vez de la foto redonda con el logo y la palabra SAHOS (no le gustaban a
   Marien), una firma escrita a mano en vino (Corinthia, la del lema). La pone marca.mjs (.sahos-firma). */
.framer-9gtgza p.sahos-firma {
  font: 400 clamp(34px, 2.8vw, 46px) / 1.1 "Corinthia", cursive !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #7b2c33 !important;
  white-space: nowrap;
  transform: rotate(-4deg);
}
body[toggle-theme="dark"] .framer-9gtgza p.sahos-firma { color: #c47a80 !important; }

/* Colección (antes Projects): las tarjetas son las 5 prendas con la foto de modelo de la tienda (fondo blanco; la pone
   marca.mjs, .sahos-coleccion-tarjeta). La foto va entera y quieta, sin el parallax de la plantilla, y como el fondo es
   claro los textos pasan a Bordeaux Noir (etiquetas al 60 %) y se quita la textura oscura de encima. */
.sahos-coleccion-tarjeta [data-framer-name="Project Image"] { top: 0 !important; height: 100% !important; translate: none !important; }
.sahos-coleccion-tarjeta [data-framer-name="Project Image"] img { object-fit: cover !important; object-position: 50% 0 !important; background: #fff; }
.sahos-coleccion-tarjeta [data-framer-name="Image Frame"] { background: #fff; }
.sahos-coleccion-tarjeta [data-framer-name="Card Overlay"] { display: none !important; }
.sahos-coleccion-tarjeta p,
.sahos-coleccion-tarjeta h4 { color: #32191f !important; }
.sahos-coleccion-tarjeta [data-framer-name="Project Discription"] > :first-child p,
.sahos-coleccion-tarjeta [data-framer-name="Project Services"] > :first-child p { color: rgba(50, 25, 31, 0.6) !important; }

/* Inicio · "The Pieces": entre las fotos de la campaña y el título quedaba mucho más espacio que entre el título y la
   primera prenda (el hueco entre secciones de la plantilla más el parallax de las fotos). Pedido de Marien: la misma
   distancia arriba y abajo. Solo en Inicio (la sección que tiene las tarjetas de prenda). Va por encima de la sección
   de arriba: si no, su fondo tapaba la parte de arriba del título. */
@media (min-width: 1280px) {
  [data-framer-name="Portfolio Section"]:has(.sahos-prenda) { margin-top: -320px; position: relative; z-index: 2; }
}
@media (min-width: 810px) and (max-width: 1279.98px) {
  [data-framer-name="Portfolio Section"]:has(.sahos-prenda) { margin-top: -120px; position: relative; z-index: 2; }
}

/* Inicio · portada a todo el ancho en computadora (pedido de Marien: sin las franjas de color a los lados). La plantilla
   deja la foto y el brillo del shader encima en cajas fijas de 1244 px centradas, que en pantallas anchas mostraban el
   fondo a los lados. En tablet y teléfono ya ocupan todo el ancho (como la variante de la plantilla). */
@media (min-width: 1280px) {
  .framer-0dQzG .framer-1vkyo0n,
  .framer-0dQzG .framer-13e7rsb-container { width: 100% !important; left: 0 !important; }
}

/* Inicio · Amber y Gianna: en teléfono la foto se recorta al centro y la tarjeta tapaba la cara; se corre la foto. */
@media (max-width: 809.98px) {
  img[src*="amber-piano"] { object-position: 28% 50% !important; }
  /* Colección · portada: que se vea el logo del gancho entero */
  img[src*="coleccion-portada"] { object-position: 66% 50% !important; }
}

/* Antes del pie (todas las páginas) · SAHOS que se escribe solo (pedido de Marien: "como con neón suave"). La palabra
   del HTML queda invisible para que la caja mida igual; encima, el SVG con la misma letra: primero se dibuja el trazo,
   después se rellena y queda con un brillo vino suave que respira. Sin JavaScript o con movimiento reducido se ve
   quieta y llena. */
.sahos-neon { position: relative; --sahos-brillo: 156, 57, 67; }
body[toggle-theme="dark"] .sahos-neon { --sahos-brillo: 216, 143, 149; }
.sahos-neon__hueco { visibility: hidden; }
.sahos-neon__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sahos-neon__svg text { font: inherit; letter-spacing: inherit; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.sahos-neon.sahos-anima .sahos-neon__svg text { fill: transparent; stroke-width: 1.2px; stroke-dasharray: 900; stroke-dashoffset: 900; }
/* el brillo fino va en las letras; el resplandor ancho es un óvalo detrás que se desvanece solo (un desenfoque grande
   sobre las letras el teléfono lo cortaba en un rectángulo: "se ve cuadrado", pedido de Marien) */
.sahos-neon.sahos-anima .sahos-neon__svg { z-index: 1; filter: drop-shadow(0 0 3px rgba(var(--sahos-brillo), 0.35)); }
.sahos-neon.sahos-anima::before {
  content: ''; position: absolute; inset: -4% -35%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(var(--sahos-brillo), 0.18), rgba(var(--sahos-brillo), 0.07) 40%, rgba(var(--sahos-brillo), 0.02) 65%, rgba(var(--sahos-brillo), 0) 85%);
}
.sahos-neon.sahos-visto::before { animation: sahos-aparece 1.4s ease 2.3s forwards, sahos-resplandor 3.6s ease-in-out 3.7s infinite alternate; }
/* (el óvalo no pasa de la caja que lo recorta, más alta que la palabra en teléfono) */
@media (max-width: 809.98px) { .sahos-neon.sahos-anima::before { inset: -32% -35%; } }
@keyframes sahos-aparece { to { opacity: 0.75; } }
@keyframes sahos-resplandor { from { opacity: 0.75; } to { opacity: 1; } }
.sahos-neon.sahos-visto .sahos-neon__svg text {
  animation: sahos-escribe 2.8s cubic-bezier(0.45, 0, 0.2, 1) forwards, sahos-rellena 1.4s ease 2.3s forwards;
}
.sahos-neon.sahos-visto .sahos-neon__svg { animation: sahos-respira 3.6s ease-in-out 3.4s infinite alternate; }
@keyframes sahos-escribe { to { stroke-dashoffset: 0; } }
@keyframes sahos-rellena { from { fill: transparent; } to { fill: currentColor; stroke-width: 0.4px; } }
@keyframes sahos-respira {
  from { filter: drop-shadow(0 0 3px rgba(var(--sahos-brillo), 0.35)); }
  to { filter: drop-shadow(0 0 5px rgba(var(--sahos-brillo), 0.55)); }
}

/* Inicio · The Details: la foto de la cama sube para que se vea más la cama y ella (pedido de Marien). La caja recorta
   la foto, que se mueve con el scroll (parallax); el corrimiento sale de lo medido para que nunca quede un hueco arriba
   ni abajo: en computadora sobra ~300 px abajo y en teléfono ~90 px. */
@media (min-width: 1280px) {
  img[src*="detalles-cama"] { transform: translateY(-19%); }
}
@media (max-width: 809.98px) {
  img[src*="detalles-cama"] { transform: translateY(-9%); }
}

/* Inicio · prendas de cuerpo entero (Lola, Gianna, Kathyrn, Daisy; .sahos-foto-entera la pone marca.mjs): la foto va quieta
   (sin el parallax de la plantilla, que la agrandaba un 10 % y la corría) y empieza debajo de la barra de arriba, así se
   ven la cara y los pies. Las fotos están ensanchadas a los lados (2:1) para llenar la pantalla sin recortar arriba ni
   abajo; en teléfono se ve el centro, donde está la modelo. */
.sahos-foto-entera [data-framer-name="Image Frame"] { background: #32191f; }
.sahos-foto-entera [data-framer-name="Project Image"] { top: 64px !important; height: calc(100% - 64px) !important; translate: none !important; }
.sahos-foto-entera [data-framer-name="Project Image"] img { object-fit: cover !important; object-position: 50% 50% !important; }
@media (max-width: 809.98px) {
  .sahos-foto-entera [data-framer-name="Project Image"] { top: 56px !important; height: calc(100% - 56px) !important; }
  .sahos-foto-entera [data-framer-name="Project Image"] img { object-position: 52% 50% !important; }
}

/* Colección · tarjetas con foto de campaña (fondo oscuro, p. ej. Amber): la foto se centra y los textos van en Vanilla
   Silk (etiquetas al 70 %), con la textura oscura de la plantilla de vuelta para que se lean. */
/* Teléfono · Historia: las cuatro cifras de dos en dos (pedido de Marien): 2 años | 5 piezas, debajo 4 tallas | 14 días */
@media (max-width: 809.98px) {
  [data-sahos-pagina="historia"] [data-framer-name="Stats"] {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 28px;
  }
  [data-sahos-pagina="historia"] [data-framer-name="Stats"] > * { width: auto !important; min-width: 0; }
}
/* Teléfono: el nombre de cada pieza sobre su foto, más grande (pedido de Marien: en 22px casi no se veía) */
@media (max-width: 809.98px) {
  .sahos-coleccion-tarjeta [data-framer-name="Title"] h4 { font-size: 40px !important; line-height: 1 !important; letter-spacing: 0.01em; }
}
.sahos-coleccion-tarjeta--campana [data-framer-name="Project Image"] img { object-position: 50% 0 !important; background: #32191f; }
.sahos-coleccion-tarjeta--campana [data-framer-name="Image Frame"] { background: #32191f; }
.sahos-coleccion-tarjeta--campana [data-framer-name="Card Overlay"] { display: block !important; }
.sahos-coleccion-tarjeta.sahos-coleccion-tarjeta--campana p,
.sahos-coleccion-tarjeta.sahos-coleccion-tarjeta--campana h4 { color: #eee2d4 !important; }
.sahos-coleccion-tarjeta--campana [data-framer-name="Project Discription"] > :first-child p,
.sahos-coleccion-tarjeta--campana [data-framer-name="Project Services"] > :first-child p { color: rgba(238, 226, 212, 0.7) !important; }

/* Página de cada prenda (body[data-sahos-pagina="prenda"], lo pone marca.mjs): la foto de la portada un poco más
   oscura y el nombre con su descripción en el medio de la pantalla (pedido de Marien), en vez de abajo. */
[data-sahos-pagina="prenda"] [data-framer-name="Hero Container"] [data-framer-name="Hero Image"] > [data-framer-name="Hero Image"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(50, 25, 31, 0.4);
}
/* Portada: en el medio solo el nombre; el tipo de prenda, "The Marilyn Collection", la descripción y el precio van
   abajo, al final de la foto (pedido de Marien, las 5 prendas). */
[data-sahos-pagina="prenda"] [data-framer-name="Hero Container"] [data-framer-name="Title Contents"] > [data-framer-name="Titles"] {
  position: absolute !important; inset: 0; height: auto !important; justify-content: flex-end !important; gap: 16px !important;
  padding-bottom: 8px; overflow: visible !important;
}
[data-sahos-pagina="prenda"] [data-framer-name="Hero Container"] [data-framer-name="Titles"] > [data-framer-name="H1 Title"] {
  position: absolute !important; top: 50%; left: 50%; translate: -50% -50%;
}
/* Lola: la foto de la escalera tiene la cabeza muy arriba y quedaba debajo de la barra (con el movimiento de la
   portada la foto empieza más arriba de la pantalla). Baja un poco, solo en su página (pedido de Marien). */
[data-sahos-pagina="prenda"] [data-framer-name="Hero Image"] img[src*="lola-escalera-portada"] {
  margin-top: 110px; height: calc(100% - 110px) !important;
}
[data-sahos-pagina="prenda"] [data-framer-name="Hero Image"]:has(> div > img[src*="lola-escalera-portada"]) { background: #32191f; }
/* Gianna, Amber y Kathyrn: igual que Lola (pedido de Marien: "le sigues cortando la cabeza"). Sus fotos son apaisadas
   y la cabeza va casi en el borde de arriba, así que además la foto se pega arriba al recortarse (en pantallas anchas se
   cortaba lo de arriba). En el teléfono baja un poco menos (la barra es más baja). */
[data-sahos-pagina="prenda"] [data-framer-name="Hero Image"] img[src*="gianna-escalera"],
[data-sahos-pagina="prenda"] [data-framer-name="Hero Image"] img[src*="coleccion-amber"],
[data-sahos-pagina="prenda"] [data-framer-name="Hero Image"] img[src*="kathyrn-pasillo"] {
  margin-top: 150px; height: calc(100% - 150px) !important; object-position: 50% 0 !important;
}
[data-sahos-pagina="prenda"] [data-framer-name="Hero Image"]:has(> div > img[src*="gianna-escalera"]),
[data-sahos-pagina="prenda"] [data-framer-name="Hero Image"]:has(> div > img[src*="coleccion-amber"]),
[data-sahos-pagina="prenda"] [data-framer-name="Hero Image"]:has(> div > img[src*="kathyrn-pasillo"]) { background: #32191f; }
@media (max-width: 809.98px) {
  [data-sahos-pagina="prenda"] [data-framer-name="Hero Image"] img[src*="gianna-escalera"],
  [data-sahos-pagina="prenda"] [data-framer-name="Hero Image"] img[src*="coleccion-amber"],
  [data-sahos-pagina="prenda"] [data-framer-name="Hero Image"] img[src*="kathyrn-pasillo"] {
    margin-top: 125px; height: calc(100% - 125px) !important;
  }
}
/* Tira de fotos de cada prenda (Studio Images): en la plantilla la foto es más alta que su tarjeta y sobresale por arriba
   y por abajo, así que a las fotos de cuerpo entero se les cortaba la cabeza. La foto entra justa en su tarjeta. */
[data-sahos-pagina="prenda"] [data-framer-name="Studio Images"] [data-framer-name="Photo"] {
  inset: 0 !important; width: 100% !important; height: 100% !important; translate: none !important; aspect-ratio: auto !important;
}
/* Las dos fotos grandes (Statements) van en sus cuadros grandes de la plantilla, pero la foto entra justa en su cuadro
   (pedido de Marien): sin el agrandado del movimiento al hacer scroll (la foto medía casi 1,5 veces el cuadro y se veía
   muy de cerca). Van fotos verticales, como el cuadro. */
[data-sahos-pagina="prenda"] [data-framer-name="Statements"] [data-framer-name="Photo"],
[data-sahos-pagina="historia"] [data-framer-name="Statements"] [data-framer-name="Photo"] {
  inset: 0 !important; width: 100% !important; height: 100% !important; translate: none !important; aspect-ratio: auto !important;
}
/* Historia · "Our philosophy" como banner (.sahos-banner, lo pone marca.mjs con la foto de fondo en --sahos-banner): un
   cuadro con margen a los lados, el fondo vino que se apaga hacia los bordes y las letras claras en el medio. */
.sahos-banner {
  box-sizing: border-box;
  width: calc(100% - 2 * clamp(16px, 3vw, 48px)) !important;
  margin: clamp(24px, 4vw, 64px) auto !important;
  padding-block: clamp(56px, 8vw, 128px) !important;
  border-radius: clamp(12px, 1.6vw, 24px);
  overflow: hidden;
  background: #3a1419 var(--sahos-banner) center / cover no-repeat;
  box-shadow: 0 30px 60px rgba(30, 14, 18, 0.18);
}
.sahos-banner .sahos-lema { --sahos-vino: #e7a3aa; color: #f4ebe1; }
.sahos-banner .sahos-lema__texto { color: rgba(244, 235, 225, 0.86); }
@media (max-width: 809.98px) { .sahos-banner .sahos-lema__firma { left: 0.1em; } }
.sahos-banner [data-framer-name="Divider"] { background: transparent !important; }
.sahos-banner a [data-framer-name="Button"] { background: #f4ebe1 !important; }
.sahos-banner a [data-framer-name="Button"] p { color: #32191f !important; }
.sahos-banner a:hover [data-framer-name="Button"] { background: #ffffff !important; }

/* Historia · "El proceso" (.sahos-proceso, lo arma marca.mjs): el título de las secciones de Inicio y las fotos del
   proceso en una tira que se pasa de lado con las flechas, deslizando o con el ratón, cada una con su número y lo que
   muestra. Al verse, cada foto sube (motor/marca.ts pone .sahos-anima y .sahos-visto). */
.sahos-proceso {
  --sahos-vino: #7b2c33;
  container-type: inline-size;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(48px, 7vw, 120px) 0 clamp(64px, 8vw, 140px);
  color: var(--token-cef68b67-6b0e-4d79-a940-e4de007f530e, #32191f);
}
body[toggle-theme="dark"] .sahos-proceso { --sahos-vino: #d88f95; }
.sahos-proceso > .sahos-coleccion { margin: 0 auto clamp(40px, 5vw, 80px); }
.sahos-proceso__lista {
  /* una tira que se pasa de lado (pedido de Marien: "que sean tres, una a la vez" y que quepan en la pantalla sin
     bajar): las fotos verticales ocupan el alto de la pantalla (menos la barra, el pie y las flechas) y cada una lleva
     su ancho; las horizontales van de a dos, una encima de la otra, en la misma columna */
  --sahos-pie: 46px; /* el pie de cada foto, hasta dos líneas */
  --sahos-hueco: clamp(12px, 1.6vw, 24px);
  --sahos-borde: clamp(16px, 3vw, 48px);
  /* en computadora, el alto con el que caben todas a lo ancho (las proporciones las pone marca.mjs), sin pasar del alto
     de la pantalla; en pantallas angostas no baja de 260px y se pasan con las flechas */
  --sahos-alto: clamp(260px, calc((100cqw - 2 * var(--sahos-borde) - (var(--sahos-n) - 1) * var(--sahos-hueco)
    + var(--sahos-l) / 2 * (var(--sahos-pie) + var(--sahos-hueco)) - 2px) / (var(--sahos-a) + var(--sahos-l) / 2)), calc(100svh - 240px));
  display: grid;
  justify-content: safe center;
  grid-template-rows: repeat(2, calc((var(--sahos-alto) + var(--sahos-pie) - var(--sahos-hueco)) / 2));
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: var(--sahos-hueco);
  list-style: none;
  margin: 0;
  padding: 0 var(--sahos-borde) 8px;
  overflow-x: auto;
  /* sin scroll de arriba abajo dentro de la tira: si no, con el trackpad el scroll se quedaba "pegado" en ella y la
     página no bajaba (y así el scroll suave de la página sigue funcionando encima de las fotos) */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sahos-borde);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sahos-proceso__lista::-webkit-scrollbar { display: none; }
.sahos-proceso__paso { grid-row: span 2; width: min-content; scroll-snap-align: start; margin: 0; }
.sahos-proceso__paso--ancha { grid-row: span 1; }
.sahos-proceso__paso img { display: block; height: var(--sahos-alto); width: auto; max-width: 82vw; object-fit: cover; border-radius: 4px; }
.sahos-proceso__paso--ancha img { height: calc((var(--sahos-alto) + var(--sahos-pie) - var(--sahos-hueco)) / 2 - var(--sahos-pie)); }
.sahos-proceso__flechas[hidden] { display: none; }
.sahos-proceso__flechas { display: flex; justify-content: center; gap: 12px; margin-top: clamp(16px, 2vw, 28px); }
.sahos-proceso__flecha {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.sahos-proceso__flecha:hover { background: var(--token-cef68b67-6b0e-4d79-a940-e4de007f530e, #32191f); color: #eee2d4; }
.sahos-proceso__flecha:disabled { opacity: 0.3; cursor: default; background: transparent; color: inherit; }
.sahos-proceso__flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sahos-proceso__pie {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: calc(var(--sahos-pie) - 12px);
  margin: 12px 0 0;
  font: 400 12px / 1.35 "DM Sans", "DM Sans Placeholder", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sahos-proceso__numero { font: 400 italic 20px / 1 "Instrument Serif", "Instrument Serif Placeholder", serif; letter-spacing: 0; color: var(--sahos-vino); }
.sahos-proceso__paso.sahos-anima { opacity: 0; transform: translateY(28px); }
.sahos-proceso__paso.sahos-visto { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
/* Teléfono: una foto debajo de otra, a todo lo ancho y sin flechas (pedido de Marien) */
@media (max-width: 809.98px) {
  .sahos-proceso__lista { display: flex; flex-direction: column; gap: 28px; overflow: visible; scroll-snap-type: none; }
  .sahos-proceso__paso, .sahos-proceso__paso--ancha { width: auto; }
  .sahos-proceso__paso img, .sahos-proceso__paso--ancha img { width: 100%; height: auto; max-width: none; }
  .sahos-proceso__pie { font-size: 11px; min-height: 0; }
  .sahos-proceso__flechas { display: none !important; }
}

/* Contacto y opiniones (.sahos-contacto, lo arma marca.mjs; funciona con contacto() de motor/marca.ts), con la
   referencia de Marien: a la izquierda el título, una frase y los temas; a la derecha la tarjeta con el formulario.
   Mismos colores y letras que el resto (crema, vino, Instrument Serif y DM Sans). En teléfono va una debajo de la otra. */
.sahos-contacto {
  --sahos-texto: var(--token-cef68b67-6b0e-4d79-a940-e4de007f530e, #32191f);
  --sahos-vino: #7b2c33;
  --sahos-boton: #9c3943;
  --sahos-tarjeta: rgba(50, 25, 31, 0.05);
  --sahos-campo: #f7f1e8;
  --sahos-linea: rgba(50, 25, 31, 0.16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(8px, 2vw, 24px) 24px clamp(56px, 7vw, 112px);
  color: var(--sahos-texto);
  text-align: left;
  font: 400 15px / 1.55 "DM Sans", "DM Sans Placeholder", sans-serif;
}
html[toggle-theme="dark"] .sahos-contacto, body[toggle-theme="dark"] .sahos-contacto {
  --sahos-vino: #c47a80;
  --sahos-tarjeta: rgba(238, 226, 212, 0.06);
  --sahos-campo: rgba(238, 226, 212, 0.08);
  --sahos-linea: rgba(238, 226, 212, 0.18);
}
.sahos-contacto__lado { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.sahos-contacto__etiqueta {
  margin: 0;
  font: 500 12px / 1 "DM Sans", "DM Sans Placeholder", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sahos-vino);
}
.sahos-contacto__titulo {
  margin: 0;
  font: 400 clamp(44px, 5.4vw, 80px) / 0.98 "Instrument Serif", "Instrument Serif Placeholder", serif;
  letter-spacing: -0.01em;
}
.sahos-contacto__titulo em { font-style: italic; color: var(--sahos-vino); }
.sahos-contacto__intro { margin: 0; max-width: 30em; opacity: 0.8; }
.sahos-contacto__datos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sahos-contacto__datos li { display: flex; align-items: center; gap: 14px; }
.sahos-contacto__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sahos-linea);
  border-radius: 10px;
}
.sahos-contacto svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sahos-contacto__derecha {
  padding: clamp(20px, 3vw, 36px);
  border-radius: 20px;
  background: var(--sahos-tarjeta);
}
.sahos-contacto__tarjeta { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.sahos-contacto__tarjeta[hidden], .sahos-contacto__gracias[hidden], .sahos-contacto__estrellas[hidden] { display: none; }
.sahos-contacto fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sahos-contacto__rotulo {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
}
.sahos-contacto__temas { display: flex; flex-wrap: wrap; gap: 8px; }
.sahos-contacto__temas legend { width: 100%; }
.sahos-contacto__tema { position: relative; cursor: pointer; }
.sahos-contacto__tema input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sahos-contacto__tema span {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--sahos-linea);
  border-radius: 999px;
  font-size: 13px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.sahos-contacto__tema:hover span { border-color: var(--sahos-texto); }
.sahos-contacto__tema input:checked + span { background: var(--sahos-texto); border-color: var(--sahos-texto); color: #eee2d4; }
.sahos-contacto__tema input:focus-visible + span { outline: 2px solid var(--sahos-vino); outline-offset: 2px; }
.sahos-contacto__par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sahos-contacto__campo { display: block; }
.sahos-contacto__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--sahos-campo);
  color: inherit;
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sahos-contacto__control::placeholder { color: currentColor; opacity: 0.45; }
.sahos-contacto__control:focus { outline: none; border-color: var(--sahos-vino); box-shadow: 0 0 0 3px rgba(123, 44, 51, 0.12); }
select.sahos-contacto__control {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b2c33' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
textarea.sahos-contacto__control { min-height: 140px; resize: vertical; }
/* estrellas: van de 5 a 1 en el HTML y se muestran al revés, así el hover y la elegida pintan las de la izquierda */
.sahos-contacto__fila-estrellas { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.sahos-contacto__fila-estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sahos-contacto__fila-estrellas label { cursor: pointer; color: var(--sahos-linea); transition: color 0.15s, transform 0.15s; }
.sahos-contacto__fila-estrellas label svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.sahos-contacto__fila-estrellas label:hover,
.sahos-contacto__fila-estrellas label:hover ~ label,
.sahos-contacto__fila-estrellas input:checked ~ label { color: var(--sahos-vino); }
.sahos-contacto__fila-estrellas label:hover { transform: scale(1.12); }
.sahos-contacto__fila-estrellas input:focus-visible + label { outline: 2px solid var(--sahos-vino); outline-offset: 2px; border-radius: 4px; }
.sahos-contacto__enviar, .sahos-contacto__otro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--sahos-boton);
  color: #f7efe6;
  font: 500 13px / 1 "DM Sans", "DM Sans Placeholder", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.sahos-contacto__enviar:hover, .sahos-contacto__otro:hover { background: #7b2c33; }
.sahos-contacto__enviar:hover svg { transform: translateX(3px); }
.sahos-contacto__enviar svg { transition: transform 0.2s; }
.sahos-contacto__enviar:disabled { opacity: 0.6; cursor: progress; }
.sahos-contacto__aviso { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--sahos-vino); }
.sahos-contacto__gracias { display: flex; flex-direction: column; gap: 14px; outline: none; }
.sahos-contacto__gracias-titulo { margin: 0; font: 400 italic clamp(40px, 4vw, 56px) / 1 "Instrument Serif", "Instrument Serif Placeholder", serif; color: var(--sahos-vino); }
@media (max-width: 809.98px) {
  .sahos-contacto { grid-template-columns: 1fr; gap: 32px; padding-inline: 16px; }
  .sahos-contacto__lado { position: static; }
  .sahos-contacto__par { grid-template-columns: 1fr; }
}
/* Historia · portada: un velo vino oscuro sobre toda la foto para que se lean "Our Story" y el título (pedido de Marien) */
[data-sahos-pagina="historia"] [data-framer-name="Hero Container"] [data-framer-name="Hero Image"] > [data-framer-name="Hero Image"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(36, 18, 22, 0.35) 0%, rgba(36, 18, 22, 0.5) 45%, rgba(36, 18, 22, 0.72) 100%);
}
/* Contacto · portada: el corsé entero (lazos, tela y cierre), con un velo que oscurece abajo para que se lea el texto;
   en teléfono se recorta hacia los lazos */
[data-sahos-pagina="contacto"] [data-framer-name="Hero Container"] [data-framer-name="Hero Image"] > [data-framer-name="Hero Image"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(36, 18, 22, 0.1) 0%, rgba(36, 18, 22, 0.25) 50%, rgba(36, 18, 22, 0.62) 100%);
}
@media (max-width: 809.98px) { [data-framer-name="Hero Image"] img[src*="contacto-corse"] { object-position: 50% 45% !important; } }
/* Las dos fotos grandes (Historia y cada prenda): las frases chicas de arriba y abajo en el vino de la web, porque en
   gris casi no se leían (pedido de Marien) */
[data-framer-name="Statements"] [data-framer-name="Vision"] p,
[data-framer-name="Statements"] [data-framer-name="Mission"] p { color: #7b2c33 !important; }
body[toggle-theme="dark"] [data-framer-name="Statements"] [data-framer-name="Vision"] p,
body[toggle-theme="dark"] [data-framer-name="Statements"] [data-framer-name="Mission"] p { color: #d88f95 !important; }
/* Historia: el boceto de Lola (fotos grandes) se recorta desde arriba, así se ven las cabezas */
[data-sahos-pagina="historia"] [data-framer-name="Statements"] img[src*="historia-boceto-lola"] { object-position: 50% 0 !important; }
/* Historia: la portada (la foto de la cama de Inicio) se recorta desde más arriba, para que no se corte la cabeza */
[data-framer-name="Hero Image"] img[src*="historia-cama"] { object-position: 50% 40% !important; }
/* Historia y Contacto: el lema de Inicio en el lugar del título de la sección (lo pone marca.mjs) */
[data-framer-name="About Section"] > .sahos-lema, [data-framer-name="Awards"] > .sahos-lema,
[data-framer-name="Contact Section"] > .sahos-lema { padding-block: clamp(32px, 5vw, 80px) clamp(16px, 2vw, 32px); }

/* Panel de la bolsa (.sahos-bolsa, lo arma marca.mjs; funciona con bolsa() de motor/marca.ts), con la referencia
   "My Bag" de Marien en los colores de la web: entra desde la derecha (en teléfono ocupa toda la pantalla). */
.sahos-bolsa {
  --sahos-texto: #32191f;
  --sahos-vino: #7b2c33;
  --sahos-panel: #f2e9dd;
  --sahos-linea: rgba(50, 25, 31, 0.14);
  position: fixed;
  inset: 0;
  z-index: 65;
}
.sahos-bolsa[hidden] { display: none; }
html[toggle-theme="dark"] .sahos-bolsa, body[toggle-theme="dark"] .sahos-bolsa {
  --sahos-texto: #eee2d4;
  --sahos-vino: #d88f95;
  --sahos-panel: #2a161a;
  --sahos-linea: rgba(238, 226, 212, 0.16);
}
.sahos-bolsa__fondo { position: absolute; inset: 0; background: rgba(30, 14, 18, 0.45); opacity: 0; transition: opacity 0.4s ease; }
.sahos-bolsa__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  padding: 28px clamp(20px, 2.4vw, 32px) 24px;
  box-sizing: border-box;
  background: var(--sahos-panel);
  color: var(--sahos-texto);
  box-shadow: -24px 0 60px rgba(30, 14, 18, 0.18);
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  font: 400 14px / 1.45 "DM Sans", "DM Sans Placeholder", sans-serif;
}
.sahos-bolsa--abierta .sahos-bolsa__fondo { opacity: 1; }
.sahos-bolsa--abierta .sahos-bolsa__panel { transform: none; }
.sahos-bolsa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sahos-bolsa button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sahos-bolsa__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sahos-bolsa__titulo { margin: 0; font: 400 clamp(44px, 4vw, 56px) / 0.95 "Instrument Serif", "Instrument Serif Placeholder", serif; letter-spacing: -0.01em; }
.sahos-bolsa__titulo em { color: var(--sahos-vino); }
.sahos-bolsa__cerrar { display: grid; place-items: center; width: 40px; height: 40px; margin: -4px -8px 0 0; border-radius: 50%; transition: background-color 0.2s; }
.sahos-bolsa__cerrar:hover { background: var(--sahos-linea); }
.sahos-bolsa__cerrar svg { width: 22px; height: 22px; }
.sahos-bolsa__cuantas { margin: 8px 0 0; min-height: 1.45em; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; }
.sahos-bolsa__lista { list-style: none; margin: 16px -4px 0; padding: 0 4px; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.sahos-bolsa__pieza { position: relative; overflow: hidden; border-bottom: 1px solid var(--sahos-linea); }
.sahos-bolsa__fila {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  padding: 18px 0;
  background: var(--sahos-panel);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sahos-bolsa__pieza--abierta .sahos-bolsa__fila { transform: translateX(-96px); }
.sahos-bolsa__borrar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #9c3943 !important;
  color: #f7efe6 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sahos-bolsa__foto { flex: none; width: 84px; height: 108px; object-fit: cover; border-radius: 6px; background: var(--sahos-linea); }
.sahos-bolsa__datos { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* "Edit" arriba a la derecha, encima de quitar; abre las tallas de la pieza */
.sahos-bolsa__editar {
  position: absolute; top: 0; right: 0; padding: 4px 6px !important;
  font-size: 11px !important; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px; opacity: 0.75; transition: opacity 0.2s, color 0.2s;
}
.sahos-bolsa__editar:hover, .sahos-bolsa__editar[aria-expanded="true"] { opacity: 1; color: #9c3943 !important; }
.sahos-bolsa__nombre { padding-right: 64px; }
.sahos-bolsa__editor { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sahos-bolsa__talla {
  min-width: 40px; height: 32px; padding: 0 10px !important; border: 1px solid var(--sahos-linea) !important; border-radius: 4px;
  font-size: 12px !important; letter-spacing: 0.06em; transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.sahos-bolsa__talla:hover { border-color: var(--sahos-texto) !important; }
.sahos-bolsa__talla[aria-pressed="true"] { background: #9c3943 !important; border-color: #9c3943 !important; color: #f7efe6 !important; }
.sahos-bolsa__nombre { margin: 0; font: 400 26px / 1 "Instrument Serif", "Instrument Serif Placeholder", serif; }
.sahos-bolsa__precio { margin: 4px 0 0; font-weight: 600; }
.sahos-bolsa__extra { margin: 6px 0 0; font-size: 12px; opacity: 0.65; }
.sahos-bolsa__abajo { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.sahos-bolsa__cantidad { display: inline-flex; align-items: center; gap: 12px; }
.sahos-bolsa__cantidad span { min-width: 1.2em; text-align: center; font-weight: 600; }
.sahos-bolsa__paso { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--sahos-linea) !important; border-radius: 50%; transition: border-color 0.2s; }
.sahos-bolsa__paso:hover { border-color: var(--sahos-texto) !important; }
.sahos-bolsa__paso svg { width: 14px; height: 14px; }
.sahos-bolsa__quitar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; opacity: 0.6; transition: opacity 0.2s, background-color 0.2s; }
.sahos-bolsa__quitar:hover { opacity: 1; background: var(--sahos-linea); }
.sahos-bolsa__vacia { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
.sahos-bolsa__vacia[hidden], .sahos-bolsa__pie[hidden] { display: none; }
.sahos-bolsa__vacia p { margin: 0; max-width: 26em; opacity: 0.75; }
.sahos-bolsa__vacia .sahos-bolsa__vacia-titulo { font: 400 italic 34px / 1.05 "Instrument Serif", "Instrument Serif Placeholder", serif; opacity: 1; }
.sahos-bolsa__ver { margin-top: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: inherit; text-underline-offset: 4px; }
.sahos-bolsa__pie { padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.sahos-bolsa__total { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.sahos-bolsa__suma { font: 400 30px / 1 "Instrument Serif", "Instrument Serif Placeholder", serif; letter-spacing: 0; text-transform: none; }
.sahos-bolsa__nota { margin: 0; font-size: 12px; opacity: 0.6; }
.sahos-bolsa__pagar {
  margin-top: 6px;
  padding: 16px !important;
  border-radius: 999px;
  background: #9c3943 !important;
  color: #f7efe6 !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(123, 44, 51, 0.22);
  transition: background-color 0.2s, transform 0.2s;
}
.sahos-bolsa__pagar:hover { background: #7b2c33 !important; transform: translateY(-1px); }
.sahos-bolsa__pagar:disabled { opacity: 0.6; cursor: progress; transform: none; }
.sahos-bolsa__seguir { align-self: center; padding: 8px 4px !important; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.sahos-bolsa__aviso { margin: 0; min-height: 1.2em; font-size: 12px; text-align: center; color: var(--sahos-vino); }
.sahos-compra__bolsa { background: none; border: 0; padding: 0; font-family: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 809.98px) {
  .sahos-bolsa__panel { width: 100%; padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sahos-bolsa__panel, .sahos-bolsa__fondo { transition: none; }
}

/* La foto que vuela a la bolsa al añadir (volarALaBolsa de motor/marca.ts): por encima de todo, sobre la barra. */
.sahos-vuelo {
  position: fixed; z-index: 70; margin: 0; object-fit: cover; pointer-events: none; transform-origin: 50% 50%;
  box-shadow: 0 12px 30px rgba(50, 25, 31, 0.28); will-change: transform, opacity;
}
/* Bloque de compra (.sahos-compra, lo arma marca.mjs; funciona con compra() de motor/marca.ts), con la referencia de
   Zara que mandó Marien: las fotos chicas en columna a la izquierda, la grande con flechas y, a la derecha, nombre,
   precio, talla, cantidad, "Add to bag" y los desplegables de detalles y envío. Sin color. En teléfono: la foto
   grande arriba, las chicas en fila debajo y después los datos. */
.sahos-compra {
  --sahos-texto: var(--token-cef68b67-6b0e-4d79-a940-e4de007f530e, #32191f);
  --sahos-fondo: var(--token-7f8fbaf5-53f0-4608-bf71-05cd1534e0fa, #eee2d4);
  --sahos-vino: #9c3943;
  --sahos-linea: color-mix(in srgb, var(--sahos-texto) 18%, transparent);
  box-sizing: border-box; width: 100%; max-width: 1160px; margin-inline: auto;
  padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start;
  color: var(--sahos-texto); font-family: "DM Sans", "DM Sans Placeholder", sans-serif;
}
body[toggle-theme="dark"] .sahos-compra { --sahos-vino: #d88f95; }
.sahos-compra *, .sahos-compra *::before, .sahos-compra *::after { box-sizing: border-box; }
.sahos-compra button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sahos-compra button:focus-visible, .sahos-compra summary:focus-visible, .sahos-compra a:focus-visible { outline: 2px solid var(--sahos-vino); outline-offset: 2px; }
.sahos-compra__galeria { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.sahos-compra__chicas {
  /* tan alta como la foto grande (contain: size, para que no estire la fila); lo que no cabe se ve bajando */
  position: relative; display: flex; flex-direction: column; gap: 10px; overflow: auto; scrollbar-width: none; contain: size;
}
.sahos-compra__chicas::-webkit-scrollbar { display: none; }
.sahos-compra__chica { flex: none; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 1px solid transparent; background: none; opacity: 0.55; transition: opacity 0.25s, border-color 0.25s; }
.sahos-compra__chica:hover { opacity: 0.85; }
.sahos-compra__chica[aria-current="true"] { opacity: 1; border-color: var(--sahos-texto); }
.sahos-compra__chica img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sahos-compra__grande { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--sahos-texto) 8%, transparent); }
.sahos-compra__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: sahos-compra-foto 0.4s ease; }
.sahos-compra__foto[hidden] { display: none; }
@keyframes sahos-compra-foto { from { opacity: 0; } }
.sahos-compra__flecha {
  position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(238, 226, 212, 0.82); color: #32191f !important; transition: background 0.2s, scale 0.2s;
}
.sahos-compra__flecha:hover { background: #eee2d4; scale: 1.06; }
.sahos-compra__flecha--antes { left: 12px; }
.sahos-compra__flecha--despues { right: 12px; }
.sahos-compra__flecha svg, .sahos-compra__cantidad svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sahos-compra__cuenta {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0; margin: 0; padding: 4px 10px; border-radius: 99px;
  background: rgba(50, 25, 31, 0.55); color: #eee2d4; font-size: 11px; letter-spacing: 0.08em;
}
.sahos-compra__info { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.sahos-compra p, .sahos-compra h2, .sahos-compra ul { margin: 0; }
.sahos-compra__coleccion { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sahos-vino); }
.sahos-compra__nombre { margin-top: 6px !important; font: 400 clamp(40px, 4vw, 56px) / 1 "Instrument Serif", "Instrument Serif Placeholder", serif; letter-spacing: -0.01em; text-transform: uppercase; }
.sahos-compra__tipo { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.sahos-compra__precio { margin-top: 14px !important; font-size: 22px; font-weight: 600; letter-spacing: 0.01em; }
.sahos-compra__grupo { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.sahos-compra__etiqueta { padding: 0; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sahos-compra__tallas { display: flex; flex-wrap: wrap; gap: 8px; }
.sahos-compra__talla {
  min-width: 52px; height: 40px; padding: 0 12px; border: 1px solid var(--sahos-linea); background: transparent;
  font-size: 13px !important; letter-spacing: 0.06em; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sahos-compra__talla:hover { border-color: var(--sahos-texto); }
.sahos-compra__talla[aria-pressed="true"] { background: var(--sahos-texto); border-color: var(--sahos-texto); color: var(--sahos-fondo) !important; }
.sahos-compra--falta-talla .sahos-compra__talla { border-color: var(--sahos-vino); }
.sahos-compra__fila { display: flex; gap: 12px; margin-top: 24px; }
.sahos-compra__cantidad { display: flex; align-items: center; flex: none; border: 1px solid var(--sahos-linea); }
.sahos-compra__cantidad button { width: 40px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; background: none; }
.sahos-compra__numero { min-width: 24px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.sahos-compra__anadir {
  flex: 1; height: 50px; padding: 0 20px; border: 0; background: #9c3943; color: #eee2d4 !important;
  font-size: 13px !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.25s;
}
.sahos-compra__anadir:hover { background: #7b2c33; }
.sahos-compra__anadir:active { scale: 0.99; }
.sahos-compra__aviso { min-height: 20px; margin-top: 8px !important; font-size: 13px; color: var(--sahos-vino); }
.sahos-compra__bolsa { align-self: flex-start; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: inherit; text-underline-offset: 4px; }
.sahos-compra__bolsa[hidden] { display: none; }
.sahos-compra__mas-info { border-top: 1px solid var(--sahos-linea); }
.sahos-compra__mas-info:first-of-type { margin-top: 18px; }
.sahos-compra__mas-info:last-of-type { border-bottom: 1px solid var(--sahos-linea); }
.sahos-compra__mas-info summary {
  display: flex; justify-content: space-between; align-items: center; padding: 16px 0; list-style: none; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.sahos-compra__mas-info summary::-webkit-details-marker { display: none; }
.sahos-compra__mas-info summary::after {
  content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  rotate: 45deg; translate: 0 -2px; transition: rotate 0.25s, translate 0.25s;
}
.sahos-compra__mas-info[open] summary::after { rotate: -135deg; translate: 0 2px; }
.sahos-compra__mas-info ul { padding: 0 0 18px 16px; display: grid; gap: 6px; font-size: 13px; line-height: 1.55; opacity: 0.75; }
@media (max-width: 809.98px) {
  .sahos-compra { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 32px 48px; }
  .sahos-compra__galeria { grid-template-columns: minmax(0, 1fr); }
  .sahos-compra__grande { order: -1; }
  .sahos-compra__chicas { flex-direction: row; contain: none; }
  .sahos-compra__chica { width: 64px; }
  .sahos-compra__flecha { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .sahos-compra__foto { animation: none; }
}
/* "Ver en 360°" (debajo de "Add to bag") y su ventana: la prenda sola girando sobre el crema del video (#e5decf, el
   fondo de los cuadros, para que no se note el borde de la foto). */
.sahos-compra__giro {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; margin-top: 12px; padding: 0 20px;
  border: 1px solid var(--sahos-texto); background: transparent;
  font-size: 12px !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.25s, color 0.25s;
}
.sahos-compra__giro:hover { background: var(--sahos-texto); color: var(--sahos-fondo) !important; }
.sahos-compra__giro svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Ventana del 360° como ficha (.sahos-giro--ficha; referencia de Marien): el nombre arriba, la prenda girando al medio,
   cuatro detalles con su acercamiento redondo a los lados (en computadora, unidos con una línea a su lugar en la prenda
   cuando está de frente), la frase a mano de la prenda y tres palabras abajo a la izquierda, y el nombre enorme y muy
   suave de fondo. En teléfono se lee de arriba abajo: nombre, prenda, detalles de a dos y la frase. */
.sahos-giro {
  --giro-vino: #7b2c33;
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 64px 20px 40px; overflow-y: auto; overscroll-behavior: contain; color: #32191f;
  background: radial-gradient(ellipse 38% 46% at 50% 52%, #ebe3d5, #e5ddcf 70%, #e2dacc); font-family: "DM Sans", "DM Sans Placeholder", sans-serif;
  animation: sahos-giro-entra 0.35s ease;
}
.sahos-giro[hidden] { display: none; }
@keyframes sahos-giro-entra { from { opacity: 0; } }
.sahos-giro p { margin: 0; }
.sahos-giro > * { position: relative; z-index: 1; }
/* en teléfono, de arriba abajo: nombre, prenda, detalles y la frase (en el HTML los detalles van a los lados) */
.sahos-giro__centro { order: 1; }
.sahos-giro__detalles { order: 2; }
.sahos-giro__firma { order: 3; }
.sahos-giro__cabeza { text-align: center; }
.sahos-giro__nombre { font: 400 clamp(34px, 3.4vw, 52px) / 1 "Instrument Serif", "Instrument Serif Placeholder", serif; text-transform: uppercase; letter-spacing: 0.04em; }
.sahos-giro__coleccion { margin-top: 8px !important; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.7; }
.sahos-giro__centro { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sahos-giro__escena {
  position: relative; height: min(58vh, 560px); max-width: 100%; aspect-ratio: 1 / 2;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.sahos-giro__escena--agarrada { cursor: grabbing; }
.sahos-giro__foto {
  display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none;
  /* el video tiene el centro un poco más claro: los bordes de la foto se funden con el fondo */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 92%, transparent);
}
.sahos-giro__pista { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.6; text-align: center; }
/* la barra: una línea fina con un punto vino */
.sahos-giro__barra { -webkit-appearance: none; appearance: none; width: min(340px, 72vw); height: 18px; background: transparent; cursor: pointer; }
.sahos-giro__barra::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: rgba(50, 25, 31, 0.22); }
.sahos-giro__barra::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(50, 25, 31, 0.22); }
.sahos-giro__barra::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border: 0; border-radius: 50%; background: #9c3943; }
.sahos-giro__barra::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #9c3943; }
.sahos-giro__detalles { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; width: 100%; max-width: 480px; margin: 0; padding: 0; list-style: none; }
.sahos-giro__detalle { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sahos-giro__circulo {
  flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.55); box-shadow: 0 10px 28px rgba(50, 25, 31, 0.16);
}
.sahos-giro__cat { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; }
.sahos-giro__titulo { margin-top: 4px !important; font: 400 34px / 1.05 "Corinthia", cursive; color: var(--giro-vino); }
.sahos-giro__desc { margin-top: 6px !important; font: 400 16px / 1.35 "Instrument Serif", "Instrument Serif Placeholder", serif; opacity: 0.78; }
.sahos-giro__firma { margin-top: 6px; text-align: center; }
.sahos-giro__frase { font: 400 52px / 1 "Corinthia", cursive; color: var(--giro-vino); opacity: 0.75; }
.sahos-giro__palabras { margin-top: 6px !important; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; }
.sahos-giro__fondo, .sahos-giro__lineas { display: none; }
.sahos-giro__cerrar {
  position: fixed !important; top: 16px; right: 16px; z-index: 3 !important; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(50, 25, 31, 0.08); color: #32191f; cursor: pointer; transition: background 0.2s;
}
.sahos-giro__cerrar:hover { background: rgba(50, 25, 31, 0.16); }
.sahos-giro__cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sahos-giro button:focus-visible, .sahos-giro input:focus-visible { outline: 2px solid #9c3943; outline-offset: 3px; }
@media (min-width: 1100px) {
  .sahos-giro--ficha {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    align-items: center; column-gap: clamp(24px, 3vw, 56px); padding: 26px clamp(32px, 4vw, 72px) 22px; overflow: hidden;
  }
  .sahos-giro--ficha .sahos-giro__cabeza { grid-column: 1 / -1; }
  .sahos-giro--ficha .sahos-giro__centro { grid-column: 2; grid-row: 2; align-self: stretch; justify-content: center; }
  .sahos-giro--ficha .sahos-giro__escena { height: min(66vh, 720px); }
  .sahos-giro--ficha .sahos-giro__detalles { grid-row: 2; display: flex; flex-direction: column; gap: clamp(36px, 8vh, 96px); max-width: none; }
  .sahos-giro--ficha .sahos-giro__detalles--izq { grid-column: 1; align-items: flex-end; margin-bottom: 14vh; }
  .sahos-giro--ficha .sahos-giro__detalles--der { grid-column: 3; align-items: flex-start; }
  .sahos-giro--ficha .sahos-giro__detalle { flex-direction: row; align-items: center; gap: clamp(18px, 2vw, 32px); text-align: left; }
  .sahos-giro--ficha .sahos-giro__detalles--izq .sahos-giro__detalle { flex-direction: row-reverse; }
  .sahos-giro--ficha .sahos-giro__texto { width: clamp(180px, 16vw, 250px); }
  .sahos-giro--ficha .sahos-giro__circulo { width: clamp(110px, 9.5vw, 158px); height: clamp(110px, 9.5vw, 158px); }
  .sahos-giro--ficha .sahos-giro__titulo { font-size: clamp(32px, 2.6vw, 42px); }
  .sahos-giro--ficha .sahos-giro__firma {
    position: absolute; left: clamp(32px, 4vw, 72px); bottom: 26px; margin: 0; text-align: center;
  }
  .sahos-giro--ficha .sahos-giro__frase { font-size: clamp(56px, 5.4vw, 92px); transform: rotate(-5deg); }
  .sahos-giro--ficha .sahos-giro__fondo {
    display: block; position: absolute; z-index: 0; inset: 0; display: grid; place-items: center; pointer-events: none;
    font: 400 min(40vw, 70vh) / 1 "Corinthia", cursive; color: var(--giro-vino); opacity: 0.045; white-space: nowrap; overflow: hidden;
  }
  .sahos-giro--ficha .sahos-giro__lineas {
    display: block; position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none;
    fill: none; stroke: rgba(123, 44, 51, 0.5); stroke-width: 1; opacity: 0; transition: opacity 0.35s ease;
  }
  .sahos-giro--ficha .sahos-giro__lineas circle { fill: #7b2c33; stroke: none; }
  .sahos-giro--ficha.sahos-giro--frente .sahos-giro__lineas { opacity: 1; }
  .sahos-giro__cerrar { top: 22px; right: 26px; background: transparent; }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .sahos-giro--ficha .sahos-giro__palabras { display: none; }
  .sahos-giro--ficha .sahos-giro__frase { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .sahos-giro { animation: none; }
  .sahos-giro__lineas { transition: none; }
}
/* "La pieza" con el lema: más aire arriba y abajo que en Inicio. */
[data-sahos-pagina="prenda"] [data-framer-name="About Section"] .sahos-lema { padding-block: clamp(40px, 6vw, 96px) clamp(24px, 3vw, 48px); }

/* Página que no existe (/prueba/404, body[data-sahos-pagina="no-existe"] lo pone marca.mjs): la foto de los ganchos va
   oscurecida, más hacia abajo, para que el título y el texto claros resalten. */
[data-sahos-pagina="no-existe"] [data-framer-name="Hero Image"] img { filter: brightness(0.5); }
[data-sahos-pagina="no-existe"] [data-framer-name="Hero Image"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(50, 25, 31, 0) 30%, rgba(50, 25, 31, 0.55) 100%);
}

/* Teléfono · portadas (Inicio, Colección, Our Story, prendas): degradado vino en la parte de abajo de la foto para que
   se lean los títulos claros, y los textos suben lo que ocupa la barra del navegador cuando está a la vista (100vh es
   la pantalla sin esa barra; 100svh, con ella), así no quedan tapados. */
@media (max-width: 809.98px) {
  [data-framer-name="Hero Container"] [data-framer-name="Hero Image"] > [data-framer-name="Hero Image"]::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(50, 25, 31, 0.9) 0%, rgba(50, 25, 31, 0.6) 26%, rgba(50, 25, 31, 0) 55%);
  }
  /* +40 px: la línea de arriba ("La Colección Marilyn") entra deslizándose desde 160 px más abajo y solo se anima si
     ese punto de partida queda dentro de la pantalla. */
  [data-framer-name="Hero Container"] [data-framer-name="Titles"] { margin-bottom: calc(40px + 100vh - 100svh) !important; }
  /* Inicio: "Made To Be Seen" / "Hecha para ser vista" en una sola línea, del ancho de la pantalla menos los márgenes
     (medido: a 58 px ocupa 344 px en inglés y 438 px en español). */
  [data-sahos-pagina="inicio"] [data-framer-name="Hero Container"] h1 {
    white-space: nowrap; font-size: min(58px, calc((100vw - 48px) * 0.163)) !important;
  }
  html[lang="es"] [data-sahos-pagina="inicio"] [data-framer-name="Hero Container"] h1 {
    font-size: calc((100vw - 48px) * 0.128) !important;
  }
  /* Inicio en teléfono: sin la descripción debajo del título (pedido de Marien); en computadora se queda. */
  [data-sahos-pagina="inicio"] [data-framer-name="Hero Container"] [data-framer-name="Titles"] > [data-framer-name="Conent"] { display: none !important; }
}

/* Inicio · promesas: etiquetas chicas en el vino de la marca (.sahos-etiqueta, la pone marca.mjs), el mismo de
   "Colección" y de las firmas. */
.framer-9gtgza p.sahos-etiqueta { color: #9c3943 !important; }
body[toggle-theme="dark"] .framer-9gtgza p.sahos-etiqueta { color: #d88f95 !important; }
@media (max-width: 809.98px) {
  /* Prendas en teléfono: el tipo de prenda de la portada (p. ej. "Vestido de satén con espalda cruzada") cabe en una
     línea sin partir palabras. */
  [data-sahos-pagina="prenda"] [data-framer-name="Hero Container"] [data-framer-name="Sub Title"] h4 { font-size: 15px !important; }
  /* (abajo, por encima de la barra del navegador cuando está a la vista) */
  [data-sahos-pagina="prenda"] [data-framer-name="Hero Container"] [data-framer-name="Title Contents"] > [data-framer-name="Titles"] {
    margin-bottom: 0 !important; gap: 12px !important; padding-bottom: calc(24px + 100vh - 100svh);
  }
}
@media (max-width: 809.98px) {
  /* Promesas en teléfono: las tarjetas se apilan al hacer scroll (cada una sube sobre la anterior) y eran
     transparentes: la foto de la anterior se veía por detrás de "Datos" y parecía cortarla. Cada tarjeta lleva el
     fondo de la página y tapa a la anterior entera. */
  .framer-9gtgza [data-framer-name="Sticky Container"] { background: var(--token-7f8fbaf5-53f0-4608-bf71-05cd1534e0fa, #eee2d4); }
  /* y se pegan debajo de la barra de arriba (57px), no detrás: si no, "Datos" quedaba tapado por la barra (pedido de
     Marien). El alto baja lo mismo para que la foto siga entera. */
  .framer-9gtgza [data-framer-name="Sticky Container"] { top: 57px !important; height: calc(100svh - 57px) !important; }
  /* Todo cabe en la tarjeta, en cualquier teléfono: el título, la foto y el texto medían ~795px y la tarjeta (alto de
     la pantalla) 600–720px, así que se cortaban arriba y abajo ("Tallas de" tapado, pedido de Marien). Menos aire
     arriba y la foto se achica a lo que quede. */
  .framer-9gtgza [data-framer-name="Sticky Container"] { padding-top: 20px !important; padding-bottom: 40px !important; gap: 16px !important; }
  .framer-9gtgza [data-framer-name="Sticky Container"] > :nth-child(2) { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; }
}

/* Teléfono · pie (todas las páginas), como la referencia de Marien: fondo vino con letras claras, todo alineado a la
   izquierda; Navegación e Historia lado a lado, Escríbenos debajo; después la línea, el © y el crédito, centrados. */
@media (max-width: 809.98px) {
  [data-framer-name="Footer"] {
    background: #32191f;
    color: #eee2d4;
    padding: 48px 24px 40px !important;
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 0 !important;
  }
  /* a todo lo ancho y hasta abajo: sin el margen crema de la variante de teléfono ni el de abajo de la sección */
  [data-framer-name="Footer Section"] { padding-bottom: 0 !important; }
  [data-framer-name="Footer Section"] [data-framer-name="Phone"]:has(> [data-framer-name="Footer"]) { padding: 0 !important; }
  [data-framer-name="Footer"] > [data-framer-name="Content"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px !important;
    width: 100% !important;
    align-items: start;
  }
  [data-framer-name="Footer"] > [data-framer-name="Content"] > [data-framer-name="Links"] { grid-column: 1; grid-row: 1; }
  [data-framer-name="Footer"] > [data-framer-name="Content"] > [data-framer-name="Contact"]:last-child { grid-column: 2; grid-row: 1; }
  [data-framer-name="Footer"] > [data-framer-name="Content"] > [data-framer-name="Contact"]:first-child { grid-column: 1 / -1; grid-row: 2; }
  [data-framer-name="Footer"] > [data-framer-name="Content"] div { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; width: auto !important; }
  [data-framer-name="Footer"] > [data-framer-name="Content"] > * { gap: 18px !important; justify-self: start !important; margin: 0 !important; min-height: 0 !important; height: auto !important; }
  [data-framer-name="Footer"] > [data-framer-name="Content"] [data-framer-name="Get in touch"] p,
  [data-framer-name="Footer"] > [data-framer-name="Content"] [data-framer-name="Get in touch"] p * {
    font: 600 13px / 1.2 "DM Sans", "DM Sans Placeholder", sans-serif !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #eee2d4 !important;
  }
  [data-framer-name="Footer"] > [data-framer-name="Content"] p,
  [data-framer-name="Footer"] > [data-framer-name="Content"] a {
    text-align: left !important;
    text-transform: none !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    color: rgba(238, 226, 212, 0.9) !important;
  }
  [data-framer-name="Footer"] [data-framer-name="Footer Links"] { gap: 14px !important; }
  /* la línea de la plantilla crece con el scroll y en teléfono casi no se ve: se cambia por un borde fijo */
  [data-framer-name="Footer"] > [class*="-container"]:has([data-framer-name="Filler"]) { display: none !important; }
  [data-framer-name="Footer"] [data-framer-name="Legal"] {
    align-items: center !important; gap: 14px !important;
    margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(238, 226, 212, 0.25);
  }
  [data-framer-name="Footer"] [data-framer-name="Legal"] p { color: rgba(238, 226, 212, 0.85) !important; text-align: center !important; font-size: 13px !important; letter-spacing: 0.06em !important; }
  [data-framer-name="Footer"] [data-framer-name="Legal"] > div:last-child p { text-transform: none !important; letter-spacing: 0.02em !important; color: rgba(238, 226, 212, 0.6) !important; }

  /* Tira de fotos del final: 4:5 (como Instagram) y un poco más grandes. */
  .ticker-item:has(img[src*="/sahos/cierre-"]) > div { width: 46vw !important; height: auto !important; aspect-ratio: 4 / 5 !important; }
}

/* Tarjeta con forma de publicación (corazón, like, comentar): toda la tarjeta lleva al Instagram de SAHOS */
.sahos-instagram { position: absolute; inset: 0; z-index: 3; border-radius: inherit; cursor: pointer; }
.sahos-instagram:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }