/* Figtree (SIL OFL) alojada aquí: sin peticiones a Google Fonts (RGPD) */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-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: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-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; }
/* A quien lo encuentre · paleta: turquesa #178270 (base: botones de acción, mar, botella) + rojo #B93636 (marca, acento, supercompatibilidad) sobre tinta oliva y papel.
   Cálidos de apoyo: naranja #FF9C4C (sol, choques, progreso) y amarillo #FFF2A0 (fondos destacados, avisos). Regla 60/30/10: papel+tinta · turquesa · naranja. El rojo, solo para lo más llamativo (supercompatibles, choques, avisos y errores).
   (Las variables conservan sus nombres antiguos --teal / --naranja para no tocar cada regla.) */
:root {
  --naranja: #B93636; --naranja-h: #9C2B2B; --naranja-text: #A32F2F; --naranja-soft: #F7E1DE; --naranja-deep: #7F2323;
  --teal: #178270; --teal-h: #116B5C; --teal-deep: #0D5348; --teal-light: #7CCBBB; --teal-soft: #CDEDE6; --teal-mist: #EBF8F4;
  --ink: #172C27; --ink2: #2E4640; --paper: #FBF9F6; --white: #FFFFFF; --muted: #5F6E69; --line: #E3E8E5; --line2: #172C27;
  --warn-bg: #FFF7CC; --warn: #7A4A0E;
  --sun: #FF9C4C; --sun-h: #F2852E; --sun-text: #B5520F; --sun-deep: #8A3D0A; --sun-soft: #FFE3CC; --cream: #FFF2A0; --cream-soft: #FFF9D6;
  --font: "Figtree", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --r: 16px; --r2: 22px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.45; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sun-text); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }   /* en botones verdes o naranjas el anillo naranja no se veía */
svg text { font-family: var(--font); }
img, svg { max-width: 100%; }
details summary::-webkit-details-marker { display: none; }

/* ---------- tipografía ---------- */
.h1 { font-size: clamp(38px, 5.4vw, 80px); font-weight: 800; letter-spacing: -0.04em; line-height: .96; }
.h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.h4 { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.lead { font-size: 17px; line-height: 1.45; }
.cap { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.m { color: var(--muted); } .hoja { color: var(--teal-deep); } .brote { color: var(--teal-light); } .acc { color: var(--sun-text); }
.num { font-variant-numeric: tabular-nums; }
.sm { font-size: 14px; }
.xs { font-size: 13px; line-height: 1.45; color: var(--muted); }
.big { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.form.big, .chk.big, .why.big, .who.big, .quote.big { font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: inherit; }   /* «big» como variante de tamaño, no como cifra grande */
.center { text-align: center; }
.link { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.stack { display: grid; gap: 14px; align-content: start; }

/* ---------- layout: la app nunca va a sangre, siempre con margen lateral ---------- */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: clamp(16px, 5vw, 72px); padding-right: clamp(16px, 5vw, 72px); }
.container.narrow { max-width: 960px; padding-top: 28px; padding-bottom: 56px; }
.pubnav { display: flex; align-items: center; gap: 26px; height: 76px; font-size: 14px; }
.pubnav .links { display: flex; gap: 22px; color: var(--muted); }
.pubnav .links a:hover { color: var(--ink); }
.pubnav .right, .appnav .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.mark { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }

.mark .wm { display: inline-flex; flex-wrap: wrap; column-gap: .26em; text-transform: lowercase; }
@media (max-width: 860px) { .mark .wm { display: inline-grid; font-size: .7em; line-height: .98; letter-spacing: -.035em; } }
.iso { display: inline-block; width: 30px; height: 17px; color: var(--teal); flex: none; }
.iso svg { display: block; width: 100%; height: 100%; overflow: visible; }
.langmenu { position: relative; font-size: 12px; font-weight: 700; }
.langmenu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 17px; color: var(--ink); background: var(--white); }
.langmenu summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.langmenu[open] summary { border-color: var(--ink); }
.langmenu > div { position: absolute; right: 0; top: calc(100% + 6px); background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 6px; display: grid; min-width: 150px; box-shadow: 0 20px 40px -24px rgba(23,44,39,.5); z-index: 40; }
.langmenu > div a { padding: 9px 12px; border-radius: 9px; font-weight: 600; }
.langmenu > div a:hover { background: var(--teal-mist); }
.langmenu > div a.on { background: var(--ink); color: #fff; }
.langlist { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.langlist a.on { color: var(--ink); font-weight: 700; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; padding: 36px 0 44px; font-size: 13px; line-height: 1.9; color: var(--muted); border-top: 1px solid var(--line); margin-top: 40px; }
.foot b { display: block; color: var(--ink); font-weight: 700; }
.flash { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; background: var(--teal-soft); color: var(--teal-deep); border: 1px solid var(--teal-light); }
.flash.warn { background: var(--warn-bg); color: var(--warn); border-color: #EED98A; }

/* ---------- botones (teal, texto tinta; el naranja nunca es botón) ---------- */
.btn { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 24px; font-size: 15px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s; border: 0; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-h); color: #fff; box-shadow: 0 12px 24px -14px rgba(23,130,112,.9); }
.btn.primary:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn.line { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn.line:hover { background: var(--ink); color: #fff; }
.btn.danger { border: 1.5px solid var(--naranja); color: var(--naranja-text); background: transparent; }
.btn.danger:hover { background: var(--naranja); color: #fff; }
.btn.s { height: 40px; padding: 0 14px; font-size: 13.5px; border-radius: 20px; }
.btn.inv { background: var(--teal); color: #fff; }
.btn.inv:hover { background: var(--teal-h); color: #fff; }
.btn .bob { width: 24px; height: 24px; flex: none; overflow: visible; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- info popups ---------- */
.info { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--teal); color: var(--teal-deep); font-size: 11px; font-weight: 800; font-style: italic; vertical-align: middle; text-transform: none; letter-spacing: 0; margin-left: 2px; }
.info::before { content: ""; position: absolute; inset: -11px; }
.info::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 260px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; font-style: normal; line-height: 1.4; text-align: left; padding: 9px 12px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 30; white-space: normal; text-transform: none; letter-spacing: 0; }
.info:hover::after, .info:focus-visible::after, .info.open::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- menú app ---------- */
.appnav { border-bottom: 1px solid var(--line); font-size: 13px; background: var(--white); position: sticky; top: 0; z-index: 20; }
.appnav .container { display: flex; align-items: center; gap: 18px; min-height: 62px; }
.navitem { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 18px; color: var(--muted); font-weight: 500; }
.navitem.on { background: var(--teal-mist); color: var(--ink); font-weight: 700; }
.journey { display: inline-flex; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 3px; }
.journey .st { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 18px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.journey .st b { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 11px; }
.journey .st.on { background: var(--ink); color: #fff; font-weight: 700; }
.journey .st.on b { border-color: var(--teal); background: var(--teal); color: #fff; }
.journey .arr { color: var(--teal-light); padding: 0 2px; }
.cnt { font-size: 12px; font-weight: 700; background: var(--naranja-soft); color: var(--naranja-deep); border-radius: 9px; padding: 1px 6px; }
.journey .st.on .cnt { background: var(--naranja); color: #fff; }
.stepper { display: flex; gap: 6px; flex-wrap: wrap; }
.stepper a { font-size: 12px; padding: 6px 11px; border-radius: 13px; background: var(--teal-mist); color: var(--muted); }
.stepper a.done { color: var(--teal-deep); }
.stepper a.now { background: var(--ink); color: #fff; font-weight: 700; }
.tabbar { display: none; }
.prog { display: inline-flex; gap: 3px; vertical-align: middle; }
.prog i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--teal-light); }
.prog i.on { background: var(--teal); border-color: var(--teal); }

/* ---------- iconos y % ---------- */
.av { border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--ink); background: var(--teal-soft); width: 56px; height: 56px; overflow: hidden; }
.av svg { width: 62%; height: 62%; }
.av.dark { background: var(--ink); color: var(--teal-soft); }
.av.rosa { background: var(--naranja-soft); color: var(--naranja-deep); }
.av.super { box-shadow: 0 0 0 2px var(--white), 0 0 0 4.5px var(--naranja); }
.compat { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 26px; padding: 0 9px; border-radius: 13px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.compat.big { height: 42px; min-width: 84px; border-radius: 21px; font-size: 20px; letter-spacing: -.03em; }
.super-tag { color: var(--naranja-text); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tag { font-size: 12px; padding: 3px 8px; border-radius: 10px; background: var(--teal-mist); color: var(--teal-deep); white-space: nowrap; display: inline-block; }
.tag b { font-weight: 700; }
.tag.diff { background: var(--naranja-soft); color: var(--naranja-deep); }
.tag.bar { position: relative; display: flex; justify-content: space-between; width: 100%; background: linear-gradient(90deg, var(--teal-soft) var(--v), var(--teal-mist) var(--v)); border-radius: 8px; padding: 5px 9px; color: var(--ink); }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------- formularios: una columna, casillas grandes ---------- */
.form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.form.big { gap: 16px; }
.field { display: grid; gap: 4px; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; background: var(--white); min-height: 58px; transition: border-color .2s; }
.field > span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.field input, .field select, .field textarea { border: 0; background: transparent; padding: 2px 0; font-size: 17px; width: 100%; outline: none; resize: vertical; min-height: 28px; }
.form.big .field input, .form.big .field select { font-size: 18px; min-height: 32px; }
.field input[type=number] { font-variant-numeric: tabular-nums; }
.field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.counter { font-size: 12px; color: var(--muted); text-align: right; }
.pair { display: grid; grid-template-columns: 1fr; gap: 10px; }
.group { border: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.group legend { padding: 0; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--teal); margin-top: 1px; flex: none; }
.chk.big { border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 14px; font-size: 14.5px; background: var(--white); align-items: center; }
.chk.big input { width: 24px; height: 24px; margin: 0; }
.chk.big:has(input:checked) { border-color: var(--teal); background: var(--teal-mist); }
.seg3 { display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 15px; }
.seg3 label { position: relative; cursor: pointer; }
.seg3.seg-body { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.seg3 input { position: absolute; opacity: 0; inset: 0; }
.seg3 span { display: flex; align-items: center; min-height: 54px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); font-weight: 600; }
.seg3 span::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--teal-light); margin-right: 12px; flex: none; transition: background .2s, border-color .2s; }
.seg3 input:checked + span { border-color: var(--teal); background: var(--teal-mist); }
.seg3 input:checked + span::before { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 4px var(--white); }

.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.panel.dark { background: var(--ink); color: var(--teal-soft); border-color: var(--ink); }
.panel.dark .big { color: #fff; }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-size: 12.5px; }
.kv b { font-weight: 700; text-align: right; }
.row-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.empty { text-align: center; padding: 40px 20px; display: grid; gap: 10px; justify-items: center; }
.empty.small { padding: 24px 14px; }
/* recordatorio de que las botellas tardan: sin avisos, hay que volver a mirar */
.tide { font-size: 14px; line-height: 1.45; color: var(--teal-deep); font-weight: 600; max-width: 420px; } .tide span { margin-right: 2px; }
.hero .tide { margin: -12px 0 24px; } .empty.tall { padding: 80px 20px; }
.inline-details { display: inline-block; } .inline-details summary { display: inline; cursor: pointer; list-style: none; }
.subactions { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; color: var(--muted); }
.subactions .link { font-size: 12.5px; }
.inline-details form.inline { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; }
.inline-details input { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 13px; }
form.inline { display: inline; }
form.inline button.link { font-size: inherit; }

/* ---------- portada ---------- */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 20px 0 44px; min-height: 560px; }
.hero .copy { max-width: 560px; }
.eyebrow { color: var(--sun-text); margin-bottom: 18px; }
.hero .h1 span { color: var(--teal-h); }
.hero .lead { color: var(--muted); margin: 22px 0 26px; max-width: 460px; }
.hero .lead b { color: var(--ink); font-weight: 700; }
.hero .ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: repeat(3, auto); gap: 32px; justify-content: start; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line2); }
.facts b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--sun); }
.facts span { font-size: 12px; color: var(--muted); display: block; margin-top: 4px; }
.art { width: 100%; height: auto; display: block; overflow: visible; }
.band { padding: clamp(64px, 8vw, 104px) 0; border-top: 1px solid var(--line); }   /* aire generoso entre módulos */

.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.sample { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.samplecard { border: 1px solid var(--line); border-radius: var(--r2); padding: 22px; background: var(--white); box-shadow: 0 40px 70px -50px rgba(23,44,39,.4); transform: rotate(-1deg); }
.who { display: flex; gap: 14px; align-items: center; }
.quote-s { font-size: 15px; line-height: 1.45; color: var(--ink2); }
.samplecard .quote-s { margin: 16px 0; }
.benefits { border-top: 2px solid var(--line2); }
.benefits div { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
.benefits i { font-style: normal; color: var(--sun-text); font-weight: 800; font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.steps > div { display: grid; grid-template-columns: 84px 1fr; gap: 4px 16px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.steps .ico { grid-row: span 3; width: 84px; height: 84px; border-radius: 50%; background: var(--teal-soft); color: var(--ink); display: grid; place-items: center; }
.steps .ico svg { width: 60%; height: 60%; overflow: visible; }
.steps .n { font-size: 12px; font-weight: 800; color: var(--sun-text); letter-spacing: .08em; }
.steps h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.steps p { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; align-items: baseline; gap: 12px; background: var(--white); transition: transform .3s var(--ease), border-color .3s; }
.tile:hover { transform: translateY(-3px); border-color: var(--teal-light); }
.tile .h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--sun); flex: none; }
.tile.on { background: var(--sun-soft); border-color: var(--sun-soft); } .tile.on .xs { color: var(--sun-deep); }
.iconrow { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.iconrow .av { width: 100%; aspect-ratio: 1; height: auto; transition: transform .3s var(--ease); }
.iconrow .av:hover { transform: scale(1.08) rotate(-4deg); }
.closing { background: var(--ink); color: var(--teal-soft); position: relative; overflow: hidden; }
.closing .container { position: relative; z-index: 2; padding-top: 64px; padding-bottom: 96px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
.closing h2 { color: #fff; font-size: clamp(34px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: .98; }
.closing p { color: var(--teal-light); font-size: 15.5px; line-height: 1.5; margin: 18px 0 26px; max-width: 420px; }
.closing .waves { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; width: 100%; }

/* ---------- compartir ---------- */

.sharecard { position: relative; border-radius: var(--r2); background: var(--ink); color: var(--teal-soft); padding: 22px; overflow: hidden; box-shadow: 0 40px 70px -50px rgba(23,44,39,.6); }
.sharecard .top { display: flex; align-items: center; gap: 12px; }
.sharecard .top .av { width: 52px; height: 52px; }
.sharecard .h4 { color: #fff; }
.sharecard .msg { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: #fff; margin: 16px 0 14px; }
.sharecard .foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--teal-light); border: 0; margin: 0; padding: 0; grid-template-columns: none; }
.sharecard .foot .mark { color: #fff; font-size: 16px; } .sharecard .mark .iso { width: 26px; height: 15px; color: var(--teal-light); }
.sharerow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sharebtn { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; font-size: 12px; font-weight: 700; background: var(--white); transition: transform .25s var(--ease), border-color .25s; cursor: pointer; color: var(--ink); }
.sharebtn:hover { transform: translateY(-2px); border-color: var(--teal-light); }
.sharebtn i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.sharebtn i svg { width: 22px; height: 22px; }
.linkbox { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--teal); border-radius: 14px; padding: 8px 8px 8px 14px; font-size: 13.5px; font-weight: 600; background: var(--teal-mist); }
.linkbox span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chain .av { width: 30px; height: 30px; } .chain .av svg { width: 60%; height: 60%; }
.chain em { font-style: normal; color: var(--sun-text); font-weight: 800; }

.public-bottle { display: grid; gap: 18px; max-width: 560px; }
.public-cta { display: grid; gap: 10px; justify-items: start; }

/* ---------- lanzar ---------- */
.launch .pcol { max-width: 720px; margin: 0 auto; padding: 26px 0 100px; display: grid; gap: 16px; align-content: start; }
.launch .pcol.wide { max-width: 1040px; }
.launch-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.icon-cat { margin: 14px 0 8px; }
.icon-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; }
.icon-pick { position: relative; cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; inset: 0; }
.icon-pick .av { width: 100%; aspect-ratio: 1; height: auto; transition: transform .25s var(--ease); }
.icon-pick:hover .av { transform: scale(1.06); }
.icon-pick input:checked + .av { background: var(--ink); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--sun); }
.sticky-actions { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 16px; background: linear-gradient(180deg, rgba(251,249,246,0), var(--paper) 30%); z-index: 5; }
.qhead { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.qprog { text-align: right; font-size: 13px; color: var(--muted); min-width: 160px; }
.qprog b { font-size: 24px; color: var(--ink); font-weight: 800; }
.qprog .bar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 6px; overflow: hidden; }
.qprog .bar i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .4s var(--ease); }
.questions { display: grid; gap: 12px; }
.questions .topic { margin: 18px 0 2px; color: var(--sun-text); }
.q { border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 20px; background: var(--white); display: grid; gap: 14px; min-width: 0; }
.q.done { border-color: var(--teal); }
.q .qt { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; display: flex; gap: 10px; align-items: flex-start; }
.qn { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 14px; background: var(--sun-soft); color: var(--sun-deep); font-size: 13px; font-weight: 800; flex: none; }
.q.done .qn { background: var(--teal); color: #fff; }
/* vector: control deslizante izquierda → derecha */
.slider { display: grid; gap: 8px; }
.slider .poles { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.slider .poles span:last-child { text-align: right; }
.slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--teal-soft), var(--teal-light), var(--teal-soft)); }
.slider input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--teal-soft), var(--teal-light), var(--teal-soft)); }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: var(--teal); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(23,44,39,.25); margin-top: -12px; transition: transform .2s var(--ease), background .2s; }
.slider input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(23,44,39,.25); }
.slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.slider.unset input[type=range]::-webkit-slider-thumb { background: #fff; border: 2.5px dashed var(--teal); box-shadow: none; }
.slider.unset input[type=range]::-moz-range-thumb { background: #fff; border: 2.5px dashed var(--teal); box-shadow: none; }
.slider .ticks { display: flex; justify-content: space-between; padding: 0 13px; margin-top: -6px; }
.slider .ticks i { width: 4px; height: 4px; border-radius: 50%; background: var(--teal-light); }
.slider .hint { min-height: 1em; color: var(--sun-deep); }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick label, .opts label { position: relative; cursor: pointer; }
.quick input, .opts input { position: absolute; opacity: 0; inset: 0; }
.quick span { display: grid; place-items: center; min-height: 60px; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 10px; text-align: center; font-size: 15px; font-weight: 600; }
.quick input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.opts { display: grid; gap: 8px; }
.opts label { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 14px; font-size: 15px; min-height: 54px; }
.opts i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--teal-light); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
.opts label:has(input:checked) { border-color: var(--teal); background: var(--teal-mist); }
.opts input:checked ~ i { background: var(--teal); border-color: var(--teal); color: #fff; }
.db { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; }
.db input { accent-color: var(--sun); width: 18px; height: 18px; }

/* ---------- mi botella ---------- */
.mine { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; padding-top: 22px; padding-bottom: 60px; }
.mine .mine-main { padding-right: 32px; border-right: 1px solid var(--line); display: grid; gap: 16px; align-content: start; }
.mine aside { padding-left: 28px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--teal-deep); background: var(--teal-mist); border: 1px solid var(--teal-soft); border-radius: 14px; padding: 5px 10px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.status.paused { color: var(--warn); background: var(--warn-bg); border-color: #EED98A; } .status.paused i { background: var(--warn); box-shadow: 0 0 0 3px #F3DEC0; }
.who.big .av { width: 84px; height: 84px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; font-weight: 600; color: var(--ink2); margin-top: 4px; }
.meta span + span::before { content: "·"; margin-right: 14px; color: var(--teal-light); }

.quote { font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; padding-left: 14px; border-left: 3px solid var(--sun); }
.quote.big { font-size: 24px; }
.act-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.act-row b { font-weight: 700; display: block; font-size: 15px; }
.act-row.danger b { color: var(--naranja-text); }
details.act-row { display: block; }
details.act-row summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
details.act-row .form { margin-top: 12px; }
details.act-row .form textarea { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; font-size: 15px; }

/* ---------- buscar ---------- */
.search { display: grid; grid-template-columns: 250px 1fr; padding-top: 18px; padding-bottom: 80px; }
.side { border-right: 1px solid var(--line); padding-right: 20px; display: grid; gap: 18px; align-content: start; }
.filters { display: grid; gap: 14px; align-content: start; }
.fgroup { border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); padding: 10px 12px; }
.fgroup summary { cursor: pointer; list-style: none; color: var(--muted); }
.fgroup .pair { margin-top: 10px; }
.fgroup .field { min-height: 50px; padding: 6px 10px; }
.filters .cap { display: block; color: var(--muted); }
.filters input[type=range] { width: 100%; accent-color: var(--teal); height: 32px; margin-top: 4px; }
.results { padding-left: 22px; }
.rhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--line2); }
.rhead .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------- ficha ---------- */
.detail { display: grid; grid-template-columns: 1.5fr 1fr; padding-top: 22px; padding-bottom: 60px; }
.detail .main { padding-right: 32px; border-right: 1px solid var(--line); display: grid; gap: 18px; align-content: start; }
.detail aside { padding-left: 24px; display: grid; gap: 10px; align-content: start; }
.who.person { gap: 22px; align-items: flex-start; }
.who.person .av { width: 112px; height: 112px; }
.who.person .name { font-size: clamp(34px, 4vw, 54px); margin: 4px 0 12px; }
.name-pct { display: none; }
/* Mi botella: «Ahora te toca», la siguiente acción según el momento */
.nextup { display: grid; gap: 10px; justify-items: start; }
.nextup .cap { margin: 0; }
.nextup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.facts3 { display: flex; flex-wrap: wrap; gap: 10px; }
.facts3 > div { border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; background: var(--white); min-width: 110px; }
.facts3 b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.facts3 span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.why > div { border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 20px; background: var(--white); display: grid; gap: 8px; align-content: start; }
.why.big > div { padding: 22px 24px; min-height: 190px; }
.why .cap { color: var(--teal-deep); }
.why .h3 { font-size: 22px; line-height: 1.15; }
.why > div.fit { background: var(--teal-mist); border-color: var(--teal-soft); }
.why > div.diff { background: var(--sun-soft); border-color: var(--sun-soft); } .why > div.diff .cap { color: var(--sun-deep); }
.minibars { display: grid; gap: 6px; margin-top: 6px; }
.minibars span { display: grid; grid-template-columns: minmax(72px, auto) 1fr 36px; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; }
.minibars em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--ink2); white-space: nowrap; }
.minibars i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--teal) var(--v), rgba(23,44,39,.08) var(--v)); }
.diff .minibars i { background: linear-gradient(90deg, var(--sun) var(--v), rgba(23,44,39,.08) var(--v)); }
.bars { display: grid; gap: 8px; }
.barrow { display: grid; grid-template-columns: 92px 1fr 34px; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 600; }
.barrow .t { position: relative; height: 14px; border-radius: 7px; background: var(--white); border: 1px solid var(--line); }
.barrow .t b { display: block; height: 100%; border-radius: 7px; width: 0; transition: width 1s var(--ease); }
.barrow .t i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--sun-deep); opacity: .7; }
.barrow span:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.gauge { display: flex; gap: 16px; align-items: center; }
.gauge svg { width: 104px; height: 104px; flex: none; }
.radar { width: 100%; height: auto; display: block; }
.hist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; align-items: end; height: 54px; }
.hist div { border-radius: 4px 4px 0 0; background: var(--teal-soft); }
.hist div.me { background: var(--sun); }
.hist-l { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }
.legend { display: inline-flex; gap: 6px; font-size: 12px; color: var(--muted); align-items: center; }
.legend i { width: 10px; height: 2px; background: var(--sun-deep); display: inline-block; }

/* ---------- cartas ---------- */
.p2 { display: grid; grid-template-columns: 230px 1fr 230px; padding-top: 18px; padding-bottom: 80px; }
.p2 aside { font-size: 13px; }
.p2 aside:first-child { border-right: 1px solid var(--line); padding-right: 18px; } .p2 aside:last-child { border-left: 1px solid var(--line); padding-left: 18px; }
.p2 .pcol { display: flex; flex-direction: column; align-items: center; padding: 10px 24px 40px; gap: 0; }
.deck { position: relative; width: 480px; max-width: 100%; min-height: 240px; }
.deck .c { position: absolute; inset: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r2); }
.deck .c.b2 { transform: translateY(16px) rotate(3.5deg) scale(.95); background: var(--teal-soft); border-color: var(--teal-soft); }
.deck .c.b1 { transform: translateY(8px) rotate(-2deg) scale(.98); background: var(--teal-mist); }
.deck .c.top { position: relative; padding: 24px; transform: rotate(-.8deg); box-shadow: 0 24px 50px -30px rgba(23,44,39,.4); display: grid; gap: 8px; }
.deck .q { border: 0; padding: 0; font-size: 20px; }
.deck .ans { font-size: 16px; line-height: 1.5; color: var(--ink2); margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.deck textarea { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; font-size: 16px; resize: vertical; }

.seeds { display: flex; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.seeds.center { justify-content: center; }
/* sobres: uno por carta */
.seeds i { position: relative; width: 26px; height: 18px; border-radius: 3px; border: 1.5px solid var(--teal-light); background: #fff; overflow: hidden; }
.seeds i::before { content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 9px solid var(--teal-light); }
.seeds i.y { background: var(--teal); border-color: var(--teal); } .seeds i.y::before { border-top-color: var(--ink); }
.seeds i.n { background: var(--line); border-color: var(--line); } .seeds i.n::before { border-top-color: #C9D0CE; }
.seeds i.now { border-color: var(--ink); border-width: 2px; } .seeds i.now::before { border-top-color: var(--ink); }
.seeds.small { margin-top: 8px; gap: 4px; } .seeds.small i { width: 18px; height: 13px; } .seeds.small i::before { border-left-width: 8px; border-right-width: 8px; border-top-width: 6px; }
.swipe { display: flex; gap: 14px; margin-top: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.approve { display: flex; align-items: center; gap: 16px; border-radius: 18px; padding: 16px 20px; text-align: left; max-width: 520px; }
.approve b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; flex: none; }
.approve.ok { background: var(--teal-mist); border: 1.5px solid var(--teal); } .approve.ok b { color: var(--teal-deep); }
.approve.no { background: var(--white); border: 1.5px solid var(--line); color: var(--muted); }
.state { display: grid; gap: 6px; margin-top: 14px; }
.state div { display: flex; justify-content: space-between; }
.state b { font-weight: 700; }
kbd { font-family: var(--font); font-size: 12px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: #fff; }
.answered { width: 100%; margin-top: 28px; }
.answered summary { cursor: pointer; }
.answered .panel { margin-top: 10px; }
.rules p { margin-top: 6px; }
.rules-list { padding-left: 20px; display: grid; gap: 10px; margin: 16px 0; }
.page { display: grid; gap: 16px; line-height: 1.55; }
.page .steps { margin: 10px 0; }

/* ---------- sí mutuo ---------- */
.yes { display: grid; grid-template-columns: 1fr 1fr; padding-top: 18px; padding-bottom: 60px; gap: 24px; }
.yes .art2 { background: var(--sun-soft); position: relative; overflow: hidden; min-height: 380px; border-radius: var(--r2); }
.yes .art2 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.yes-icons { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 36px; }
.yes-icons .av { width: 84px; height: 84px; background: transparent; color: var(--ink); }
.yes .copy { padding: 24px; display: grid; gap: 14px; align-content: center; }

/* ---------- mensajes ---------- */
.chat { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 62px); padding-top: 0; }
.chat .stepsub { grid-column: 1 / -1; justify-self: start; margin: 12px 0 0; }
.convs { border-right: 1px solid var(--line); overflow: auto; padding: 12px 12px 80px 0; }
.conv { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.conv.on { background: var(--teal-mist); border-color: var(--teal); }
.conv .av { width: 42px; height: 42px; }
.thread { display: flex; flex-direction: column; min-height: 0; }
.thread .head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.thread .head .av { width: 38px; height: 38px; }
.thread .tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.msgs { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.bubble { max-width: 62%; padding: 10px 14px; font-size: 15px; line-height: 1.4; border-radius: 18px; }
.bubble.them { background: var(--white); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 5px; }
.bubble.me { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.bubble.blocked { background: #fff; color: var(--muted); border: 1px dashed #D9B98F; text-decoration: line-through; align-self: flex-end; }
.composer { display: flex; gap: 8px; padding: 10px 18px 16px; border-top: 1px solid var(--line); }
.composer input { flex: 1; height: 56px; border-radius: 28px; background: var(--white); border: 1.5px solid var(--line); padding: 0 18px; font-size: 16px; }
.composer input:focus { border-color: var(--teal); outline: none; }
.composer .btn.send { height: 56px; padding: 0 26px; border-radius: 28px; font-size: 16px; box-shadow: 0 14px 28px -14px rgba(23,130,112,.9); }

/* ---------- login ---------- */
.login { max-width: 460px; display: grid; gap: 14px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
@media (max-width: 1000px) {
  .name-pct { display: inline-block; vertical-align: middle; font-size: 18px; }
  .hero, .sample, .closing .container, .mine, .search, .detail, .p2, .yes, .launch-grid { grid-template-columns: 1fr; }
  .mine .mine-main, .side, .detail .main, .p2 aside { border: 0 !important; padding-right: 0 !important; }
  .mine aside, .detail aside, .results { padding-left: 0; }
  .mine aside { margin-top: 20px; }
  .filters { gap: 10px; grid-template-columns: 1fr 1fr; } .filters .btn { grid-column: 1 / -1; }
  .p2 aside:last-child { display: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); } .iconrow { grid-template-columns: repeat(6, 1fr); } .icon-grid { grid-template-columns: repeat(6, 1fr); }
  .chat { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 62px); } .convs { max-height: 200px; padding: 8px 0 0; border: 0; display: flex; gap: 8px; overflow-x: auto; } .conv { margin: 0; min-width: 220px; }
  .journey .lbl { display: none; }

  .hero { min-height: 0; } .hero .art { max-height: 420px; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .pubnav { height: 64px; gap: 12px; } .pubnav .links { display: none; } .pubnav .right { gap: 8px; } .pubnav .right .sm { font-size: 13.5px; font-weight: 700; padding: 10px 2px; }   /* «Entrar» visible: quien vuelve tiene que poder entrar */
  .mark { font-size: 18px; } .iso { width: 26px; height: 15px; }
  .facts { gap: 20px; }
  .steps, .foot, .why, .quick, .filters { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; } .sharerow { grid-template-columns: 1fr 1fr; } .icon-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .appnav .container { flex-wrap: wrap; gap: 8px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; } .appnav .journey, .appnav .navitem { display: none; } .appnav { position: static; }
  .stepper { width: 100%; order: 3; } .stepper a { font-size: 12px; padding: 5px 9px; }
  .who.person { flex-direction: column; gap: 14px; } .who.person .av { width: 92px; height: 92px; }
  .inline-details form.inline { display: flex; margin: 8px 0 0; width: 100%; } .inline-details input { flex: 1; min-height: 40px; }
  .facts3 > div { flex: 1 1 40%; }
  .bubble { max-width: 85%; }
  .band { padding: 56px 0; }
  .mine, .detail, .search, .p2, .yes { padding-bottom: 106px; }
  .launch .pcol { padding-bottom: 40px; }
  .q { padding: 16px; } .q .qt { font-size: 17px; }
  .slider .poles { font-size: 13px; }
  .approve { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: var(--white); border-top: 1px solid var(--line); padding: 8px 4px 12px; font-size: 10.5px; text-align: center; color: var(--muted); z-index: 30; }
  .tabbar a b { display: grid; place-items: center; height: 20px; font-size: 14px; }
  .tabbar .iso { width: 22px; height: 13px; color: currentColor; }
  .tabbar a.on { color: var(--ink); font-weight: 700; } .tabbar a.on b { color: var(--sun-text); }
  .sticky-actions { bottom: 0; }
  .info::after { left: auto; right: -10px; transform: translateX(0) translateY(4px); max-width: 78vw; }
  .info:hover::after, .info:focus-visible::after, .info.open::after { transform: translateX(0) translateY(0); }
}

/* ---------- usabilidad transversal ---------- */
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.skip:focus { top: 12px; }
#main:focus { outline: none; }
#loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .2s; }
#loadbar::before { content: ""; position: absolute; inset: 0; width: 35%; background: var(--sun); border-radius: 0 3px 3px 0; animation: loadbar 1.1s var(--ease) infinite; }
#loadbar.on { opacity: 1; }
@keyframes loadbar { 0% { transform: translateX(-100%); } 60% { transform: translateX(200%); } 100% { transform: translateX(300%); } }
.btn.loading { pointer-events: none; opacity: .85; }
.btn.loading .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.totop { position: fixed; right: 18px; bottom: 22px; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -12px rgba(23,44,39,.6); z-index: 25; transition: transform .25s var(--ease), opacity .25s; }
.totop[hidden] { display: none; }
.totop svg { width: 22px; height: 22px; }
.totop:hover { transform: translateY(-2px); background: var(--teal-h); }
.stepsub { font-size: 13.5px; font-weight: 600; color: var(--teal-deep); background: var(--teal-mist); border: 1px solid var(--teal-soft); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; display: inline-block; }

.qmini { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.qmini b { font-size: 18px; color: var(--ink); }
.qmini i { width: 90px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: block; }
.qmini i span { display: block; height: 100%; width: 0; background: var(--teal); transition: width .4s var(--ease); }
.native-share { width: 100%; }
.native-share[hidden] { display: none; }
/* foco visible en controles con input oculto */
.icon-pick:has(input:focus-visible) .av, .seg3 label:has(input:focus-visible) span, .quick label:has(input:focus-visible) span, .opts label:has(input:focus-visible) { outline: 2px solid var(--sun); outline-offset: 2px; }
@media (max-width: 720px) {
  .totop { right: 14px; bottom: 82px; width: 44px; height: 44px; }

  .qmini i { display: none; }
  .stepsub { font-size: 13px; }
}

/* ---------- flujo: la acción que avanza de fase manda ---------- */
.btn.xl { height: 60px; padding: 0 30px; font-size: 18px; border-radius: 30px; }
.btn.primary.next, .btn.primary.xl { box-shadow: 0 16px 30px -14px rgba(23,130,112,.95); }
.btn.primary.next { height: 50px; font-size: 15px; }   /* misma altura que el resto de botones (50 desde el rediseño); antes 48 y no casaba en las listas */
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--teal); opacity: 0; animation: pulse 2.8s ease-out infinite; pointer-events: none; }
@keyframes pulse { 0% { transform: scale(.98); opacity: .8; } 60% { transform: scale(1.1); opacity: 0; } 100% { opacity: 0; } }
.flowbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- cartas: postales, sellos y matasellos ---------- */
.deckhead { display: flex; gap: 22px; align-items: center; margin: 4px 0 18px; }
.fan { position: relative; width: 132px; height: 100px; flex: none; }
.fc { position: absolute; left: 26px; top: 10px; width: 80px; height: 80px; border-radius: 12px; background: var(--white); border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--ink); box-shadow: 0 12px 24px -16px rgba(23,44,39,.5); transform-origin: 50% 100%; }
.fc svg { width: 56%; height: 56%; }
.fc1 { transform: rotate(-16deg) translateX(-18px); background: var(--teal-soft); }
.fc2 { transform: rotate(-4deg); background: var(--teal-mist); }
.fc3 { transform: rotate(10deg) translateX(18px); }
.letter-row { position: relative; display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px 16px 22px; margin-top: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.letter-row:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -30px rgba(23,44,39,.45); }
.letter-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--teal-soft); }
.letter-row.st-cards::before { background: var(--teal); } .letter-row.st-proposed::before { background: var(--teal-light); } .letter-row.st-chat::before { background: var(--ink); } .letter-row.st-paused::before { background: var(--line); }
.letter-row .h3 { font-size: 19px; }
.letter-row .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.stamp { width: 70px; height: 70px; padding: 5px; background: var(--white); border: 2px dashed var(--teal-light); border-radius: 4px; transform: rotate(-4deg); display: grid; flex: none; }
.stamp > span { width: 100%; height: 100%; background: var(--teal-soft); color: var(--ink); display: grid; place-items: center; border-radius: 2px; }
.stamp svg { width: 60%; height: 60%; }
.stamp.dark { border-color: var(--teal); } .stamp.dark > span { background: var(--ink); color: var(--teal-soft); }
.letter { gap: 10px; }
.letter .lhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: relative; min-height: 92px; }
.letter .lhead .stamp { width: 64px; height: 64px; transform: rotate(3deg); }
.postmark { position: absolute; right: 46px; top: 14px; width: 72px; height: 72px; border: 2px solid rgba(23,44,39,.5); border-radius: 50%; transform: rotate(-14deg); display: grid; place-content: center; text-align: center; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(23,44,39,.6); pointer-events: none; mix-blend-mode: multiply; }
.postmark { padding: 0 10px; font-size: 7px; letter-spacing: .05em; line-height: 1.15; }   /* el nombre largo cabe en el círculo */
.postmark b { display: block; font-size: 17px; letter-spacing: -.02em; line-height: 1; margin-bottom: 2px; }
.letter .q { margin-top: 2px; }
.letter .ans { font-size: 17px; line-height: 30px; color: var(--ink); margin-top: 6px; padding: 0; border: 0; background: repeating-linear-gradient(to bottom, transparent 0 29px, var(--line) 29px 30px); background-position: 0 4px; }
.letter .sign { text-align: right; font-size: 15px; font-weight: 600; color: var(--teal-deep); font-style: italic; }
.deck textarea { background: repeating-linear-gradient(to bottom, transparent 0 29px, var(--line) 29px 30px) #fff; background-position: 0 10px; line-height: 30px; font-size: 17px; border-radius: 10px; }
@media (max-width: 720px) {
  .flowbar { position: sticky; bottom: 68px; z-index: 6; padding: 10px 0 8px; background: linear-gradient(180deg, rgba(251,249,246,0), var(--paper) 35%); }
  .flowbar .btn.xl { flex: 1 1 100%; }

  .letter-row { grid-template-columns: 60px 1fr; padding-left: 18px; } .letter-row .stamp { width: 58px; height: 58px; }
  .letter-row .acts { grid-column: 1 / -1; flex-direction: row; } .letter-row .acts .btn { flex: 1; }
  .deckhead { gap: 14px; } .fan { width: 104px; height: 84px; } .fc { width: 64px; height: 64px; left: 20px; }
  .postmark { right: 40px; top: 10px; width: 62px; height: 62px; } .postmark b { font-size: 14px; }
  .composer { position: sticky; bottom: 68px; background: var(--paper); z-index: 6; }
  .composer .btn.send { padding: 0 18px; }
}

/* ---------- innegociables en afinidad ---------- */
.dbpanel { border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); padding: 12px; display: grid; gap: 10px; }
.dbpanel .cap { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dblist { list-style: none; display: grid; gap: 8px; }
.dblist li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--teal-mist); border-left: 3px solid var(--teal); font-size: 13px; }
.dblist li b { font-weight: 700; line-height: 1.3; }
.dblist li span { color: var(--teal-deep); font-weight: 600; }
.dbedit summary { list-style: none; cursor: pointer; display: inline-flex; }
.dbedit .form { margin-top: 10px; }
.dbedit .chk.big { align-items: flex-start; }
.dbedit .chk.big small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dbedit .chk.big:has(input:checked) small { color: var(--teal-deep); }
@media (max-width: 1000px) { .dbpanel { grid-column: 1 / -1; } .side { grid-template-columns: 1fr; } .filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .filters { grid-template-columns: 1fr; } .minibars span { grid-template-columns: minmax(64px, auto) 1fr 32px; } }

/* ---------- acceso sin correo: código de recuperación, novedades, campo trampa ---------- */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.recovery { border: 2px dashed var(--teal); border-radius: var(--r); padding: 16px 18px; background: var(--teal-mist); display: grid; gap: 8px; justify-items: start; }
.recovery .cap { color: var(--teal-deep); }
.recovery .code { font-size: clamp(22px, 4vw, 30px); font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ink); user-select: all; }

/* ---------- móvil: sin desbordes (los hijos de rejilla no pueden ensanchar la página) ---------- */
.mine .mine-main, .mine aside, .detail .main, .detail aside, .p2 .pcol, .p2 aside, .p2 > *, .side, .results, .convs, .thread, .stack > *, .letter-row > *, .chat > *, .launch .pcol > *, .who > *, .state > *, .deck, .deck .c { min-width: 0; }

 .dblist li b, .letter-row .h3, .conv p { overflow-wrap: anywhere; }
.thread .head { flex-wrap: wrap; }
.composer input { min-width: 0; }
.deck { width: min(480px, 100%); }
/* ---------- popups de resultado y de campos ---------- */
.toast { position: fixed; left: 16px; right: 16px; top: 16px; z-index: 300; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 15px; line-height: 1.4; box-shadow: 0 24px 50px -24px rgba(23,44,39,.7); animation: toast-in .35s var(--ease); }
.toast.ok { background: var(--teal-deep); } .toast.warn { background: var(--naranja-text); }
.toast > i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; }
.toast > p { flex: 1; margin: 0; } .toast > p b { display: block; font-size: 13px; opacity: .85; margin-bottom: 2px; }
.toast > button { flex: none; height: 36px; padding: 0 12px; border-radius: 18px; background: #fff; color: var(--ink); font-weight: 700; font-size: 13px; }
.toast.leaving { animation: toast-out .25s var(--ease) forwards; }
@keyframes toast-in { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }
@media (min-width: 721px) { .toast { left: auto; right: 24px; top: 78px; max-width: 460px; } }
.flash.hidden { display: none; }
.field.err, .chk.err, .seg3.err span, .q.err, .opts.err label, .quick.err span, .slider.err input[type=range] { border-color: var(--naranja) !important; box-shadow: 0 0 0 3px var(--naranja-soft); }
.field.err > span { color: var(--naranja-text); }
/* ---------- progreso pegado arriba (paso 3, móvil) ---------- */
.qsticky { display: none; }
@media (max-width: 720px) {
  .qsticky { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 8; margin: 0 calc(-1 * clamp(16px, 5vw, 72px)); padding: 10px clamp(16px, 5vw, 72px); background: rgba(251,249,246,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .qsticky b { font-size: 20px; color: var(--ink); } .qsticky i { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; display: block; } .qsticky i span { display: block; height: 100%; width: 0; background: var(--teal); transition: width .4s var(--ease); }
  .qhead .qprog { display: none; }
  /* marca más grande, el isotipo manda */
  .mark { font-size: 19px; gap: 10px; } .iso { width: 44px; height: 25px; }
  .pubnav .right .btn.s { height: 40px; padding: 0 14px; }
  /* chat */
  .convs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .conv { min-width: 72vw; max-width: 80vw; scroll-snap-align: start; }
  .thread .head .tools { width: 100%; justify-content: flex-end; }
  .composer { bottom: var(--tabbar-h); padding: 10px 0 12px; }
  .composer .btn.send { padding: 0 16px; font-size: 15px; height: 52px; } .composer input { height: 52px; }
  /* tabbar: iconos grandes y activo destacado; el alto vive en --tabbar-h (lo usan composer, flowbar y el hilo del chat) */
  :root { --tabbar-h: calc(86px + env(safe-area-inset-bottom)); }
  .tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); height: var(--tabbar-h); align-items: stretch; border-top: 1.5px solid var(--line); box-shadow: 0 -12px 32px -20px rgba(23,44,39,.45); }
  .tabbar a { min-width: 0; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink2); border-radius: 16px; }
  .tabbar a b { all: unset; }
  .tabbar .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar .ico { position: relative; width: 64px; height: 40px; border-radius: 20px; display: grid; place-items: center; transition: background .2s, transform .2s; }
  .tabbar .ico svg { width: 29px; height: 29px; } .tabbar .ico .iso { width: 38px; height: 22px; color: currentColor; }
  /* aviso de mensajes sin leer: punto rojo arriba a la derecha del icono, solo cuando hay algo */
  .tabbar .ico .dot { position: absolute; right: 11px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #B93636; border: 2px solid #fff; }
  .tabbar .ico .dot[hidden] { display: none; }
  .tabbar a:active .ico { transform: scale(.94); }
  .tabbar a.on { color: var(--ink); font-weight: 800; } .tabbar a.on .ico { background: var(--teal); color: #fff; box-shadow: 0 8px 16px -10px rgba(23,130,112,.9); }
  .in-app main { padding-bottom: calc(var(--tabbar-h) + 8px); } .flowbar { bottom: var(--tabbar-h); } .totop { bottom: calc(var(--tabbar-h) + 14px); }
}

@media (max-width: 720px) {
  .pubnav { gap: 8px; } .pubnav .right { gap: 6px; } .pubnav .right .btn.s { padding: 0 12px; font-size: 13px; } .langmenu summary { padding: 0 10px; height: 40px; }
}

/* =====================================================================
   Pasada de maquetación: titulares más grandes, más aire, ritmo de 8 px
   ===================================================================== */
:root { --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; }
.h1 { font-size: clamp(46px, 6.6vw, 104px); line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.h2 { font-size: clamp(32px, 3.9vw, 54px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
h1.h2 { font-size: clamp(38px, 4.8vw, 66px); }
.h3 { font-size: 19px; line-height: 1.2; }
.h4 { font-size: 15.5px; }
.lead { font-size: 19px; line-height: 1.5; }
.sm { font-size: 15px; line-height: 1.55; }
.xs { font-size: 13.5px; }
.cap { font-size: 12px; letter-spacing: .1em; }
.stack { gap: var(--s3); }
p.sm.m, p.xs { text-wrap: pretty; }
.h2 + .sm, .h2 + .lead, .h2 + p, h1.h2 + p { margin-top: 10px; }
.container.narrow { padding-top: var(--s5); padding-bottom: var(--s6); }
.stepsub { margin-bottom: var(--s3); padding: 9px 14px; font-size: 13.5px; }
.empty { display: grid; gap: 14px; justify-items: center; text-align: center; padding: var(--s5) var(--s2); }
.empty .h3 { font-size: 24px; letter-spacing: -.025em; max-width: 22ch; }
.empty .sm { max-width: 46ch; }
.empty.tall { min-height: 60vh; align-content: center; }
.band-head { margin-bottom: var(--s4); }
.who.big .h2 { font-size: clamp(34px, 4.2vw, 56px); }
.btn { height: 50px; }
/* listado de cartas */
.deckhead { gap: var(--s4); margin: var(--s1) 0 var(--s4); }
.deckhead .h2 + .sm { max-width: 52ch; }
.letter-row { padding: 20px 22px 20px 26px; margin-top: 14px; gap: 20px; border-radius: 20px; }
.letter-row .h3 { font-size: 21px; }
.letter-row .xs { margin-top: 4px; }
.panel.rules { margin-top: var(--s5); }

/* =====================================================================
   Cartas: sellos de decisión, arrastre y mazo
   ===================================================================== */
.p2 { gap: 0; padding-top: var(--s3); overflow-x: clip; }
.p2 .pcol { padding: var(--s3) var(--s4) var(--s5); }
.p2 aside .who .h3 { font-size: 22px; }
.deck { width: min(540px, 100%); min-height: 280px; margin-top: var(--s1); }
.deck .c.top { padding: 30px 32px 28px; touch-action: pan-y; cursor: grab; user-select: none; will-change: transform; }
.deck .c.top.dragging { cursor: grabbing; transition: none; box-shadow: 0 40px 70px -30px rgba(23,44,39,.55); }
.deck .q { font-size: clamp(21px, 2.2vw, 25px); line-height: 1.2; letter-spacing: -.02em; }
.letter .ans { font-size: 18px; line-height: 32px; background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px); background-position: 0 5px; }
.vstamp { position: absolute; top: 54px; z-index: 3; padding: 6px 14px; border: 3px solid currentColor; border-radius: 10px; font-size: 20px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; opacity: 0; pointer-events: none; background: rgba(255,255,255,.85); white-space: nowrap; }
.vstamp.yes { left: 24px; color: var(--teal-deep); transform: rotate(-12deg); }
.vstamp.no { right: 24px; color: var(--naranja-text); transform: rotate(12deg); }
.c.top.v-yes .vstamp.yes, .c.top.v-no .vstamp.no { opacity: 1; animation: stamp-in .28s cubic-bezier(.2,.9,.25,1.4); }
@keyframes stamp-in { from { transform: scale(1.8) rotate(var(--r, 0deg)); opacity: 0; } }
.vstamp.yes { --r: -12deg; } .vstamp.no { --r: 12deg; }
.c.top.v-yes { box-shadow: 0 0 0 3px var(--teal), 0 30px 60px -30px rgba(23,44,39,.5); }
.c.top.v-no { box-shadow: 0 0 0 3px var(--naranja-soft), 0 30px 60px -30px rgba(23,44,39,.5); }
.seeds { margin-top: var(--s4); gap: 8px; }
.seeds i { transition: background .3s, border-color .3s; }
.swipe { margin-top: var(--s3); gap: var(--s2); }
.swipe .btn.line { height: 60px; padding: 0 26px; font-size: 16px; }
.swipehint { margin-top: 14px; display: flex; gap: 6px; align-items: center; }
.final { gap: var(--s3); max-width: 560px; }
.final .h2 { font-size: clamp(30px, 3.4vw, 44px); }
@media (pointer: coarse) { .swipehint kbd { display: none; } }

/* =====================================================================
   Chat
   ===================================================================== */
.chat { grid-template-columns: 320px 1fr; column-gap: 0; }
.chat .stepsub { margin: var(--s2) 0 var(--s2); }
.convs { padding: 4px 20px 80px 0; display: flex; flex-direction: column; gap: 8px; }
.convsearch { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 22px; background: var(--white); color: var(--muted); margin-bottom: 4px; }
.convsearch svg { width: 18px; height: 18px; flex: none; }
.convsearch input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; font-size: 15px; color: var(--ink); }
.convsearch:focus-within { border-color: var(--teal); }
.conv { margin: 0; grid-template-columns: 48px 1fr auto; gap: 12px; padding: 12px 14px; border-radius: 16px; border-color: transparent; background: transparent; transition: background .2s, border-color .2s; }
.conv:hover { background: var(--white); border-color: var(--line); }
.conv.on { background: var(--white); border-color: var(--teal); box-shadow: 0 14px 30px -24px rgba(23,44,39,.5); }
.conv[hidden] { display: none; }
.conv .av { width: 48px; height: 48px; }
.conv .h4 { display: flex; align-items: baseline; gap: 8px; font-size: 16px; }
.conv .pct { font-size: 12px; font-weight: 700; color: var(--teal-deep); }
.conv .ct { min-width: 0; }
.conv .ct .xs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.conv .you { color: var(--ink2); font-weight: 600; }
.conv .meta { display: grid; justify-items: end; gap: 6px; align-self: start; padding-top: 3px; }
.conv .unread { width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); }
.conv .unread[hidden] { display: none; }
.conv.has-unread .h4, .conv.has-unread .ct .xs { color: var(--ink); font-weight: 700; }

.thread { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r2) var(--r2) 0 0; overflow: hidden; }
.thread .head { gap: 14px; padding: 14px 20px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); flex-wrap: nowrap; }
.thread .head .av { width: 46px; height: 46px; }
.thread .head .who { min-width: 0; }
.thread .head .h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.thread .head .xs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.thread .tools { gap: 4px; }
.iconbtn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); cursor: pointer; list-style: none; transition: background .2s; }
.iconbtn:hover, details[open] > .iconbtn { background: var(--teal-mist); }
.iconbtn svg { width: 22px; height: 22px; }
details.menu, details.emoji { position: relative; }
details.menu .pop { position: absolute; right: 0; top: calc(100% + 6px); width: 270px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 8px; display: grid; gap: 4px; box-shadow: 0 24px 50px -24px rgba(23,44,39,.5); z-index: 20; }
details.menu .pop > a, .danger-link { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; }
details.menu .pop > a:hover { background: var(--teal-mist); }
.danger-link { color: var(--naranja-text); } .danger-link:hover { background: var(--naranja-soft); }
details.menu .rep { display: flex; gap: 6px; padding: 6px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details.menu .rep input { flex: 1; min-width: 0; height: 36px; border: 1.5px solid var(--line); border-radius: 18px; padding: 0 12px; font-size: 13.5px; }

.msgs { gap: 3px; padding: var(--s3) clamp(16px, 3vw, 36px); background: radial-gradient(circle at 15% 0%, var(--teal-mist), transparent 40%), var(--paper); scroll-behavior: smooth; }
.hello { display: grid; justify-items: center; gap: 8px; text-align: center; padding: var(--s3) var(--s2) var(--s4); max-width: 420px; margin: 0 auto; }
.hello .pair { display: flex; }
.hello .pair .av { width: 56px; height: 56px; border: 3px solid var(--paper); }
.hello .pair .av + .av { margin-left: -14px; }
.hello .h4 { font-size: 17px; }
.daysep { align-self: center; margin: 18px 0 10px; position: sticky; top: 4px; z-index: 2; }
.daysep span { display: inline-block; font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 12px; padding: 3px 11px; }
.bubble { max-width: min(68%, 560px); padding: 10px 14px 7px; font-size: 15.5px; line-height: 1.42; border-radius: 20px; overflow-wrap: anywhere; white-space: pre-wrap; margin-top: 8px; position: relative; }
.bubble.cont { margin-top: 0; }
.bubble.them { border-bottom-left-radius: 20px; box-shadow: 0 6px 16px -14px rgba(23,44,39,.5); }
.bubble.me { border-bottom-right-radius: 20px; }
.bubble.them:not(.cont) { border-top-left-radius: 6px; }
.bubble.me:not(.cont) { border-top-right-radius: 6px; }
.bubble time { display: block; text-align: right; font-size: 12px; margin-top: 2px; opacity: .6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bubble.me time { color: var(--teal-light); opacity: .9; }
.bubble .tick { font-style: normal; color: var(--teal-light); }
.bubble.blocked { text-decoration: none; font-style: italic; }
.bubble.blocked time { color: var(--muted); }
.bubble.pending { opacity: .65; }
.bubble.failed { background: var(--naranja-soft); color: var(--naranja-deep); cursor: pointer; }
.bubble.failed time { color: var(--naranja-deep); }
.bubble.new { animation: bubble-in .32s cubic-bezier(.2,.9,.25,1.2); }
.bubble.me.new { transform-origin: 100% 100%; } .bubble.them.new { transform-origin: 0 100%; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.tobottom { position: absolute; right: 22px; bottom: 112px; height: 44px; min-width: 44px; padding: 0 12px; border-radius: 22px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; box-shadow: 0 14px 30px -12px rgba(23,44,39,.6); z-index: 5; animation: bubble-in .3s var(--ease); }
.tobottom[hidden] { display: none; }
.tobottom svg { width: 20px; height: 20px; }
.tobottom .n:empty { display: none; }
.ice { padding: 14px 20px 4px; display: grid; gap: 10px; border-top: 1px solid var(--line); background: var(--white); }
.ice[hidden] { display: none; }
.ice .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.chip { flex: none; max-width: 300px; padding: 9px 14px; border-radius: 18px; background: var(--teal-mist); border: 1px solid var(--teal-soft); font-size: 13.5px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, transform .2s var(--ease); }
.chip:hover { background: var(--teal-soft); transform: translateY(-1px); }
.composer { align-items: flex-end; gap: 10px; padding: 12px 20px 10px; background: var(--white); }
.composer .box { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; border: 1.5px solid var(--line); border-radius: 26px; background: var(--paper); padding: 4px 8px 4px 4px; transition: border-color .2s, box-shadow .2s; position: relative; }
.composer .box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); background: var(--white); }
.composer .tools-l { display: flex; flex: none; }
.composer textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; resize: none; font-size: 16px; line-height: 22px; padding: 10px 6px; max-height: 160px; min-height: 42px; }
.composer .count { align-self: center; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; padding: 0 6px; }
.composer .count.low { color: var(--naranja-text); }
.composer .count[hidden] { display: none; }
.composer .btn.send { height: 52px; width: auto; padding: 0 22px 0 24px; border-radius: 26px; gap: 8px; }
.composer .btn.send svg { width: 20px; height: 20px; }
details.emoji .pop { position: absolute; left: 0; bottom: calc(100% + 10px); width: 284px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(23,44,39,.5); z-index: 20; }
details.emoji .pop button { font-size: 22px; height: 42px; border-radius: 10px; transition: background .15s, transform .15s; }
details.emoji .pop button:hover { background: var(--teal-mist); transform: scale(1.15); }
.hint-keys { padding: 0 20px 12px; background: var(--white); display: flex; gap: 6px; align-items: center; font-size: 12px; }
@media (pointer: coarse) { .hint-keys { display: none; } }

@media (max-width: 1000px) {
  .chat { grid-template-columns: 1fr; }
  .convs { flex-direction: row; padding: 0 0 10px; max-height: none; }
  .conv { min-width: 240px; background: var(--white); border-color: var(--line); }
  .convsearch { min-width: 200px; margin: 0; }
  .thread { border-radius: var(--r2); height: calc(100vh - 230px); min-height: 460px; }
}
@media (max-width: 720px) {
  .h1 { font-size: clamp(42px, 12vw, 60px); }
  .h2 { font-size: clamp(30px, 8.4vw, 40px); }
  h1.h2 { font-size: clamp(34px, 9.6vw, 44px); }
  .container.narrow { padding-top: var(--s4); }
  .deckhead { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .p2 .pcol { padding: var(--s2) 0 var(--s4); }
  .deck .c.top { padding: 24px 22px; }
  .vstamp { font-size: 16px; top: 44px; }
  .swipe .btn.line, .swipe .btn.xl { flex: 1; height: 56px; }   /* «No conecto» y «Conecto», misma altura */
  .chat .stepsub { display: none; }
  .chat { padding-left: 0; padding-right: 0; }
  .convs { padding: 10px 16px; }
  .conv { min-width: 70vw; }
  .thread { border-radius: 0; border-left: 0; border-right: 0; height: calc(100dvh - 56px - var(--tabbar-h, 76px) - 96px); min-height: 420px; }
  .thread .head { padding: 10px 14px; }
  .thread .head .tools { width: auto; }
  .msgs { padding: var(--s2) 12px; }
  .bubble { max-width: 84%; }
  .composer { position: static; padding: 10px 12px; bottom: auto; }
  .composer .btn.send { width: 52px; padding: 0; } .composer .btn.send span { display: none; }
  .tobottom { right: 14px; bottom: 90px; }
  .ice { padding: 12px 12px 4px; }
  details.emoji .pop { width: min(284px, calc(100vw - 40px)); }
}

/* ---------- preguntas frecuentes (portada) ---------- */
.faqlist { display: grid; grid-template-columns: 1fr; max-width: 880px; border-top: 1.5px solid var(--ink); }
.faqlist details { border-bottom: 1px solid var(--line); }
.faqlist summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 22px 0; }
.faqlist summary .h3 { font-size: 20px; letter-spacing: -.02em; }
.faqlist summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background-color: var(--teal-mist); background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); background-size: 14px 2px, 2px 14px; background-position: center; background-repeat: no-repeat; transition: transform .3s var(--ease), background-color .2s; }
.faqlist details[open] summary::after { transform: rotate(45deg); background-color: var(--teal-soft); }
.faqlist summary:hover .h3 { color: var(--teal-deep); }
.faqlist details p { padding: 0 48px 24px 0; font-size: 16px; line-height: 1.6; color: var(--ink2); max-width: 60ch; }
.faqlist details[open] p { animation: faq-in .3s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 1000px) { .faqlist { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .faqlist summary { padding: 18px 0; } .faqlist summary .h3 { font-size: 17.5px; } .faqlist details p { padding-right: 0; font-size: 15px; } }

/* ---------- tarjetas planas: sin sombras ni bordes de color ---------- */
.samplecard, .letter-row, .letter-row:hover, .fc, .deck .c.top, .deck .c.top.dragging, .c.top.v-yes, .c.top.v-no, .conv.on, .bubble.them { box-shadow: none; }
 .conv.on { border-color: var(--line); }
.conv.on { background: var(--white); }
.letter-row::before { display: none; }
.letter-row { padding-left: 22px; }
.deck .c { border-color: var(--line); }
.deck .c.b1, .deck .c.b2 { background: var(--white); border-color: var(--line); }
.fc1, .fc2 { background: var(--white); }

/* ---------- Mi botella: hero mínimo, identidad, cifras ---------- */
.mine-home { display: grid; gap: var(--s4); padding-top: var(--s3); padding-bottom: var(--s6); }
.mhero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; padding-left: clamp(24px, 4vw, 56px); min-height: 340px; }
.mhero .copy { display: grid; gap: 18px; justify-items: start; padding: 40px 0; }
.mhero .h1 { font-size: clamp(40px, 5vw, 76px); }
.mhero .lead { color: var(--muted); max-width: 42ch; }
.mhero .art { width: 100%; height: 100%; min-height: 340px; display: block; }
.mhero.paused .art { filter: grayscale(.8); opacity: .6; }
.mid { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; padding: var(--s2) 0 0; }
.mid .av { width: 112px; height: 112px; } .mid .av svg { width: 62%; height: 62%; }
.mid .txt { display: grid; gap: 14px; min-width: 0; }
.mid .h2 { font-size: clamp(36px, 4.4vw, 60px); }
.mid .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mid .chips span { font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); color: var(--ink2); }
.mid .msg { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; letter-spacing: -.015em; max-width: 48ch; color: var(--ink2); padding-left: 18px; border-left: 3px solid var(--sun); margin-top: 4px; }
.mstats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.stat { position: relative; display: grid; gap: 6px; align-content: start; padding: 24px 20px 26px; border-left: 1px solid var(--line); transition: background .2s; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat:hover { background: var(--white); }
.stat b { font-size: clamp(42px, 4.6vw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: .95; transition: color .2s; }
.stat:hover b { color: var(--teal-deep); }
.stat .l { font-size: 14px; color: var(--muted); line-height: 1.3; }
.stat .step { position: absolute; top: 24px; right: 16px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--muted); }
.stat .new { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--sun-text); }
.mine-home .chain { margin-top: calc(-1 * var(--s2)); }
.mine-home .mine { padding-top: var(--s2); }
.mine-home aside > .cap { margin-bottom: 4px; }
@media (max-width: 1000px) {
  .mstats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--line); }
  .mine-home aside { padding-left: 0; margin-top: var(--s3); }
}
@media (max-width: 720px) {
  .mine-home { gap: var(--s3); padding-top: var(--s2); }
  .mhero { grid-template-columns: 1fr; padding: 0; gap: 0; min-height: 0; border-radius: 22px; }
  .mhero .art { order: -1; min-height: 0; height: 210px; }
  .mhero .copy { padding: 22px 20px 24px; gap: 14px; }
  .mhero .h1 { font-size: clamp(36px, 10vw, 46px); }
  .mid { grid-template-columns: 72px 1fr; gap: var(--s2); }
  .mid .av { width: 72px; height: 72px; }
  .mid .h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .mid .msg { grid-column: 1 / -1; }
  .mstats { grid-template-columns: 1fr 1fr; }
  .stat, .stat:first-child { padding: 18px 14px 20px; border-left: 0; border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat .step { top: 18px; right: 10px; }
  .stat b { font-size: 44px; }
}
@media (max-width: 720px) {
  .mid { grid-template-columns: 1fr; gap: 14px; }
  .mstats .stat { padding: 18px 14px 20px; border-left: 0; border-top: 1px solid var(--line); }
  .mstats .stat:nth-child(-n+2) { border-top: 0; }
  .mstats .stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: 14px; }
  .mstats .stat:nth-child(odd) { padding-left: 0; }
  .mstats .stat:last-child { grid-column: 1 / -1; }
}

/* ---------- pop-ups del lanzamiento: mensaje dentro de la botella / botella al agua ---------- */
.celebrate { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(23,44,39,.55); backdrop-filter: blur(4px); animation: cel-fade .3s var(--ease); }
.celebrate.closing { animation: cel-fade .25s var(--ease) reverse forwards; }
.cel-card { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--white); border-radius: 28px; padding: 18px 24px 26px; display: grid; gap: 10px; text-align: center; justify-items: center; animation: cel-pop .45s cubic-bezier(.2,.9,.25,1.2); }
.cel-art { width: 100%; height: auto; border-radius: 20px; display: block; margin-bottom: 6px; overflow: hidden; }
.cel-card .h2 { font-size: clamp(28px, 6vw, 38px); }
.cel-card .sm { max-width: 36ch; }
.cel-acts { display: grid; gap: 10px; width: 100%; margin-top: 10px; }
.cel-acts .btn { width: 100%; }
@keyframes cel-fade { from { opacity: 0; } }
@keyframes cel-pop { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.cel-art * { animation-fill-mode: both; }
/* mensaje: se escribe, se enrolla, entra por el cuello, corcho y ✓ (estados base = estado final) */
.sealed .paper { opacity: 0; animation: cel-paper 2.6s cubic-bezier(.5,0,.3,1) .2s both; }
.sealed .roll { transform-box: fill-box; transform-origin: center; animation: cel-roll 2.6s cubic-bezier(.5,0,.3,1) .2s both; }
.sealed .ink path { stroke-dasharray: 70; animation: cel-ink .5s ease-out both; }
.sealed .ink path:nth-child(1) { animation-delay: .45s; } .sealed .ink path:nth-child(2) { animation-delay: .65s; } .sealed .ink path:nth-child(3) { animation-delay: .85s; } .sealed .ink path:nth-child(4) { animation-delay: 1.05s; }
.sealed .inside { animation: cel-show .5s ease-out 2.45s both; }
.sealed .cork { animation: cel-cork .45s cubic-bezier(.3,1.6,.5,1) 2.65s both; }
.sealed .bottle { transform-box: fill-box; transform-origin: center; animation: cel-gulp .5s ease-in-out 2.3s both; }
.sealed .ok { transform-box: fill-box; transform-origin: center; animation: cel-ok .5s cubic-bezier(.2,.9,.25,1.5) 3s both; }
.sealed .spark { opacity: 0; animation: cel-spark .7s ease-out 3.05s both; }
@keyframes cel-paper { 0% { transform: translate(0, -24px); opacity: 0; } 10% { transform: none; opacity: 1; } 48% { transform: none; } 82% { transform: translate(84px, 66px); opacity: 1; } 92%, 100% { transform: translate(90px, 72px); opacity: 0; } }
@keyframes cel-roll { 0%, 42% { transform: none; } 60% { transform: rotate(-26deg) scale(.42, .16); } 85%, 100% { transform: rotate(-26deg) scale(.12, .08); } }
@keyframes cel-ink { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
@keyframes cel-show { from { opacity: 0; } }
@keyframes cel-cork { from { transform: translate(7px, -10px); opacity: 0; } }
@keyframes cel-gulp { 50% { transform: scale(1.04, .97); } }
@keyframes cel-ok { from { transform: scale(0); opacity: 0; } }
@keyframes cel-spark { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
/* botella al agua: vuela en arco, salpica, ondas y se queda flotando */
.launched .throw { transform: translate(198px, 119px); transform-box: fill-box; transform-origin: center; animation: cel-throw 1.9s cubic-bezier(.35,.1,.45,1) .25s both; }
.launched .bob { transform-box: fill-box; transform-origin: 50% 90%; animation: cel-bob 2.8s ease-in-out 2.2s infinite; }
.launched .sea path { animation: cel-wave 4s linear infinite; }
.launched .sea.front path { animation-duration: 3s; } .launched .sea.back2 path { animation-duration: 5s; }
.launched .splash circle { opacity: 0; animation: cel-drop .8s ease-out 1.55s both; }
.launched .splash circle:nth-child(1) { --dx: 0px; } .launched .splash circle:nth-child(2) { --dx: 8px; } .launched .splash circle:nth-child(3) { --dx: -8px; } .launched .splash circle:nth-child(4) { --dx: 14px; animation-delay: 1.6s; } .launched .splash circle:nth-child(5) { --dx: -14px; animation-delay: 1.6s; }
.launched .ripple ellipse { opacity: 0; transform-box: fill-box; transform-origin: center; animation: cel-ripple 2.6s ease-out 1.6s infinite; }
.launched .ripple .r2 { animation-delay: 2.5s; }
.launched .sun { transform-box: fill-box; transform-origin: center; animation: cel-sun 3s ease-in-out infinite alternate; }
@keyframes cel-throw { 0% { transform: translate(-120px, 60px) rotate(-40deg); opacity: 0; } 8% { opacity: 1; } 42% { transform: translate(80px, 22px) rotate(110deg); } 72% { transform: translate(198px, 121px) rotate(360deg); } 84% { transform: translate(198px, 127px) rotate(360deg); } 100% { transform: translate(198px, 119px) rotate(360deg); } }
@keyframes cel-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(3px) rotate(-3deg); } }
@keyframes cel-wave { to { transform: translateX(60px); } }
@keyframes cel-drop { 0% { opacity: 0; transform: none; } 5% { opacity: 1; } 45% { transform: translate(var(--dx), -26px); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.7), 6px); } }
@keyframes cel-ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.5, 3); } }
@keyframes cel-sun { to { transform: translateY(-4px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .sealed .paper { opacity: 0 !important; } .launched .splash circle, .launched .ripple ellipse { opacity: 0 !important; } }

/* ---------- iconos: anillo sin naranja ---------- */
.av.super, .yes-icons .av.super { box-shadow: 0 0 0 2px var(--white), 0 0 0 4.5px var(--teal); }
.icon-pick input:checked + .av { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--teal); }

/* ---------- japonés: sin interletraje negativo, cortes de línea por frase ---------- */
:lang(ja) .h1, :lang(ja) .h2, :lang(ja) .h3, :lang(ja) .closing h2, :lang(ja) .stat b { letter-spacing: 0; line-height: 1.2; word-break: auto-phrase; line-break: strict; }
:lang(ja) .cap { letter-spacing: .04em; }
:lang(ja) body { line-height: 1.7; }

/* ---------- 42 preguntas: una por pantalla ---------- */
.questions.stepping { gap: var(--s3); scroll-margin-top: 90px; }
.qline { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.qline i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 3px; transition: width .35s var(--ease); }
.stepping .q { border: 0; background: none; padding: var(--s2) 0 0; gap: var(--s3); min-height: 360px; align-content: start; }
.stepping .q[hidden] { display: none; }
.stepping .q .qn { display: none; }
.stepping .q .qt { display: block; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.stepping .q .qt::before { content: attr(data-topic); display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 12px; }
.stepping .quick { gap: 12px; }
.stepping .quick span { min-height: 92px; font-size: 18px; border-radius: 20px; background: var(--white); transition: transform .15s var(--ease), border-color .2s, background .2s; }
.stepping .quick label:hover span { border-color: var(--teal); transform: translateY(-2px); }
.stepping .opts { gap: 10px; }
.stepping .opts label { min-height: 64px; font-size: 17px; border-radius: 18px; background: var(--white); padding: 14px 18px; transition: transform .15s var(--ease), border-color .2s; }
.stepping .opts label:hover { border-color: var(--teal); transform: translateX(3px); }
.stepping .slider { gap: 12px; padding-top: 8px; }
.stepping .slider .poles { font-size: 16px; }
.stepping .slider input[type=range] { height: 56px; }
.stepping .db { margin-top: 4px; }
.qnav { position: sticky; bottom: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 0 18px; background: linear-gradient(180deg, rgba(251,249,246,0), var(--paper) 30%); z-index: 5; }
.qnav .qpos { text-align: center; font-weight: 800; color: var(--muted); font-size: 15px; }
.qnav .btn { min-width: 120px; }
.qnav .btn[hidden] { display: none; }
/* última pregunta: «Terminar» más grande, con brillo y latido que invitan a pulsar */
.qnav .btn.finish { height: 64px; min-width: 210px; padding: 0 36px; border-radius: 32px; font-size: 19px; font-weight: 800; overflow: hidden; box-shadow: 0 18px 34px -14px rgba(23,130,112,.95); animation: fin-beat 1.8s var(--ease) infinite; }
.qnav .btn.finish::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: fin-shine 2.6s ease-in-out infinite; pointer-events: none; }
.qnav .btn.finish:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.04); }
@keyframes fin-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.07); } 24% { transform: scale(.98); } 36% { transform: scale(1.04); } 50% { transform: scale(1); } }
@keyframes fin-shine { 0%, 40% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }
@media (max-width: 720px) { .qnav.at-end { grid-template-columns: auto 1fr; } .qnav.at-end .qpos { display: none; } .qnav .btn.finish { min-width: 0; width: 100%; height: 60px; font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .qnav .btn.finish, .qnav .btn.finish::before { animation: none; } }
@media (max-width: 720px) {
  .stepping .q { min-height: 300px; }
  .stepping .quick { grid-template-columns: 1fr 1fr; }
  .stepping .quick span { min-height: 84px; font-size: 16px; padding: 12px 8px; }
  .qnav { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .qnav .btn { min-width: 0; padding: 0 16px; }
  .launch .qsticky { display: none; }
}
.launch .pcol:has(.stepping) .qprog { display: none; }

/* ---------- afinidad: tarjetas limpias en rejilla ---------- */
.results { display: grid; gap: var(--s3); align-content: start; }
.results .stepsub { margin-bottom: 0; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s2); }
.rcard { display: grid; gap: 14px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); transition: border-color .2s, transform .2s var(--ease); }
.rcard[hidden] { display: none; }
.rcard:hover { border-color: var(--teal-light); transform: translateY(-2px); }
.rc-top { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.rc-top .av { width: 52px; height: 52px; }
.rc-id { min-width: 0; display: grid; gap: 2px; }
.rc-id .h3 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-id .h3 a:hover { color: var(--teal-deep); }
.rc-id .super-tag { font-size: 12px; color: var(--teal-deep); }
.rc-top .compat.big { height: 38px; min-width: 70px; font-size: 17px; }
.rc-msg { font-size: 15px; line-height: 1.45; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.rc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.rc-state { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-foot .btn { height: 42px; padding: 0 18px; font-size: 14px; box-shadow: none; }
.rc-foot form { margin: 0; }
.rmore { display: flex; justify-content: center; }
@media (max-width: 720px) { .rgrid { grid-template-columns: 1fr; } .rcard { padding: 16px; } }

/* ---------- lanzamiento: bloques claros ---------- */
.form .grp { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); margin-top: var(--s3); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.form .grp:first-of-type { margin-top: 0; }
.more-fields { margin-top: var(--s2); }
.more-fields > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.more-fields > summary::after { content: "+"; font-size: 20px; font-weight: 600; color: var(--teal-deep); transition: transform .25s var(--ease); }
.more-fields[open] > summary::after { transform: rotate(45deg); }
.more-fields > .form { margin-top: var(--s2); }
.launch .actions { display: flex; justify-content: space-between; gap: 12px; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.to-filters, .side-head { display: none; }
@media (max-width: 1000px) {
  .search { display: flex; flex-direction: column; gap: var(--s4); }
  .search .results { order: -1; }
  /* móvil: primero el listado; los filtros se abren con el botón (#filters) encima de los resultados */
  .search .side { display: none; scroll-margin-top: 16px; }
  .search .side:target { display: grid; order: -2; background: var(--white); border: 1.5px solid var(--ink) !important; border-radius: 22px; padding: 16px !important; box-shadow: 0 20px 40px -28px rgba(23,44,39,.55); }
  .side-head { display: flex; justify-content: space-between; align-items: center; }
  .side-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1; background: var(--teal-mist); color: var(--ink); }
  .to-filters { display: inline-flex; height: 44px; padding: 0 18px; background: var(--teal); color: #fff; box-shadow: 0 10px 22px -12px rgba(23,130,112,.8); }
  .to-filters:hover { background: var(--teal-h); }
  .to-filters svg { width: 20px; height: 20px; }
  .to-filters .nf { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; }
  .search:has(.side:target) .to-filters { display: none; }
}
@media (max-width: 720px) {
  .rhead .right { width: 100%; margin-left: 0; justify-content: space-between; }
  .rhead .right .to-filters { flex: 1; }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- banner de cookies y política ---------- */
.cookiebar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 350; display: flex; justify-content: center; }
.cookiebar[hidden] { display: none; }
.ck-in { width: min(760px, 100%); background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 20px 22px; display: grid; gap: 14px; box-shadow: 0 30px 60px -30px rgba(23,44,39,.45); animation: toast-in .35s var(--ease); }
.ck-txt { display: grid; gap: 4px; }
.ck-opts { display: grid; gap: 8px; }
.ck-opts[hidden] { display: none; }
.ck-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.ck-opt input { width: 20px; height: 20px; accent-color: var(--teal); flex: none; margin-top: 1px; }
.ck-opt b { display: block; font-size: 14.5px; }
.ck-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ck-acts .btn { height: 46px; min-width: 130px; }
.ck-acts .btn[hidden] { display: none; }
.linkbtn { color: inherit; text-decoration: underline; text-underline-offset: 3px; font: inherit; padding: 0; }
.ctable { display: grid; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); margin: 8px 0 16px; }
.cr { display: grid; grid-template-columns: 1.3fr 2fr .8fr .8fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; align-items: start; }
.cr.ch { border-top: 0; background: var(--teal-mist); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--teal-deep); }
.cr code { font-size: 12.5px; overflow-wrap: anywhere; color: var(--ink2); }
@media (max-width: 720px) {
  .cookiebar { left: 8px; right: 8px; bottom: 84px; }
  .public .cookiebar { bottom: 8px; }
  .ck-in { padding: 16px; }
  .ck-acts { display: grid; grid-template-columns: 1fr 1fr; }
  .ck-acts .btn { min-width: 0; width: 100%; }
  .cr { grid-template-columns: 1fr 1fr; } .cr.ch { display: none; } .cr code { grid-column: 1 / -1; font-weight: 700; }
}
.ck-acts [data-ck="cfg"] { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .ck-acts [data-ck="min"] { order: 1; } .ck-acts [data-ck="all"], .ck-acts [data-ck="save"] { order: 2; } .ck-acts [data-ck="cfg"] { order: 3; grid-column: 1 / -1; height: 36px; } }

/* =====================================================================
   Marca: isotipo flotando sobre olas
   ===================================================================== */
.brandmark { color: var(--ink); display: flex; justify-content: center; }
.brandmark svg { width: 150px; height: auto; overflow: hidden; }
.brandmark.sm svg { width: 96px; }
.bm-bottle { transform-box: fill-box; transform-origin: 50% 85%; animation: bm-bob 3.6s ease-in-out infinite; }
.bm-waves path { animation: bm-wave 3s linear infinite; }
.bm-waves path + path { animation-duration: 4.2s; animation-direction: reverse; }
@keyframes bm-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(3px) rotate(2.5deg); } }
@keyframes bm-wave { to { transform: translateX(30px); } }

/* =====================================================================
   Acceso sin correo: tarjeta, pestañas, clave
   ===================================================================== */
.auth { display: grid; place-items: center; padding-top: var(--s5); padding-bottom: var(--s6); min-height: calc(100vh - 160px); }
.auth-card { width: min(480px, 100%); background: var(--white); border: 1px solid var(--line-strong); border-radius: 28px; padding: 28px 28px 30px; display: grid; gap: 16px; }
.auth-card .h2 { font-size: clamp(32px, 4vw, 44px); }
.auth-card .cap { margin-top: -6px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 18px; }
.seg a { display: grid; place-items: center; min-height: 44px; padding: 6px 10px; border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.2; transition: background .25s var(--ease), color .25s; }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--ink); color: #fff; }
.auth-form { gap: 12px; }
.btn.wide { width: 100%; }
.hint-box { font-size: 14px; line-height: 1.5; color: var(--teal-deep); background: var(--teal-mist); border: 1px solid var(--teal-soft); border-radius: 14px; padding: 12px 14px; }
input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.nomail { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--paper); border: 1px dashed var(--line-strong); }
.nomail svg { width: 22px; height: 22px; flex: none; color: var(--teal-deep); margin-top: 1px; }
.nomail b { color: var(--ink); }
.keybox { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border: 2px dashed var(--teal); border-radius: 18px; background: var(--teal-mist); }
.keybox .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(18px, 4.6vw, 24px); font-weight: 800; letter-spacing: .06em; user-select: all; overflow-wrap: anywhere; }
@media (max-width: 720px) { .auth { padding-top: var(--s3); align-items: start; } .auth-card { padding: 22px 18px 24px; border-radius: 24px; } }

/* =====================================================================
   Formularios: contraste claro entre fondo y campos
   ===================================================================== */
:root { --line-strong: #CBD5D2; }
.field { border: 1.5px solid var(--line-strong); background: var(--white); transition: border-color .2s, box-shadow .25s var(--ease), transform .2s var(--ease); }
.field:hover { border-color: #B3C4BE; }
.field:focus-within { border-color: var(--teal-h); box-shadow: 0 0 0 4px var(--teal-soft); }
.field > span { color: var(--ink2); }
.field input, .field select, .field textarea { color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: #6B7875; }   /* 4,6:1: los ejemplos a veces dan información («Mínimo 8 caracteres») */
.seg3 span, .chk.big, .opts label, .quick span, .composer .box, details.menu .rep input, .convsearch { border-color: var(--line-strong); }
.seg3 span, .chk.big, .opts label, .quick span { background: var(--white); }
.form.big, .panel { --_x: 0; }
.launch .pcol > form, .launch .questions.stepping { background: transparent; }

/* =====================================================================
   Animaciones ligeras en todo
   ===================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#main > * { animation: rise .5s var(--ease) both; }
#main > *:nth-child(2) { animation-delay: .05s; } #main > *:nth-child(3) { animation-delay: .1s; } #main > *:nth-child(4) { animation-delay: .15s; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.btn { transition: transform .18s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.field:focus-within > span { color: var(--teal-deep); }
.seg3 label span, .opts label, .quick span, .chk.big { transition: border-color .2s, background .2s, transform .18s var(--ease); }
.seg3 label:active span, .opts label:active, .quick label:active span, .chk.big:active { transform: scale(.985); }
details[open] > :not(summary) { animation: rise .3s var(--ease) both; }
.flash, .toast, .empty { animation: rise .4s var(--ease) both; }
a.link, .linkbtn { transition: color .2s, text-decoration-color .2s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- el ritual: lanzas → esperas → vuelves ---------- */
.ritual { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; padding: 0; }
.ritual li { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 22px; background: var(--white); border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 700; color: var(--ink2); animation: rise .5s var(--ease) both; }
.ritual li:nth-child(2) { animation-delay: .12s; } .ritual li:nth-child(3) { animation-delay: .24s; }
.ritual li b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-deep); font-size: 12px; flex: none; }
.ritual li + li::before { content: ""; position: absolute; left: -8px; top: 50%; width: 8px; height: 1.5px; background: var(--line-strong); }
.ritual li.done b { background: var(--teal); color: #fff; }
.ritual li.now { border-color: var(--teal); background: var(--teal-mist); }
.ritual li.now b { background: var(--ink); color: #fff; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 5px var(--teal-soft); } }
@media (max-width: 720px) { .ritual { flex-direction: column; align-items: stretch; } .ritual li + li::before { display: none; } }

/* ---------- home: fases + CTA ---------- */
.phases { list-style: none; padding: 0; margin: 26px 0 24px; display: grid; gap: 10px; max-width: 480px; }
.phases li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 18px; animation: rise .5s var(--ease) both; }
.phases li:nth-child(2) { animation-delay: .1s; } .phases li:nth-child(3) { animation-delay: .2s; }
.phases li > b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 15px; }
.phases li:nth-child(2) > b { background: var(--teal); color: #fff; }
.phases li:nth-child(3) > b { background: var(--teal-soft); color: var(--teal-deep); }
.phases .h4 { font-size: 16.5px; }
.hero .ctas { gap: 14px 18px; }
.hero .ctas .xs { max-width: 26ch; }

/* ---------- «La diferencia también es bella» ---------- */
:root { --dtb: #A84C72; --dtb-soft: #FBEFF4; --dtb-line: #F1D3E0; }
.dtb-mark { color: var(--dtb); }
.dtb-band { background: linear-gradient(180deg, var(--paper), var(--dtb-soft)); }
.dtb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.dtb-card { background: var(--white); border: 1px solid var(--dtb-line); border-radius: 20px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.dtb-card .cap { color: var(--dtb); }
.dtb-line { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.why .diff.dtb { background: var(--dtb-soft); border-color: var(--dtb-line); }
.why .diff.dtb .cap { color: var(--dtb); }
.why .diff.dtb .h3 { color: var(--ink); }
.why .diff.dtb .sm { color: var(--ink2); }
.dtb-talk { font-size: 14px; color: var(--ink2); padding-top: 10px; border-top: 1px dashed var(--dtb-line); }
.dtb-talk b { color: var(--dtb); }
.dtb-chip { display: inline-flex; align-self: start; justify-self: start; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--dtb); background: var(--dtb-soft); border: 1px solid var(--dtb-line); border-radius: 12px; padding: 4px 10px; }
.dtb-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--dtb-soft); border: 1px solid var(--dtb-line); color: var(--ink2); font-size: 14px; line-height: 1.4; transition: transform .2s var(--ease), border-color .2s; }
.dtb-banner:hover { transform: translateY(-1px); border-color: var(--dtb); }
.dtb-banner .dtb-mark { font-size: 20px; }
.dtb-banner b { color: var(--ink); }
.dtb-banner .go { margin-left: auto; white-space: nowrap; font-weight: 800; color: var(--dtb); }
.dtb-hint { margin-top: 14px; font-size: 13.5px; color: var(--ink2); background: var(--dtb-soft); border: 1px solid var(--dtb-line); border-radius: 14px; padding: 8px 14px; max-width: 520px; text-align: center; }
.dtb-hint span { color: var(--dtb); }
.chip.dtb { background: var(--dtb-soft); border-color: var(--dtb-line); color: var(--ink); }
.chip.dtb:hover { background: #F6E0EA; }
@media (max-width: 1000px) { .dtb-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .dtb-banner { flex-wrap: wrap; } .dtb-banner .go { margin-left: 32px; } }

/* ---------- clave: recordatorio y pop-up ---------- */
.keyremind { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: #FFF7E8; border: 1.5px solid #F0D49B; animation: rise .45s var(--ease) both; }
.keyremind[hidden] { display: none; }
.keyremind > svg { width: 32px; height: 32px; color: var(--warn); }
.keyremind .kr-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.keymodal { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; padding: 16px; background: rgba(23,44,39,.55); backdrop-filter: blur(4px); animation: cel-fade .25s var(--ease); }
.keymodal[hidden] { display: none; }
.km-card { width: min(420px, 100%); background: var(--white); border-radius: 26px; padding: 22px 24px 24px; display: grid; gap: 12px; text-align: center; justify-items: center; animation: cel-pop .4s cubic-bezier(.2,.9,.25,1.2); }
.km-card .h3 { font-size: 24px; }
.km-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; font-size: 20px; letter-spacing: .06em; padding: 10px 14px; border: 2px dashed var(--teal); border-radius: 14px; background: var(--teal-mist); user-select: all; }
.km-code[hidden] { display: none; }
.km-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 6px; }
@media (max-width: 720px) { .keyremind { grid-template-columns: 32px 1fr; } .keyremind .kr-acts { grid-column: 1 / -1; justify-content: stretch; } .keyremind .kr-acts .btn { flex: 1; } .km-acts { grid-template-columns: 1fr; } }

/* =====================================================================
   Viaje de la botella: visor 2D
   ===================================================================== */
.voyage { display: grid; gap: var(--s2); }

.vy-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 0; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--white); overflow: hidden; }
.vy-stats > div { padding: 12px 18px; display: grid; gap: 2px; text-align: right; }
.vy-stats > div + div { border-left: 1px solid var(--line); }
.vy-stats b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.vy-stats span { font-size: 12px; color: var(--muted); }

.vy-map { position: relative; height: clamp(320px, 46vw, 480px); border-radius: 24px; overflow: hidden; border: 1px solid var(--line-strong); background: #D3EEE7; cursor: grab; touch-action: none; user-select: none; }
.vy-map.grabbing { cursor: grabbing; }
.vy-svg { display: block; width: 100%; height: 100%; }
.vy-sea { fill: #D3EEE7; }
.vy-grid path { stroke: #C5E3DC; stroke-width: 1; fill: none; }
.vy-land { fill: var(--paper); stroke: #9FC9BF; stroke-width: 1; }
.vy-route path { fill: none; stroke: var(--teal-h); stroke-linecap: round; stroke-linejoin: round; }
.vy-start circle { fill: var(--ink); stroke: #fff; stroke-width: .4; }
.vy-label { font-size: 2.8px; transform: translateY(-1.2px); font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: .6px; }
.vy-ring { fill: none; stroke: var(--sun); stroke-width: .12; transform-box: fill-box; transform-origin: center; animation: vy-ring 2.4s ease-out infinite; }
@keyframes vy-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.vy-iso { fill: #fff; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.vy-bob { animation: vy-bob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes vy-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(.12px) rotate(4deg); } }
.vy-veh { fill: var(--white); stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.on-land .vy-bob { animation: vy-ride 1.2s ease-in-out infinite; }
.on-land .vy-iso { fill: var(--teal-light); stroke-width: 8; }
@keyframes vy-ride { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(.05px, -.06px); } }
.vy-ctl { position: absolute; right: 12px; top: 12px; display: grid; gap: 6px; z-index: 2; }
.vy-ctl button { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 14px; background: var(--white); border: 1px solid var(--line-strong); font-weight: 800; font-size: 14px; color: var(--ink); transition: transform .15s var(--ease), background .2s; }
.vy-ctl button:hover { background: var(--teal-mist); }
.vy-ctl button:active { transform: scale(.94); }
.vy-ctl button[data-z="in"], .vy-ctl button[data-z="out"] { font-size: 20px; padding: 0; }
.vy-note { position: absolute; left: 12px; bottom: 10px; right: 12px; font-size: 12px; color: var(--teal-deep); background: rgba(255,255,255,.85); padding: 6px 10px; border-radius: 10px; width: fit-content; max-width: calc(100% - 24px); pointer-events: none; }
.vy-map.paused .vy-bob { animation: none; }
@media (max-width: 1000px) { .vy-stats > div { text-align: left; } }
@media (max-width: 720px) { .vy-map { height: 360px; border-radius: 20px; } .vy-stats b { font-size: 22px; } .vy-stats > div { padding: 10px 12px; } .vy-ctl { top: 10px; right: 10px; } .vy-ctl button { height: 38px; min-width: 38px; } }
@media (max-width: 720px) { .vy-ctl { grid-auto-flow: column; left: 10px; right: 10px; justify-content: end; gap: 6px; } .vy-ctl button { height: 34px; min-width: 34px; padding: 0 10px; font-size: 12.5px; } .vy-ctl button[data-z="in"], .vy-ctl button[data-z="out"] { font-size: 18px; } }

/* ---------- paso 4: tu botella grande, bloques y celdas claras ---------- */
.final-form { gap: 14px; }
.bigcard { background: var(--white); border: 1.5px solid var(--line-strong); border-radius: 26px; padding: 26px 26px 28px; display: grid; gap: 20px; }
.bc-top { display: grid; grid-template-columns: 104px 1fr; gap: 22px; align-items: center; }
.bc-top .av { width: 104px; height: 104px; } .bc-top .av svg { width: 62%; height: 62%; }
.bc-id { display: grid; gap: 10px; min-width: 0; }
.bc-name { font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1; overflow-wrap: anywhere; }
.bc-name span { color: var(--muted); font-weight: 700; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-chips span { font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 14px; background: var(--teal-mist); color: var(--teal-deep); border: 1px solid var(--teal-soft); }
.bc-msg { font-size: clamp(19px, 2.2vw, 24px); font-weight: 500; line-height: 1.4; letter-spacing: -.015em; color: var(--ink2); padding: 18px 0 0 18px; border-left: 3px solid var(--sun); border-top: 1px solid var(--line); margin: 0; padding-top: 18px; min-height: 2.8em; overflow-wrap: anywhere; }
.msgfield textarea { min-height: 140px; font-size: 17px; line-height: 1.5; }
.msgfield .counter { font-size: 13px; font-weight: 700; color: var(--ink2); }
.chk.big { padding: 18px 18px; gap: 14px; font-size: 15px; line-height: 1.5; border: 1.5px solid var(--line-strong); border-radius: 18px; background: var(--white); align-items: flex-start; transition: border-color .2s, background .2s; }
.chk.big:hover { border-color: #B3C4BE; }
.chk.big input { width: 22px; height: 22px; margin-top: 1px; }
.chk.big:has(input:checked) { border-color: var(--teal); background: var(--teal-mist); }
.final-form .grp { margin-top: var(--s3); }
.final-form .grp:first-of-type { margin-top: 0; }
@media (max-width: 720px) { .bigcard { padding: 20px 18px 22px; border-radius: 22px; } .bc-top { grid-template-columns: 76px 1fr; gap: 16px; } .bc-top .av { width: 76px; height: 76px; } .chk.big { padding: 16px 14px; } }
.vy-push { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vy-push .btn svg { width: 22px; height: 22px; }
.vy-push .btn[disabled] { opacity: .45; pointer-events: none; }
.vy-push [data-push-left] { font-weight: 700; color: var(--ink2); }
.vy-trail { fill: none; stroke: var(--sun); stroke-linecap: round; stroke-dasharray: .9 .9; opacity: .8; }
.sent-badge { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--teal-mist); border: 1px solid var(--teal); color: var(--teal-deep); font-size: 14px; font-weight: 800; }
.rcard.just { border-color: var(--teal); scroll-margin-top: 90px; animation: just-sent 1.6s var(--ease) both; }
@keyframes just-sent { 0% { transform: scale(.97); box-shadow: 0 0 0 0 var(--teal-soft); } 30% { transform: scale(1.01); box-shadow: 0 0 0 10px var(--teal-soft); } 100% { transform: none; box-shadow: 0 0 0 0 rgba(0,0,0,0); } }

/* ---------- pop-up: la botella se hunde ---------- */
.sunk .sink { animation: sink-down 3.2s cubic-bezier(.45,0,.55,1) .5s both; }
.sunk .sink-tilt { transform-box: fill-box; transform-origin: 70% 40%; animation: sink-tilt 3.2s ease-in .5s both; }
.sunk .bubbles circle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: bubble-up 2.6s ease-out infinite; }
.sunk .bubbles circle:nth-child(2) { animation-delay: 1.4s; } .sunk .bubbles circle:nth-child(3) { animation-delay: 1.8s; } .sunk .bubbles circle:nth-child(4) { animation-delay: 2.2s; } .sunk .bubbles circle:nth-child(5) { animation-delay: 2.6s; }
.sunk .bubbles circle:nth-child(1) { animation-delay: 1s; }
.sunk .ripple ellipse { opacity: 0; transform-box: fill-box; transform-origin: center; animation: cel-ripple 2.6s ease-out 1.1s infinite; }
.sunk .ripple .r2 { animation-delay: 1.9s; }
.sunk .sea path { animation: cel-wave 4s linear infinite; }
@keyframes sink-down { 0%, 12% { transform: translateY(0); opacity: 1; } 30% { transform: translateY(14px); } 100% { transform: translateY(150px); opacity: 0; } }
@keyframes sink-tilt { 0% { transform: rotate(0); } 10% { transform: rotate(-6deg); } 18% { transform: rotate(5deg); } 45% { transform: rotate(48deg); } 100% { transform: rotate(70deg); } }
@keyframes bubble-up { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-96px) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .sunk .sink { opacity: .25; } }
.ways { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ways li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--paper); font-size: 14px; line-height: 1.4; color: var(--ink2); transition: border-color .2s, background .2s; }
.ways li > b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-deep); font-size: 13px; }
.ways li.on { border-color: var(--teal); background: var(--teal-mist); }
.ways li.on > b { background: var(--ink); color: #fff; }
.ways strong, .ways li span b { all: unset; font-weight: 800; color: var(--ink); }

/* ---------- Mis cartas: bufé libre ---------- */
.buffet { display: grid; gap: var(--s3); }
.bf-head { display: grid; gap: 12px; }
.bf-progress { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 20px; background: var(--white); border: 1px solid var(--line-strong); }
.bf-bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.bf-bar i { display: block; height: 100%; background: var(--teal); border-radius: 5px; transition: width .6s var(--ease); }
.bf-count { font-size: 14px; color: var(--muted); white-space: nowrap; }
.bf-count b { font-size: 26px; color: var(--ink); letter-spacing: -.03em; }
.bf-count span { margin-left: 6px; }
.bf-progress.ready { border-color: var(--teal); background: var(--teal-mist); }
.bf-progress.ready .bf-count span { color: var(--teal-deep); font-weight: 800; }
.bf-tools { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bf-filter { grid-template-columns: repeat(3, auto); }
.bf-filter button { min-height: 40px; padding: 6px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.bf-filter button.on { background: var(--ink); color: #fff; }
.bf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.bf-card { background: var(--white); border: 1.5px solid var(--line-strong); border-radius: 20px; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.bf-card[hidden] { display: none; }
.bf-card:hover { border-color: var(--teal-light); transform: translateY(-2px); }
.bf-card[open] { grid-column: 1 / -1; border-color: var(--teal); transform: none; }
.bf-card summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; gap: 10px 12px; padding: 16px 18px; }
.bf-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-deep); font-weight: 800; font-size: 13px; }
.bf-q { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.bf-state { grid-column: 2; justify-self: start; font-size: 12.5px; font-weight: 800; color: var(--teal-deep); padding: 4px 10px; border-radius: 10px; background: var(--teal-mist); }
.bf-card.done { border-color: var(--teal); }
.bf-card.done .bf-n { background: var(--teal); color: #fff; }
.bf-card.done .bf-state { background: var(--teal); color: #fff; }
.bf-card[open] .bf-q { font-size: clamp(19px, 2.2vw, 24px); }
.bf-form { display: grid; gap: 10px; padding: 0 18px 18px; }
.bf-form textarea { width: 100%; border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 14px 16px; font-size: 17px; line-height: 30px; background: repeating-linear-gradient(to bottom, transparent 0 29px, var(--line) 29px 30px) #fff; background-position: 0 12px; resize: vertical; min-height: 140px; }
.bf-form textarea:focus { outline: none; border-color: var(--teal-h); box-shadow: 0 0 0 4px var(--teal-soft); }
.bf-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.bf-actions .counter { margin-right: auto; }
.bf-card.just { animation: just-sent 1.6s var(--ease) both; }
@media (max-width: 720px) { .bf-progress { grid-template-columns: minmax(0, 1fr); } .bf-grid { grid-template-columns: 1fr; } .bf-actions { flex-wrap: wrap; } }

/* ---------- la etiqueta de tu botella: iconos grandes, forma de etiqueta y con aire ---------- */
.av { border-radius: 28%; box-shadow: inset 0 0 0 1.5px rgba(23,44,39,.08); }
.av svg { width: 72%; height: 72%; }
.av.super { box-shadow: 0 0 0 2px var(--white), 0 0 0 4.5px var(--teal); }
.chain .av svg { width: 74%; height: 74%; }
.mid .av svg, .bc-top .av svg { width: 70%; height: 70%; }
.stamp svg { width: 74%; height: 74%; }
.icon-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px; }
.icon-cat { margin-top: var(--s3); }
.icon-pick .av { border-radius: 24px; background: var(--white); border: 1.5px solid var(--line-strong); box-shadow: none; }
.icon-pick .av svg { width: 68%; height: 68%; transition: transform .25s var(--ease); }
.icon-pick:hover .av { border-color: var(--teal-light); }
.icon-pick:hover .av svg { transform: scale(1.08) rotate(-4deg); }
.icon-pick input:checked + .av { background: var(--teal-mist); border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); color: var(--ink); }
.icon-pick input:checked + .av svg { transform: scale(1.06); }
.iconrow { gap: 14px; }
.iconrow .av svg { width: 70%; height: 70%; }
@media (max-width: 720px) { .icon-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px; } }
.icon-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .icon-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 720px) { .icon-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .icon-pick .av svg { width: 72%; height: 72%; } }

/* ---------- Mi botella: el mapa del viaje es la cabecera ---------- */
.vyhero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); align-items: stretch; min-height: 540px; padding-left: clamp(24px, 4vw, 52px); }
.vyhero .copy { align-content: center; padding: 44px 0; gap: 16px; }
.vyhero .h1 { font-size: clamp(38px, 4.4vw, 64px); }
.vyhero .vy-map { height: auto; min-height: 540px; border: 0; border-left: 1px solid var(--line); border-radius: 0; touch-action: pan-y; }
.vyhero.paused .vy-map { filter: grayscale(.7); }
.vy-where { display: grid; gap: 2px; min-height: 44px; }
.vy-place { font-size: 17px; font-weight: 800; color: var(--teal-deep); line-height: 1.3; }
.vy-place:not(:empty)::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-right: 9px; vertical-align: 2px; animation: pulse-dot 2s ease-in-out infinite; }
.vyhero .vy-stats { width: fit-content; }
.vyhero .vy-stats > div { text-align: left; padding: 10px 16px; }
.vyhero .vy-stats b { font-size: 22px; }
.vy-ctl { top: 14px; right: 14px; left: auto; grid-auto-flow: row; }
.vy-ctl button { width: 40px; min-width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 20px; }
.vy-ctl button svg { width: 19px; height: 19px; }
.vy-note { left: 14px; bottom: 14px; right: auto; max-width: min(48%, 360px); line-height: 1.4; }
.vy-push { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; justify-items: end; gap: 6px; }
.vy-push .btn { border: 2px solid #fff; }
.vy-push .dots { display: inline-flex; gap: 4px; margin-left: 10px; }
.vy-push .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .3s; }
.vy-push .dots i.on { background: #fff; }
.vy-push [data-push-left] { background: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 999px; font-weight: 700; color: var(--ink2); }
.vy-push [data-push-left]:empty { display: none; }
.vy-since { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; max-width: calc(100% - 90px); animation: vy-in .5s var(--ease) both; transition: opacity .6s, transform .6s; }
.vy-since.out { opacity: 0; transform: translateY(-6px); pointer-events: none; }
@keyframes vy-in { from { opacity: 0; transform: translateY(-6px); } }
.vy-plus { position: absolute; z-index: 3; transform: translate(-50%, -100%); font-weight: 800; font-size: 16px; color: var(--sun); paint-order: stroke; -webkit-text-stroke: 3px #fff; pointer-events: none; animation: vy-plus 1.6s ease-out forwards; }
@keyframes vy-plus { 0% { opacity: 0; margin-top: 6px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -36px; } }
.vy-bottle.can-push { cursor: pointer; }
.vy-bottle:focus { outline: none; }
.vy-bottle:focus-visible .vy-iso { stroke: var(--sun-text); }
.vy-tag circle { fill: #fff; stroke: var(--ink); stroke-width: .09; }
.vy-tag svg { color: var(--ink); overflow: visible; }
.vy-string { fill: none; stroke: var(--ink); stroke-width: .07; }
.on-land .vy-tag { display: none; }
.vy-nb { cursor: pointer; }
.vy-nb-dot { fill: #fff; stroke: var(--teal-h); stroke-width: .14; transition: stroke .2s; }
.vy-nb svg { color: var(--ink); }
.vy-nb-pct { font-size: .95px; font-weight: 800; fill: var(--teal-deep); paint-order: stroke; stroke: #fff; stroke-width: .32px; }
.vy-nb:hover .vy-nb-dot, .vy-nb:focus-visible .vy-nb-dot { stroke: var(--sun); stroke-width: .22; }
.vy-map:not(.ready) .vy-bottle, .vy-map:not(.ready) .vy-near { opacity: 0; }
.vy-log { display: grid; gap: 10px; }
.vy-log ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vy-log li { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; font-size: 14px; }
.vy-log li:first-child { border-color: var(--teal); }
.vy-log .d { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-deep); }
.vy-log [data-vy-pushed]:empty { display: none; }
@media (max-width: 1000px) { .vy-log ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .vyhero { grid-template-columns: 1fr; padding: 0; min-height: 0; }
  .vyhero .vy-map { order: -1; min-height: 0; height: 380px; border-left: 0; border-bottom: 1px solid var(--line); }
  .vyhero .copy { padding: 22px 20px 26px; }
  .vy-ctl { top: 10px; right: 10px; gap: 6px; } .vy-ctl button { width: 36px; min-width: 36px; height: 36px; }
  .vy-note { top: auto; bottom: 64px; left: 10px; max-width: calc(100% - 20px); font-size: 12px; }
  .vy-push { right: 10px; left: 10px; bottom: 10px; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .vy-since { top: 10px; left: 10px; font-size: 12px; }
}
/* Afinidad sin ninguna otra botella todavía: ser de las primeras no es un error */
.empty.first { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 48px 20px; border: 1px dashed var(--line-strong); border-radius: 24px; background: var(--white); }
.empty.first .first-mark { width: 64px; height: 64px; color: var(--teal-deep); }
.empty.first .first-mark svg { width: 100%; height: 100%; }
.empty.first .sm { max-width: 52ch; }
.vy-push .btn { padding-left: 18px; }
@media (max-width: 860px) {
  .vy-push { justify-content: end; }
  .vy-push [data-push-left] { display: none; }
  .vy-push.none [data-push-left] { display: block; order: -1; font-size: 12px; }
  .vy-note .n1, .vy-note.none { display: none; }
  .vy-note { bottom: 66px; }
}

/* ---------- Home móvil: el dibujo de la botella manda; solo título y un CTA grande ---------- */
@media (max-width: 720px) {
  .hero { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 32px; text-align: center; }
  .hero .art { order: -1; width: min(100%, 360px); max-height: none; margin: 0 auto -8px; }
  .hero .copy { max-width: none; display: flex; flex-direction: column; align-items: center; }
  .hero .eyebrow, .hero .phases, .hero .facts, .hero .ctas .xs { display: none; }
  .hero .h1 { font-size: clamp(32px, 9.5vw, 42px); }
  .hero .ctas { width: 100%; margin-top: 22px; }
  .hero .ctas .btn { width: 100%; height: 60px; font-size: 18px; border-radius: 30px; background: var(--teal); color: #fff; box-shadow: 0 16px 30px -16px rgba(23,130,112,.85); }
  .hero .ctas .btn:hover { background: var(--teal-h); }
}

/* banner de cookies en móvil: compacto, sin tapar el CTA */
@media (max-width: 720px) {
  .ck-in { padding: 12px 14px; gap: 10px; border-radius: 18px; }
  .ck-txt .h4 { font-size: 15px; } .ck-txt .sm { font-size: 13px; line-height: 1.4; }
  .ck-acts .btn { height: 42px; }
  .ck-acts [data-ck="cfg"] { height: 36px !important; }
}
/* cabecera pública en móvil: logo, idioma, «Entrar» y el CTA sin desbordar. En la portada el CTA ya está en el hero */
@media (max-width: 720px) {
  body:has(.home) .pubnav .right .btn.primary { display: none; }
}
@media (max-width: 420px) {
  body:not(:has(.home)) .pubnav .mark { font-size: 0; gap: 0; }
  body:not(:has(.home)) .pubnav .mark .iso { width: 32px; height: 19px; }
  .pubnav .right .btn.s { padding: 0 14px; font-size: 13px; }
}

/* --- navegación (oct. 2026): menú de cuenta, avisos coherentes en escritorio y móvil, pistas de teclado solo con teclado --- */
.acct summary .code { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.acct > div { min-width: 210px; }
.acct > div a.out { border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; color: var(--muted); }
.journey .st { position: relative; }
.journey .st .dot, .tabbar .ico .cnt { position: absolute; }
.journey .st .dot { right: 6px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #B93636; border: 2px solid #fff; }
.journey .st .dot[hidden] { display: none; }
.tabbar .ico .cnt { right: 6px; top: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-style: normal; font-size: 11px; line-height: 18px; background: var(--naranja-soft); color: var(--naranja-deep); border: 2px solid #fff; box-sizing: content-box; }
.backlink { display: inline-flex; align-items: center; gap: 6px; }
@media (hover: none) and (pointer: coarse) { .hint-keys, .swipehint kbd { display: none; } }
.stepper > span { font-size: 12px; padding: 6px 11px; border-radius: 13px; background: transparent; border: 1px dashed var(--line); color: var(--muted); opacity: .7; cursor: default; }
@media (max-width: 720px) { .stepper > span { font-size: 12px; padding: 5px 9px; } .foot { gap: 6px; } }
/* palabras largas (alemán: «Wiederherstellungsschlüssel») se parten con guion en vez de desbordar en móvil */
.auth-card { min-width: 0; }
.auth-card :is(h1, .ways span, .seg a, p, label span) { overflow-wrap: anywhere; hyphens: auto; }
/* Mensajes en móvil: la lista es una pantalla y la conversación otra (con «←» y sin barra inferior: más alto para el hilo) */
.thread .head .backconv { display: none; }
@media (max-width: 720px) {
  .chat.list-mode .thread { display: none; }
  .chat.list-mode .stepsub { display: inline-block; margin: 12px 16px 0; }
  .chat.list-mode .convs { flex-direction: column; overflow: visible; scroll-snap-type: none; padding: 10px 16px 20px; }
  .chat.list-mode .conv { min-width: 0; max-width: none; }
  .chat.thread-mode .convs, .chat.thread-mode .stepsub { display: none; }
  .chat.thread-mode .thread .head .backconv { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -6px; border-radius: 50%; font-size: 22px; color: var(--ink); flex: none; }
  .chat.thread-mode .thread .head .backconv:active { background: var(--teal-mist); }
  body.chat-open { --tabbar-h: 0px; }
  body.chat-open .tabbar { display: none; }
  body.chat-open .chat.thread-mode .thread { height: calc(100dvh - 58px); min-height: 380px; }
  .chat.thread-mode .thread .head { gap: 8px; padding: 8px 10px; }
  .chat.thread-mode .thread .head .who { flex: 1; }
  .chat.thread-mode .thread .head .who .h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat.thread-mode .thread .head .since { display: none; }
}
/* ficha: Reportar y Bloquear en un menú «⋯» junto a Guardar (antes, enlaces de texto pequeños y pegados) */
details.menu.more { align-self: center; }
details.menu.more .pop { left: 0; right: auto; width: min(290px, calc(100vw - 40px)); }
details.menu.more .rep { border-top: 0; }
/* Mi botella en móvil, más corta: bitácora en una fila deslizable y los cuatro botones de compartir en una fila */
@media (max-width: 720px) {
  .vy-log ol { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
  .vy-log li { flex: 0 0 62%; scroll-snap-align: start; }
  .sharerow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sharerow .sharebtn { padding: 10px 2px; font-size: 12px; gap: 5px; min-width: 0; }
  .sharerow .sharebtn i { width: 34px; height: 34px; }
  .sharerow .sharebtn i svg { width: 19px; height: 19px; }
  .mine { padding-bottom: 24px; }
}
@media (max-width: 720px) { details.menu.more .pop { top: auto; bottom: calc(100% + 8px); } }
/* el «⋯» de la ficha se ancla a la fila de acciones (sticky en móvil): el desplegable cabe siempre en pantalla */
.flowbar:has(> details.menu.more) { position: relative; }
@media (max-width: 720px) { .flowbar:has(> details.menu.more) { position: sticky; } details.menu.more { position: static; } details.menu.more .pop { left: 0; right: 0; width: auto; } }

/* ===================== Auditoría de maquetación (oct. 2026) ===================== */
/* contraste: el texto claro sobre la tarjeta oscura no lo pisa el gris de .xs */
.xs.brote, .sm.brote { color: var(--teal-light); }
/* pasos (portada, Cómo funciona): cuando cada tarjeta es estrecha (tableta, columna de texto), icono arriba y texto a todo el ancho */
.steps { container: steps / inline-size; }
@media (min-width: 721px) { @container steps (max-width: 1050px) {
  .steps > div { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 6px; padding: 20px; }
  .steps .ico { grid-row: auto; width: 60px; height: 60px; margin-bottom: 8px; }
  .steps h3 { font-size: 20px; }
} }
/* líneas de lectura cómodas (≤ 72 caracteres) en las páginas de texto */
.page p, .page li { max-width: 64ch; }
.bf-head p { max-width: 64ch; }
/* zonas táctiles: enlaces de navegación con al menos 44 px de alto y sin ocupar toda la fila (un toque en el vacío no navega) */
.mark { min-height: 44px; }
.backlink, .p2 aside > a.sm.link, .rhead .right a.link { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; align-self: start; }
.more-fields > summary { min-height: 44px; }
.iconbtn { width: 44px; height: 44px; }
@media (max-width: 720px) {
  .btn.s, .seg > button, .bf-tools .btn { min-height: 44px; }
  .chat.thread-mode .thread .head .backconv { width: 44px; height: 44px; }
  .vy-ctl button { width: 40px; min-width: 40px; height: 40px; }
  .foot a, .foot .linkbtn { display: inline-block; padding: 7px 0; line-height: 1.3; }
  .foot .langlist a { padding: 7px 6px 7px 0; }
  .stepper > a, .stepper > span { min-height: 32px; display: inline-flex; align-items: center; font-size: 12px; }
  .stepper > :not(.now) .slbl { display: none; }   /* en móvil, solo el paso actual lleva nombre: una sola fila */
  .auth { min-height: 0; padding-bottom: var(--s4); }   /* sin hueco vacío entre la tarjeta y el pie */
}
.buffet > *, .bf-head > * { min-width: 0; }
.bf-head .h2 { overflow-wrap: break-word; }
.pubnav .mark { min-width: 44px; }
.pubnav .right a.sm { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
@media (max-width: 720px) { .stepper > a.done { min-width: 36px; justify-content: center; } }
/* pantallas estrechas (320 px) e idiomas con palabras largas (alemán, francés, portugués): nada se estira más que su columna */
.auth { grid-template-columns: minmax(0, 1fr); }
.auth-card, .auth-card > *, .ways li > span, .seg a, .steps > div, .bf-progress > *, .act-row > div, .field > input { min-width: 0; }
.steps h3, .seg a, .bf-count, .act-row b { overflow-wrap: break-word; hyphens: auto; }
.act-row > .btn, .act-row summary > .btn { flex: none; }
@media (max-width: 380px) {
  .pubnav .right .btn.s { white-space: normal; height: auto; min-height: 44px; line-height: 1.1; padding: 6px 12px; max-width: 132px; text-align: center; }
  .bf-progress { grid-template-columns: minmax(0, 1fr); }
}
.bf-count { white-space: normal; }
.tile > * { min-width: 0; overflow-wrap: break-word; }
.auth-card .btn { white-space: normal; height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; text-align: center; line-height: 1.15; }
@media (max-width: 360px) { .pubnav .right a.sm { display: none; } }   /* «Entrar» sigue en el pie y en la portada; en 320 px no cabe junto al botón */
@media (max-width: 720px) {
  .ck-in, .ck-txt { min-width: 0; }
  .ck-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-acts .btn { white-space: normal; height: auto; min-height: 44px; line-height: 1.15; padding: 6px 10px; text-align: center; }
}
.seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg a, .steps h3, .act-row b, .tile > * { overflow-wrap: anywhere; }   /* «anywhere» sí reduce el ancho mínimo (break-word no) */
@media (max-width: 720px) { .letter-row .acts > form { flex: 1; display: flex; } .letter-row .acts > form .btn { width: 100%; } }   /* «Aceptar cartas» (formulario) igual de ancho que «Abrir chat» y «Ver cartas» (enlaces) */
/* 320 px con textos largos (de, fr): la columna nunca crece más que la pantalla; los botones grandes y los enlaces se parten en dos líneas */
.hero .copy, .results, .rhead > * { min-width: 0; }
@media (max-width: 720px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .hero .ctas .btn.xl { white-space: normal; height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; text-align: center; line-height: 1.15; max-width: 100%; }
  .rhead .right a.link { white-space: normal; text-align: right; }
}
@media (max-width: 720px) { .rhead .right { flex-wrap: wrap; row-gap: 4px; } }
.results { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) { .rgrid { grid-template-columns: minmax(0, 1fr); } .rcard, .rcard > * { min-width: 0; } .rc-foot { flex-wrap: wrap; row-gap: 8px; } .rc-foot .btn { margin-left: auto; } }
.steps > div { grid-template-columns: 84px minmax(0, 1fr); } .steps p { overflow-wrap: anywhere; }
.facts3 > div { min-width: 0; } .facts3 b { overflow-wrap: anywhere; hyphens: auto; }
.hist, .hist-l { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hist-l span { overflow-wrap: anywhere; }
details.menu:not([open]) > .pop, details.emoji:not([open]) > .pop { display: none; }   /* cerrado no ocupa: su desplegable ensanchaba la página en móvil */
html, body { overflow-x: clip; }   /* red de seguridad: un adorno animado (anillo de .pulse) nunca crea desplazamiento lateral en móvil */

/* Bitácora en escritorio: una sola tira compacta (día + suceso), sin tarjetas */
@media (min-width: 861px) {
  .vy-log { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 9px 16px; }
  .vy-log .hoja { margin: 0; white-space: nowrap; }
  .vy-log ol { display: flex; flex-wrap: wrap; row-gap: 4px; gap: 4px 0; min-width: 0; }
  .vy-log li { background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0 14px; display: flex; gap: 7px; align-items: baseline; font-size: 13px; line-height: 1.3; flex: 0 0 auto; white-space: nowrap; }
  .vy-log li:first-child { border-left: 0; padding-left: 0; font-weight: 600; }
  .vy-log .d { font-size: 11px; flex: none; }
  .vy-log [data-vy-pushed] { grid-column: 1 / -1; margin: 0; }
}
.vy-log li.clink .d { color: var(--naranja-text); }

/* Choque de botellas: halo naranja, salpicadura, «¡Clinc!» y tarjeta */
.vy-clk-halo { fill: none; stroke: var(--sun); stroke-width: .16; transform-box: fill-box; transform-origin: center; animation: vy-clk 1.8s ease-out infinite; }
@keyframes vy-clk { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.vy-clk .vy-nb-dot { stroke: var(--sun); stroke-width: .2; }
.vy-clk .vy-nb-pct { fill: var(--naranja-text); }
.vy-clk.arriving g { animation: vy-bob 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.vy-burst path { fill: none; stroke-width: .2; stroke-linecap: round; }
.vy-burst .b1 { stroke: var(--sun); } .vy-burst .b2 { stroke: var(--teal-h); } .vy-burst .b3 { fill: var(--cream); }
.vy-boom { position: absolute; z-index: 3; transform: translate(-50%, -110%) rotate(-6deg); font-weight: 900; font-size: 26px; letter-spacing: -.01em; color: var(--naranja); paint-order: stroke; -webkit-text-stroke: 4px #fff; pointer-events: none; animation: vy-boom 1.7s cubic-bezier(.2,.7,.2,1.3) forwards; }
@keyframes vy-boom { 0% { opacity: 0; scale: .4; } 18% { opacity: 1; scale: 1.15; } 30% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; margin-top: -26px; } }
.vy-clink { position: absolute; z-index: 4; top: 14px; left: 14px; width: min(380px, calc(100% - 76px)); background: var(--white); border-radius: 18px; padding: 14px 16px 14px 14px; box-shadow: 0 10px 30px rgba(23,44,39,.16), 0 0 0 2px var(--naranja-soft); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; cursor: default; }
.vy-clink[hidden] { display: none; }
.vy-clink-ic { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; background: var(--naranja-soft); color: var(--ink); display: grid; place-items: center; }
.vy-clink-ic svg { width: 34px; height: 34px; }
.vy-clink-tx { display: grid; gap: 2px; padding-right: 18px; }
.vy-clink-tx .cap { color: var(--naranja-text); margin: 0; }
.vy-clink-tx .h4, .vy-clink-tx .xs { margin: 0; }
.vy-clink-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.vy-clink-x { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 50%; }
.vy-clink-x:hover { background: var(--line); color: var(--ink); }
.clink-mark { display: inline-block; color: var(--sun); }
.clink-chip { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 8px; padding: 4px 11px; border-radius: 999px; background: var(--cream); color: #6B4A12; font-size: 13px; font-weight: 700; }
.rcard.clink { border-color: var(--naranja); box-shadow: 0 0 0 3px var(--naranja-soft); }
@media (prefers-reduced-motion: no-preference) { .rcard.clink .clink-mark, .clink-chip .clink-mark { animation: clink-spin 6s linear infinite; } }
@keyframes clink-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .vy-clink { top: 10px; left: 10px; width: calc(100% - 64px); padding: 12px; grid-template-columns: auto minmax(0, 1fr); }
  .vy-clink-ic { width: 40px; height: 40px; } .vy-clink-ic svg { width: 28px; height: 28px; }
  .vy-clink-acts { grid-column: 1 / -1; flex-wrap: nowrap; } .vy-clink-acts .btn { flex: 1; justify-content: center; }
  .vy-boom { font-size: 22px; }
}

/* ---------- Info: portada tipo listado y artículo minimalista ---------- */
.mag { max-width: 980px; padding-top: 36px; padding-bottom: 72px; }
.mag-head { display: grid; gap: 14px; padding-bottom: 34px; border-bottom: 1.5px solid var(--ink); }
.mag-head .h1 { max-width: 12ch; }
.mag-head .lead { max-width: 56ch; }
.mag-list { list-style: none; margin: 0; padding: 0; }
.mag-list li { border-bottom: 1px solid var(--line); }
.mag-list a { display: grid; grid-template-columns: 44px 56px 1fr 28px; gap: 20px; align-items: center; padding: 26px 0; color: inherit; text-decoration: none; }
.mag-list .n { font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.mag-list .ic { width: 56px; height: 56px; color: var(--ink); opacity: .85; }
.mag-list .ic svg { width: 100%; height: 100%; }
.mag-list .tx { display: grid; gap: 6px; }
.mag-list .t { font-size: clamp(20px, 2.2vw, 27px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.mag-list .d { font-size: 15px; line-height: 1.45; max-width: 62ch; }
.mag-list .arr { font-size: 22px; color: var(--muted); transition: transform .2s ease, color .2s ease; }
.mag-list a:hover .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mag-list a:hover .arr { transform: translateX(4px); color: var(--ink); }
.mag-list li.first a { grid-template-columns: 44px 1fr 28px; padding: 38px 0 40px; }
.mag-list li.first .ic { display: none; }
.mag-list li.first .t { font-size: clamp(28px, 3.6vw, 46px); line-height: 1; letter-spacing: -.04em; }
.mag-list li.first .d { font-size: 17px; }

.post { max-width: 760px; padding-top: 28px; padding-bottom: 80px; }
.post .back { color: var(--muted); text-decoration: none; display: inline-block; padding: 8px 0; }
.post .back:hover { color: var(--ink); }
.post-head { display: grid; gap: 16px; margin-top: 22px; }
.post-head .h1 { font-size: clamp(38px, 5.6vw, 72px); line-height: .98; text-wrap: balance; }
.post-head .lead { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.45; }
.post-ic { width: 84px; height: 84px; margin: 34px 0 6px; color: var(--teal-h); }
.post-ic svg { width: 100%; height: 100%; }
.prose { font-size: 18.5px; line-height: 1.7; color: var(--ink2); }
.prose > * { margin: 0 0 1.05em; }
.prose h2 { font-size: clamp(22px, 2.3vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: var(--ink); margin: 1.9em 0 .6em; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--sun); font-size: clamp(21px, 2.3vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
.prose ul { padding-left: 1.1em; } .prose li { margin: .35em 0; } .prose li::marker { color: var(--teal-h); }
.prose strong { color: var(--ink); }
.post-src { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--muted); }
.post-src ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.post-cta { margin-top: 40px; padding: 26px; border-radius: var(--r2); background: var(--teal-mist); display: grid; gap: 10px; justify-items: start; }
.post-more { margin-top: 48px; display: grid; }
.post-more .cap { margin-bottom: 6px; }
.post-more a { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.post-more .t { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.post-more a:hover .t { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .mag-list a { grid-template-columns: 30px 1fr 18px; gap: 12px; padding: 22px 0; }
  .mag-list .ic { display: none; }
  .mag-list li.first a { grid-template-columns: 30px 1fr 18px; }
  .prose { font-size: 17.5px; }
  .post-ic { width: 64px; height: 64px; margin-top: 26px; }
}

/* ---------- Info: herramientas de lectura del artículo ---------- */
.read-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-prog span { display: block; height: 100%; width: 0; background: var(--sun); transform-origin: left; }
.post-tldr { margin-top: 30px; padding: 20px 22px; border: 0; border-radius: var(--r2); background: var(--cream); }
.post-tldr ul { margin: 10px 0 0; padding-left: 1.1em; display: grid; gap: 8px; font-size: 16.5px; line-height: 1.5; }
.post-tldr li::marker { color: var(--sun); }
.post-toc { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-toc summary { cursor: pointer; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; }
.post-toc summary::after { content: '+'; font-size: 18px; line-height: 1; color: var(--muted); }
.post-toc details[open] summary::after { content: '–'; }
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc ol { margin: 0 0 16px; padding-left: 1.4em; display: grid; gap: 7px; font-size: 15.5px; }
.post-toc a { color: var(--ink2); text-decoration: none; } .post-toc a:hover { text-decoration: underline; }
.post-toc li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.prose h2 { scroll-margin-top: 80px; }
.post-inline { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin: 2em 0; padding: 18px 20px; border-radius: var(--r2); background: var(--teal-mist); font-size: 16px; line-height: 1.45; }
.post-inline > div > * { margin: 0; } .post-inline .h4 { color: var(--ink); }
.post-inline .pi-ic { width: 44px; height: 25px; color: var(--teal-h); } .post-inline .pi-ic svg { width: 100%; height: 100%; display: block; }
/* las dos botellas */
.pairs { margin: 2.2em 0; padding: 22px; border-radius: var(--r2); background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 60px -48px rgba(23,44,39,.45); font-size: 16px; line-height: 1.5; }
.pairs > * { margin: 0; }
.pairs .seg { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pairs .seg legend { float: left; width: 9.5em; padding: 0; color: var(--muted); font-weight: 600; }
.pairs .seg label { position: relative; }
.pairs .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pairs .seg span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--ink2); background: var(--paper); transition: background .15s, color .15s, border-color .15s; }
.pairs .seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.pairs .seg input:focus-visible + span { outline: 2px solid var(--sun-text); outline-offset: 2px; }
.pairs-sea { margin: 16px -22px 4px; background: linear-gradient(var(--white), var(--teal-mist)); }
.pairs-sea svg { display: block; width: 100%; height: auto; }
.pairs .pw { fill: none; stroke-linecap: round; } .pairs .pw1 { stroke: var(--ink); stroke-width: 2.4; } .pairs .pw2 { stroke: var(--teal); stroke-width: 2; opacity: .8; }
.pairs .pb-me { color: var(--sun); } .pairs .pb-them { color: var(--ink); }
.pairs-out .pr-item[hidden] { display: none; }
.pairs-out .pr-item { padding-top: 6px; } .pairs-out .pr-item + .pr-item { margin-top: 18px; }
.pairs[data-ready] .pairs-out .pr-item + .pr-item { margin-top: 0; }
.pairs-out .pr-item > * { margin: 0 0 6px; } .pairs-out .h3 { font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
.pair-acts { display: flex; gap: 16px; align-items: center; }
.pairs .linkbtn { background: none; border: 0; padding: 0; color: var(--teal-deep); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* preguntas, fuentes y sello */
.post-src ol { padding-left: 1.3em; margin: 10px 0 0; display: grid; gap: 6px; }
.post-badge { margin-top: 36px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 20px; border: 1.5px dashed var(--teal-h); border-radius: var(--r2); }
.post-badge > div > * { margin: 0 0 4px; }
.pb-seal { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-deep); display: grid; place-items: center; }
.pb-seal svg { width: 22px; height: 22px; }
@media (max-width: 720px) {
  .post-inline { grid-template-columns: 1fr; } .post-inline .pi-ic { display: none; } .post-inline .btn { justify-self: start; }
  .pairs { padding: 18px 16px; } .pairs-sea { margin: 14px -16px 4px; }
  .pairs .seg legend { float: none; width: 100%; margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) { .read-prog { display: none; } }
.pairs-key { display: flex; gap: 6px; align-items: center; margin: 2px 0 10px !important; }
.pairs-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .pairs-key .k-me { background: var(--sun); } .pairs-key .k-them { background: var(--ink); margin-left: 10px; }
.pairs-sea svg { height: clamp(130px, 22vw, 170px); }

/* ---------- otro océano: botón semanal y avión que se lleva la botella ---------- */
.vy-ocean { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; }
.vy-ocean .btn { border: 2px solid #fff; gap: 7px; padding: 0 14px 0 12px; }
.vy-ocean .btn svg { width: 18px; height: 18px; }
.vy-map:has(.vy-since:not([hidden]):not(.out)) .vy-ocean { top: 58px; }
.vy-flying { position: absolute; top: 14px; left: 0; right: 0; width: fit-content; z-index: 3; margin: 0 auto; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; animation: vy-in .4s var(--ease) both; }
.vy-plane path { fill: var(--white); stroke: var(--ink); stroke-width: .12; stroke-linejoin: round; }
.vy-plane .vy-plane-win { fill: var(--teal); }
.vy-rope { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-dasharray: .01 0; opacity: .7; }
@media (max-width: 720px) { .vy-ocean { top: 10px; left: 10px; } .vy-ocean .btn { height: 36px; min-height: 36px; font-size: 12.5px; padding: 0 10px; } .vy-map:has(.vy-since:not([hidden]):not(.out)) .vy-ocean { top: 50px; } }

/* ---------- portada: demo de la botella en carrusel (escenas SVG animadas) ---------- */
.demo { border-top: 0; padding-top: clamp(28px, 4vw, 56px); }
.demo-car { position: relative; }
.demo-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 380px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding: 4px 2px 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
.demo-track::-webkit-scrollbar { display: none; }
.demo-track:focus-visible { outline: 2px solid var(--sun-text); outline-offset: 4px; }
.demo-slide { scroll-snap-align: start; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.demo-slide:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(23,44,39,.45); }
.demo-pic { aspect-ratio: 32 / 22; background: var(--teal-mist); }
.demo-pic svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.demo-slide figcaption { padding: 18px 20px 22px; display: grid; gap: 6px; align-content: start; }
.demo-slide figcaption .cap { color: var(--sun-text); }
.demo-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.demo-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 18px; font-weight: 700; display: grid; place-items: center; transition: background .2s, color .2s; }
.demo-arrow:hover { background: var(--ink); color: #fff; }
.demo-arrow:disabled { opacity: .3; pointer-events: none; }
.demo-dots { display: flex; gap: 7px; }
.demo-dots button { width: 9px; height: 9px; border-radius: 5px; background: var(--line); transition: width .3s var(--ease), background .3s; padding: 0; }
.demo-dots button.on { width: 26px; background: var(--sun); }
@media (min-width: 1100px) { .demo-track { grid-auto-columns: calc((100% - 36px) / 3); } }
/* escenas */
.dm-land { fill: var(--paper); stroke: #9FC9BF; stroke-width: 1.5; }
.dm-waves path { fill: none; stroke: var(--teal-light); stroke-width: 2; stroke-linecap: round; opacity: .8; }
.dm-iso { fill: #fff; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.dm-tag path { stroke: var(--ink); stroke-width: 2.4; fill: none; }
.dm-tag circle { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.dm-tag svg { color: var(--ink); overflow: visible; }
.dm-bob { animation: dm-bob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dm-bob { 50% { transform: rotate(-7deg) translateY(-2px); } }
.dm-city { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.dm-lbl { font-size: 12px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.dm-route { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 6; opacity: .45; }
.dm-route-live { fill: none; stroke: var(--teal-h); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; }
.dm-chip rect { fill: var(--ink); } .dm-chip text { fill: #fff; font-size: 12px; font-weight: 800; }
.dm-card rect { fill: #fff; stroke: var(--line); stroke-width: 1.5; filter: drop-shadow(0 10px 14px rgba(23,44,39,.12)); }
.dm-name { font-size: 14px; font-weight: 800; fill: var(--ink); } .dm-small { font-size: 10.5px; font-weight: 600; fill: var(--muted); } .dm-quote { font-size: 10.5px; font-style: italic; fill: var(--ink2); }
.dm-day { font-size: 11px; font-weight: 800; fill: var(--sun-text); text-transform: uppercase; letter-spacing: .06em; }
.ds-log .dm-small { font-size: 12px; fill: var(--ink); }
.dm-ring { fill: none; stroke: var(--teal-light); stroke-width: 1.5; stroke-dasharray: 3 5; }
.dm-nb circle { fill: #fff; stroke: var(--teal-h); stroke-width: 2; } .dm-nb svg { color: var(--ink); overflow: visible; }
.dm-nb text { font-size: 12px; font-weight: 800; fill: var(--teal-deep); paint-order: stroke; stroke: #fff; stroke-width: 3px; } .dm-nb text.sup { fill: var(--naranja-text); }
.dm-burst path { stroke: var(--sun); stroke-width: 3.5; stroke-linecap: round; }
.dm-boom { font-size: 26px; font-weight: 900; fill: var(--naranja); paint-order: stroke; stroke: #fff; stroke-width: 5px; transform-box: fill-box; }
.dm-plus { font-size: 18px; font-weight: 900; fill: var(--sun-text); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.dm-pushbtn rect { fill: var(--teal); } .dm-pushbtn text { fill: #fff; font-size: 13px; font-weight: 800; } .dm-pushbtn circle { fill: rgba(255,255,255,.35); } .dm-pushbtn circle.on { fill: #fff; }
.dm-flight { fill: none; stroke: var(--sun); stroke-width: 2.5; stroke-dasharray: 5 7; stroke-linecap: round; }
.dm-plane path { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.dm-rope { stroke: var(--ink); stroke-width: 1.5; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .dm-bob { animation: none; } .demo-slide { transition: none; } }
/* volver sin avisos (pantalla de botella lanzada) */
.ret { border: 1px solid var(--line-strong); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 8px; justify-items: start; }
.ret-acts { display: flex; flex-wrap: wrap; gap: 8px; }