/* STAGE · the landing. Same class names and values as the original, so a rule can be compared with its line. What changed:
   comments are in English, and the policy has no inline style or data: address, so those moved to rules at the end and to files.
   First, the curtain: the spotlights' loader.
   Then one screen, light or dark by theme: the title and, below it, the app's window,
   with the video on one side and the conversation editing it on the other. That screen ends in the footer strip. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Theme ----------
   Warm paper and nearly black ink. The only shadow is the window's, resting on the paper; the dark theme has none.
   Inside the window everything is very subtle, in the proportions of the agent panel of cursor.com: ink rules at 10%,
   boxes barely different from the background, and secondary text at 60%.
   The live color is the film's: the amber of its edge and the orange of the light leak.
   Green and red appear only in the chat's edits: what is added and what is removed. */

:root {
  color-scheme: light;
  --letra: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serifa: "Playfair Display", Didot, "Bodoni 72", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --margen: clamp(18px, 4.4vw, 64px);
  --cabecera: clamp(60px, 8vh, 80px);
  --pie: 50px;
  --tira: 0px;   /* the width of the film strip; it exists only with plenty of width */
  --vh: 1vh;

  --ambar: #fdba5c;
  --fuga: #f5724f;
  --fuga-honda: #ae441a;
  --pelicula: #161614;
  --perforacion: #f3eeea;

  --fondo: #f3eeea;
  --tinta: #1e1c18;
  --tinta-suave: #4a463f;
  --tinta-tenue: #6f6a62;
  --marca-tinta: #1e1c18;
  --foco: #ae441a;

  --tarjeta-borde: 0px;
  --tarjeta-marco: transparent;
  --tarjeta-sombra: 0 10px 26px -10px rgba(30, 24, 16, .4);

  --chip-fondo: transparent;
  --chip-borde: rgba(30, 28, 24, .28);
  --chip-tinta: #1e1c18;
  --chip-sombra: none;
  --chip-borde-activo: rgba(30, 28, 24, .7);

  --barra-borde-foco: rgba(30, 28, 24, .28);
  --enviar-fondo: #e6e2d9;
  --enviar-tinta: rgba(30, 28, 24, .62);
  --enviar-activo-fondo: #1e1c18;
  --enviar-activo-tinta: #f3eeea;

  --raya-pagina: rgba(30, 28, 24, .3);
  --ventana-raya: rgba(30, 28, 24, .1);
  /* From lightest to darkest: the conversation, the chat's boxes, the paper and the stage. */
  --ventana-fondo: #faf8f5;
  --chat-caja: #f4f1eb;
  --escenario: #efeae2;
  --ventana-sombra: 0 28px 70px rgba(58, 44, 28, .14), 0 14px 32px rgba(58, 44, 28, .1), 0 0 0 1px rgba(30, 28, 24, .1);
  --chat-tinta: #1e1c18;
  --chat-tenue: rgba(30, 28, 24, .62);
  --chat-pastilla: #ebe7df;
  --chat-fila: #f1ede6;
  --mas: #1f8f3a;
  --menos: #dc3a1c;
  --curva: 0px;        /* all straight lines; ?curvas=si shows the chat with the reference's curves */
  --curva-llena: 0px;
}

/* The dark theme, from the button at the top right: the film's black. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0a0906;
  --tinta: #f3eeea;
  --tinta-suave: #c8c2b8;
  --tinta-tenue: #8f897f;
  --marca-tinta: #f3eeea;
  --foco: #fdba5c;
  --perforacion: #4a463f;

  --tarjeta-borde: 1px;
  --tarjeta-marco: rgba(243, 238, 234, .16);
  --tarjeta-sombra: 0 12px 30px -10px rgba(0, 0, 0, .8);

  --chip-fondo: transparent;
  --chip-borde: rgba(243, 238, 234, .24);
  --chip-tinta: #f3eeea;
  --chip-sombra: none;
  --chip-borde-activo: rgba(243, 238, 234, .6);

  --barra-borde-foco: rgba(237, 236, 236, .24);
  --enviar-fondo: #2b2923;
  --enviar-tinta: rgba(237, 236, 236, .6);
  --enviar-activo-fondo: #edecec;
  --enviar-activo-tinta: #14120b;

  --raya-pagina: rgba(243, 238, 234, .24);
  --ventana-raya: rgba(237, 236, 236, .1);
  /* In the dark, what is closer is lighter: the whole window above the page. */
  --ventana-fondo: #14120b;
  --chat-caja: #1b1913;
  --escenario: #100e08;
  --ventana-sombra: 0 0 0 1px rgba(237, 236, 236, .12);   /* a black shadow on nearly black only dirties it: tone and a rule separate here */
  --chat-tinta: #edecec;
  --chat-tenue: rgba(237, 236, 236, .6);
  --chat-pastilla: #26241e;
  --chat-fila: #201e18;
  --mas: #3fbf55;
  --menos: #f0512e;
}

:root[data-curvas="si"] { --curva: 8px; --curva-llena: 999px; }

@supports (height: 1svh) {
  :root { --vh: 1svh; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--fondo);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--letra);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, textarea { font: inherit; color: inherit; border-radius: 0; }   /* no curves: the whole interface is straight lines */
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

.oculto { position: absolute; width: 0; height: 0; overflow: hidden; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Header ---------- */

.cabecera {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  height: var(--cabecera);
  padding: 0 var(--margen);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta);
}

.marca { display: block; width: clamp(84px, 7.2vw, 104px); color: var(--marca-tinta); transition: opacity .2s; }
.marca:hover { opacity: .72; }
.marca svg { display: block; width: 100%; height: auto; fill: currentColor; }

.tema {
  position: absolute;
  right: calc(var(--margen) + var(--tira));
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--chip-borde);
  background: var(--chip-fondo);
  box-shadow: var(--chip-sombra);
  color: var(--chip-tinta);
  cursor: pointer;
  transition: transform .2s, border-color .2s;
}
.tema:hover { transform: translateY(-1px); border-color: var(--chip-borde-activo); }
.tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tema-sol, .tema[data-modo="oscuro"] .tema-luna { display: none; }
.tema[data-modo="oscuro"] .tema-sol { display: block; }

/* ---------- The curtain: the spotlights' loader ---------- */

.telon { display: none; }
.cargando .telon, .telon.fuera { display: block; position: fixed; z-index: 60; inset: 0; background: #000; }
.telon canvas { display: block; width: 100%; height: 100%; }
/* The loader ends all white; then the curtain fades and shows the page. */
.telon.fuera { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.sin-paso { overflow: hidden; }

/* ---------- First screen ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  min-height: 100vh;
  min-height: calc(100 * var(--vh));
  padding: var(--cabecera) var(--margen) calc(var(--pie) + clamp(4px, 1vh, 12px));
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--fondo);
  color: var(--tinta);
}
/* The grain of the paper. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .05;
  background: url("grano.svg");
  pointer-events: none;
}

/* The film strip, on the right edge, with its light leak. Only with plenty of width (below). */
.tira {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: var(--tira);
  display: none;
  grid-template-columns: 26px 16px minmax(0, 1fr);
  overflow: hidden;
  background: var(--pelicula);
  color: #f3eeea;
  pointer-events: none;
}
/* The perforations. */
.tira::before {
  content: "";
  grid-column: 1;
  width: 14px;
  margin-left: 7px;
  background: var(--perforacion);
  -webkit-mask: url("perforacion.svg") 0 0 / 14px 44px repeat-y;
  mask: url("perforacion.svg") 0 0 / 14px 44px repeat-y;
}
.tira::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 22% at 100% 0, #fcdaa8 0, rgba(245, 114, 79, .75) 34%, transparent 72%),
    radial-gradient(90% 26% at 100% 100%, rgba(245, 114, 79, .9) 0, rgba(174, 68, 26, .55) 46%, transparent 78%),
    linear-gradient(90deg, transparent 74%, rgba(174, 68, 26, .5) 92%, rgba(245, 114, 79, .85) 100%);
  mix-blend-mode: screen;
}
.tira-borde {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-around;
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  white-space: nowrap;
  color: var(--ambar);
}
.tira-fotos {
  grid-column: 3;
  min-height: 0;
  padding: clamp(14px, 2.6vh, 28px) 0 clamp(14px, 2.6vh, 28px) 6px;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.8vh, 30px);
}
.tira-fotos figure { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tira-fotos figcaption { flex: none; font-family: var(--mono); font-size: 11px; line-height: 1; }
.tira-fotos img { flex: 1; display: block; width: 100%; min-height: 0; object-fit: cover; filter: sepia(.32) saturate(1.05) contrast(1.04); }
/* The beach is turquoise: here it develops warmer, like the rest of the strip. */
.tira-fotos figure:nth-child(3) img { filter: sepia(.78) saturate(1.25) hue-rotate(-10deg) contrast(1.06); }

/* The title on top and the window below. With little width, the window has the video on top and the conversation below;
   with width (below, from 900px), the video on the left and the conversation on the right. */
.hero-caja {
  /* The video's height: what is left of the screen after the title, the conversation and the bar. */
  --alto: clamp(236px, calc(84 * var(--vh) - 454px - var(--pie)), 600px);
  --relleno: 22px;   /* the air around the video, above and below, inside its panel */
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin: clamp(0px, .8vh, 18px) 0 0;
  max-width: 13.5em;
  font-size: clamp(35px, 5.1vw, 68px);
  font-weight: 450;
  letter-spacing: -.045em;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}
h1 span { display: inline-block; }
h1 .acento { display: block; padding-bottom: .12em; }

.entrada {
  margin: clamp(4px, .8vh, 12px) 0 0;
  max-width: 37em;
  font-size: clamp(15.5px, 1.42vw, 20px);
  line-height: 1.5;
  letter-spacing: -.011em;
  color: var(--tinta-suave);
  text-align: center;
  text-wrap: balance;
}

/* The window: the video and the conversation together, like the app's screen */

.ventana {
  position: relative;
  isolation: isolate;
  flex: 1;
  width: min(100%, 560px);
  min-height: 0;
  margin-top: clamp(14px, 2.4vh, 26px);
  display: grid;
  grid-template: "barra" auto "escena" auto "charla" minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
  border-radius: calc(var(--curva) * 1.25);
  background: var(--ventana-fondo);
  box-shadow: var(--ventana-sombra);
}
.ventana-barra {
  grid-area: barra;
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--ventana-raya);
  color: var(--chat-tinta);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
}
.ventana-titulo { opacity: .7; }
.ventana-logo { position: absolute; left: 12px; top: 50%; width: 52px; height: auto; translate: 0 -50%; fill: var(--marca-tinta); }
.ventana-puntos { position: absolute; right: 12px; top: 50%; display: flex; gap: 6px; translate: 0 -50%; }
.ventana-puntos i { width: 8px; height: 8px; border-radius: var(--curva-llena); background: var(--ventana-raya); }

/* The left column: projects on top, files in the middle, the profile below. Only with width. The sizes come from the sidebar of cursor.com. */

.lateral { position: relative; display: none; min-height: 0; flex-direction: column; border-right: 1px solid var(--ventana-raya); color: var(--chat-tinta); font-size: 12px; line-height: 16px; }
.lateral b { font-weight: 400; }
.lateral small { display: block; color: var(--chat-tenue); font-size: 11px; line-height: 14px; }
.lateral-titulo { margin: 0; padding: 4px 12px; color: var(--chat-tenue); font-size: 11px; line-height: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .004em; }
.lateral-proyectos { flex: none; padding-top: 8px; }
.proyectos, .archivos { margin: 0; padding: 0; list-style: none; }
.proyecto { display: flex; align-items: center; gap: 8px; padding: 7px 12px; color: var(--chat-tenue); }
.proyecto.activo { background: var(--chat-fila); color: var(--chat-tinta); }
.proyecto img { flex: none; width: 28px; height: 28px; border-radius: min(var(--curva), 4px); object-fit: cover; }
.proyecto span, .perfil > span { min-width: 0; }
.proyecto small { opacity: .75; }

.lateral-archivos { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 8px; }
.archivos { flex: 1 1 0; min-height: 0; overflow: hidden auto; scrollbar-width: none; }
.archivos::-webkit-scrollbar { display: none; }
.archivo { display: flex; align-items: center; gap: 8px; padding: 4px 12px; color: var(--chat-tenue); }
.archivo-foto { position: relative; flex: none; width: 20px; height: 20px; overflow: hidden; border-radius: min(var(--curva), 3px); background: var(--chat-pastilla) center / cover; }
.archivo-foto video { display: block; width: 100%; height: 100%; object-fit: cover; }
.archivo-foto.de-audio::after { content: ""; position: absolute; inset: 5px 4px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px); }
.archivo-nombre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.archivo small { flex: none; opacity: .75; }
.nuevo-archivo { animation: contesta .3s ease backwards; color: var(--chat-tinta); }
.nuevo-archivo small { color: var(--mas); opacity: 1; }

/* Where files are dropped: at the bottom and fixed, so the list grows without moving it. With one over the window, it lights up in the green of what is new. */
.soltar { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px 12px 12px; padding: 8px; border: 1px dashed var(--barra-borde-foco); border-radius: var(--curva); color: var(--chat-tinta); font-size: 11px; line-height: 14px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.soltar:hover { border-color: var(--chat-tenue); }
.soltar:focus-within { outline: 1px solid var(--chat-tenue); outline-offset: 1px; }
.soltar.encima { border-style: solid; border-color: var(--mas); background: color-mix(in srgb, var(--mas) 12%, transparent); }
.soltar svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--chat-tenue); stroke-width: 1; }
.soltar span { min-width: 0; }

.perfil { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--ventana-raya); background: none; color: inherit; font-size: inherit; line-height: inherit; text-align: left; cursor: pointer; transition: background-color .15s; }
.perfil:hover, .perfil[aria-expanded="true"] { background: var(--chat-fila); }
.perfil:focus-visible, .perfil-menu button:focus-visible, .vista-cerrar:focus-visible, .ayuda-cerrar:focus-visible, .ayuda-boton:focus-visible, .efecto:focus-visible, .segmentado button:focus-visible { outline: 1px solid var(--chat-tenue); outline-offset: -1px; }
.perfil-foto { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--curva-llena); background: var(--chat-pastilla); color: var(--chat-tenue); font-size: 10px; font-weight: 500; letter-spacing: .02em; }
.perfil-puntos { flex: none; display: flex; gap: 2px; margin-left: auto; }
.perfil-puntos i { width: 2px; height: 2px; background: var(--chat-tenue); }
.perfil-menu { position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 50px; padding: 4px; border: 1px solid var(--ventana-raya); border-radius: var(--curva); background: var(--ventana-fondo); box-shadow: 0 8px 24px rgba(30, 24, 16, .16); animation: contesta .16s ease backwards; }
.perfil-menu[hidden] { display: none; }
.perfil-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--curva); background: none; color: var(--chat-tinta); font-size: 12px; line-height: 16px; text-align: left; cursor: pointer; }
.perfil-menu button:hover { background: var(--chat-fila); }
.perfil-menu svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--chat-tenue); stroke-width: 1; }

/* What you can ask for, like a restaurant menu: sections with their title and dishes with one line, in columns with no boxes.
   It covers the video and the chat, and with width it leaves the sidebar in view. Touching a dish shows below how to ask for it. */
.ayuda {
  position: absolute;   /* on top of the window: opening it must not resize it */
  inset: 0;
  z-index: 4;
  min-height: 0;
  display: none;
  grid-template: "cabeza" auto "filtros" auto "lista" minmax(0, 1fr) "pedido" auto / minmax(0, 1fr);
  background: var(--ventana-fondo);
  color: var(--chat-tinta);
  font-size: 12px;
  line-height: 16px;
}
.con-ayuda .ayuda { display: grid; animation: aparece .15s ease; }
.ayuda-cabeza { grid-area: cabeza; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; }
.ayuda-cabeza h2 { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; }
.ayuda-filtros { grid-area: filtros; display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px 10px; border-bottom: 1px solid var(--ventana-raya); }
.ayuda-filtros button { padding: 3px 8px; border: 0; border-radius: var(--curva-llena); background: var(--chat-pastilla); color: var(--chat-tenue); font-size: 11px; line-height: 14px; cursor: pointer; transition: color .15s, background-color .15s; }
.ayuda-filtros button:hover { color: var(--chat-tinta); }
.ayuda-filtros button[aria-pressed="true"] { background: var(--enviar-activo-fondo); color: var(--enviar-activo-tinta); }
/* The gradient at the bottom says there is more; the padding lets the last one read well at the end. */
.ayuda-lista { grid-area: lista; min-height: 0; padding: 12px 16px 18px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); }
.ayuda-lista::-webkit-scrollbar { display: none; }
/* The columns live in a container of free height: with a fixed height, those that do not fit would spill to the right. */
.ayuda-carta { columns: 3 160px; column-gap: 20px; }
.ayuda-lista section { break-inside: avoid; padding-bottom: 14px; }
.ayuda-lista section[hidden] { display: none; }
/* The section titles, in the video title's type: that is what makes it read like a menu. */
.ayuda-lista h3 { margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--ventana-raya); font-family: var(--serifa); font-size: 17px; line-height: 22px; font-style: italic; font-weight: 400; }
.efectos { margin: 0 -6px; padding: 0; list-style: none; }
.efecto { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: var(--curva); background: none; color: var(--chat-tinta); font-size: 12px; line-height: 16px; text-align: left; cursor: pointer; transition: background-color .12s; }
.efecto:hover { background: var(--chat-fila); }
.efecto[aria-pressed="true"] { background: var(--chat-pastilla); }
.efecto svg { flex: none; width: 14px; height: 14px; margin-top: 1px; fill: none; stroke: var(--chat-tenue); stroke-width: 1; }
.efecto svg .lleno { fill: var(--chat-tenue); stroke: none; }
.efecto b { display: block; font-weight: 500; }
.efecto small { display: block; color: var(--chat-tenue); font-size: 11px; line-height: 14px; }
.ayuda-pedido { grid-area: pedido; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--ventana-raya); animation: contesta .18s ease; }
.ayuda-pedido[hidden] { display: none; }
.ayuda-pedido-rotulo { flex: none; color: var(--chat-tenue); font-size: 11px; line-height: 14px; }
.ayuda-pedido-frase { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; }
.ayuda-probar { flex: none; padding: 4px 10px; border: 0; border-radius: var(--curva); background: var(--enviar-activo-fondo); color: var(--enviar-activo-tinta); font-size: 12px; line-height: 16px; cursor: pointer; transition: opacity .15s; }
.ayuda-probar:hover { opacity: .85; }
.ayuda-filtros button:focus-visible, .ayuda-probar:focus-visible { outline: 1px solid var(--chat-tenue); outline-offset: 1px; }

/* Settings, opened from the profile: they cover the video and the chat. There is only a profile with width. */
.vista { position: relative; z-index: 4; grid-column: 2 / -1; grid-row: 2; min-height: 0; display: flex; flex-direction: column; background: var(--ventana-fondo); color: var(--chat-tinta); font-size: 12px; line-height: 17px; animation: aparece .18s ease; }
.vista[hidden] { display: none; }
.vista-cabeza { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px 8px; }
.vista-cabeza h2 { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; }
.vista-cuerpo { position: relative; flex: 1; min-height: 0; padding: 0 16px 16px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.vista-cuerpo::-webkit-scrollbar { display: none; }
.vista-cerrar, .ayuda-cerrar { flex: none; display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--chat-tenue); cursor: pointer; transition: color .15s; }
.vista-cerrar:hover, .ayuda-cerrar:hover { color: var(--chat-tinta); }
.vista-cerrar svg, .ayuda-cerrar svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1; }

.ajustes { margin: 0; padding: 0; list-style: none; }
.ajustes li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; border-bottom: 1px solid var(--ventana-raya); }
.ajustes li > span:last-child { color: var(--chat-tenue); }
.segmentado { display: flex; gap: 2px; padding: 2px; border-radius: var(--curva); background: var(--chat-pastilla); }
.segmentado button { padding: 2px 8px; border: 0; border-radius: var(--curva); background: none; color: var(--chat-tenue); font-size: 11px; line-height: 16px; cursor: pointer; }
.segmentado button[aria-pressed="true"] { background: var(--ventana-fondo); color: var(--chat-tinta); }

/* The video's panel. It sits above the conversation's, so the supporting shots can fly in from that side. */
.escena {
  grid-area: escena;
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: var(--relleno) 0;
  display: grid;
  place-items: center;
  background: var(--escenario);
}

.reproductor {
  --alto-controles: 28px;
  position: relative;
  height: var(--alto);
  aspect-ratio: 9 / 16;
  margin-bottom: calc(var(--alto-controles) + 6px);
  padding: var(--tarjeta-borde);
  background: var(--tarjeta-marco);
  box-shadow: var(--tarjeta-sombra);
}

.pantalla {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2a2622;
  isolation: isolate;
  container-type: inline-size;
}
/* A veil, so the lights show while STAGE works. */
.pantalla::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: rgba(12, 10, 8, .44);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.reproductor.trabajando .pantalla::before { opacity: 1; }
.pantalla::after, .antes::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 28, 24, .2) 0%, transparent 26%, transparent 66%, rgba(12, 10, 8, .46) 100%);
  pointer-events: none;
}

.foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* The video as it arrives: flat and with little color. */
.cruda { filter: saturate(.55) contrast(.9) brightness(1.04); }

/* The look is a layer on top, revealed from right to left: cinema color and a tint, cold above and warm below. */
.capa-look { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); }
.capa-look .foto, .reproductor.con-look .corte { filter: contrast(1.14) saturate(1.28) brightness(.97); }
.tinte {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 104, 138, .6) 0%, rgba(255, 146, 54, .55) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.reproductor.con-look .capa-look { clip-path: inset(0 0 0 0); }

/* B-roll: two supporting shots (the sunset and the beach from the air). When added they show once in a row;
   then the video cuts to each in its stretch: main.js sets "en-plano" when it is time. */
.corte { position: absolute; z-index: 1; inset: 0; background: center / cover no-repeat; opacity: 0; }
.c1 { background-image: url("plano-atardecer.jpg"); }
.c2 { background-image: url("plano-playa.jpg"); }
.corte.en-plano { opacity: 1; transform: scale(1.03); }
.reproductor.entra-brolls .c1 { animation: corte .9s cubic-bezier(.2, .7, .2, 1); }
.reproductor.entra-brolls .c2 { animation: corte .9s cubic-bezier(.2, .7, .2, 1) .9s; }
/* While a supporting shot shows, the title steps aside: it cannot be read over another picture. */
.pantalla:has(.corte.en-plano) .titular { opacity: 0; }
.reproductor.entra-brolls .titular { animation: se-aparta 1.8s ease; }

/* The title: a dull one to start with, and the hook's, which comes in line by line. */
.titular-crudo {
  position: absolute;
  z-index: 2;
  inset: 7.6% 8% auto;
  margin: 0;
  text-align: center;
  font-size: 5.3cqw;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 .3cqw 1.8cqw rgba(0, 0, 0, .45);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.reproductor.con-gancho .pantalla > .titular-crudo { opacity: 0; transform: scale(.9); }

.titular {
  position: absolute;
  z-index: 2;
  inset: 5% 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 400;
  color: #fffaf3;
  text-shadow: 0 .4cqw 3.4cqw rgba(30, 28, 24, .32);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.titular span { display: block; white-space: nowrap; }
.t1 { font-size: 12cqw; line-height: .98; letter-spacing: -.03em; }
.t2 { font-size: 6cqw; line-height: 1.1; letter-spacing: -.02em; }
.t3 { font-size: 7cqw; line-height: 1.1; letter-spacing: -.025em; text-transform: uppercase; }
.t4 { font-size: 6.2cqw; line-height: 1.04; letter-spacing: -.02em; }
.reproductor.con-gancho .titular { opacity: 1; }
.reproductor.entra-gancho .titular span { animation: entra .7s cubic-bezier(.2, .9, .2, 1) backwards; }
.reproductor.entra-gancho .t2 { animation-delay: .09s; }
.reproductor.entra-gancho .t3 { animation-delay: .18s; }
.reproductor.entra-gancho .t4 { animation-delay: .27s; }

.subtitulo {
  position: absolute;
  z-index: 3;
  inset: auto 7% 17%;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  font-family: var(--letra);
  font-size: 6.3cqw;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 .3cqw 1.4cqw rgba(0, 0, 0, .8);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.subtitulo > * { display: inline-block; }
.subtitulo b { padding: 0 .2em; background: #f3eeea; color: #1e1c18; text-shadow: none; font-weight: inherit; }
.reproductor.con-subtitulos .subtitulo { opacity: 1; }
/* Word by word. */
.reproductor.entra-subtitulos .subtitulo > * { animation: palabra .36s cubic-bezier(.2, .9, .3, 1.3) backwards; animation-delay: calc(var(--i) * 85ms + 60ms); }

/* STAGE's spotlights while it works: small and in the middle of the video, as in the logo. focos.js paints them.
   The figure sits a little low in its frame, hence the offset. */
.luces {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: clamp(44px, 25cqw, 84px);
  height: clamp(44px, 25cqw, 84px);
  translate: -50% -53%;
  scale: .8;
  opacity: 0;
  transition: opacity .25s, scale .45s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.reproductor.trabajando .luces { opacity: 1; scale: 1; }

/* The original video, to compare: it shows to the left of the line, which rests on the left edge. */
.antes {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: #2a2622;
  clip-path: inset(0 calc((1 - var(--compara, 0)) * 100%) 0 0);
  pointer-events: none;
}
.linea {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: calc(var(--compara, 0) * 100%);
  width: 44px;
  margin-left: -22px;
  display: none;
  cursor: ew-resize;
  touch-action: none;
}
.con-js .reproductor.con-linea .linea { display: block; }
.linea::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .2s;
}
.reproductor.comparando .linea::before, .reproductor.revelando .linea::before { opacity: 1; }
/* The handle: a thin bar that does not cover the video. What can be grabbed is the whole strip of the line. */
.tirador {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 40px;
  margin: -20px 0 0 -2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: width .15s, margin .15s, height .15s;
}
.linea:hover .tirador { width: 6px; height: 48px; margin: -24px 0 0 -3px; }
.linea:focus-visible { outline: 0; }
.linea:focus-visible .tirador { outline: 2px solid var(--foco); outline-offset: 2px; }

.aviso {
  position: absolute;
  z-index: 7;
  inset: auto 6% 30%;
  width: fit-content;
  max-width: 88%;
  margin: 0 auto;
  padding: .55em 1em;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(22, 22, 20, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: clamp(11px, 5.4cqw, 14px);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.aviso.visible { opacity: 1; transform: none; }

/* The controls, right under the video. They stick out a little at the sides so the icons, not their buttons, align with the video. */
.controles {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: -6px;
  right: -6px;
  height: var(--alto-controles);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.controles-grupo { display: flex; align-items: center; gap: 2px; }
.control {
  width: var(--alto-controles);
  height: var(--alto-controles);
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--curva);
  background: transparent;
  color: var(--chat-tinta);
  cursor: pointer;
  transition: background .15s;
}
.control:hover { background: var(--chat-pastilla); }
.control svg { width: 60%; height: 60%; fill: currentColor; }
.control.trazo svg { fill: none; stroke: currentColor; stroke-width: 1.9; }
.control.trazo .lleno { fill: currentColor; }

.pista { position: absolute; z-index: 6; inset: auto 0 0; height: 3px; background: rgba(255, 255, 255, .14); }
.pista i { position: absolute; inset: 0 auto 0 0; }
.avance { width: 0; background: linear-gradient(90deg, var(--ambar), var(--fuga)); opacity: .95; }

.reproductor:fullscreen { margin: 0; padding: 0; background: #000; display: grid; place-items: center; transform: none; }
.reproductor:fullscreen .controles { top: auto; left: 16px; right: 16px; bottom: 16px; }
.reproductor:fullscreen .control { color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.reproductor:fullscreen .control:hover { background: rgba(255, 255, 255, .18); }
.reproductor:fullscreen .pantalla { width: auto; height: 100%; aspect-ratio: 9 / 16; }
.con-js .reproductor:fullscreen .linea { display: none; }

/* The conversation's panel. The title on top; below it the thread, which starts at the top and, when it no longer fits,
   rises and fades; the bar at the bottom. The sizes are those of the agent panel of cursor.com. */

.charla {
  grid-area: charla;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ventana-raya);
  color: var(--chat-tinta);
  font-size: 13px;
  line-height: 18px;
}
.charla-titulo { display: none; flex: none; margin: 12px 0 4px; font-size: 12px; line-height: 16px; font-weight: 500; }
@property --fundido { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fundido-bajo { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* The thread scrolls, with no bar, and fades where there is more to see. */
.hilo-marco {
  position: relative;
  flex: 1 1 96px;
  min-height: 96px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fundido), #000 calc(100% - var(--fundido-bajo)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--fundido), #000 calc(100% - var(--fundido-bajo)), transparent 100%);
  transition: --fundido .25s ease, --fundido-bajo .25s ease;
}
.hilo-marco::-webkit-scrollbar { display: none; }
.hilo-marco.arriba { --fundido: 32px; }
.hilo-marco.abajo { --fundido-bajo: 24px; }
.hilo { margin: 0; padding: 0; list-style: none; }
/* Each turn opens from zero to its height, so what came before rises without jumps. */
.turno { display: grid; grid-template-rows: 1fr; }
.con-js .turno { grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.2, .8, .2, 1); }
.con-js .turno.dentro { grid-template-rows: 1fr; }
.turno-caja { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* What is asked for, in a box from side to side. Folded it is one row; opening it reviews that change. */
.pide {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 4px 0 0;
  padding: 6px 8px;
  border: 1px solid var(--ventana-raya);
  border-radius: var(--curva);
  background: var(--chat-caja);
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  text-wrap: pretty;
  transition: border-color .15s, margin-top .3s;
}
button.pide { cursor: pointer; }
button.pide:hover { border-color: var(--barra-borde-foco); }
.pide:focus-visible, .edicion-deshacer:focus-visible, .montaje:focus-visible { outline: 1px solid var(--chat-tenue); outline-offset: 1px; }
.turno:first-child .pide { margin-top: 0; }
.con-js .turno.abierto + .turno .pide { margin-top: 16px; }
.pide .dicho { flex: 1; min-width: 0; white-space: pre-line; }   /* the line break of Shift+Enter */
.pide-flecha { flex: none; width: 12px; height: 18px; fill: none; stroke: var(--chat-tenue); stroke-width: 1; transition: rotate .25s; }
.turno.abierto .pide-flecha { rotate: 180deg; }
.turno.trabajando .pide-flecha { visibility: hidden; }
/* What was taken off the video stays struck through. */
.turno.deshecho .pide .dicho { color: var(--chat-tenue); text-decoration: line-through; }

/* The body of the request, which folds. */
.turno-cuerpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s cubic-bezier(.2, .8, .2, 1); }
.con-js .turno:not(.abierto) .turno-cuerpo { grid-template-rows: 0fr; }
.con-js .turno.fija .turno-cuerpo { transition: none; }
.turno-dentro { min-height: 0; overflow: hidden; }

/* What STAGE is doing, small and dim: the verb and, dimmer still, what it is about or how long it took. */
.actividad {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0 4px;
  list-style: none;
  color: var(--chat-tenue);
  font-size: 12px;
  line-height: 16px;
}
.actividad:empty { display: none; }
.actividad li { display: flex; align-items: baseline; gap: 4px; }
.actividad b { flex: none; font-weight: 400; }
.actividad span { min-width: 0; opacity: .6; }
/* The time, on the right, like those of the sidebar list of cursor.com. */
.actividad small { flex: none; margin-left: auto; padding-left: 8px; font-size: inherit; opacity: .6; font-variant-numeric: tabular-nums; }
/* While it lasts, a glint runs across the verb. */
.actividad .activa b {
  background: linear-gradient(90deg, var(--chat-tenue) 0 35%, var(--chat-tinta) 50%, var(--chat-tenue) 65% 100%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: destello 1.3s linear infinite;
}

/* What STAGE answers, as text, with no box. */
.responde { margin: 12px 0 0; padding: 0 4px; text-wrap: pretty; }

.con-js .turno.dentro .pide { animation: burbuja .3s cubic-bezier(.2, .8, .2, 1) backwards; }
.con-js .turno.dentro .responde { animation: contesta .32s ease backwards; }
.con-js .turno.dentro .edicion { animation: contesta .32s ease .06s backwards; }
.con-js .turno.fija .pide, .con-js .turno.fija .responde, .con-js .turno.fija .edicion,
.con-js .turno.fija .edicion *, .con-js .turno.fija .edicion *::before, .con-js .turno.fija .edicion *::after { animation: none; }

/* The edit: instead of a changed file, the very piece of timeline that changed, with no names or figures.
   What is new is marked in green around the picture itself. The whole box is a button that repeats the change in the video. */
.edicion {
  --alto-tira: 56px;
  --fotos: repeating-linear-gradient(90deg, transparent 0 31px, var(--chat-caja) 31px 32px), url("mirador.jpg") 0 50% / 32px auto repeat-x;
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--ventana-raya);
  border-radius: var(--curva);
  background: var(--chat-caja);
}
.edicion.sin-animar, .edicion.sin-animar *, .edicion.sin-animar *::before, .edicion.sin-animar *::after { animation: none !important; }
.montaje { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
/* "Undo" appears on top when passing over the edit. */
.edicion-deshacer { display: none; position: absolute; z-index: 2; top: 4px; right: 4px; padding: 2px 6px; border: 0; background: rgba(20, 18, 11, .78); color: #edecec; font-size: 11px; line-height: 14px; opacity: 0; cursor: pointer; transition: opacity .15s; }
.con-js .edicion-deshacer { display: block; }
.edicion:hover .edicion-deshacer, .edicion:focus-within .edicion-deshacer, .turno.deshecho .edicion-deshacer { opacity: 1; }
@media (hover: none) { .edicion-deshacer { opacity: 1; } }

.montaje-pelicula { display: block; position: relative; height: var(--alto-tira); background: var(--fotos); transition: filter .2s; }
.montaje:hover .montaje-pelicula, .montaje:hover .montaje-onda { filter: brightness(1.1); }
.montaje-pelicula i { position: absolute; top: 0; bottom: 0; left: calc(var(--de) * 1%); width: calc((var(--a) - var(--de)) * 1%); }
.edicion .nuevo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 2px var(--mas);
  color: #fff;
  font-style: normal;
  white-space: nowrap;
  animation: revela .45s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms + .12s);
}
.edicion .nuevo.quieto { animation: none; }
/* Inside the green, what was added: the new title and the words of the captions, over the picture. */
.edicion .palabras { justify-content: space-between; padding: 0 10px 6px; font-size: 10px; line-height: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.edicion .palabras b { font-weight: 500; }
.edicion .titulito { align-items: flex-start; padding-top: 5px; font-family: var(--serifa); font-size: 15px; line-height: 16px; font-style: italic; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
/* What was there before, in red, goes away shortly. */
.edicion .viejo { box-shadow: inset 0 0 0 2px var(--menos); opacity: 0; animation: se-va .4s ease .8s backwards; }
/* The color: the dull strip and, on top, the same strip with the look, revealed from left to right. */
.graduada { background: none; }
.graduada::before, .graduada::after { content: ""; position: absolute; inset: 0; background: var(--fotos); }
.graduada::before { filter: grayscale(.7) brightness(.9); }
.graduada::after { filter: contrast(1.14) saturate(1.5) sepia(.15); animation: revela .9s cubic-bezier(.65, 0, .3, 1) .12s backwards; }
.graduada i { z-index: 1; }

/* The audio: voice clips on a canvas, which main.js paints. It goes without the box of the other edits: only the clips. */
.edicion:has(.montaje-onda) { border: 0; background: none; }
.montaje-onda { display: block; width: 100%; height: var(--alto-tira); transition: filter .2s; }

/* A change taken off the video: its edit goes dim. */
.turno.deshecho .montaje-pelicula, .turno.deshecho .montaje-onda { filter: grayscale(1); opacity: .4; }

/* The request bar: one line of text, which grows if needed, and below it the "?" and the button. */

.peticion {
  --renglon: 18px;
  position: relative;
  z-index: 3;
  flex: none;
  margin-top: 12px;
  border: 1px solid var(--ventana-raya);
  border-radius: var(--curva);
  transition: border-color .2s;
}
.peticion:focus-within, .peticion.dictando { border-color: var(--barra-borde-foco); }
/* The real text and the film's are in the same cell: the taller of the two sets the bar's height. */
.campo { display: grid; }
.campo > * { grid-area: 1 / 1; min-width: 0; }
.peticion textarea, .tecleo { padding: 8px 8px 6px; font-size: 13px; font-weight: 400; line-height: var(--renglon); }
.peticion textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--renglon) + 14px);
  max-height: calc(4 * var(--renglon) + 14px);
  border: 0;
  outline: 0;
  background: none;
  resize: none;
  field-sizing: content;
  scrollbar-width: none;
}
.peticion textarea::placeholder { color: var(--chat-tenue); opacity: .85; }
.peticion.dictando textarea::placeholder { color: transparent; }

/* What the demo's film types: letter by letter, with what was just typed still in half ink. */
.tecleo { display: none; overflow: hidden; color: var(--chat-tinta); pointer-events: none; }
.peticion.dictando .tecleo { display: block; }
.tecleo-texto { display: block; white-space: pre-wrap; overflow-wrap: break-word; transition: opacity .2s, translate .2s; }
.tecleo em { font-style: normal; color: color-mix(in srgb, currentColor 45%, transparent); }
.tecleo-texto::after { content: ""; display: inline-block; width: 1px; height: 1.15em; margin-left: 2px; vertical-align: -.2em; background: currentColor; animation: parpadea .9s steps(1) infinite; }
.tecleo.sale .tecleo-texto { opacity: 0; translate: 0 -60%; }

.peticion-pie { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px; }
.ayuda-boton { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--curva-llena); background: var(--enviar-fondo); color: var(--enviar-tinta); font-size: 12px; line-height: 20px; font-weight: 500; text-align: center; cursor: pointer; transition: background-color .15s, color .15s; }
.ayuda-boton:hover { color: var(--chat-tinta); }
.ayuda-boton[aria-expanded="true"] { background: var(--enviar-activo-fondo); color: var(--enviar-activo-tinta); }

.enviar {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--curva-llena);
  background: var(--enviar-fondo);
  color: var(--enviar-tinta);
  cursor: pointer;
  transition: transform .2s, background-color .2s, color .2s;
}
.enviar::after { content: ""; position: absolute; inset: -8px; }   /* more room for the finger than for the eye */
/* With something to send, the button lights up. */
.peticion.dictando .enviar, .peticion:has(textarea:not(:placeholder-shown)) .enviar { background: var(--enviar-activo-fondo); color: var(--enviar-activo-tinta); }
.enviar:hover { transform: scale(1.08); }
.enviar.pulsada { animation: pulsacion .55s ease-out; }
/* The tip of a mitered arrow sticks out 1.41 units from its vertex: so the vertex is at 5.414 and the whole drawing spans 4 to 20, centered. */
.enviar svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }

/* The film's cursor, which presses the button for whoever is watching. */
.puntero {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.3, .7, .2, 1), opacity .3s;
}
.puntero.visible { opacity: 1; }
.puntero svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 20% 12%; transition: transform .12s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.puntero path { fill: #1e1c18; stroke: #fff; stroke-width: 1.5; }
.puntero.pulsa svg { transform: scale(.8); }
@media (hover: none) { .puntero { display: none; } }

/* Before the curtain rises nothing of the first screen shows; when it rises, each piece enters in its own time. */
.con-js:not(.en-escena) .cabecera, .con-js:not(.en-escena) .hero-caja > *, .con-js:not(.en-escena) .tira { opacity: 0; }
.en-escena .cabecera { animation: aparece .24s ease .06s backwards; }
.en-escena .tira { animation: aparece .4s ease .2s backwards; }
.en-escena .ventana { animation: sube .28s cubic-bezier(.2, .8, .2, 1) .14s backwards; }
.en-escena .reproductor { animation: asoma .28s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
.en-escena h1 span { animation: palabra-entra .24s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.1s + var(--i) * 24ms); }
.en-escena .entrada { animation: sube .24s cubic-bezier(.2, .8, .2, 1) .22s backwards; }

/* ---------- With width: in the window, the video on the left and the conversation on the right ---------- */

@media (min-width: 900px) {
  .hero {
    --base: clamp(12px, 4.6vh, 56px);   /* between the window and the footer */
    justify-content: center;
    padding-bottom: calc(var(--pie) + var(--base));
  }
  .hero-caja {
    --letra-titulo: clamp(38px, 4.4vw, 68px);
    --letra-entrada: clamp(14px, 1.15vw, 17px);
    --techo: clamp(4px, 3.8vh, 44px);     /* between the logo and the title */
    --aire: clamp(20px, 5.6vh, 60px);     /* between the title and the window */
    --relleno: clamp(14px, 3vh, 30px);
    /* The window is 3:2 and takes what the screen leaves under the title, without getting too wide; the video, 82% of what the 28px bar and the controls leave. */
    --lateral-ancho: 200px;
    --charla-ancho: 340px;
    --ventana-alto: clamp(310px, min(calc(100 * var(--vh) - var(--cabecera) - var(--techo) - var(--letra-titulo) * 1.05 - var(--letra-entrada) * 1.5 - 10px - var(--aire) - var(--pie) - var(--base)), calc((100vw - 2 * var(--margen) - 2 * var(--tira)) / 1.5)), 640px);
    --alto: calc((var(--ventana-alto) - 28px - 34px) * .82);
    flex: none;
  }
  h1, .entrada { max-width: none; white-space: nowrap; }
  h1 { margin: var(--techo) 0 0; font-size: var(--letra-titulo); }
  h1 .acento { display: inline-block; padding-bottom: 0; }
  .entrada { margin: 10px 0 0; font-size: var(--letra-entrada); }
  .ventana {
    flex: none;
    /* With little height, just enough for the three columns to fit without the video entering those at the sides. */
    width: max(calc(var(--ventana-alto) * 1.5), calc(var(--lateral-ancho) + var(--charla-ancho) + var(--alto) * 9 / 16 + 72px));
    height: var(--ventana-alto);
    margin-top: var(--aire);
    grid-template: "barra barra barra" auto "lateral escena charla" minmax(0, 1fr) / var(--lateral-ancho) minmax(0, 1fr) var(--charla-ancho);
  }
  .lateral { grid-area: lateral; display: flex; }
  .ayuda { position: relative; inset: auto; grid-column: 2 / -1; grid-row: 2; }
  .charla { border-top: 0; border-left: 1px solid var(--ventana-raya); }
  .charla-titulo { display: block; }
  .hilo-marco { flex: 1 1 0; min-height: 0; }
}

/* With plenty of width, the film strip. The window stays centered: it leaves the same gap on both sides. */
@media (min-width: 1180px) {
  :root { --tira: clamp(124px, 11vw, 176px); }
  .tira { display: grid; }
}

/* ---------- The footer strip: the logo and the company's name, over the end of the first screen ---------- */

.pie {
  position: relative;
  z-index: 2;
  height: var(--pie);
  margin: calc(-1 * var(--pie)) calc(var(--margen) + var(--tira)) 0 var(--margen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--raya-pagina);
  color: var(--tinta-tenue);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pie-logo { flex: none; width: 72px; height: auto; fill: var(--marca-tinta); }
.pie p { margin: 0; }
.con-js:not(.en-escena) .pie { opacity: 0; }
.en-escena .pie { animation: aparece .24s ease .36s backwards; }

/* ---------- Motion ---------- */

/* No "to": each piece ends where it belongs. */
@keyframes sube { from { opacity: 0; transform: translateY(22px) scale(.985); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes asoma { from { opacity: 0; transform: scale(.965); } }
@keyframes palabra-entra { from { opacity: 0; filter: blur(12px); transform: translateY(.3em) scale(1.08); } }

/* The conversation */
@keyframes burbuja { from { opacity: 0; transform: translateY(8px); } }
@keyframes contesta { from { opacity: 0; transform: translateY(6px); } }
@keyframes destello { to { background-position: 0 0; } }
@keyframes se-va { from { opacity: 1; } }
@keyframes revela { from { clip-path: inset(0 100% 0 0); } }
@keyframes parpadea { 50% { opacity: 0; } }
@keyframes pulsacion {
  from { transform: scale(.84); box-shadow: 0 0 0 0 color-mix(in srgb, var(--foco) 75%, transparent); }
  to { box-shadow: 0 0 0 18px transparent; }
}

/* The changes on the video */
@keyframes entra { from { opacity: 0; transform: translateY(26%) scale(1.14); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes palabra { from { opacity: 0; transform: translateY(45%) scale(.7); } }
@keyframes se-aparta { 8%, 92% { opacity: 0; } }
@keyframes corte { from { opacity: 1; transform: scale(1.16); } to { opacity: 1; transform: scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 640px) {
  :root { --pie: 40px; }
  /* On a phone the window is an app's screen: no title bar, and the video leads,
     taking all the height the title, the last reply and the bar do not need. */
  .hero-caja { --alto: min(104vw, 460px, max(143px, calc(100 * var(--vh) - 407px - var(--pie)))); --relleno: 12px; }
  h1 { font-size: clamp(31px, 9vw, 38px); }
  .entrada { display: none; }
  .ventana { margin-top: 12px; }
  .ventana-barra { display: none; }
  .hilo-marco { flex-basis: 84px; min-height: 84px; }
  .hilo-marco.arriba { --fundido: 20px; }
  /* While the film types, the bar can grow one line: the thread makes room so no scrollbar appears. */
  .charla:has(.peticion.dictando) .hilo-marco { flex-basis: 63px; min-height: 63px; }
  .pide { margin-top: 14px; }
  .actividad { gap: 4px; margin-top: 8px; }
  .responde { margin-top: 8px; }
  .peticion { --renglon: 21px; }
  .peticion textarea, .tecleo { font-size: 16px; letter-spacing: -.012em; }   /* with less, the iPhone zooms when typing */
  .reproductor { --alto-controles: 24px; margin-bottom: 28px; }
  .controles { top: calc(100% + 4px); }
  .enviar, .ayuda-boton { width: 24px; height: 24px; }
  .ayuda-boton { line-height: 24px; font-size: 13px; }
  .enviar svg { width: 14px; height: 14px; }
  .edicion { --alto-tira: 40px; margin-top: 8px; }
  .edicion .palabras { font-size: 9px; padding: 0 6px 3px; }
  .edicion .titulito { font-size: 12px; padding-top: 2px; }
  .pie { gap: 10px; font-size: 10px; letter-spacing: .02em; text-transform: none; }
  .pie-logo { width: 54px; }
}
/* On the narrowest, the sample text goes down a point to fit on one line. What is typed stays at 16px, because of the iPhone's zoom. */
@media (max-width: 360px) {
  .peticion textarea::placeholder { font-size: 15px; }
}

/* ---------- What the page's markup had as inline styles: the policy allows none ---------- */

.i0 { --i: 0; }
.i1 { --i: 1; }
.i2 { --i: 2; }
.i3 { --i: 3; }
.i4 { --i: 4; }
.i5 { --i: 5; }
.foto-mirador { background-image: url("mirador.jpg"); }
.foto-atardecer { background-image: url("plano-atardecer.jpg"); }
.foto-playa { background-image: url("plano-playa.jpg"); }
.tramo-gancho { --de: 0; --a: 33.3; }
/* As specific as `.edicion .nuevo` and after it, because an inline style would have won over that rule. */
.edicion .tramo-broll-1 { --de: 26; --a: 44; background-image: url("plano-atardecer.jpg"); }
.edicion .tramo-broll-2 { --de: 60; --a: 78; --i: 3; background-image: url("plano-playa.jpg"); }
.tramo-subtitulos { --de: 6; --a: 94; }
.tramo-look { --de: 0; --a: 100; }