/* losangelesorg.org v2 — calma tipo Salt & Stone. Tokens: ver design-system.md (tabla JSON al final). */
:root{
  /* Paleta de prueba de Andrea (2026-11-12): blanco hueso #EFEBE1, negro #090909, azul niebla #ADB9C4.
     ("Muted Monarch" con crema y marrón le pareció muy beige.)
     Antes: page #fbfaf7, beige #efebe4, sand #e6e0d5, ink #1e1c19, ink-2 #65605a, line #dcd6cb, maya #9e2b3a, leaf #5f7d4f */
  /* prueba 2026-11-12: el hueso #efebe1 le pareció muy beige; ahora casi blanco */
  --page:#f8f8f6;      /* casi blanco */
  --beige:#efefeb;     /* un paso más hondo: fondo detrás de cada producto */
  --sand:#e5e5e0;      /* más hondo: tarjetas sin foto */
  --ink:#090909;       /* negro de la paleta: texto */
  --ink-2:#5a5852;     /* texto secundario (≥ 4.5:1 sobre page y beige) */
  --line:#dcdcd6;      /* separadores finos */
  --maya:#4f6070;      /* azul niebla más hondo, para que se lea: acento, solo corazón, tu número, errores */
  --leaf:#adb9c4;      /* azul niebla de la paleta */
  --earth:#c4a988;     /* tierra cálida del globo A (Andrea pidió tono tierra) */
  --white:#fff;
  /* Letras de marca (Andrea, 2026-11-12): Unbounded en todos los títulos, DM Sans en el texto.
     Títulos todo en minúscula, como el logo (pedido de Andrea): text-transform:lowercase y letter-spacing:var(--display-ls) en cada regla con var(--display).
     Antes: títulos The Seasons y texto Montserrat, como Mar de Conciencia. */
  --display:"Unbounded","Helvetica Neue",Arial,sans-serif;   /* títulos: Unbounded, la letra de marca (Andrea la encontró, 2026-11-12). Gratis (licencia OFL) */
  --display-w:800;   /* grosor de los títulos: Extra Bold */
  --display-ls:-.04em;   /* letras de los títulos más pegadas (pedido de Andrea) */
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;   /* texto */
  --ui:"Jost","Futura","Helvetica Neue",Arial,sans-serif;   /* botones, etiquetas y números (el reemplazo de Futura PT de Mar de Conciencia) */
  --gut:2rem;          /* margen lateral */
  --gap:1.25rem;
  --r:4px;
  --ease:cubic-bezier(.22,.61,.24,1);
}
html{font-size:clamp(14px,calc(100vw/90),26px);-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--page)}
@media (max-width:1180px){html{font-size:14px}}
@media (max-width:760px){html{font-size:15px}:root{--gut:16px;--gap:12px}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0 0 .8em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--white);padding:.6rem 1rem;z-index:99}
.skip:focus{left:var(--gut)}
[hidden]{display:none!important}

/* ---------- tipografía ---------- */
.display{font-family:var(--display);font-weight:var(--display-w);font-size:3.4rem;line-height:1.02;font-variant-numeric:lining-nums;letter-spacing:var(--display-ls);text-transform:lowercase}
.display.xl{font-size:5.2rem;line-height:.98}
.display-s{font-family:var(--display);font-weight:var(--display-w);font-size:2.3rem;line-height:1.05;letter-spacing:var(--display-ls);text-transform:lowercase}
.cap{font:500 .82rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.eyebrow{font:500 .75rem/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1rem}
.lede{font-size:1.1rem;color:var(--ink-2);max-width:26rem}
.small{font-size:.82rem;line-height:1.6;color:var(--ink-2)}
@media (max-width:760px){.display{font-size:2.5rem;overflow-wrap:anywhere}.display.xl,.mother-tx .display.xl{font-size:2.6rem}.display-s{font-size:1.9rem}}

/* ---------- botones ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:2.6rem;padding:.55rem 1.3rem;border:1px solid var(--ink);border-radius:999px;
  font:500 .75rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;background:transparent;transition:background .35s var(--ease),color .35s var(--ease)}
.pill:hover{background:var(--ink);color:var(--page)}
.pill.on-photo{background:var(--white);border-color:var(--white);color:var(--ink)}
.pill.on-photo:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.pill.solid{background:var(--ink);color:var(--page)}
.pill.solid:hover{background:var(--maya);border-color:var(--maya)}
.link-under{font:500 .78rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.25rem}
.link-arrow{font:500 .72rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.link-arrow::after{content:" →";transition:margin .3s var(--ease)}
a:hover .link-arrow::after{margin-left:.3rem}
@media (max-width:760px){.pill{min-height:46px}}

/* ---------- encabezado: solo el logo, a la derecha ---------- */
.wordmark{display:block;height:1.05rem;aspect-ratio:2400/293;background:var(--ink);-webkit-mask:url(../img/logo.png) center/contain no-repeat;mask:url(../img/logo.png) center/contain no-repeat}
.top{position:fixed;top:0;right:0;left:0;z-index:30;display:flex;align-items:center;gap:1rem;padding:.55rem var(--gut);background:color-mix(in srgb,var(--page) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .4s}
html.scrolled .top{border-bottom-color:var(--line)}
.top .wordmark{height:2.2rem;margin-left:auto;padding:.4rem 0;box-sizing:content-box;background-clip:content-box}
@media (max-width:760px){.top{padding:4px var(--gut)}.top .wordmark{height:28px;padding:9px 0}}

/* idioma (abajo a la izquierda, siempre visible) */
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:blur(6px)}
.lang button{min-width:44px;min-height:34px;padding:0 .7rem;font:500 .7rem/1 var(--ui);letter-spacing:.08em;color:var(--ink-2);border-radius:999px}
.back{display:inline-flex;align-items:center;gap:.4rem;min-height:34px;padding:0 .3rem;font:500 .72rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.back[hidden]{display:none}
.back i{font-style:normal;font-size:1rem;transition:translate .3s var(--ease)}
.back:hover i{translate:-.2rem 0}
@media (max-width:760px){.back{min-height:44px;min-width:44px;justify-content:center}}
@media (max-width:420px){.back span{display:none}}
.lang button[aria-pressed=true]{color:var(--ink);background:var(--beige)}
@media (max-width:760px){.lang button{min-height:44px}}

/* ---------- páginas ---------- */
main{display:block;outline:none}
main:focus-visible{outline:none}   /* main.js le da el foco al cambiar de página (tabindex −1): el anillo de :focus-visible se veía como una línea oscura al pie de la página */
.page-head{max-width:46rem;margin-bottom:2.5rem}
.page-head p{color:var(--ink-2);margin-top:1rem}
[data-page]>section{padding:0 var(--gut)}
.block{padding-top:5rem!important;max-width:100%}
.block>p{max-width:38rem;color:var(--ink-2)}
.block h2{margin-bottom:1rem}

/* ---------- HERO: un solo protagonista (el globo, a la derecha); a la izquierda título, texto, un botón
   y la cama y el Ecofiltro sobre recuadros beige iguales (Salt & Stone). Todo lo de la izquierda arranca en --gut. ---------- */
/* el globo manda: 65 % del alto; cada recuadro ≈ 10 % del área del disco (160 px a 1440) */
.hero{--gd:min(65svh,42vw);--tile:min(10rem,18svh);position:relative;padding:0!important;overflow:hidden}
/* compu: texto | cama (alineada al borde de arriba del globo) y Ecofiltro (al de abajo) | globo, con su borde derecho en el del logo.
   Las tres columnas se reparten el aire por igual (space-between): el mismo hueco entre texto y recuadros que entre recuadros y globo. */
.hero-stage{position:relative;min-height:100svh;display:grid;grid-template-columns:auto var(--tile) var(--gd);justify-content:space-between;align-items:center;
  padding:5.5rem var(--gut) 2rem}
.hero-left{display:contents}
.hero-copy{grid-column:1;grid-row:1;position:relative;z-index:2}
.hero-h{font-size:min(3.4rem,4vw);line-height:1;max-width:8.6em}
.hero-p{margin:1.4rem 0 0;font-size:.85rem;line-height:1.6;color:var(--ink-2);max-width:21rem}
.hero-cta{margin-top:1.8rem}
.hero-objs{grid-column:2;grid-row:1;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:4.5rem}
.globe-wrap{grid-column:3;grid-row:1;position:relative;width:var(--gd);aspect-ratio:1}
.globe-canvas,.globe-fallback{position:absolute;inset:0;width:100%;height:100%}
/* sombra de apoyo: una elipse ancha y muy suave de ink-2 bajo el globo, corrida a la derecha porque la luz viene de arriba a la
   izquierda (design-system.md → Globo A) */
.globe-wrap::before{content:"";position:absolute;left:26%;right:6%;top:96%;height:9%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(101,96,90,.2),rgba(101,96,90,.09) 55%,rgba(101,96,90,0));filter:blur(3px)}
.hero-obj{display:block;min-width:0;text-decoration:none}
.obj-tile{display:block;position:relative;aspect-ratio:1/1.08;background:var(--beige);overflow:hidden}
.obj-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1s var(--ease)}   /* el recorte ya trae el fondo --beige (tools/product-mul.py) */
.hero-obj:hover .obj-tile img{scale:1.04}
.hero-obj .label{display:block;font:500 .75rem/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:.7rem}
/* líneas (design-system.md → Líneas del inicio): ink-2 al 70 %, 1 px, punto de 5 px en cada punta, por encima de los recuadros */
.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.lines path{fill:none;stroke:var(--ink-2);stroke-width:1;stroke-linecap:round;opacity:.7}
@media (max-width:760px){.lines path{stroke-width:1.3;opacity:.85}}
.lines circle{fill:var(--ink-2)}
/* tableta: el texto arriba a todo lo ancho; abajo los dos recuadros y el globo */
@media (max-width:1180px) and (min-width:761px){
  .hero{--gd:min(56svh,52vw);--tile:min(10rem,20svh)}
  .hero-stage{grid-template-columns:var(--tile) var(--gd);column-gap:5rem;justify-content:space-between;row-gap:2.5rem;padding-top:6rem}
  .hero-copy{grid-column:1/-1;padding-right:0}
  .hero-h{font-size:3.4rem;max-width:none}
  .hero-objs{grid-column:1;grid-row:2}
  .globe-wrap{grid-column:2;grid-row:2}
}
/* celu: primero la historia (título, globo, líneas, objetos) y después el botón */
@media (max-width:760px){
  /* el borde izquierdo del globo queda a 14 px del centro del recuadro de la cama: la línea baja derecho a ese centro */
  .hero{--mt:min(28vw,8rem);--gd:calc(100vw - 2 * var(--gut) - var(--mt) / 2 - 14px);padding:6.5rem var(--gut) 3rem!important}
  .hero-stage{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:0}
  .hero-copy{display:contents}
  .hero-h{order:1;font-size:2.6rem;line-height:1.02;max-width:none}
  .hero-p{order:2;margin-top:.9rem;font-size:.95rem}
  .globe-wrap{order:3;margin:.9rem 0 0 auto}
  /* recuadros chicos (cada uno muy por debajo de un cuarto del globo): el globo manda */
  .hero-objs{order:4;margin:2.1rem 0 0;display:grid;grid-template-columns:repeat(2,var(--mt));justify-content:space-between;gap:var(--gap)}
  .hero-cta{order:5;align-self:flex-start;margin-top:1.5rem}
}

/* intro: el logo entra de derecha a izquierda y queda pegado a la derecha.
   Idea de Andrea (2026-11-12): la derecha es el lado que da, la izquierda el que recibe. */
.intro{position:fixed;inset:0;z-index:40;display:grid;place-items:center end;padding:0 var(--gut);background:var(--page);pointer-events:none}
.intro .wordmark.big{width:min(78vw,60rem);height:auto;position:relative;background:none;-webkit-mask:none;mask:none}
.intro .wordmark.big i{position:absolute;inset:0;background:var(--ink);-webkit-mask:url(../img/logo.png) center/contain no-repeat;mask:url(../img/logo.png) center/contain no-repeat;
  clip-path:inset(0 calc(100% - var(--b)) 0 var(--a));opacity:0;translate:1.2rem 0}
.intro.go .wordmark.big i{opacity:1;translate:0 0;transition:opacity .45s var(--ease),translate .6s var(--ease);transition-delay:calc(var(--k) * 55ms)}
.intro.out{opacity:0;transition:opacity .6s var(--ease)}
.intro.done{display:none}
.globe-wrap{opacity:1;transition:opacity 1s var(--ease),scale 1.4s var(--ease)}
html.intro-on .globe-wrap{opacity:0;scale:.92}
html.intro-on .hero-objs,html.intro-on .hero-copy{opacity:0}
.hero-objs,.hero-copy{transition:opacity .9s var(--ease)}

/* ---------- dos donaciones (Silk Denim / Set Dressing) ---------- */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,26rem));justify-content:center;gap:3rem;padding-top:6rem!important}   /* más chicas (Andrea, 2026-11-13: "too big") */
.two-card{display:block;text-decoration:none;position:relative}
.two-img{background:var(--beige);aspect-ratio:1/1.08;overflow:hidden;border-radius:var(--r)}
.two-img img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}   /* la foto (-card) llena el recuadro: el aire ya viene en la foto */
.two-card:hover .two-img img{scale:1.035}
.two-tx{padding:1.1rem 0 0;max-width:30rem}
.two-tx h2{margin-bottom:.5rem}   /* etiqueta: .cap tal cual (Jost 500, .82rem = 13 px a 1440, +0.08em), como dice el sistema (home-r6) */
.two-tx p{color:var(--ink-2);margin-bottom:.8rem;text-wrap:pretty}   /* sin palabra sola en el último renglón */
.two-tx .link-arrow{display:block;line-height:1.2;margin-bottom:-.25em}   /* su propio renglón: sin el interlineado del texto debajo (ritmo de 6rem) */
@media (max-width:760px){.two{grid-template-columns:minmax(0,22rem);gap:2.5rem}}

/* ---------- Donate / Our why (Discovery Sets / Signature Scent) ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding-top:6rem!important}
.big-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:1rem;padding:1.6rem;aspect-ratio:1.33;overflow:hidden;border-radius:6px;color:var(--white);text-decoration:none;background:#7d7064}
.big-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88);transition:scale 1.4s var(--ease)}
.big-card:hover img{scale:1.04}
/* vuelta home-r2: título y botón juntos abajo a la izquierda (arriba a la izquierda estaban el cielo claro y el tronco),
   sobre una sombra suave y local que sale de esa esquina; el resto de la foto queda limpio */
.big-card::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 75% at 0% 100%,rgba(20,16,12,.72),rgba(20,16,12,.42) 40%,rgba(20,16,12,0) 80%)}
.card-h{position:relative;z-index:1;font:var(--display-w) 2.3rem/1 var(--display);letter-spacing:var(--display-ls);text-transform:lowercase}
/* vuelta home-r6: la letra es fina; detrás del título (solo ahí) una sombra blanda más honda, para que ninguna letra quede
   sobre una parte clara de la foto (camisa, pierna). No toca el resto de la foto */
.card-h::before{content:"";position:absolute;inset:-1.4rem -2.6rem;z-index:-1;background:radial-gradient(closest-side,rgba(20,16,12,.62),rgba(20,16,12,.5) 80%,rgba(20,16,12,0));pointer-events:none}
.big-card .pill{position:relative;z-index:1}
@media (max-width:760px){.cards{grid-template-columns:1fr}.big-card{aspect-ratio:1.1}
  /* celu: el recorte que deja el título fuera de la camisa y de la pierna (medido, vuelta home-r6) */
  .big-card[href="#/donate"] img{object-position:50% 60%}.big-card[href="#/our-why"] img{object-position:50% 58%;transform:scale(1.45);transform-origin:0% 70%}}   /* zoom desde la izquierda: el hombre queda a la derecha, protagonista, y el título sobre el mimbre */

/* ---------- registro (Best Sellers) ---------- */
.reg{padding-top:6rem!important}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:1.6rem}
.sec-head p{max-width:24rem;color:var(--ink-2);margin:0}
/* el registro del inicio: el título y el texto se apoyan en las columnas de la grilla de abajo (el texto arranca en el borde
   izquierdo de la 4.ª ficha de 5, o de la 3.ª de 4) */
.reg-home .sec-head{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:1px;align-items:start}
.reg-home .sec-head p{margin-top:-.28em}   /* arriba, al ras de la tinta del título (el interlineado del texto deja .28em) */
.reg-home .sec-head h2{grid-column:1/4;margin-top:-.14em}.reg-home .sec-head p{grid-column:4/6}
html.grid-4 .reg-home .sec-head{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.4rem;padding:0 6vw}
html.grid-4 .reg-home .sec-head p{grid-column:3/5}
/* #/registry (vuelta pages-r1): el mismo encabezado que el registro del inicio, sobre la grilla de abajo; título, texto y selector de vista apoyados en la misma línea */
.reg-page{padding-top:calc(6rem - .375rem)!important}   /* primera tinta a 6rem: la letra deja ese aire arriba */
.reg-page .sec-head{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:1px;align-items:end;max-width:none;margin-bottom:2.2rem}
.reg-page .sec-head h1{grid-column:1/4;margin-bottom:-.14em}
.reg-page .sec-head p{grid-column:4/5;max-width:none;margin:0 0 -.28em;padding-right:1rem}
html.grid-4 .reg-page .sec-head{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.4rem;padding:0 6vw}
html.grid-4 .reg-page .sec-head h1{grid-column:1/3}html.grid-4 .reg-page .sec-head p{grid-column:3/4}
/* selector de vista: la misma pastilla de dos partes que EN/ES, 2.6rem de alto; 5 por fila es lo que viene de entrada */
.view-switch{grid-column:-2/-1;justify-self:end;display:inline-flex;border:1px solid var(--line);border-radius:999px}
.view-switch button{min-height:calc(2.6rem - 2px);padding:0 .9rem;font:500 .7rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--ink-2);border-radius:999px;transition:background .35s var(--ease),color .35s var(--ease)}
.view-switch button[aria-pressed=true]{color:var(--ink);background:var(--beige)}
@media (max-width:900px){.view-switch{display:none}   /* 3 y 2 por fila en las dos opciones: no hay nada que elegir */
  .reg-page .sec-head,html.grid-4 .reg-page .sec-head{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1px;padding:0}
  .reg-page .sec-head h1,html.grid-4 .reg-page .sec-head h1{grid-column:1/3}.reg-page .sec-head p,html.grid-4 .reg-page .sec-head p{grid-column:3/4}}
@media (max-width:760px){.reg-page .sec-head,html.grid-4 .reg-page .sec-head{display:block}.reg-page .sec-head p{margin:.7rem 0 0;padding-right:0}.reg-page .sec-head h1{margin-bottom:0}}
.grid{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:2.2rem 1px}
html.grid-4 .grid{--cols:4;gap:2.6rem 1.4rem;padding:0 6vw}
.tile{display:block;text-decoration:none;text-align:left;width:100%;cursor:pointer}
.tile-img{display:block;position:relative;background:var(--beige);aspect-ratio:1/1.08;overflow:hidden}
html.grid-4 .tile-img{aspect-ratio:.78}
.tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1s var(--ease)}
html.grid-4 .tile-img img{object-fit:contain}   /* opción B (recuadro .78): cover cortaría la cama */
.tile:hover .tile-img img{scale:1.05}
.tile-num{z-index:1;position:absolute;left:.75rem;top:.6rem;font:300 1.55rem/1 var(--ui);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tile-tag{z-index:1;position:absolute;right:.7rem;top:.8rem;font:500 .62rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.tile-tx{display:block;padding:.75rem .7rem 0 0}   /* al ras del borde de la ficha, como el resto de los textos */
.tile-tx b{display:block;font:500 .74rem/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.tile-tx span{display:block;font-family:var(--ui);font-weight:500;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);line-height:1.4}
/* pie de ficha (vuelta home-r2): tres renglones (nombre / qué / pueblo) y un alto de texto fijo, igual en todas las fichas.
   Nada se recorta: si un renglón no entra (el pueblo en un celu de 320 px), pasa al renglón siguiente entre palabras, y
   en ≤ 380 px todas las fichas reservan ese renglón de más */
.tile-tx{min-height:calc(.75rem + .74rem * 1.3 + .72rem * 1.4 * 2)}
@media (max-width:380px){.tile-tx{min-height:calc(.75rem + .74rem * 1.3 + .72rem * 1.4 * 3)}}
.tile.free .tile-img img{opacity:.42}
.tile.free .tile-num{color:var(--ink-2)}
.tile.spacer{visibility:hidden}
html.grid-4 .tile-tx{padding-left:0}
/* "See the whole registry" (vuelta home-r3): al ras del borde izquierdo, justo debajo de la grilla (como el resto de la
   sección), con la flecha hacia abajo que pidió Andrea al lado; la misma letra y el mismo alto que las píldoras */
.down-arrow{display:inline-flex;align-items:center;gap:.7rem;margin:calc(2.2rem - 9px) 0 0;min-height:2.6rem;text-decoration:none;font:500 .75rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:760px){.down-arrow{min-height:46px;margin-top:13px}.down-arrow svg{height:46px}}   /* el aire de tinta a tinta es el mismo que entre filas: 37 px a 1440, 27 px en el celu */
.down-arrow svg{width:1rem;height:2.6rem;transition:translate .5s var(--ease)}
.down-arrow:hover svg{translate:0 .25rem}   /* vuelta home-r3: sin bucle (calma; y el aire hasta el mundo queda fijo en 6rem); se mueve solo al pasar el mouse */
.feed-state{display:flex;justify-content:center;gap:1rem;align-items:center;min-height:5rem;color:var(--ink-2);font-size:.85rem}
.feed-state:empty{min-height:0}
.feed-state:has(.feed-more){justify-content:flex-start;min-height:2.6rem;margin-bottom:-.6rem}   /* la flecha de "See the whole registry": al ras del borde de la grilla, también en la opción B */
html.grid-4 .feed-state{padding-left:6vw}
@media (max-width:900px){html.grid-4 .feed-state{padding-left:0}}
.feed-more{display:block;width:1rem;height:2.6rem}
#feed-sentinel{height:1px}
@media (max-width:900px){.grid,html.grid-4 .grid{--cols:3;padding:0}
  .reg-home .sec-head,html.grid-4 .reg-home .sec-head{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1px;padding:0}.reg-home .sec-head h2{grid-column:1/3}.reg-home .sec-head p,html.grid-4 .reg-home .sec-head p{grid-column:3/4}}
@media (max-width:640px){.grid,html.grid-4 .grid{--cols:2;gap:1.6rem 1px}.tile-num{font-size:1.25rem}}

/* ---------- mundo que se ilumina ---------- */
/* el mundo (vuelta home-r3): como toda sección, el título, la línea y la píldora arrancan en el borde izquierdo (--gut);
   el globo entero, centrado debajo y apoyado abajo de su lienzo; nunca texto sobre el globo. Sin tramo fijo (sticky): así el
   aire es el mismo al bajar y en la captura de página entera (6rem arriba y 6rem del globo al pie). Fondo plano --page. */
.world{position:relative;padding:6rem var(--gut) 0!important;color:var(--ink)}
.world canvas{width:100%;height:78svh;display:block}
/* la misma sombra de apoyo del globo de arriba, medida sobre el diámetro del globo (--wd) */
.world-frame{--wd:calc(.9*min(108vw,62svh,100vw - 2*var(--gut)));--wr:calc(50% - var(--wd)*.44);position:relative}
.world-frame::before{content:"";position:absolute;right:var(--wr);width:calc(var(--wd)*.68);bottom:calc(var(--wd)*-.05);height:calc(var(--wd)*.09);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(101,96,90,.2),rgba(101,96,90,.09) 55%,rgba(101,96,90,0));filter:blur(3px)}
.world-frame::before{opacity:0;transition:opacity .6s var(--ease)}
.world.ready .world-frame::before,.world.no-gl .world-frame::before{opacity:1}   /* sin globo no hay sombra suelta */
.world canvas{position:relative}
.world.no-gl canvas{background:url(../img/globe-fallback-calm.webp) center bottom/contain no-repeat}
.world-copy p{color:var(--ink-2);max-width:30rem;margin:.9rem 0 1.4rem;text-wrap:balance}   /* sin palabra sola en el último renglón */
.world-copy .display{font-size:2.3rem;text-wrap:balance;margin-top:-.385em}
/* el aire VISIBLE entre secciones es 6rem: The Seasons deja aire sobre las mayúsculas (-.14em en "THE REGISTRY", que arranca
   con la barra de la T) y "A WORLD" arranca con las puntas finas de la A y la W, más abajo: medido, -.385em (-.52em en el celu) */
.world-copy .pill:not(:hover){background:var(--page)}   /* fondo lleno: la sección es [data-overlay] y el texto se mide contra lo que tiene detrás */
@media (max-width:760px){.world canvas{height:min(108vw,62svh)}.world-copy .display{font-size:1.9rem;margin-top:-.52em}}
/* compu (vuelta home-r5): el texto a la izquierda (columnas 1–4 de 12, centrado en alto) y el globo al lado (5–12), en la
   misma grilla de 12 que el resto. El globo llena el alto de su lienzo (arriba y abajo de la sección queda solo el ritmo de
   6rem). La sección mide 913 px a 1440×900: tiene que pasar los 900 px del alto de pantalla para que A20 la pueda recorrer. */
@media (min-width:761px){
  .world-frame{--wd:calc((100svh - 4.5rem)*.995);--wr:calc(var(--wd)*.06);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
  .world-copy{grid-column:1/5;grid-row:1}
  .world-copy .display{margin-top:0}
  .world canvas{grid-column:5/13;grid-row:1;height:calc(100svh - 4.5rem)}
  .world{padding-top:calc(6rem - 11px)!important}   /* el filo del globo es casi blanco: su primera tinta visible queda 11 px más abajo; así el aire visible es 6rem */
}
@media (max-width:760px){.sec-head,.reg-home .sec-head,html.grid-4 .reg-home .sec-head{display:block;padding:0}.sec-head p,.reg-home .sec-head p{margin-top:.7rem}}

/* ---------- páginas de producto (Denim Guide / Our Fits) ----------
   Vuelta products-r1. Las dos páginas son la misma: una grilla de 7 columnas (la de las familias) ordena todo. El recuadro del
   producto, el texto de cada fila y la 4.ª cara arrancan en la misma línea vertical. */
.guide,.prow{--pcols:repeat(7,minmax(0,1fr))}
.guide{display:grid;grid-template-columns:var(--pcols);column-gap:1px;align-items:center;padding:4.5rem var(--gut) 0!important}
.guide-tx{grid-column:1/4;max-width:30rem;padding-right:1.5rem}
.guide-tx h1{max-width:7.7em;min-height:2.04em}                 /* dos renglones en las dos páginas y en los dos idiomas */
.guide-tx p:not(.eyebrow){color:var(--ink-2);margin:1.2rem 0 1.6rem;min-height:4.65em;text-wrap:balance}   /* tres renglones reservados: la píldora queda a la misma altura */
.guide-tx .pill{align-self:flex-start}
.guide-img{grid-column:4/8;position:relative;overflow:hidden;height:max(30rem,min(calc(100svh - 6.5rem),calc((100vw - 2 * var(--gut)) * 4 / 7 * 1.08)))}
.guide-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.beige{background:var(--beige)}
/* aire VISIBLE de 6rem, de tinta a tinta: la fila arranca 1 px antes (la letra deja ese px arriba) y el texto no cuenta el interlineado de abajo */
.prow{display:grid;grid-template-columns:var(--pcols);column-gap:1px;align-items:start;padding-top:calc(6rem - 1px)!important}
.prow h2{grid-column:1/4;margin:-.14em 0 0}
.prow>p{grid-column:4/8;max-width:33rem;margin:-.28em 0 -.25em;color:var(--ink-2);text-wrap:balance}
.pcol:first-child{grid-column:1/4;padding-right:1.5rem}          /* partners y por qué: una sola sección, dos columnas, títulos en la misma línea */
.pcol+.pcol{grid-column:4/8}
.pair h2{margin-top:-.17em}
.pcol p{max-width:33rem;margin:.9rem 0 -.25em;color:var(--ink-2);text-wrap:balance}
.faces{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2.2rem 1px;margin-top:2.2rem}
.face{display:block;min-width:0;text-align:left;text-decoration:none;cursor:pointer}
.face-img{display:block;aspect-ratio:1/1.08;overflow:hidden;background:var(--sand)}
.face-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:scale 1s var(--ease)}
.face:hover .face-img img{scale:1.05}
.face-tx{display:block;padding:.75rem .7rem 0 0}                /* los mismos renglones que la ficha del registro */
.face b{display:block;font:500 .74rem/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.face-tx span{display:block;font:500 .72rem/1.4 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.fams{margin-bottom:-1px}
.fams .empty{grid-column:1/-1;color:var(--ink-2);padding:2rem 0}
@media (max-width:1000px){.faces{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){
  .guide{display:block;padding-top:6rem!important}
  .guide-tx{max-width:34rem;padding:0 0 2.2rem}
  .guide-img{height:auto;aspect-ratio:1/1.08}
  .prow{display:block;padding-top:6rem!important}
  .prow>p,.pcol p{max-width:34rem;margin:.7rem 0 -.2em}
  .pcol:first-child{padding-right:0}
  .pair h2{margin-top:-.14em}
  .pcol+.pcol{margin-top:calc(6rem - 3px)}
}
@media (max-width:640px){.faces{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.guide-tx p:not(.eyebrow){min-height:6.2em}}
@media (max-width:760px){html[lang=es] .guide-tx p:not(.eyebrow){max-width:18.2rem;min-height:6.2em}}   /* en español: un ancho que da cuatro renglones en las dos páginas, así la píldora queda a la misma altura sin aire de más */

/* ---------- ventana (historia / familia): quiz de la rosa ---------- */
dialog.story{width:min(92vw,78rem);height:min(90svh,52rem);max-width:none;max-height:none;padding:0;border:0;border-radius:6px;background:var(--page);color:var(--ink);overflow:hidden}
dialog.story::backdrop{background:rgba(30,26,22,.42);backdrop-filter:blur(3px)}
dialog.story[open]{animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;translate:0 1.2rem}}
.story-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);height:100%}
.story-tx{padding:3.2rem 2.6rem 2rem;overflow:auto;display:flex;flex-direction:column}
.story-count{font:500 .7rem/1 var(--ui);letter-spacing:.12em;color:var(--ink-2);margin-bottom:2rem}
.story-num{font:300 3.2rem/1 var(--ui);letter-spacing:-.02em;margin-bottom:.6rem}
.story-name{font:var(--display-w) 2.4rem/1.05 var(--display);margin-bottom:1rem;letter-spacing:var(--display-ls);text-transform:lowercase}
.story-bio{font-size:1rem;max-width:28rem}
.facts{display:grid;gap:.9rem;margin:1.6rem 0;padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem}
.facts dt{font:500 .68rem/1.5 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.facts dd{margin:0;font-size:.9rem}
.thanks{font-size:.82rem;color:var(--ink-2);max-width:28rem;margin-top:auto}
.story-ph{position:relative;background:var(--beige);overflow:hidden;touch-action:pan-y}
.slides{display:flex;height:100%;transition:translate .6s var(--ease)}
.slides figure{flex:0 0 100%;margin:0;position:relative}
.slides img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.slides figcaption{position:absolute;left:1rem;bottom:1rem;font:500 .68rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;background:var(--page);padding:.45rem .7rem;border-radius:999px}
.nav-arrows{position:absolute;right:1rem;bottom:1rem;display:flex;gap:.4rem}
.nav-arrows button{width:44px;height:44px;border-radius:50%;background:var(--page);display:grid;place-items:center}
.nav-arrows svg{width:18px;height:18px}
.x{position:absolute;right:1rem;top:1rem;z-index:3;width:44px;height:44px;border-radius:50%;background:var(--page);display:grid;place-items:center}
.x svg{width:20px;height:20px}
.story .pill{align-self:flex-start;margin-top:1rem}
@media (max-width:760px){
  dialog.story{width:100vw;height:100svh;max-height:100svh;border-radius:0;margin:0}
  .story-in{grid-template-columns:1fr;grid-template-rows:52svh auto;overflow:auto}
  .story-ph{grid-row:1}
  .story-tx{grid-row:2;padding:1.6rem var(--gut) 3rem;overflow:visible}
  .story-num{font-size:3rem}.story-name{font-size:2rem}
  .facts div{grid-template-columns:7rem 1fr}
}

/* ---------- donar ---------- */
/* en Donar los saltos dentro de la página ya piden behavior:'smooth' (router.js, form.js): el smooth general no suma nada y dejaba a scrollIntoView a mitad de camino en tools/v2-check A25 */
html:has([data-page=donate]:not([hidden])){scroll-behavior:auto}
.how{padding-top:6rem!important}
.how h1{margin-top:-.14em}
.steps{list-style:none;margin:0 0 -.2em;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:start}   /* las mismas columnas que los cuadros de abajo */
.step{border-top:1px solid var(--line);padding-top:1rem}
.step b{display:block;font:300 2.2rem/1 var(--ui);margin-bottom:.8rem}
.step span{display:block;font-size:1rem;line-height:1.4}
.step small{display:block;margin-top:.6rem;color:var(--ink-2);font-size:.82rem}
.arrow{font-size:1.4rem;color:var(--ink-2);position:absolute;grid-row:1;top:1.2rem;right:.4rem}
@media (min-width:901px){.step{position:relative;border-top:0}.step::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}.step:not(:last-child){margin-right:2.2rem}.step:not(:last-child)::before{right:-2.2rem}}   /* la flecha va en su propio lugar, al final de la columna; la línea sigue entera */
.arrow:nth-child(2){grid-column:1/2}.arrow:nth-child(4){grid-column:2/3}.arrow:nth-child(6){grid-column:3/4}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:1rem}.arrow{position:static;grid-row:auto;grid-column:auto!important;rotate:90deg;justify-self:start;margin-left:.6rem}}

.choose{padding-top:6rem!important}
.choose h2{margin:-.14em 0 1.6rem}
/* la elección principal de la página: dos fichas grandes, como las del inicio (beige, 1 : 1.08, etiqueta debajo), desde la línea de 622 px. Sin borde: lo elegido se marca con la barra tinta al pie de la ficha y el punto lleno de la etiqueta */
.choose-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:-.42rem}   /* se estira la columna, no el botón: las fichas y los contadores quedan a la misma altura */
.choice-col{min-width:0;display:flex;flex-direction:column}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}
.stepper button{min-width:2.6rem;min-height:calc(2.6rem - 2px);border-radius:999px;font:400 1.1rem/1 var(--ui);color:var(--ink)}
.stepper button:disabled{color:var(--ink-2);cursor:default}
.stepper output{min-width:1.8rem;text-align:center;font:500 .9rem/1 var(--ui);font-variant-numeric:tabular-nums}
@media (max-width:760px){.stepper button{min-width:44px;min-height:44px}}
.choice-col .stepper{margin-top:auto;align-self:flex-start}
.choice-col .choice{margin-bottom:.8rem}
.f-qty{display:flex;flex-wrap:wrap;gap:.8rem 2rem}
.f-qty>div{display:flex;align-items:center;gap:.8rem}
.f-qty span{font:500 .75rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;min-width:5.6rem}
.f-num[hidden]{display:none}
.gfm-sum{margin-top:.8rem!important;color:var(--ink)!important}
.choice{display:block;width:100%;min-width:0;text-align:left}
.choice-img{display:block;position:relative;background:var(--beige);aspect-ratio:1/1.08;overflow:hidden;border-radius:var(--r)}
.choice-img img{width:100%;height:100%;object-fit:cover;transition:scale 1s var(--ease)}
.choice:hover .choice-img img,.choice[aria-pressed=true] .choice-img img{scale:1.035}
.choice-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink);scale:0 1;transform-origin:0 50%;transition:scale .5s var(--ease)}
.choice[aria-pressed=true] .choice-img::after{scale:1 1}
.choice-tx{display:block;padding:.9rem 0 0 1.2rem;position:relative}
.choice-tx::before{content:"";position:absolute;left:0;top:calc(.9rem + .18em);width:.6rem;height:.6rem;border:1px solid var(--ink-2);border-radius:50%;transition:background .3s var(--ease),border-color .3s var(--ease)}
.choice[aria-pressed=true] .choice-tx::before{background:var(--ink);border-color:var(--ink)}
.choice b{display:block;font:500 .82rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.choice small{display:block;margin-top:.35rem;font-size:.88rem;color:var(--ink-2)}

.squares{padding-top:6rem!important}
.squares h2{margin:-.14em 0 1.6rem}
.sq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.sq{margin:0}
.sq-art{position:relative;aspect-ratio:1;background:var(--beige);border-radius:var(--r);overflow:hidden}
.sq-art svg{position:absolute;inset:0;width:100%;height:100%}
.sq figcaption{padding-top:.9rem}
.sq figcaption b{display:block;font:500 .78rem/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.sq figcaption span{display:block;color:var(--ink-2);font-size:.88rem}
.replay{margin-top:1.6rem}
@media (max-width:900px){.sq-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sq-grid{grid-template-columns:1fr}}

/* una sola línea de corte: 622 px a 1440, el comienzo de la columna 4 de 7 de las páginas de producto. A la izquierda la foto termina 2rem antes; desde ahí arranca el texto, o la foto si va a la derecha */
.split{--split-h:calc(((100vw - 2 * var(--gut)) * 3 / 7 - 2rem) * 1.08);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:1px;padding-top:6rem!important;align-items:center}
.split-img{grid-column:1/4;margin-right:2rem;overflow:hidden;border-radius:var(--r);aspect-ratio:1/1.08}   /* la proporción de los recuadros de producto */
.split.flip .split-img{grid-column:4/8;grid-row:1;margin-right:0;aspect-ratio:auto;height:var(--split-h)}   /* a la derecha, más ancha y del mismo alto */
.split.flip .split-img img{object-position:50% 58%}
.split-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.88)}
.split-img.beige img{object-fit:cover;filter:none}
.split-tx{grid-column:4/8;display:flex;flex-direction:column;justify-content:center;max-width:36rem}   /* centrado en alto, como .guide-tx */
.split.flip .split-tx{grid-column:1/4;grid-row:1;padding-right:2rem}
.split-tx p{color:var(--ink-2);margin:1rem 0 1.6rem}
.split-tx .pill{align-self:flex-start}
/* Give half (vuelta pages-r1): la foto -hero del Ecofiltro llena el recuadro y el agua se dibuja encima, recortada al balde.
   El SVG calza justo sobre el balde: el alto interno 118–346 de su viewBox cae en 40,5–79,6 % del recuadro (tools/v2-check A26 mide ahí) */
.half-art{grid-column:1/4;position:relative;aspect-ratio:1/1.08;border-radius:var(--r);overflow:hidden;margin-right:2rem}
.half-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.half-art svg{position:absolute;left:22.2%;top:20.26%;width:55.57%;height:61.74%;overflow:visible}
.split.half .split-tx{max-width:44rem}
.split.half .split-tx p{text-wrap:pretty}
@media (max-width:900px){.split{display:block}.split-img,.half-art{margin-right:0}.split.flip .split-img{height:auto;aspect-ratio:1/1.08}
  .split-tx,.split.flip .split-tx,.split.half .split-tx{padding:1.6rem 0 0;max-width:34rem}}
/* título a la izquierda (columnas 1–3) y contenido desde la 4.ª, la misma línea que las páginas de producto (622 px a 1440) */
.choose,.tracked,.form-sec,.am-acc,.account{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:1px;align-items:start;padding-top:6rem!important}
.choose>:first-child,.tracked>:first-child,.form-sec>:first-child,.am-acc>:first-child,.account>:first-child{grid-column:1/4;padding-right:2rem;margin:-.14em 0 0}
.choose>:nth-child(2),.tracked>:nth-child(2),.form-sec>:nth-child(2),.am-acc>:nth-child(2),.account>:nth-child(2){grid-column:4/8;min-width:0}
@media (max-width:900px){.choose,.tracked,.form-sec,.am-acc,.account{display:block}
  .choose>:first-child,.tracked>:first-child,.form-sec>:first-child,.am-acc>:first-child,.account>:first-child{padding-right:0;margin:-.14em 0 2rem}}

.promises{list-style:none;padding:0;margin:0 0 2rem;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap)}
.promises li{padding:.9rem 0;border-top:1px solid var(--line);font-size:.95rem}
@media (max-width:760px){.promises{grid-template-columns:1fr}}

.form-sec{outline:none}
.form-sec>:first-child{margin-top:-.22em}
@media (min-width:901px){.form-sec>:first-child{position:sticky;top:6rem}}   /* el título acompaña los campos: la columna de la izquierda no queda vacía al bajar */
#abundance,#f-send{white-space:nowrap}
.send-short,.send-note{display:none}
@media (max-width:760px){#abundance,#f-send{width:100%}
  .send-long{display:none}.send-short{display:inline}   /* la frase entera no entra en un renglón: "Send" en la píldora y el resto debajo */
  .send-note{display:block;margin:.7rem 0 0;font-size:.82rem;color:var(--ink-2);text-align:center}}
.form-sec .page-head p{margin-top:.9rem}
fieldset{border:0;padding:0;margin:0 0 1.8rem}
legend{font:500 .78rem/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8rem;padding:0}
.opt{display:inline-flex;align-items:center;margin:0 .5rem .5rem 0;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
/* de la familia de las píldoras (mismo alto y letra); lo elegido se marca con beige y borde: el único relleno tinta del formulario es Enviar */
.opt span{display:inline-flex;align-items:center;min-height:2.6rem;padding:.55rem 1.3rem;border:1px solid var(--line);border-radius:999px;font:500 .75rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;transition:all .3s var(--ease)}
@media (max-width:760px){.opt span{min-height:46px}}
.opt input:checked+span{border-color:var(--ink);background:var(--beige)}
.opt input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.f-line{font:var(--display-w) 2rem/1.1 var(--display);min-height:2.3rem;margin:.8rem 0 0;color:var(--maya);letter-spacing:var(--display-ls);text-transform:lowercase}
.f-line:empty{min-height:0;margin:0}
.f-line.show{animation:lineIn .7s var(--ease)}
@keyframes lineIn{from{opacity:0;translate:0 .5rem;filter:blur(4px)}}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem var(--gap);margin-bottom:1.4rem}
.fld{display:flex;flex-direction:column;gap:.35rem}
.fld.wide{grid-column:1/-1}
.fld span{font-size:.8rem;color:var(--ink-2)}
.fld input,.fld textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink-2);padding:.6rem 0;min-height:2.8rem;border-radius:0}
.fld textarea{resize:none}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.fld small{font-size:.75rem;color:var(--ink-2)}
.f-err{display:block;color:var(--maya);font-size:.78rem;font-style:normal;min-height:1em;margin:0}
.f-err:empty{min-height:0}
.check{display:flex;gap:.6rem;align-items:center;margin-bottom:1.6rem;min-height:44px}
.check input{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--ink)}
.hp{position:absolute;left:-9999px}
dialog.gfm{width:min(calc(100vw - 2 * var(--gut)),34rem);max-width:none;padding:2rem;border:0;border-radius:var(--r);background:var(--page);color:var(--ink)}
dialog.gfm::backdrop{background:rgba(30,26,22,.42);backdrop-filter:blur(3px)}
dialog.gfm[open]{animation:pop .45s var(--ease)}
.gfm h2{font:var(--display-w) 1.8rem/1.1 var(--display);margin:0 0 .7rem;letter-spacing:var(--display-ls);text-transform:lowercase}
.gfm p{color:var(--ink-2);margin:0}
.gfm .row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.f-status{margin-top:1.6rem;padding:1.4rem;border-radius:var(--r);background:var(--beige)}
.f-status h3{font:var(--display-w) 1.8rem/1.1 var(--display);margin-bottom:.5rem;letter-spacing:var(--display-ls);text-transform:lowercase}
.f-status .row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
@media (max-width:760px){.f-grid{grid-template-columns:1fr}}

/* ---------- our why (From Mother Nature / Our Manifesto) ---------- */
/* la grilla de 7 de las páginas de producto, espejada: foto en las columnas 1–4 (el mismo recuadro, dentro de los márgenes) y título desde la 5.ª.
   La palabra más larga ("CONSCIOUSNESS", 8.13em) siempre entra entera: la letra se mide contra la columna (cqi), nunca se parte */
.mother{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:1px;align-items:center;padding:4.5rem var(--gut) 0!important}
.mother-img{grid-column:1/4;margin-right:2rem;position:relative;overflow:hidden;border-radius:var(--r);height:max(30rem,min(calc(100svh - 6.5rem),calc((100vw - 2 * var(--gut)) * 4 / 7 * 1.08)))}
.mother-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.mother-tx{grid-column:4/8;container-type:inline-size}
.mother-tx .display.xl{font-size:min(3.4rem,11.9cqi);max-width:8.4em;overflow-wrap:normal}   /* título de página (54 px), en dos renglones: la foto manda */
.mother-tx p:not(.eyebrow){max-width:33rem;margin:1.6rem 0 -.25em;color:var(--ink-2)}
.manifesto{padding-top:6rem!important}
.manifesto h2{margin:-.17em 0 1.6rem}
.man-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.man-list li{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:1px;align-items:center;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.man-list li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:-.25rem}
.roman{grid-column:1/4;font:var(--display-w) 2.3rem/1 var(--display)}
.man-list p{grid-column:4/8;margin:0;font:400 1rem/1.5 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.work-note{display:none;margin-top:2rem;color:var(--ink-2);font-size:.8rem}
html.dock-open .work-note{display:block}
@media (max-width:900px){.mother{display:block}.mother-img{height:auto;aspect-ratio:1/1.08;margin-right:0}.mother-tx{padding:2.2rem 0 0}
  .man-list li{grid-template-columns:4.5rem minmax(0,1fr)}.roman{grid-column:1}.man-list p{grid-column:2;padding-left:0}}

/* ---------- amanecer ---------- */
.am-hero{position:relative;height:100svh;padding:0!important;color:var(--white);overflow:hidden;background:#58433f}
.am-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75)}
/* el texto va en el cielo, desde la línea de 622 px; detrás, una sombra blanda que sale de ahí y no toca el resto de la foto */
.am-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 58% 42% at 68% 19%,rgba(24,18,30,.62),rgba(24,18,30,.42) 55%,rgba(24,18,30,0))}
@media (max-width:900px){.am-hero::after{background:radial-gradient(ellipse 120% 40% at 35% 20%,rgba(24,18,30,.62),rgba(24,18,30,.42) 55%,rgba(24,18,30,0))}}
body:has([data-page=amanecer]:not([hidden])) .top{background:var(--page);backdrop-filter:none}   /* sobre la foto la barra translúcida daba un gris que no es de la paleta */
.am-copy{position:absolute;left:calc(var(--gut) + (100vw - 2 * var(--gut)) * 3 / 7);right:var(--gut);top:6rem;z-index:1}
@media (max-width:900px){.am-copy{left:var(--gut)}}
.am-copy p{margin:1rem 0 1.4rem;color:#f1ece6}
.am-acc>.page-head{max-width:none}
.acc .item{border-top:1px solid var(--line)}
.acc .item:last-child{border-bottom:1px solid var(--line)}
.acc .q{width:100%;text-align:left;padding:1.1rem 0;min-height:44px;font:var(--display-w) 1.6rem/1.1 var(--display);display:flex;justify-content:space-between;letter-spacing:var(--display-ls);text-transform:lowercase}
.acc .q::after{content:"+";font:300 1.4rem/1 var(--ui);transition:rotate .4s var(--ease)}
.acc .q[aria-expanded=true]::after{rotate:45deg}
.acc .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc .a>div{overflow:hidden;visibility:hidden;transition:visibility 0s .5s}
.acc .item.open .a>div{visibility:visible;transition:visibility 0s}
.acc .item.open .a{grid-template-rows:1fr}
.acc .a p{color:var(--ink-2);padding-bottom:1.2rem}

/* ---------- cuenta ---------- */
/* página corta: el pie queda abajo aunque la pantalla sea más alta que el contenido */
body:has([data-page=account]:not([hidden])){display:flex;flex-direction:column;min-height:100svh}
body:has([data-page=account]:not([hidden])) main{flex:1}
/* contain achicaba el logo del pie ~6 px cuando la posición de la página redondeaba su alto a 43 px: en vez de eso llena su caja, en todas las páginas */
.foot-wm .wordmark:not(.lt){-webkit-mask-size:100% 100%;mask-size:100% 100%}
.account .page-head{max-width:none}
.account>:first-child{margin-top:-.5rem}   /* primera tinta a 6rem */
.account .page-head .preview-note{font-size:.82rem;margin:1rem 0 0}
#acc-body>.cap{margin:0 0 1rem}
.acc-form{display:grid;gap:1.2rem}   /* a todo lo ancho de la grilla, hasta el margen, como el formulario de Donar */
.acc-form .row{display:flex;flex-wrap:wrap;gap:.6rem}
.acc-form details{margin:.2rem 0}
.acc-form summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:500 .75rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;list-style:none}
.acc-form summary::-webkit-details-marker{display:none}
.acc-form summary::after{content:"+";margin-left:.6rem;font:300 1.1rem/1 var(--ui);transition:rotate .4s var(--ease)}
.acc-form details[open] summary::after{rotate:45deg}
.acc-form .small{margin:0}
.mine{display:grid;gap:1rem;margin-top:1.6rem}
.mine-item{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:1.6rem;padding-top:1rem;border-top:1px solid var(--line)}
.mine-item .tile-num{font-size:1.1rem;left:.5rem;top:.45rem}
.mine-item b{display:block;font:400 1rem/1.4 var(--sans)}
.mine-item .small{margin:.3rem 0 0}
@media (max-width:760px){.mine-item{grid-template-columns:7rem minmax(0,1fr);gap:1.2rem}}
.mine-media{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.mine-media figure{margin:0;width:7rem}
.mine-media img{aspect-ratio:.8;object-fit:cover;width:100%;border-radius:4px}
.mine-media figcaption{font-size:.7rem;color:var(--ink-2);margin-top:.3rem}

/* ---------- las cinco páginas de la vuelta pages-r1: sin palabras sueltas; ninguna palabra se parte ---------- */
:is([data-page=registry],[data-page=donate],[data-page=our-why],[data-page=amanecer],[data-page=account]) :is(h1,h2,h3){text-wrap:balance;overflow-wrap:normal}
:is([data-page=registry],[data-page=donate],[data-page=our-why],[data-page=amanecer],[data-page=account]) :is(p,li,small,.sq figcaption span,.step span,.pill){text-wrap:balance}

/* ---------- no encontrado ---------- */
.notfound{padding:12rem var(--gut) 6rem!important;text-align:center}
.notfound p{color:var(--ink-2);margin:1rem 0 1.6rem}

/* ---------- pie ---------- */
.foot{margin-top:6rem;padding:3rem var(--gut) 1.4rem;border-top:1px solid var(--line)}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.foot-h{font:500 .7rem/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.9rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:inline-block;padding:.28rem 0;text-decoration:none;font-size:.9rem}
.foot li a:hover{text-decoration:underline}
.foot-date::before{content:" · "}
@media (max-width:560px){.foot-date{display:none}}   /* en el celu la fecha partía el renglón y corría "Login" fuera de línea; la fecha está en la página del amanecer */
nav[aria-labelledby=fg] ul{columns:2;column-gap:2rem}
.foot-lang{margin-top:1.4rem}
.foot-lang button{min-height:calc(2.6rem - 2px)}   /* 2.6rem con el borde: el alto de la familia de botones (el de arriba es de la primera pantalla, cerrada) */
@media (max-width:760px){.foot-lang button{min-height:44px}}
.foot-wm{margin:4rem 0 1rem;overflow:hidden}
.foot-wm .wordmark{width:100%;height:auto;position:relative}
.foot-wm .wordmark.lt{background:none;-webkit-mask:none;mask:none}
.foot-wm .wordmark.lt i{position:absolute;inset:0;background:var(--ink);-webkit-mask:url(../img/logo.png) center/contain no-repeat;mask:url(../img/logo.png) center/contain no-repeat;
  clip-path:inset(0 calc(100% - var(--b)) 0 var(--a));transition:translate 1s var(--ease),opacity .8s var(--ease);transition-delay:calc(var(--k) * 45ms)}
.js .foot-wm:not(.in) .wordmark.lt i{translate:0 75%;opacity:0}
.legal{font-size:.75rem;color:var(--ink-2);margin:0}
@media (max-width:760px){.foot-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-cols>nav{grid-column:1/-1}.foot li a{padding:.6rem 0}.foot{padding-bottom:5rem}}
@media (max-width:420px){.foot-cols{grid-template-columns:minmax(0,1fr)}.foot li a{overflow-wrap:anywhere}}

.demo-note{margin:0;font-size:.72rem;color:var(--ink-2);background:color-mix(in srgb,var(--page) 90%,transparent);border:1px solid var(--line);padding:.4rem .9rem;border-radius:999px;max-width:calc(100vw - 2*var(--gut) - 30rem);text-align:left}
@media (max-width:760px){.demo-note{position:absolute;left:var(--gut);bottom:calc(100% - 100svh + var(--gut));z-index:29;max-width:calc(100vw - 2*var(--gut) - 4rem);border-radius:14px;background:var(--page)}}   /* arriba no entra: va al pie de la pantalla, medido desde .top (fija), siempre visible mientras haya datos de ejemplo */

/* ---------- dock de trabajo (no es parte del diseño) ---------- */
.dock{position:fixed;right:var(--gut);bottom:var(--gut);z-index:35;font:500 .7rem/1.2 var(--ui)}
.dock-t{min-width:44px;min-height:44px;border-radius:999px;background:var(--ink);color:var(--page);padding:0 .9rem;letter-spacing:.06em}
.dock-in{position:absolute;right:0;bottom:3.4rem;background:var(--page);border:1px solid var(--line);border-radius:10px;padding:.9rem;display:grid;gap:.7rem;width:max-content;box-shadow:0 20px 40px -20px rgba(0,0,0,.3)}
.dock-in>div{display:flex;gap:.3rem;align-items:center}
.dock-in b{width:4.8rem;color:var(--ink-2);font-weight:500}
.dock-in button{min-height:34px;padding:0 .7rem;border:1px solid var(--line);border-radius:999px}
.dock-in button[aria-pressed=true]{background:var(--ink);color:var(--page);border-color:var(--ink)}
html.clean .dock{display:none}
/* fotos de producto (-card, -mul): el mismo tratamiento que los recuadros del inicio, sin multiply, y LLENAN su recuadro
   (object-fit:cover): no hay borde entre foto y recuadro (vuelta home-r3) */

/* ---------- movimiento al bajar (referencias: prompt-motion, designspells) ---------- */
.js .reveal{opacity:0;translate:0 1.4rem;filter:blur(6px);transition:opacity 1s var(--ease),translate 1.1s var(--ease),filter 1s var(--ease)}
.js .reveal.in{opacity:1;translate:0 0;filter:blur(0)}
.js .tile.rise{opacity:0;translate:0 1rem;transition:opacity .8s var(--ease),translate .9s var(--ease)}
.js .tile.rise.in{opacity:1;translate:0 0}
.js .display.split-words .w{display:inline-block;opacity:0;translate:0 .35em;filter:blur(5px);transition:opacity .9s var(--ease),translate 1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.js .display.split-words.in .w{opacity:1;translate:0 0;filter:blur(0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .tile.rise,.js .display.split-words .w{opacity:1!important;translate:none!important;filter:none!important}
  .intro{display:none}
  html.intro-on .globe-wrap,html.intro-on .hero-objs,html.intro-on .hero-copy{opacity:1;scale:1}
  .js .foot-wm .wordmark.lt i{translate:none;opacity:1}
}

/* ---------- menú de arriba a la izquierda (pedido de Andrea, 2026-11-13) ----------
   Como en las fotos que mandó: íconos de línea fina, "EN" con flechita, y los enlaces en texto simple. */
.nav{display:flex;align-items:center;gap:.4rem;font-family:var(--sans)}
.nav-pop{position:relative}
.nav-ico{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;min-width:44px;justify-content:center;padding:0 .35rem;color:var(--ink)}
.nav-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav-ico .nav-chev{width:14px;height:14px;stroke-width:1.6;color:var(--ink-2);transition:rotate .25s var(--ease)}
.nav-pop.open .nav-chev{rotate:180deg}
.nav-lang-code{font:600 .82rem/1 var(--ui);letter-spacing:.14em}
.nav-menu{position:absolute;top:calc(100% + .3rem);left:0;min-width:10rem;padding:.4rem;background:var(--page);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.nav-menu[hidden]{display:none}
.nav-lang .nav-menu button{display:block;width:100%;min-height:40px;padding:0 .8rem;text-align:left;font:400 .95rem/1 var(--sans);color:var(--ink-2);border-radius:8px}
.nav-lang .nav-menu button:hover{background:var(--beige)}
.nav-lang .nav-menu button[aria-pressed=true]{color:var(--ink);font-weight:500}
.nav-find-box{width:17rem;padding:.9rem}
.nav-find-box label{display:block;margin-bottom:.6rem;font:400 .85rem/1.3 var(--sans);color:var(--ink-2)}
.nav-find-box div{display:flex;align-items:center;gap:.4rem}
.nav-find-box span{font:500 1.1rem/1 var(--ui);color:var(--ink-2)}
.nav-find-box input{flex:1;min-width:0;min-height:40px;padding:0 .6rem;font:500 1.05rem/1 var(--ui);letter-spacing:.06em;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:8px}
.nav-find-box input:focus{outline:2px solid var(--ink);outline-offset:1px}
.nav-find-box .pill{min-height:40px}
.nav-burger{display:none}
.nav-links{display:flex;align-items:center;gap:1.6rem;margin-left:1rem}
.nav-links a{font:400 1.05rem/1 var(--sans);text-decoration:none;color:var(--ink);white-space:nowrap;padding:.8rem 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .55rem)/0 1px no-repeat;transition:background-size .3s var(--ease)}
.nav-links a:hover{background-size:100% 1px}
@media (max-width:980px){
  .nav{gap:0}
  .nav-burger{display:inline-flex}
  .nav-links{display:none;position:absolute;top:calc(100% + .3rem);left:0;margin:0;flex-direction:column;align-items:stretch;gap:0;min-width:13rem;padding:.4rem;background:var(--page);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
  .nav-links-wrap.open .nav-links{display:flex}
  .nav-links a{padding:.9rem .8rem;border-radius:8px;background:none}
  .nav-links a:hover{background:var(--beige)}
}
@media (max-width:760px){.nav-find-box{left:-44px;width:min(17rem,calc(100vw - 2 * var(--gut)))}}
/* en el celular el logo se achica lo justo para que entre al lado del menú */
@media (max-width:760px){.top{gap:.3rem}.top .wordmark{flex:0 1 229px;min-width:0;width:229px;height:auto}.nav-ico{padding:0 .2rem}}

/* ---------- pedidos de Andrea, 2026-11-13 ---------- */
/* la cama y el Ecofiltro: más grandes y sin el recuadro de atrás. La foto trae fondo #efefeb: se aclara hasta el color de la página
   y los bordes se esfuman, así no se ve el cuadrado */
.hero{--tile:min(14rem,25svh)}
.obj-tile{background:none;overflow:visible}
.obj-tile img{filter:brightness(1.038);-webkit-mask:radial-gradient(closest-side,#000 78%,transparent);mask:radial-gradient(closest-side,#000 78%,transparent)}
/* (Andrea, 2026-11-15: "este borde se ve raro") el esfumado redondo comía la punta de la manta, que llega casi al borde de la foto.
   Ahora solo se esfuma una franja finita en los cuatro bordes, así la manta queda entera y el cuadrado igual no se ve */
.obj-tile img{-webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
@media (max-width:1180px) and (min-width:761px){.hero{--tile:min(13rem,24svh)}}
@media (max-width:760px){.hero{--mt:min(40vw,10rem)}}
/* el idioma, más chico */
.nav-lang-btn{gap:.25rem}
.nav-lang-btn svg{width:17px;height:17px}
.nav-lang-btn .nav-chev{width:11px;height:11px}
.nav-lang-code{font-size:.7rem;letter-spacing:.12em}
/* "cool": las dos O se vuelven ∞ (lo que das, vuelve). Ciclo de 7 s, empieza después de la intro */
.cool{white-space:nowrap}
.oo{position:relative;display:inline-block}
.oo-t{display:inline-block;animation:oo 7s 2.6s infinite both}
.inf{position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.62em;width:calc(100% + .08em);overflow:visible}
.inf path{fill:none;stroke:currentColor;stroke-width:17;stroke-linecap:round;stroke-linejoin:round;vector-effect:none;stroke-dasharray:1;stroke-dashoffset:1;animation:inf 7s 2.6s infinite both}
@keyframes oo{0%,30%{opacity:1;transform:none}40%{opacity:0;transform:scaleX(.7)}86%{opacity:0;transform:scaleX(.7)}96%,100%{opacity:1;transform:none}}
@keyframes inf{0%,32%{stroke-dashoffset:1;opacity:1}52%{stroke-dashoffset:0;opacity:1}84%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.oo-t,.inf path{animation:none}}
/* sección 2: tu luz enciende otras luces (animación a la izquierda) */
.glow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:4rem;padding-top:6rem!important}
.glow-anim{max-width:30rem;width:100%;justify-self:center}
.glow-anim svg{display:block;width:100%;height:auto;overflow:visible}
.glow-ring{fill:none;stroke:var(--line);stroke-width:1;opacity:.35}
.glow .lt .halo{opacity:0;transform-box:fill-box;transform-origin:center}
.glow .lt .core{fill:#d9d5cc}
.glow .spark{opacity:0}
.glow-tx{max-width:28rem}
.glow-tx h2{margin-bottom:1rem}
.glow-tx p{color:var(--ink-2);text-wrap:pretty}
@media (max-width:760px){.glow{grid-template-columns:1fr;gap:2rem}.glow-anim{max-width:20rem}}
/* números de las gotas del globo (Andrea, 2026-11-13) */
.drop-labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.drop-labels span{position:absolute;left:0;top:0;font:500 clamp(.8rem,1.3vw,1.05rem)/1 var(--display);letter-spacing:.02em;color:#fff6e2;text-shadow:0 1px 6px rgba(0,0,0,.45);opacity:0;white-space:nowrap}
/* sección 3: cómo funciona */
.how{padding-top:6rem!important}
.how h2{margin-bottom:2.2rem}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
.how-steps li{border-top:1px solid var(--line);padding-top:1.2rem}
.how-n{display:block;font:500 .8rem/1 var(--ui);letter-spacing:.1em;color:var(--ink-2);margin-bottom:1.4rem}
.how-steps h3{margin-bottom:.6rem}
.how-steps p{color:var(--ink-2);max-width:22rem;text-wrap:pretty}
@media (max-width:760px){.how-steps{grid-template-columns:1fr;gap:2rem}}
/* cama y Ecofiltro animados, como el video de Hermès de Andrea: la almohada se levanta y se acomoda, la manta se mece;
   en el Ecofiltro un vaso llega debajo de la canilla, se llena y se va. Solo se mueve mientras se ve (js/glow.js pone .play) */
.two-img{position:relative}
.two-img .lay{position:absolute;inset:0}
.lay-pillow{clip-path:polygon(5% 24%,33% 17%,46% 27%,44% 31%,15% 38%,6% 31%);transform-origin:25% 36%}
.lay-blanket{clip-path:polygon(35% 29%,45% 27%,62% 37%,82% 48%,95% 60%,96% 72%,82% 73%,80% 62%,62% 55%,40% 41%,34% 34%);transform-origin:40% 28%}
.anim-bed.play .lay-pillow{animation:pillow 6s ease-in-out infinite}
.anim-bed.play .lay-blanket{animation:blanket 6s ease-in-out infinite}
@keyframes pillow{0%,55%,100%{transform:none}18%{transform:translateY(-2.6%) rotate(-2deg) scale(1.02)}32%{transform:translateY(.3%) rotate(.4deg)}42%{transform:none}}
@keyframes blanket{0%,100%{transform:none}30%{transform:skewX(-2.2deg) translateX(.6%)}60%{transform:skewX(1deg) translateX(-.3%)}}
.pour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pour .glass{opacity:0}
.pour .water-g{transform:translateY(0)}
.pour .stream{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
.anim-filter.play .glass{animation:glass 8s cubic-bezier(.22,.61,.24,1) infinite}
.anim-filter.play .water-g{animation:fill 8s ease-in-out infinite}
.anim-filter.play .stream{animation:stream 8s linear infinite}
@keyframes glass{0%{opacity:0;transform:translateX(120px)}12%{opacity:1;transform:none}78%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(120px)}}
@keyframes stream{0%,15%{transform:scaleY(0);transform-origin:50% 0}20%{transform:scaleY(1);transform-origin:50% 0}58%{transform:scaleY(1);transform-origin:50% 100%}63%,100%{transform:scaleY(0);transform-origin:50% 100%}}
@keyframes fill{0%,19%{transform:translateY(0)}60%,100%{transform:translateY(-118px)}}
@media (prefers-reduced-motion:reduce){.anim-bed .lay,.pour{display:none}}
.two-card:hover .pour{scale:1.035}.pour{transition:scale 1.2s var(--ease)}
/* pie de página más chico (Andrea, 2026-11-13): todo queda a la derecha y a la izquierda queda aire, la idea de derecha a izquierda */
@media (min-width:761px){
  .foot{padding:2.6rem var(--gut) 1.2rem calc(var(--gut) + 38vw)}
  .foot-cols{grid-template-columns:1.4fr 1fr 1fr;gap:1.6rem;margin-left:-38vw;max-width:56rem}   /* el menú va a la izquierda (Andrea, 2026-11-14); el logo grande sigue a la derecha */
  .foot-wm{margin:2.6rem 0 .8rem}
}
@media (max-width:760px){.foot-wm{width:70%;margin:2.6rem 0 .8rem auto}}
.foot li a{font-size:.85rem}
@media (max-width:760px){.display.xl,.mother-tx .display.xl{font-size:min(2.6rem,10.4vw)}}   /* "consciousness" entra entera en el celu */
@media (prefers-reduced-motion:reduce){.inf-dot{display:none}}   /* la luz que va de una O a la otra y dibuja el ∞ */
/* "cool" (Andrea, 2026-11-13): sin el signo ∞. Las O quedan siempre; solo una luz dorada las recorre en forma de ocho */
.oo-t{animation:none}
.inf path{display:none}
/* frase de arriba: una idea por renglón (Andrea, 2026-11-13); "Lago de Atitlán, Guatemala" abre la ventanita del lago */
.hero-p{max-width:30rem}
.hero-line{display:block}
.place-link{font:inherit;color:var(--ink);padding:0;border-bottom:1px solid currentColor;cursor:pointer;transition:color .3s var(--ease)}
.place-link:hover{color:#b8641f}
/* ventanita del Lago de Atitlán */
dialog.lake{width:min(92vw,46rem);max-width:none;max-height:none;padding:0;border:0;border-radius:var(--r);background:#0b0f16;color:#fff;overflow:hidden}
dialog.lake::backdrop{background:rgba(10,10,10,.6);backdrop-filter:blur(4px)}
.lk-stage{position:relative;aspect-ratio:1;overflow:hidden;background:radial-gradient(circle at 50% 50%,#121a28,#05070b)}
.lk-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity}
.lk-layer:first-child{opacity:1}
dialog.lake .x{position:absolute;top:.6rem;right:.6rem;z-index:3;width:44px;height:44px;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.35);border-radius:50%}
dialog.lake .x svg{width:20px;height:20px}
.lk-cap{position:absolute;left:1.2rem;right:1.2rem;bottom:2.6rem;z-index:2;margin:0;font:500 clamp(1.1rem,3vw,1.6rem)/1.15 var(--display);letter-spacing:var(--display-ls);text-transform:lowercase;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.lk-again{position:absolute;right:1.2rem;bottom:2.6rem;z-index:3;font:500 .72rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:.7rem 1rem}
.lk-again[hidden]{display:none}
.lk-credit{position:absolute;left:1.2rem;right:1.2rem;bottom:.8rem;z-index:2;margin:0;font-size:.62rem;line-height:1.3;color:rgba(255,255,255,.65)}
.lk-again{top:.8rem;left:1.2rem;right:auto;bottom:auto;background:rgba(0,0,0,.35)}
div.lk-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk-border{position:absolute;inset:0;width:100%;height:100%}
.lk-border path{fill:rgba(255,226,160,.08);stroke:#ffe2a0;stroke-width:3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(245,179,77,.8))}
/* cielo detrás del lago cuando la cámara se inclina (bajada tipo drone) */
.lk-sky{position:absolute;inset:0;opacity:0;background:linear-gradient(#8fb0d3 0%,#c9d9e8 45%,#e9eef2 60%,#6f8a74 100%)}
.lk-stage{perspective:900px}
.legal-credit{display:block;margin-top:.3rem;opacity:.75}
.lk-cap{bottom:1.2rem}
.lk-3d canvas{position:absolute;inset:0;width:100%;height:100%}
.glow-tx .glow-sub{font:500 .82rem/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:-.2rem 0 1rem}
/* tarjetas de la cama y el Ecofiltro: el enlace adentro y "Saber más +" abajo */
.two-link{display:block;text-decoration:none}
.two-card:hover .two-img img{scale:1}
.two-link:hover .two-img img{scale:1.035}
.more-btn{margin-top:.9rem;font:500 .72rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:.75rem 1.1rem;transition:background .3s var(--ease),color .3s var(--ease)}
.more-btn:hover{background:var(--ink);color:var(--page)}
/* ventanita de cada producto */
dialog.info{width:min(92vw,58rem);max-width:none;max-height:90svh;padding:0;border:0;border-radius:var(--r);background:var(--page);color:var(--ink);overflow:auto}
dialog.info::backdrop{background:rgba(10,10,10,.5);backdrop-filter:blur(4px)}
dialog.info[open]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.info-img{background:var(--beige)}
.info-img img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1.08}
.info-tx{padding:2.4rem 2.2rem}
.info-tx .cap{color:var(--ink-2);margin-bottom:.7rem}
.info-tx h2{margin-bottom:1rem}
.info-tx p{text-wrap:pretty}
.info-tx p:not(.cap){color:var(--ink-2)}
.info-tx .info-by{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--ink)}
.info-tx .pill{margin-top:1.6rem}
dialog.info .x{position:absolute;top:.6rem;right:.6rem;z-index:2;width:44px;height:44px;display:grid;place-items:center;background:color-mix(in srgb,var(--page) 80%,transparent);border-radius:50%}
dialog.info .x svg{width:20px;height:20px}
@media (max-width:760px){dialog.info[open]{grid-template-columns:1fr}.info-img img{aspect-ratio:4/3}.info-tx{padding:1.6rem 1.3rem 2rem}}

/* cama (Andrea, 2026-11-14): la almohada queda quieta; la manta se mueve como tela, con ondas suaves que pasan (filtro #cloth) */
.cloth-defs{position:absolute;width:0;height:0}
.anim-bed .lay-pillow{display:none}
.anim-bed.play .lay-pillow,.anim-bed.play .lay-blanket{animation:none}
.anim-bed.play .lay-blanket{filter:url(#cloth);animation:drape 7s ease-in-out infinite}
@keyframes drape{0%,100%{transform:none}50%{transform:translateY(.35%) skewX(-.6deg)}}
/* filtro (Andrea, 2026-11-14: "casi no veo el agua"): mientras cae el agua, la imagen se acerca a la canilla y al vaso, y después se aleja */
.anim-filter > img,.anim-filter .pour{transform-origin:77% 92%}
.anim-filter.play > img,.anim-filter.play .pour{animation:closeup 8s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes closeup{0%,10%{transform:scale(1)}24%,66%{transform:scale(2.3)}80%,100%{transform:scale(1)}}
.tile-img.is-face img,html.grid-4 .tile-img.is-face img{object-fit:cover}

/* Ecofiltro (Andrea, 2026-11-14): sus fotos del vaso llenándose, como el video de Hermès: cortes secos, cuadro por cuadro
   (sin fundido), y un leve acercamiento. Lo mueve js/glow.js; al pasar el mouse o tocar, se vuelve a servir el vaso */
.anim-filter .vaso{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:68% 76%;opacity:0}
.anim-filter .vaso.on{opacity:1}
.anim-filter.play{animation:none}
.anim-filter .vasos{position:absolute;inset:0;transform-origin:68% 76%;transition:transform 1.6s cubic-bezier(.45,.05,.35,1)}
.anim-filter.near .vasos{transform:none}

/* cuadro por cuadro (cama y Ecofiltro): mismas reglas para las dos tarjetas */
.anim-frames .vaso{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.anim-frames .vaso.on{opacity:1}
.anim-frames .vasos{position:absolute;inset:0;transition:transform 1.6s cubic-bezier(.45,.05,.35,1)}
.anim-filter .vasos{transform-origin:68% 76%}
.anim-bed .vasos{transform-origin:30% 30%}
.anim-filter.near .vasos{transform:none}
.anim-bed.near .vasos{transform:none}
.anim-bed.play .lay-blanket{animation:none;filter:none}
/* Who we are: por qué, quiénes somos y Mar de Conciencia (Andrea, 2026-11-14) */
.about{padding-top:5rem!important}
.about-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:1px;padding:2.2rem 0;border-top:1px solid var(--line)}
.about-row:last-child{border-bottom:1px solid var(--line)}
.about-row h2{grid-column:1/4;padding-right:2rem}
.about-row > div{grid-column:4/8;max-width:36rem}
.about-row p,.about-row li{color:var(--ink-2);text-wrap:pretty}
.about-row ul{margin:1rem 0 0;padding-left:1.1rem}
.about-row li{margin:.4rem 0}
.about-row .about-close{margin-top:1rem;color:var(--ink);font-weight:500}
@media (max-width:760px){.about-row{display:block}.about-row h2{padding:0;margin-bottom:.8rem}}
/* página Qué hacemos (Andrea, 2026-11-14) */
.wwd-top{padding:clamp(9rem,20vh,13rem) var(--gut) 1rem;max-width:62rem}
.wwd-top p:last-child{max-width:34rem;margin-top:1rem}
.how .page-head{margin-bottom:2.2rem}
/* siluetas quietas (Andrea, 2026-11-14): sin acercamiento al pasar el mouse ni subida al aparecer */
.tile-img.is-face img,.tile:hover .tile-img.is-face img,.face-img img,a:hover .face-img img{scale:1!important;transition:none!important}
.js .tile.rise:has(.is-face){opacity:1;translate:none;transition:none}
.sq-top{padding-top:6rem!important}
/* cuadros de "How it works" (Andrea, 2026-11-14): fondo azul profundo como el globo; el cuadro 3 es la Tierra real y el lago en 3D */
.sq-art{background:#0d1829}
.sq3{position:absolute;inset:0;overflow:hidden;background:#0d1829}
.sq3 > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.sq3 > canvas.g{opacity:1}
.sq-art .sq3 + svg{pointer-events:none}
/* Nuestro porqué (Andrea, 2026-11-14): fotos que pasan despacio de derecha a izquierda, y el texto */
.why-top{padding:clamp(6.5rem,13vh,8.5rem) 0 4rem!important}
.why-reel{overflow:hidden;margin-bottom:3rem}
.why-track{display:flex;width:max-content;will-change:transform}
.why-track img{height:clamp(18rem,52vh,34rem);width:auto;margin-right:var(--gap);border-radius:var(--r);object-fit:cover}
.why-tx{padding:0 var(--gut);max-width:46rem}
.why-tx > p:not(.eyebrow){color:var(--ink-2);margin-top:1rem}
.why-text:empty{display:none}
.why-text{margin-top:1.4rem;white-space:pre-line}
/* Nuestro porqué: dos opciones (A/B) */
.why-a{display:none!important}
.why-opt-a .why-a{display:grid!important}
.why-opt-a .why-b{display:none!important}
.why-a{padding-top:6.5rem!important}
@media (max-width:900px){.why-opt-a .why-a{display:block!important}}
/* A: la foto a la izquierda queda quieta y a la derecha van el título y los tres textos, lado a lado (Andrea, 2026-11-14) */
.why-opt-a .about{display:none!important}
.why-a{align-items:start!important;padding-bottom:5rem!important}
.why-a .mother-img{position:sticky;top:6rem}
.why-side > div{border-top:1px solid var(--line);padding-top:1.6rem;margin-top:2.4rem}
.why-side h2{margin-bottom:.9rem}
.why-side p,.why-side li{color:var(--ink-2);max-width:33rem}
.why-a .mother-tx .why-side p{margin:0}
.why-side ul{margin:1rem 0 1rem 1.1rem;padding:0}
.why-side li{margin-bottom:.5rem}
.why-a .mother-tx .why-side .about-close{color:var(--ink);margin-top:1rem}
@media (max-width:900px){.why-a .mother-img{position:relative;top:0}}
/* Nuestro porqué A: las fotos pasan de a una, de derecha a izquierda (Andrea, 2026-11-14) */
.why-car .why-car-track{position:absolute;inset:0;display:flex;width:600%;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.why-car .why-car-track img{position:relative;inset:auto;flex:0 0 calc(100% / 6);width:calc(100% / 6);height:100%;object-fit:cover}
/* Qué hacemos (Andrea, 2026-11-15): el título más abajo, que no quede debajo del menú (la regla [data-page]>section le sacaba el espacio);
   en esta página las tarjetas muestran el nombre, una frase y el texto largo; al final, la frase de compartir y el botón a donar */
[data-page]>.wwd-top{padding-top:clamp(7rem,16vh,10rem)}
.two-tx .wwd-tx{display:none}
.wwd-slot .two-tx .wwd-tx{display:block}
.wwd-slot .two-tx .home-tx{display:none}
.wwd-tx .wwd-sub{color:var(--ink);font-weight:500;margin-bottom:.4rem}
[data-page]>.wwd-close{padding-top:5rem;padding-bottom:6rem;text-align:center}
.wwd-close p{max-width:34rem;margin:0 auto 1.6rem;text-wrap:pretty}
/* registro en el inicio (Andrea, 2026-11-15): el texto va debajo del título, no a la derecha */
.reg-home .sec-head,html.grid-4 .reg-home .sec-head{display:block}
.reg-home .sec-head p,html.grid-4 .reg-home .sec-head p{margin-top:.9rem;max-width:30rem}
/* Donaciones (Andrea, 2026-11-15): un poquito de aire entre el título "how it works" y los cuadros */
.sq-top #sq-h{margin-bottom:1rem}
/* Quiénes somos (Andrea, 2026-11-15): una frase corta debajo de "everything starts with consciousness" */
.why-sub{color:var(--ink);margin:1rem 0 0;max-width:30rem;text-wrap:pretty}
@media (max-width:760px){[data-page="our-why"] h1.display.xl{font-size:min(2.6rem,9.2vw);max-width:none}}   /* "consciousness" entra entera en el celu */
/* link a Mar de Conciencia en Quiénes somos (Andrea, 2026-11-15) */
.mdc-a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;transition:color .3s var(--ease)}
.mdc-a:hover{color:#b8641f}
.half-p{white-space:pre-line}   /* Give half (Andrea, 2026-11-15): "Someone else gives…" en su propio renglón */
/* WhatsApp con código de país (Andrea, 2026-11-15): el código cortito a la izquierda, el número al lado */
.f-wa-row{display:flex;gap:.5rem}
.f-wa-row .f-wa-code{flex:0 0 4.6rem;min-width:0}
.f-wa-row input[name=phone]{flex:1;min-width:0}
/* ficha de un número con el formato de Andrea (2026-11-15): arriba CAMA #001 · ENTREGADA, abajo "Donada por…" */
.story-kick{font:500 .72rem/1.5 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.9rem}
.story-by{margin:1.4rem 0;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.92rem}
/* flechas < > a los costados de las fotos de Nuestro porqué (Andrea, 2026-11-15): chiquitas, sin círculo blanco, transparentes */
.why-reel{position:relative}
.side-arrows > button{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:32px;height:32px;padding:0;background:none;color:#fff;display:grid;place-items:center;opacity:.75;transition:opacity .2s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.side-arrows > button:hover{opacity:1}
.side-arrows > button:focus:not(:focus-visible){outline:none}
.side-arrows > .prev{left:.4rem}.side-arrows > .next{right:.4rem}
.side-arrows > button svg{width:20px;height:20px}
/* Follow your gift (Andrea, 2026-11-15): título arriba, las seis frases en una fila con líneas entre ellas */
.tracked.tr-row{display:block}
.tracked.tr-row > h2{margin:-.14em 0 2rem;padding:0}
.tr-row .promises{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0}
.tr-row .promises li{border-top:0;border-left:1px solid var(--line);padding:1.4rem 1.2rem 1.6rem;min-height:9rem}
.tr-row .promises li:first-child{border-left:0;padding-left:0}
@media (max-width:1100px){.tr-row .promises{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tr-row .promises li:nth-child(4){border-left:0;padding-left:0}
  .tr-row .promises li:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:560px){.tr-row .promises{grid-template-columns:1fr 1fr}
  .tr-row .promises li{min-height:0}
  .tr-row .promises li:nth-child(4){border-left:1px solid var(--line);padding-left:1.2rem}
  .tr-row .promises li:nth-child(odd){border-left:0;padding-left:0}
  .tr-row .promises li:nth-child(n+3){border-top:1px solid var(--line)}}
.tr-find{display:inline-flex;align-items:center;gap:.7rem;margin-top:2rem;padding:.4rem 0;font-size:1rem;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s}
.tr-find:hover{border-bottom-color:currentColor}
.tr-find svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tr-row .tr-find{display:flex;margin-top:1.2rem;font-size:inherit;text-align:left}
.tr-row .promises li:has(.tr-inf){display:flex;flex-direction:column}
.tr-inf{display:block;width:3.4rem;height:1.7rem;margin:1rem auto auto;overflow:visible}   /* en el medio del cuadro (Andrea, 2026-11-15) */
.tr-inf path{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.tr-inf circle{display:none}}