/* Tipografía y controles de la portada. Identidad de cabecera restaurada
   a pedido del usuario; la marca utiliza su composición anterior. */
.studio-portada {
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --f-rara: var(--sans);
  --f-serif: var(--sans);
  --mono: var(--sans);
  --track-rotulo: .08em;
  --track-rotulo-ancho: .18em;
}
.studio-portada h1,
.studio-portada h2,
.studio-portada h3 {
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.studio-portada h1 em,
.studio-portada h2 em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.045em;
}
.studio-portada .cabecera-lema h2 em {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -.035em;
}
.studio-portada .hero h1 { font-size: clamp(44px, 7.3vw, 102px); line-height: 1.06; }
.studio-portada .hero-bajada { line-height: 1.7; }

/* Composición de marca anterior al ajuste del arcoíris. */
.studio-portada #nav { padding-block: 16px; }
.studio-portada #nav.compacta { padding-block: 12px; }
/* Una sola línea de marca: Sweet Little Trauma Studio. */
.studio-portada #nav .marca-tipografica {
  display: inline-flex;
  flex-direction: row;
  gap: .22em;
  align-items: baseline;
  max-width: none;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.studio-portada #nav .marca-tipografica::before,
.studio-portada #nav .marca-tipografica::after { content: none; }
.marca-sweet { grid-column: 1; grid-row: 1; }
.marca-trauma { grid-column: 2; grid-row: 1; }
.studio-portada #nav .marca-studio {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: .01em;
  color: var(--rosa);
}
@media (max-width: 600px) {
  .studio-portada #nav .marca-tipografica { font-size: 14px; }
  .studio-portada #nav .marca-studio { font-size: 17px; }
}
.studio-portada .nav-menu { margin-left: 0; }
.studio-portada .nav-menu a,
.studio-portada .nav-menu button {
  border-radius: 999px;
  min-height: 44px;
  font-weight: 600;
  letter-spacing: .07em;
}

/* Controles redondeados, con foco visible y el mismo destino que antes. */
.studio-portada .cta,
.studio-portada .boton-grande {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--tinta);
  color: #211921;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.studio-portada .boton-grande {
  min-height: 54px;
  padding: 16px 34px;
  font-size: 16px;
  box-shadow: 0 6px 24px #0003;
}
.studio-portada .cta:hover,
.studio-portada .boton-grande:hover {
  background: var(--gr-rosa-hover);
  color: #211921;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px #0003;
}
.studio-portada .cta:active,
.studio-portada .boton-grande:active { transform: translateY(0); }
.studio-portada .pastillas { margin-bottom: 28px; gap: 10px; }
.studio-portada .pastillas a {
  border: 1px solid #ffffff38;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 42px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}
.studio-portada .pastillas a:hover { background: #ffffff0e; }
.studio-portada .hamburguesa { min-width: 44px; min-height: 44px; border-radius: 50%; }
.studio-portada .hero { min-height: max(680px, 90svh); padding-top: 145px; }
.studio-portada .hero-cuerpo { max-width: 1080px; }

@media (max-width: 1180px) {
  .studio-portada .volver { display: none; }
  .studio-portada .nav-fila { gap: 18px; }
}
@media (max-width: 760px) {
  .studio-portada #nav { max-height: 100svh; overflow-y: auto; }
  .studio-portada .nav-fila { flex-wrap: wrap; }
  .studio-portada .nav-menu { display: none; }
  .studio-portada .hamburguesa { display: block; }
  .studio-portada #nav.menu-abierto .nav-menu {
    display: flex;
    flex-direction: column;
    position: static;
    order: 3;
    flex: 0 0 100%;
    align-items: stretch;
    background: var(--papel-99);
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--linea);
    gap: 4px;
  }
  .studio-portada #nav.menu-abierto .nav-menu > * { text-align: left; }
  .studio-portada #nav .mega {
    position: static;
    padding: 20px 0;
    border-top: 0;
    gap: 24px;
    background: transparent;
  }
  .studio-portada #nav .mega.abierto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-portada .mega-col a { min-height: 40px; display: flex; align-items: center; font-size: 14px; }
}
@media (max-width: 600px) {
  .studio-portada #nav { padding: 13px 16px; }
  .studio-portada .nav-fila { gap: 10px; }
  .studio-portada .nav-acciones { gap: 4px; }
  .studio-portada .cta { min-height: 42px; padding: 10px 15px; font-size: 12px; }
  .studio-portada .hero { min-height: max(660px, 90svh); padding-top: 128px; padding-bottom: 90px; }
  .studio-portada .hero h1 { font-size: clamp(40px, 10.6vw, 62px); }
  .studio-portada .hero-bajada { font-size: 15px; }
}
@media (max-width: 370px) {
  .studio-portada #nav { padding-inline: 12px; }
  .studio-portada .cta { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-portada .aparece,
  .studio-portada .seccion-cabecera > * { opacity: 1 !important; transform: none !important; }
  .studio-portada .cta:hover,
  .studio-portada .boton-grande:hover { transform: none; }
}

/* Opción 1 elegida: petróleo gris y celeste metalizado.
   Los tokens rosa/rojo/acento y todos los acentos rosados originales se conservan. */
html:has(body.studio-portada) { background: #405967; }
.studio-portada {
  --papel: #405967;
  --papel-2: #354f5d;
  --tinta: #edf2f4;
  --tinta-dim: #d5e1e7;
  --tinta-faint: #cad8df;
  --linea: #d5e8f02b;
  --linea-fuerte: #d5e8f05c;
  --capa: #c3e2ef12;
  --capa-fuerte: #c3e2ef20;
  --g6: #95b0be52;
  --papel-90: #354f5de6;
  --papel-97: #354f5df7;
  --papel-98: #354f5dfa;
  --papel-99: #354f5dfc;
  --noche: #304956;
  --noche-tinta: #edf2f4;
  --noche-tinta-dim: #d5e1e7;
  --noche-tinta-faint: #cad8df;
  --linea-noche: #d5e8f02b;
  background: var(--papel) url('./fondo-petroleo.webp') center top / auto max(950px, 100svh) no-repeat;
}
.studio-portada #nav {
  background: rgb(50 75 88 / .95);
  border-color: var(--linea-fuerte);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.studio-portada #nav.compacta,
.studio-portada #nav.menu-abierto { background: #354f5df5; }
.studio-portada #nav .mega { background: #354f5dfc; }
.studio-portada .hero-media { background: transparent; }
.studio-portada .hero-media > img,
.studio-portada .hero-media > video {
  position: absolute; inset: 0; z-index: 1;
  opacity: 1; filter: none;
}
.studio-portada .hero-velo {
  z-index: 0; pointer-events: none;
  background: var(--papel);
}
.studio-portada .hero-cuerpo {
  text-shadow: 0 2px 5px #193440e6, 0 4px 18px #193440b3;
}
.studio-portada .cta,
.studio-portada .boton-grande {
  color: #203746;
  border-color: #e6f7ffbd;
  background: linear-gradient(125deg, #f1fbff 0%, #c6e2ed 18%, #a8c8d8 39%, #e6f4f9 64%, #b0c9d7 100%);
  box-shadow: inset 0 1px 1px #ffffffb3, inset 0 -1px 2px #48748c40, 0 5px 14px #243e4a40;
}
/* El rosa que ya tenían al pasar el puntero también permanece. */
.studio-portada .cta:hover,
.studio-portada .boton-grande:hover { background: var(--gr-rosa-hover); color: #211921; }
.studio-portada .pastillas a { border-color: #cee3ed66; }
.studio-portada .video-portada-control {
  background: #354f5da8; color: var(--tinta); border-color: #cee3ed66;
}
.studio-portada .tarjeta,
.studio-portada .app,
.studio-portada .ficha,
.studio-portada .pieza,
.studio-portada .ejemplo { background-color: var(--papel-2); }
.studio-portada #inicio > .ejemplos { background: #354f5d; }
.studio-portada .ejemplos-cabecera > p:last-child,
.studio-portada .ejemplos-nota,
.studio-portada .ejemplo-prompt,
.studio-portada .ejemplo-pelicula p { color: var(--tinta-dim); }
.studio-portada .montaje-escenas button:not([aria-pressed=true]) {
  background: #405967; color: var(--tinta);
}
@media (max-width: 760px) {
  .studio-portada #nav .mega { background: transparent; }
}

/* Menú centrado en la pantalla, con columnas laterales del mismo ancho. */
@media (min-width: 1281px) {
  .studio-portada .nav-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .studio-portada #nav .marca-tipografica { justify-self: start; }
  .studio-portada .nav-menu { margin-inline: 0; justify-self: center; }
  .studio-portada .nav-acciones { margin-left: 0; justify-self: end; }
}

/* Llamadas a crear como enlaces de texto rosa, sin cápsula. */
.studio-portada .cta,
.studio-portada .boton-grande,
.studio-portada .cta:hover,
.studio-portada .boton-grande:hover,
.studio-portada .cta:active,
.studio-portada .boton-grande:active {
  color: var(--rosa); background: none; border: 0; border-radius: 0;
  box-shadow: none; transform: none; padding: 10px 0;
}
.studio-portada .boton-grande { font-size: 18px; }
.studio-portada .cta:hover,
.studio-portada .boton-grande:hover { text-decoration: underline; text-underline-offset: .3em; }
.studio-portada .nav-acciones { gap: 22px; }
.studio-portada .nav-acciones > .volver { display: none; }
.studio-portada #nav:has(.cuenta-panel:not([hidden])) { overflow: visible; }
.studio-portada .cuenta-disparador { max-width: 155px; }
.studio-portada .cuenta-panel { background: #304b59; border-color: #8aa5b84d; }
.studio-portada .cuenta-panel a:hover,
.studio-portada .cuenta-panel button:hover { background: #ffffff0d; }
.studio-portada .cta-final a { color: var(--rosa); }
/* En el celular la barra es una sola fila: marca, «Empezar» y menú. Antes
   eran dos filas (la marca y el menú arriba; el idioma, «Empezar» e «Iniciar
   sesión» abajo) y la barra comía 120 px de una pantalla de 812.
     · «Empezar» queda SIEMPRE a la vista, en el rosa de las llamadas a crear
       de la portada: lo pidió el dueño el 03/10/2026, y el 04/10/2026 se llevó
       al diseño original. Con sesión, en su lugar va la cuenta.
     · «Iniciar sesión» y el idioma pasan adentro del menú: aparecen arriba de
       todo al abrirlo. Medido: a 320 px no entran marca, idioma, «Empezar» y
       menú en una sola fila. */
@media (max-width: 600px) {
  .studio-portada .nav-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 8px; }
  .studio-portada #nav .marca-tipografica { grid-row: 1; grid-column: 1; min-width: 0; }
  .studio-portada .nav-acciones { display: contents; }
  .studio-portada .nav-acciones .cta { grid-row: 1; grid-column: 2; justify-self: end; padding-inline: 6px; }
  .studio-portada .hamburguesa { grid-row: 1; grid-column: 3; justify-self: end; }
  /* Con sesión: la cuenta en el lugar de «Empezar», con el nombre cortado
     para que entre en la fila. */
  .studio-portada #nav:has(.cuenta-disparador) .nav-acciones .cta { display: none; }
  .studio-portada #nav .acceso-cuenta:has(.cuenta-disparador) { grid-row: 1; grid-column: 2; justify-self: end; }
  .studio-portada #nav .acceso-cuenta .cuenta-disparador { max-width: 84px; }
  /* Con el menú cerrado no se ven «Iniciar sesión» ni el idioma. */
  .studio-portada #nav:not(.menu-abierto) .acceso-cuenta:not(:has(.cuenta-disparador)),
  .studio-portada #nav:not(.menu-abierto) .idioma-selector { display: none; }
  /* Abierto: «Iniciar sesión» a la izquierda y el idioma a la derecha. */
  .studio-portada #nav.menu-abierto .acceso-cuenta:not(:has(.cuenta-disparador)) { grid-row: 2; grid-column: 1; justify-self: start; margin-top: 6px; }
  .studio-portada #nav.menu-abierto .idioma-selector { grid-row: 2; grid-column: 2 / -1; justify-self: end; margin-top: 6px; }
  .studio-portada #nav.menu-abierto .nav-menu { grid-row: 3; grid-column: 1 / -1; }
  .studio-portada #nav .mega { grid-column: 1 / -1; }
  .studio-portada .hero { padding-top: 174px; }
}

/* «Empezar» y el botón fijo «Crear» llevan al mismo lugar (/crear/). En la
   portada no van los dos: queda «Empezar», que el dueño pidió siempre a la
   vista, y el fijo no aparece mientras «Empezar» esté en la barra. Con sesión
   la barra muestra la cuenta, y el fijo vuelve a aparecer cuando la caja de
   crear se va de la vista (menu-principal.js). Entre 601 y 760 px «Empezar»
   sigue arriba con sesión o sin ella, así que ahí el fijo no va nunca. */
@media (min-width: 601px) and (max-width: 760px) {
  .studio-portada .crear-fijo { display: none; }
  body.studio-portada.con-crear-fijo { padding-bottom: 0; }
}
@media (max-width: 600px) {
  .studio-portada:not(:has(#nav .cuenta-disparador)) .crear-fijo { display: none; }
  body.studio-portada.con-crear-fijo:not(:has(#nav .cuenta-disparador)) { padding-bottom: 0; }
}

/* Colores forzados (contraste alto de Windows): las dos rayas del botón del
   menú son un fondo de color y el navegador las borraba. En el celular es la
   única puerta a «Iniciar sesión» y al idioma. Se pintan con el color de los
   botones del sistema, como las del Studio (menu.css). */
@media (forced-colors: active) {
  .studio-portada .hamburguesa span { forced-color-adjust: none; background: ButtonText; }
}

/* Marca en una línea, con un único subrayado delicado. */
.studio-portada #nav .marca.firma-editorial {
  padding: 10px 0; font-size: 17px; line-height: 24px;
  background: none;
}
.studio-portada .nav-menu a,
.studio-portada .nav-menu button,
.studio-portada .nav-acciones .cta,
.studio-portada .nav-acciones .cuenta-disparador,
.studio-portada .nav-acciones .cuenta-ingresar {
  font-size: 13px; line-height: 20px; min-height: 44px;
  padding-block: 12px;
}
@media (max-width: 600px) {
  .studio-portada #nav .marca.firma-editorial { font-size: 15px; }
}
/* A 340 px o menos la marca dice «Sweet Little Trauma», como en la barra de
   las demás pantallas: con «Studio» no entraba al lado de «Empezar» (en
   inglés, «Get started») y del menú. El nombre entero sigue en la etiqueta
   del enlace. */
@media (max-width: 340px) {
  .studio-portada #nav .marca-studio { display: none; }
}

/* Navegación principal completa, centrada y sin perder accesos en notebooks. */
.studio-portada .nav-menu { gap: 2px; align-items: center; }
.studio-portada .nav-menu > a,
.studio-portada .nav-menu > button {
  padding-inline: 9px; white-space: nowrap; letter-spacing: .015em;
  text-transform: none; font-weight: 500;
}
.studio-portada .nav-menu > a[aria-current="page"] { color: var(--rosa); }
@media (min-width: 1281px) {
  .studio-portada .nav-fila { gap: 20px; }
}
@media (min-width: 761px) and (max-width: 1280px) {
  .studio-portada .nav-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .studio-portada #nav .marca-tipografica { grid-column: 1; grid-row: 1; justify-self: start; }
  .studio-portada .nav-acciones { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
  .studio-portada .nav-menu { grid-column: 1 / -1; grid-row: 2; justify-self: center; display: flex; margin: 0; }
  .studio-portada .hamburguesa { display: none; }
  .studio-portada .hero { padding-top: 190px; }
}
@media (max-width: 760px) {
  .studio-portada #nav.menu-abierto .nav-menu {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch; gap: 4px 12px;
  }
  .studio-portada #nav.menu-abierto .nav-menu > a,
  .studio-portada #nav.menu-abierto .nav-menu > button { text-align: left; justify-content: flex-start; }
  .studio-portada #nav .mega { padding: 16px 0; }
}
@media (max-width: 440px) {
  .studio-portada #nav .mega.abierto { grid-template-columns: 1fr; gap: 18px; }
}