/* =====================================================================
   MAREA (oct. 2026) — el lenguaje rompedor de This is my message
   Capa sobre app.css + under.css (body.look-under.marea). Mar a sangre, tipografía que no cabe,
   la botella haciendo cosas (cargador, menú, progreso, sello) y objetos de correo: billetes, ventanas, matasellos.
   Sistema de diseño: «Marea» (claude.ai). Tipos: Bricolage Grotesque (display condensada y texto),
   Instrument Serif cursiva (la voz) y JetBrains Mono (datos, billetes, ventanas).
   ===================================================================== */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("fonts/bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens: espuma de día, noche cerrada de noche ---------- */
.look-under, :root:has(body.look-under) {
  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --m-mar: #1F2BFF; --m-mar2: #2E39FF; --m-espuma: #F4F0E6; --m-vidrio: #2CE5A7; --m-coral: #FF5A36; --m-sol: #FFD23F; --m-tinta: #101014;
  --paper: #F4F0E6; --white: #FFFFFF; --surface2: #FFFFFF; --ink: #101014; --ink2: #2E2D35; --muted: #5F5E69;
  --line: #D8D2C3; --line2: #101014; --line-strong: #B9B2A2; --hover-line: #101014;
  --teal: #1F2BFF; --teal-h: #1520D9; --teal-deep: #1520B8; --teal-light: #6F78FF; --teal-soft: #D7DAFF; --teal-mist: #ECEDFF;
  --naranja: #FF5A36; --naranja-h: #F04A26; --naranja-text: #C42E14; --naranja-soft: #FFE1D8; --naranja-deep: #8E2516;
  --sun: #FFD23F; --sun-h: #F5C20F; --sun-text: #7A5A00; --sun-deep: #5E4500; --sun-soft: #FFF3C4; --cream: #FFF3C4; --cream-soft: #FFF9E3;
  --hero-accent: #1F2BFF; --hero-glow: transparent; --calm: #F4F0E6;
  --sea: #1F2BFF; --sea-grid: #2E39FF; --land: #F4F0E6; --land-line: #101014;
  --glass: rgba(244,240,230,.92); --glass0: rgba(244,240,230,0);
  --m-ease: cubic-bezier(.2, .8, .2, 1); --m-muelle: cubic-bezier(.34, 1.56, .64, 1);
}
:root[data-theme="dark"]:has(body.look-under), :root[data-theme="dark"] .look-under {
  --m-mar: #3D48FF; --m-mar2: #4D57FF; --m-coral: #FF6B4A;
  --paper: #0D0D11; --white: #17171D; --surface2: #17171D; --ink: #F4F0E6; --ink2: #CFCBC2; --muted: #A4A3AE;
  --line: #2A2A33; --line2: #F4F0E6; --line-strong: #45454F; --hover-line: #F4F0E6;
  --teal: #8A92FF; --teal-h: #A6ACFF; --teal-deep: #B4B9FF; --teal-light: #6F78FF; --teal-soft: #1C1F4A; --teal-mist: #14162E;
  --naranja: #FF6B4A; --naranja-h: #FF8566; --naranja-text: #FF8A6E; --naranja-soft: #2B1512;
  --sun-text: #FFD23F; --sun-soft: #2A2410; --cream: #2A2410; --cream-soft: #1E1A0C;
  --hero-accent: #8A92FF; --sea: #3D48FF; --sea-grid: #4D57FF; --land: #17171D; --land-line: #F4F0E6;
  --glass: rgba(13,13,17,.9); --glass0: rgba(13,13,17,0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):has(body.look-under), :root:not([data-theme="light"]) .look-under {
    --m-mar: #3D48FF; --m-mar2: #4D57FF; --m-coral: #FF6B4A;
    --paper: #0D0D11; --white: #17171D; --surface2: #17171D; --ink: #F4F0E6; --ink2: #CFCBC2; --muted: #A4A3AE;
    --line: #2A2A33; --line2: #F4F0E6; --line-strong: #45454F; --hover-line: #F4F0E6;
    --teal: #8A92FF; --teal-h: #A6ACFF; --teal-deep: #B4B9FF; --teal-light: #6F78FF; --teal-soft: #1C1F4A; --teal-mist: #14162E;
    --naranja: #FF6B4A; --naranja-h: #FF8566; --naranja-text: #FF8A6E; --naranja-soft: #2B1512;
    --sun-text: #FFD23F; --sun-soft: #2A2410; --cream: #2A2410; --cream-soft: #1E1A0C;
    --hero-accent: #8A92FF; --sea: #3D48FF; --sea-grid: #4D57FF; --land: #17171D; --land-line: #F4F0E6;
    --glass: rgba(13,13,17,.9); --glass0: rgba(13,13,17,0);
  }
}

/* ---------- tipografía: display condensada que se sale ---------- */
.marea { font-family: var(--font); }
.marea.look-under .h1, .marea.look-under .h2, .marea.look-under .m-disp, .marea.look-under .u-h1, .marea.look-under .u-h2, .marea.look-under .u-k, .marea.look-under .lc-h, .marea.look-under .stepping .q .qt, .marea.look-under .post-h, .marea.look-under .u-closing h2 {
  font-family: var(--font); font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" 96; font-weight: 800; letter-spacing: -.045em; text-transform: uppercase; }
.marea.look-under .h1 { font-size: clamp(52px, 8.4vw, 140px); line-height: .86; }
.marea.look-under .h2 { font-size: clamp(36px, 4.8vw, 76px); line-height: .9; }
.marea.look-under .h3 { font-weight: 800; letter-spacing: -.02em; }
.marea.look-under .m-voz, .marea.look-under .voz { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.marea.look-under .m-mono, .marea.look-under .cap { font-family: var(--mono); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.marea ::selection { background: var(--m-sol); color: #101014; }

/* ---------- botones: coral con tinta, rebote al pasar ---------- */
.marea.look-under .btn { border-radius: 999px; font-weight: 800; letter-spacing: -.01em; transition: transform .35s var(--m-muelle), background .2s, color .2s, box-shadow .2s; }
.marea.look-under .btn:hover { transform: translateY(-3px) rotate(-1.2deg); }
.marea.look-under .btn:active { transform: scale(.96); }
.marea.look-under .btn.primary, .marea.look-under .btn.inv, .marea.look-under .to-filters { background: var(--m-coral); color: #101014; box-shadow: none; }
.marea.look-under .btn.primary:hover, .marea.look-under .btn.inv:hover, .marea.look-under .to-filters:hover { background: var(--m-coral); color: #101014; box-shadow: 6px 6px 0 var(--ink); }
.marea.look-under .btn.primary.next, .marea.look-under .btn.primary.xl, .marea.look-under .composer .btn.send, .marea.look-under .qnav .btn.finish { box-shadow: 0 0 0 0 transparent; }
.marea.look-under .btn.primary.xl { height: 68px; padding: 0 34px; font-size: 20px; }
.marea.look-under .btn.line { border: 2px solid var(--ink); color: var(--ink); background: transparent; }
.marea.look-under .btn.line:hover { background: var(--ink); color: var(--paper); }
.marea.look-under .btn .bob path:first-child { fill: transparent; }
.marea.look-under .btn.danger { border-width: 2px; }

/* ---------- navegación ---------- */
.marea.look-under .pubnav { height: 84px; }
.marea.look-under .pubnav .links { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.marea.look-under .mark .iso { color: var(--ink); }
.marea.look-under .menubtn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: transform .35s var(--m-muelle), background .2s; }
.marea.look-under .menubtn:hover { transform: rotate(-3deg) scale(1.04); background: var(--m-sol); color: #101014; }
.marea.look-under .menubtn svg { width: 34px; height: 20px; fill: none; stroke: currentColor; stroke-width: 6; stroke-linejoin: round; transition: transform .5s var(--m-muelle); }
.marea.look-under .menubtn:hover svg { transform: rotate(-18deg) translateY(-2px); }
.marea.look-under .appnav { background: var(--glass); border-bottom: 2px solid var(--ink); }
.marea.look-under .appnav .journey .st.on b, .marea.look-under .appnav .journey .st b { font-family: var(--mono); }
@media (max-width: 860px) { .marea.look-under .pubnav .links { display: none; } .marea.look-under .menubtn span { display: none; } .marea.look-under .menubtn { padding: 0 12px; } }

/* ---------- el menú: sube la marea ---------- */
.marea.look-under .mmenu { position: fixed; inset: 0; z-index: 90; background: var(--m-mar); color: #F4F0E6; display: grid; grid-template-rows: auto 1fr auto; padding: 22px clamp(16px, 5vw, 72px) 26px; overflow: auto; }
.marea.look-under .mmenu[hidden] { display: none; }
.marea.look-under .mmenu.on { animation: mm-rise .7s var(--m-ease) both; }
.marea.look-under .mmenu.off { animation: mm-sink .5s var(--m-ease) both; }
@keyframes mm-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mm-sink { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
.marea.look-under .mm-top { display: flex; align-items: center; justify-content: space-between; }
.marea.look-under .mm-top .mark, .marea.look-under .mm-top .mark .iso { color: #F4F0E6; }
.marea.look-under .mm-top .menubtn { background: #F4F0E6; color: #101014; border-color: #F4F0E6; }
.marea.look-under .mm-nav { align-self: center; display: grid; padding: 24px 0; }
.marea.look-under .mm-i { display: flex; align-items: baseline; gap: clamp(14px, 3vw, 32px); padding: 4px 0; border-top: 2px solid rgba(244,240,230,.24); color: #F4F0E6; opacity: 0; transform: translateY(30px); animation: mm-in .7s var(--m-ease) both; animation-delay: calc(.12s + var(--i) * .06s); }
.marea.look-under .mm-i:last-child { border-bottom: 2px solid rgba(244,240,230,.24); }
.marea.look-under .mm-i .n { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; width: 36px; flex: none; }
.marea.look-under .mm-i .t { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: -.05em; line-height: .9; font-size: clamp(56px, 10vw, 150px); text-transform: uppercase; transition: color .25s, transform .4s var(--m-muelle); }
.marea.look-under .mm-i .c { margin-left: auto; align-self: center; font-family: var(--mono); font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--m-coral); color: #101014; }
.marea.look-under .mm-i:hover .t { color: var(--m-vidrio); transform: translateX(16px) skewX(-6deg); }
@keyframes mm-in { to { opacity: 1; transform: none; } }
.marea.look-under .mm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.marea.look-under .mm-foot .mono-l { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #F4F0E6; }
.marea.look-under .mm-langs { margin-left: auto; display: flex; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.marea.look-under .mm-langs a { color: rgba(244,240,230,.7); } .marea.look-under .mm-langs a.on, .marea.look-under .mm-langs a:hover { color: #F4F0E6; text-decoration: underline; text-decoration-color: var(--m-vidrio); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.marea.look-under .mm-bottle { position: absolute; right: clamp(16px, 6vw, 90px); top: 22%; width: clamp(140px, 22vw, 340px); fill: none; stroke: #F4F0E6; stroke-width: 3.6; stroke-linejoin: round; animation: m-bob 3.2s ease-in-out infinite; pointer-events: none; opacity: .9; }
@media (max-width: 860px) { .marea.look-under .mm-bottle { display: none; } }
html.m-lock { overflow: hidden; }

/* ---------- el cargador: la botella se llena ---------- */
.marea.look-under .mloader { position: fixed; inset: 0; z-index: 100; background: #101014; color: #F4F0E6; display: grid; place-items: center; align-content: center; gap: 18px; }
.marea.look-under .mloader[hidden] { display: none; }
.marea.look-under .mloader svg { width: min(70vw, 620px); height: auto; overflow: visible; }
.marea.look-under .mloader .ml-glass { fill: none; stroke: #F4F0E6; stroke-width: 1.6; stroke-linejoin: round; }
.marea.look-under .mloader .ml-liq { fill: var(--m-vidrio); transform-box: fill-box; transform: translateY(100%); animation: ml-fill 1.15s var(--m-ease) forwards; }
.marea.look-under .mloader .ml-n { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: -.05em; font-size: clamp(64px, 12vw, 180px); line-height: .8; }
.marea.look-under .mloader .ml-n b { color: #F4F0E6; }
.marea.look-under .mloader .ml-t { font-family: var(--serif); font-style: italic; font-size: 24px; }
.marea.look-under .mloader.out { animation: ml-out .6s var(--m-ease) forwards; }
@keyframes ml-fill { to { transform: translateY(12%); } }
@keyframes ml-out { to { clip-path: inset(0 0 100% 0); } }

/* ---------- pie: la firma gigante ---------- */
.marea.look-under .footwrap { background: #101014 !important; color: #F4F0E6; overflow: hidden; --ink: #F4F0E6; --muted: #B5B3BC; --line: #2A2A33; }
.marea.look-under .footwrap a { color: #F4F0E6; } .marea.look-under .footwrap .foot { border-top: 0; }
.marea.look-under .footwrap .mark, .marea.look-under .footwrap .iso { color: #F4F0E6 !important; }
.marea.look-under .m-sign { margin: 0; padding: 0 clamp(8px, 2vw, 30px); white-space: nowrap; font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: -.06em; line-height: .78; font-size: clamp(64px, 15.6vw, 300px); color: #F4F0E6; transform: translateY(18%); user-select: none; }
.marea.look-under .m-sign em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; color: var(--m-vidrio); }
.marea.look-under .u-bigbottle { display: none; }

/* ---------- objetos de correo: ventana, billete, sello, chips ---------- */
.marea.look-under .m-win { background: var(--surface2); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 8px 8px 0 var(--ink); }
.marea.look-under .m-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 2px solid var(--ink); background: var(--m-sol); color: #101014; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.marea.look-under .m-bar i { width: 12px; height: 12px; border: 2px solid #101014; border-radius: 3px; display: block; flex: none; }
.marea.look-under .m-bar span { margin-left: 6px; text-transform: none; }
.marea.look-under .m-bar.coral { background: var(--m-coral); }
.marea.look-under .m-ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--surface2); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; }
.marea.look-under .m-cut { border-left: 3px dashed var(--line-strong); position: relative; }
.marea.look-under .m-cut::before, .marea.look-under .m-cut::after { content: ""; position: absolute; left: -16px; width: 30px; height: 30px; border-radius: 50%; background: var(--hole, var(--paper)); border: 2px solid var(--ink); }
.marea.look-under .m-cut::before { top: -16px; clip-path: inset(50% 0 0 0); } .marea.look-under .m-cut::after { bottom: -16px; clip-path: inset(0 0 50% 0); }
.marea.look-under .m-stamp { position: relative; display: grid; place-items: center; border-radius: 50%; }
.marea.look-under .m-stamp .ring { position: absolute; inset: 0; animation: m-spin 20s linear infinite; }
.marea.look-under .m-stamp .core { border-radius: 50%; background: var(--m-coral); color: #101014; display: grid; place-items: center; transform: rotate(-12deg); animation: m-stamp .9s var(--m-muelle) .2s both; }
.marea.look-under .m-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface2); color: var(--ink); font-weight: 700; font-size: 15px; }

/* ---------- formularios y paneles (todas las pantallas) ---------- */
.marea.look-under .field { border: 2px solid var(--ink); border-radius: 14px; background: var(--surface2); }
.marea.look-under .field:focus-within { border-color: var(--m-mar); box-shadow: 4px 4px 0 var(--m-mar); }
.marea.look-under .chk.big { border: 2px solid var(--ink); border-radius: 14px; }
.marea.look-under .chk.big:has(input:checked) { background: color-mix(in srgb, var(--m-vidrio) 26%, var(--surface2)); border-color: var(--ink); }
.marea.look-under .chk input, .marea.look-under .db input { accent-color: var(--m-mar); }
.marea.look-under .panel { border: 2px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); }
.marea.look-under .flash { border: 2px solid var(--ink); border-radius: 14px; background: var(--m-sol); color: #101014; box-shadow: 5px 5px 0 var(--ink); }
.marea.look-under .flash.warn { background: var(--m-coral); color: #101014; border-color: var(--ink); }
.marea.look-under .ck-in { border: 2px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink); }
.marea.look-under .compat { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: -.02em; border: 2px solid var(--ink); }
.marea.look-under .av { border: 2px solid var(--ink); }
.marea.look-under .langmenu summary { border: 2px solid var(--ink); }
.marea.look-under .totop { background: var(--m-coral); color: #101014; border: 2px solid var(--ink); }
.marea.look-under .themebtn { border: 2px solid var(--ink); }
.marea.look-under .tabbar { border-top: 2px solid var(--ink); }
.marea.look-under .tabbar a.on .ico { background: var(--m-coral); color: #101014; }

/* ---------- movimiento común ---------- */
@keyframes m-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(5deg); } }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-stamp { 0% { transform: scale(2.2) rotate(-26deg); opacity: 0; } 60% { transform: scale(.94) rotate(-11deg); opacity: 1; } 100% { transform: scale(1) rotate(-12deg); } }
@keyframes m-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes m-marquee { to { transform: translateX(-50%); } }
@keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@keyframes m-blink { 50% { opacity: 0; } }
@keyframes m-clinc { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 40% { transform: scale(1.15) rotate(-8deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.marea.look-under .m-blink { animation: m-blink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .marea *, .marea *::before, .marea *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .marea.look-under .mloader { display: none !important; }
}

/* =====================================================================
   HOME
   ===================================================================== */
.marea.is-home > .container:has(> .pubnav) { position: absolute; top: 0; left: 0; right: 0; z-index: 8; }
.marea.is-home .pubnav, .marea.is-home .pubnav .links a, .marea.is-home .pubnav .sm, .marea.is-home .pubnav .mark, .marea.is-home .pubnav .mark .iso { color: #F4F0E6; }
.marea.is-home .pubnav .themebtn, .marea.is-home .pubnav .langmenu summary { border-color: #F4F0E6; color: #F4F0E6; background: transparent; }
.marea.is-home .pubnav .menubtn { background: #F4F0E6; color: #101014; border-color: #F4F0E6; }
.marea.is-home .pubnav .btn.primary { box-shadow: none; }
.mhome { overflow: hidden; }
.mhome .m-mono { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.mhome .m-muted { color: var(--muted); } .mhome .m-vid { color: var(--m-vidrio); } .mhome .m-cor { color: var(--m-coral); }
.mhome .m-disp { font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" 96; font-weight: 800; letter-spacing: -.05em; line-height: .84; text-transform: uppercase; margin: 0; }
.mhome .m-voz { font-family: var(--serif); font-style: italic; font-weight: 400; }
.m-bot { display: block; overflow: visible; }
.m-bot path { fill: rgba(244,240,230,.10); stroke: currentColor; stroke-width: 4.5; stroke-linejoin: round; }

/* 1 · hero */
.m-hero { position: relative; min-height: max(840px, 100svh); padding: 118px clamp(16px, 4vw, 64px) 0; background: var(--m-mar); color: #F4F0E6; overflow: hidden; isolation: isolate; }
.m-hero-h { position: relative; z-index: 1; margin: 0; max-width: 100%; font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" 96; font-weight: 800; letter-spacing: -.055em; line-height: .82; text-transform: uppercase; font-size: clamp(72px, 14.6vw, 250px); color: #F4F0E6; text-wrap: balance; pointer-events: none; }
.m-hero-h em { font-style: normal; color: var(--m-vidrio); }
.m-hero-copy { position: relative; z-index: 4; width: min(430px, 100%); margin-top: 30px; display: grid; gap: 18px; justify-items: start; }
.m-hero-sub { font-size: 19px; line-height: 1.5; color: #F4F0E6; }
.m-hero-note { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,240,230,.85); }
.m-hero .u-live { color: #F4F0E6; margin-top: 0; }
.m-hero .u-live i { background: var(--m-vidrio); }
.m-hero-drag { position: absolute; z-index: 3; right: 8%; bottom: 470px; font-family: var(--serif); font-style: italic; font-size: 32px; color: var(--m-sol); transform: rotate(-6deg); pointer-events: none; }
.m-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 40px; z-index: 5; pointer-events: none; }
.m-wave path { fill: var(--paper); }
.m-pile { position: absolute; z-index: 2; right: 0; bottom: 20px; width: 64%; height: 470px; }
.m-body { position: absolute; left: 0; top: 0; will-change: transform; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.m-body.drag { cursor: grabbing; z-index: 5; }
.m-bb { width: 240px; height: 136px; color: #F4F0E6; }
.m-bb .m-bot { width: 240px; height: 136px; }
.m-tag { position: absolute; left: 150px; top: -10px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #F4F0E6; color: #101014; border: 3px solid #101014; }
.m-tag svg { width: 40px; height: 40px; }
.m-tag.vid { background: var(--m-vidrio); } .m-tag.cor { background: var(--m-coral); } .m-tag.sol { background: var(--m-sol); } .m-tag.mar { background: #101014; color: #F4F0E6; border-color: #F4F0E6; }
.m-clinc { position: absolute; left: 0; top: 0; z-index: 6; display: none; font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: -.04em; font-size: 64px; color: var(--m-coral); pointer-events: none; text-transform: uppercase; }
.m-clinc.show { display: block; animation: m-clinc .6s var(--m-muelle) both; }
@media (max-width: 860px) {
  .m-hero { min-height: 0; padding-top: 96px; padding-bottom: 330px; }
  .m-hero-h { font-size: clamp(64px, 20vw, 110px); }
  .m-pile { width: 100%; height: 320px; bottom: 10px; }
  .m-bb, .m-bb .m-bot { width: 170px; height: 96px; } .m-tag { left: 104px; width: 46px; height: 46px; } .m-tag svg { width: 28px; height: 28px; }
  .m-hero-drag { right: 6%; bottom: 300px; font-size: 22px; }
  .m-hero .btn.xl { width: 100%; }
}

/* 2 · cintas */
.m-tapes { position: relative; height: 230px; overflow: hidden; }
.m-tape { position: absolute; left: -6%; right: -6%; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.m-tape.coral { top: 40px; height: 86px; background: var(--m-coral); color: #101014; transform: rotate(-3deg); font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: -.03em; font-size: 62px; text-transform: uppercase; }
.m-tape.ink { top: 130px; height: 58px; background: #101014; color: #F4F0E6; transform: rotate(2deg); font-family: var(--mono); font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.m-tape-in { display: flex; gap: 52px; padding-right: 52px; animation: m-marquee 30s linear infinite; }
.m-tape.rev .m-tape-in { animation-direction: reverse; animation-duration: 40s; }
@media (max-width: 860px) { .m-tapes { height: 170px; } .m-tape.coral { top: 26px; height: 64px; font-size: 42px; } .m-tape.ink { top: 96px; height: 46px; font-size: 13px; } }

/* 3 · busco a alguien que */
.m-seek { padding-top: 70px; padding-bottom: 120px; }
.m-seek-h { font-size: clamp(64px, 12.6vw, 200px); margin-top: 16px !important; }
.m-seek-t { font-size: clamp(46px, 8.6vw, 136px); line-height: 1.06; color: var(--teal); margin-top: 6px; }
.m-tk { display: block; height: 1.12em; overflow: hidden; }
.m-tk-in { display: block; animation: m-ticker 12s var(--m-ease) infinite; }
.m-tk-in > span { display: block; height: 1.12em; white-space: nowrap; }
@keyframes m-ticker { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-20%); } 50%, 70% { transform: translateY(-40%); } 75%, 95% { transform: translateY(-60%); } 100% { transform: translateY(-80%); } }
@media (max-width: 860px) { .m-tk { height: 2.2em; } .m-tk-in > span { white-space: normal; height: 2.2em; } }

/* 4 · el juego */
.m-game { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); padding: clamp(64px, 8vw, 104px) clamp(16px, 4vw, 64px); background: #101014; color: #F4F0E6; }
.m-game-txt { display: flex; flex-direction: column; }
.m-game-h { font-size: clamp(76px, 10vw, 170px); margin-top: 16px !important; }
.m-game-p { margin-top: 26px; font-size: 20px; line-height: 1.5; max-width: 30ch; }
.m-game-list { list-style: none; margin: auto 0 0; padding: 40px 0 0; display: grid; }
.m-game-list li { display: grid; grid-template-columns: 56px 1fr; padding: 16px 0; border-top: 1px solid #3A3A44; font-size: 16px; line-height: 1.45; color: #D9D5CC; }
.m-game-list li:last-child { border-bottom: 1px solid #3A3A44; }
.m-game-list b { color: #F4F0E6; font-size: 20px; letter-spacing: -.02em; }
.m-game .m-vid { color: var(--m-vidrio); } .m-game .m-cor { color: var(--m-coral); }
.m-map { position: relative; margin: 0; min-height: 780px; background: #1F2BFF; overflow: hidden; }
.m-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-land { fill: #2E39FF; }
.m-swell path { fill: none; stroke: rgba(244,240,230,.25); stroke-width: 2; }
.m-city { fill: #F4F0E6; }
.m-city-t { font-family: var(--mono); font-size: 15px; font-weight: 500; fill: #F4F0E6; letter-spacing: 2px; }
.m-route { fill: none; stroke: var(--m-vidrio); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-game.in .m-route { animation: m-draw 4s var(--m-ease) .2s forwards; }
.m-ping { fill: none; stroke: var(--m-vidrio); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: m-pulse 2s ease-out infinite; }
.m-map-bot { position: absolute; left: 76%; top: 80%; width: 150px; height: 84px; color: #F4F0E6; margin: -42px 0 0 -75px; animation: m-bob 3.2s ease-in-out infinite; }
.m-map-bot path { fill: rgba(44,229,167,.55); }
.m-pin { position: absolute; transform: translate(-50%, -50%); padding: 8px 14px; border-radius: 999px; background: #F4F0E6; color: #101014; font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; font-size: 26px; letter-spacing: -.02em; white-space: nowrap; }
.m-pin.cor { background: var(--m-coral); transform: translate(-50%, -50%) rotate(6deg); }
.m-log { position: absolute; left: 28px; bottom: 28px; width: min(340px, calc(100% - 56px)); }
.m-log ol { list-style: none; margin: 0; padding: 16px 18px; display: grid; gap: 9px; font-family: var(--mono); font-size: 13px; }
.m-log li.cor { color: #D7381A; }
@media (max-width: 960px) { .m-game { grid-template-columns: 1fr; } .m-map { min-height: 560px; } .m-pin { font-size: 20px; } }

/* 5 · afinidad */
.m-aff { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(64px, 8vw, 110px) clamp(16px, 4vw, 64px); }
.m-stampbig { position: relative; width: min(520px, 86vw); aspect-ratio: 1; justify-self: center; }
.m-stampbig .ring { position: absolute; inset: 0; animation: m-spin 22s linear infinite; }
.m-stampbig .ring text { font-family: var(--mono); font-size: 21px; font-weight: 500; letter-spacing: 9px; fill: var(--ink); }
.marea.look-under .m-stampbig .u-hook-ring { position: absolute; inset: 14%; width: auto; height: auto; border-radius: 50%; background: var(--m-coral); display: grid; place-items: center; transform: rotate(-12deg); animation: m-stamp .9s var(--m-muelle) .2s both; }
.marea.look-under .m-stampbig .u-hook-ring svg { position: absolute; inset: 7%; width: 86%; height: 86%; transform: rotate(-90deg); }
.marea.look-under .m-stampbig .u-hook-ring circle { stroke: rgba(16,16,20,.18); stroke-width: 5; fill: none; }
.marea.look-under .m-stampbig .u-hook-ring .v { stroke: #101014; }
.marea.look-under .m-stampbig .u-hook-ring b { position: relative; inset: auto; font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: -.05em; font-size: clamp(90px, 12vw, 170px); color: #101014; }
.marea.look-under .u-hook.super .m-stampbig .u-hook-ring { background: var(--m-vidrio); }
.m-hookwin .m-hook-in { padding: clamp(20px, 3vw, 32px); display: grid; gap: 24px; }
.marea.look-under .m-aff .u-hook-qs { gap: 22px; }
.marea.look-under .m-aff .u-hook-t { font-size: clamp(20px, 2vw, 26px); }
.marea.look-under .m-aff .u-hook-o { padding-left: 0; }
.marea.look-under .m-aff .u-hook-o button { border: 2px solid var(--ink); font-weight: 700; }
.marea.look-under .m-aff .u-hook-o button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.marea.look-under .m-aff .u-hook-res { position: static; padding: 0; border: 0; background: none; justify-items: start; text-align: left; }
.marea.look-under .m-aff .u-hook-msg { font-size: clamp(24px, 2.4vw, 32px); color: var(--teal); max-width: 34ch; }
@media (max-width: 960px) { .m-aff { grid-template-columns: 1fr; } }

/* 6 · billetes */
.m-how { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(64px, 8vw, 104px) clamp(16px, 4vw, 64px); background: var(--m-sol); color: #101014; --hole: var(--m-sol); }
.m-how .m-disp { font-size: clamp(64px, 9vw, 150px); }
.m-how .m-mono { margin-top: 20px; }
.m-tickets { display: grid; gap: 26px; }
.m-how .m-ticket { grid-template-columns: minmax(0, 1fr) 170px; transform: rotate(-3deg); transition: transform .5s var(--m-muelle); }
.m-how .m-ticket:nth-child(2) { transform: rotate(2.5deg) translateX(clamp(0px, 3vw, 36px)); }
.m-how .m-ticket:nth-child(3) { transform: rotate(-1.5deg) translateX(clamp(0px, 2vw, 30px)); }
.m-how .m-ticket:hover { transform: rotate(0) scale(1.03); }
.m-tk-body { padding: 22px 26px; display: grid; gap: 10px; }
.m-tk-t { font-weight: 800; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.15; }
.m-tk-stub { padding: 20px 22px; display: grid; align-content: space-between; justify-items: end; }
.m-tk-stub b { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; font-size: 56px; letter-spacing: -.04em; line-height: .8; }
@media (max-width: 960px) { .m-how { grid-template-columns: 1fr; } .m-how .m-ticket { grid-template-columns: minmax(0, 1fr) 96px; } .m-tk-stub b { font-size: 40px; } }

/* 7 · etiquetas */
.m-tags { position: relative; min-height: 680px; padding: clamp(64px, 8vw, 100px) clamp(16px, 4vw, 64px) 0; overflow: hidden; }
.m-tags .m-disp { position: relative; z-index: 1; font-size: clamp(64px, 10.6vw, 170px); max-width: 11ch; pointer-events: none; }
.m-tags-p { position: relative; z-index: 3; margin-top: 18px; font-size: clamp(24px, 2.4vw, 34px); max-width: 26ch; }
.m-pile-tags { left: 0; right: 0; width: auto; bottom: 0; height: 390px; z-index: 2; }
.m-sticker { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--ink); border: 3px solid var(--ink); }
.m-sticker svg { width: 64px; height: 64px; pointer-events: none; }
.m-sticker.vid { background: var(--m-vidrio); color: #101014; } .m-sticker.cor { background: var(--m-coral); color: #101014; } .m-sticker.sol { background: var(--m-sol); color: #101014; } .m-sticker.mar { background: var(--m-mar); color: #F4F0E6; }
@media (max-width: 860px) { .m-tags { min-height: 600px; } .m-sticker { width: 84px; height: 84px; } .m-sticker svg { width: 48px; height: 48px; } .m-pile-tags { height: 320px; } }

/* 8 · letra pequeña */
.m-fine { padding-top: 60px; padding-bottom: 40px; border-top: 2px solid var(--ink); }
.m-fine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); margin-top: 26px; }
.m-fine-grid p.m-mono { margin-bottom: 14px; }
.m-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: s; }
.m-steps li, .m-nots li, .m-small { font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.m-small { margin: 0 0 10px; }
.m-steps li { counter-increment: s; padding-left: 30px; position: relative; } .m-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; font-family: var(--mono); font-size: 11px; color: var(--teal); top: 3px; }
.m-nots { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.m-nots s { font-weight: 800; color: var(--ink); text-decoration-color: var(--m-coral); text-decoration-thickness: 3px; margin-right: 6px; }
@media (max-width: 860px) { .m-fine-grid { grid-template-columns: 1fr; } }

/* 9 · faq.md */
.m-faq { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding-top: 50px; padding-bottom: 120px; align-items: start; }
.m-faq .m-disp { font-size: clamp(56px, 7vw, 120px); }
.m-faq-list details { border-bottom: 1px solid var(--line); }
.m-faq-list summary { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 8px; padding: 16px 20px 16px 0; cursor: pointer; list-style: none; }
.m-faq-list summary::-webkit-details-marker { display: none; }
.m-faq-list .ln { font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: right; }
.m-faq-list h3 { margin: 0; font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--teal); letter-spacing: 0; }
.m-faq-list details[open] h3 { color: var(--ink); }
.m-faq-list p { margin: 0; padding: 0 22px 18px 52px; font-size: 16px; line-height: 1.6; color: var(--ink2); }
@media (max-width: 860px) { .m-faq { grid-template-columns: 1fr; } }

/* 10 · cierre: sube la marea */
.m-close { position: relative; height: max(640px, min(820px, 100svh)); overflow: hidden; background: var(--paper); color: #F4F0E6; }
.m-close-sea { position: absolute; inset: 0; background: var(--m-mar); transform: translateY(100%); transition: transform 1.6s var(--m-ease); }
.m-close.in .m-close-sea { transform: none; }
.m-close-big { position: absolute; z-index: 1; left: 1.5vw; bottom: 4%; margin: 0; font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: -.06em; line-height: .8; text-transform: uppercase; font-size: clamp(130px, 29vw, 470px); color: #F4F0E6; opacity: 0; transform: translateY(40px); transition: opacity .8s .5s, transform 1s var(--m-ease) .5s; }
.m-close.in .m-close-big { opacity: 1; transform: none; }
.m-close-bot { position: absolute; z-index: 2; right: 7%; top: 10%; width: min(42vw, 440px); height: auto; aspect-ratio: 93 / 52; color: #F4F0E6; animation: m-bob 3.4s ease-in-out infinite; }
.m-close-bot path { fill: rgba(44,229,167,.65); }
.m-close-copy { position: absolute; z-index: 3; right: clamp(16px, 4vw, 64px); bottom: 12%; width: min(400px, calc(100% - 32px)); display: grid; gap: 16px; justify-items: start; color: #F4F0E6; }
.m-close-copy h2 { margin: 0; font-size: clamp(30px, 3vw, 40px); line-height: 1.08; }
.m-close-copy p { margin: 0; font-size: 17px; line-height: 1.5; }
@media (max-width: 860px) { .m-close { height: 760px; } .m-close-copy { left: 16px; right: 16px; top: 46%; bottom: auto; } .m-close-bot { top: 6%; width: 70vw; } }
@media (prefers-reduced-motion: reduce) { .m-close-sea { transform: none; } .m-close-big { opacity: 1; transform: none; } .m-route { stroke-dashoffset: 0; } }
.marea.is-home .pubnav .mark .wm > span:last-child { color: var(--m-vidrio); }
.mhome .m-disp { text-wrap: balance; }
.marea.look-under .footwrap .mark .wm > span:last-child { color: var(--m-vidrio); }
@media (max-width: 860px) { .m-hero { padding-bottom: 400px; } .m-pile[data-pile=bottles] { height: 380px; } .m-pile[data-pile=bottles] .m-bb:nth-child(n+6) { display: none; } .m-hero-drag { bottom: 372px; left: 16px; right: auto; } }

/* =====================================================================
   INTERIORES · el alta
   ===================================================================== */
.marea { --v1: #1F2BFF; --v2: #FF5A36; --v3: #FFD23F; --v4: #2CE5A7; --v-ink: #F4F0E6; }
:root[data-theme="dark"] .marea, :root[data-theme="dark"]:has(body.marea) { --v1: #6E78FF; --v2: #FF6E4D; --v3: #FFD23F; --v4: #2CE5A7; --v-ink: #101014; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marea, :root:not([data-theme="light"]):has(body.marea) { --v1: #6E78FF; --v2: #FF6E4D; --v3: #FFD23F; --v4: #2CE5A7; --v-ink: #101014; } }

/* pasos: billetes perforados */
.marea.look-under .appnav .stepper > a, .marea.look-under .appnav .stepper > span { border-radius: 8px; border: 2px dashed var(--line-strong); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: transparent; box-shadow: none; }
.marea.look-under .appnav .stepper a.now { background: var(--m-coral); border: 2px solid var(--ink); color: #101014; box-shadow: 3px 3px 0 var(--ink); animation: m-in .4s var(--m-muelle) both; }
.marea.look-under .appnav .stepper a.done { background: var(--m-vidrio); border: 2px solid var(--ink); color: #101014; }

/* cabeceras del alta: grandes, estrechas */
.marea.look-under .launch .pcol > h1.h2, .marea.look-under .launch .qhead h1.h2 { font-size: clamp(52px, 8vw, 116px); line-height: .86; margin-bottom: 6px; text-wrap: balance; }
.marea.look-under .launch .pcol > h1.h2::after { display: none; }
.marea.look-under .launch .lkick { background: var(--ink); color: var(--paper); border-radius: 6px; }

/* paso 1: etiquetas como pegatinas redondas */
.marea.look-under .lv .icon-grid { --pc: var(--v1); }
.marea.look-under .lv .icon-grid:nth-of-type(4n+2) { --pc: var(--v2); } .marea.look-under .lv .icon-grid:nth-of-type(4n+3) { --pc: var(--v3); } .marea.look-under .lv .icon-grid:nth-of-type(4n) { --pc: var(--v4); }
.marea.look-under .lv .icon-pick .av { border-radius: 50%; border: 2px solid var(--ink); background: var(--surface2); }
.marea.look-under .lv .icon-pick:hover .av { background: var(--pc); color: #101014; animation: m-wig .5s ease; }
.marea.look-under .lv .icon-pick input:checked + .av { background: var(--pc); color: #101014; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-8deg) scale(1.08); animation: m-stamp-s .5s var(--m-muelle); }
.marea.look-under .lv .icon-grid:nth-of-type(4n+1) .icon-pick input:checked + .av { color: #F4F0E6; }
.marea.look-under .lv .icon-cat { font-family: var(--mono); color: var(--ink); }
@keyframes m-wig { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 65% { transform: rotate(7deg); } }
@keyframes m-stamp-s { 0% { transform: scale(1.5) rotate(-20deg); } 100% { transform: rotate(-8deg) scale(1.08); } }

/* paso 2: declaración de carga, tres casillas con borde de tinta */
.marea.look-under .lcard { border-radius: 0; border: 3px solid var(--ink); background: var(--surface2); box-shadow: 8px 8px 0 var(--ink); padding: 0 clamp(18px, 3vw, 30px) clamp(20px, 3vw, 30px); }
.marea.look-under .lcard > header { margin: 0 calc(-1 * clamp(18px, 3vw, 30px)) 6px; padding: 14px clamp(18px, 3vw, 30px); border-bottom: 3px solid var(--ink); background: var(--c); }
.marea.look-under .lc-you { --c: var(--m-mar); } .marea.look-under .lc-port { --c: var(--m-sol); } .marea.look-under .lc-seek { --c: var(--m-vidrio); }
.marea.look-under .lc-you > header, .marea.look-under .lc-you > header .lc-p { color: #F4F0E6; }
.marea.look-under .lc-port > header, .marea.look-under .lc-seek > header, .marea.look-under .lc-port > header .lc-p, .marea.look-under .lc-seek > header .lc-p { color: #101014; }
.marea.look-under .lc-n { border-radius: 50%; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font-family: var(--mono); box-shadow: none; transform: rotate(-10deg); }
.marea.look-under .lc-h { font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; letter-spacing: -.03em; }
.marea.look-under .lcard .field { border-radius: 0; border: 2px solid var(--ink); background: var(--paper); }
.marea.look-under .lcard .field:focus-within { border-color: var(--ink); box-shadow: 4px 4px 0 var(--m-coral); }
.marea.look-under .lform .seg3 span { border-radius: 0; border: 2px solid var(--ink); background: var(--paper); font-weight: 700; }
.marea.look-under .lform .seg3 label:hover span { border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.marea.look-under .lform .seg3 input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--m-coral); }
.marea.look-under .portmap { border-radius: 0; border: 3px solid var(--ink); }
.marea.look-under .pm-sea { fill: var(--m-mar); } .marea.look-under .pm-land { fill: #3D48FF; stroke: rgba(244,240,230,.4); }
.marea.look-under .pm-waves path { stroke: rgba(244,240,230,.4); } .marea.look-under .pm-route { stroke: var(--m-vidrio); }
.marea.look-under .pm-pin circle:last-child { fill: var(--m-coral); stroke: #F4F0E6; } .marea.look-under .pm-pulse { fill: rgba(44,229,167,.45); }
.marea.look-under .pm-bottle path { fill: #F4F0E6; stroke: #101014; }
.marea.look-under .port-note { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }

/* paso 3: la pregunta a pantalla llena, un color por tema */
.marea.look-under .lv .stepping .q { --qc: var(--m-coral); --qi: #101014; background: var(--qc); color: var(--qi); border: 3px solid var(--ink); border-radius: 0; box-shadow: 10px 10px 0 var(--ink); padding: clamp(24px, 4vw, 48px); min-height: min(46vh, 420px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; animation: m-q .5s var(--m-muelle) both; }
.marea.look-under .lv .stepping .q:nth-of-type(4n+2) { --qc: var(--m-sol); }
.marea.look-under .lv .stepping .q:nth-of-type(4n+3) { --qc: var(--m-vidrio); }
.marea.look-under .lv .stepping .q:nth-of-type(4n) { --qc: var(--m-mar); --qi: #F4F0E6; }
@keyframes m-q { from { opacity: 0; transform: translateY(26px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }
.marea.look-under .lv .stepping .q .qt { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; text-transform: uppercase; letter-spacing: -.045em; line-height: .9; font-size: clamp(40px, 6vw, 92px); color: var(--qi); text-wrap: balance; }
.marea.look-under .lv .stepping .q .qt::before { background: var(--qi); color: var(--qc); border-radius: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; font-stretch: 100%; font-variation-settings: normal; }
.marea.look-under .lv .stepping .q .qn { display: none; }
.marea.look-under .lv .stepping .quick { gap: 0; border: 3px solid var(--ink); }
.marea.look-under .lv .stepping .quick label { flex: 1 1 0; }
.marea.look-under .lv .stepping .quick span { border: 0; border-radius: 0; background: var(--paper); color: var(--ink); min-height: clamp(96px, 16vh, 150px); font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; font-size: clamp(28px, 4vw, 56px); text-transform: uppercase; letter-spacing: -.03em; justify-content: center; }
.marea.look-under .lv .stepping .quick label + label span { border-left: 3px solid var(--ink); }
.marea.look-under .lv .quick input:checked + span, .marea.look-under .lv .stepping .quick label:nth-child(2) input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.marea.look-under .lv .stepping .opts { gap: 10px; }
.marea.look-under .lv .stepping .opts label { border: 3px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); transition: transform .2s var(--m-muelle), box-shadow .2s; }
.marea.look-under .lv .stepping .opts label:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
.marea.look-under .lv .opts label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.marea.look-under .lv .opts input:checked ~ i { background: var(--m-coral); border-color: var(--m-coral); color: #101014; }
.marea.look-under .lv .stepping .opts i { border-radius: 4px; border: 2px solid currentColor; font-family: var(--mono); }
.marea.look-under .lv .slider .poles span { font-weight: 800; font-size: clamp(16px, 1.6vw, 20px); color: var(--qi, var(--ink)); }
.marea.look-under .lv .slider input[type=range]::-webkit-slider-runnable-track { background: var(--ink); height: 4px; }
.marea.look-under .lv .slider input[type=range]::-moz-range-track { background: var(--ink); height: 4px; }
.marea.look-under .lv .slider input[type=range]::-webkit-slider-thumb { width: 44px; height: 44px; margin-top: -20px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.marea.look-under .lv .slider:not(.unset) input[type=range]::-webkit-slider-thumb { background: var(--ink); border: 4px solid var(--paper); box-shadow: 0 0 0 3px var(--ink); }
.marea.look-under .lv .slider input[type=range]::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); }
.marea.look-under .lv .slider .ticks i { background: var(--ink); width: 8px; height: 8px; }
.marea.look-under .lv .stepping .q .hint, .marea.look-under .lv .stepping .q .db { color: var(--qi); }
.marea.look-under .lv .stepping .q .db { font-weight: 600; }
.marea.look-under .lv .stepping .q:nth-of-type(4n) .slider input[type=range]::-webkit-slider-runnable-track { background: #F4F0E6; }
.marea.look-under .lv .stepping .q:nth-of-type(4n) .slider .ticks i { background: #F4F0E6; }
.marea.look-under .lv .stepping .q:nth-of-type(4n) .info { color: #F4F0E6; border-color: #F4F0E6; }
.marea.look-under .lv .qline { height: 14px; border-radius: 0; border: 2px solid var(--ink); background: var(--paper); }
.marea.look-under .lv .qline i { background: var(--m-vidrio); animation: none; }
.marea.look-under .launch .qprog b, .marea.look-under .launch .qsticky b { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; }
@media (max-width: 720px) {
  .marea.look-under .lv .stepping .q { min-height: 0; box-shadow: 6px 6px 0 var(--ink); padding: 22px 18px 24px; }
  .marea.look-under .lv .stepping .q .qt { font-size: clamp(32px, 10vw, 46px); }
  .marea.look-under .lv .stepping .quick span { min-height: 86px; font-size: 26px; }
}

/* paso 4: mensaje.txt y la botella como billete */
.marea.look-under .final-form .grp { font-family: var(--mono); color: var(--ink); border-bottom: 0; }
.marea.look-under .lv .msgfield { border-radius: 0; border: 3px solid var(--ink); background: var(--surface2); padding-top: 52px; position: relative; box-shadow: 8px 8px 0 var(--ink); }
.marea.look-under .lv .msgfield::before { content: "mensaje.txt"; position: absolute; left: 0; right: 0; top: 0; height: 36px; padding-left: 70px; display: flex; align-items: center; background: var(--m-sol) radial-gradient(circle at 18px 50%, transparent 5px, #101014 5px 7px, transparent 7px) no-repeat; border-bottom: 3px solid var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 600; color: #101014; }
.marea.look-under .lv .msgfield::after { content: ""; position: absolute; left: 30px; top: 11px; width: 10px; height: 10px; border: 2px solid #101014; border-radius: 50%; box-shadow: 18px 0 0 -2px var(--m-sol), 18px 0 0 0 #101014; }
.marea.look-under .lv .msgfield:focus-within { border-color: var(--ink); box-shadow: 8px 8px 0 var(--m-coral); }
.marea.look-under .lv .msgfield textarea { font-family: var(--mono); font-size: 17px; line-height: 1.6; }
.marea.look-under .lv .bigcard { border-radius: 0; border: 3px solid var(--ink); background: var(--surface2); box-shadow: 8px 8px 0 var(--ink); position: relative; padding-right: clamp(24px, 22%, 190px); overflow: hidden; }
.marea.look-under .lv .bigcard::after { content: "N.º 0001 · BOTELLA"; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(0px, 20%, 170px); border-left: 3px dashed var(--ink); background: var(--m-sol); writing-mode: vertical-rl; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: #101014; }
.marea.look-under .lv .bigcard .bc-msg { border-left: 0; padding-left: 0; font-size: clamp(22px, 2.4vw, 30px); }
.marea.look-under .lv .bigcard .av.dark { border-radius: 50%; background: var(--m-coral); color: #101014; border: 3px solid var(--ink); transform: rotate(-8deg); }
.marea.look-under .lv .bigcard .bc-name { font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: clamp(36px, 4vw, 56px); letter-spacing: -.04em; }
.marea.look-under .lv .bigcard .bc-chips span { border-radius: 4px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 12px; }
.marea.look-under .final-form .field, .marea.look-under .lv .chk.big { border-radius: 0; border: 2px solid var(--ink); }
.marea.look-under .lv .chk.big:has(input:checked) { background: var(--m-vidrio); color: #101014; border-color: var(--ink); }
.marea.look-under .final-form .hint-box { border-radius: 0; border: 2px dashed var(--ink); background: transparent; color: var(--ink); font-family: var(--mono); font-size: 13px; }
@media (max-width: 600px) { .marea.look-under .lv .bigcard { padding-right: 20px; } .marea.look-under .lv .bigcard::after { display: none; } }

/* lanzada: tarjeta de embarque con la clave en el resguardo */
.marea.look-under .launch-grid .recovery, .marea.look-under .recovery { border-radius: 0; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--m-sol); color: #101014; position: relative; }
.marea.look-under .recovery .code, .marea.look-under .keybox .code { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; background: var(--paper); color: var(--ink); border: 2px dashed var(--ink); border-radius: 0; }
.marea.look-under .ritual { border-radius: 0; }
.marea.look-under .ret { border-radius: 0; border: 3px solid var(--ink); background: var(--surface2); box-shadow: 8px 8px 0 var(--m-mar); }

/* =====================================================================
   INTERIORES · la app
   ===================================================================== */
.marea.look-under .appnav { border-bottom: 3px solid var(--ink); }
.marea.look-under .appnav .tabs a.on, .marea.look-under .appnav nav a.on, .marea.look-under .appnav [aria-current="page"] { background: var(--ink); color: var(--paper); }
.marea :is(.panel, .rcard, .bf-card, .thread, .tile, .auth-card) { border-radius: 0; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.marea.look-under .panel.dark { background: #101014; color: #F4F0E6; box-shadow: 6px 6px 0 var(--m-mar); }
.marea.look-under .chips span, .marea.look-under .facts3 span, .marea.look-under .bc-chips span { border-radius: 4px; }
.marea.look-under .h1 { font-size: clamp(56px, 8.6vw, 140px); }

/* mi botella: cifras gigantes y mapa a sangre */
.marea.look-under .vy-stats .num, .marea.look-under .vy-stats b, .marea.look-under .mine .stat .n { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; letter-spacing: -.04em; font-size: clamp(48px, 5.6vw, 84px); line-height: .9; }
.marea.look-under .vy-map { border-radius: 0; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--m-mar); }
.marea.look-under .vy-where { color: var(--teal); font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.marea.look-under .vy-clink { border-radius: 0; border: 3px solid var(--ink); background: var(--m-coral); color: #101014; box-shadow: 6px 6px 0 var(--ink); padding-top: 46px; position: relative; overflow: hidden; }
.marea.look-under .vy-clink::before { content: "clinc!.alert"; position: absolute; left: 0; right: 0; top: 0; height: 32px; padding-left: 14px; display: flex; align-items: center; background: #101014; color: #FFD23F; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.marea.look-under .vy-clink a:not(.btn) { color: #101014; }
.marea.look-under .vy-log { border-radius: 0; border: 2px solid var(--ink); background: var(--surface2); font-family: var(--mono); position: relative; padding-top: 44px !important; box-shadow: 6px 6px 0 var(--ink); }
.marea.look-under .vy-log::before { content: "bitacora.log"; position: absolute; left: 0; right: 0; top: 0; height: 32px; padding-left: 14px; display: flex; align-items: center; background: var(--m-sol); border-bottom: 2px solid var(--ink); color: #101014; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.marea.look-under .keyremind { border-radius: 0; border: 2px dashed var(--ink); background: var(--m-sol); color: #101014; }
.marea.look-under .vy-push, .marea.look-under .mine .act-row .btn { border-radius: 999px; }

/* afinidad (resultados): manifiesto de carga */
.marea.look-under .rgrid .rcard, .marea.look-under .results .rcard { transition: transform .25s var(--m-muelle), box-shadow .25s; }
.marea.look-under .rgrid .rcard:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: 10px 10px 0 var(--ink); }
.marea.look-under .rhead .h2, .marea.look-under .search .h2 { font-size: clamp(48px, 6vw, 96px); }
.marea.look-under .clink-chip, .marea.look-under .super-tag, .marea.look-under .dtb-chip { border-radius: 4px; border: 2px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.marea.look-under .clink-chip { background: var(--m-coral); color: #101014; }
.marea.look-under .super-tag { background: var(--m-vidrio); color: #101014; }
.marea.look-under .filters, .marea.look-under .side { border-radius: 0; }
.marea.look-under .filters .field { border-radius: 0; border: 2px solid var(--ink); }

/* ficha */
.marea.look-under .profile .name, .marea.look-under .person .name { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; text-transform: uppercase; letter-spacing: -.045em; font-size: clamp(56px, 7vw, 112px); line-height: .86; }
.marea.look-under .person .quote, .marea.look-under .profile .quote { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; border-left: 0; padding-left: 0; }
.marea.look-under .gauge { position: relative; }
.marea.look-under .bars i, .marea.look-under .minibars i { border-radius: 0; }

/* cartas: postales con sello */
.marea.look-under .letter, .marea.look-under .deck .letter { border-radius: 0; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--surface2) repeating-linear-gradient(transparent 0 33px, color-mix(in srgb, var(--m-mar) 14%, transparent) 33px 34px); }
.marea.look-under .letter .stamp, .marea.look-under .vstamp, .marea.look-under .postmark { transform: rotate(8deg); }
.marea.look-under .letter .q, .marea.look-under .letter h2, .marea.look-under .letter .h2 { font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: -.03em; }
.marea.look-under .cards-page .fan .fc { border-radius: 0; border: 2px solid var(--ink); }
.marea.look-under .deck .yes, .marea.look-under .deck .btn.primary { box-shadow: 4px 4px 0 var(--ink); }

/* mensajes: ventanas retro y notas de papel */
.marea.look-under .thread { box-shadow: 8px 8px 0 var(--ink); }
.marea.look-under .convs { border-radius: 0; }
.marea.look-under .bubble { border-radius: 0; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.marea.look-under .bubble.me { background: var(--m-mar); color: #F4F0E6; box-shadow: 3px 3px 0 var(--m-coral); }
.marea.look-under .bubble:not(.me) { background: #FFF7D1; color: #101014; transform: rotate(-.6deg); }
.marea.look-under .composer { border-radius: 0; border-top: 3px solid var(--ink); }
.marea.look-under .composer textarea, .marea.look-under .composer input { border-radius: 0; }
.marea.look-under .daysep span, .marea.look-under .daysep { font-family: var(--mono); }

/* entrar */
.marea.look-under .auth-card { box-shadow: 10px 10px 0 var(--ink); }
.marea.look-under .ways li { border-radius: 0; }
.marea.look-under .seg { border-radius: 0; border: 2px solid var(--ink); }
.marea.look-under .seg a { border-radius: 0; }

/* info: revista */
.marea.look-under .mag-head .h1 { font-size: clamp(64px, 10vw, 170px); }
.marea.look-under .mag-list > * { border-top: 3px solid var(--ink); }
.marea.look-under .mag-list h3 { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; text-transform: uppercase; letter-spacing: -.035em; font-size: clamp(30px, 3.6vw, 56px); line-height: .92; transition: color .2s; }
.marea.look-under .mag-list a:hover h3 { color: var(--teal); }
.marea.look-under .post-head .h1 { font-size: clamp(48px, 7.4vw, 120px); text-wrap: balance; }
.marea.look-under .post-tldr { border-radius: 0; border: 3px solid var(--ink); background: var(--m-sol); color: #101014; box-shadow: 8px 8px 0 var(--ink); }
.marea.look-under .post-toc { border-radius: 0; }
.marea.look-under .prose h2 { font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(32px, 3.4vw, 48px); line-height: .95; }
.marea.look-under .prose blockquote { border-left: 6px solid var(--m-coral); font-family: var(--serif); font-style: italic; font-size: 1.4em; }
.marea.look-under .read-prog { background: var(--m-coral); height: 5px; }

/* páginas: cómo funciona, normas, seguridad */
.marea.look-under .page .steps > div { border-radius: 0; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.marea.look-under .page .h2 { font-size: clamp(48px, 6.4vw, 104px); }

/* 404 y error: la botella perdida */
.marea.look-under .empty.tall { min-height: 70vh; display: grid; place-content: center; justify-items: center; text-align: center; }
.marea.look-under .empty.tall .h2 { font-size: clamp(56px, 10vw, 160px); line-height: .84; max-width: 12ch; }
.marea.look-under .empty.tall svg, .marea.look-under .empty.tall img { animation: m-bob 3.2s ease-in-out infinite; }
.marea.look-under .lv .stepping .q .qt[data-topic=""]::before { display: none; }
.marea.look-under .lv .stepping .q[hidden] { display: none; }

/* mi botella: el panel de tinta con cifras gigantes junto al mapa */
.marea.look-under .mhero { border-radius: 0; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.marea.look-under .vyhero { background: #101014; color: #F4F0E6; }
.marea.look-under .vyhero .copy, .marea.look-under .vyhero .copy .h1, .marea.look-under .vyhero .copy .lead, .marea.look-under .vyhero .copy .cap { color: #F4F0E6; }
.marea.look-under .vyhero .h1 { font-size: clamp(52px, 6vw, 96px); }
.marea.look-under .vyhero .copy .lead { color: #D9D5CC; }
.marea.look-under .vyhero .copy a:not(.btn) { color: #F4F0E6; text-decoration-color: var(--m-vidrio); }
.marea.look-under .vyhero .copy .xs, .marea.look-under .vyhero .copy .m { color: #B9B5AC; }
.marea.look-under .vyhero .vy-place { color: var(--m-vidrio); font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.marea.look-under .vyhero .status { background: var(--m-vidrio); color: #101014; border-radius: 4px; font-family: var(--mono); font-size: 12px; }
.marea.look-under .vyhero .vy-stats { border: 0; background: none; gap: 22px; display: flex; flex-wrap: wrap; }
.marea.look-under .vyhero .vy-stats > div { padding: 0; border: 0; }
.marea.look-under .vyhero .vy-stats b { font-size: clamp(48px, 5vw, 80px); color: var(--m-vidrio); display: block; }
.marea.look-under .vyhero .vy-stats > div:last-child b { color: var(--m-sol); }
.marea.look-under .vyhero .vy-stats span { color: #D9D5CC; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.marea.look-under .vyhero .vy-map { border: 0; border-left: 3px solid var(--ink); box-shadow: none; border-radius: 0; }
.marea.look-under .vy-clink { border-radius: 0; }
.marea.look-under .vy-clink .cap { color: #101014; }
.marea.look-under .vy-clink .xs, .marea.look-under .vy-clink .xs a { color: #101014; }
.marea.look-under .vy-clink .vy-clink-ic { border-radius: 50%; border: 2px solid #101014; background: #F4F0E6; }
.marea.look-under .vy-clink .btn.primary { background: #101014; color: #F4F0E6; }
.marea.look-under .vy-clink .btn.line { border-color: #101014; color: #101014; }
.marea.look-under .vy-ctl button { border-radius: 0; border: 2px solid var(--ink); }
.marea.look-under .vy-note { border-radius: 0; }
.marea.look-under .mstats { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.marea.look-under .mstats .stat .num { color: var(--ink); }
@media (max-width: 860px) {
  .marea.look-under .vyhero .vy-map { border-left: 0; border-bottom: 3px solid var(--ink); }
  .marea.look-under .mhero { box-shadow: 6px 6px 0 var(--ink); }
  .marea.look-under .vyhero .copy { padding: 26px 20px 30px; }
}
.marea.look-under .vyhero .vy-map { position: relative; min-height: 600px; }
.marea.look-under .vyhero .vy-map > .vy-svg { position: absolute; inset: 0; }
@media (max-width: 860px) { .marea.look-under .vyhero .vy-map { min-height: 380px; } }
.marea.look-under .vyhero .copy { padding-left: clamp(20px, 3.4vw, 48px); padding-right: clamp(12px, 2vw, 24px); }
.marea.look-under .vy-log { padding-left: 16px; padding-right: 16px; }
.marea.look-under .vy-log li { border-radius: 0; border: 2px solid var(--ink); }
.marea.look-under .vyhero .vy-stats { overflow: visible; width: auto; }
.marea.look-under .keyremind .xs, .marea.look-under .keyremind p { color: #101014; }
/* selector de idioma: legible siempre, también sobre el mar de la portada */
.marea.look-under .langmenu > div { border: 2px solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 var(--ink); background: var(--surface2); padding: 6px; }
.marea.look-under .langmenu > div a, .marea.is-home .pubnav .langmenu > div a { color: var(--ink); font-weight: 600; border-radius: 0; }
.marea.look-under .langmenu > div a:hover, .marea.is-home .pubnav .langmenu > div a:hover { background: var(--m-sol); color: #101014; }
.marea.look-under .langmenu > div a.on, .marea.is-home .pubnav .langmenu > div a.on { background: var(--ink); color: var(--paper); }

/* quiénes somos: lo que nos hartó, tachado; lo colaborativo, en una ventana */
.marea.look-under .page.about .h2 { font-size: clamp(56px, 9vw, 140px); line-height: .86; }
.marea.look-under .page.about .lead { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; margin-top: 18px; }
.marea.look-under .ab-tired { list-style: none; padding: 0; margin: 10px 0 8px; display: grid; gap: 4px; }
.marea.look-under .ab-tired li { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.35; padding: 12px 0; border-bottom: 2px solid var(--ink); }
.marea.look-under .ab-tired s { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: 1.6em; text-decoration-color: var(--m-coral); text-decoration-thickness: 5px; margin-right: 6px; }
.marea.look-under .ab-collab { margin: 34px 0 10px; padding: 52px clamp(18px, 3vw, 32px) 26px; position: relative; border: 3px solid var(--ink); background: var(--m-sol); color: #101014; box-shadow: 8px 8px 0 var(--ink); }
.marea.look-under .ab-collab::before { content: "colabora.txt"; position: absolute; left: 0; right: 0; top: 0; height: 34px; padding-left: 14px; display: flex; align-items: center; background: #101014; color: var(--m-sol); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.marea.look-under .ab-collab .h3 { margin-top: 0; color: #101014; }
.marea.look-under .ab-collab .cap { color: #101014; margin-top: 18px; }
.marea.look-under .ab-collab .link { color: #101014; text-decoration-color: #101014; font-weight: 700; }
.marea.look-under .ab-help { padding-left: 22px; display: grid; gap: 6px; font-weight: 600; }
.marea.look-under .ab-sign { font-family: var(--serif); font-style: italic; font-size: 30px; margin: 24px 0 18px; transform: rotate(-3deg); color: var(--teal); }
.marea.look-under .ab-tired s { display: inline-block; line-height: 1.05; padding-top: .06em; vertical-align: -.08em; }
.marea.look-under .page.about > .h3 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 34px; }