/* Páginas de la app de las parejas (entrar, mis bodas, asistente). Se apoya en landing.css. */
.app { max-width: 1160px; margin: 0 auto; padding: 40px 16px 80px; }
.app--estrecha { max-width: 560px; }
.app h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
.app__sub { color: var(--suave); margin-bottom: 1.8em; }
.tarjeta-app { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; box-shadow: 0 10px 40px rgba(79, 28, 38, .06); }
.cab__derecha { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.cab__email { font-size: .85rem; color: var(--suave); }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: .9rem; color: var(--suave); }
.campo > span b { color: var(--tinta); font-weight: 500; }
.campo small { font-size: .8rem; color: var(--suave); opacity: .85; }
.campo input, .campo textarea, .campo select { font: inherit; font-size: 1rem; color: var(--tinta); padding: .7em .85em; border: 1px solid var(--linea); border-radius: 10px; background: var(--crema); width: 100%; }
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 2px solid var(--albero); outline-offset: 1px; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fila3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: .9rem; color: var(--suave); }
.check input { margin-top: .35em; accent-color: var(--vino); }
.campo .check input { width: auto; flex: none; padding: 0; }
.error { color: #a3232f; font-weight: 500; }
.ok { color: #2f6b3a; font-weight: 500; }
.nota { font-size: .88rem; color: var(--suave); background: var(--crema-2); border-radius: 10px; padding: 10px 14px; }
.nota--pruebas { background: #fff3cd; border: 1px solid #e0c56e; }
.boton--ancho { width: 100%; }
.enlace-boton { background: none; border: 0; color: var(--vino); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

/* Mis bodas */
.bodas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 24px; }
.boda-ficha h2 { font-size: 1.7rem; margin-bottom: .1em; }
.boda-ficha__estado { display: inline-block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--crema-2); color: var(--suave); margin-bottom: 10px; }
.boda-ficha__estado--publicada { background: #e3f1e5; color: #2f6b3a; }
.boda-ficha__totales { font-size: .92rem; margin: .2em 0 .6em; }
.boda-ficha__totales b { color: var(--vino); font-weight: 500; }
.boda-ficha__url { font-size: .9rem; word-break: break-all; margin: .4em 0 1em; }
.boda-ficha__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Asistente */
.asistente { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; }
.pasos-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.pasos-nav button { font: inherit; font-size: .85rem; padding: .45em .9em; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta); cursor: pointer; }
.pasos-nav button.activo { background: var(--vino); border-color: var(--vino); color: var(--crema); }
.pasos-nav button.hecho::after { content: " ✓"; }
.paso h2 { font-size: 1.8rem; }
.paso__intro { color: var(--suave); margin-bottom: 1.4em; }
.paso__botones { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.guardado { font-size: .85rem; color: var(--suave); min-height: 1.3em; }
.programa-fila { display: grid; grid-template-columns: 90px 70px 1fr 1.3fr 36px; gap: 8px; margin-bottom: 8px; }
.programa-fila input, .programa-fila select { font: inherit; font-size: .95rem; padding: .55em .6em; border: 1px solid var(--linea); border-radius: 8px; background: var(--crema); min-width: 0; }
.programa-fila button { border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--suave); }
.opciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.opcion-exp { text-align: left; font: inherit; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.opcion-exp b { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--vino-osc); }
.opcion-exp small { color: var(--suave); font-size: .8rem; line-height: 1.35; display: block; }
.opcion-exp.activa { border-color: var(--vino); box-shadow: 0 0 0 2px rgba(122, 46, 58, .15); }
.vista { position: sticky; top: 90px; }
.vista__movil { width: 100%; aspect-ratio: 9 / 17.5; border-radius: 34px; border: 10px solid #1d1716; background: #1d1716; overflow: hidden; box-shadow: 0 24px 60px rgba(46, 37, 34, .25); }
.vista__movil iframe { width: 100%; height: 100%; border: 0; border-radius: 24px; background: var(--crema); }
.vista__pie { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: .85rem; color: var(--suave); }
.slug { display: flex; align-items: center; gap: 0; border: 1px solid var(--linea); border-radius: 10px; background: var(--crema); overflow: hidden; }
.slug span { padding: .7em 0 .7em .85em; color: var(--suave); white-space: nowrap; }
.slug input { border: 0; background: transparent; font: inherit; font-size: 1rem; padding: .7em .85em .7em 0; flex: 1; min-width: 0; }
.slug input:focus { outline: none; }
.publicada { text-align: center; padding: 10px 0; }
.publicada__url { font-family: var(--serif); font-size: 1.5rem; color: var(--vino); word-break: break-all; }
.compartir { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }

@media (max-width: 960px) {
  .asistente { grid-template-columns: 1fr; }
  .vista { position: static; max-width: 340px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .fila2, .fila3 { grid-template-columns: 1fr; }
  .programa-fila { grid-template-columns: 80px 60px 1fr 36px; }
  .programa-fila input[data-k="texto"] { grid-column: 1 / -2; }
  .tarjeta-app { padding: 20px; }
  .cab__email { display: none; }
}

/* Ideas (Mis bodas) */
.ideas-mi { margin-top: 48px; }
.ideas-mi h2 { font-size: 1.6rem; }

/* Vuestra cuenta (Mis bodas) */
.cuenta { margin-top: 56px; }
.cuenta h2 { font-size: 1.9rem; }
.cuenta__acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.cuenta h3 { font-size: 1.35rem; }
.cuenta details summary { cursor: pointer; color: #a3232f; }
.boda-ficha__borrar { margin-left: auto; color: var(--suave); font-size: .85rem; }

/* Preguntas propias (asistente) */
.pregunta { padding: 18px 20px; margin-bottom: 14px; box-shadow: none; }
.pregunta p { margin: 0; }

/* La pareja (Mis bodas) */
.boda-ficha__pareja, .boda-ficha__planner { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: .9rem; color: var(--suave); }
.boda-ficha__pareja summary, .boda-ficha__planner summary { cursor: pointer; color: var(--vino); }
.boda-ficha__pareja p, .boda-ficha__planner p { margin: .6em 0; }
.boda-ficha__invitar { display: flex; gap: 8px; }
.boda-ficha__invitar input { flex: 1; min-width: 0; font: inherit; padding: .5em .7em; border: 1px solid var(--linea); border-radius: 8px; background: var(--crema); }

/* Foto de portada (asistente, paso Estilo) */
.foto-portada { display: flex; gap: 16px; align-items: flex-start; margin: 1.4em 0; padding: 14px; border: 1px dashed var(--linea); border-radius: 12px; }
.foto-portada__muestra { flex: 0 0 96px; height: 96px; border-radius: 10px; background: #ddd center / cover no-repeat; }
.foto-portada .paso__intro { margin: .4em 0 .8em; font-size: .9rem; }
.foto-portada__estado { margin-left: 8px; font-size: .9rem; color: var(--suave); }

/* La galería de la boda (P134): el almacén de imágenes del que tira la web y la papelería */
.galeria { display: flex; flex-wrap: wrap; gap: 12px; margin: 1em 0; }
.galeria__img { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
.galeria__muestra { display: block; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 10px; background: #ddd center / cover no-repeat; }
button.galeria__muestra { cursor: pointer; }
button.galeria__muestra[aria-pressed="true"] { outline: 3px solid var(--vino); outline-offset: 2px; }
.galeria__cuenta { margin-left: 8px; font-size: .9rem; color: var(--suave); }
.galeria--elegir { display: block; margin-top: 1em; }

/* Modo editar y cambios sin publicar (P134) */
.barra-editar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 1em; padding: 10px 14px; border-radius: 12px; background: var(--crema); }
.barra-editar__aviso { font-size: .9rem; font-weight: 600; color: var(--vino); }
/* Editar sobre la vista previa (P134) */
.vista__editar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.vista__editar[hidden] { display: none; }
.vista__ayuda { flex-basis: 100%; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--crema); font-size: .85rem; color: var(--suave); }
.vista__elegido { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .9rem; }
.vista__elegido[hidden] { display: none; }
.dialogo-imagen { max-width: min(560px, 92vw); border: 0; border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(46, 37, 34, .3); }
.dialogo-imagen::backdrop { background: rgba(29, 23, 22, .45); }
.dialogo-imagen h3 { margin-top: 0; }
.dialogo-imagen__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bloques-ocultar { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 1em 0; }
.textos-grupo { margin: 1.2em 0 .2em; font-weight: 600; color: var(--suave); }
/* Un hueco de imagen por bloque de la web (P134, fase 3) */
.imagen-bloque { margin: 1.2em 0; padding-bottom: .8em; border-bottom: 1px dashed var(--linea); }
.imagen-bloque .galeria { margin: .5em 0; }

/* Muestra de las tipografías (asistente, paso Estilo) */
.muestra-letras { display: flex; flex-direction: column; align-items: center; gap: .1em; margin: .2em 0 1.4em; padding: 14px; border-radius: 12px; background: var(--crema); text-align: center; }
.muestra-letras__nombres { font-family: var(--script); font-size: 2.4rem; line-height: 1.2; color: var(--vino); }
.muestra-letras__titulo { font-family: var(--serif); font-size: 1.3rem; }

/* Historia y quiz (asistente) */
.paso__sub { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin: 1.4em 0 .2em; }
.historia-fila { display: grid; grid-template-columns: 90px 64px 1fr auto; gap: 8px; margin-bottom: 14px; }
.historia-fila textarea { grid-column: 1 / -1; }
.quiz-fila { padding: 12px; border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 14px; display: grid; gap: 8px; }
.quiz-fila__cab { display: flex; gap: 8px; }
.quiz-fila__cab input { flex: 1; min-width: 0; }
.quiz-fila__op { display: flex; gap: 8px; align-items: center; }
.quiz-fila__op input[type=radio] { width: auto; flex: 0 0 auto; accent-color: var(--vino); }
.quiz-fila__op input[data-op] { flex: 1; min-width: 0; }
.historia-fila input, .historia-fila select, .historia-fila textarea, .quiz-fila input[data-k], .quiz-fila input[data-op] { font: inherit; padding: .5em .7em; border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco, #fff); min-width: 0; }
.historia-fila button, .quiz-fila__cab button { background: none; border: 0; cursor: pointer; color: var(--suave); font-size: 1rem; }
@media (max-width: 560px) { .historia-fila { grid-template-columns: 74px 58px 1fr auto; } }

/* Enlace a las ideas de detalles en la cabecera de «Mis bodas» */
.cab__enlace { font-size: .9rem; color: var(--vino); text-decoration: none; margin-right: 6px; }
.cab__enlace:hover { text-decoration: underline; }

/* Entrar: pestañas, Google y separador */
.pestanas-entrar { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 999px; background: var(--crema); }
.pestanas-entrar button { flex: 1; font: inherit; padding: .55em 1em; border: 0; border-radius: 999px; background: transparent; color: var(--suave); cursor: pointer; }
.pestanas-entrar button[aria-selected="true"] { background: var(--blanco); color: var(--vino-osc); font-weight: 500; box-shadow: 0 2px 8px rgba(79, 28, 38, .1); }
.boton--google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #3c4043; border-color: #dadce0; }
.boton--google:hover { background: #f8f9fa; border-color: #c6c9ce; color: #3c4043; }
.google__nota { font-size: .8rem; margin: .6em 0 0; }
.separador-o { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--suave); font-size: .85rem; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.entrar-app p:first-child { margin: 0 0 12px; color: var(--tinta); }
.campo-codigo { font-size: 1.6rem; letter-spacing: .35em; text-align: center; }
.enlaces-entrar { text-align: center; margin: 1em 0 0; font-size: .92rem; }
.aviso-entrar { padding: 12px 16px; border-radius: 12px; background: #fff4dd; color: var(--tinta); font-size: .95rem; }
.google__nota { background: none; padding: 0; }

/* Campos necesarios para publicar (asistente) */
.obligatorio { color: var(--vino); font-weight: 600; text-decoration: none; cursor: help; margin-left: 2px; }

/* «Otra combinación al azar» (asistente, paso Estilo) */
.otra-combinacion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 6px; }
.otra-combinacion small { color: var(--suave); }

/* Colores de las letras (asistente, paso Estilo) */
.color-elegir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.color-elegir > span { width: 100%; }
.color-elegir .check { margin: 0; }
.color-elegir input[type=color] { width: 54px; height: 36px; padding: 2px; border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco, #fff); cursor: pointer; }
.color-elegir input[type=color]:disabled { opacity: .35; cursor: default; }
.aviso-color { padding: 10px 14px; border-radius: 10px; background: #fff4dd; font-size: .9rem; }

/* Grupo de campos (lista de bodas) */
.campo--grupo { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px 4px; margin: 16px 0; }
.campo--grupo legend { padding: 0 6px; }
.aviso-iban { display: block; color: var(--suave); margin: -4px 0 10px; }

/* «Me quedo con esta» (desde Sorpréndeme) */
.estilo-elegido { margin: 0 0 24px; border: 2px solid var(--albero, #d9a441); }
.estilo-elegido h2 { margin-top: 0; }
.estilo-elegido__botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Asistente: web bilingüe y paso «Traducción» */
.campo--bilingue { margin: -6px 0 18px; }
.traduccion-fila { border-bottom: 1px solid var(--linea, #e6dccb); padding: 12px 0; }
.traduccion-fila__etiqueta { margin: 0 0 4px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave, #8a7f73); }
.traduccion-fila__original { margin: 0 0 6px; white-space: pre-line; font-style: italic; }
.traduccion-fila__original--defecto { font-style: normal; color: var(--suave, #8a7f73); font-size: .9rem; }
.traduccion-fila input, .traduccion-fila textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .55em .75em; border: 1px solid var(--linea, #e6dccb); border-radius: 10px; }
.traduccion-fila small { color: var(--suave, #8a7f73); }

/* Dirección de la web: «____.webding.es» */
.slug-aviso { display: block; margin-top: 4px; color: var(--suave, #8a7f73); }
#slugSufijo { white-space: nowrap; }
.boda-ficha__planner .boda-ficha__invitar { flex-wrap: wrap; }
.boda-ficha__planner .boda-ficha__invitar input { flex: 1 1 100%; }
/* Crear cuenta: novios o wedding planner (P37) */
.tipo-cuenta { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tipo-cuenta legend { font-size: .9rem; color: var(--suave); margin-bottom: 6px; padding: 0; }
.tipo-cuenta label { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; cursor: pointer; font-size: .9rem; }
.tipo-cuenta label:has(input:checked) { border-color: var(--vino); background: #fbf3f1; }
.tipo-cuenta input { margin-top: .3em; accent-color: var(--vino); }
.tipo-cuenta small { display: block; color: var(--suave); font-size: .8rem; margin-top: 2px; }
@media (max-width: 420px) { .tipo-cuenta { grid-template-columns: 1fr; } }
/* «Mis bodas»: la ficha corta (P31) */
.boda-ficha__personas { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linea); font-size: .88rem; color: var(--suave); }
/* Portada de una boda (P31) */
.portada-boda { max-width: 1060px; }
.portada-boda h1 { margin: .2em 0 .1em; }
.portada-boda__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 22px; }
.portada-boda__kpis div { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: .7em .9em; }
.portada-boda__kpis b { display: block; font: 500 2.1rem var(--serif); line-height: 1.1; color: var(--vino); }
.portada-boda__kpis span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.portada-boda__grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.portada-boda__grupo { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.portada-boda__grupo h2 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin: 0 0 4px; }
.portada-boda__enlace { display: block; padding: .7em .9em; border: 1px solid var(--linea); border-radius: 12px; text-decoration: none; color: var(--tinta); background: var(--crema); }
.portada-boda__enlace:hover { border-color: var(--vino); }
.portada-boda__enlace b { display: block; font-weight: 500; color: var(--vino); }
.portada-boda__enlace small { display: block; font-size: .8rem; color: var(--suave); margin-top: 2px; }
.portada-boda__enlace--apagado { opacity: .55; cursor: help; }
.portada-boda__enlace--apagado b { color: var(--suave); }
.portada-boda__personas { margin-top: 18px; padding: 22px; }
/* Lo privado de la wedding planner en la boda (P138) */
.portada-boda__privado { margin-top: 18px; padding: 22px; border-style: dashed; }
.portada-boda__privado h2 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin: 0 0 10px; }
.portada-boda__privado h3 { font-size: 1.1rem; margin: 18px 0 6px; }
.portada-boda__revisar { max-width: 220px; }
.portada-boda__citas { list-style: none; padding: 0; margin: 0 0 10px; font-size: .92rem; }
.portada-boda__citas li { padding: 4px 0; border-top: 1px solid var(--linea); }
.portada-boda__cita { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.portada-boda__cita input { font: inherit; padding: .45em .7em; border: 1px solid var(--linea); border-radius: 10px; background: var(--crema); }
.portada-boda__cita input[name=titulo] { flex: 1; min-width: 200px; }
.portada-boda__personas h2 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin: 0; }
.portada-boda__personas .boda-ficha__pareja:first-of-type, .portada-boda__personas > div > :first-child { border-top: 0; }
.portada-boda__borrar { margin: 14px 0 0; text-align: right; }
@media (max-width: 560px) { .portada-boda__grupo, .portada-boda__personas { padding: 18px 14px; } }

/* Preboda y otros eventos en el editor (P47) */
.evento-fila { display: grid; gap: 4px; margin-bottom: 12px; }
.evento-webs { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: .9rem; margin: 4px 0; }

/* Idiomas de la web y traducción (P56) */
.traduccion-barra { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 0 0 12px; }
.traduccion-barra .campo { margin: 0; }
.traduccion-fila__auto { margin: 2px 0 4px; font-size: .9rem; color: var(--olivo, #556b2f); white-space: pre-line; }

/* Idiomas en una línea (paso «Estilo»): el principal y los adicionales como pastillas */
.idiomas-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco); font-size: .92rem; }
.idiomas-linea__principal { display: inline-flex; align-items: center; gap: 8px; }
.idiomas-linea__principal select { font: inherit; padding: .35em .6em; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.idiomas-linea__extra { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--suave); }
.pastilla { position: relative; display: inline-flex; cursor: pointer; }
.pastilla input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastilla span { padding: .3em .8em; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff; color: var(--tinta); font-size: .85rem; transition: background .15s, border-color .15s; }
.pastilla input:checked + span { background: var(--vino); border-color: var(--vino); color: var(--crema); }
.pastilla input:focus-visible + span { outline: 3px solid var(--albero); outline-offset: 2px; }

/* Editando una web para un grupo (Webs por grupos): «Igual que la web principal» o «Personalizar» en cada paso */
.modo-web { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #fbf1e6; border: 1px solid var(--albero); font-size: .92rem; }
.propio-barra { display: flex; flex-wrap: wrap; gap: 6px; margin: -.2em 0 16px; }
.propio-nota { margin: -.2em 0 16px; font-size: .9rem; color: var(--suave); }
.paso--heredado .campo, .paso--heredado .tarjeta-app, .paso--heredado #selectorEstilo, .paso--heredado .foto-portada, .paso--heredado .fila2, .paso--heredado #traduccion { opacity: .55; }
.paso--heredado .propio-barra { opacity: 1; }
#fotoElegir.desactivado { pointer-events: none; opacity: .5; }
body.modo-web .idiomas-linea { display: none; }
.pq-ruta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pq-ruta input { flex: 1; min-width: 8em; }
.pq-cats, .pq-partes { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pq-cats i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cat); margin-right: 5px; }

/* La cabecera, igual en todas las páginas de los novios (P64): «Guardado ✓» en el mismo sitio
   y los botones de cada página dentro de ella */
.cab__guardado { font-size: .8rem; color: var(--suave); margin-right: 6px; }
.pagina-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pagina-acciones[hidden] { display: none; }
.paso__ideas { margin: 14px 0 0; text-align: right; font-size: .85rem; }
.paso__ideas a { color: var(--suave); }
/* La boda ha cambiado en otro sitio mientras se editaba (P106) */
.aviso-cambiada { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #fff4dd; border: 1px solid #e0c56e; color: var(--tinta); font-size: .95rem; }
.aviso-cambiada p { margin: 0; flex: 1 1 320px; }
/* La contraseña de la web, en el paso «Publicar» (P114) */
.clave-web { margin: 24px 0 0; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 12px; display: grid; gap: 10px; }
.clave-web legend { padding: 0 6px; font-weight: 600; }
.clave-web__mas { display: grid; gap: 10px; }
.clave-web__mas[hidden] { display: none; }
/* La música, en el paso «Estilo» (P104) */
.musica-fuentes { display: grid; gap: 8px; }
.musica-lista { display: grid; gap: 6px; margin: 0 0 6px 28px; }
.musica-lista[hidden], .musica-propia[hidden], .musica-donde[hidden] { display: none; }
.musica-pieza { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); cursor: pointer; }
.musica-pieza.elegida { border-color: var(--vino); box-shadow: 0 0 0 1px var(--vino); }
.musica-pieza span { flex: 1; }
.musica-escuchar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; cursor: pointer; font-size: .85rem; }
.musica-propia { display: grid; gap: 8px; margin: 0 0 6px 28px; }
.musica-propia__archivo { margin: 0; font-weight: 600; }
.musica-donde { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; }