/* ============================================================
   TuAgendamiento.com — página de reservas del cliente final.

   Todos los colores salen de variables que el JS rellena con la
   marca del negocio (`aplicarTema`). Aquí nunca se escribe un
   color de marca a mano: así la misma hoja sirve para un estudio
   de belleza dorado y para una consultora azul noche.
   ============================================================ */

:root{
  /* las rellena el JS desde la API */
  --marca:#111; --marca-2:#111; --sobre-marca:#fff;
  --fondo:#fff; --superficie:#fff; --superficie-2:#fafafa;
  --texto:#111; --texto-2:#666; --texto-3:#8b8b8b;
  --borde:rgba(0,0,0,.09); --borde-fuerte:rgba(0,0,0,.16);
  --marca-tenue:rgba(0,0,0,.05);
  --sombra:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --sombra-alta:0 24px 60px rgba(0,0,0,.18);

  --display:'Inter',system-ui,sans-serif;
  --display-peso:700;        /* lo baja el negocio con display fina */
  --display-tracking:-.02em; /* una serif amplia lo quiere positivo */
  --texto-font:'Inter',system-ui,sans-serif;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-full:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ancho:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}

/* El atributo `hidden` del HTML se aplica con [hidden]{display:none} en la hoja
   del navegador, que tiene MENOS peso que cualquier regla con clase. Así que
   `.side-link.instalar{display:flex}` le ganaba y el botón de instalar seguía
   a la vista incluso con la app ya instalada. Esto lo zanja de una vez, para
   todo lo que use `hidden` aquí. */
[hidden]{display:none !important;}

html{scroll-behavior:smooth;}
body{
  background:var(--fondo);color:var(--texto);
  font-family:var(--texto-font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;text-decoration:none;}
.oculto{display:none !important;}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px;}

h1,h2,h3{font-family:var(--display);font-weight:var(--display-peso);letter-spacing:var(--display-tracking);line-height:1.15;}

/* ---------- carga ---------- */
.pantalla-carga{
  position:fixed;inset:0;display:grid;place-items:center;background:var(--fondo);z-index:500;
}
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--borde);border-top-color:var(--marca);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg);}}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--r-full);
  font-weight:650;font-size:14.5px;letter-spacing:-.01em;
  transition:transform .18s var(--ease), filter .18s var(--ease), opacity .18s;
}
.btn:hover{filter:brightness(1.06);}
.btn:active{transform:scale(.975);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none;}
.btn-marca{background:var(--marca);color:var(--sobre-marca);}
.btn-linea{border:1px solid var(--borde-fuerte);color:var(--texto);}
.btn-linea:hover{background:var(--marca-tenue);filter:none;}
.btn-sm{padding:10px 18px;font-size:13.5px;}
.btn-full{width:100%;}
.icon-btn{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--texto-2);font-size:15px;transition:background .18s;
}
.icon-btn:hover{background:var(--marca-tenue);}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transform:translateY(-100%);transition:transform .35s var(--ease), border-color .25s;
  background:color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.nav.visible{transform:translateY(0);border-bottom-color:var(--borde);}
.nav-inner{
  max-width:var(--ancho);margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav-marca{display:flex;align-items:center;gap:11px;min-width:0;}
.nav-marca img{
  width:34px;height:34px;border-radius:9px;object-fit:cover;flex-shrink:0;
  background:var(--superficie-2);
}
.nav-marca span{
  font-family:var(--display);font-weight:var(--display-peso);font-size:15px;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- hero ---------- */
.hero{position:relative;padding-bottom:8px;}
.hero-media{position:relative;height:clamp(200px,30vw,340px);overflow:hidden;background:var(--superficie-2);}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-velo{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.10), color-mix(in srgb, var(--fondo) 92%, transparent));
}
.hero-card{
  position:relative;margin-top:-58px;
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r-lg);box-shadow:var(--sombra);
  padding:20px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.hero-logo{
  width:84px;height:84px;border-radius:16px;overflow:hidden;flex-shrink:0;
  border:1px solid var(--borde);background:var(--superficie-2);
  display:grid;place-items:center;
}
.hero-logo img{width:100%;height:100%;object-fit:cover;}
.hero-datos{flex:1;min-width:220px;}
.hero-rubro{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--marca);margin-bottom:5px;
}
.hero-datos h1{font-size:clamp(21px,2.6vw,30px);margin-bottom:8px;}
.hero-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--texto-2);}
.hero-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--texto-3);}
.estrella{color:var(--marca);font-weight:700;}
.pastilla{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--r-full);font-size:12px;font-weight:650;
}
.pastilla.abierto{background:color-mix(in srgb,#22c55e 15%,transparent);color:#16a34a;}
.pastilla.cerrado{background:var(--marca-tenue);color:var(--texto-2);}
.pastilla .punto{width:6px;height:6px;border-radius:50%;background:currentColor;}
.hero-desc{
  color:var(--texto-2);font-size:15px;max-width:760px;margin:20px 0 4px;
}

/* ---------- layout ---------- */
.layout{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;
  padding-top:40px;padding-bottom:72px;align-items:start;
}
.col-side{position:relative;}
.side-sticky{position:sticky;top:80px;display:flex;flex-direction:column;gap:14px;}

/* ---------- categorías ---------- */
.cats{
  position:sticky;top:59px;z-index:40;
  display:flex;gap:8px;overflow-x:auto;padding:12px 0;margin-bottom:8px;
  background:var(--fondo);
  scrollbar-width:none;
}
.cats::-webkit-scrollbar{display:none;}
.cat-chip{
  flex:0 0 auto;padding:9px 16px;border-radius:var(--r-full);
  font-size:13.5px;font-weight:600;white-space:nowrap;
  border:1px solid var(--borde);color:var(--texto-2);
  transition:all .18s var(--ease);
}
.cat-chip:hover{border-color:var(--borde-fuerte);color:var(--texto);}
.cat-chip.activa{background:var(--marca);color:var(--sobre-marca);border-color:var(--marca);}

/* ---------- servicios ---------- */
.grupo{margin-bottom:40px;scroll-margin-top:120px;}
.grupo-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;}
.grupo-head h2{font-size:19px;}
.grupo-head .cuenta{font-size:13px;color:var(--texto-3);}
.svc{
  display:flex;align-items:center;gap:18px;
  padding:17px 20px;border:1px solid var(--borde);border-radius:var(--r-md);
  background:var(--superficie);margin-bottom:9px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.svc:hover{border-color:var(--borde-fuerte);box-shadow:var(--sombra);}
.svc-info{flex:1;min-width:0;}
.svc-nombre{font-weight:650;font-size:15px;letter-spacing:-.01em;}
.svc-desc{font-size:13px;color:var(--texto-2);margin-top:3px;}
.svc-meta{font-size:12.5px;color:var(--texto-3);margin-top:5px;display:flex;gap:10px;align-items:center;}
.svc-precio{font-family:var(--display);font-weight:var(--display-peso);font-size:16px;white-space:nowrap;letter-spacing:-.02em;}
.svc-precio.gratis{color:var(--texto-2);font-size:13.5px;font-weight:600;}

/* ---------- bloques ---------- */
.bloque{margin-bottom:40px;}
.bloque-titulo{font-size:19px;margin-bottom:16px;}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.galeria figure{
  position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--borde);background:var(--superficie-2);
}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.galeria figure:hover img{transform:scale(1.05);}

.resena{
  padding:16px 18px;border:1px solid var(--borde);border-radius:var(--r-md);
  background:var(--superficie);margin-bottom:9px;
}
.resena-top{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.resena-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--marca-tenue);
  display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--marca);
}
.resena-autor{font-weight:650;font-size:14px;}
.resena-sub{font-size:12px;color:var(--texto-3);}
.resena p{font-size:14px;color:var(--texto-2);}

/* ---------- cards laterales ---------- */
.card{
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--r-md);padding:18px;
}
.card h3{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-3);margin-bottom:12px;}
.card-mapa{
  width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-sm);
  margin-bottom:12px;border:1px solid var(--borde);
}
.card-dir{font-size:13.5px;color:var(--texto-2);line-height:1.5;margin-bottom:12px;}
.fila-horario{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:13.5px;
}
.fila-horario .dia{color:var(--texto-2);}
.fila-horario .horas{font-variant-numeric:tabular-nums;color:var(--texto);}
.fila-horario.hoy{font-weight:700;}
.fila-horario.hoy .dia,.fila-horario.hoy .horas{color:var(--marca);}
.fila-horario .cerrado{color:var(--texto-3);}

.equipo{display:flex;flex-wrap:wrap;gap:14px;}
.miembro{text-align:center;width:64px;}
.miembro-foto{
  width:52px;height:52px;border-radius:50%;margin:0 auto 6px;overflow:hidden;
  background:var(--marca-tenue);display:grid;place-items:center;
  font-weight:700;color:var(--marca);font-size:15px;
  border:1px solid var(--borde);
}
.miembro-foto img{width:100%;height:100%;object-fit:cover;}
.miembro-nombre{font-size:11.5px;line-height:1.25;color:var(--texto-2);}

.btn-wa{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:12px;border-radius:var(--r-full);
  background:#25D366;color:#fff;font-weight:650;font-size:14px;margin-top:12px;
}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--borde);padding:24px 0;}
.pie-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--texto-3);}
.pie-marca strong{color:var(--texto-2);}

/* ---------- drawer ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(10,10,10,.5);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);z-index:90;
}
.overlay.visible{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);
  background:var(--fondo);border-left:1px solid var(--borde);
  box-shadow:var(--sombra-alta);
  transform:translateX(100%);transition:transform .38s var(--ease);
  z-index:100;display:flex;flex-direction:column;
}
.drawer.abierto{transform:translateX(0);}
.drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 22px 16px;border-bottom:1px solid var(--borde);flex-shrink:0;
}
.drawer-paso{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--marca);}
.drawer-titulo{font-family:var(--display);font-weight:var(--display-peso);font-size:19px;letter-spacing:-.02em;margin-top:3px;}
.drawer-body{flex:1;overflow-y:auto;padding:20px 22px;}
.drawer-pie{padding:16px 22px 22px;border-top:1px solid var(--borde);flex-shrink:0;}
.drawer-pie:empty{display:none;}

.resumen-svc{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:14px 16px;border-radius:var(--r-md);background:var(--marca-tenue);
  margin-bottom:20px;
}
.resumen-svc .n{font-weight:650;font-size:14.5px;}
.resumen-svc .m{font-size:12.5px;color:var(--texto-2);margin-top:2px;}
.resumen-svc .p{font-weight:var(--display-peso);font-family:var(--display);white-space:nowrap;}

.opcion{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:13px 15px;border:1px solid var(--borde);border-radius:var(--r-md);
  margin-bottom:9px;transition:border-color .18s var(--ease), background .18s;
}
.opcion:hover{border-color:var(--borde-fuerte);}
.opcion.sel{border-color:var(--marca);background:var(--marca-tenue);}
.opcion-foto{
  width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--marca-tenue);display:grid;place-items:center;
  font-weight:700;color:var(--marca);font-size:14px;
}
.opcion-foto img{width:100%;height:100%;object-fit:cover;}
.opcion-txt{flex:1;min-width:0;}
.opcion-txt .n{font-weight:650;font-size:14.5px;}
.opcion-txt .r{font-size:12.5px;color:var(--texto-2);}
.opcion-check{color:var(--marca);font-weight:700;opacity:0;transition:opacity .18s;}
.opcion.sel .opcion-check{opacity:1;}

/* calendario */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-mes{font-weight:700;font-size:15px;text-transform:capitalize;font-family:var(--display);}
.cal-nav{display:flex;gap:4px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dow{
  text-align:center;font-size:10.5px;font-weight:700;color:var(--texto-3);
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;
}
.cal-dia{
  aspect-ratio:1;border-radius:10px;display:grid;place-items:center;
  font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;
  transition:background .15s, color .15s;position:relative;
}
.cal-dia.vacio{visibility:hidden;}
.cal-dia.libre{color:var(--texto);}
.cal-dia.libre:hover{background:var(--marca-tenue);}
.cal-dia.libre::after{
  content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;
  background:var(--marca);opacity:.55;
}
.cal-dia.ocupado{color:var(--texto-3);opacity:.4;cursor:not-allowed;}
.cal-dia.sel{background:var(--marca);color:var(--sobre-marca);}
.cal-dia.sel::after{background:var(--sobre-marca);opacity:.8;}

.horas-titulo{font-size:13px;font-weight:700;margin:22px 0 10px;}
.horas{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.hora{
  padding:10px 4px;border:1px solid var(--borde);border-radius:9px;
  font-size:13px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;
  transition:all .15s;
}
.hora:hover{border-color:var(--borde-fuerte);}
.hora.sel{background:var(--marca);color:var(--sobre-marca);border-color:var(--marca);}

.campo{margin-bottom:14px;}
.campo label{display:block;font-size:12.5px;font-weight:600;color:var(--texto-2);margin-bottom:6px;}
.campo input,.campo textarea{
  width:100%;padding:12px 14px;border:1px solid var(--borde-fuerte);
  border-radius:var(--r-sm);background:var(--superficie);color:var(--texto);
  font-family:inherit;font-size:14.5px;
}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--marca);}
.campo textarea{resize:vertical;min-height:66px;}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3);}

.aviso{
  padding:11px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:14px;
  background:color-mix(in srgb,#ef4444 12%,transparent);color:#dc2626;
  border:1px solid color-mix(in srgb,#ef4444 28%,transparent);
}

/* preguntas extra del negocio */
.campo-ayuda{font-size:12px;color:var(--texto-3);margin:-2px 0 7px;line-height:1.4;}
.campo select{
  width:100%;padding:12px 14px;border:1px solid var(--color-borde,var(--borde-fuerte));
  border-radius:var(--r-sm);background:var(--superficie);color:var(--texto);
  font-family:inherit;font-size:14.5px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
}
.campo select:focus{outline:none;border-color:var(--marca);}
.segmento{display:flex;gap:8px;}
.segmento button{
  flex:1;padding:12px;border:1px solid var(--borde-fuerte);border-radius:var(--r-sm);
  font-weight:600;font-size:14.5px;color:var(--texto-2);transition:all .16s var(--ease);
}
.segmento button:hover{border-color:var(--marca);}
.segmento button.on{background:var(--marca);color:var(--sobre-marca);border-color:var(--marca);}
.separador{
  display:flex;align-items:center;gap:12px;margin:24px 0 16px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);
}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--borde);}

/* reunión virtual y calendario */
.bloque-reunion{
  margin-top:18px;padding:15px 16px;border-radius:var(--r-md);text-align:left;
  background:var(--marca-tenue);border:1px solid var(--borde);
}
.br-titulo{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3);margin-bottom:7px;}
.br-link{
  display:block;font-weight:650;font-size:14px;color:var(--marca);
  word-break:break-all;line-height:1.4;
}
.br-nota{font-size:12px;color:var(--texto-3);margin-top:8px;line-height:1.45;}
.cal-acciones{margin-top:20px;text-align:left;}
.ca-titulo{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3);margin-bottom:10px;}
.btn-cal{width:100%;margin-bottom:8px;justify-content:center;}
.vacio-msg{text-align:center;color:var(--texto-3);font-size:13.5px;padding:26px 0;}

.exito{text-align:center;padding:14px 0;}
.exito-check{
  width:62px;height:62px;border-radius:50%;margin:0 auto 18px;
  display:grid;place-items:center;font-size:27px;
  background:var(--marca-tenue);color:var(--marca);
}
.exito h3{font-size:21px;margin-bottom:6px;}
.exito .sub{color:var(--texto-2);font-size:14px;margin-bottom:22px;}
.ticket{
  border:1px solid var(--borde);border-radius:var(--r-md);
  padding:16px 18px;text-align:left;background:var(--superficie);
}
.ticket-fila{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14px;}
.ticket-fila span:first-child{color:var(--texto-2);}
.ticket-fila span:last-child{font-weight:600;text-align:right;}
.ticket-fila.total{border-top:1px dashed var(--borde-fuerte);margin-top:6px;padding-top:12px;}
.ticket-fila.total span:last-child{color:var(--marca);font-weight:var(--display-peso);font-family:var(--display);}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .layout{grid-template-columns:1fr;gap:30px;}
  .side-sticky{position:static;}
  .col-side{order:-1;}
}
@media(max-width:620px){
  .contenedor{padding:0 16px;}
  .hero-card{margin-top:-40px;padding:16px;gap:14px;}
  .hero-logo{width:60px;height:60px;border-radius:13px;}
  .hero-accion{width:100%;}
  .hero-accion .btn{width:100%;}
  .horas{grid-template-columns:repeat(3,1fr);}
  .galeria{grid-template-columns:repeat(2,1fr);}
  .nav-marca span{max-width:150px;}
  .drawer{width:100%;}
}

/* ---------- lista de espera ---------- */
.espera-caja{
  margin-top:18px;padding:16px;border-radius:var(--r-md);
  background:var(--marca-tenue);border:1px dashed var(--borde-fuerte);
}
.espera-titulo{font-weight:700;font-size:14.5px;margin-bottom:4px;}
.espera-nota{font-size:13px;color:var(--texto-2);line-height:1.5;margin-bottom:12px;}
.espera-caja .btn{margin-top:2px;}


/* ============================================================
   PORTADA — la primera pantalla. Ocupa todo el alto: la foto del
   local y la marca antes que cualquier lista, como una carta de
   restaurante buena y no como un directorio.
   ============================================================ */
.portada{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 24px 100px;overflow:hidden;
}
.portada-fondo{position:absolute;inset:0;}
.portada-fondo img{width:100%;height:100%;object-fit:cover;}
/* El velo deja ver el local pero garantiza que el texto se lea: más abierto en
   el centro, sólido abajo para fundirse con el resto de la página. */
.portada-velo{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%,
                    color-mix(in srgb,var(--fondo) 62%,transparent) 0%,
                    color-mix(in srgb,var(--fondo) 86%,transparent) 100%),
    linear-gradient(to bottom,
                    color-mix(in srgb,var(--fondo) 55%,transparent) 0%,
                    color-mix(in srgb,var(--fondo) 75%,transparent) 55%,
                    var(--fondo) 97%);
}
.portada-fondo img{transform:scale(1.04);}
.portada-contenido{position:relative;z-index:2;max-width:640px;}
.portada-logo{
  width:112px;height:112px;margin:0 auto 26px;border-radius:24px;overflow:hidden;
  border:1px solid var(--borde);box-shadow:var(--sombra-alta);background:var(--superficie);
}
.portada-logo img{width:100%;height:100%;object-fit:cover;}
.portada-rubro{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--marca);margin-bottom:14px;
}
.portada h1{
  font-size:clamp(32px,6vw,58px);line-height:1.05;margin-bottom:18px;
  letter-spacing:-.03em;
}
.portada-desc{
  color:var(--texto-2);font-size:16px;line-height:1.65;
  max-width:520px;margin:0 auto 24px;
}
.portada-meta{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:13.5px;color:var(--texto-2);margin-bottom:32px;
}
.portada-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--texto-3);}
.tenue{color:var(--texto-3);}
.portada-botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn-grande{padding:16px 34px;font-size:15.5px;}
.btn-claro{
  background:var(--superficie);color:var(--texto);border:1px solid var(--borde-fuerte);
}
.btn-claro:hover{background:var(--marca-tenue);filter:none;}

/* la flechita que invita a bajar */
.portada-baja{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  width:26px;height:42px;border:2px solid var(--borde-fuerte);border-radius:14px;
  display:grid;justify-items:center;padding-top:8px;
}
.portada-baja span{
  width:3px;height:8px;border-radius:2px;background:var(--marca);
  animation:baja 1.6s var(--ease) infinite;
}
@keyframes baja{ 0%,100%{opacity:0;transform:translateY(0);} 40%{opacity:1;} 80%{opacity:0;transform:translateY(11px);} }

/* ---------- títulos de sección ---------- */
.titulo-seccion{text-align:center;margin-bottom:28px;}
.titulo-seccion.izq{text-align:left;}
.antetitulo{
  display:block;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--marca);margin-bottom:8px;
}
.titulo-seccion h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;}

/* ---------- lo más pedido ---------- */
.bloque-destacados{padding:80px 0 20px;}
.destacados{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;}
.destacado{
  text-align:left;padding:22px 20px;border-radius:var(--r-lg);
  border:1px solid var(--borde);background:var(--superficie);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.destacado:hover{border-color:var(--marca);transform:translateY(-3px);box-shadow:var(--sombra);}
.destacado-cat{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:9px;
}
.destacado-nombre{
  font-family:var(--display);font-weight:var(--display-peso);font-size:17px;line-height:1.25;
  letter-spacing:-.02em;margin-bottom:14px;
}
.destacado-pie{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--texto-3);
}
.destacado-precio{font-family:var(--display);font-weight:var(--display-peso);font-size:16px;color:var(--marca);}

/* ---------- buscador ---------- */
.buscador{position:relative;margin-bottom:6px;}
.buscador input{
  width:100%;padding:15px 18px;border-radius:var(--r-full);
  border:1px solid var(--borde-fuerte);background:var(--superficie);
  color:var(--texto);font-family:inherit;font-size:15px;
}
.buscador input:focus{outline:none;border-color:var(--marca);}
.buscador input::placeholder{color:var(--texto-3);}
.buscador-conteo{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:12.5px;color:var(--texto-3);pointer-events:none;
}

/* ---------- categorías plegables ---------- */
.grupo-head{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 0;margin-bottom:6px;text-align:left;
  border-bottom:1px solid var(--borde);
}
.grupo-head h2{flex:1;font-size:18px;}
.grupo-head .cuenta{
  font-size:12px;font-weight:700;color:var(--texto-3);
  background:var(--marca-tenue);padding:3px 10px;border-radius:var(--r-full);
}
.grupo-head .flecha{
  font-size:18px;color:var(--texto-3);transition:transform .25s var(--ease);
}
.grupo.plegado .flecha{transform:rotate(-90deg);}
.grupo-cuerpo{
  overflow:hidden;max-height:9999px;opacity:1;
  transition:max-height .35s var(--ease), opacity .25s;
}
.grupo.plegado .grupo-cuerpo{max-height:0;opacity:0;}

/* ---------- tarjeta de reservar en la barra lateral ---------- */
.card-reservar{
  background:var(--marca-tenue);border-color:var(--marca);text-align:center;
}
.card-reservar-txt{
  font-family:var(--display);font-weight:var(--display-peso);font-size:16px;margin-bottom:12px;
  letter-spacing:-.02em;
}

@media(max-width:980px){
  .bloque-destacados{padding:56px 0 8px;}
  .portada{padding:64px 20px 90px;}
}

/* ---------- cobro del anticipo ---------- */
.pago-monto{
  text-align:center;padding:22px;border-radius:var(--r-md);
  background:var(--marca-tenue);border:1px solid var(--borde);margin-bottom:18px;
}
.pago-monto-lbl{font-size:12.5px;color:var(--texto-2);margin-bottom:6px;}
.pago-monto-val{
  font-family:var(--display);font-weight:var(--display-peso);font-size:34px;
  letter-spacing:-.03em;color:var(--marca);
}
.pago-reloj{
  text-align:center;font-size:13.5px;color:var(--texto-2);
  padding:11px;border-radius:var(--r-sm);background:var(--superficie-2);margin-bottom:16px;
}
.pago-reloj strong{font-variant-numeric:tabular-nums;color:var(--texto);}
.pago-reloj .vencido{color:#dc2626;font-weight:600;}

/* ---- escoger cómo pagar (pesos o tarjeta internacional) ----
   Reusa .opcion, el mismo patrón de "escoger uno" del resto del flujo. */
.pago-metodos{ margin:16px 0 14px; }
.metodo-icono{ font-size:1.3rem; line-height:1; width:28px; text-align:center; }


/* ---- portada sin foto: el fondo se arma con los colores de la marca ----
   Tres halos muy tenues sobre el color de fondo. Para una marca con identidad
   propia esto se lee mucho mejor que una foto de banco de imágenes. */
.portada.sin-foto .portada-fondo,
.portada.sin-foto .portada-velo{ display:none; }
.portada.sin-foto{
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--marca-2) 9%, transparent) 0%, transparent 30%),
    radial-gradient(circle at 71% 84%, color-mix(in srgb, var(--marca)   7%, transparent) 0%, transparent 32%),
    radial-gradient(circle at 17% 76%, color-mix(in srgb, var(--marca-2) 5%, transparent) 0%, transparent 24%),
    var(--fondo);
}


/* ---- lockup completo (logo + nombre) ---- */
.portada-logotipo{
  display:block;width:min(340px,72%);height:auto;margin:0 auto 22px;
}
/* El lockup es un SVG transparente y va suelto sobre la barra. La regla de
   arriba le pinta un fondo a la imagen porque está pensada para el símbolo
   cuadrado; aquí ese fondo dejaba un rectángulo visible detrás del logo. */
.nav-marca img.es-lockup{
  /* 30px y no 26: por debajo de eso el 'GROUP' del lockup queda ilegible */
  width:auto;height:30px;max-width:200px;
  border-radius:0;object-fit:contain;background:transparent;
}

/* ---- titular con el degradado de la marca ----
   Va sobre fondo oscuro y con colores claros, así que se lee bien; aun así
   lleva `color` de respaldo por si el navegador no recorta el fondo al texto. */
.portada h1.con-degradado{
  background-image:linear-gradient(100deg,var(--marca-2),var(--marca));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--texto);
  padding-bottom:.08em;   /* que no se corten las colas de la g y la p */
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .portada h1.con-degradado{-webkit-text-fill-color:currentColor;color:var(--texto);}
}


/* ==================================================================
   Estilo "vidrio": pastillas, paneles translúcidos y partículas.
   Es el lenguaje que algunas marcas ya usan en su propio sitio, así que la
   página de reservas se siente continuación y no otra cosa. Se enciende por
   negocio con `estilo: "vidrio"`; el resto no se entera.
   ================================================================== */

/* -- puntitos flotando en la portada -- */
.particulas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.particulas span{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:var(--marca-2);box-shadow:0 0 7px var(--marca-2);
  animation:flotar linear infinite;
}
@keyframes flotar{
  from{transform:translateY(10px);}
  50% {transform:translateY(-10px);}
  to  {transform:translateY(10px);}
}

/* -- el rubro como pastilla con punto, no como texto suelto -- */
[data-estilo="vidrio"] .portada-rubro{
  display:inline-flex;align-items:center;gap:8px;
  min-height:28px;padding:0 15px;margin-bottom:20px;
  border-radius:999px;
  background:color-mix(in srgb, var(--marca) 34%, #fff);
  color:var(--fondo);
  font-size:11.2px;font-weight:600;letter-spacing:.14em;
}
[data-estilo="vidrio"] .portada-rubro::before{
  content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;
  background:var(--marca);box-shadow:0 0 12px var(--marca);
}

/* -- titular: en negrilla, como en su sitio -- */
[data-estilo="vidrio"] .portada h1{font-weight:800;letter-spacing:-.015em;}

/* -- botones tipo pastilla, con la flecha en círculo -- */
[data-estilo="vidrio"] .btn-grande{
  min-height:54px;border-radius:999px;gap:15px;padding:8px 8px 8px 26px;
  font-weight:600;
}
[data-estilo="vidrio"] .btn-grande:not(:has(.cta-flecha)){padding:14px 26px;}
.cta-flecha{
  display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;
  border-radius:50%;background:var(--fondo);color:var(--marca);
  font-size:1.15rem;line-height:1;
}

/* -- barra de arriba como panel de vidrio flotante -- */
[data-estilo="vidrio"] .nav{
  background:transparent;border:0;box-shadow:none;backdrop-filter:none;
  padding:10px 16px;
}
[data-estilo="vidrio"] .nav-inner{
  border:1px solid color-mix(in srgb, var(--marca-2) 18%, transparent);
  border-radius:25px;
  background:color-mix(in srgb, var(--fondo) 94%, #000);
  box-shadow:0 26px 58px rgba(2,12,22,.38), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(28px) saturate(1.6);
  padding:10px 12px 10px 18px;
}

/* -- tarjetas con el radio y la sombra de su sistema -- */
[data-estilo="vidrio"] .svc,
[data-estilo="vidrio"] .destacado,
[data-estilo="vidrio"] .panel-lateral{
  border-radius:22px;
}

/* ---- selector de idioma en la barra de arriba ---- */
.nav-acciones{display:flex;align-items:center;gap:10px;}
.selector-idioma{
  display:inline-flex;padding:2px;border-radius:999px;
  border:1px solid var(--borde);background:var(--superficie-2);
}
.selector-idioma button{
  padding:5px 11px;border:0;border-radius:999px;background:transparent;
  color:var(--texto-2);font:inherit;font-size:12px;font-weight:600;
  letter-spacing:.04em;cursor:pointer;transition:background .16s,color .16s;
}
.selector-idioma button:hover{color:var(--texto);}
.selector-idioma button.activo{background:var(--marca);color:var(--sobre-marca);}

/* ---- distintivo junto al precio (ej: "13% off") ---- */
.svc-etiqueta{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--marca);color:var(--sobre-marca);
  font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  vertical-align:middle;
}

/* ---- aviso al volver de la pasarela ---- */
.vuelta-pago{
  position:fixed;left:50%;top:16px;transform:translate(-50%,-140%);
  z-index:200;max-width:min(560px,92vw);
  padding:14px 20px;border-radius:14px;
  background:var(--superficie);color:var(--texto);
  border:1px solid var(--borde);box-shadow:var(--sombra-alta);
  font-size:14.5px;line-height:1.5;
  transition:transform .35s var(--ease);
}
.vuelta-pago.visible{transform:translate(-50%,0);}
.vuelta-pago.bien{border-left:4px solid var(--marca);}
.vuelta-pago.cancelado{border-left:4px solid #B45309;}


/* ==================================================================
   Estilo "trazo": lenguaje de plano arquitectónico.

   Nació porque la página de Constructocity se veía igual que la de Nexel con
   otros colores, y un cliente que paga personalización lo nota de inmediato.
   Cambiar la paleta no basta: lo que delata la plantilla es la ESTRUCTURA
   —pastillas, tarjetas redondeadas, titular en negrilla— así que aquí cambia
   la estructura entera.

   La referencia es una lámina de dibujo técnico: líneas de cabello que se
   trazan solas, marcas de registro en las esquinas, un índice numerado en vez
   de tarjetas, y tipografía grande y fina con mucho aire. Se enciende con
   `estilo: "trazo"`; ningún otro negocio se entera.
   ================================================================== */

[data-estilo="trazo"]{
  --trazo-linea:color-mix(in srgb, var(--marca) 22%, transparent);
  --trazo-tenue:color-mix(in srgb, var(--marca) 11%, transparent);
}

/* Profundidad sobre el color plano: un halo tenue arriba y viñeta a los lados.
   Sin esto el vino se ve como un relleno, no como un espacio. */
[data-estilo="trazo"] .portada.sin-foto::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--marca) 9%, transparent), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.34));
}

/* -- marcas de registro en las esquinas, como en una lámina -- */
[data-estilo="trazo"] .portada-contenido::before,
[data-estilo="trazo"] .portada-contenido::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  opacity:0;animation:trazo-aparecer .9s ease 1.5s forwards;
}
[data-estilo="trazo"] .portada-contenido::before{
  top:-34px;left:-34px;border-top:1px solid var(--trazo-linea);border-left:1px solid var(--trazo-linea);
}
[data-estilo="trazo"] .portada-contenido::after{
  bottom:-34px;right:-34px;border-bottom:1px solid var(--trazo-linea);border-right:1px solid var(--trazo-linea);
}
[data-estilo="trazo"] .portada-contenido{position:relative;max-width:780px;}

/* -- el rubro: rótulo de plano, no pastilla -- */
[data-estilo="trazo"] .portada-rubro{
  display:block;margin:0 0 26px;padding:0;background:none;border:0;border-radius:0;
  color:color-mix(in srgb, var(--marca) 62%, transparent);
  font-family:var(--texto-font);
  font-size:10.5px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
}

/* -- el titular: grande, fino y abierto. Sin degradado: ese es el gesto de
      otra marca, y aquí la fuerza la hace el tamaño y el aire. -- */
[data-estilo="trazo"] .portada h1,
[data-estilo="trazo"] .portada h1.con-degradado{
  font-size:clamp(46px, 9.5vw, 116px);
  font-weight:300;letter-spacing:.012em;line-height:1.02;
  background:none;-webkit-text-fill-color:currentColor;color:var(--marca);
  margin:0 0 30px;
}

[data-estilo="trazo"] .portada-desc{
  max-width:46ch;margin-inline:auto;
  font-size:15px;line-height:1.75;
  color:color-mix(in srgb, var(--marca) 58%, transparent);
}

/* -- línea de cabello que se traza sola bajo el titular -- */
[data-estilo="trazo"] .portada-meta{
  position:relative;padding-top:28px;margin-top:30px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
[data-estilo="trazo"] .portada-meta::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:min(420px,72%);height:1px;background:var(--trazo-linea);
  transform-origin:center;scale:0 1;
  animation:trazo-linea 1.1s cubic-bezier(.22,.7,.2,1) 1.15s forwards;
}

/* -- botones: escuadra, no pastilla. Sin flecha en círculo. -- */
[data-estilo="trazo"] .btn-grande{
  min-height:56px;padding:0 34px;border-radius:0;gap:0;
  font-family:var(--texto-font);
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
[data-estilo="trazo"] .btn-grande .cta-flecha{display:none;}
[data-estilo="trazo"] .btn-marca{background:var(--marca);color:var(--fondo);border:1px solid var(--marca);}
[data-estilo="trazo"] .btn-marca:hover{background:transparent;color:var(--marca);}
[data-estilo="trazo"] .btn-suave{
  background:transparent;color:var(--marca);
  border:1px solid var(--trazo-linea);
}
[data-estilo="trazo"] .btn-suave:hover{border-color:var(--marca);}
[data-estilo="trazo"] .portada-botones{gap:14px;margin-top:38px;}

/* -- el estado no es una pastilla: es un renglón de rótulo, como todo aquí -- */
[data-estilo="trazo"] .portada-meta .pastilla{
  background:none;border:0;border-radius:0;padding:0;
  color:color-mix(in srgb, var(--marca) 52%, transparent);
  font-size:inherit;letter-spacing:inherit;
}
[data-estilo="trazo"] .portada-meta .punto{
  width:4px;height:4px;box-shadow:none;
}
[data-estilo="trazo"] .portada-meta .sep{border-radius:0;width:1px;height:9px;}

/* -- barra de arriba: una línea, sin panel flotante -- */
[data-estilo="trazo"] .nav{
  background:color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trazo-tenue);
  box-shadow:none;
}
[data-estilo="trazo"] .nav-inner{border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;}
[data-estilo="trazo"] .nav .btn{
  border-radius:0;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
}
[data-estilo="trazo"] .selector-idioma{border-radius:0;border-color:var(--trazo-linea);background:transparent;}
[data-estilo="trazo"] .selector-idioma button{border-radius:0;letter-spacing:.12em;}

/* -- el catálogo como ÍNDICE numerado, no como tarjetas. Este es el cambio
      que más separa esta página de cualquier otra del sistema. -- */
[data-estilo="trazo"] .grupo-cuerpo{counter-reset:trazo-fila;display:block;}
[data-estilo="trazo"] .svc{
  position:relative;
  border:0;border-top:1px solid var(--trazo-tenue);border-radius:0;
  background:none;box-shadow:none;
  padding:30px 0 30px 66px;
  align-items:baseline;
  transition:padding-left .45s cubic-bezier(.22,.7,.2,1);
}
[data-estilo="trazo"] .grupo-cuerpo .svc:last-child{border-bottom:1px solid var(--trazo-tenue);}
[data-estilo="trazo"] .svc::before{
  counter-increment:trazo-fila;
  content:counter(trazo-fila, decimal-leading-zero);
  position:absolute;left:0;top:32px;
  font-family:var(--texto-font);font-size:10.5px;letter-spacing:.16em;
  color:color-mix(in srgb, var(--marca) 38%, transparent);
  transition:color .35s ease;
}
/* La línea que barre de izquierda a derecha al pasar el mouse: el gesto de
   trazar, otra vez. */
[data-estilo="trazo"] .svc::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--marca);transform-origin:left;scale:0 1;
  transition:scale .5s cubic-bezier(.22,.7,.2,1);
}
[data-estilo="trazo"] .svc:hover{padding-left:82px;box-shadow:none;}
[data-estilo="trazo"] .svc:hover::after{scale:1 1;}
[data-estilo="trazo"] .svc:hover::before{color:var(--marca);}
[data-estilo="trazo"] .svc-nombre{
  font-family:var(--display);font-weight:300;font-size:clamp(22px,3.4vw,34px);
  letter-spacing:.01em;line-height:1.15;
}
[data-estilo="trazo"] .svc-desc{
  font-size:13.5px;line-height:1.7;margin-top:9px;max-width:52ch;
  color:color-mix(in srgb, var(--marca) 52%, transparent);
}
[data-estilo="trazo"] .svc-meta{
  margin-top:13px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb, var(--marca) 42%, transparent);
}

/* -- destacados y cabeceras de grupo: sin cajas -- */
[data-estilo="trazo"] .bloque-destacados{display:none;}
[data-estilo="trazo"] .grupo-head{
  border:0;border-radius:0;background:none;padding:0 0 4px;
}
/* La categoría es un rótulo de sección, no un segundo titular: antes competía
   con "Everything we do" y la página tenía dos voces gritando. */
[data-estilo="trazo"] .grupo-head h2{
  font-family:var(--texto-font);
  font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:color-mix(in srgb, var(--marca) 44%, transparent);
}
[data-estilo="trazo"] .grupo-head .cuenta{
  background:none;border-radius:0;padding:0 0 0 12px;
  font-size:10px;letter-spacing:.16em;
  color:color-mix(in srgb, var(--marca) 30%, transparent);
}
[data-estilo="trazo"] #titulo-catalogo{
  font-weight:300;font-size:clamp(30px,5.4vw,58px);letter-spacing:.012em;
}

/* -- el buscador: una línea, no una pastilla -- */
[data-estilo="trazo"] .buscador{margin:26px 0 34px;}
[data-estilo="trazo"] .buscador input{
  border:0;border-bottom:1px solid var(--trazo-tenue);border-radius:0;
  background:none;padding:12px 0;
  font-family:var(--texto-font);font-size:12px;letter-spacing:.14em;
  transition:border-color .35s ease;
}
[data-estilo="trazo"] .buscador input:focus{border-bottom-color:var(--marca);}
[data-estilo="trazo"] .buscador input::placeholder{
  text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;
  color:color-mix(in srgb, var(--marca) 34%, transparent);
}
[data-estilo="trazo"] .buscador-conteo{
  background:none;border-radius:0;font-size:10px;letter-spacing:.16em;
}

/* -- el cajón de reserva también, para que no se rompa el idioma visual -- */
[data-estilo="trazo"] .drawer{border-left:1px solid var(--trazo-linea);}
[data-estilo="trazo"] .drawer-paso{letter-spacing:.24em;font-size:10px;}
[data-estilo="trazo"] .drawer-titulo{font-weight:300;font-size:24px;letter-spacing:.012em;}
[data-estilo="trazo"] .drawer .btn,
[data-estilo="trazo"] .drawer input,
[data-estilo="trazo"] .drawer select,
[data-estilo="trazo"] .drawer textarea,
[data-estilo="trazo"] .hora,
[data-estilo="trazo"] .cal-dia{border-radius:0;}
[data-estilo="trazo"] .drawer .btn{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
}
[data-estilo="trazo"] .svc,
[data-estilo="trazo"] .destacado,
[data-estilo="trazo"] .panel-lateral{border-radius:0;}

/* -- el botón de cada renglón: escuadra y rótulo, no pastilla -- */
[data-estilo="trazo"] .btn,
[data-estilo="trazo"] .btn-linea,
[data-estilo="trazo"] .btn-sm{border-radius:0;}
[data-estilo="trazo"] .svc .btn{
  align-self:center;
  padding:11px 22px;
  border:1px solid var(--trazo-linea);background:transparent;color:var(--marca);
  font-family:var(--texto-font);
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
[data-estilo="trazo"] .svc:hover .btn{background:var(--marca);color:var(--fondo);border-color:var(--marca);}

/* La duración en minúscula: "1 H" parecía un error de dato. Con el tracking
   ya se lee como rótulo, sin necesidad de gritarlo. */
[data-estilo="trazo"] .svc-meta{text-transform:none;letter-spacing:.13em;font-size:11px;}

/* -- las tarjetas laterales: sin caja, separadas por línea -- */
[data-estilo="trazo"] .card{
  border:0;border-top:1px solid var(--trazo-tenue);border-radius:0;
  background:none;box-shadow:none;padding:24px 0;
}
[data-estilo="trazo"] .card h3{
  font-family:var(--texto-font);
  font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:color-mix(in srgb, var(--marca) 46%, transparent);margin-bottom:14px;
}
/* Los horarios venían apretados en una columna y "08:00 - 17:00" se partía en
   tres renglones. Con el día a la izquierda y la hora a la derecha, cada
   renglón cabe entero. */
[data-estilo="trazo"] .fila-horario{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:8px 0;font-size:12.5px;
  color:color-mix(in srgb, var(--marca) 60%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--marca) 7%, transparent);
}
[data-estilo="trazo"] .fila-horario:last-child{border-bottom:0;}
[data-estilo="trazo"] .fila-horario .horas{
  white-space:nowrap;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--marca) 84%, transparent);
}
[data-estilo="trazo"] .fila-horario.hoy .dia,
[data-estilo="trazo"] .fila-horario.hoy .horas{color:var(--marca);}

/* -- entrada escenificada: cada pieza entra en su turno, sin prisa. Es lo que
      hace que la página se sienta compuesta y no cargada de golpe. -- */
@keyframes trazo-subir{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes trazo-aparecer{to{opacity:1;}}
@keyframes trazo-linea{to{scale:1 1;}}

[data-estilo="trazo"] .portada-logotipo,
[data-estilo="trazo"] .portada-rubro,
[data-estilo="trazo"] .portada h1,
[data-estilo="trazo"] .portada-desc,
[data-estilo="trazo"] .portada-meta,
[data-estilo="trazo"] .portada-botones{
  opacity:0;animation:trazo-subir .95s cubic-bezier(.22,.7,.2,1) forwards;
}
[data-estilo="trazo"] .portada-logotipo{animation-delay:.10s;}
[data-estilo="trazo"] .portada-rubro  {animation-delay:.34s;}
[data-estilo="trazo"] .portada h1     {animation-delay:.50s;}
[data-estilo="trazo"] .portada-desc   {animation-delay:.78s;}
[data-estilo="trazo"] .portada-meta   {animation-delay:.98s;}
[data-estilo="trazo"] .portada-botones{animation-delay:1.16s;}

/* Quien pide menos movimiento ve la página compuesta, no en movimiento. */
@media (prefers-reduced-motion:reduce){
  [data-estilo="trazo"] .portada-logotipo,
  [data-estilo="trazo"] .portada-rubro,
  [data-estilo="trazo"] .portada h1,
  [data-estilo="trazo"] .portada-desc,
  [data-estilo="trazo"] .portada-meta,
  [data-estilo="trazo"] .portada-botones,
  [data-estilo="trazo"] .portada-contenido::before,
  [data-estilo="trazo"] .portada-contenido::after{
    opacity:1;animation:none;transform:none;
  }
  [data-estilo="trazo"] .portada-meta::before{scale:1 1;animation:none;}
}

@media (max-width:640px){
  [data-estilo="trazo"] .svc{padding-left:52px;}
  [data-estilo="trazo"] .svc:hover{padding-left:58px;}
  [data-estilo="trazo"] .portada-contenido::before,
  [data-estilo="trazo"] .portada-contenido::after{display:none;}
}


/* ==================================================================
   El cajón como asistente por pasos: cabecera con icono, barra de
   progreso y opciones como tarjetas en vez de desplegables.
   ================================================================== */

.drawer-head{align-items:center;gap:14px;}
.drawer-textos{min-width:0;flex:1;}
.drawer-ico{
  flex:0 0 40px;width:40px;height:40px;border-radius:11px;
  display:grid;place-items:center;font-size:18px;line-height:1;
  background:var(--marca-tenue,rgba(255,255,255,.10));color:var(--marca);
}

/* -- barra de progreso, pegada encima de los botones -- */
.drawer-progreso{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px 0;
}
.drawer-progreso .barra{
  flex:1;height:3px;border-radius:99px;overflow:hidden;
  background:var(--borde);
}
.drawer-progreso .barra span{
  display:block;height:100%;background:var(--marca);border-radius:99px;
  transition:width .45s cubic-bezier(.22,.7,.2,1);
}
.drawer-progreso .cuenta{
  font-size:12px;font-weight:600;color:var(--texto-3);
  font-variant-numeric:tabular-nums;
}

/* -- opciones como tarjetas. Se usa cuando hay POCAS: con muchas, una
      rejilla de tarjetas se vuelve más difícil de leer que una lista. -- */
.opciones-tarjeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;}
.opcion-tarjeta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-height:74px;padding:12px 10px;text-align:center;
  border:1.5px solid var(--borde);border-radius:var(--r-md,12px);
  background:transparent;color:var(--texto);cursor:pointer;
  font:inherit;font-size:13px;line-height:1.3;
  transition:border-color .18s, background .18s, transform .18s;
}
.opcion-tarjeta:hover{border-color:var(--borde-fuerte);}
.opcion-tarjeta.sel{
  border-color:var(--marca);
  background:var(--marca-tenue,rgba(0,0,0,.04));
  font-weight:600;
}
.opcion-tarjeta:focus-visible{outline:2px solid var(--marca);outline-offset:2px;}

/* -- los próximos días como tarjetas, encima del calendario -- */
.dias-rapidos{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px;margin-bottom:14px;}
.dia-rapido{
  display:flex;flex-direction:column;gap:4px;padding:12px 13px;text-align:left;
  border:1.5px solid var(--borde);border-radius:var(--r-md,12px);
  background:transparent;color:var(--texto);cursor:pointer;font:inherit;
  transition:border-color .18s, background .18s;
}
.dia-rapido:hover{border-color:var(--borde-fuerte);}
.dia-rapido.sel{border-color:var(--marca);background:var(--marca-tenue,rgba(0,0,0,.04));}
.dia-rapido .d{font-size:13.5px;}
.dia-rapido .d b{font-weight:700;}
.dia-rapido .libre{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--texto-3);
}
.dia-rapido .libre::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#22C55E;
}
.ver-calendario{
  background:none;border:0;padding:0;margin-bottom:12px;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--marca);text-decoration:underline;
  text-underline-offset:3px;
}


/* -- El cajón pasa a ser una tarjeta CENTRADA, no un panel lateral.
      Centrado, la reserva se lee como una sola cosa a la que se le presta
      atención; pegada al costado compite con la página de atrás. En el
      teléfono sigue ocupando la pantalla, que ahí es lo mismo. -- */
.drawer{
  top:50%;right:auto;bottom:auto;left:50%;
  width:min(560px,calc(100% - 32px));
  max-height:min(88vh,780px);
  border-left:0;border:1px solid var(--borde);
  border-radius:var(--r-lg,18px);overflow:hidden;
  transform:translate(-50%,-46%) scale(.97);
  opacity:0;pointer-events:none;
  transition:transform .34s var(--ease), opacity .26s ease;
}
.drawer.abierto{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;pointer-events:auto;
}
.drawer-head{padding:22px 26px 18px;}
.drawer-body{padding:22px 26px;}
.drawer-pie{padding:16px 26px 22px;}
.drawer-progreso{padding:14px 26px 0;}

@media(max-width:560px){
  .drawer{
    top:auto;bottom:0;left:0;transform:translateY(100%);
    width:100%;max-height:92vh;
    border-radius:var(--r-lg,18px) var(--r-lg,18px) 0 0;
  }
  .drawer.abierto{transform:translateY(0);}
  .drawer-head{padding:18px 18px 14px;}
  .drawer-body,.drawer-pie{padding-left:18px;padding-right:18px;}
  .drawer-progreso{padding-left:18px;padding-right:18px;}
}

/* -- un grupo de preguntas por paso -- */
.paso-grupo[hidden]{display:none;}
.paso-grupo{animation:paso-entra .3s var(--ease);}
@keyframes paso-entra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .paso-grupo{animation:none;}
  .drawer{transition:opacity .2s ease;}
}


/* ==================================================================
   Cuenta del cliente y «Mi cita» (solo negocios con cuentas: Nexel).
   Ver cuenta.js. Todo sale de los tokens de la marca del negocio.
   ================================================================== */

/* «Tienes una reserva sin terminar»: baja desde arriba como el aviso de pago. */
.aviso-borrador{
  position:fixed;left:50%;top:16px;transform:translate(-50%,-160%);z-index:200;
  width:min(560px,92vw);display:flex;align-items:center;gap:14px;
  padding:14px 14px 14px 20px;border-radius:14px;border-left:4px solid var(--marca);
  background:var(--superficie);color:var(--texto);border:1px solid var(--borde);
  box-shadow:var(--sombra-alta);font-size:14px;line-height:1.45;
  transition:transform .45s var(--ease);
}
.aviso-borrador.visible{transform:translate(-50%,0);}
.aviso-borrador > div{flex:1;min-width:0;display:flex;flex-direction:column;}
.aviso-borrador span{color:var(--texto-2);font-size:13px;}

.aviso-suave{
  background:var(--marca-tenue);color:var(--texto);
  border:1px solid var(--borde);
}

/* dentro de «Tus datos» */
.link-btn{
  background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;
  color:var(--marca);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.link-btn:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:4px;}
.cuenta-enlaces{display:flex;flex-wrap:wrap;gap:10px 18px;margin:2px 0 6px;}
.cuenta-enlaces.centrado{justify-content:center;margin-top:18px;}
.cuenta-intro{margin:0 0 14px;font-size:13px;}
.cuenta-sesion{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:16px;border-radius:var(--r-sm);
  background:var(--marca-tenue);font-size:13.5px;color:var(--texto-2);
}
.cuenta-sesion strong{color:var(--texto);}

#nav-mi-cita{display:inline-flex;align-items:center;gap:7px;}
/* la barra superior se queda puesta en «Mi cita»: ahí no hay portada */
.nav.fija{transform:translateY(0);border-bottom-color:var(--borde);}

/* ---------- la página ---------- */
.mi-cita{padding-top:96px;padding-bottom:64px;max-width:760px;display:flex;flex-direction:column;gap:18px;}
.mc-hola{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.mc-hola h1{font-family:var(--display);font-weight:var(--display-peso);letter-spacing:var(--display-tracking);
  font-size:clamp(28px,4.4vw,40px);line-height:1.1;margin-top:6px;text-wrap:balance;}

.mc-tarjeta{
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-lg);
  box-shadow:var(--sombra);padding:clamp(20px,4vw,34px);
}
.mc-tarjeta h2{font-family:var(--display);font-weight:var(--display-peso);letter-spacing:var(--display-tracking);
  font-size:clamp(22px,3.2vw,30px);line-height:1.15;text-wrap:balance;}
.mc-sub{color:var(--texto-2);font-size:15px;margin-top:8px;line-height:1.5;}
.mc-entrar{max-width:440px;width:100%;margin:24px auto 0;display:flex;flex-direction:column;gap:6px;}
.mc-entrar h2{margin:6px 0 14px;}
.mc-vacio{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}

.mc-borrador{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-radius:var(--r-md);border:1px dashed var(--borde-fuerte);background:var(--marca-tenue);
}
.mc-borrador > div{display:flex;flex-direction:column;font-size:14px;}
.mc-borrador span{color:var(--texto-2);font-size:13px;}

.mc-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.mc-num{font-size:12.5px;color:var(--texto-3);font-variant-numeric:tabular-nums;}
.mc-pill{
  display:inline-block;padding:5px 12px;border-radius:var(--r-full);font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  background:var(--marca-tenue);color:var(--texto);
}
.mc-pill.confirmada,.mc-pill.asistio{background:color-mix(in srgb,#16a34a 16%,transparent);color:#15803d;}
.mc-pill.esperando_pago,.mc-pill.pago_por_verificar{background:color-mix(in srgb,#d97706 16%,transparent);color:#b45309;}
.mc-pill.cancelada,.mc-pill.expirada,.mc-pill.no_asistio{background:var(--superficie-2);color:var(--texto-3);}

/* la cuenta regresiva: el dato que más se mira */
.mc-reloj{margin:24px 0 6px;}
.mc-reloj-lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);margin-bottom:10px;}
.mc-celdas{display:flex;gap:10px;}
.mc-celda{
  flex:1;max-width:110px;padding:14px 8px 10px;border-radius:var(--r-md);text-align:center;
  background:var(--marca-tenue);border:1px solid var(--borde);
}
.mc-celda b{display:block;font-family:var(--display);font-weight:var(--display-peso);font-size:clamp(26px,5vw,40px);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.mc-celda span{display:block;margin-top:6px;font-size:11.5px;color:var(--texto-2);text-transform:uppercase;letter-spacing:.06em;}
.mc-reloj-txt{font-size:16px;font-weight:700;color:var(--texto-2);}
.mc-reloj-txt.en-curso{color:#15803d;}

.mc-cuando{padding:16px 0 4px;}
.mc-cuando-grande{font-size:18px;font-weight:700;}
.mc-cuando-grande::first-letter{text-transform:uppercase;}
.mc-cuando-zona{font-size:13.5px;color:var(--texto-2);margin-top:4px;}

.mc-reunion{margin:18px 0 4px;padding:18px;border-radius:var(--r-md);border:1px solid var(--borde);transition:box-shadow .3s,border-color .3s;}
.mc-reunion.encendida{border-color:var(--marca);box-shadow:0 0 0 4px var(--marca-tenue);}
.mc-link{margin-top:12px;font-size:12.5px;color:var(--texto-3);display:flex;flex-direction:column;gap:3px;}
.mc-link a{color:var(--texto-2);overflow-wrap:anywhere;}
.mc-lugar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:16px 0 4px;font-size:14px;}
.mc-lugar span{color:var(--texto-3);}

.mc-confirmar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:18px 0 4px;padding:18px;border-radius:var(--r-md);background:var(--marca-tenue);
}
.mc-confirmar > div{display:flex;flex-direction:column;gap:2px;font-size:14.5px;}
.mc-confirmar span{color:var(--texto-2);font-size:13px;}
.mc-confirmado{margin:18px 0 4px;padding:14px 18px;border-radius:var(--r-md);font-weight:700;font-size:14.5px;
  background:color-mix(in srgb,#16a34a 12%,transparent);color:#15803d;}

.mc-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.mc-bloque{margin-top:26px;padding-top:22px;border-top:1px solid var(--borde);}
.mc-bloque h3,.mc-lista h3{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-3);margin-bottom:12px;}
.mc-consejos{padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:var(--texto-2);line-height:1.5;}
.mc-ayuda p{font-size:14.5px;color:var(--texto-2);}
.mc-ayuda .mc-acciones{margin-top:12px;}

.mc-lista{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.mc-fila{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"fecha pill" "svc pill";gap:2px 14px;align-items:center;
  width:100%;text-align:left;font:inherit;color:inherit;padding:14px 16px;border-radius:var(--r-md);
  background:var(--superficie);border:1px solid var(--borde);
}
button.mc-fila{cursor:pointer;}
button.mc-fila:hover{border-color:var(--borde-fuerte);}
button.mc-fila:focus-visible{outline:2px solid var(--marca);outline-offset:2px;}
.mc-fila-fecha{grid-area:fecha;font-weight:600;font-size:14px;}
.mc-fila-fecha::first-letter{text-transform:uppercase;}
.mc-fila-svc{grid-area:svc;font-size:13px;color:var(--texto-2);}
.mc-fila .mc-pill{grid-area:pill;}
.mc-otra{text-align:center;margin-top:8px;}

@media (max-width:560px){
  /* Con el botón de la cuenta, la barra tiene que ceder algo de aire para
     que el logo no quede tapado. */
  .nav .nav-inner{padding-left:12px;padding-right:8px;gap:8px;}
  [data-estilo="vidrio"] .nav{padding:10px 8px;}
  .nav-acciones{gap:6px;}
  .selector-idioma button{padding:5px 8px;}
  #nav-cta{padding:10px 14px;white-space:nowrap;}
  #nav-mi-cita{padding:9px 10px;}
  #nav-mi-cita span{display:none;}
  .mi-cita{padding-top:118px;}
  .mc-celdas{gap:6px;}
  .mc-celda{padding:10px 4px 8px;}
  .mc-confirmar .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .aviso-borrador,.mc-reunion{transition:none;}
}


/* ---------- prueba global, 1-oct-2026 ---------- */
/* La hora del negocio y, debajo, la del visitante cuando está en otra zona. */
.horas-zona{font-size:12.5px;color:var(--texto-2);margin:-4px 0 10px;line-height:1.45;}
.horas.con-zona .hora{display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:8px;padding-bottom:8px;}
.hora small{font-size:10.5px;font-weight:500;opacity:.7;letter-spacing:.01em;}
.ticket-fila.ticket-zona{padding-top:0;margin-top:-4px;font-size:12.5px;}
.ticket-fila.ticket-zona span:last-child{font-weight:500;color:var(--texto-2);}
.ticket-nota{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--texto-2);}
.ticket-mini{
  margin-bottom:16px;padding:10px 14px;border:1px solid var(--borde);border-radius:var(--r-md);
  background:var(--superficie);font-size:13px;font-weight:600;line-height:1.4;
}
.opcion-precio{margin-left:auto;font-weight:700;color:var(--marca);white-space:nowrap;}
.fila-horario .horas{white-space:nowrap;}
.miembro{width:auto;min-width:64px;max-width:120px;}
/* «Mostrar» dentro del campo de la contraseña. */
.campo-clave{position:relative;}
.campo-clave input{padding-right:78px;}
.campo-clave .ver-clave{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:12px;text-decoration:none;}
.mc-pagar{border:1px solid var(--marca);}
.mc-acciones-lbl{font-size:12.5px;color:var(--texto-2);align-self:center;margin-right:4px;}
.aviso-bien{background:color-mix(in srgb, #22c55e 14%, transparent);color:var(--texto);border:1px solid color-mix(in srgb, #22c55e 45%, transparent);}
/* Con el cobro automático no hay «Ya pagué»: el pie del cajón quedaba como una franja vacía. */
.drawer-pie:has(> #boton-ya-pague[hidden]){display:none;}