/* Los Sueños
   Identidad tomada del logotipo: trazo de tinta negra a mano, estrella magenta,
   corazones turquesa y fondo de acuarela rosa → menta.
   Concepto: «de tu idea a tu equipo». La idea se dibuja con tiza de sastre (gris, punteada);
   el resultado se cose con hilo magenta. El titular del inicio usa una letra manuscrita
   de trazo uniforme, como la del logo; el resto del texto es una sans clara.
   Composición: texto a la izquierda, filas separadas por puntadas, sin tarjetas iguales. */

@font-face {
  font-family: 'Sacramento';
  src: url('../fonts/sacramento.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --papel: #fffbfc;      /* fondo: blanco con un punto de rosa */
  --tela: #ffffff;       /* superficies */
  --texto: #231f20;      /* tinta del logo */
  --banda: #231f20;      /* bandas oscuras */
  --sobre-banda: #fbf3f6;
  --gris: #5e5659;
  --linea: #e6dde1;
  --tiza: #a39aa0;       /* boceto a tiza de sastre */
  --hilo: #d4157f;       /* magenta de la estrella (algo más oscuro para leerse sobre blanco) */
  --turquesa: #2f8f99;   /* corazones turquesa, versión legible */
  --rosa: #f8d3dc;       /* acuarela rosa del logo */
  --menta: #c3e3d8;      /* acuarela menta del logo */
  --rosa-suave: #fdeef2;
  --menta-suave: #eaf6f2;
  --wa: #0d7a3f;         /* verde WhatsApp, solo en el botón flotante */
  --wa-texto: #ffffff;
  --boton: #d4157f;      /* botones de presupuesto: magenta de la estrella */
  --boton-texto: #ffffff;
  --pendiente: #fff0b3;
  --pendiente-texto: #594500;

  --f-guion: 'Sacramento', 'Segoe Script', 'Brush Script MT', cursive;
  --f-titulo: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-texto: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala 1,25 */
  --t-0: 0.875rem; --t-1: 1rem; --t-2: 1.25rem; --t-3: 1.563rem;
  --t-4: clamp(1.75rem, 1.3rem + 1.8vw, 2.441rem);
  --t-5: clamp(2.6rem, 1.3rem + 5.2vw, 5.2rem);

  --corazon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.2 5.3 3.2 1.7-2 3.1-3.2 5.3-3.2 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  --icono-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.4.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.2-.2-.5-.3Z'/%3E%3C/svg%3E");
  --ancho: 72rem;
  --puntada: 2px dashed;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #1b1719; --tela: #241f22; --texto: #f6eef1; --banda: #120f10; --sobre-banda: #f6eef1;
    --gris: #b9adb2; --linea: #3a3236; --tiza: #7a6f75; --hilo: #ff5cb0; --turquesa: #5cc6d0;
    --rosa: #4a2a36; --menta: #1f3b35; --rosa-suave: #2a1f24; --menta-suave: #1a2724;
    --wa: #25b862; --wa-texto: #04200e; --boton: #ff5cb0; --boton-texto: #1b0a13; --pendiente: #4a3a00; --pendiente-texto: #ffe48a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #1b1719; --tela: #241f22; --texto: #f6eef1; --banda: #120f10; --sobre-banda: #f6eef1;
  --gris: #b9adb2; --linea: #3a3236; --tiza: #7a6f75; --hilo: #ff5cb0; --turquesa: #5cc6d0;
  --rosa: #4a2a36; --menta: #1f3b35; --rosa-suave: #2a1f24; --menta-suave: #1a2724;
  --wa: #25b862; --wa-texto: #04200e; --boton: #ff5cb0; --boton-texto: #1b0a13; --pendiente: #4a3a00; --pendiente-texto: #ffe48a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font: 400 var(--t-1)/1.6 var(--f-texto);
}
img { max-width: 100%; height: auto; }
h1, h2 { font-family: var(--f-titulo); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-5); }
.guion { font-family: var(--f-guion); font-weight: 400; letter-spacing: 0; word-spacing: .18em; line-height: 1.1; padding-bottom: .15em; -webkit-text-stroke: .025em currentColor; }
h2 { font-size: var(--t-4); }
h3 { font: 700 var(--t-2)/1.25 var(--f-texto); margin: 0; text-wrap: balance; }
p { margin: 0; max-width: 62ch; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hilo); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 40rem) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

.saltar { position: absolute; left: -999px; top: 0; background: var(--tela); padding: .5rem 1rem; z-index: 50; }
.saltar:focus { left: 1rem; }

.etiqueta { font-size: var(--t-0); font-weight: 700; color: var(--gris); }
.entradilla { font-size: var(--t-2); line-height: 1.5; color: var(--gris); }
.nota { font-size: var(--t-0); color: var(--gris); }
mark.pendiente { background: var(--pendiente); color: var(--pendiente-texto); padding: 0 .3em; border-radius: 3px; font-size: .92em; }

/* Botones y enlaces */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .75rem 1.5rem;
  border-radius: 999px; border: 2px solid transparent;
  font: 700 var(--t-1)/1.2 var(--f-texto); text-decoration: none; cursor: pointer;
}
.btn--wa { gap: .55rem; background: var(--boton); color: var(--boton-texto); }
.btn--wa::before {
  content: ""; width: 1.25em; height: 1.25em; flex: none; background: currentColor;
  -webkit-mask: var(--icono-wa) center / contain no-repeat; mask: var(--icono-wa) center / contain no-repeat;
}
.btn--wa:hover { background: color-mix(in srgb, var(--boton) 85%, #000); }
.btn--linea { border-color: currentColor; color: var(--texto); }
.btn--linea:hover { color: var(--hilo); }
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: var(--t-0); }
.enlace { font-weight: 700; color: var(--texto); text-decoration: underline dashed var(--hilo); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.enlace:hover { color: var(--hilo); }

/* Cabecera */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--papel); }
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--puntada) var(--linea);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.marca { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.marca__logo { width: 56px; height: 56px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--linea); }
.marca__texto { font-size: var(--t-0); line-height: 1.3; color: var(--gris); }
@media (max-width: 24rem), (min-width: 70rem) and (max-width: 84rem) { .marca__texto { display: none; } }

.menu-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--tela); color: var(--texto); font: 600 var(--t-0) var(--f-texto); cursor: pointer; }
.menu-btn__barras, .menu-btn__barras::before { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.menu-btn__barras { transform: translateY(-2.5px); }
.menu-btn__barras::before { content: ""; position: absolute; top: 5px; }

.menu { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.menu a:not(.btn) { display: block; padding: .6rem .7rem; text-decoration: none; font-weight: 500; }
.menu a:not(.btn):hover { color: var(--hilo); }
.menu a[aria-current="page"] { text-decoration: underline dashed var(--hilo); text-decoration-thickness: 2px; text-underline-offset: .45em; }

@media (max-width: 69.99rem) {
  .menu--abierto {
    display: grid; gap: 1rem;
    position: absolute; inset: 100% 0 auto 0;
    background: var(--papel); border-bottom: var(--puntada) var(--linea);
    padding: 1rem max(16px, env(safe-area-inset-right, 0px)) 1.5rem max(16px, env(safe-area-inset-left, 0px));
  }
  .menu--abierto ul { flex-direction: column; }
  .menu--abierto a:not(.btn) { font-size: var(--t-2); padding-block: .45rem; padding-inline: 0; }
}
/* Con 7 apartados el menú completo necesita ~70rem; por debajo, botón «Menú» */
@media (min-width: 70rem) {
  .menu a { white-space: nowrap; }
  .menu .btn { white-space: nowrap; }
  .menu-btn { display: none; }
  .menu { display: flex; align-items: center; gap: 1rem; }
}

/* Hero: de la tiza al hilo */
.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(45% 55% at 80% 8%, color-mix(in srgb, var(--rosa) 90%, var(--hilo)), transparent 70%),
    radial-gradient(40% 40% at 15% 92%, color-mix(in srgb, var(--menta) 85%, var(--turquesa)), transparent 70%),
    linear-gradient(180deg, var(--rosa) 0%, var(--rosa-suave) 38%, var(--papel) 52%, var(--menta-suave) 68%, var(--menta) 100%);
}
.hero__rejilla { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 54rem) { .hero__rejilla { grid-template-columns: 1.3fr 1fr; gap: 3rem; } }
.hero__texto { display: grid; gap: 1.5rem; min-width: 0; justify-items: start; }
.hero h1 { max-width: 8ch; font-size: clamp(3.6rem, 2rem + 7vw, 7.2rem); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hero__firma { font-size: var(--t-0); color: var(--gris); padding-top: 1.25rem; border-top: var(--puntada) var(--linea); }

.patron { margin: 0; display: grid; gap: .75rem; justify-items: center; }
.patron__svg { width: min(100%, 26rem); height: auto; overflow: visible; }
.patron__tiza { fill: none; stroke: var(--tiza); stroke-width: 1.5; stroke-dasharray: 1.5 4.5; stroke-linecap: round; stroke-linejoin: round; }
.patron__nota { font: italic 500 12px var(--f-texto); fill: var(--tiza); }
.patron__hilo { fill: none; stroke: var(--hilo); stroke-width: 2.6; stroke-dasharray: 7 4.5; stroke-linecap: round; stroke-linejoin: round; }
.patron__boton { fill: var(--turquesa); }
.patron__satin { fill: var(--hilo); }
.patron__logo-borde { fill: none; stroke: var(--hilo); stroke-width: 1.4; stroke-linejoin: round; }
.patron figcaption { font-size: var(--t-0); color: var(--gris); text-align: center; }

.patron__trazo { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .patron__trazo { animation: coser 2.2s cubic-bezier(.45, .05, .35, 1) .4s both; }
  .patron__trazo--2 { animation-duration: .9s; animation-delay: 2.5s; }
  .patron__logo, .patron__boton { animation: aparecer .5s ease-out 3.3s both; }
}
@keyframes coser { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Secciones */
.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccion--tela { background: var(--rosa-suave); }
.seccion--mahon { background: linear-gradient(180deg, var(--menta-suave), var(--menta)); color: var(--texto); }
.seccion__titulo { margin-bottom: 2.25rem; max-width: 20ch; }
.seccion__cabecera { display: grid; gap: .75rem; margin-bottom: 2.25rem; }
.cabecera-pagina { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; }
.cabecera-pagina .wrap { display: grid; gap: 1.1rem; }
.cabecera-pagina h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.8rem); max-width: 18ch; }

.dos-col { display: grid; gap: 2.5rem; align-items: start; }
.dos-col > * { display: grid; gap: 1rem; min-width: 0; justify-items: start; }
@media (min-width: 52rem) { .dos-col { grid-template-columns: 1fr 1fr; } .dos-col--ancha { grid-template-columns: 1.4fr 1fr; } }

/* Cabecera de página con imagen temporal */
@media (min-width: 52rem) {
  .cabecera-pagina--imagen .wrap { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3rem; }
}
.cabecera-pagina__texto { display: grid; gap: 1.1rem; min-width: 0; }
.imagen-temporal { width: 100%; max-width: 30rem; height: auto; border-radius: 24px; }

/* Opiniones de Google */
.opiniones { display: grid; gap: 1rem 3rem; align-items: center; }
@media (min-width: 44rem) { .opiniones { grid-template-columns: auto 1fr; } }
.opiniones > div { display: grid; gap: 1rem; justify-items: start; }
.opiniones .seccion__titulo { margin-bottom: 0; }
.opiniones__nota { font: 400 clamp(5rem, 3rem + 8vw, 9rem)/1 var(--f-guion); color: var(--hilo); -webkit-text-stroke: .02em currentColor; }
.opiniones__nota::after { content: "★"; font-family: var(--f-texto); font-size: .45em; vertical-align: super; margin-left: .1em; -webkit-text-stroke: 0; }

/* Servicios en filas separadas por puntadas */
.filas { list-style: none; margin: 0; padding: 0; border-top: var(--puntada) var(--linea); }
.fila { position: relative; display: grid; gap: .5rem; padding-block: 1.75rem; border-bottom: var(--puntada) var(--linea); }
@media (min-width: 48rem) { .fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: baseline; } }
.fila h3 { font: 800 var(--t-4)/1.1 var(--f-titulo); letter-spacing: -0.02em; }
.fila h3 a { text-decoration: none; }
.fila h3 a::after { content: ""; position: absolute; inset: 0; }
.fila p { color: var(--gris); }
.fila:hover h3 a, .fila h3 a:focus-visible { color: var(--hilo); }

/* Proceso: los pasos se unen con una puntada */
.proceso { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; counter-reset: paso; }
@media (min-width: 52rem) { .proceso { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.proceso li { counter-increment: paso; display: grid; gap: .6rem; align-content: start; position: relative; min-width: 0; }
.proceso li::before {
  content: counter(paso);
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 var(--t-2)/1 var(--f-titulo);
  border: var(--puntada) var(--hilo); color: var(--hilo);
  background: var(--papel); position: relative; z-index: 1;
}
@media (min-width: 52rem) {
  .proceso li:not(:last-child)::after {
    content: ""; position: absolute; top: 1.375rem; left: 3.25rem; right: -1rem;
    border-top: var(--puntada) color-mix(in srgb, var(--hilo) 75%, transparent);
  }
}
.proceso p { color: var(--gris); }

/* Chips de sectores */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a { display: inline-block; padding: .6rem 1.1rem; border: var(--puntada) var(--turquesa); border-radius: 999px; text-decoration: none; font-weight: 600; background: var(--tela); }
.chips a:hover { border-color: var(--turquesa); color: var(--turquesa); }
.chips--fila { margin-top: .5rem; }

/* Huecos para fotos reales */
.galeria { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 40rem) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.hueco-foto {
  aspect-ratio: 4 / 3; max-width: 100%;
  border: var(--puntada) var(--turquesa); border-radius: 6px;
  display: grid; place-items: center; text-align: center; padding: 1rem;
  color: var(--gris); font-weight: 600; background: var(--papel);
}
.hueco-foto small { font-weight: 400; }
.trabajo { margin: 0; display: grid; gap: .6rem; }
.trabajo figcaption { font-size: var(--t-0); color: var(--gris); }

/* Catálogo */
.catalogo { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--puntada) var(--linea); }
@media (min-width: 44rem) { .catalogo { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.catalogo li { display: grid; gap: .3rem; padding-block: 1.25rem; border-bottom: var(--puntada) var(--linea); }
.catalogo li p { color: var(--gris); }

.comparar { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 52rem) { .comparar { grid-template-columns: repeat(3, 1fr); } }
.tecnica { display: grid; gap: .6rem; align-content: start; padding: 1.5rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--papel); }
.tecnica h3 { font: 800 var(--t-3)/1.1 var(--f-titulo); }
.tecnica ul, .lista-puntada, .sector ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.tecnica li, .lista-puntada li, .sector li { padding-left: 1.4rem; position: relative; }
.tecnica li::before, .lista-puntada li::before, .sector li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: .8rem; height: .8rem; background: var(--turquesa);
  -webkit-mask: var(--corazon) center / contain no-repeat; mask: var(--corazon) center / contain no-repeat;
}

.alcance { margin: 0; display: grid; border-top: var(--puntada) var(--linea); }
.alcance > div { display: grid; gap: .25rem; padding-block: 1rem; border-bottom: var(--puntada) var(--linea); }
@media (min-width: 44rem) { .alcance > div { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.alcance dt { font-weight: 700; }
.alcance dd { margin: 0; }

/* Sectores */
.sectores { display: grid; padding-block: 1rem 4rem; }
.sector { display: grid; gap: .9rem; padding-block: 2.5rem; border-bottom: var(--puntada) var(--linea); scroll-margin-top: 90px; justify-items: start; }
.sector p { color: var(--gris); }

/* Contacto */
.whatsapp-caja { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 20px; background: linear-gradient(160deg, var(--rosa), var(--papel) 55%, var(--menta)); }
.datos { justify-items: stretch; }
.datos dl { margin: 0; display: grid; gap: 1rem; }
.datos dt { font-size: var(--t-0); font-weight: 700; color: var(--gris); }
.datos dd { margin: 0; }

.texto-legal { display: grid; gap: 1rem; }
.texto-legal h2 { font-size: var(--t-3); margin-top: 1rem; }
.texto-legal ul { margin: 0; }

/* Cierre: un parche bordado con borde de remate */
.cierre { padding-block: 1rem clamp(3rem, 7vw, 5rem); }
.parche {
  display: grid; gap: 1rem; justify-items: start;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
  background: linear-gradient(170deg, var(--rosa), var(--papel) 50%, var(--menta));
  color: var(--texto);
  border: 6px solid var(--texto);
  border-radius: 28px;
  outline: var(--puntada) var(--hilo);
  outline-offset: -16px;
}
.parche h2 { max-width: 18ch; }
.parche p { color: var(--gris); }

/* Pie */
.pie { background: var(--banda); color: var(--sobre-banda); padding-block: 3rem 6rem; font-size: var(--t-0); }
.pie__rejilla { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .pie__rejilla { grid-template-columns: 2fr 1.5fr 1fr 1fr; } }
.pie__marca { font: 400 2.4rem/1 var(--f-guion); margin-bottom: .5rem; }
.pie .etiqueta { color: color-mix(in srgb, var(--sobre-banda) 65%, transparent); margin-bottom: .4rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pie__base { margin-top: 2rem; padding-top: 1.5rem; border-top: var(--puntada) color-mix(in srgb, var(--sobre-banda) 25%, transparent); opacity: .8; }

/* Botón flotante de WhatsApp */
.wa-flotante {
  position: fixed; z-index: 30;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wa); color: var(--wa-texto);
  box-shadow: 0 8px 24px -8px rgb(0 0 0 / .45);
}


/* ===== Cabecera integrada en la página =====
   No es una barra aparte: flota sobre la primera sección y se queda arriba al bajar. */
.cabecera {
  position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  background: transparent; backdrop-filter: none; border-bottom: 0;
}
.cabecera__fila { min-height: 96px; }
.marca__logo { width: 64px; height: 64px; box-shadow: 0 0 0 3px var(--tela), 0 6px 16px -8px rgb(0 0 0 / .35); }
@media (min-width: 60rem) { .marca__logo { width: 76px; height: 76px; } .cabecera__fila { min-height: 112px; } }
.menu-btn { background: color-mix(in srgb, var(--tela) 85%, transparent); }
@media (max-width: 69.99rem) {
  .menu--abierto { border-radius: 0 0 20px 20px; box-shadow: 0 18px 30px -18px rgb(0 0 0 / .35); }
}
.cabecera-pagina { padding-top: calc(clamp(2.5rem, 6vw, 4.5rem) + 96px); }
@media (min-width: 60rem) { .cabecera-pagina { padding-top: calc(clamp(2.5rem, 6vw, 4.5rem) + 112px); } }

/* ===== Inicio: un hilo que se cose al bajar =====
   La página es una pieza de tela. Un hilo magenta sale del bastidor de la portada,
   baja zigzagueando por los márgenes y termina cosiendo el parche final.
   Todo lo que aparece lo hace «cosiéndose»: el polo del taller, las estrellas, las etiquetas.
   Sin JS o con movimiento reducido, todo se ve ya terminado (las reglas animadas van bajo .con-scroll). */
:root { --madera: #dcb07a; --madera-borde: #a5743f; }
/* La tela: todas las páginas */
.tela {
  --gris: color-mix(in srgb, var(--texto) 80%, var(--papel));
  position: relative; isolation: isolate; overflow-x: clip;
  font-size: 1.0625rem;
}
/* Trama de lino sobre toda la página */
.tela::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--texto) 3.5%, transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--texto) 2.5%, transparent) 0 1px, transparent 1px 4px);
}
.tela section { position: relative; }
.tela section > .wrap, .tela > .wrap, .taller__fijo { position: relative; z-index: 3; }
.tela h2 { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); letter-spacing: -0.03em; }
.tela .entradilla { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); }

/* El hilo */
.hilo { display: none; }
.con-scroll .hilo { display: block; position: absolute; top: 0; left: 0; width: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.hilo__trazo { fill: none; stroke: var(--hilo); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 1.5px 0 color-mix(in srgb, var(--hilo) 35%, transparent)); }
.hilo__aguja { fill: #c3c6cb; stroke: #6b7077; stroke-width: 1; transition: opacity .2s; }
.hilo__ojo { fill: var(--papel); stroke: none; }

/* Piezas comunes del bastidor */
.bastidor__madera { fill: var(--madera); stroke: var(--madera-borde); stroke-width: 3; }
.bastidor__filo { fill: none; stroke: var(--madera-borde); stroke-width: 3; }
.bastidor__tornillo { fill: #b9b3b5; stroke: #6f6a6c; stroke-width: 3; }
.bastidor__trama { stroke: color-mix(in srgb, var(--texto) 7%, transparent); stroke-width: .6; fill: none; }
.acuarela--rosa { stop-color: var(--rosa); }
.acuarela--blanco { stop-color: var(--rosa-suave); }
.acuarela--menta { stop-color: var(--menta); }
.satin { fill: var(--hilo); }
.satin--turquesa { fill: var(--turquesa); }

/* Portada: pantalla completa, titular enorme sobre el bastidor */
.portada {
  min-height: 100svh;
  padding-block: 8rem 4rem;
  display: grid; align-items: center;
  background:
    radial-gradient(45% 55% at 80% 8%, color-mix(in srgb, var(--rosa) 90%, var(--hilo)), transparent 70%),
    radial-gradient(40% 40% at 10% 95%, color-mix(in srgb, var(--menta) 85%, var(--turquesa)), transparent 70%),
    linear-gradient(180deg, var(--rosa) 0%, var(--rosa-suave) 45%, var(--menta-suave) 75%, var(--menta) 100%);
}
.portada__rejilla { display: grid; gap: 1.75rem; }
.portada__titulo { position: relative; z-index: 2; font-size: clamp(3.9rem, 1.4rem + 9vw, 9.6rem); line-height: 1; max-width: 7ch; }
.portada__texto { position: relative; z-index: 2; display: grid; gap: 1.5rem; justify-items: start; max-width: 36rem; }
.portada__firma { font-size: var(--t-0); color: var(--gris); padding-top: 1.25rem; border-top: var(--puntada) color-mix(in srgb, var(--texto) 20%, transparent); }
.portada__bastidor { width: min(118%, 34rem); justify-self: end; margin-right: -22%; rotate: -8deg; filter: drop-shadow(0 22px 26px color-mix(in srgb, var(--madera-borde) 35%, transparent)); }
.portada__nota { display: none; }
@media (min-width: 54rem) {
  .portada__rejilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto auto auto; column-gap: 2rem; row-gap: 2rem; }
  .portada__titulo { grid-column: 1 / -1; grid-row: 1; max-width: 8ch; }
  .portada__texto { grid-column: 1; grid-row: 2; }
  .portada__bastidor { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 135%; max-width: none; margin-right: -38%; }
  .con-scroll .portada__nota {
    display: block; grid-column: 1; grid-row: 3;
    font: 400 clamp(1.8rem, 1rem + 1.6vw, 2.6rem)/1 var(--f-guion); color: var(--turquesa);
    rotate: -3deg; margin-top: .5rem;
  }
  .con-scroll .portada__nota::after { content: " ↓"; font-family: var(--f-texto); font-size: .6em; }
}

/* Taller: la sección se queda fija mientras el polo se cose en cuatro pasos */
.taller { background: linear-gradient(180deg, var(--menta) 0%, var(--menta-suave) 30%, var(--menta-suave) 70%, var(--rosa-suave) 100%); }
.taller__fijo { padding-block: clamp(3rem, 7vw, 5rem); }
.taller__rejilla { display: grid; gap: 2rem; align-items: center; }
.taller__bastidor { width: min(100%, 32rem); justify-self: center; filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--madera-borde) 30%, transparent)); }
.taller__texto { display: grid; gap: 1.75rem; }
.taller__texto h2 { max-width: 15ch; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
/* Números fijos (no con contador): en móvil solo se ve el paso activo */
.paso:nth-child(2)::before { content: "2"; }
.paso:nth-child(3)::before { content: "3"; }
.paso:nth-child(4)::before { content: "4"; }
.paso { display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 1rem; row-gap: .3rem; transition: opacity .35s ease; }
.paso::before {
  content: "1"; grid-row: 1 / 3;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  font: 800 var(--t-2)/1 var(--f-titulo); color: var(--hilo);
  border: var(--puntada) var(--hilo); background: var(--papel);
  transition: background .35s, color .35s;
}
.paso p { color: var(--gris); }
.taller__tiza { fill: none; stroke: var(--tiza); stroke-width: 1.6; stroke-dasharray: 1.5 4.5; stroke-linecap: round; stroke-linejoin: round; }
.taller__tela { fill: var(--tela); opacity: .9; }
.muestra { stroke: var(--tela); stroke-width: 3; }
.muestra--1 { fill: var(--rosa); }
.muestra--2 { fill: var(--tela); stroke: var(--texto); stroke-width: 2.5; }
.muestra--3 { fill: var(--turquesa); }
.taller__boceto { fill: none; stroke: var(--tiza); stroke-width: 1.4; stroke-dasharray: 3 3; }
.taller__medida { fill: none; stroke: var(--tiza); stroke-width: 1.4; }
.taller__nota { font: italic 500 12px var(--f-texto); fill: var(--gris); }
.taller__hilo { fill: none; stroke: var(--hilo); stroke-width: 3; stroke-dasharray: 7 4.5; stroke-linecap: round; stroke-linejoin: round; }
.taller__puntada { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.taller__boton { fill: var(--turquesa); }
.taller__bordado { stroke: var(--hilo); stroke-width: 1.2; stroke-linejoin: round; }
@media (min-width: 52rem) {
  .taller__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

.con-scroll .taller { height: 420vh; }
.con-scroll .taller__fijo { position: sticky; top: 0; min-height: 100svh; display: grid; align-items: center; padding-block: 2rem; }
.con-scroll .capa--1 { opacity: calc(.15 + var(--t1, 1)); }
.con-scroll .capa--2 { opacity: var(--t2, 1); }
.con-scroll .capa--3 { opacity: var(--t3, 1); }
.con-scroll .capa--4 { opacity: calc((var(--t4, 1) - .75) * 4); }
.con-scroll .muestra { transform-box: fill-box; transform-origin: center; scale: calc(.4 + .6 * var(--t2, 1)); }
.con-scroll .paso { opacity: .32; }
.con-scroll .paso[data-activo] { opacity: 1; }
.con-scroll .paso[data-activo]::before { background: var(--hilo); color: var(--boton-texto); border-style: solid; }
@media (max-width: 51.99rem) {
  .con-scroll .taller__fijo { padding-block: 1rem; }
  .con-scroll .taller__rejilla { gap: 1rem; }
  .con-scroll .taller__bastidor { width: auto; height: min(40svh, 22rem); }
  .con-scroll .taller__texto { gap: 1rem; }
  .con-scroll .taller__texto h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); }
  .con-scroll .paso:not([data-activo]) { display: none; }
}

/* Servicios: bastidores grandes que se tensan al entrar */
.servicios { padding-block: clamp(4rem, 10vw, 8rem) clamp(2rem, 6vw, 4rem); }
.servicios__titulo { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.servicios__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 7vw, 5rem); }
.servicio { position: relative; display: grid; gap: 1.5rem; align-items: center; }
.servicio__aro {
  position: relative; display: block; width: min(72vw, 19rem); aspect-ratio: 1;
  border-radius: 50%; border: 14px solid var(--madera);
  box-shadow: 0 0 0 3px var(--madera-borde), 0 22px 30px -18px color-mix(in srgb, var(--madera-borde) 70%, transparent);
}
.servicio__aro::before {
  content: ""; position: absolute; left: 50%; top: -30px; width: 42px; height: 20px; translate: -50% 0;
  background: var(--madera); border: 3px solid var(--madera-borde); border-radius: 6px;
}
.servicio__aro::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--madera-borde); }
.servicio__aro img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.servicio__texto { display: grid; gap: .75rem; }
.servicio h3 { font: 800 clamp(2rem, 1.3rem + 2.6vw, 3.4rem)/1.05 var(--f-titulo); letter-spacing: -0.03em; }
.servicio h3 a { text-decoration: none; }
.servicio h3 a::after { content: ""; position: absolute; inset: 0; }
.servicio:hover h3 a, .servicio h3 a:focus-visible { color: var(--hilo); }
.servicio p { color: var(--gris); max-width: 34ch; }
@media (min-width: 48rem) {
  .servicio { grid-template-columns: 19rem minmax(0, 1fr); gap: 3.5rem; }
  .servicio:nth-child(even) { grid-template-columns: minmax(0, 1fr) 19rem; }
  .servicio:nth-child(even) .servicio__aro { order: 2; }
  .servicio:nth-child(even) .servicio__texto { justify-items: end; text-align: right; }
}
.con-scroll .servicio__aro { rotate: calc((1 - var(--v, 1)) * -24deg); scale: calc(.78 + .22 * var(--v, 1)); }
.con-scroll .servicio__texto { opacity: calc(var(--v, 1) * 1.4 - .2); translate: 0 calc((1 - var(--v, 1)) * 2.5rem); }

/* Oficios: etiquetas de ropa cosidas */
.oficios { padding-block: clamp(3rem, 8vw, 6rem); }
.oficios__rejilla { display: grid; gap: 2.5rem; align-items: center; }
.oficios__texto { display: grid; gap: 1rem; }
.oficios__texto h2 { max-width: 12ch; }
@media (min-width: 52rem) { .oficios__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; } }
.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem .75rem; }
.etiquetas li { --r: -2deg; rotate: var(--r); }
.etiquetas li:nth-child(2n) { --r: 2.5deg; }
.etiquetas li:nth-child(3n) { --r: -.5deg; }
.etiquetas li:nth-child(1) { --i: 0; } .etiquetas li:nth-child(2) { --i: 1; } .etiquetas li:nth-child(3) { --i: 2; }
.etiquetas li:nth-child(4) { --i: 3; } .etiquetas li:nth-child(5) { --i: 4; } .etiquetas li:nth-child(6) { --i: 5; } .etiquetas li:nth-child(7) { --i: 6; } .etiquetas li:nth-child(8) { --i: 7; } .etiquetas li:nth-child(9) { --i: 8; }
.etiquetas a {
  position: relative; display: inline-block; padding: .85rem 1.6rem;
  background: var(--tela); color: var(--texto); text-decoration: none; font-weight: 700; font-size: 1.05rem;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--linea), 0 3px 0 color-mix(in srgb, var(--texto) 10%, transparent), 0 12px 18px -14px rgb(0 0 0 / .4);
}
.etiquetas a::before, .etiquetas a::after { content: ""; position: absolute; top: 5px; bottom: 5px; border-left: 2px dashed var(--hilo); }
.etiquetas a::before { left: 7px; }
.etiquetas a::after { right: 7px; }
.etiquetas li:nth-child(3n+2) a { background: var(--rosa); }
.etiquetas li:nth-child(3n) a { background: var(--menta); }
.etiquetas a:hover { color: var(--hilo); }
.con-scroll .etiquetas li {
  opacity: calc(var(--v, 1) * 2.4 - var(--i) * .2);
  translate: 0 calc((1 - min(1, var(--v, 1) * 1.6)) * -40px);
  rotate: calc(var(--r) + (1 - min(1, var(--v, 1) * 1.6)) * 14deg);
}

/* Reseñas: estrellas bordadas una a una */
.resenas { padding-block: clamp(3rem, 8vw, 6rem); background: var(--rosa-suave); }
.resenas__rejilla { display: grid; gap: 1.5rem 4rem; align-items: center; }
@media (min-width: 48rem) { .resenas__rejilla { grid-template-columns: auto minmax(0, 1fr); } }
.resenas__texto { display: grid; gap: 1rem; justify-items: start; }
.estrellas { width: min(100%, 22rem); height: auto; overflow: visible; }
.estrella__relleno { fill: url(#satin-estrella); }
.estrella__borde { fill: none; stroke: var(--hilo); stroke-width: 1.8; stroke-linejoin: round; }

/* Cierre: parche bordado con remate de satén; se «coloca» al llegar */
.tela .cierre { padding-block: clamp(3rem, 8vw, 6rem); }
.tela .parche {
  border: 12px solid transparent; border-radius: 36px;
  background:
    linear-gradient(170deg, var(--rosa), var(--papel) 50%, var(--menta)) padding-box,
    repeating-linear-gradient(60deg, var(--hilo) 0 3px, color-mix(in srgb, var(--hilo) 70%, #000) 3px 4.5px) border-box;
  outline: var(--puntada) var(--turquesa); outline-offset: -22px;
  box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--hilo) 70%, transparent);
}
.tela .parche h2 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem); }
.con-scroll .parche { rotate: calc((1 - var(--v, 1)) * -5deg); scale: calc(.9 + .1 * var(--v, 1)); }

/* ===== Páginas interiores con la misma tela =====
   Cabecera con la acuarela del logo, imagen en un bastidor, filas que se cosen al entrar,
   técnicas como muestras de tela y el mismo parche final. */
.tela .cabecera-pagina {
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(45% 60% at 85% 10%, color-mix(in srgb, var(--rosa) 90%, var(--hilo)), transparent 70%),
    linear-gradient(180deg, var(--rosa) 0%, var(--rosa-suave) 55%, var(--menta-suave) 85%, var(--papel) 100%);
}
.tela .cabecera-pagina h1 { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5rem); letter-spacing: -0.035em; max-width: 14ch; }
.tela .cabecera-pagina .entradilla { max-width: 40ch; }
@media (min-width: 52rem) { .tela .cabecera-pagina--imagen .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* Bastidor para las imágenes temporales (y, más adelante, para las fotos) */
.aro {
  position: relative; display: block; justify-self: center;
  width: min(78vw, 25rem); aspect-ratio: 1; margin-top: 30px;
  border-radius: 50%; border: 16px solid var(--madera);
  box-shadow: 0 0 0 3px var(--madera-borde), 0 26px 34px -20px color-mix(in srgb, var(--madera-borde) 75%, transparent);
  rotate: -6deg;
}
.aro::before {
  content: ""; position: absolute; left: 50%; top: -34px; width: 48px; height: 22px; translate: -50% 0;
  background: var(--madera); border: 3px solid var(--madera-borde); border-radius: 6px;
}
.aro::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--madera-borde); }
.aro img, .aro .imagen-temporal { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; border-radius: 50%; }
.con-scroll .aro { rotate: calc(-6deg + (1 - var(--v, 1)) * -20deg); scale: calc(.85 + .15 * var(--v, 1)); }

/* Secciones suaves */
.seccion--suave { background: linear-gradient(180deg, var(--menta-suave), var(--menta)); }
.seccion__cabecera { max-width: 46rem; }

/* Catálogo: cada fila se cose al entrar */
.tela .catalogo { border-top: 0; column-gap: 4rem; }
.tela .catalogo li { position: relative; border-bottom: 0; padding-block: 1.4rem; }
.tela .catalogo li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 2px dashed color-mix(in srgb, var(--hilo) 55%, transparent);
  transform-origin: left; scale: var(--v, 1) 1;
}
.tela .catalogo h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); }
.con-scroll .catalogo li > * { opacity: calc(var(--v, 1) * 1.6 - .3); translate: calc((1 - var(--v, 1)) * 1.5rem) 0; }

/* Técnicas: muestras de tela, una por técnica */
.tela .comparar { gap: 2.5rem; }
.tela .tecnica { border: 0; background: none; padding: 0; gap: .75rem; }
.tela .tecnica::before {
  content: ""; width: 6.5rem; aspect-ratio: 1; border-radius: 50%; margin: 6px 0 .5rem 6px;
  box-shadow: 0 0 0 2px var(--tela), 0 0 0 4px var(--hilo), 0 14px 20px -12px rgb(0 0 0 / .35);
  outline: 2px dashed var(--tela); outline-offset: -9px;
}
/* Bordado: satén en diagonal */
.tela .tecnica:nth-child(1)::before { background: repeating-linear-gradient(55deg, var(--hilo) 0 3px, color-mix(in srgb, var(--hilo) 70%, #fff) 3px 5px); }
/* Serigrafía: tinta plana sobre trama de algodón */
.tela .tecnica:nth-child(2)::before { background: radial-gradient(circle, var(--turquesa) 0 46%, transparent 47%), repeating-linear-gradient(0deg, color-mix(in srgb, var(--texto) 8%, var(--tela)) 0 1px, var(--tela) 1px 3px); }
/* Vinilo: lámina brillante */
.tela .tecnica:nth-child(3)::before { background: linear-gradient(135deg, #fff 0 8%, transparent 22%), var(--hilo); }
.con-scroll .tecnica { opacity: calc(var(--v, 1) * 1.5 - .2); translate: 0 calc((1 - var(--v, 1)) * 2rem); }
.con-scroll .tecnica::before { rotate: calc((1 - var(--v, 1)) * -90deg); }

.con-scroll .lista-puntada li { opacity: calc(var(--v, 1) * 1.6 - .3); translate: calc((1 - var(--v, 1)) * 1.5rem) 0; }

/* Sectores: título a un lado, recomendaciones al otro; la puntada de abajo se cose al entrar */
.etiquetas--nav { margin-top: .75rem; }
.etiquetas--nav a:nth-child(2n) { rotate: 2deg; }
.etiquetas--nav a:nth-child(3n) { rotate: -1.5deg; }
.etiquetas--nav a:nth-child(5n) { rotate: 1deg; }
.tela .sector { position: relative; border-bottom: 0; padding-block: clamp(2.5rem, 6vw, 4rem); }
.tela .sector::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 2px dashed color-mix(in srgb, var(--hilo) 55%, transparent);
  transform-origin: left; scale: var(--v, 1) 1;
}
.tela .sector h2 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem); }
@media (min-width: 52rem) {
  .tela .sector { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 4rem; align-items: start; }
  .tela .sector > h2 { grid-row: 1 / span 6; }
  .tela .sector > :not(h2) { grid-column: 2; }
}
.con-scroll .sector h2 { translate: calc((1 - var(--v, 1)) * -2rem) 0; opacity: calc(var(--v, 1) * 1.5 - .2); }

/* Contacto: la caja de WhatsApp es un parche */
.tela .whatsapp-caja {
  display: grid; gap: 1rem; justify-items: start;
  border: 12px solid transparent; border-radius: 32px;
  background:
    linear-gradient(170deg, var(--rosa), var(--papel) 50%, var(--menta)) padding-box,
    repeating-linear-gradient(60deg, var(--hilo) 0 3px, color-mix(in srgb, var(--hilo) 70%, #000) 3px 4.5px) border-box;
  outline: var(--puntada) var(--turquesa); outline-offset: -22px;
  padding: clamp(2rem, 5vw, 3rem);
}
.con-scroll .whatsapp-caja { rotate: calc((1 - var(--v, 1)) * -4deg); }
.tela .datos dl > div { padding-bottom: .9rem; border-bottom: 2px dashed color-mix(in srgb, var(--hilo) 35%, transparent); }

/* Páginas legales: texto tranquilo, sin animación */
.tela .texto-legal { max-width: 46rem; }

/* ===== Prueba tu bordado =====
   El bastidor a un lado y las opciones al otro; el texto se cose sobre el polo. */
.probador { padding-block: clamp(3.5rem, 8vw, 6rem); background: linear-gradient(180deg, var(--papel), var(--rosa-suave) 40%, var(--rosa-suave)); }
.probador[hidden] { display: none; }
.probador__rejilla { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .probador__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.probador__bastidor { width: min(100%, 30rem); justify-self: center; filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--madera-borde) 30%, transparent)); }
.probador__vista { margin: 0; display: grid; gap: .5rem; justify-items: center; }
.probador__lado { font: 400 1.6rem/1 var(--f-guion); color: var(--turquesa); }
.probador__tela { fill: var(--tela-prenda, #fff); stroke: #231f20; stroke-width: 3; stroke-linejoin: round; }
.probador__costura { fill: none; stroke: #231f20; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }
.probador__boton { fill: #231f20; opacity: .6; }
.probador[data-oscura="si"] .probador__costura, .probador[data-oscura="si"] .probador__boton { stroke: #fff; fill: none; opacity: .35; }
.probador[data-oscura="si"] .probador__boton { fill: #fff; }
.probador__texto { font-family: var(--f-guion); }
.probador__texto[data-letra="redonda"] { font-family: var(--f-titulo); font-weight: 800; letter-spacing: .02em; }
.probador__texto[data-tecnica="bordado"] { stroke: rgb(0 0 0 / .18); stroke-width: .5; }
.probador__texto[data-tecnica="serigrafia"] { fill-opacity: .94; }
.probador__texto[data-tecnica="vinilo"] { stroke: rgb(255 255 255 / .45); stroke-width: .6; paint-order: stroke; }
/* Cada técnica se aplica a su manera: el bordado se cose, la serigrafía se pasa con rasqueta, el vinilo se plancha */
.probador__texto.aplicando[data-tecnica="bordado"] { animation: coser-texto 1.1s ease-out; }
.probador__texto.aplicando[data-tecnica="serigrafia"] { animation: rasqueta .8s cubic-bezier(.5, 0, .3, 1); }
.probador__texto.aplicando[data-tecnica="vinilo"] { animation: planchar .7s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes coser-texto {
  from { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 3 2; stroke-dashoffset: 120; fill-opacity: 0; }
  60% { fill-opacity: .3; }
  to { stroke-dashoffset: 0; fill-opacity: 1; }
}
@keyframes rasqueta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes planchar { from { opacity: 0; scale: 1.12; } 60% { opacity: 1; } to { scale: 1; } }
.probador__opciones label[hidden] { display: none; }
.probador__panel { display: grid; gap: 1.25rem; justify-items: start; }
.probador__campo { display: grid; gap: .4rem; width: 100%; max-width: 26rem; font-weight: 700; }
.probador__campo input {
  font: 500 1.25rem/1.3 var(--f-texto); color: var(--texto); background: var(--tela);
  padding: .8rem 1rem; border: 2px dashed var(--hilo); border-radius: 12px; width: 100%;
}
.probador__campo input:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; border-style: solid; }
.probador__opciones { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.probador__opciones legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.probador__opciones label { position: relative; cursor: pointer; }
.probador__opciones input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.probador__opciones span {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .9rem;
  border: 2px solid var(--linea); border-radius: 999px; background: var(--tela); font-weight: 600; font-size: var(--t-0);
}
.probador__opciones input:checked + span { border-color: var(--hilo); box-shadow: 0 0 0 2px var(--hilo); }
.probador__opciones input:focus-visible + span { outline: 3px solid var(--hilo); outline-offset: 3px; }
.muestra-color::before { content: ""; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.letra--manuscrita { font: 400 1.5rem/1 var(--f-guion) !important; }
.letra--redonda { font-weight: 800 !important; }
@media (prefers-reduced-motion: reduce) { .probador__texto.aplicando { animation: none; } }

/* ===== Tendedero: prendas que personalizamos =====
   Una cuerda (el mismo hilo magenta) con las prendas colgadas de pinzas; se balancean al entrar. */
.oculto { position: absolute; width: 0; height: 0; overflow: hidden; }
.tendedero { padding-block: clamp(3rem, 8vw, 5.5rem); }
.tendedero h2 { max-width: 16ch; }
.tendedero__intro { margin-top: .75rem; color: var(--gris); }
.tendedero__cuerda {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); row-gap: 2.5rem;
}
.tendedero__cuerda li { position: relative; padding-top: 14px; }
/* Cada prenda lleva su trozo de cuerda: en cada fila se ve una cuerda seguida */
.tendedero__cuerda li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px;
  background: var(--hilo); border-radius: 2px;
}
.tendedero__cuerda a {
  display: grid; justify-items: center; gap: .5rem; text-decoration: none; color: var(--texto); font-weight: 700;
  transform-origin: 50% 0; rotate: var(--r, 0deg); transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1);
}
.tendedero__cuerda li:nth-child(odd) a { --r: -2.5deg; }
.tendedero__cuerda li:nth-child(3n) a { --r: 3deg; }
.tendedero__cuerda a:hover, .tendedero__cuerda a:focus-visible { --r: 0deg; color: var(--hilo); }
.tendedero__pinza {
  position: relative; z-index: 1; width: 10px; height: 26px; margin-top: -20px; margin-bottom: -10px;
  background: var(--madera); border: 2px solid var(--madera-borde); border-radius: 3px;
}
.tendedero__cuerda svg { width: min(100%, 6.5rem); height: auto; overflow: visible; filter: drop-shadow(0 8px 8px rgb(0 0 0 / .12)); }
.tendedero__cuerda path, .tendedero__cuerda rect { stroke: #231f20; stroke-width: 2.4; stroke-linejoin: round; }
.t-blanco { fill: #fff; }
.t-rosa { fill: var(--rosa); }
.t-menta { fill: var(--menta); }
.t-turquesa { fill: var(--turquesa); }
.t-negra { fill: #2b2729; }
.t-vichy { fill: url(#vichy); }
.t-raya { fill: color-mix(in srgb, var(--menta) 70%, #000); }
.t-linea { fill: none; }
.tendedero__cuerda .t-linea--clara { stroke: #fff; stroke-opacity: .6; }
.t-boton { fill: #231f20; }
.t-boton--claro { fill: #fff; }
.con-scroll .tendedero__cuerda a { rotate: calc(var(--r, 0deg) + (1 - var(--v, 1)) * 28deg); }
.con-scroll .tendedero__cuerda li:nth-child(even) a { rotate: calc(var(--r, 0deg) - (1 - var(--v, 1)) * 28deg); }

/* ===== De temporada: una etiqueta colgante junto al bastidor de la portada ===== */
.temporada[hidden], .temporada__tarjeta[hidden] { display: none; }
.temporada { position: relative; z-index: 3; justify-self: start; max-width: 21rem; padding-top: 34px; }
.temporada::before { content: ""; position: absolute; left: 50%; top: 0; height: 40px; border-left: 2px solid var(--hilo); }
.temporada__tarjeta {
  position: relative; display: grid; gap: .6rem; justify-items: start;
  padding: 2.4rem 1.6rem 1.6rem;
  background: var(--tela); color: var(--texto);
  clip-path: polygon(50% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  rotate: 3deg; transform-origin: 50% 0;
  filter: drop-shadow(0 14px 18px rgb(0 0 0 / .18));
}
.temporada__tarjeta::before {
  content: ""; position: absolute; left: 50%; top: 18px; width: 14px; height: 14px; translate: -50% 0;
  border-radius: 50%; background: var(--rosa); box-shadow: inset 0 0 0 3px var(--madera);
}
.temporada__tarjeta::after { content: ""; position: absolute; inset: 8px; border: 2px dashed color-mix(in srgb, var(--hilo) 60%, transparent); clip-path: inherit; pointer-events: none; }
.temporada__tarjeta h2 { font: 400 clamp(2.2rem, 1.6rem + 1.6vw, 2.8rem)/1 var(--f-guion); letter-spacing: 0; color: var(--hilo); }
.temporada__tarjeta p { font-size: var(--t-0); color: var(--gris); }
/* En móvil va entre el texto y el bastidor; en escritorio cuelga delante del bastidor */
.temporada { order: 1; }
.portada__bastidor { order: 2; }
@media (min-width: 54rem) {
  .temporada { position: absolute; top: -1.5rem; left: 61%; width: 16rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .temporada__tarjeta { animation: balanceo 3.2s ease-in-out 1s 2 alternate; }
}
@keyframes balanceo { from { rotate: 3deg; } to { rotate: -2deg; } }

/* Fotos reales: galería de trabajos (2-nov) */
.trabajo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
/* En la tela, cada trabajo es una foto clavada con cinta, como las del taller */
.tela .trabajo { position: relative; padding: 10px 10px 12px; background: #fff; color: #231f20; rotate: var(--giro, -1.5deg); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 16px 26px -18px rgb(0 0 0 / .45); }
.tela .trabajo:nth-child(3n+2) { --giro: 1.5deg; }
.tela .trabajo:nth-child(3n) { --giro: -.5deg; }
.tela .trabajo::before { content: ""; position: absolute; top: -11px; left: 50%; width: 80px; height: 22px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--rosa) 75%, transparent); background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .35) 0 4px, transparent 4px 9px); }
.tela .trabajo:nth-child(2n)::before { background-color: color-mix(in srgb, var(--menta) 85%, transparent); rotate: 4deg; }
.tela .trabajo figcaption { color: #5b5357; padding-inline: .2rem; }
.tela .trabajo figcaption b { color: #231f20; }
.con-scroll .tela .trabajo { rotate: calc(var(--giro, -1.5deg) + (1 - var(--v, 1)) * 8deg); translate: 0 calc((1 - var(--v, 1)) * 2.5rem); opacity: calc(var(--v, 1) * 2); }

/* Fotos del taller: polaroids sujetas con cinta, con el pie escrito a mano */
.taller-fotos { padding-block: clamp(3.5rem, 8vw, 6rem); }
.taller-fotos h2 { max-width: 16ch; }
.taller-fotos__intro { margin-top: .9rem; max-width: 48ch; color: var(--gris); }
.polaroids { display: grid; gap: 2.5rem 2rem; margin-top: 2.5rem; justify-items: center; }
@media (min-width: 44rem) { .polaroids { grid-template-columns: repeat(3, minmax(0, 1fr)); } .polaroid:nth-child(2) { margin-top: 2.5rem; } }
.polaroid {
  position: relative; margin: 0; width: min(80vw, 22rem); padding: 12px 12px 0;
  background: #fff; rotate: var(--giro, -2deg);
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 18px 30px -18px rgb(0 0 0 / .45);
}
.polaroid::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; translate: -50% 0; rotate: -4deg;
  background: color-mix(in srgb, var(--rosa) 75%, transparent);
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .35) 0 4px, transparent 4px 9px);
}
.polaroid:nth-child(2n)::before { background-color: color-mix(in srgb, var(--menta) 85%, transparent); rotate: 3deg; }
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.polaroid figcaption { padding: .5rem .25rem .7rem; text-align: center; font: 400 1.75rem/1.1 var(--f-guion); color: var(--texto); }
.con-scroll .polaroid { rotate: calc(var(--giro, -2deg) + (1 - var(--v, 1)) * 10deg); translate: 0 calc((1 - var(--v, 1)) * 3rem); opacity: calc(var(--v, 1) * 2); }
.polaroid--contacto { width: min(70vw, 18rem); margin: .5rem 0 1.5rem; justify-self: center; --giro: 2.5deg; }

/* Fotos dentro de los sectores y junto a los títulos */
.aro--sector { width: min(64vw, 16rem); border-width: 12px; margin-top: 1.5rem; }
.sector__titulo { display: grid; justify-items: start; }
@media (min-width: 52rem) { .tela .sector > .sector__titulo { grid-column: 1; grid-row: 1 / span 6; } }
.aro--peque { width: min(52vw, 13rem); border-width: 11px; }
.titulo-con-foto { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 44rem) { .titulo-con-foto { grid-template-columns: 1fr auto; } .titulo-con-foto .aro { rotate: 5deg; } }
.tela .galeria { gap: 2.25rem 1.75rem; margin-top: 1.5rem; }