/* SabineWeb — "Hilo" design system
   Concept: the web as weave. Cords, knots, a single amber thread. */

:root {
  /* Brand colours (carried over from sabineweb.com) */
  --verde: #22c55e;
  --verde-tinta: #15803d;      /* text-safe green on light */
  --menta: #e9fbf0;
  --pizarra: #1e293b;
  --pizarra-hondo: #131c2c;
  --niebla: #67768e;
  --lavanda: #f9f6fe;
  --hielo: #f2f5f7;
  --ambar: #ffcd57;
  --blanco: #ffffff;
  --negro: #000000;

  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, Consolas, monospace;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1240px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--pizarra);
  background: var(--lavanda);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.04; margin: 0; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--ambar); color: var(--pizarra); }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ambar); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.etiqueta {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--niebla);
}
.etiqueta::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--verde); flex: none; }
.oscuro .etiqueta { color: #9fb0c8; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--verde); --fg: var(--pizarra-hondo);
  display: inline-flex; align-items: center; gap: .7rem;
  font: 600 1rem/1 var(--f-display);
  padding: 1.05rem 1.5rem;
  border-radius: 999px;
  background: var(--bg); color: var(--fg);
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .2s;
  box-shadow: 0 0 0 0 transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 0 -4px rgba(0,0,0,.18); }
.btn:active { transform: translateY(0); }
.btn .nudo { width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; transition: transform .4s var(--ease); }
.btn:hover .nudo { transform: translateX(.35rem) scale(1.25); }
.btn--hielo { --bg: var(--hielo); --fg: var(--pizarra); }
.btn--linea { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--linea:hover { box-shadow: inset 0 0 0 1.5px currentColor; background: rgba(255,255,255,.08); }
.btn--ambar { --bg: var(--ambar); --fg: var(--pizarra-hondo); }

/* ---------- Header ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--lavanda) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.cabecera.es-scroll { border-color: rgba(30,41,59,.12); }
.cabecera .wrap { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; gap: 1.5rem; }
.marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font: 700 1.35rem/1 var(--f-display); letter-spacing: -.03em; }
.marca img { width: 2.4rem; height: 2.4rem; }
.marca b { color: var(--verde-tinta); font-weight: 700; }
.menu { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; padding-block: .3rem; }
.menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 3px; border-radius: 3px; background: var(--ambar); transition: right .4s var(--ease); }
.menu a:hover::after, .menu a[aria-current="true"]::after { right: 0; }
.cabecera .btn { padding: .8rem 1.2rem; font-size: .92rem; }
.burger { display: none; background: none; border: 0; width: 2.75rem; height: 2.75rem; cursor: pointer; color: inherit; }
.burger span { display: block; width: 1.5rem; height: 2.5px; background: currentColor; margin: 5px auto; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { background: var(--pizarra); color: var(--hielo); position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2rem; align-items: stretch; min-height: min(46rem, calc(100svh - 4.5rem)); padding-block: clamp(3rem, 7vw, 6rem) 0; }
.hero__texto { align-self: center; padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 6.4rem); font-weight: 800; margin-block: 1.4rem 1.6rem; }
.hero h1 em { font-style: normal; color: var(--verde); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; background: var(--ambar); border-radius: 9px; transform-origin: left; animation: trazo 1.1s .5s var(--ease) both; }
@keyframes trazo { from { transform: scaleX(0); } }
.hero__sub { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #c3cfe0; max-width: 33rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero__datos { display: flex; gap: 2.2rem; margin-top: 3rem; font-family: var(--f-mono); font-size: .8rem; color: #9fb0c8; text-transform: uppercase; letter-spacing: .06em; flex-wrap: wrap; }
.hero__datos strong { display: block; font: 700 1.9rem/1 var(--f-display); color: var(--blanco); letter-spacing: -.02em; text-transform: none; margin-bottom: .3rem; }

.telar { position: relative; min-height: 26rem; }
.telar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.telar__barra { stroke: var(--hielo); stroke-width: 6; stroke-linecap: round; }
.hebra { fill: none; stroke: #5b6b86; stroke-width: 3; stroke-linecap: round; }
.nudo-svg { fill: var(--verde); transition: fill .25s; cursor: pointer; }
.nudo-svg.es-ambar { fill: var(--ambar); }
.nudo-svg:hover, .nudo-svg.activo { fill: var(--blanco); }
.telar__rotulo { font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; fill: #c3cfe0; text-transform: uppercase; pointer-events: none; }
.telar__aviso { position: absolute; left: 0; bottom: 1.2rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #7e8fa8; }
.telar__detalle { position: absolute; right: 0; bottom: 1rem; max-width: 17rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--hielo); color: var(--pizarra); font-size: .92rem; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; }
.telar__detalle.visible { opacity: 1; transform: none; }
.telar__detalle b { display: block; font: 700 1rem var(--f-display); margin-bottom: .2rem; }

/* ---------- Section scaffolding ---------- */
.seccion { padding-block: clamp(4.5rem, 10vw, 8.5rem); position: relative; }
.seccion--menta { background: var(--menta); }
.seccion--hielo { background: var(--hielo); }
.oscuro { background: var(--pizarra); color: var(--hielo); }
.titulo { font-size: clamp(2.2rem, 5vw, 4.1rem); margin-top: 1rem; }
.titulo em { font-style: normal; color: var(--verde-tinta); }
.oscuro .titulo em { color: var(--verde); }

/* ---------- Why SWS : hanging strands ---------- */
.porque__cab { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.porque__cab p { color: #3d4b62; max-width: 30rem; font-size: 1.15rem; }
.pilares { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 6px solid var(--pizarra); position: relative; }
.pilar { position: relative; padding: 0 clamp(1rem, 2.2vw, 2rem) 2rem; }
.pilar::before { content: ""; position: absolute; left: clamp(1rem, 2.2vw, 2rem); top: 0; width: 3px; height: var(--h, 4rem); background: var(--pizarra); transform-origin: top; transform: scaleY(0); transition: transform 1s var(--ease); }
.pilar.entra::before { transform: scaleY(1); }
.pilar:nth-child(1) { --h: 4rem; }
.pilar:nth-child(2) { --h: 7rem; }
.pilar:nth-child(3) { --h: 5.5rem; }
.pilar__nudo { position: absolute; left: calc(clamp(1rem, 2.2vw, 2rem) - 10px); top: var(--h); width: 23px; height: 23px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 5px var(--menta); transform: scale(0); transition: transform .5s .7s var(--ease); }
.pilar:nth-child(2) .pilar__nudo { background: var(--ambar); }
.pilar.entra .pilar__nudo { transform: scale(1); }
.pilar__cuerpo { padding-top: calc(var(--h) + 2.2rem); }
.pilar h3 { font-size: 1.75rem; margin-bottom: .8rem; }
.pilar p { color: #3d4b62; }
.pilar .num { font-family: var(--f-mono); font-size: .78rem; color: var(--niebla); letter-spacing: .08em; display: block; margin-bottom: .5rem; }

/* ---------- Method / timeline ---------- */
.metodo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); }
.metodo__lado { position: sticky; top: 7rem; align-self: start; }
.gigante { font: 800 clamp(7rem, 17vw, 15rem)/.8 var(--f-display); letter-spacing: -.06em; color: var(--verde); margin-block: 1.6rem .8rem; display: flex; align-items: baseline; }
.gigante small { font: 500 clamp(1.2rem, 2vw, 1.8rem)/1 var(--f-mono); letter-spacing: 0; color: var(--ambar); margin-left: .6rem; }
.metodo__lado p { color: #c3cfe0; max-width: 24rem; }
.pasos { list-style: none; margin: 0; padding: 0 0 0 3.2rem; position: relative; }
.pasos::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; background: #3a4a64; border-radius: 3px; }
.pasos__hilo { position: absolute; left: 11px; top: 8px; width: 3px; background: var(--ambar); border-radius: 3px; height: 0; }
.paso { position: relative; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.paso:last-child { padding-bottom: 0; }
.paso::before { content: ""; position: absolute; left: -3.2rem; top: .25rem; width: 25px; height: 25px; border-radius: 50%; background: var(--pizarra); border: 3px solid #3a4a64; transition: background .4s, border-color .4s, transform .5s var(--ease); }
.paso.hecho::before { background: var(--verde); border-color: var(--verde); transform: scale(1.15); }
.paso__cuando { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); }
.paso h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-block: .4rem .6rem; }
.paso p { color: #c3cfe0; max-width: 32rem; }
.aviso { margin-top: 3rem; font-size: .85rem; color: #7e8fa8; font-family: var(--f-mono); letter-spacing: .02em; }

/* ---------- Plans ---------- */
.planes__cab { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.planes__cab p { max-width: 26rem; color: #3d4b62; }
.planes { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 1.2rem; align-items: end; }
.plan { background: var(--blanco); border-radius: 22px; padding: clamp(1.6rem, 2.6vw, 2.4rem); display: flex; flex-direction: column; gap: 1.4rem; position: relative; box-shadow: 0 1px 0 rgba(30,41,59,.08), 0 0 0 1px rgba(30,41,59,.08); transition: transform .5s var(--ease); }
.plan:hover { transform: translateY(-6px); }
.plan__nombre { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--niebla); display: flex; justify-content: space-between; align-items: center; }
.plan__precio { font: 800 clamp(2.8rem, 4.6vw, 4.2rem)/1 var(--f-display); letter-spacing: -.045em; }
.plan__precio small { font: 500 .9rem var(--f-mono); letter-spacing: 0; color: var(--niebla); display: block; margin-top: .6rem; }
.plan__precio .desde { font: 500 1rem var(--f-mono); letter-spacing: 0; color: var(--niebla); margin-right: .3rem; }
.plan p.resumen { color: #3d4b62; }
.plan ul { list-style: none; margin: 0; padding: 1.2rem 0 0; border-top: 1.5px dashed rgba(30,41,59,.25); display: grid; gap: .65rem; font-size: .98rem; }
.plan li { display: grid; grid-template-columns: .8rem 1fr; gap: .75rem; align-items: start; }
.plan li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--verde); margin-top: .5em; }
.plan li.base { color: var(--niebla); }
.plan li.base::before { background: var(--niebla); }
.plan .btn { justify-content: space-between; margin-top: .4rem; }
.plan--pro { background: var(--pizarra); color: var(--hielo); padding-block: clamp(2.2rem, 3.4vw, 3.2rem); box-shadow: 0 30px 0 -18px var(--ambar); }
.plan--pro .plan__nombre, .plan--pro .plan__precio small, .plan--pro .plan__precio .desde { color: #9fb0c8; }
.plan--pro p.resumen { color: #c3cfe0; }
.plan--pro ul { border-color: rgba(255,255,255,.25); }
.plan--pro li.base { color: #9fb0c8; }
.sello { background: var(--ambar); color: var(--pizarra-hondo); padding: .3rem .7rem; border-radius: 999px; font-size: .7rem; letter-spacing: .08em; }
.planes__pie { margin-top: 2.6rem; display: flex; gap: 1rem 2rem; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 1.6rem; border-top: 1.5px solid rgba(30,41,59,.15); }
.planes__pie p { max-width: 38rem; }

/* ---------- Work ---------- */
.trabajos { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid #3a4a64; }
.trabajo { display: grid; grid-template-columns: 4rem minmax(0, 1.2fr) minmax(0, 1fr) 3rem; gap: 1.5rem; align-items: center; padding-block: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid #3a4a64; position: relative; cursor: default; transition: padding .5s var(--ease), background .3s; }
.trabajo:hover { padding-inline: 1.2rem; background: rgba(255,255,255,.04); }
.trabajo__n { font-family: var(--f-mono); color: var(--ambar); font-size: .85rem; }
.trabajo h3 { font-size: clamp(1.6rem, 3.4vw, 3rem); }
.trabajo p { color: #c3cfe0; font-size: 1rem; }
.trabajo__flecha { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid #5b6b86; display: grid; place-items: center; transition: background .3s, border-color .3s, transform .5s var(--ease); }
.trabajo:hover .trabajo__flecha { background: var(--verde); border-color: var(--verde); transform: rotate(-45deg); color: var(--pizarra-hondo); }

/* ---------- Contact ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contacto__txt p { margin-top: 1.4rem; max-width: 26rem; color: #3d4b62; font-size: 1.15rem; }
.contacto__via { margin-top: 2.4rem; display: grid; gap: .8rem; font-family: var(--f-mono); font-size: .9rem; }
.contacto__via a { text-decoration: none; display: inline-flex; gap: .7rem; align-items: center; }
.contacto__via a:hover { text-decoration: underline; text-decoration-color: var(--ambar); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.form { background: var(--blanco); border-radius: 22px; padding: clamp(1.5rem, 3vw, 2.6rem); box-shadow: 0 0 0 1px rgba(30,41,59,.1); display: grid; gap: 1.3rem; }
.campo { display: grid; gap: .45rem; }
.campo label { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--niebla); }
.campo input, .campo select, .campo textarea { font: inherit; color: var(--pizarra); background: var(--lavanda); border: 0; border-bottom: 2.5px solid var(--pizarra); border-radius: 8px 8px 0 0; padding: .85rem 1rem; width: 100%; transition: background .2s, border-color .2s; }
.campo textarea { resize: vertical; min-height: 6rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; background: var(--menta); border-color: var(--verde); }
.campo .err { color: #b42318; font-size: .85rem; min-height: 1em; }
.campo [aria-invalid="true"] { border-color: #b42318; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.form__nota { font-size: .85rem; color: var(--niebla); }

/* ---------- Footer ---------- */
.pie { background: var(--pizarra-hondo); color: #9fb0c8; padding-block: 3.5rem 2rem; font-size: .95rem; overflow: hidden; }
.pie__grande { font: 800 clamp(3.6rem, 15vw, 13rem)/.85 var(--f-display); letter-spacing: -.06em; color: var(--pizarra); white-space: nowrap; margin-bottom: 2.4rem; user-select: none; }
.pie__grande b { color: #1d3a2e; }
.pie__fila { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; align-items: center; }
.pie a { color: var(--hielo); text-underline-offset: 4px; }

.wsp { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; width: 3.7rem; height: 3.7rem; border-radius: 50%; background: var(--verde); color: var(--pizarra-hondo); display: grid; place-items: center; box-shadow: 0 8px 0 -3px rgba(0,0,0,.25); transition: transform .4s var(--ease); }
.wsp:hover { transform: scale(1.08) rotate(-6deg); }
.wsp svg { width: 1.9rem; height: 1.9rem; }

/* ---------- Reveal ---------- */
.js .rev { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rev.entra { opacity: 1; transform: none; }

/* ---------- Brand manual ---------- */
.manual-hero { background: var(--pizarra); color: var(--hielo); padding-block: clamp(4rem, 9vw, 8rem); }
.manual-hero h1 { font-size: clamp(3rem, 9vw, 8rem); font-weight: 800; margin-top: 1.2rem; }
.manual-hero h1 em { font-style: normal; color: var(--verde); }
.manual-hero p { margin-top: 1.6rem; max-width: 36rem; color: #c3cfe0; font-size: 1.2rem; }
.m-sec { padding-block: clamp(3.5rem, 8vw, 6.5rem); border-bottom: 1px solid rgba(30,41,59,.12); }
.m-sec:last-of-type { border: 0; }
.m-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 5vw, 5rem); }
.m-grid > div:first-child { position: sticky; top: 6rem; align-self: start; }
.m-grid h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-block: .8rem 1rem; }
.m-grid p + p { margin-top: 1rem; }
.m-grid p { color: #3d4b62; }
.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.color { border-radius: 16px; overflow: hidden; background: var(--blanco); box-shadow: 0 0 0 1px rgba(30,41,59,.12); }
.color__m { height: 7.5rem; background: var(--c); }
.color__i { padding: .9rem 1rem 1.1rem; font-family: var(--f-mono); font-size: .78rem; line-height: 1.6; color: var(--niebla); }
.color__i b { display: block; font: 700 1.05rem var(--f-display); color: var(--pizarra); }
.color--grande { grid-column: span 2; }
.prop { display: flex; height: 3.4rem; border-radius: 999px; overflow: hidden; margin-top: 1.6rem; box-shadow: 0 0 0 1px rgba(30,41,59,.12); }
.prop span { display: grid; place-items: center; font: 500 .75rem var(--f-mono); }
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.4rem; }
.logo-caja { border-radius: 18px; padding: 2.6rem 1.5rem; display: grid; place-items: center; gap: 1rem; font-family: var(--f-mono); font-size: .75rem; box-shadow: 0 0 0 1px rgba(30,41,59,.12); }
.logo-caja .marca { font-size: 2rem; }
.logo-caja .marca img { width: 3.4rem; height: 3.4rem; }
.logo-caja--osc { background: var(--pizarra); color: var(--hielo); } .logo-caja--osc .marca b { color: var(--verde); }
.logo-caja--verde { background: var(--verde); color: var(--pizarra-hondo); } .logo-caja--verde .marca b { color: var(--pizarra); }
.logo-caja--claro { background: var(--blanco); }
.logo-caja--menta { background: var(--menta); }
.tipo { margin-top: 1.4rem; display: grid; gap: 1rem; }
.tipo__fila { padding: 1.6rem; border-radius: 18px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(30,41,59,.12); }
.tipo__fila small { font-family: var(--f-mono); color: var(--niebla); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: .6rem; }
.t-d { font: 800 clamp(2.6rem, 6vw, 4.8rem)/1 var(--f-display); letter-spacing: -.04em; }
.t-h { font: 700 2rem/1.1 var(--f-display); letter-spacing: -.025em; }
.t-b { font-size: 1.0625rem; max-width: 36rem; }
.t-m { font: 500 .85rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.reglas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.regla { padding: 1.4rem; border-radius: 18px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(30,41,59,.12); }
.regla h4 { font-size: 1.1rem; margin-bottom: .5rem; display: flex; gap: .6rem; align-items: center; letter-spacing: -.01em; }
.regla h4::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: var(--verde); }
.regla--no h4::before { background: #d92d20; }
.regla p { font-size: .96rem; color: #3d4b62; }
.voz { margin-top: 1.4rem; display: grid; gap: .8rem; }
.voz div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.voz span { padding: 1.1rem 1.3rem; border-radius: 14px; font-size: 1rem; }
.voz .si { background: var(--menta); } .voz .no { background: var(--hielo); color: var(--niebla); text-decoration: line-through; text-decoration-color: rgba(103,118,142,.5); }
.nudos-demo { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.4rem; }
.nudos-demo figure { margin: 0; width: 8rem; font: 500 .75rem var(--f-mono); color: var(--niebla); }
.nudos-demo svg { width: 100%; background: var(--pizarra); border-radius: 16px; margin-bottom: .6rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; }
  .telar { min-height: 22rem; order: 2; }
  .porque__cab, .metodo, .contacto, .m-grid { grid-template-columns: 1fr; }
  .metodo__lado, .m-grid > div:first-child { position: static; }
  .pilares { grid-template-columns: 1fr; border-top: 0; }
  .pilar { border-left: 6px solid var(--pizarra); padding: 0 0 2.5rem 2.2rem; margin-left: 0; }
  .pilar::before, .pilar__nudo { display: none; }
  .pilar__cuerpo { padding-top: 0; }
  .planes { grid-template-columns: 1fr; align-items: stretch; }
  .plan--pro { box-shadow: none; }
  .trabajo { grid-template-columns: 2.4rem 1fr 2.6rem; }
  .trabajo p { grid-column: 2; grid-row: 2; }
  .trabajo__flecha { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  .burger { display: block; }
  .cabecera .btn { display: none; }
  .menu { position: fixed; inset: 4.5rem 0 auto 0; background: var(--pizarra); color: var(--hielo); flex-direction: column; gap: 0; padding: 1rem var(--gutter) 2rem; transform: translateY(-110%); transition: transform .5s var(--ease); z-index: -1; }
  .menu.abierto { transform: none; }
  .menu a { display: block; font: 700 1.8rem var(--f-display); padding-block: .9rem; border-bottom: 1px solid #3a4a64; }
  .fila, .reglas, .voz div, .logos { grid-template-columns: 1fr; }
  .color--grande { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .rev { opacity: 1; transform: none; }
}