/* ============================================================
   Splash + selección de servicio
   ============================================================ */
/* Preloader animado: el logo se dibuja pieza por pieza, sobre el mundo rosado de dos mundos */
.splash-body, html:has(body.splash-body) { background: #FBE6ED; }

.splash {
  --tm-pink-light: #FFA8DC; --tm-pink: #FF56B8; --tm-magenta: #FF1E9C;
  --tm-ink: #121212; --tm-mute: #5C5C5C;
  background: #FBE6ED;
  background: -webkit-linear-gradient(bottom, #EFB9CA, #FBE6ED 50%, #FFFFFF);
  background: linear-gradient(to top, #EFB9CA, #FBE6ED 50%, #FFFFFF);
  color: var(--tm-ink);
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}
/* MOBILE: trama de óvalos tenue (cover). DESKTOP: puntos (override más abajo). */
.splash::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../img/trama-01.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  mix-blend-mode: multiply; opacity: .5;
  -webkit-mask-image: radial-gradient(120% 82% at 50% 42%, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%);
  mask-image: radial-gradient(120% 82% at 50% 42%, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%);
}
@media (min-width: 768px) {
  .splash::before {
    background-image: radial-gradient(circle at center, rgba(19,18,17,.09) 0 1.4px, transparent 2px);
    background-size: 24px 24px; background-repeat: repeat;
    mix-blend-mode: normal; opacity: 1;
  }
}

/* Logo del preloader: piezas del logo horizontal posicionadas en % de su caja original
   (611×260), así conserva las proporciones exactas a cualquier ancho. */
.tm-logo { position: relative; z-index: 2; width: min(84vw, 560px); aspect-ratio: 611 / 260; }
.tm-logo img { position: absolute; display: block; max-width: none; }
.tm-l-pin  { left: 0; top: 0; width: 30.44%; height: 100%; transform-origin: 50% 100%;
             animation: tm-pin-drop .8s cubic-bezier(.3,1.5,.55,1) .1s both, tm-bob 3.6s ease-in-out 1.6s infinite; }
.tm-l-word { left: 35.68%; top: 35.77%; width: 64.48%; height: 14.23%;
             animation: tm-wipe .75s cubic-bezier(.65,0,.35,1) .6s both; }
.tm-l-tag  { left: 45.01%; top: 54.23%; width: 45.5%; height: 9.62%;
             animation: tm-rise .5s ease 1.2s both; }
.tm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* Keyframes */
@keyframes tm-pin-drop { from { opacity: 0; transform: translateY(-58px) scale(.5); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tm-wipe { from { opacity: .2; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes tm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tm-bob { 0%, 100% { transform: translateY(0); } 46% { transform: translateY(-5px); } 70% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .tm-l-pin, .tm-l-word, .tm-l-tag { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---------- Selección de servicio — boutique monocromática ---------- */
.choose-body, html:has(body.choose-body) { background: #0a0a0a; }

.choose-screen {
  --fdisplay: 'Roboto', system-ui, sans-serif;
  --fui: 'Roboto', system-ui, sans-serif;
  position: relative; overflow: hidden; background: #0a0a0a; color: #fff;
}
.choose-screen .topbar { background: transparent; border-bottom: none; position: relative; z-index: 3; }
.choose-screen .topbar__logo { height: 46px; }
/* Logo Tm (tu manicure): lockup horizontal en el topbar del choose */
.choose-screen .topbar__logo--tm { height: 38px; width: auto; object-fit: contain; }
.choose-screen .topbar__user { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.78); }

.choose-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, #1c1c1c 0%, #0a0a0a 60%); }
.choose-bg::before { content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.035) 0 15px, transparent 16px);
  background-size: 40px 40px; opacity: .7; }

/* Capa de "titileo": cada cierto tiempo una bolita se ilumina en blanco */
.choose-twinkle { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tw-dot { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #fff; opacity: 0; will-change: opacity, transform; }
.tw-dot.tw-on { animation: twinkle 1.8s ease forwards; }
@keyframes twinkle {
  0% { opacity: 0; transform: scale(.5); }
  22% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.choose { position: relative; z-index: 2; flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: safe center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: .25rem 1rem calc(4rem + var(--safe-bottom)); }

.choose__intro { text-align: center; padding: .5rem 0 1.6rem; animation: introIn .9s cubic-bezier(.2,.8,.2,1) both; }
.choose__eyebrow { display: block; font-family: var(--fui); font-weight: 500; font-size: .6rem;
  letter-spacing: .42em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .7rem; }
.choose__title { font-family: var(--fdisplay); font-weight: 300; font-size: 2.2rem; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.choose__sub-title { display: block; font-family: var(--fui); font-weight: 300; font-size: .8rem;
  color: rgba(255,255,255,.45); margin-top: .5rem; }

/* Móvil: dos cards con IGUAL peso, separadas por un gap; espacio arriba para el pop-out */
.choose__grid { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  height: auto; margin-top: .4rem;
  border-radius: 0; overflow: visible; box-shadow: none; }

.choose__card { position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  justify-content: center; min-height: 270px; padding: 1.6rem .9rem 1.4rem; text-decoration: none;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  animation: cardIn .8s ease both; }
.choose__card:nth-of-type(1) { animation-delay: .12s; }
.choose__card:nth-of-type(2) { animation-delay: .24s; }
.choose__card:active { transform: scale(.99); }

/* Mismo tratamiento oscuro para ambas: la diferencia la marca el emblema, no la caja */
.choose__card--presencial,
.choose__card--domicilio { color: #fff; background: linear-gradient(160deg, #1e1e1e 0%, #0b0b0b 100%); }

.choose__index { position: absolute; top: .7rem; right: 1.1rem; z-index: 2;
  font-family: var(--fdisplay); font-style: italic; font-size: 1.55rem; }
.choose__card--presencial .choose__index { color: rgba(255,255,255,.82); }
.choose__card--domicilio  .choose__index { color: rgba(0,0,0,.55); }

.choose__ring { position: absolute; width: 230px; height: 230px; border-radius: 50%;
  border: 1px solid currentColor; right: -80px; bottom: -88px; z-index: 1; opacity: .12; }

/* Ícono grande, centrado en el espacio libre del medio */
.choose__icon { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  width: 50%; max-width: 92px; height: auto; aspect-ratio: 1; z-index: 2; }
.choose__card--presencial .choose__icon { color: #fff; }
.choose__card--domicilio  .choose__icon { color: #111; }
/* ---- Tarjetas-emblema: el badge oficial se sale por arriba (pop-out 3D) ---- */
.choose-screen .choose__ring { display: none; }
.choose-screen .choose__shine { border-radius: inherit; }
.choose-screen .choose__card { justify-content: center; }
/* Bloque (logo + título) centrado verticalmente, sin empujar el texto al fondo */
.choose-screen .choose__body { margin-top: 0; }
.choose-screen .choose__icon--logo {
  position: relative; left: auto; top: auto; transform: none; display: block; z-index: 3;
  width: clamp(134px, 70%, 178px); height: auto; max-width: none; aspect-ratio: auto;
  object-fit: contain; margin: 0 auto .9rem;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
/* Título + CTA centrados y blancos (ambas cards oscuras) */
.choose-screen .choose__label { color: #fff; }
.choose-screen .choose__cta { justify-content: center; color: rgba(255,255,255,.85); margin-top: .55rem; }
/* Saludo en dos líneas: "Hola Nombre" arriba, la pregunta debajo */
.choose__hola { display: block; font-weight: 500; margin-bottom: .15em; }

.choose__body { position: relative; z-index: 2; margin-top: auto; }
.choose__kicker { display: block; font-family: var(--fui); font-weight: 500; font-size: .58rem;
  letter-spacing: .26em; text-transform: uppercase; margin-bottom: .35rem; }
.choose__card--presencial .choose__kicker { color: rgba(255,255,255,.5); }
.choose__card--domicilio  .choose__kicker { color: rgba(0,0,0,.45); }
.choose__label { display: block; font-family: var(--fdisplay); font-weight: 700; font-size: 1.5rem; line-height: 1.08; letter-spacing: -.01em; }
.choose__desc { display: block; font-family: var(--fui); font-weight: 300; font-size: .78rem; margin-top: .35rem; opacity: .6; }

.choose__cta { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .85rem; font-family: var(--fui); font-weight: 500; font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase; }
.choose__cta svg { width: 15px; height: 15px; transition: transform .3s ease; }
.choose__card:active .choose__cta svg { transform: translateX(4px); }

.choose__shine { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg, transparent 34%, rgba(255,255,255,.14) 50%, transparent 66%);
  transform: translateX(-130%); }
.choose__card--domicilio .choose__shine { background: linear-gradient(110deg, transparent 34%, rgba(255,255,255,.14) 50%, transparent 66%); }

@keyframes introIn { from { opacity: 0; transform: translateY(-14px);} to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; } to { opacity: 1; } }

@media (hover: hover) {
  .choose__card:hover .choose__shine { transition: transform 1s ease; transform: translateX(130%); }
  .choose__card:hover .choose__cta svg { transform: translateX(4px); }
}

/* ============================================================
   DESKTOP — splash a pantalla completa y selección con más aire
   ============================================================ */
@media (min-width: 768px) {
  /* Splash: fondo negro a todo el ancho (sin franja tipo teléfono) */
  .splash-body { background: var(--black); }
  .splash-body .app.splash { max-width: none; }
  .splash__logo img { width: 320px; }
  .assemble { width: 280px; }
  .splash__o { font-size: 6.5rem; }
  .splash__brand { font-size: 3.2rem; }
  .splash__sub { font-size: 1rem; }

  /* Selección — cajas separadas, más finas y pequeñas, centradas */
  .choose-body .app { max-width: none; }
  .choose { justify-content: center; padding: 1rem 5vw calc(2rem + var(--safe-bottom)); }
  .choose__intro { padding: 1.4rem 0 1.9rem; }
  .choose__title { font-size: 3rem; }
  .choose__sub-title { font-size: .95rem; }
  .choose__grid {
    flex: 0 0 auto; grid-template-rows: none; grid-template-columns: 1fr 1fr;
    gap: 1.25rem; max-width: 620px; margin: 0 auto; width: 100%; height: auto;
    border-radius: 0; overflow: visible; box-shadow: none;
  }
  .choose__card { border-radius: 18px; min-height: 300px; padding: 2rem 1.6rem 1.7rem;
    transition: transform .3s ease, box-shadow .3s ease; }
  .choose__card--presencial,
  .choose__card--domicilio { border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
  .choose__card:hover { transform: translateY(-7px); }
  .choose__card--presencial:hover,
  .choose__card--domicilio:hover { box-shadow: 0 26px 56px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.22); }
  .choose__index { font-size: 1.8rem; top: 1rem; right: 1.3rem; }
  .choose__icon { width: 118px; max-width: 118px; top: 38%; }
  .choose__ring { width: 280px; height: 280px; right: -84px; bottom: -100px; }
  .choose__label { font-size: 2.3rem; }
  .choose__desc { font-size: .85rem; }
}

/* ============================================================
   VARIANTE CLARA (preview) — se activa con body.choose-light
   Fondo blanco cálido suave (no blanco puro), tarjetas claras y
   textos en tinta oscura. El CEAON usa su versión NEGRA y el sello
   Manos Expertas (moneda oscura) funciona igual sobre claro.
   ============================================================ */
/* --- FONDO ROSADO #FBE6ED con degradado + VELO DE TUL (femenino) --- */
body.choose-light,
html:has(body.choose-light) { background: #FBE6ED; }
.choose-light .choose-screen { background: #FBE6ED; color: #131211; }

/* Fondo: degradado vertical blanco → rosa empolvado (familia del rosa del logo) — 3 líneas de compatibilidad */
.choose-light .choose-bg {
  background: #FBE6ED;   /* respaldo sólido */
  background: -webkit-linear-gradient(bottom, #EFB9CA, #FBE6ED 50%, #FFFFFF);
  background: linear-gradient(to top, #EFB9CA, #FBE6ED 50%, #FFFFFF);
}
/* MOBILE: trama de óvalos tenue (cover). DESKTOP: puntos (más abajo el override). */
.choose-light .choose-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../img/trama-01.jpg');
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  mix-blend-mode: multiply; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.42) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.42) 100%);
}
@media (min-width: 768px) {
  .choose-light .choose-bg::before {
    background-image: radial-gradient(circle at center, rgba(19,18,17,.09) 0 1.4px, transparent 2px);
    background-size: 24px 24px; background-repeat: repeat;
    mix-blend-mode: normal; opacity: 1;
  }
}
/* Titileo: apagado por defecto en claro; SOLO en mobile se enciende sobre la trama */
.choose-light .choose-twinkle { display: none; }
@media (max-width: 767px) {
  .choose-light .choose-twinkle { display: block; }
  /* Cada "bolita" pasa a ser un óvalo de luz suave que ilumina el rosado */
  .choose-light .tw-dot {
    width: 48px; height: 62px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,255,255,0) 72%);
    filter: blur(2px); mix-blend-mode: screen;
  }
  .choose-light .tw-dot.tw-on { animation: twGlow 2.6s ease forwards; }
  @keyframes twGlow {
    0%   { opacity: 0;   transform: scale(.72); }
    32%  { opacity: .5;  transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.04); }
  }
}
.choose-light .choose__eyebrow { color: rgba(19,18,17,.5); }
.choose-light .choose__title { color: #131211; }
.choose-light .choose__hola { color: #131211; }
.choose-light .choose__sub-title { color: rgba(19,18,17,.45); }
/* Botón de usuario: círculo blanco flotante (3D) con peso visual, balancea el logo */
.choose-light .choose-screen .topbar__user {
  width: 46px; height: 46px;
  background: #fff;
  border: 1px solid rgba(19,18,17,.05);
  color: #131211;
  box-shadow: 0 7px 18px rgba(19,18,17,.16), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .2s ease, box-shadow .2s ease;
}
.choose-light .choose-screen .topbar__user:active {
  transform: translateY(1px) scale(.97);
  box-shadow: 0 4px 12px rgba(19,18,17,.16);
}

/* Tarjetas: vidrio esmerilado — el rosado se cuela borroso por detrás */
.choose-light .choose__card--presencial,
.choose-light .choose__card--domicilio {
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 16px 40px rgba(19,18,17,.12), inset 0 1px 0 rgba(255,255,255,.6);
}
/* (Sin puntos sobre la tarjeta — el grid vive solo en el fondo) */
.choose-light .choose__card::after { content: none; }
.choose-light .choose__card--presencial:hover,
.choose-light .choose__card--domicilio:hover {
  box-shadow: 0 24px 50px rgba(19,18,17,.16), 0 0 0 1px rgba(19,18,17,.12);
}
/* Texto y CTA en tinta (monocromático) */
.choose-light .choose-screen .choose__label { color: #131211; }
.choose-light .choose-screen .choose__cta { color: rgba(19,18,17,.62); }
.choose-light .choose__cta svg { color: rgba(19,18,17,.62); }
/* Brillo diagonal claro sobre la tarjeta */
.choose-light .choose__shine,
.choose-light .choose__card--domicilio .choose__shine {
  background: linear-gradient(110deg, transparent 34%, rgba(255,255,255,.55) 50%, transparent 66%);
}
/* Sombra del logo neutra sobre claro */
.choose-light .choose-screen .choose__icon--logo { filter: drop-shadow(0 6px 14px rgba(19,18,17,.16)); }

/* Swap del logo CEAON: blanco en oscuro, negro en claro. */
.choose-screen .choose__icon--logo.choose__icon--logo-dark { display: none; }
.choose-light .choose-screen .choose__icon--logo.choose__icon--logo-white { display: none; }
.choose-light .choose-screen .choose__icon--logo.choose__icon--logo-dark { display: block; }

/* ---------- Franja «para profesionales» bajo las tarjetas + su hoja ---------- */
.choose__pro { display: flex; align-items: center; gap: .85rem; width: 100%; max-width: 620px; margin: 1.1rem auto 0;
  padding: .8rem .9rem .8rem .8rem; border-radius: 16px; cursor: pointer; text-align: left; font: inherit;
  color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease;
  animation: cardIn .8s ease .36s both; -webkit-tap-highlight-color: transparent; }
.choose__pro[hidden] { display: none; }
.choose__pro:active { transform: scale(.99); }
.choose__pro-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #131211; color: #fff; }
.choose__pro-ic svg { width: 19px; height: 19px; }
.choose__pro-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--fui); }
.choose__pro-txt b { font-weight: 600; font-size: .86rem; line-height: 1.25; }
.choose__pro-txt span { font-weight: 400; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.choose__pro-go { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid currentColor; opacity: .55; transition: transform .25s ease, opacity .25s ease; }
.choose__pro-go svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .choose__pro:hover { transform: translateY(-2px); }
  .choose__pro:hover .choose__pro-go { transform: translateX(3px); opacity: .9; }
}
/* Tema claro (el rosado actual): vidrio como las tarjetas, tinta oscura */
.choose-light .choose__pro { color: #131211; background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.65); box-shadow: 0 10px 28px rgba(19,18,17,.08), inset 0 1px 0 rgba(255,255,255,.6); }
.choose-light .choose__pro:hover { box-shadow: 0 16px 36px rgba(19,18,17,.12), 0 0 0 1px rgba(19,18,17,.1); }

.pro-sheet .sheet__content { padding-top: .4rem; }
.pro-sheet__title { font-family: var(--fdisplay); font-weight: 700; font-size: 1.45rem; letter-spacing: -.01em; color: #131211; margin: .2rem 2.6rem .3rem 0; }
.pro-sheet__sub { font-family: var(--fui); font-size: .88rem; line-height: 1.45; color: var(--gray-700); margin: 0 0 1.1rem; }
.pro-opt { display: flex; align-items: center; gap: .9rem; padding: .95rem 1rem; margin-bottom: .6rem; border-radius: 14px;
  border: 1px solid #ececec; background: #fff; color: #131211; text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.pro-opt:active { transform: scale(.99); background: #fafafa; }
@media (hover: hover) { .pro-opt:hover { border-color: #131211; } }
.pro-opt__ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #FBE6ED; color: #131211; }
.pro-opt__ic svg { width: 22px; height: 22px; }
.pro-opt__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--fui); }
.pro-opt__txt b { font-weight: 600; font-size: .98rem; }
.pro-opt__txt span { font-size: .8rem; color: var(--gray-500); }
.pro-opt__go { width: 18px; height: 18px; flex: 0 0 auto; color: var(--gray-500); }
.pro-sheet__note { font-family: var(--fui); font-size: .8rem; line-height: 1.5; color: var(--gray-500); margin: .9rem .2rem .2rem; }
.pro-sheet__note a { color: #131211; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }