:root {
  color-scheme: light;
  --paper: #f4f1ec;
  --ink: #172126;
  --muted: #626975;
  --gold: #94692e;
  --line: #dededc;
  --focus: #906429;
  --heading: Barlow, system-ui, sans-serif;
  --body: Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: #805a23; text-underline-offset: 4px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.login-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: clamp(20px, 3vw, 48px); }
.ticket-wrap { width: min(1440px, 100%); filter: drop-shadow(0 18px 26px #392b1815); }
.ticket {
  --form-width: 43%;
  --seam-position: calc(100% - var(--form-width));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--form-width);
  grid-template-areas: "visual form";
  width: 100%;
  background: #fff;
  border-radius: 30px;
  isolation: isolate;
  /* Subtract holes from the whole card so the actual page shows through.
     The outer wrapper casts a shadow that follows the cut silhouette. */
  --ticket-mask:
    radial-gradient(circle at var(--seam-position) 0, transparent 23.5px, #000 24.5px),
    radial-gradient(circle at var(--seam-position) 100%, transparent 23.5px, #000 24.5px),
    radial-gradient(circle at 0 50%, transparent 21.5px, #000 22.5px),
    radial-gradient(circle at 100% 50%, transparent 21.5px, #000 22.5px);
  -webkit-mask-image: var(--ticket-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--ticket-mask);
  mask-composite: intersect;
}
.login-panel { grid-area: form; min-width: 0; padding: clamp(32px, 3.3vw, 52px) clamp(30px, 4.3vw, 68px); display: flex; flex-direction: column; justify-content: center; border-radius: 0 30px 30px 0; }
.brand { display: block; color: var(--ink); text-decoration: none; width: min(100%, 340px); margin-bottom: 28px; }
.brand-image { display: block; width: 100%; height: auto; aspect-ratio: 4.3; object-fit: cover; }
.gold-rule { display: block; width: 34px; height: 3px; background: #b68a47; border-radius: 3px; }
.login-heading .gold-rule { margin-bottom: 17px; }
.login-heading h1 { font-family: var(--heading); font-size: clamp(34px, 3vw, 44px); line-height: 1.12; letter-spacing: -1px; font-weight: 600; margin: 0 0 9px; }
.login-heading p { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0 0 26px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; line-height: 1.4; font-weight: 500; margin-bottom: 8px; color: #424b53; }
.input-wrap { display: flex; align-items: center; min-height: 54px; padding: 0 15px; background: #fff; border: 1px solid #d4d7da; border-radius: 10px; color: #6b737c; transition: border-color .2s, box-shadow .2s; }
.input-wrap:focus-within { border-color: #a57c3f; box-shadow: 0 0 0 3px #b98a4517; }
.input-wrap input { min-width: 0; width: 100%; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 16px; line-height: 1.4; padding: 15px 11px; }
.input-wrap input::placeholder { color: #858b92; opacity: 1; }
/* Al autorrellenar, el navegador pinta el input de azul —solo el input, no el
   campo entero, de ahí el rectángulo—, y ese fondo no se deja cambiar con
   background. Se tapa con una sombra interior del color del campo; el retardo
   de la transición evita que vuelva a pintarlo al enfocar. La pantalla de
   registro hace lo mismo con su propio color. */
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}
/* Selector estándar, para los navegadores que no entienden el de WebKit. Va en
   su propia regla: si no lo reconocen, invalidaría la de arriba. */
.input-wrap input:autofill {
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
.input-wrap:has([aria-invalid="true"]) { border-color: #b44235; }
.password-toggle { border: 0; background: none; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; color: #67717a; padding: 10px; margin-right: -10px; border-radius: 7px; }
.password-toggle:hover { background: #f5f3ef; }
.password-toggle[aria-pressed="true"] .eye-slash { display: none; }
.form-options { display: flex; justify-content: flex-end; margin: -4px 0 15px; }
.form-options a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; line-height: 1.5; }
.caps-hint { color: #835618; font-size: 13px; line-height: 1.5; margin: -6px 0 12px; }
.form-error { color: #953325; background: #fff1ec; border: 1px solid #f1d2c8; border-radius: 9px; font-size: 14px; line-height: 1.5; padding: 12px; margin: 0 0 16px; }
.submit { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 54px; border: 1px solid #967239; border-radius: 10px; color: #fff; background: linear-gradient(110deg, #a67b3c, #7e602f); box-shadow: inset 0 1px 0 #ffffff24, 0 4px 10px #85622e10; font-family: var(--heading); font-size: 19px; font-weight: 600; transition: filter .2s; }
.submit:hover { filter: brightness(1.08); }
.submit:disabled { cursor: wait; opacity: .65; }
.signup { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 7px; margin-top: 25px; padding-top: 18px; border-top: 1px solid #ece8e1; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
.signup a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; text-decoration: none; }
.signup a:hover { text-decoration: underline; }

/* Decorative tear line between the two panels. */
.ticket-seam { position: absolute; top: 30px; bottom: 30px; left: var(--seam-position); width: 12px; transform: translateX(-50%); z-index: 4; pointer-events: none; background: radial-gradient(ellipse 1.5px 3px at center, #c7bfb3 98%, transparent) center / 6px 16px repeat-y; }

.showcase { grid-area: visual; position: relative; min-width: 0; overflow: hidden; border-radius: 30px 0 0 30px; background: #26352e; color: #fff; }
.slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; background: radial-gradient(ellipse at 80% 20%, #8d7651, #26352e 65%); }
.slide.is-active { opacity: 1; visibility: visible; }
.slide img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.75) sepia(.12); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #131c2160, #111b2012 25%, #111b2060 46%, #101b23f0 100%); }
.slide-copy { position: absolute; z-index: 1; left: clamp(30px, 3.3vw, 52px); right: 30px; bottom: 108px; }
.eyebrow { display: block; color: #f0dcb9; font-family: var(--heading); font-weight: 500; font-size: 11px; line-height: 1.5; text-transform: uppercase; letter-spacing: 2.6px; margin-bottom: 15px; }
.slide-copy h2 { font-family: var(--heading); font-weight: 500; font-size: clamp(34px, 3.25vw, 49px); line-height: 1.12; letter-spacing: -.8px; margin: 0 0 22px; }
.slide-copy p { max-width: 36ch; font-size: 14px; line-height: 1.6; color: #e3e5e2; margin: 17px 0 0; }
.feature-card { position: absolute; top: 38px; right: 30px; display: flex; align-items: center; gap: 12px; max-width: 55%; padding: 14px 16px; border: 1px solid #ffffff65; border-radius: 13px; background: #fffffff0; color: var(--ink); box-shadow: 0 8px 25px #00000012; }
.feature-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 46px; border-radius: 9px; background: #fff1eb; }
.feature-icon img { display: block; width: 30px; height: 30px; }
.feature-card div { min-width: 0; }
.feature-card div > span, .feature-card small { display: block; font-size: 11px; line-height: 1.4; color: #636c70; }
.feature-card strong { display: block; font-family: var(--heading); font-size: 17px; line-height: 1.2; font-weight: 600; margin: 4px 0; }
.slider-controls { position: absolute; left: clamp(26px, 3.3vw, 48px); right: 30px; bottom: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.slider-dots, .slider-actions { display: flex; align-items: center; gap: 4px; }
.slider-dots button { position: relative; width: 36px; height: 44px; padding: 0; border: 0; background: none; }
.slider-dots button::after { content: ""; display: block; width: 6px; height: 6px; margin: auto; border-radius: 8px; background: #ffffff80; transition: width .2s; }
.slider-dots button[aria-current="true"]::after { width: 25px; background: #e3bf7d; }
.slider-actions button { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; border: 1px solid #ffffff50; border-radius: 50%; background: #ffffff0d; }
.slider-actions button:hover { background: #ffffff26; }
.slider-actions svg { width: 18px; height: 18px; }
.showcase :focus-visible { outline-color: #f1cd84; }

@media (min-width: 1001px) and (max-width: 1199px) {
  .ticket { --form-width: 46%; }
  .login-panel { padding-inline: 38px; }
  .feature-card { top: 35px; left: 30px; right: auto; max-width: calc(100% - 60px); }
  .slide-copy h2 { font-size: 37px; }
}
/* Sin dos columnas la imagen deja de ser un lateral y pasa a ser la portada:
   va arriba, ocupa un tercio de la pantalla y lleva menos velo encima, que
   era lo que antes la dejaba en penumbra al final de la página. */
@media (max-width: 1000px) {
  .login-page { padding: 24px; }
  .ticket-wrap { width: min(560px, 100%); }
  .ticket { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "form"; border-radius: 24px; -webkit-mask-image: none; mask-image: none; }
  .login-panel { padding: 32px clamp(24px, 7vw, 64px) 30px; border-radius: 0 0 24px 24px; }
  .brand { margin-bottom: 22px; }
  .ticket-seam { display: none; }
  .showcase { height: clamp(290px, 36vh, 340px); border-radius: 24px 24px 0 0; }
  .slide img { filter: saturate(.9) sepia(.05); object-position: center 45%; }
  /* El velo se abre en la mitad de arriba —ahí se ve la foto— y se cierra
     en la de abajo, que es donde va el texto. */
  .slide::after { background: linear-gradient(180deg, #131c2124, #131c210d 24%, #111b2070 54%, #0f1a22f0 100%); }
  .feature-card { top: 18px; left: 22px; right: auto; max-width: calc(100% - 44px); padding: 10px 13px; gap: 10px; }
  .slide-copy { left: 26px; right: 26px; bottom: 74px; }
  /* La sombra hace el trabajo que antes hacía oscurecer la foto entera: el
     titular se lee igual sobre una sala en penumbra que sobre un centro de
     mesa a plena luz, y la imagen se queda como está. */
  .slide-copy h2 { font-size: 30px; margin-bottom: 10px; text-shadow: 0 1px 3px #0b131899, 0 6px 24px #0b1318a6; }
  .slide-copy > .gold-rule { display: none; }
  .slide-copy p { font-size: 13px; margin-top: 10px; }
  .eyebrow { display: none; }
  .slider-controls { left: 22px; right: 20px; bottom: 14px; }
}
/* En el móvil la portada va a sangre —sin margen ni esquinas— y el formulario
   sube por encima como una hoja: así la foto se ve entera nada más abrir, que
   es lo que no ocurría cuando quedaba debajo del formulario. */
@media (max-width: 480px) {
  .login-page { padding: 0; place-items: stretch; }
  .ticket-wrap { width: 100%; filter: none; }
  /* La hoja blanca llega hasta abajo aunque sobre sitio: si no, queda una
     franja del color del papel bajo el formulario. */
  .ticket { grid-template-rows: auto 1fr; min-height: 100svh; border-radius: 0; background: transparent; }
  .showcase { height: clamp(235px, 34vh, 310px); border-radius: 0; }
  .login-panel {
    position: relative; z-index: 2; margin-top: -22px; background: #fff; justify-content: flex-start;
    padding: 26px 24px calc(24px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; box-shadow: 0 -12px 26px #2c221410;
  }
  .brand { width: min(100%, 255px); margin-bottom: 19px; }
  .login-heading h1 { font-size: 33px; }
  .login-heading p { font-size: 15px; margin-bottom: 21px; }
  .login-heading .gold-rule { margin-bottom: 14px; }
  .field { margin-bottom: 15px; }
  .input-wrap { min-height: 52px; }
  .signup { margin-top: 20px; padding-top: 14px; }
  /* En una portada de 34 vh no caben la tarjeta, el titular y los puntos sin
     pisarse. Manda el titular: la tarjeta de HubSpot vuelve a partir de 481 px,
     donde sí hay sitio. */
  .feature-card { display: none; }
  /* Basta con deslizar o tocar los puntos; queda el botón de pausa, que es el
     que hace falta para poder detener el carrusel. */
  #prevSlide, #nextSlide { display: none; }
  /* La hoja tapa los últimos 22 px de la portada: el texto y los puntos se
     apartan de esa franja para no quedar cortados. */
  .slide-copy { left: 22px; right: 22px; bottom: 84px; }
  .slide-copy h2 { font-size: clamp(26px, 7.4vw, 32px); line-height: 1.12; letter-spacing: -.3px; }
  .slide-copy p { display: none; }
  .slider-controls { left: 16px; right: 16px; bottom: 34px; gap: 4px; }
  .slider-dots { gap: 0; }
  .slider-dots button { width: 28px; height: 40px; }
  .slider-actions button { width: 40px; height: 40px; }
}
/* Pantallas cortas (un móvil pequeño, o uno normal con la barra del navegador
   a la vista): la portada cede altura para que el botón de entrar no se vaya
   debajo del pliegue. */
@media (max-width: 480px) and (max-height: 700px) {
  .showcase { height: 200px; }
  .slide-copy { bottom: 78px; }
  .slide-copy h2 { font-size: 26px; }
  .brand { margin-bottom: 15px; }
  .login-heading p { margin-bottom: 17px; }
  .login-panel { padding-top: 22px; }
}
/* Ventana no muy alta y ancho de tableta: el párrafo de la imagen empuja el
   titular hasta debajo de la tarjeta de HubSpot. Manda el titular. */
@media (min-width: 481px) and (max-width: 1000px) and (max-height: 940px) {
  .slide-copy p { display: none; }
}
/* Móvil tumbado: la foto se queda de banda superior, sin titular encima, que
   ahí no cabe sin comerse el formulario. */
@media (min-width: 481px) and (max-width: 1000px) and (max-height: 600px) {
  .showcase { height: 42vh; }
  .slide-copy { display: none; }
  .slider-controls { bottom: 10px; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .login-page { padding-block: 20px; }
  .login-panel { padding-block: 30px; }
  .brand { margin-bottom: 24px; }
  .login-heading p { margin-bottom: 22px; }
  .signup { margin-top: 20px; padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}