/* La página, en estilo AYOCIN (DESIGN.md): crema y espresso, tipografía
   monumental, superficies planas, reglas finas y el marco como único objeto. */

:root {
  --borde: clamp(16px, 4vw, 60px);
  --regla: rgb(46 37 33 / 0.22);
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--color-porcelain-cream);
  color: var(--color-espresso-ink);
  font: 400 var(--text-body) / 1.4 var(--font-systemia);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.mono {
  font-family: var(--font-azeret-mono);
  font-weight: 500;
}

/* Al cambiar de escena o de diseño, la nueva aparece sobre el paspartú. */
@media (prefers-reduced-motion: no-preference) {
  .lienzo > .escena {
    animation: aparecer 0.3s ease both;
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip; /* clip y no hidden: las luces se salen y hidden las dejaría desplazables */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--borde) 30px;
  background: var(--gradient-sunlit-stone), var(--color-stone-haze);
}

/* Luz de ventana y sombras de travesaños: formas grandes y muy desenfocadas. */
.hero-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-luz i {
  position: absolute;
  display: block;
}

.hero-luz .ventana {
  left: -12%;
  top: -35%;
  width: 78%;
  height: 170%;
  background: linear-gradient(100deg, rgb(252 246 236 / 0.85), rgb(253 240 199 / 0.4) 55%, transparent 82%);
  filter: blur(70px);
  transform: rotate(-16deg);
}

.hero-luz .travesanos {
  inset: -20% -10%;
  background: repeating-linear-gradient(
    106deg,
    transparent 0 13%,
    rgb(46 37 33 / 0.13) 13% 16.5%,
    transparent 16.5% 31%
  );
  filter: blur(34px);
}

.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--regla);
  font-weight: 500;
}

.marca {
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* Arriba, las secciones de la página. */
.secciones-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(16px, 2.6vw, 36px);
}

.secciones-nav a {
  color: inherit;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  text-decoration: none;
}

.secciones-nav a:hover {
  border-bottom-color: currentColor;
}

/* Quien aún no tiene marco: por dónde se empieza. */
.sin-marco {
  margin-top: 14px;
  font-weight: 500;
}

/* Un marco que lleva rato sin hablar: arriba, que no se pase por alto. */
.marco-caido {
  max-width: 720px;
  margin-top: 14px;
  padding: 14px var(--card-padding);
  border-radius: var(--radius-cards);
  background: var(--color-peach-wash);
  color: var(--color-espresso-ink);
  font-weight: 500;
}

.marco-caido[hidden] {
  display: none;
}

.marco-caido-titulo {
  margin: 0 0 4px;
  font-size: 18px;
}

.marco-caido p:last-child {
  margin: 0;
}

.sin-marco a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-underline-offset: 4px;
}

/* Bajo la vista previa, las escenas: se pasa de una a otra. */
.escenas-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(14px, 2.4vw, 32px);
}

.escenas-nav button {
  min-height: 44px;
  padding: 12px 0 10px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-weight: 500;
  line-height: 1.2;
}

.escenas-nav button:hover,
.escenas-nav button[aria-current='true'] {
  border-bottom-color: currentColor;
}

/* Quién ha entrado, y la salida. */
.cuenta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cuenta-nombre {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuenta a {
  color: inherit;
  text-underline-offset: 3px;
}

.cuenta button {
  padding: 10px 20px;
  border: 1px solid var(--color-espresso-ink);
  border-radius: 0;
  background: var(--color-espresso-ink);
  color: var(--color-porcelain-cream);
}

/* Pestañas planas, radio 0: «Transparent Feature Tab». */
.modo {
  display: flex;
}

.modo button {
  padding: 10px 20px;
  border: 1px solid rgb(46 37 33 / 0.4);
  border-radius: 0;
  background: transparent;
}

.modo button + button {
  margin-left: -1px;
}

.modo button[aria-pressed='true'] {
  border-color: var(--color-espresso-ink);
  background: var(--color-espresso-ink);
  color: var(--color-porcelain-cream);
}

.hero-titulo {
  margin-top: clamp(18px, 3.4vw, 44px);
  color: var(--color-porcelain-cream);
  font-size: min(17.5vw, var(--text-masthead-display));
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
}

/* El escenario: el objeto a la izquierda y, al lado, el taller donde se elige
   el diseño — para ver el cambio en el marco mientras se toca. Se monta sobre
   el título. */
.escenario {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 860px) 320px;
  justify-content: center;
  align-items: start;
  gap: 30px 40px;
  margin-top: calc(min(17.5vw, var(--text-masthead-display)) * -0.16);
}

/* El objeto: marco oscuro, paspartú crema, panel. */
.objeto {
  position: relative;
}

.objeto::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 4%;
  right: -3%;
  bottom: -26px;
  height: 70px;
  background: rgb(46 37 33 / 0.55);
  filter: blur(38px);
  transform: skewX(-24deg);
}

.marco {
  padding: clamp(7px, 1.4vw, 14px);
  border-radius: 3px;
  background: var(--color-espresso-card);
}

.paspartu {
  padding: clamp(12px, 3.8vw, 46px);
  background: var(--color-porcelain-cream);
}

.paspartu .lienzo {
  outline: 1px solid rgb(46 37 33 / 0.3);
}

.hero-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 40px 0 30px;
}

/* Lo que pasa en el marco de verdad: qué enseña ahora, y por dónde va el último cambio. */
.marco-ahora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  margin: -6px 0 30px;
  font-weight: 500;
  text-align: center;
}

.marco-ahora[hidden] {
  display: none;
}

.marco-ahora .pildora {
  margin-top: 0;
}

.marco-ahora .pildora:disabled {
  opacity: 0.55;
}

.redondo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-espresso-ink);
  border-radius: 50%;
  background: var(--color-ivory-sand);
}

.redondo:hover {
  background: var(--color-porcelain-cream);
}

.redondo svg,
.pildora svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-ficha {
  margin-top: auto;
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 20px;
  border-top: 1px solid var(--regla);
}

.hero-ficha dt {
  font-size: var(--text-caption);
}

.hero-ficha dd {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.hero-ficha a {
  color: inherit;
  text-underline-offset: 3px;
}

/* ---------- El taller: tu diseño ---------- */

/* «Translucent Feature Card»: sin sombra, radio 10, desenfoque de fondo. */
.tarjeta-hero {
  display: grid;
  gap: 22px;
  padding: var(--card-padding);
  border-radius: var(--radius-cards);
  background: rgb(252 246 236 / 0.55);
  backdrop-filter: blur(16px);
}

.tarjeta-hero .rotulo {
  margin-bottom: 0;
}

.tarjeta-hero fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tarjeta-hero :is(legend, label) {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-size: var(--text-caption);
  font-weight: 500;
}

.tarjeta-hero button {
  border: 1px solid rgb(46 37 33 / 0.4);
  border-radius: 0;
  background: transparent;
}

.tarjeta-hero button[aria-pressed='true'] {
  border-color: var(--color-espresso-ink);
  background: var(--color-espresso-ink);
  color: var(--color-porcelain-cream);
}

.estilos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.estilos button {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-weight: 500;
  text-align: left;
}

/* «Según el cielo» ocupa la fila entera: no es un estilo más, los elige. */
.estilos button[data-auto] {
  grid-column: 1 / -1;
}

/* Lo que solo se elige en el conjunto clásico: las mismas piezas, con el mismo aire entre ellas. */
.taller-clasico {
  display: grid;
  gap: 22px;
}

.taller-clasico[hidden] {
  display: none;
}

.campo--noticias {
  margin-top: 22px;
}

.tarjeta-hero .campo--noticias label {
  margin-bottom: 0;
}

.mini.mini--auto {
  background: linear-gradient(90deg, var(--papel) 0 34%, var(--azul) 34% 67%, var(--tinta) 67%);
}

.mini.mini--auto::after {
  content: none;
}

/* Una escena en miniatura: el fondo y, asomando por la esquina, el acento. */
.mini {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  overflow: hidden;
  background: var(--a);
  outline: 1px solid rgb(46 37 33 / 0.4);
}

.mini::after {
  content: '';
  position: absolute;
  right: -5px;
  top: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--b);
}

.estilos button[aria-pressed='true'] .mini {
  outline-color: rgb(252 246 236 / 0.6);
}

.muestras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
}

.tarjeta-hero .muestra-boton {
  width: 44px;
  height: 44px;
  padding: 0;
  border-color: rgb(46 37 33 / 0.5);
  border-radius: 50%;
  background: var(--c);
}

.tarjeta-hero .muestra-boton[aria-pressed='true'] {
  border-color: rgb(46 37 33 / 0.5);
  background: var(--c);
  outline: 2px solid var(--color-espresso-ink);
  outline-offset: 3px;
}

.muestra-boton:focus-visible {
  outline-width: 3px;
}

.letras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.letras button {
  min-height: 44px;
  padding: 8px 4px;
  font-size: 15px;
}

.letras button + button {
  margin-left: -1px;
}

/* ---------- Tu pantalla: cuál es y dónde cuelga ---------- */

.cielo {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 40px;
  margin-top: 30px;
}

.cielo .rotulo {
  grid-column: 1 / -1;
}

.pantalla-ficha {
  display: grid;
  align-content: start;
  gap: 10px;
}

.pantalla-detalle {
  font-weight: 500;
}

.pantalla-marco {
  font-size: var(--text-caption);
  font-weight: 500;
}

.pantalla-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

/* Soltar el marco, al final y aparte. */
.pantalla-acciones--final {
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--regla);
}

/* Los primeros pasos de quien aún no tiene marco. */
.primeros-pasos {
  margin: 6px 0 0;
  padding-left: 1.3em;
  display: grid;
  gap: 8px;
  font-weight: 500;
}

.primeros-pasos[hidden] {
  display: none;
}

.enlace--primero {
  margin-top: 10px;
}

.enlace--primero label {
  font-weight: 700;
}

/* `display: flex` le gana al atributo hidden: sin pantalla no hay nada que renombrar ni soltar. */
.pantalla-acciones[hidden] {
  display: none;
}

/* Son enlaces de texto, no los botones con recuadro del resto de la tarjeta. */
.tarjeta-hero .pantalla-acciones button {
  border: 0;
}

.renombrar .lugar-campo {
  margin-top: 6px;
}

.enlace {
  margin-top: 22px;
}

.enlace .lugar-campo {
  margin-top: 6px;
}

.pantalla-ficha .campo {
  margin-top: 6px;
}

.pantalla-ficha .campo label {
  margin-bottom: 0;
}

.pantalla-ficha fieldset {
  margin-top: 6px;
}

.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fichas button {
  min-height: 40px;
  padding: 8px 14px;
  font-weight: 500;
}

.lugar-actual {
  font-size: var(--text-heading);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* «Espresso Underline Input»: sin relleno, sin radio, una regla debajo. */
.lugar-campo {
  display: flex;
  align-items: stretch;
  margin-top: 16px;
  border-bottom: 1px solid var(--color-espresso-ink);
}

.lugar-campo input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.lugar-campo input::placeholder {
  color: rgb(46 37 33 / 0.7);
}

.lugar-campo input:focus-visible {
  outline: none;
}

.lugar-campo:focus-within {
  border-bottom-width: 2px;
  margin-bottom: -1px;
}

.tarjeta-hero .lugar-campo button {
  padding: 0 0 0 16px;
  border: 0;
  font-weight: 500;
}

.lugar-aviso:empty {
  display: none;
}

.lugar-aviso {
  margin-top: 10px;
  font-size: var(--text-caption);
}

.tarjeta-hero .lugar-resultados button {
  width: 100%;
  min-height: 44px;
  display: grid;
  padding: 8px 0;
  border-width: 0 0 1px;
  border-color: var(--regla);
  text-align: left;
}

.lugar-resultados strong {
  font-weight: 500;
}

.lugar-resultados span {
  font-size: var(--text-caption);
}

/* ---------- Secciones ---------- */

.seccion {
  padding: clamp(60px, 9vw, 120px) var(--borde);
}

.seccion-cab {
  margin-bottom: clamp(30px, 5vw, 60px);
}

.rotulo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--regla);
  font-size: var(--text-caption);
  font-weight: 500;
}

h2 {
  font-size: clamp(var(--text-heading), 5.4vw, var(--text-display));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-heading);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ---------- Tus datos: tareas y fechas ---------- */

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 60px clamp(30px, 6vw, 100px);
}

.datos-col h3 {
  margin-bottom: 30px;
}

.alta fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 20px;
}

.alta fieldset:disabled {
  opacity: 0.55;
}

.campo--ancho {
  grid-column: 1 / -1;
}

.campo label,
.marca-campo {
  display: block;
  font-size: var(--text-caption);
  font-weight: 500;
}

/* «Espresso Underline Input». A 16 px, no a 14: por debajo, el móvil hace zum al tocar. */
.campo :is(input, select) {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--color-espresso-ink);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
}

.campo input::placeholder {
  color: rgb(46 37 33 / 0.7);
}

.campo :is(input, select):focus-visible {
  outline: none;
  border-bottom-width: 3px;
}

.marca-campo {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.marca-campo input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-espresso-ink);
}

/* Los días de una tarea que se repite cada semana: siete casillas en fila. */
.dias-semana {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.dias-semana[hidden] {
  display: none;
}

.alta .pildora {
  grid-column: 2;
  justify-self: end;
  margin-top: 0;
}

.datos-aviso:empty {
  display: none;
}

.datos-aviso {
  margin-top: 14px;
  font-weight: 500;
}

.lista {
  margin-top: 30px;
  border-top: 1px solid var(--regla);
}

.lista:empty {
  display: none;
}

.lista li {
  min-height: 60px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 14px;
  border-bottom: 1px solid var(--regla);
}

.lista .vacio {
  grid-template-columns: 1fr;
}

.casilla {
  width: 44px;
  height: 44px;
  margin-left: -11px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
}

.casilla::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-espresso-ink);
  border-radius: 50%;
}

.casilla:hover::before {
  background: var(--color-ivory-sand);
}

.casilla[aria-pressed='true']::before {
  background: var(--color-espresso-ink);
  box-shadow: inset 0 0 0 4px var(--color-porcelain-cream);
}

.dato-titulo {
  padding: 8px 0;
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.dato-titulo small {
  display: block;
  font-size: var(--text-caption);
  font-weight: 400;
}

.es-hecha .dato-titulo {
  text-decoration: line-through;
}

.dato-cuando {
  font-size: var(--text-caption);
  font-weight: 500;
  white-space: nowrap;
}

/* Sin colores de estado: lo atrasado pesa más, no cambia de tono. */
.dato-cuando.es-atrasada,
.dato-cuando.es-hoy {
  font-weight: 700;
}

.dato-dia {
  min-width: 62px;
  font-size: var(--text-caption);
  font-weight: 500;
}

.dato-dia .mono {
  margin-right: 4px;
  font-size: 24px;
  letter-spacing: -0.06em;
}

.borrar {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-caption);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.borrar[data-armado] {
  font-weight: 700;
}

/* Editar y borrar comparten la última celda de la fila. */
.dato-acciones {
  display: flex;
  gap: 14px;
}

/* Corregir lo ya apuntado, en su misma fila. */
.lista .es-edicion {
  grid-template-columns: 1fr;
  padding: 14px 0 10px;
}

.edicion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  align-items: end;
}

.edicion-acciones {
  grid-column: 1 / -1;
  display: flex;
  gap: 18px;
}

.hechas {
  margin-top: 20px;
}

/* Un apartado más dentro de una columna de «Tus datos», con su explicación. */
.datos-otro {
  margin-top: 56px;
}

.datos-nota {
  margin: 10px 0 18px;
  font-size: var(--text-caption);
  line-height: 1.5;
}

.datos-pasos {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: var(--text-caption);
  line-height: 1.5;
}

.datos-pasos li + li {
  margin-top: 8px;
}

.hechas summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}

.hechas .lista {
  margin-top: 0;
}

.seccion--arena {
  background: var(--color-ivory-sand);
}

.seccion--arena .tarjeta {
  background: var(--color-porcelain-cream);
}

/* ---------- Tarjetas de escena ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--element-gap);
}

.tarjeta {
  padding: 10px;
  border-radius: var(--radius-cards);
  background: var(--color-ivory-sand);
}

.tarjeta .lienzo {
  border-radius: 4px;
}

.tarjeta-cuerpo {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 20px 10px 10px;
}

.tarjeta-cuerpo .mono {
  font-size: var(--text-caption);
}

.tarjeta-cuerpo p {
  max-width: 34ch;
  min-height: 2.8em;
}

/* La vista previa de cada escena es un botón: la enseña en grande, arriba. */
.tarjeta-ver {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.tarjeta-ver .lienzo {
  display: block;
}

.tarjeta-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-top: 6px;
}

.tarjeta-acciones[hidden] {
  display: none;
}

/* Si la escena sale o no en el marco: se toca para cambiarlo. */
.interruptor {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--color-espresso-ink);
  border-radius: var(--radius-buttons);
  background: transparent;
  font-weight: 500;
}

.interruptor::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-espresso-ink);
  border-radius: 50%;
}

.interruptor[aria-pressed='true'] {
  background: var(--color-espresso-ink);
  color: var(--color-porcelain-cream);
}

.interruptor[aria-pressed='true']::before {
  border-color: var(--color-porcelain-cream);
  background: var(--color-porcelain-cream);
}

/* «Espresso Order Pill»: el hueco de la derecha es para la flecha. */
.pildora {
  position: relative;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 60px 10px 20px;
  border: 1px solid var(--color-porcelain-cream);
  border-radius: var(--radius-buttons);
  background: var(--color-espresso-ink);
  color: var(--color-porcelain-cream);
  font-weight: 500;
  line-height: 1;
}

.pildora svg {
  position: absolute;
  right: 20px;
  top: 50%;
  translate: 0 -50%;
  transition: translate 0.2s ease;
}

.pildora:hover svg {
  translate: 4px -50%;
}

@media (prefers-reduced-motion: reduce) {
  .pildora svg {
    transition: none;
  }
}

/* ---------- Pie ---------- */

.pie {
  padding: 14px var(--borde) 30px;
  background: var(--color-ivory-sand);
  font-size: var(--text-caption);
}

.pie a {
  color: inherit;
  text-underline-offset: 3px;
}

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 1120px) {
  .escenario {
    grid-template-columns: minmax(0, 860px);
  }

  .hero-controles {
    margin-bottom: 0;
  }

  /* Sin margen debajo de las escenas, el -6 px de arriba montaba la raya de la escena elegida sobre esta línea. */
  .marco-ahora {
    margin-top: 12px;
  }
}

@media (max-width: 720px) {
  .cielo {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .escenas-nav {
    order: 3;
    width: 100%;
  }

  .cuenta {
    gap: 14px;
  }
}

/* En el móvil las escenas de la vista previa caben en una línea; las flechas sobran. */
@media (max-width: 720px) {
  .hero-controles .redondo {
    display: none;
  }
}

/* En el celular la cabecera es una sola línea: la marca y las secciones, que
   se deslizan de lado (el borde que se desvanece dice que hay más). Quién ha
   entrado y la salida van en «Tu cuenta». */
@media (max-width: 720px) {
  .cabecera {
    flex-wrap: nowrap;
    gap: 18px;
    padding: 4px 0;
  }

  .secciones-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 18px;
    padding-right: 24px;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }

  .secciones-nav::-webkit-scrollbar {
    display: none;
  }

  .secciones-nav a {
    flex: none;
    white-space: nowrap;
  }

  .cabecera .cuenta {
    display: none;
  }
}

/* ---------- Plegables: «Tu pantalla» y «Tu diseño», en el celular ---------- */

/* En el computador no se pliegan: el botón ni aparece. */
.plegable {
  display: none;
}

@media (max-width: 720px) {
  /* El botón hace de rótulo: qué es, lo que tiene puesto y una flecha que dice si está abierta. */
  .tarjeta-hero .plegable {
    grid-column: 1 / -1;
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 14px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
  }

  .tarjeta-hero .plegable[aria-expanded='true'] {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--regla);
  }

  .plegable-que {
    font-size: var(--text-caption);
    font-weight: 500;
  }

  .plegable-resumen {
    grid-row: 2;
    overflow: hidden;
    font-size: 17px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .plegable::after {
    content: '';
    grid-row: 1 / span 2;
    grid-column: 2;
    width: 9px;
    height: 9px;
    margin: 0 4px 4px 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .plegable[aria-expanded='true']::after {
    margin: 4px 4px 0 0;
    transform: rotate(-135deg);
  }

  [data-plegable] > .rotulo {
    display: none;
  }

  [data-plegada] {
    gap: 0;
  }

  [data-plegada] > :not(.plegable) {
    display: none !important;
  }
}

/* En el celular, la segunda columna de un formulario es demasiado estrecha para
   su botón («Enviar al marco» se partía en dos líneas): va debajo, a la izquierda. */
@media (max-width: 720px) {
  .alta .pildora {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ---------- Las escenas, en el celular ---------- */

/* Una fila por escena: la vista previa pequeña a un lado y, al otro, su nombre
   y sus botones. La explicación sobra: la vista previa ya dice qué es. */
@media (max-width: 720px) {
  .tarjetas {
    gap: 10px;
  }

  .tarjeta {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  .tarjeta-cuerpo {
    gap: 2px;
    padding: 0;
  }

  .tarjeta-cuerpo h3 {
    font-size: 24px;
  }

  .tarjeta-cuerpo p {
    display: none;
  }

  .tarjeta-acciones {
    gap: 0 14px;
  }
}

/* ---------- Tu cuenta ---------- */

/* Aquí los campos van uno sobre otro, y el botón debajo, a la izquierda: a la derecha se partía en dos líneas. */
#cuenta .alta :is(.pildora, .borrar) {
  grid-column: 1 / -1;
  justify-self: start;
}

.cuenta-final {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: 60px;
  padding-top: 14px;
  border-top: 1px solid var(--regla);
}

.cuenta-final-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}

.cuenta-final a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: var(--text-caption);
  text-underline-offset: 3px;
}

.cuenta-borrar {
  width: min(100%, 520px);
  margin-top: 10px;
  padding: 20px;
  border-radius: var(--radius-cards);
  background: var(--color-peach-wash);
}

.cuenta-borrar[hidden] {
  display: none;
}

.cuenta-borrar-texto {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

/* ---------- Mensaje ---------- */

/* El formulario a un lado y, al otro, cómo se verá en el marco. */
.mensaje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  align-items: start;
  gap: 40px clamp(30px, 6vw, 100px);
}

.campo textarea {
  width: 100%;
  min-height: 92px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--color-espresso-ink);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 20px;
  line-height: 1.3;
  resize: vertical;
}

.campo textarea::placeholder {
  color: rgb(46 37 33 / 0.7);
}

.campo textarea:focus-visible {
  outline: none;
  border-bottom-width: 3px;
}

.mensaje-cuenta {
  display: block;
  margin-top: 6px;
  font-size: var(--text-caption);
  text-align: right;
}

.mensaje-vista .lienzo {
  display: block;
  border-radius: 4px;
  outline: 1px solid rgb(46 37 33 / 0.3);
}

.mensaje-actual {
  margin-top: 14px;
  font-weight: 500;
}

/* ---------- Fotos ---------- */

/* «Añadir fotos» es una píldora que abre el selector de archivos. */
.fotos-elegir {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  cursor: pointer;
}

.fotos-elegir input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.fotos-elegir:focus-within {
  outline: 2px solid var(--color-espresso-ink);
  outline-offset: 3px;
}

.fotos-elegir[data-desactivado] {
  opacity: 0.55;
  pointer-events: none;
}

.album {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--element-gap);
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.album:empty {
  display: none;
}

.album-foto {
  position: relative;
  display: grid;
  gap: 8px;
}

/* Recortada como la recorta el marco: 800 × 480. */
.album-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 480;
  border-radius: 4px;
  background: var(--color-ivory-sand);
  object-fit: cover;
}

.album-pie {
  display: flex;
  align-items: end;
  gap: 12px;
}

.album-pie input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--color-espresso-ink);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
}

.album-pie input:focus-visible {
  outline: none;
  border-bottom-width: 3px;
}

.album-toca {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-buttons);
  background: var(--color-espresso-ink);
  color: var(--color-porcelain-cream);
  font-size: var(--text-caption);
}