/* Sign-in pages (.pg-entrada, f-J1c) and /registro steps 1-2 (.pg-registro, f-J1d): part of the portada, not pages apart
   (owner 8-oct: "integrado como la portada", then "hagamos lo mismo con /registro"). One canvas with the portada's glows and
   header (home.css: .hm-aur, and the one site header public/partials/site-head, card n-mv01hm7w, loaded by
   auth/partials/entrar-cabeza) on the portada's own edges (home.css tokens --site-max 1440 / --site-pad 64, 24 on a phone),
   the form near the top of the left column, and the hero's photo window
   on the right that dissolves into the canvas (a mask, never a framed box), with the same floating "Cita confirmada" card
   (auth/partials/entrar-cita). White boxes are the mosaico family (.mz-box, mosaico.css). <1024: the photo dissolves under
   the header and the form follows it, on the first screen. No pause button (owner, n-muzyp3if-b): hover and offscreen pause.
   Loads after app.css and overrides its older .pg-entrada and /registro side rules. */
:is(.pg-entrada,.pg-registro){--hm-canvas:#FBF8F6;--hm-orchid:rgba(180,35,90,.16);--hm-peach:rgba(244,169,127,.22);--hm-lilac:rgba(201,182,242,.30);
  --ent-float:0 0 0 1px rgba(28,25,23,.06),0 16px 48px rgba(28,25,23,.18);--ctl:#78716C;
  --ent-fade-x:linear-gradient(to right,transparent 0,rgba(0,0,0,.4) 18%,#000 38%);
  --ent-fade-y:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.6) 12%,#000 24%,#000 56%,transparent 90%);
  position:relative;min-height:100svh;background:var(--hm-canvas);overflow-x:clip}
:is(.pg-entrada,.pg-registro)>.ent-hd,:is(.pg-entrada,.pg-registro)>.ent-split{position:relative;z-index:1}
:is(.pg-entrada,.pg-registro)>.ent-hd{z-index:3}
/* the header (box, link ink, the Entrar button marked as the current page on the sign-in pages) is home.css's, as on the
   portada: nothing about it is set here (card n-mv01hm7w) */

/* the column, on the portada's left edge */
:is(.pg-entrada,.pg-registro) .ent-split{display:block;min-height:0}
:is(.pg-entrada,.pg-registro) .ent-form{position:relative;z-index:2;display:block;min-height:0;max-width:var(--site-max);margin:0 auto;padding:0 var(--site-pad)}
.pg-entrada .ent-form>main.col{width:400px;max-width:100%;margin:0;padding:48px 0 96px}
.pg-entrada .col h1{font-size:31px;line-height:1.15;letter-spacing:-.01em}

/* the photo window: no frame, no radius, no hairline. The mask sits ONCE on the slides' root (.ent-photos), like the portada's
   .hm-win-ph, never on each photo (owner n-mv03i2sb: "la difuminacion tiene un brinco ... esta bien y luego se hace acorta"):
   with a mask per photo, the old and the new photo are two half-faded layers stacked during each crossfade, so the faded edge
   grows more opaque, then snaps back when the old photo drops (measured 8-oct: up to 46 of 255 gray levels in one frame).
   The "Cita confirmada" card sits outside the masked root (entrar-cita, a sibling in .ent-media), so it stays whole. */
:is(.pg-entrada,.pg-registro) .ent-promo{display:block;position:absolute;top:-88px;right:0;width:56vw;max-width:800px;height:clamp(720px,100svh,940px);min-height:0;padding:0;background:none;overflow:visible;z-index:1}
:is(.pg-entrada,.pg-registro) .ent-media{position:absolute;inset:0;width:auto;height:auto;overflow:visible;border-radius:0;background:none}
:is(.pg-entrada,.pg-registro) .ent-media::after{content:none}
:is(.pg-entrada,.pg-registro) .ent-photos{position:absolute;inset:0;background:transparent;-webkit-mask-image:var(--ent-fade-x),var(--ent-fade-y);-webkit-mask-composite:source-in;mask-image:var(--ent-fade-x),var(--ent-fade-y);mask-composite:intersect}
:is(.pg-entrada,.pg-registro) .ent-photos .cat-slide img{object-position:var(--fx,50%) var(--fy,50%)}
/* the booking card floats where the portada's does */
:is(.pg-entrada,.pg-registro) .ent-bk{position:absolute;left:22%;bottom:42%;z-index:4;display:flex;gap:12px;align-items:center;min-width:280px;max-width:calc(100% - 22% - 96px);padding:12px 16px 12px 12px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:var(--ent-float)}
:is(.pg-entrada,.pg-registro) .ent-bk-ic{width:40px;height:40px;border-radius:12px;background:#DCFCE7;color:#15803D;display:grid;place-items:center;flex:none}
:is(.pg-entrada,.pg-registro) .ent-bk-ic svg{width:20px;height:20px}
:is(.pg-entrada,.pg-registro) .ent-bk b{display:block;font-size:16px;line-height:1.3}
:is(.pg-entrada,.pg-registro) .ent-bk span span{display:block;font-size:13.5px;line-height:1.4;color:var(--muted)}
:is(.pg-entrada,.pg-registro) .ent-photos.is-empty .ent-bk,:is(.pg-entrada,.pg-registro) .ent-photos.is-empty~.ent-bk{display:none}
/* no photo to show (list missing, or every photo failed): no window at all */
:is(.pg-entrada,.pg-registro) .ent-promo:not(:has(.cat-slide)),:is(.pg-entrada,.pg-registro) .ent-promo:has(.ent-photos.is-empty){display:none}

/* a white box of the mosaico family under the form (text on white, below the 8 px cap): «Todo lo tuyo, en un solo lugar»
   on /mi-cuenta/entrar, the side message on /registro */
:is(.pg-entrada,.pg-registro) .ent-caja{margin-top:48px;padding:32px 24px 24px}
:is(.pg-entrada,.pg-registro) .ent-caja h2{font-size:20px;line-height:1.25;font-weight:700}
:is(.pg-entrada,.pg-registro) .ent-caja p{margin-top:8px;max-width:none;font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty}
:is(.pg-entrada,.pg-registro) .ent-caja p b{color:var(--ink);font-weight:600}
:is(.pg-entrada,.pg-registro) .ent-caja ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
:is(.pg-entrada,.pg-registro) .ent-caja li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5}
:is(.pg-entrada,.pg-registro) .ent-caja li svg{flex:none;width:24px;height:24px;color:var(--accent)}

/* /registro: the sign-up form keeps its own pieces (the step bar, the type tiles, the plans, the fields) on the canvas, with
   no white sheet behind it; the controls stay white like the sign-in fields. Its pieces carry 16 px of their own side
   padding (phone-first), so the column steps 16 px out and their text lands on the portada's edge. */
.pg-registro .ent-form>main.rg-col{display:block;width:512px;max-width:calc(100% + 32px);margin:0 -16px;padding:24px 0 96px}
.pg-registro .app{max-width:none;min-height:0;margin:0;padding:0;background:none;border:0}
.pg-registro .topbar{padding:0 4px 0 0;background:none;border:0}
.pg-registro .ct-title h1{font-size:31px;line-height:1.15;letter-spacing:-.01em}
.pg-registro .ct-chosen{border-bottom:0}
.pg-registro .regp.mz-box{margin:16px 16px 0;padding:32px 24px 24px}
.pg-registro .ent-caja{margin:16px 16px 0}  /* the «¿Ya tenés cuenta?» line above it ends with 32 px of its own */
.pg-registro .ent-caja .rg-price{margin-top:16px}
/* a computer: the photo window stays in view while the long form scrolls */
@media (min-width:1024px){
  .pg-registro .ent-promo{bottom:0;height:auto;min-height:clamp(720px,100svh,940px)}
  .pg-registro .ent-media{position:sticky;inset:auto;top:0;height:clamp(720px,100svh,940px)}
}

/* <1024: the photo dissolves under the header (as the portada's does under 900) and the form follows it */
@media (max-width:1023px){
  :is(.pg-entrada,.pg-registro) .ent-split{display:flex;flex-direction:column}
  :is(.pg-entrada,.pg-registro) .ent-promo{order:1;position:relative;top:auto;right:auto;width:100%;max-width:none;margin-top:-88px;height:clamp(240px,calc(100svh - 440px),320px)}
  :is(.pg-entrada,.pg-registro) .ent-form{order:2;width:100%;padding:0 var(--site-pad)}
  .pg-entrada .ent-form>main.col{margin:0 auto;padding:8px 0 64px}
  .pg-registro .ent-form>main.rg-col{margin:0 auto;padding:0 0 64px}
  :is(.pg-entrada,.pg-registro){--ent-fade-y:linear-gradient(to bottom,rgba(0,0,0,.35) 0,#000 36%,#000 72%,transparent 100%)}
  :is(.pg-entrada,.pg-registro) .ent-photos{-webkit-mask-image:var(--ent-fade-y);-webkit-mask-composite:source-over;mask-image:var(--ent-fade-y);mask-composite:add}
  /* a wide, short crop of a portrait: each photo brings its own vertical focus (--sy) */
  :is(.pg-entrada,.pg-registro) .ent-photos .cat-slide img{object-position:var(--fx,50%) var(--sy,30%)}
  :is(.pg-entrada,.pg-registro) .ent-bk{display:none}
}
/* phone: the header is 72 px and the sides are the portada's 24 px (--site-pad, card n-mv01hm7w), so the logo does not move
   between pages. At 24 px "Mantener la sesión abierta en este dispositivo" takes two lines and the /entrar form grows to 512 px
   (to its Entrar button): the photo strip gives those 24 px back, 152 px tall in Safari on an iPhone 13 (664 px visible,
   measured 8-oct), so the Entrar button still ends on the first screen (f-J1c), up to 280 px when there is room. */
@media (max-width:767px){
  :is(.pg-entrada,.pg-registro) .ent-promo{margin-top:-72px;height:clamp(152px,calc(100svh - 512px),280px)}
  .pg-entrada .ent-form>main.col{width:auto;padding:8px 0 48px}
  .pg-entrada .col h1{font-size:24px}
  :is(.pg-entrada,.pg-registro) .ent-caja{margin-top:32px;padding:32px 16px 16px}
  .pg-registro .ent-form>main.rg-col{width:auto;max-width:none;margin:0 -16px;padding:0 0 48px}
  .pg-registro .ct-title h1{font-size:24px}
  .pg-registro .regp.mz-box{padding:32px 16px 16px}
  .pg-registro .ent-caja{margin:0 16px}
}