/* DRAPE Ads — el mostrador de reservas de la marca del día.
   El mundo es el de la landing de drape.es (negro, crema, burdeos SOLO de relleno)
   y la tarjeta del teléfono copia la de la app (drape-home.jsx, kind 'brand').    */
:root {
  --bg: #000;
  --sup: #0f0e0d;
  --sup-2: #181614;
  --sup-3: #221f1c;
  --linea: rgba(244, 239, 229, 0.12);
  --linea-2: rgba(244, 239, 229, 0.22);
  --tinta: #F4EFE5;
  --tinta-2: rgba(244, 239, 229, 0.70);
  --tinta-3: rgba(244, 239, 229, 0.54);
  --burdeos: #7A1D28;
  --burdeos-2: #932836;
  --acento: #E08597;           /* burdeos que SÍ se lee como texto sobre negro */
  --oro: #D8B468;              /* el dorado del modo oscuro de la app */
  --bien: #8CC5A0;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cajon: cubic-bezier(0.32, 0.72, 0, 1);
  --serif: 'Instrument Serif', Georgia, serif;
  --r: 18px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body { margin: 0; background: var(--bg); }
body {
  color: var(--tinta);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

.saltar { position: absolute; left: -999px; top: 8px; }
.saltar:focus { left: 16px; z-index: 50; background: var(--tinta); color: #000; padding: 8px 14px; border-radius: 999px; }

/* ── Barra ─────────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: max(12px, env(safe-area-inset-top)); z-index: 20;
  width: calc(100% - 24px); max-width: 1240px; margin: 12px auto 0;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 7px 7px 20px; border-radius: 999px;
  background: rgba(12, 11, 10, 0.78); border: 0.5px solid var(--linea);
  backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px);
}
.logo { font-weight: 800; letter-spacing: 0.08em; font-size: 15px; text-decoration: none; white-space: nowrap; }
.logo span { color: var(--acento); letter-spacing: 0.02em; font-weight: 700; }
.barra-nav { display: none; gap: 24px; margin-left: auto; font-size: 14.5px; font-weight: 600; color: var(--tinta-2); }
.barra-nav a { text-decoration: none; transition: color .2s; }
.barra-nav a:hover { color: var(--tinta); }
.barra > .boton { margin-left: auto; }
@media (min-width: 720px) { .barra-nav { display: flex; } .barra > .boton { margin-left: 8px; } }

/* ── Botones ───────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, var(--burdeos-2), var(--burdeos)); color: #FDF7EE;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(122, 29, 40, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform .18s var(--ease), filter .2s, box-shadow .2s, background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.boton:active:not(:disabled) { transform: scale(0.97); }
.boton:disabled { background: rgba(244, 239, 229, 0.07); color: var(--tinta-3); box-shadow: none; cursor: default; }
@media (hover: hover) { .boton:not(:disabled):hover { filter: brightness(1.1); } }
.boton-mini { min-height: 38px; padding: 0 16px; font-size: 14px; }
.boton-claro { background: var(--tinta); color: #120f0d; box-shadow: 0 10px 24px -14px rgba(244, 239, 229, 0.5); }
.boton-borde { background: transparent; color: var(--tinta); border: 0.5px solid var(--linea-2); box-shadow: none; }
.boton.cargando { color: transparent !important; position: relative; pointer-events: none; }
.boton.cargando::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(253, 247, 238, 0.35); border-top-color: #FDF7EE; animation: gira .7s linear infinite;
}
.boton-claro.cargando::after { border-color: rgba(0, 0, 0, 0.2); border-top-color: #120f0d; }
@keyframes gira { to { transform: rotate(360deg); } }
.enlace-txt {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-size: 14px; font-weight: 600; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--linea-2);
}
.enlace-txt:hover { color: var(--tinta); }
.enlace-flecha { font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--tinta-2); }
.enlace-flecha::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform .2s var(--ease); }
.enlace-flecha:hover { color: var(--tinta); }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ── Escena: columna + teléfono ────────────────────────────────────── */
.escena {
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 72px;
}
.col { min-width: 0; }
/* Móvil: el teléfono va justo DEBAJO del titular (es la prueba de lo que se compra),
   no al final de la página. `contents` deja ordenar las piezas de la columna. */
/* Móvil: el iPhone de la portada ya enseña el producto, y en el paso 3 sale la tarjeta
   con la foto de la marca (.vista-movil). El teléfono de la columna solo va en escritorio. */
@media (max-width: 999px) {
  .telefono-col { display: none; }
}
@media (min-width: 1000px) {
  .escena { grid-template-columns: minmax(0, 1fr) 360px; padding: 0 40px; }
  .telefono-col { grid-column: 2; grid-row: 1; }
  .col { grid-column: 1; grid-row: 1; }
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero { padding: 72px 0 40px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(42px, 8.6vw, 84px); font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; max-width: 12ch;
}
.hero h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em;
  display: block; color: var(--tinta); font-size: 1.08em; line-height: 0.95; margin-top: 0.06em;
}
.entrada { margin-top: 26px; font-size: 18px; line-height: 1.55; color: var(--tinta-2); max-width: 50ch; }
.hechos { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14.5px; color: var(--tinta-2); }
.hechos b { color: var(--tinta); font-weight: 800; font-size: 17px; margin-right: 4px; letter-spacing: -0.02em; }
.hero-acciones { display: flex; align-items: center; gap: 24px; margin-top: 34px; flex-wrap: wrap; }
@media (min-width: 1000px) { .hero { padding: 120px 0 72px; } }

/* ── Portada · la medianoche ───────────────────────────────────────── */
.portada {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; margin-top: -64px; padding: 96px 20px 48px;
  display: grid; align-items: center;
}
.muro {
  position: absolute; inset: -20% -10%; z-index: -2;
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 12px;
  transform: rotate(-7deg) scale(1.08); opacity: 0.5;
}
.muro-col { display: flex; flex-direction: column; gap: 12px; animation: sube var(--dur, 60s) linear infinite; will-change: transform; }
.muro-col:nth-child(even) { animation-direction: reverse; }
.muro-col img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; display: block; background: #151311; }
.muro-col img:nth-child(3n) { aspect-ratio: 3 / 4.4; }
.portada.quieta .muro-col, .portada.quieta .telefono-demo, .portada.quieta::after { animation-play-state: paused; }
@keyframes sube { to { transform: translateY(-50%); } }
/* Velo: negro arriba (la barra), en el centro para leer el titular y abajo para el siguiente bloque. */
.portada::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 42%, rgba(0,0,0,0.35), rgba(0,0,0,0.9) 75%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.2) 22%, rgba(0,0,0,0.25) 70%, #000 100%);
}
.portada::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 70%; width: 120vmin; height: 120vmin;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(122, 29, 40, 0.55), transparent 70%);
  animation: late 5.2s ease-in-out infinite;
}
@keyframes late { 50% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); } }
.portada-dentro {
  width: 100%; max-width: 1160px; margin: 0 auto;
  display: grid; gap: 44px; justify-items: center; text-align: center;
}
.portada-txt { display: grid; justify-items: center; }
.titular { font-size: clamp(40px, min(10.5vw, 7.4svh), 88px); font-weight: 800; line-height: 0.96; letter-spacing: -0.04em; max-width: 11ch; }
.titular em {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em;
  font-size: 1.06em; line-height: 0.98; margin-top: 0.04em; color: #fff;
}
.pal { display: inline-block; animation: pal .9s var(--ease) both; animation-delay: calc(0.15s + var(--i) * 0.07s); }
@keyframes pal { from { opacity: 0; transform: translateY(0.45em) rotate(2deg); filter: blur(10px); } }
.entra-1 { animation: sube-suave .7s var(--ease) both .05s; }
.entra-2 { animation: sube-suave .8s var(--ease) both .95s; }
.entra-3 { animation: sube-suave .8s var(--ease) both 1.1s; }
.entra-4 { animation: telefono-entra 1.3s var(--ease) both .55s; }
@keyframes sube-suave { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes telefono-entra { from { opacity: 0; transform: translateY(70px) scale(0.94); filter: blur(8px); } }
.portada .kicker { margin-bottom: 20px; color: var(--oro); }
.portada .hechos { justify-content: center; margin-top: 26px; gap: 8px; }
.portada .hechos li {
  padding: 8px 14px; border-radius: 99px; font-size: 14px; color: var(--tinta-2);
  background: rgba(20, 18, 16, 0.6); border: 0.5px solid var(--linea);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.portada .hechos b { font-size: 15px; margin: 0 2px; }
@media (max-width: 520px) { .portada .hechos { flex-wrap: nowrap; gap: 6px; } .portada .hechos li { padding: 7px 11px; font-size: 12.5px; white-space: nowrap; } .portada .hechos b { font-size: 13.5px; } }
.portada .hero-acciones { justify-content: center; margin-top: 30px; }
.boton-grande { min-height: 60px; padding: 0 38px; font-size: 17.5px; position: relative; overflow: hidden; }
/* Un brillo que cruza el botón cada pocos segundos: el único sitio al que mirar. */
.boton-grande::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-120%); animation: brillo 4.2s var(--ease) infinite 2.2s;
}
@keyframes brillo { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

.portada-movil { position: relative; display: grid; justify-items: center; }
.telefono-demo { --tw: clamp(200px, min(74vw, calc((100svh - 150px) / 2.08)), 290px); transform: rotate(-3deg); animation: flota 7s ease-in-out infinite; }
@keyframes flota { 50% { transform: rotate(-2deg) translateY(-10px); } }
.medianoche {
  position: absolute; z-index: 4; top: 16%; left: calc(50% + min(300px, 74vw) / 2 - 64px);
  display: grid; justify-items: center; gap: 2px; padding: 10px 16px 12px; border-radius: 20px;
  background: rgba(16, 14, 13, 0.84); border: 0.5px solid var(--linea-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.9); transform: rotate(4deg);
}
.mn-fecha { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; }
.mn-hora { white-space: nowrap; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; transition: color .4s; }
.mn-hora i { font-style: normal; display: inline-block; }
.mn-hora.cambia i { animation: cae .5s var(--ease); }
.mn-hora.cero { color: var(--oro); }
@keyframes cae { from { transform: translateY(-60%); opacity: 0; filter: blur(4px); } }
.medianoche.pulso { animation: pulso .9s var(--ease); }
@keyframes pulso { 30% { box-shadow: 0 0 0 10px rgba(216, 180, 104, 0.16), 0 20px 40px -18px rgba(0,0,0,0.9); } }

.demo-tarjeta { overflow: hidden; }
.demo-tira { position: absolute; inset: 0; }
.demo-tira img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-tira img.sale { animation: sale-izq .75s var(--cajon) forwards; }
.demo-tira img.llega { animation: llega-der .75s var(--cajon) both; }
@keyframes sale-izq { to { transform: translateX(-100%); } }
@keyframes llega-der { from { transform: translateX(100%); } }
.demo-tarjeta .app-rotulo.brilla span { animation: oro 1.2s var(--ease); }
@keyframes oro { 40% { text-shadow: 0 0 12px rgba(216, 180, 104, 0.95); } }
.demo-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.demo-rejilla img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; display: block; background: #151311; }

.bajar { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border-radius: 99px; border: 1.5px solid var(--linea-2); }
.bajar span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: var(--tinta); animation: rueda 1.8s var(--ease) infinite; }
@keyframes rueda { 60% { transform: translateY(12px); opacity: 0; } 61% { transform: none; opacity: 0; } }

@media (min-width: 1000px) {
  .portada { padding: 92px 40px 36px; }
  .portada-dentro { grid-template-columns: 1.15fr 0.85fr; text-align: left; justify-items: start; align-items: center; gap: 40px; }
  .portada-txt { justify-items: start; }
  .titular { font-size: clamp(44px, min(5.2vw, 9.2svh), 84px); max-width: 10ch; }
  .portada .hechos, .portada .hero-acciones { justify-content: flex-start; }
  .portada-movil { justify-self: center; }
  .muro { --cols: 6; }
  .portada::before {
    background:
      linear-gradient(90deg, #000 0%, rgba(0,0,0,0.82) 34%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.55) 100%),
      linear-gradient(to bottom, #000 0%, transparent 20%, transparent 75%, #000 100%);
  }
  .portada::after { left: 72%; top: 52%; }
}
@media (max-width: 999px) {
  .portada { min-height: auto; padding-top: 108px; padding-bottom: 84px; }
  .portada-dentro { gap: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .muro-col, .telefono-demo, .portada::after, .boton-grande::after, .bajar span { animation: none !important; }
}

/* ── Teléfono ──────────────────────────────────────────────────────── */
.telefono-col { padding: 8px 0 36px; }
.telefono-pegado { position: sticky; top: 84px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (min-width: 1000px) { .telefono-col { padding: 96px 0 0; } }
.telefono {
  --tw: clamp(210px, min(80vw, calc((100svh - 200px) / 2.08)), 300px);
  position: relative; width: var(--tw); aspect-ratio: 318 / 660;
  border-radius: calc(var(--tw) * 0.16); padding: 10px;
  background: linear-gradient(160deg, #2b2825, #121110 40%, #1d1b19);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 80px -30px rgba(122, 29, 40, 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.telefono-isla { position: absolute; z-index: 3; top: 20px; left: 50%; width: 30%; height: 24px; transform: translateX(-50%); background: #000; border-radius: 99px; }
.telefono-pantalla {
  position: relative; height: 100%; overflow: hidden; background: #000;
  border-radius: calc(var(--tw) * 0.16 - 10px);
}
.telefono-pie { font-size: 13px; color: var(--tinta-3); text-align: center; max-width: 30ch; }
.vista-botones { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--sup-2); border: 0.5px solid var(--linea); }
.vista-botones button {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--tinta-3); transition: background .25s var(--ease), color .25s;
}
.vista-botones button[aria-selected="true"] { background: var(--burdeos); color: #FDF7EE; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }

/* La app, dentro (modo oscuro de DRAPE). */
.app-pantalla { position: absolute; inset: 0; padding: 50px 14px 0; }
.app-pantalla.entra { animation: entra .45s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.app-cabecera { font-size: 25px; font-weight: 800; letter-spacing: -0.03em; margin: 4px 2px 10px; }
.app-busca {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; margin-bottom: 12px;
  border-radius: 12px; background: #1a1816; color: rgba(244, 239, 229, 0.45); font-size: 12.5px;
}
.app-tarjeta {
  position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #2a2521;
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.8);
}
.app-tarjeta img, .app-detalle-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-tarjeta-vacia {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #1f1c19 0 10px, #24211d 10px 20px);
  color: rgba(244, 239, 229, 0.42); font-size: 12px; font-weight: 600;
}
.app-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.12) 100%); }
.app-texto { position: absolute; left: 16px; right: 16px; bottom: 12px; }
/* Misma letra que el rótulo del outfit del día en la app (15 oct): versalitas
   blancas para la marca y «Patrocinado» en dorado, un punto más pequeño. */
.app-rotulo { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--oro); }
.app-rotulo svg { width: 9px; height: 9px; }
.app-rotulo span { font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.app-titulo {
  font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.app-marca { display: flex; align-items: center; gap: 6px; min-width: 0; }
.app-logo { position: static !important; width: 17px !important; height: 17px !important; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.2px rgba(255,255,255,0.9); }
.app-puntos { position: absolute; right: 14px; bottom: 15px; display: flex; gap: 4px; }
.app-puntos i { width: 5px; height: 5px; border-radius: 9px; background: rgba(255,255,255,0.45); }
.app-puntos i.on { width: 14px; background: #fff; }
.app-fila { margin: 16px 2px 8px; font-size: 14px; font-weight: 700; }
.app-chips { display: flex; gap: 6px; overflow: hidden; }
.app-chips i { flex: none; font-style: normal; font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 99px; background: #1a1816; color: rgba(244,239,229,0.7); }
.app-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.app-rejilla i { display: block; aspect-ratio: 3 / 4; border-radius: 12px; background: #151311; }
.app-rejilla i:nth-child(2) { aspect-ratio: 3 / 3.4; }

.app-pantalla:has(.app-detalle) { padding: 0; }
.app-detalle { position: absolute; inset: 0; overflow: hidden; }
.app-detalle-foto { position: relative; height: 64%; background: #1f1c19; }
.app-detalle-foto::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to top, #000, transparent); }
.app-detalle-autor { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; font-size: 13.5px; }
.app-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--burdeos); font-size: 12px; font-weight: 800; }
.app-estrella { color: var(--oro); font-size: 11px; }
.app-detalle-pie { padding: 6px 16px 0; font-size: 12.5px; color: rgba(244,239,229,0.72); }
.app-prenda {
  display: flex; align-items: center; gap: 10px; margin: 12px 14px 0; padding: 10px;
  border-radius: 14px; background: #161412; border: 0.5px solid var(--linea);
}
.app-prenda-muestra { width: 32px; height: 32px; border-radius: 9px; background: #C8B89A; flex: none; }
.app-prenda-txt { min-width: 0; flex: 1; display: grid; }
.app-prenda-txt b, .app-prenda-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-prenda-txt b { font-size: 12px; }
.app-prenda-txt small { font-size: 10.5px; color: rgba(244,239,229,0.55); }
.app-ir { margin: 12px 14px 0; height: 38px; border-radius: 99px; display: grid; place-items: center; background: var(--tinta); color: #111; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.app-ir-host { text-align: center; font-size: 10px; color: rgba(244,239,229,0.5); margin-top: 5px; }
.app-comprar { font-size: 11.5px; font-weight: 700; padding: 7px 12px; border-radius: 99px; background: var(--tinta); color: #111; }

/* ── Flujo por escalones ───────────────────────────────────────────── */
.flujo { padding-top: 24px; }
.rail {
  list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  position: sticky; top: 76px; z-index: 5; padding-top: 10px; padding-bottom: 12px; background: linear-gradient(#000 70%, transparent);
}
.rail li {
  display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; color: var(--tinta-3);
  cursor: default; transition: color .3s;
}
.rail li span { display: none; }
.rail li::before { content: ''; height: 3px; border-radius: 3px; background: var(--linea); transition: background .45s var(--ease); }
.rail li.hecho { color: var(--tinta-2); cursor: pointer; }
.rail li.hecho::before { background: var(--burdeos-2); }
.rail li.actual { color: var(--tinta); }
.rail li.actual::before { background: linear-gradient(90deg, var(--tinta) 0 100%); }
@media (max-width: 520px) { .rail li { font-size: 0; } .rail li.actual { font-size: 12px; grid-column: span 1; white-space: nowrap; } }

.paso { border-top: 0.5px solid var(--linea); }
.paso:last-of-type { border-bottom: 0.5px solid var(--linea); }
.paso-cab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 0; }
.paso-num {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1;
  border: 0.5px solid var(--linea-2); color: var(--tinta-3); transition: background .35s, color .35s, border-color .35s;
}
.paso h2 { font-size: clamp(21px, 3.4vw, 27px); font-weight: 800; letter-spacing: -0.03em; color: var(--tinta-3); transition: color .3s; }
.paso-resumen { font-size: 14.5px; color: var(--tinta-2); margin-top: 3px; }
.paso-resumen:empty { display: none; }
.cambiar { display: none; border: 0; background: var(--sup-2); padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; cursor: pointer; }
.cambiar:hover { background: var(--sup-3); }
.paso.hecho .paso-num { background: var(--burdeos); border-color: transparent; color: #FDF7EE; }
.paso.hecho h2 { color: var(--tinta); }
.paso.hecho .cambiar { display: inline-block; }
.paso.actual .paso-num { background: var(--tinta); color: #120f0d; border-color: transparent; }
.paso.actual h2 { color: var(--tinta); }
.paso.actual .paso-resumen { display: none; }

/* El cajón: se abre con grid-rows (sin medir alturas) y la curva de la casa. */
.paso-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--cajon); }
.paso.actual .paso-cuerpo { grid-template-rows: 1fr; }
.paso-dentro { overflow: hidden; min-height: 0; }
.paso-dentro > :first-child { margin-top: 0; }
.paso.actual .paso-dentro { padding-bottom: 34px; }
.paso-dentro > * { transition: opacity .4s var(--ease) .1s, transform .5s var(--ease) .1s; }
.paso:not(.actual) .paso-dentro > * { opacity: 0; transform: translateY(-6px); transition-delay: 0s; }
.paso-acciones { display: flex; gap: 14px; align-items: center; margin-top: 28px; }

.sub { font-size: 15px; color: var(--tinta-2); max-width: 60ch; }
.letra { font-size: 13.5px; color: var(--tinta-3); line-height: 1.55; max-width: 62ch; margin-top: 16px; }
.aviso { margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(224, 133, 151, 0.12); color: var(--acento); font-size: 14.5px; }
.aviso.bien { background: rgba(140, 197, 160, 0.12); color: var(--bien); }

/* Paso 1 · servicios */
.servicios { display: grid; gap: 10px; }
.servicio { position: relative; display: block; cursor: pointer; text-decoration: none; }
.servicio input { position: absolute; opacity: 0; pointer-events: none; }
.servicio-marco {
  display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--r);
  background: var(--sup); border: 0.5px solid var(--linea);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.servicio:hover .servicio-marco { border-color: var(--linea-2); }
.servicio input:checked + .servicio-marco { border-color: var(--acento); background: var(--sup-2); box-shadow: 0 0 0 1px var(--acento) inset; }
.servicio input:focus-visible + .servicio-marco { outline: 2px solid var(--acento); outline-offset: 3px; }
.servicio-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.servicio-cab b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.servicio-cab em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--bien); white-space: nowrap; }
.servicio-txt { font-size: 14.5px; color: var(--tinta-2); max-width: 58ch; }
.servicio-pie { font-size: 13.5px; font-weight: 700; color: var(--tinta); margin-top: 4px; }
.servicio.apagado { cursor: not-allowed; }
.servicio.apagado .servicio-marco { background: transparent; border-style: dashed; }
.servicio.apagado b, .servicio.apagado .servicio-txt { color: var(--tinta-3); }
.servicio.apagado em { color: var(--tinta-3); }
.servicio-enlace .servicio-cab em { color: var(--acento); }

/* Paso 2 · calendario */
.calendario { margin-top: 16px; max-width: 440px; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#mesNombre { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; text-transform: lowercase; }
#mesNombre::first-letter { text-transform: uppercase; }
.redondo {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--sup-2); border: 0.5px solid var(--linea); transition: background .2s, opacity .2s;
}
.redondo:hover:not(:disabled) { background: var(--sup-3); }
.redondo:disabled { opacity: 0.3; cursor: default; }
.cal-sem, .cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-sem { font-size: 12px; font-weight: 700; color: var(--tinta-3); text-align: center; margin-bottom: 6px; }
.cal-rejilla { row-gap: 6px; }
.dia {
  position: relative; height: clamp(36px, 5.6svh, 46px); display: grid; place-items: center; border: 0; background: none;
  font-size: 15px; font-weight: 600; cursor: pointer; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.dia::before {
  content: ''; position: absolute; inset: 3px; border-radius: 12px; background: var(--sup-2);
  transition: background .2s var(--ease), inset .25s var(--ease), border-radius .25s var(--ease);
}
.dia span { position: relative; }
.dia:hover:not(:disabled)::before { background: var(--sup-3); }
.dia.fuera { visibility: hidden; }
.dia:disabled { cursor: default; color: var(--tinta-3); }
.dia.pasado::before { background: transparent; }
.dia.ocupado::before { background: transparent; border: 1px dashed var(--linea-2); }
.dia.ocupado span { text-decoration: line-through; }
.dia.elegido { color: #FDF7EE; }
.dia.elegido::before { background: var(--burdeos); }
.dia.elegido:hover:not(:disabled)::before { background: var(--burdeos-2); }   /* el hover no puede tapar lo elegido */
/* Días seguidos se funden en una sola pieza: se lee el tramo, no los días sueltos. */
.dia.elegido.une-izq::before { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dia.elegido.une-der::before { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dia.hoy span::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: var(--tinta-3); transform: translateX(-50%); }
.atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { border: 0.5px solid var(--linea); background: var(--sup); padding: 8px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--tinta-2); }
.chip:hover { color: var(--tinta); border-color: var(--linea-2); }
.cuenta-dias { margin-top: 18px; font-size: 15px; color: var(--tinta-2); min-height: 24px; }
.cuenta-dias b { color: var(--tinta); }

/* Paso 3 · cuenta, marca, contenido */
.bloque + .bloque { margin-top: 34px; padding-top: 30px; border-top: 0.5px solid var(--linea); }
.bloque h3, .h3-sep { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.h3-sep { margin-top: 34px; margin-bottom: 14px; }
.acceso { margin-top: 18px; max-width: 460px; }
.acceso .segmento { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.acceso .segmento button { padding: 10px 8px; font-size: 13.5px; }
.acceso-form { display: grid; gap: 14px; margin-top: 16px; }
.o { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--tinta-3); font-size: 13px; }
.o::before, .o::after { content: ''; flex: 1; height: 0.5px; background: var(--linea); }
.acceso .boton { width: 100%; }
.segmento { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 14px; background: var(--sup-2); border: 0.5px solid var(--linea); gap: 2px; }
.segmento button, .segmento label span {
  display: block; border: 0; background: transparent; padding: 9px 14px; border-radius: 11px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--tinta-3); transition: background .25s var(--ease), color .2s;
}
.segmento button[aria-selected="true"], .segmento input:checked + span { background: var(--sup-3); color: var(--tinta); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset; }
.segmento label { position: relative; }
.segmento input { position: absolute; opacity: 0; }
.segmento input:focus-visible + span { outline: 2px solid var(--acento); }
.dentro { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: var(--r); background: var(--sup); border: 0.5px solid var(--linea); max-width: 520px; }
.dentro-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--burdeos) center / cover; font-weight: 800; }
.dentro-txt { display: grid; min-width: 0; flex: 1; }
.dentro-txt b { font-size: 15.5px; }
.dentro-txt small { font-size: 13px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rejilla-2 { display: grid; gap: 14px; }
@media (min-width: 640px) { .rejilla-2 { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: 7px; min-width: 0; border: 0; padding: 0; margin: 0; }
.campo + .campo, .rejilla-2 + .campo, .campo + .rejilla-2, .subida + .rejilla-2, .rejilla-2 + fieldset { margin-top: 14px; }
.campo > span { font-size: 13.5px; font-weight: 700; color: var(--tinta-2); }
.campo legend { font-size: 13.5px; font-weight: 700; color: var(--tinta-2); padding: 0; margin-bottom: 7px; }
.campo i { font-style: normal; color: var(--acento); }
.campo small { font-size: 12.5px; color: var(--tinta-3); }
.campo .segmento { justify-self: start; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=password], input:not([type]), textarea {
  font: inherit; font-size: 16px; color: var(--tinta); width: 100%;
  background: var(--sup); border: 0.5px solid var(--linea-2); border-radius: 14px;
  padding: 13px 15px; outline: none; resize: vertical; transition: border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder, textarea::placeholder { color: rgba(244, 239, 229, 0.38); }
input:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(224, 133, 151, 0.16); background: var(--sup-2); }
input.mal { border-color: var(--acento); }

.subida { margin-bottom: 14px; }
.subida-zona {
  width: 100%; display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 34px 20px; border-radius: var(--r); border: 1px dashed var(--linea-2); background: var(--sup);
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.subida-zona:hover, .subida-zona.encima { border-color: var(--acento); background: var(--sup-2); }
.subida-zona.encima { transform: scale(1.01); }
.subida-zona b { font-size: 16px; }
.subida-zona small { font-size: 13px; color: var(--tinta-3); max-width: 42ch; }
.subida-icono { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--sup-3); margin-bottom: 6px; }
.subida-hecha { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--sup); border: 0.5px solid var(--linea); }
.subida-hecha img { width: 76px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; flex: none; }
.subida-hecha div { display: grid; gap: 3px; }
.subida-hecha small { font-size: 13px; color: var(--tinta-3); }
.subida-hecha small.ojo { color: var(--oro); }
.vista-movil { display: none; }
@media (max-width: 999px) {
  .vista-movil:not(:empty) { display: block; margin-top: 22px; max-width: 360px; }
  .vista-movil .app-tarjeta { border-radius: 16px; }
}

/* Paso 4 · precio */
.tarifa { display: grid; gap: 8px; }
@media (min-width: 640px) { .tarifa { grid-template-columns: repeat(3, 1fr); } }
.tramo { padding: 16px 18px; border-radius: var(--r); background: var(--sup); border: 0.5px solid var(--linea); display: grid; gap: 4px; }
.tramo b { font-size: 15px; }
.tramo small { font-size: 13px; color: var(--tinta-3); }
.tramo .tramo-precio { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tramo.gana { background: var(--burdeos); border-color: transparent; }
.tramo.gana small { color: rgba(253, 247, 238, 0.74); }
.tramo.gana .sello { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: rgba(253,247,238,0.16); }
.factura { margin-top: 18px; border-radius: var(--r); background: var(--sup); border: 0.5px solid var(--linea); padding: 6px 20px; }
.factura-fila { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 15px; color: var(--tinta-2); }
.factura-fila + .factura-fila { border-top: 0.5px solid var(--linea); }
.factura-fila b { color: var(--tinta); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.factura-total { align-items: baseline; }
.factura-total span { color: var(--tinta); font-weight: 700; }
.factura-total b { font-size: 30px; font-weight: 800; letter-spacing: -0.035em; }
.ahorro { color: var(--bien) !important; }
.casilla { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 14.5px; color: var(--tinta-2); cursor: pointer; max-width: 62ch; }
.casilla input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--burdeos-2); }

/* Paso 5 · pago */
.pago-estado { font-size: 15px; color: var(--tinta-2); }
.pago-estado .linea-carga { display: flex; align-items: center; gap: 10px; }
.pago-estado .linea-carga::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linea-2); border-top-color: var(--tinta); animation: gira .7s linear infinite; }
.reloj { margin-top: 12px; font-size: 14px; color: var(--tinta-3); }
.reloj b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.stripe { margin-top: 18px; border-radius: var(--r); overflow: hidden; }
.stripe:not(:empty) { background: #fff; padding: 8px 0; min-height: 200px; }

/* ── Cómo funciona ─────────────────────────────────────────────────── */
.como { padding: 110px 0 40px; }
.como h2 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; max-width: 16ch; }
.linea { list-style: none; counter-reset: l; margin: 34px 0 0; padding: 0; display: grid; gap: 0; }
.linea li {
  counter-increment: l; position: relative; padding: 0 0 28px 58px; font-size: 16px; color: var(--tinta-2); max-width: 64ch;
}
.linea li::before {
  content: counter(l); position: absolute; left: 0; top: -4px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 20px;
  border: 0.5px solid var(--linea-2); color: var(--tinta);
}
.linea li::after { content: ''; position: absolute; left: 18px; top: 36px; bottom: 2px; width: 0.5px; background: var(--linea-2); }
.linea li:last-child::after { display: none; }
.linea b { color: var(--tinta); display: block; font-size: 17px; margin-bottom: 2px; }
.preguntas { margin-top: 56px; border-top: 0.5px solid var(--linea); }
.preguntas details { border-bottom: 0.5px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative;
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-size: 24px; font-weight: 400; color: var(--tinta-3); transition: transform .3s var(--ease); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 22px; color: var(--tinta-2); font-size: 15.5px; max-width: 64ch; }

.pie {
  max-width: 1240px; margin: 70px auto 0; padding: 28px 20px max(28px, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; color: var(--tinta-3); border-top: 0.5px solid var(--linea);
}
.pie a { color: var(--tinta-2); text-decoration: none; }
.pie a:hover { color: var(--tinta); }
@media (min-width: 1000px) { .pie { padding-left: 40px; padding-right: 40px; } }

/* ── Panel «Mis campañas» ──────────────────────────────────────────── */
.panel { max-width: 960px; margin: 0 auto; padding: 64px 20px 0; }
.panel-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 32px; }
.panel h1 { font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.panel h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.panel-sub { margin-top: 10px; color: var(--tinta-2); }
.pestanas { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 0.5px solid var(--linea); }
.pestanas button { border: 0; background: none; padding: 12px 14px; font-size: 14.5px; font-weight: 700; color: var(--tinta-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -0.5px; }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-color: var(--tinta); }
.campana { border-radius: 22px; background: var(--sup); border: 0.5px solid var(--linea); overflow: hidden; }
.campana + .campana { margin-top: 14px; }
.campana-cab { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 16px; align-items: center; }
@media (min-width: 640px) { .campana-cab { grid-template-columns: 180px 1fr auto; } }
.campana-cab .app-tarjeta { border-radius: 14px; }
.campana-cab .app-titulo { font-size: 10px; }
.campana-cab .app-texto { left: 11px; bottom: 8px; }
.campana-cab .app-puntos { display: none; }
.campana-info { display: grid; gap: 4px; min-width: 0; }
.campana-info b { font-size: 18px; letter-spacing: -0.02em; }
.campana-info small { color: var(--tinta-2); font-size: 14px; }
.estado { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--sup-3); color: var(--tinta-2); }
.estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.vivo { color: var(--bien); background: rgba(140,197,160,0.12); }
.estado.prog { color: var(--oro); background: rgba(216,180,104,0.12); }
.estado.malo { color: var(--acento); background: rgba(224,133,151,0.12); }
.campana-importe { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; grid-column: 1 / -1; }
@media (min-width: 640px) { .campana-importe { grid-column: auto; text-align: right; } }
.metricas { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 0.5px solid var(--linea); }
@media (min-width: 640px) { .metricas { grid-template-columns: repeat(6, 1fr); } }
.metrica { padding: 16px; display: grid; gap: 2px; border-right: 0.5px solid var(--linea); border-bottom: 0.5px solid var(--linea); }
.metrica b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.metrica span { font-size: 12.5px; color: var(--tinta-3); }
.tabla-dias { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabla-envoltura { overflow-x: auto; }
.tabla-dias th, .tabla-dias td { padding: 10px 16px; text-align: right; white-space: nowrap; border-bottom: 0.5px solid var(--linea); }
.tabla-dias th:first-child, .tabla-dias td:first-child { text-align: left; }
.tabla-dias th { font-size: 12px; font-weight: 700; color: var(--tinta-3); }
.tabla-dias td { color: var(--tinta-2); }
.tabla-dias td:first-child { color: var(--tinta); font-weight: 600; }
.campana-nota { padding: 14px 16px; font-size: 13.5px; color: var(--tinta-3); }
.campana-acciones { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 16px; }
.vacio-panel { padding: 56px 24px; text-align: center; border-radius: 22px; border: 1px dashed var(--linea-2); }
.vacio-panel p { color: var(--tinta-2); margin: 8px auto 22px; max-width: 42ch; }
.recien { margin-bottom: 22px; padding: 18px 20px; border-radius: var(--r); background: var(--sup-2); border: 0.5px solid var(--linea); }
.recien b { display: block; font-size: 17px; margin-bottom: 4px; }
.recien p { color: var(--tinta-2); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .15s !important; transition-delay: 0s !important; }
  .paso:not(.actual) .paso-dentro > * { transform: none; }
}

/* ── Landing (sin los pasos: viven en /crear.html) ─────────────────── */
.landing { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.landing .como { padding-top: 40px; }
.como-cta { display: flex; justify-content: center; margin-top: 56px; }

/* ── /crear.html · una pantalla por paso ───────────────────────────── */
.barra-asistente { display: grid; grid-template-columns: 44px 1fr auto; padding: 6px 14px 6px 6px; }
.barra-asistente .logo { justify-self: center; }
.cerrar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sup-2); color: var(--tinta-2); transition: background .2s, color .2s;
}
.cerrar:hover { background: var(--sup-3); color: var(--tinta); }
.barra-cuenta { font-size: 14px; font-weight: 700; color: var(--tinta-2); text-decoration: none; white-space: nowrap; }
.barra-cuenta:hover { color: var(--tinta); }

.escena-asistente { min-height: calc(100svh - 80px); }
.asistente .flujo { padding-top: 18px; }
.asistente .rail { top: 70px; margin-bottom: 8px; }
.asistente .rail li { font-size: 12px; }
@media (max-width: 520px) { .asistente .rail li { font-size: 0; } .asistente .rail li.actual { font-size: 12px; white-space: nowrap; } }
.asistente .rail li.actual::before { background: var(--burdeos-2); }

.asistente .paso { border: 0; }
.asistente .paso:not(.actual) { display: none; }
.asistente .paso-cuerpo { display: block; }
.asistente .paso-dentro { overflow: visible; }
.asistente .paso-dentro > * { transition: none; opacity: 1; transform: none; }
.asistente .cambiar, .asistente .paso-resumen { display: none !important; }
.asistente .paso-cab { grid-template-columns: 1fr; gap: 10px; padding: 14px 0 12px; }
/* Sin «Paso X de 5»: el progreso ya lo dice la barra de arriba. */
.asistente .paso-num { display: none; }
.asistente .paso h2 { font-size: clamp(28px, min(5.6vw, 5.4svh), 40px); line-height: 1.02; letter-spacing: -0.04em; color: var(--tinta); }

/* Cada pantalla entra deslizando hacia donde se va: adelante desde la derecha, atrás desde la izquierda. */
.asistente .paso.actual { animation: pantalla-sig .55s var(--ease) both; }
.asistente .flujo.atras .paso.actual { animation-name: pantalla-ant; }
@keyframes pantalla-sig { from { opacity: 0; transform: translateX(36px); filter: blur(6px); } }
@keyframes pantalla-ant { from { opacity: 0; transform: translateX(-36px); filter: blur(6px); } }

.asistente .paso-acciones { justify-content: space-between; }
.asistente .paso-acciones .boton:last-child { margin-left: auto; }
.asistente .paso.actual .paso-dentro { padding-bottom: 40px; }
/* Móvil: la barra de «Atrás / Siguiente» se queda pegada abajo, al alcance del pulgar. */
@media (max-width: 999px) {
  .asistente .paso-acciones {
    position: sticky; bottom: 0; z-index: 6; margin: 28px -20px 0; padding: 14px 20px max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, #000 70%, rgba(0, 0, 0, 0));
  }
  .asistente .paso-acciones .boton { min-height: 50px; }
  .asistente .paso-acciones .boton:not(.boton-borde) { flex: 1; }
}
@media (min-width: 1000px) {
  .escena-asistente { padding-top: 12px; }
  .asistente .telefono-col { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .asistente .paso.actual { animation: none; }
}

/* ── Ajustes de tamaño (26 sep 2026): cada pantalla cabe en un portátil ──
   Referencia: 1280 × 660 útiles (portátil con zoom del 150 %). */
.dia::before { inset: 2px; border-radius: 10px; }
.cal-rejilla { row-gap: 4px; }
.cal-cab { margin-bottom: 8px; }
.redondo { width: 36px; height: 36px; }
.asistente .flujo { padding-top: 8px; }
.asistente .rail { top: 68px; padding-top: 6px; padding-bottom: 8px; margin-bottom: 0; }
.asistente .sub { font-size: 14.5px; }
.asistente .atajos { margin-top: 10px; }
.asistente .cuenta-dias { margin-top: 10px; }
.asistente .servicio-marco { padding: 16px 18px; }
.asistente .servicio-cab b { font-size: 16.5px; }
.asistente .servicio-txt { font-size: 14px; }
.asistente .bloque + .bloque { margin-top: 24px; padding-top: 22px; }
.asistente .subida-zona { padding: 22px 18px; }
.asistente .paso.actual .paso-dentro { padding-bottom: 16px; }
/* Los botones de «Atrás / Siguiente» siempre a la vista, también en escritorio. */
.asistente .paso-acciones {
  position: sticky; bottom: 0; z-index: 6; margin-top: 20px; padding: 14px 0 max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, #000 72%, rgba(0, 0, 0, 0));
}
.boton { min-height: 48px; padding: 0 24px; font-size: 15.5px; }
.boton-grande { min-height: 54px; padding: 0 32px; font-size: 16.5px; }
.vista-botones button { padding: 6px 13px; }
@media (min-width: 1000px) {
  .portada-dentro { gap: 24px; }
  .portada .hechos { margin-top: 20px; }
  .portada .hero-acciones { margin-top: 22px; }
  .escena { column-gap: 56px; }
}
/* Pantallas bajas: se aprieta aún más. */
@media (max-height: 720px) and (min-width: 1000px) {
  .portada .hechos li { padding: 6px 12px; font-size: 13px; }
  .medianoche { padding: 8px 12px 10px; }
  .mn-hora { font-size: 24px; }
}
@media (max-width: 999px) {
  .telefono-demo { --tw: min(236px, 62vw); }
  .medianoche { left: auto; right: max(8px, calc(50% - 236px / 2 - 34px)); top: -10px; padding: 8px 12px 10px; }
  .mn-hora { font-size: 24px; }
  .portada .hero-acciones { margin-top: 22px; }
  .portada-dentro { gap: 26px; }
}

/* ── El progreso VIVE en la barra de arriba (una sola pieza: ✕ · pasos · cuenta) ── */
.barra-asistente { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 7px 18px 7px 7px; }
.barra-asistente .rail {
  position: static; background: none; margin: 0; padding: 0 4px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-self: center;
}
.barra-asistente .rail li { gap: 6px; font-size: 11.5px; line-height: 1; }
.barra-asistente .rail li::before { height: 3px; }
.barra-asistente .rail li.actual { color: var(--tinta); }
.asistente .flujo { padding-top: 20px; }
@media (max-width: 640px) {
  /* Móvil: solo las rayitas; el nombre del paso ya es el título grande de la pantalla. */
  .barra-asistente .rail li, .barra-asistente .rail li.actual { font-size: 0; gap: 0; }
  .barra-asistente { gap: 10px; }
}
.asistente .paso-acciones { margin-left: 0; margin-right: 0; }
.app-busca { white-space: nowrap; overflow: hidden; }
/* Barra del asistente: solo el progreso, a lo ancho. */
.barra-asistente { grid-template-columns: minmax(0, 1fr); padding: 14px 22px 12px; }

/* ── Login ─────────────────────────────────────────────────────────── */
.acceso {
  position: relative; max-width: 420px; margin: 0 auto; padding: 34px 28px 26px;
  border-radius: 28px; background: linear-gradient(180deg, #141210, #0c0b0a);
  border: 0.5px solid var(--linea-2); text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 90px -40px rgba(122, 29, 40, 0.6), 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  animation: acceso-entra .6s var(--ease) both;
}
@keyframes acceso-entra { from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(6px); } }
.acceso-sello {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 30px; color: #FDF7EE;
  background: linear-gradient(160deg, var(--burdeos-2), var(--burdeos));
  box-shadow: 0 12px 26px -12px rgba(122, 29, 40, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.acceso-titulo { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.acceso-sub { margin: 8px auto 0; font-size: 14.5px; color: var(--tinta-2); max-width: 32ch; }
.acceso-modos {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 18px; padding: 4px;
  border-radius: 999px; background: #080706; border: 0.5px solid var(--linea);
}
/* La píldora burdeos que se desliza entre «Entrar» y «Crear cuenta». */
.acceso-modos::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: var(--burdeos); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform .45s var(--cajon);
}
.acceso-modos[data-activo="crear"]::before { transform: translateX(100%); }
.acceso-modos button {
  position: relative; border: 0; background: none; padding: 10px 0; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--tinta-3); transition: color .3s;
}
.acceso-modos button[aria-selected="true"] { color: #FDF7EE; }
.acceso-form { display: grid; gap: 10px; margin-top: 0; }
.acceso-campo { position: relative; display: block; }
.acceso-icono { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; display: grid; transition: color .2s; }
.acceso-campo input { padding: 15px 46px 15px 46px; border-radius: 16px; background: #080706; }
.acceso-campo:focus-within .acceso-icono { color: var(--acento); }
.acceso-ver {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; border: 0; background: none; color: var(--tinta-3); cursor: pointer;
}
.acceso-ver:hover, .acceso-ver[aria-pressed="true"] { color: var(--tinta); background: var(--sup-3); }
.acceso .aviso { margin-top: 2px; text-align: left; }
.acceso-boton { width: 100%; margin-top: 6px; min-height: 52px; }
.acceso .o { margin: 18px 0 14px; }
.acceso-alt {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 12px 16px; border-radius: 16px; background: transparent; border: 0.5px solid var(--linea-2);
  color: var(--tinta-2); transition: background .2s, border-color .2s, color .2s;
}
.acceso-alt:hover { background: var(--sup-2); color: var(--tinta); border-color: var(--linea-2); }
.acceso-alt:disabled { opacity: 0.5; }
.acceso-alt span { display: grid; gap: 1px; }
.acceso-alt b { font-size: 14.5px; color: var(--tinta); }
.acceso-alt small { font-size: 12.5px; color: var(--tinta-3); }
.acceso-alt + .acceso-alt { margin-top: 8px; }
.acceso-legal { margin-top: 18px; font-size: 12px; color: var(--tinta-3); }
.acceso-legal a { color: var(--tinta-2); }

/* ── Paso 3 sin sesión: solo el login, centrado y sin el iPhone ─────── */
.acciones-login { display: none; }
body.sin-sesion[data-paso="3"] .telefono-col { display: none; }
body.sin-sesion[data-paso="3"] .escena-asistente { grid-template-columns: minmax(0, 1fr); }
body.sin-sesion[data-paso="3"] #paso-3 .paso-cab,
body.sin-sesion[data-paso="3"] .bloque-cuenta > h3 { display: none; }
body.sin-sesion[data-paso="3"] #paso-3 .paso-dentro { padding-top: 12px; }
body.sin-sesion[data-paso="3"] .acciones-login { display: flex; justify-content: center; max-width: 420px; margin: 8px auto 0; background: none; position: static; }
body.sin-sesion[data-paso="3"] .bloque-cuenta { padding-top: 4px; }
/* Con sesión: la tarjeta de «Publicarás como». */
.bloque-cuenta > h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 0; }
.bloque-cuenta .dentro { margin-top: 10px; }
.acceso-campo input { padding-right: 16px; }
.acceso-campo:has(.acceso-ver) input { padding-right: 50px; }
@media (max-width: 520px) { .acceso { padding: 28px 18px 22px; border-radius: 24px; } .acceso-titulo { font-size: 22px; } }

/* ── Login en horizontal (26 sep 2026): cabe en UNA pantalla ─────────
   Ancho: panel burdeos con el título y la tarjeta «Patrocinado» a la izquierda,
   el formulario a la derecha. Móvil: vertical y compacto, sin la tarjeta. */
.acceso { padding: 24px 22px 18px; }
.acceso-sello { width: 44px; height: 44px; font-size: 26px; border-radius: 14px; margin-bottom: 14px; }
.acceso-titulo { font-size: 22px; }
.acceso-muestra { display: none; }
.acceso-modos { margin: 18px 0 14px; }
.acceso-campo input { padding-top: 13px; padding-bottom: 13px; }
.acceso-boton { min-height: 50px; margin-top: 4px; }
.acceso .o { margin: 14px 0 12px; }
.acceso-alt { padding: 10px 14px; }
.acceso-pie { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.acceso-pie .acceso-legal { margin: 0; }
.acceso-atras { border: 0; background: none; padding: 6px 2px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--tinta-2); }
.acceso-atras:hover { color: var(--tinta); }
@media (min-width: 860px) {
  .acceso {
    display: grid; grid-template-columns: 0.9fr 1.1fr; max-width: 860px; padding: 0; overflow: hidden; text-align: left;
  }
  .acceso-lado {
    position: relative; display: flex; flex-direction: column; padding: 32px 30px 30px;
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
      linear-gradient(160deg, #8e2533 0%, #5e141e 100%);
  }
  .acceso-lado .acceso-sello { margin: 0 0 18px; background: rgba(253, 247, 238, 0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
  .acceso-lado .acceso-titulo { font-size: clamp(24px, 2.4vw, 30px); color: #FDF7EE; max-width: 12ch; }
  .acceso-muestra { display: block; margin-top: auto; padding-top: 22px; }
  .acceso-muestra .app-tarjeta { border-radius: 16px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7); transform: rotate(-2deg); }
  .acceso-cuerpo { padding: 30px 30px 22px; align-self: center; }
  .acceso-cuerpo .acceso-modos { margin-top: 0; }
  .acceso-pie { justify-content: space-between; }
}
/* Panel burdeos del login: sin sello, título y tarjeta centrados en su hueco. */
@media (min-width: 860px) {
  .acceso-lado { justify-content: center; align-items: center; text-align: center; gap: 26px; padding: 36px 32px; }
  .acceso-lado .acceso-titulo { max-width: 13ch; margin: 0 auto; }
  .acceso-muestra { margin-top: 0; padding-top: 0; width: 100%; max-width: 330px; }
  .acceso-muestra .app-tarjeta { transform: none; text-align: left; }
}
.telefono-demo, .acceso-muestra .app-tarjeta { text-align: left; }

/* Barra de progreso: los pasos a los que se puede saltar, con puntero y un leve realce. */
.barra-asistente .rail li { cursor: default; }
.barra-asistente .rail li.se-puede { cursor: pointer; }
.barra-asistente .rail li.se-puede:hover { color: var(--tinta); }
.barra-asistente .rail li:not(.hecho):not(.actual)::before { background: var(--linea); }

/* ── El login, lo primero al entrar en /crear.html (26 sep 2026) ────────
   Sin sesión: solo la tarjeta, centrada en la pantalla; ni barra de pasos ni teléfono. */
.entrada { min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
body.sin-sesion .barra-asistente, body.sin-sesion .escena-asistente { display: none; }
body.cargando-sesion .entrada, body.cargando-sesion .barra-asistente, body.cargando-sesion .escena-asistente { visibility: hidden; }
/* El login de la entrada, CENTRADO en la pantalla y a su ancho completo (sin esto el
   contenedor se encogía a su contenido y la tarjeta se quedaba pegada a la izquierda). */
.entrada { justify-items: stretch; align-content: center; }
.entrada #acceso { width: 100%; max-width: 860px; margin: 0 auto; }
.entrada { width: 100%; max-width: none; margin: 0; box-sizing: border-box; }

/* ── Portada, 2 oct 2026: texto de PLATAFORMA (suyo: «más profesional, que se entienda
   como Meta Ads, Apple Ads o Pinterest Ads»; habrá más tipos de campaña que la del día).
   Solo sans, un titular que dice qué es y para quién, una línea de apoyo y dos acciones.
   Fuera las píldoras de «1 marca al día · 00:00 · desde 2,63 €», la serif cursiva y la
   entrada palabra a palabra. */
.titular {
  font-size: clamp(38px, min(9vw, 6.6svh), 64px); font-weight: 700; line-height: 1.04;
  letter-spacing: -0.035em; max-width: 15ch;
}
.portada-sub { margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--tinta-2); max-width: 44ch; }
.portada .hero-acciones { margin-top: 30px; gap: 28px; }
.boton-grande::after { content: none; }
.garantias {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: 13.5px; font-weight: 500; color: var(--tinta-3);
}
.garantias li { display: inline-flex; align-items: center; gap: 7px; }
.garantias li::before {
  content: ""; width: 14px; height: 14px; flex: none; background: var(--tinta-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 1000px) {
  .titular { font-size: clamp(44px, min(4.6vw, 8svh), 68px); max-width: 13ch; }
  .portada-sub { font-size: 18px; margin-top: 22px; }
  .portada .hero-acciones { margin-top: 34px; }
  .garantias { justify-content: flex-start; margin-top: 34px; }
}
@media (max-width: 999px) {
  .portada-sub { font-size: 16px; margin-top: 16px; }
  .portada .hero-acciones { margin-top: 26px; }
  .garantias { width: 100%; margin-top: 24px; gap: 6px 16px; font-size: 13px; }
}

/* ── Formatos (2 oct 2026) ──────────────────────────────────────────
   Una FILA por formato, no una rejilla de tarjetas: hoy hay uno y el siguiente
   será otra fila igual. La vista es un recorte de la pantalla real de Buscar. */
.formatos { max-width: 1080px; margin: 0 auto; padding: 96px 20px 24px; }
.formatos-cab h2 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.formatos-cab p { margin-top: 10px; font-size: 17px; color: var(--tinta-2); }
.formato {
  margin-top: 36px; display: grid; gap: 28px;
  padding: 20px; border-radius: 28px; background: var(--sup); border: 0.5px solid var(--linea);
}
.formato-vista {
  position: relative; overflow: hidden; border-radius: 20px; height: 330px;
  background: radial-gradient(90% 80% at 50% 110%, rgba(122, 29, 40, 0.45), transparent 70%), #070606;
  display: grid; justify-items: center;
}
/* Media pantalla de la app, cortada por abajo: lo que importa es el sitio de la tarjeta. */
.formato-pantalla {
  width: min(300px, 86%); margin-top: 26px; padding: 16px 12px 0;
  border-radius: 30px 30px 0 0; background: #000;
  border: 0.5px solid rgba(255, 255, 255, 0.10); border-bottom: 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.9);
}
.formato-pantalla .app-tarjeta { box-shadow: 0 0 0 1.5px rgba(216, 180, 104, 0.55), 0 18px 30px -18px rgba(0, 0, 0, 0.8); }
.formato-txt { display: grid; justify-items: start; align-content: center; padding: 0 4px 6px; }
.formato-estado {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 99px; color: var(--bien); background: rgba(140, 197, 160, 0.12);
}
.formato-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.formato h3 { margin-top: 14px; font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.formato-desc { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--tinta-2); max-width: 46ch; }
.formato-datos { margin: 22px 0 26px; padding: 0; display: grid; gap: 0; width: 100%; border-top: 0.5px solid var(--linea); }
.formato-datos div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 11px 0; border-bottom: 0.5px solid var(--linea); font-size: 14.5px; }
.formato-datos dt { color: var(--tinta-3); font-weight: 600; }
.formato-datos dd { margin: 0; color: var(--tinta); font-weight: 600; }
.formatos-pronto { margin-top: 22px; font-size: 14.5px; color: var(--tinta-3); text-align: center; }
.formatos-pronto a { color: var(--tinta-2); font-weight: 700; text-underline-offset: 3px; text-decoration-color: var(--linea-2); }
.formatos-pronto a:hover { color: var(--tinta); }
@media (min-width: 860px) {
  .formatos { padding: 120px 40px 24px; }
  .formato { grid-template-columns: 1fr 1fr; gap: 48px; padding: 24px 48px 24px 24px; }
  .formato-vista { height: 420px; }
  .formato-pantalla { margin-top: 44px; width: 320px; }
  .formatos-pronto { text-align: left; }
}

/* ── Paso 3 por grupos, en el orden de la app (2 oct 2026) ─────────── */
.h3-grupo { display: flex; align-items: center; gap: 10px; margin-top: 26px; margin-bottom: 14px; }
.h3-grupo span {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; background: var(--sup-3); color: var(--tinta-2);
}
.h3-grupo.h3-sep { margin-top: 38px; }
#formMarca > .sub { margin-bottom: 4px; }
#formMarca .campo + .subida, #formMarca .campo + .campo { margin-top: 16px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bloque-gestion { margin-top: 40px; padding-top: 4px; border-top: 0.5px solid var(--linea); }
.bloque-gestion .h3-sep { margin-top: 26px; font-size: 15px; color: var(--tinta-2); }
.dentro-linea { margin-top: 14px; }
.dentro-linea p { font-size: 13.5px; line-height: 1.55; color: var(--tinta-3); max-width: 60ch; }
.dentro-linea b { color: var(--tinta-2); font-weight: 600; word-break: break-all; }
.dentro-linea .enlace-txt { font-size: 13.5px; margin-left: 4px; }

/* ── Logo de la marca (foto de perfil) ──────────────────────────────── */
.campo-logo > span { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.logo-fila { display: flex; align-items: center; gap: 16px; }
.logo-circulo {
  width: 72px; height: 72px; border-radius: 50%; flex: none; padding: 0; overflow: hidden; cursor: pointer;
  display: grid; place-items: center; color: var(--tinta-2);
  background: var(--sup-2); border: 1px dashed var(--linea-2); transition: border-color .2s, background .2s;
}
.logo-circulo:hover { border-color: var(--tinta-3); background: var(--sup-3); }
.logo-circulo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-circulo:has(img:not([hidden])) { border-style: solid; border-color: var(--linea); }
.logo-txt { display: grid; gap: 6px; justify-items: start; }
.logo-txt small { font-size: 13px; color: var(--tinta-3); line-height: 1.45; max-width: 46ch; }
#formMarca .campo-logo + .campo { margin-top: 18px; }
.app-avatar { overflow: hidden; }
.app-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Paso 5 = PANTALLA DE PAGO (2 oct 2026, suyo: «una pantalla completa para pagar, que quepa bien»).
   Fuera el teléfono (ya no hay nada que previsualizar), el formulario de Stripe a todo el ancho y
   centrado, y «Atrás» sin fijar: la barra fija con degradado tapaba el final del formulario. */
body[data-paso="5"] .telefono-col { display: none; }
body[data-paso="5"] .escena-asistente { grid-template-columns: minmax(0, 1fr); max-width: 1080px; }
body[data-paso="5"] #paso-5 .paso-acciones { position: static; background: none; padding: 0; margin-top: 20px; }
.pago-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.pago-cab .pago-estado { font-size: 16.5px; }
.pago-cab .pago-estado b { color: var(--tinta); }
.pago-cab .reloj {
  margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px;
  font-size: 13.5px; color: var(--tinta-2); background: var(--sup-2); border: 0.5px solid var(--linea);
}
.reloj-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--bien); box-shadow: 0 0 0 3px rgba(140, 197, 160, 0.18); }
.stripe { margin-top: 22px; }
/* Sin marco: Stripe ya pinta su pantalla en negro (color de marca en Stripe → Imagen de marca)
   y se funde con la página. Un filo finísimo separa el formulario del resto. */
.stripe:not(:empty) {
  background: #000; padding: 8px 0; min-height: 420px; border-radius: 24px;
  border: 0.5px solid var(--linea);
}
@media (max-width: 640px) {
  .stripe:not(:empty) { border: 0; border-radius: 0; padding: 0; margin-left: -20px; margin-right: -20px; }
  .pago-cab .pago-estado { font-size: 15.5px; }
}

/* Pago, 2ª (suyo: «que quepa todo en pantalla y elimina los pasos de arriba»): sin la barra de
   pasos, cabecera en UNA fila (Pago · lo que pagas · reloj) y el formulario empieza arriba. */
body[data-paso="5"] .barra-asistente { display: none; }
body[data-paso="5"] .asistente .flujo, body[data-paso="5"] .flujo { padding-top: 0; }
body[data-paso="5"] #paso-5 .paso-cab { display: none; }   /* Stripe ya enseña qué pagas y cuánto */
body[data-paso="5"] #paso-5 .paso-dentro { padding-top: 18px; }
body[data-paso="5"] #paso-5 .stripe { margin-top: 14px; }
body[data-paso="5"] #paso-5 .letra { margin-top: 12px; }

/* ── Marca fundadora (2 oct 2026) ───────────────────────────────────── */
body:not(.es-fundadora) [data-solo="fundadora"], body.es-fundadora [data-solo="dia"] { display: none !important; }
body.es-fundadora .telefono-col { display: none; }
body.es-fundadora .escena-asistente { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
body.es-fundadora #rail li[data-p="2"] { display: none; }
body.es-fundadora .barra-asistente .rail { grid-template-columns: repeat(4, 1fr); }
#tarifa:empty { display: none; }
.servicio-fundadora .servicio-marco { border-color: rgba(216, 180, 104, 0.35); background:
  radial-gradient(120% 140% at 100% 0%, rgba(216, 180, 104, 0.10), transparent 55%), var(--sup); }
.servicio-fundadora .servicio-cab b { color: #F1DDAE; }
.puestos { font-style: normal; color: var(--oro) !important; font-variant-numeric: tabular-nums; }
.puestos.ultimos { color: #F0A35B !important; }
.puestos.agotado { color: var(--tinta-3) !important; }

/* ── Fundadoras: los 10 puestos ─────────────────────────────────────── */
.formato-fundadora { margin-top: 18px; border-color: rgba(216, 180, 104, 0.28);
  background: radial-gradient(90% 120% at 0% 0%, rgba(216, 180, 104, 0.08), transparent 60%), var(--sup); }
.fundadora-vista { display: grid; place-items: center; padding: 26px;
  background: radial-gradient(80% 80% at 50% 50%, rgba(216, 180, 104, 0.10), transparent 70%), #070606; }
.estado-fundadora { color: var(--oro); background: rgba(216, 180, 104, 0.12); }
.estado-fundadora.ultimos { color: #F0A35B; background: rgba(240, 163, 91, 0.12); }
.formato-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.puestos-rejilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 12px; width: 100%; max-width: 420px; }
.puesto { display: grid; justify-items: center; gap: 8px; text-align: center; text-decoration: none; min-width: 0; }
.puesto b { font-size: 11.5px; font-weight: 600; color: var(--tinta-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puesto-logo { width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.puesto.libre .puesto-logo { border: 1px dashed rgba(216, 180, 104, 0.35); color: rgba(216, 180, 104, 0.6); }
.puesto.libre b { color: var(--tinta-3); font-weight: 500; }
.puesto.ocupado .puesto-logo { background: #fff; color: #120f0d; box-shadow: 0 0 0 1.5px rgba(216, 180, 104, 0.7), 0 10px 24px -12px rgba(0, 0, 0, 0.9); }
.puesto.ocupado .puesto-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.puesto.ocupado:hover b { color: var(--tinta); }
@media (max-width: 520px) { .puestos-rejilla { gap: 14px 8px; } .puesto b { font-size: 10.5px; } }

/* Página /ads/fundadoras */
.fund-pagina { max-width: 980px; margin: 0 auto; padding: 80px 20px 40px; text-align: center; }
.fund-pagina h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.fund-pagina .fund-sub { margin: 16px auto 0; max-width: 46ch; font-size: 17px; color: var(--tinta-2); }
.fund-pagina .puestos-rejilla { max-width: 760px; margin: 56px auto 0; gap: 34px 18px; }
.fund-pagina .puesto-logo { max-width: 108px; font-size: 16px; }
.fund-pagina .puesto b { font-size: 14px; }
.fund-cta { margin-top: 56px; display: grid; justify-items: center; gap: 12px; }
.fund-cta small { color: var(--tinta-3); font-size: 14px; }
@media (max-width: 640px) { .fund-pagina .puestos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; } }

.campana-fundadora { border-color: rgba(216, 180, 104, 0.3); }
.campana-fundadora .campana-cab { grid-template-columns: 72px 1fr; }
@media (min-width: 640px) { .campana-fundadora .campana-cab { grid-template-columns: 88px 1fr auto; } }
.fundadora-logo { max-width: none; width: 100%; background: #fff; color: #120f0d; box-shadow: 0 0 0 1.5px rgba(216, 180, 104, 0.7); }
.fundadora-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campana-info a { color: var(--tinta-2); }