/* ============================================================
   SOCIOS ECOM — Crear anuncios
   ============================================================ */

.crea {
  display: flex;
  flex-direction: column;
  gap: var(--se-sp-4);
  /* ocupa el ancho de la sección: con 720 px quedaban huecos a los lados */
  max-width: none;
  margin: 0 auto;
  padding: var(--se-sp-6);
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
}
/* Con los formatos dentro ya no es una columna de lectura */
.crea--panel { max-width: none; }

.crea__intro { text-align: center; }
.crea__titulo {
  margin: 0;
  font-family: var(--se-fuente-titulo);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.crea__texto {
  margin: var(--se-sp-2) auto 0;
  max-width: 52ch;
  font-size: var(--se-fs-body);
  line-height: 1.6;
  color: var(--se-tinta-2);
}

/* ---------- Soltar la foto ---------- */

.soltar {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--se-sp-2);
  min-height: 150px;
  padding: var(--se-sp-4);
  text-align: center;
  cursor: pointer;
  border: 1.4px dashed var(--se-linea-fuerte);
  border-radius: var(--se-r-campo);
  background: var(--se-papel-calido);
  transition: border-color var(--se-trans), background var(--se-trans);
}
.soltar:hover, .soltar.es-encima {
  border-color: var(--se-verde);
  background: var(--se-verde-tint);
}
.soltar__icono {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--se-papel);
  color: var(--se-verde-tinta);
  box-shadow: var(--se-sombra-suave);
}
.soltar__icono svg { width: 22px; height: 22px; }
.soltar__titulo { font-size: var(--se-fs-body); font-weight: 700; }
.soltar__pie { font-size: 12px; color: var(--se-tinta-3); }

.soltar.es-llena { min-height: 0; padding: var(--se-sp-3); border-style: solid; }
.soltar__foto {
  max-height: 300px;
  max-width: 100%;
  border-radius: var(--se-r-campo);
  object-fit: contain;
}
.soltar__cambiar {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--se-sp-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--se-tinta-2);
}
.soltar__cambiar svg { width: 14px; height: 14px; }

.crea__consejo {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0;
  padding: var(--se-sp-3);
  border-radius: var(--se-r-campo);
  background: var(--se-papel-hundido);
  font-size: var(--se-fs-sm);
  line-height: 1.55;
  color: var(--se-tinta-2);
}
.crea__consejo svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--se-verde-tinta); }

/* ---------- Los campos ---------- */

.crea__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--se-sp-3);
}
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo__etiqueta {
  display: flex; align-items: baseline; gap: 6px;
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-3);
}
.campo__etiqueta i {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--se-fs-xs);
  opacity: .8;
}
.campo__caja {
  width: 100%;
  padding: 9px 11px;
  border: .8px solid var(--se-linea-fuerte);
  border-radius: var(--se-r-campo);
  background: var(--se-papel);
  color: var(--se-tinta);
  font-family: inherit;
  font-size: 13px;
}
.campo__caja:focus {
  outline: none;
  border-color: var(--se-verde);
  box-shadow: 0 0 0 3px var(--se-verde-tint);
}

.crea__cta { align-self: center; padding: 12px 24px; }
.crea__cta[disabled] { opacity: .45; pointer-events: none; }

.crea__error, .crea__aviso {
  margin: 0;
  padding: var(--se-sp-3);
  border-radius: var(--se-r-campo);
  font-size: var(--se-fs-sm);
  line-height: 1.55;
}
.crea__error { background: var(--se-error-tint); color: var(--se-error); }
.crea__aviso { background: var(--se-dorado-tint); color: var(--se-dorado-tinta); }
/* Lo que hay que saber antes de publicar: reseñas ilustrativas, texto revisado. */
.crea__avisos-legales {
  margin: 0;
  padding: var(--se-sp-3) var(--se-sp-3) var(--se-sp-3) calc(var(--se-sp-3) + 1.1em);
  border-radius: var(--se-r-campo);
  background: var(--se-dorado-tint);
  color: var(--se-dorado-tinta);
  font-size: var(--se-fs-sm);
  line-height: 1.55;
}
.crea__avisos-legales li + li { margin-top: var(--se-sp-1, 4px); }

/* El guion hablado, para leerlo y editarlo antes de pagar el rodaje. */
.guiones { display: grid; gap: var(--se-sp-3); }
.guion-hablado {
  display: grid;
  gap: var(--se-sp-2, 8px);
  padding: var(--se-sp-3);
  border: 1px solid var(--se-borde, rgba(0, 0, 0, .1));
  border-radius: var(--se-r-campo);
}
.guion-hablado__cabecera { display: flex; flex-wrap: wrap; gap: var(--se-sp-2, 8px); align-items: baseline; justify-content: space-between; }
.guion-hablado__quien { display: inline-flex; align-items: center; gap: 10px; }
.guion-hablado__quien img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none; }
.guion-hablado__cuenta { font-size: var(--se-fs-xs); opacity: .75; }
.guion-hablado__cuenta.es-pasado { color: var(--se-error); opacity: 1; }
.guion-hablado textarea {
  width: 100%;
  min-height: 3.2em;
  resize: vertical;
  font: inherit;
  box-sizing: border-box;
}
.guion-hablado__pie { display: flex; flex-wrap: wrap; gap: var(--se-sp-2, 8px); }

.crea__aviso code {
  padding: 1px 5px;
  border-radius: var(--se-r-sello);
  background: rgba(0, 0, 0, .07);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-xs);
}

/* ---------- La ficha del producto ---------- */

.ficha-producto {
  display: flex; align-items: center; gap: var(--se-sp-4);
  padding-bottom: var(--se-sp-4);
  border-bottom: .8px solid var(--se-linea);
}
.ficha-producto__foto {
  width: 84px; height: 84px;
  flex: none;
  object-fit: cover;
  border-radius: var(--se-r-campo);
  background: var(--se-papel-hundido);
}
.ficha-producto__texto { flex: 1; min-width: 0; }
.ficha-producto__texto h3 {
  margin: 6px 0 2px;
  font-size: var(--se-fs-h3, 18px);
  font-weight: 700;
  line-height: 1.25;
}
.ficha-producto__texto p {
  margin: 0;
  font-size: var(--se-fs-sm);
  color: var(--se-tinta-2);
}
.ficha-producto .btn { flex: none; }
.ficha-producto .btn svg { width: 14px; height: 14px; }

/* ---------- Los formatos ---------- */

.piezas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: var(--se-sp-4);
  align-items: start;
}

.pieza {
  display: flex;
  flex-direction: column;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
  overflow: hidden;
}
.pieza.es-pintando { border-color: var(--se-verde); }

.pieza__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--se-sp-2);
  padding: var(--se-sp-4) var(--se-sp-4) var(--se-sp-3);
}
.pieza__nombre { margin: 0; font-size: var(--se-fs-sm); font-weight: 700; }
.pieza__hace { margin: 3px 0 0; font-size: var(--se-fs-xs); line-height: 1.45; color: var(--se-tinta-3); }
.pieza__proporcion {
  flex: none;
  padding: 2px 7px;
  border-radius: var(--se-r-sello);
  background: var(--se-papel-hundido);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  color: var(--se-tinta-3);
}

.pieza__lienzo {
  position: relative;
  display: grid; place-items: center;
  background: var(--se-papel-hundido);
  border-block: .8px solid var(--se-linea);
  overflow: hidden;
}
.pieza__lienzo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza__vacio { color: var(--se-linea-fuerte); }
.pieza__vacio svg { width: 34px; height: 34px; }

.pieza__pintando {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--se-verde-tinta);
  text-align: center;
}
.pieza__pintando svg { width: 26px; height: 26px; animation: crea-late 1.4s ease-in-out infinite; }
.pieza__pintando b { font-size: var(--se-fs-sm); }
.pieza__pintando small { font-size: 11px; color: var(--se-tinta-3); }

@keyframes crea-late {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.14); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pieza__pintando svg { animation: none; }
}

.pieza__copy {
  padding: var(--se-sp-3) var(--se-sp-4);
  border-bottom: .8px solid var(--se-linea-suave);
}
.pieza__copy p {
  margin: 0 0 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--se-tinta-2);
}
.pieza__copy p:last-child { margin-bottom: 0; }
.pieza__copy .es-titular { font-size: var(--se-fs-body); font-weight: 700; color: var(--se-tinta); }

.pieza__error {
  margin: 0;
  padding: var(--se-sp-3) var(--se-sp-4);
  font-size: var(--se-fs-xs);
  line-height: 1.5;
  color: var(--se-error);
  background: var(--se-error-tint);
}

.pieza__pie {
  display: flex; align-items: center; gap: var(--se-sp-2);
  margin-top: auto;
  padding: var(--se-sp-3) var(--se-sp-4) var(--se-sp-4);
}
.pieza__pie .btn { padding: 8px 12px; font-size: 12px; }
.pieza__pie .btn svg { width: 13px; height: 13px; }
.pieza__cuando {
  flex: 1;
  font-size: 11px;
  line-height: 1.4;
  color: var(--se-tinta-3);
}

/* ---------- El mando: cuántas versiones de cada anuncio ---------- */

.crea__mando {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--se-sp-3);
  padding: var(--se-sp-3) var(--se-sp-4);
  border-radius: var(--se-r-campo);
  background: var(--se-papel-hundido);
}
.crea__mando-etiqueta {
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-3);
}
.crea__mando-nota {
  flex: 1;
  min-width: 200px;
  font-size: var(--se-fs-xs);
  line-height: 1.45;
  color: var(--se-tinta-3);
}

.cuantas {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea-fuerte);
  background: var(--se-papel);
}
.cuantas__op {
  min-width: 34px;
  padding: 6px 0;
  border-radius: var(--se-r-sello);
  font-family: var(--se-fuente-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--se-tinta-2);
  transition: background var(--se-trans), color var(--se-trans);
}
.cuantas__op:hover { background: var(--se-papel-hundido); }
.cuantas__op.es-activa {
  background: var(--se-accion);
  color: var(--se-sobre-accion);
  box-shadow: var(--se-sombra-sello-sm);
}

/* ---------- La tira de versiones ---------- */

.pieza__versiones {
  display: flex; gap: 6px;
  padding: var(--se-sp-3) var(--se-sp-4) 0;
}
.version {
  flex: 1;
  aspect-ratio: 1;
  max-width: 60px;
  padding: 0;
  border-radius: var(--se-r-sello);
  border: 1.6px solid transparent;
  overflow: hidden;
  opacity: .55;
  transition: opacity var(--se-trans), border-color var(--se-trans);
}
.version img { width: 100%; height: 100%; object-fit: cover; display: block; }
.version:hover { opacity: .85; }
.version.es-activa { opacity: 1; border-color: var(--se-verde); }

/* ============================================================
   Recomendación, galería y vista previa del feed
   ============================================================ */

/* ---------- Lo que el sistema propone ---------- */

.pieza { position: relative; }
/* El botón que abre la vista previa, sobre la imagen */
.pieza__lienzo { position: relative; }
.pieza__lupa {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--se-r-pill);
  background: rgba(17, 17, 17, .82);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--se-trans);
}
.pieza__lupa svg { width: 14px; height: 14px; }
.pieza__lienzo:hover .pieza__lupa,
.pieza__lupa:focus-visible { opacity: 1; }

/* ---------- La galería ---------- */

.galeria__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--se-sp-3);
  padding-bottom: var(--se-sp-4);
  border-bottom: .8px solid var(--se-linea);
}
.galeria__cabecera .crea__titulo { text-align: left; }
.galeria__cabecera .crea__texto { margin-left: 0; text-align: left; }
.galeria__cabecera .btn svg { width: 14px; height: 14px; }

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--se-sp-4);
  align-items: start;
}
.tarjeta-galeria {
  display: flex; flex-direction: column;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
  overflow: hidden;
}
.tarjeta-galeria__lienzo { background: var(--se-papel-hundido); }
.tarjeta-galeria__lienzo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-galeria__pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--se-sp-2);
  padding: var(--se-sp-3);
}
.tarjeta-galeria__texto { min-width: 0; }
.tarjeta-galeria__texto b {
  display: block;
  font-size: var(--se-fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarjeta-galeria__texto small {
  display: block;
  font-size: var(--se-fs-label);
  color: var(--se-tinta-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarjeta-galeria__botones { display: flex; gap: 4px; flex: none; }
.tarjeta-galeria__accion {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea);
  color: var(--se-tinta-3);
  transition: background var(--se-trans), color var(--se-trans), border-color var(--se-trans);
}
.tarjeta-galeria__accion svg { width: 14px; height: 14px; }
.tarjeta-galeria__accion:hover { background: var(--se-papel-hundido); color: var(--se-tinta); }
.tarjeta-galeria__accion:last-child:hover {
  background: var(--se-error-tint); border-color: var(--se-error); color: var(--se-error);
}

.crea__vacio {
  display: flex; flex-direction: column; align-items: center; gap: var(--se-sp-2);
  padding: var(--se-sp-7) var(--se-sp-4);
  text-align: center;
  color: var(--se-tinta-3);
}
.crea__vacio svg { width: 30px; height: 30px; }
.crea__vacio h5 { margin: 0; font-size: var(--se-fs-sm); color: var(--se-tinta-2); }
.crea__vacio p { margin: 0; max-width: 46ch; font-size: var(--se-fs-sm); line-height: 1.55; }
.crea__cargando { padding: var(--se-sp-7); text-align: center; color: var(--se-tinta-3); }

/* ============================================================
   La vista previa: el anuncio como sale en el feed
   ============================================================ */

.previa {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--se-sp-4);
}
.previa__fondo {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 14, .62);
  backdrop-filter: blur(2px);
}
.previa__caja {
  position: relative;
  width: min(920px, 100%);
  max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .6);
  overflow: hidden;
  animation: previa-entra .22s var(--se-salida);
}
@keyframes previa-entra {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .previa__caja { animation: none; } }

.previa__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--se-sp-4);
  border-bottom: .8px solid var(--se-linea);
}
.previa__cabecera h3 { margin: 0; font-size: var(--se-fs-body); font-weight: 700; }
.previa__cerrar {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--se-r-campo);
  color: var(--se-tinta-3);
  font-size: 14px;
}
.previa__cerrar:hover { background: var(--se-papel-hundido); color: var(--se-tinta); }

.previa__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--se-sp-5);
  padding: var(--se-sp-5);
  overflow-y: auto;
}
@media (max-width: 720px) {
  .previa__cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- La tarjeta del feed ---------- */

.feed {
  background: #fff;
  border: .8px solid #dcdfe4;
  border-radius: 8px;
  overflow: hidden;
  /* Facebook tiene su tipografía y su gris: aquí no manda el sistema de la
     casa, manda parecerse a lo que verá el cliente final. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #050505;
  height: fit-content;
}
.feed__top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.feed__avatar {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
  font-size: 17px; font-weight: 700;
}
.feed__quien { flex: 1; min-width: 0; line-height: 1.25; }
.feed__quien b { display: block; font-size: 14px; font-weight: 600; }
.feed__quien small { font-size: 12px; color: #65676b; }
.feed__puntos { color: #65676b; font-size: 16px; letter-spacing: 1px; }

.feed__texto {
  margin: 0;
  padding: 0 12px 10px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-line;
}
.feed__imagen { width: 100%; display: block; }

.feed__enlace {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #f0f2f5;
  border-top: .8px solid #dcdfe4;
}
.feed__enlace-texto { flex: 1; min-width: 0; }
.feed__dominio {
  display: block;
  font-size: 12px;
  text-transform: none;
  color: #65676b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feed__titular { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.feed__desc { display: block; font-size: 12px; color: #65676b; }
.feed__cta {
  flex: none;
  padding: 8px 12px;
  border-radius: 6px;
  background: #e4e6eb;
  font-size: 14px; font-weight: 600;
}
.feed__acciones {
  display: flex; justify-content: space-around;
  padding: 6px 0;
  border-top: .8px solid #dcdfe4;
  font-size: 13px; font-weight: 600;
  color: #65676b;
}

/* ---------- El copy, listo para pegar ---------- */

.previa__copy { display: flex; flex-direction: column; gap: var(--se-sp-3); }
.previa__copy-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--se-sp-2);
}
.previa__copy-cabecera h4 { margin: 0; font-size: var(--se-fs-sm); font-weight: 700; }
.previa__copy-cabecera .btn { padding: 7px 12px; font-size: 12px; }
.previa__copy-cabecera .btn svg { width: 13px; height: 13px; }

.copiable {
  padding: var(--se-sp-3);
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea);
  background: var(--se-papel-calido);
}
.copiable__cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.copiable__etiqueta {
  flex: 1;
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-3);
}
.copiable__cuenta {
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  color: var(--se-tinta-3);
}
.copiable__cuenta.es-pasado { color: var(--se-error); font-weight: 700; }
.copiable__boton {
  padding: 3px 9px;
  border-radius: var(--se-r-pill);
  border: .8px solid var(--se-linea-fuerte);
  background: var(--se-papel);
  font-size: var(--se-fs-label);
  font-weight: 700;
  color: var(--se-tinta-2);
  transition: background var(--se-trans), color var(--se-trans);
}
.copiable__boton:hover {
  background: var(--se-accion);
  border-color: var(--se-borde-marcado);
  color: var(--se-sobre-accion);
}
.copiable__boton.es-copiado { background: var(--se-ok-tint); border-color: var(--se-ok); color: var(--se-ok); }
.copiable__texto {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.previa__descargar { justify-content: center; }
.previa__nota {
  margin: 0;
  font-size: var(--se-fs-xs);
  line-height: 1.5;
  color: var(--se-tinta-3);
}

/* ============================================================
   La barra de la sección y la elección de estilos
   ============================================================ */

/*
 * Las dos pantallas, siempre a mano.
 *
 * El acceso a «Mis anuncios» vivía dentro de la ficha del producto y se
 * perdía de vista en cuanto bajabas. Aquí arriba está siempre.
 */
.crea-pestanas {
  display: flex;
  gap: 4px;
  max-width: none;
  margin: 0 auto var(--se-sp-4);
  padding: 4px;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea);
  background: var(--se-papel-hundido);
  width: fit-content;
}
.crea-pestana {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  border-radius: var(--se-r-sello);
  font-size: 13px;
  font-weight: 600;
  color: var(--se-tinta-2);
  transition: background var(--se-trans), color var(--se-trans);
}
.crea-pestana svg { width: 15px; height: 15px; }
.crea-pestana:hover { color: var(--se-tinta); }
.crea-pestana.es-activa {
  background: var(--se-papel);
  color: var(--se-tinta);
  box-shadow: var(--se-sombra-suave);
}
.crea-pestana__cuenta {
  padding: 1px 7px;
  border-radius: var(--se-r-pill);
  background: var(--se-accion);
  color: var(--se-sobre-accion);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  font-weight: 700;
}

/* ---------- Elegir los estilos ---------- */

.eleccion { display: flex; flex-direction: column; gap: var(--se-sp-3); }
.eleccion__cabecera { display: flex; align-items: baseline; gap: var(--se-sp-3); flex-wrap: wrap; }
.eleccion__cabecera h4 { margin: 0; font-size: var(--se-fs-sm); font-weight: 700; }
.eleccion__cabecera span { font-size: 12px; color: var(--se-tinta-3); }

.estilos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--se-sp-3);
}

/*
 * Una tarjeta por estilo, sin lienzo.
 *
 * Antes cada estilo traía su hueco gris esperando una imagen: ocho recuadros
 * vacíos antes de tener nada. Aquí solo está lo que hace falta para elegir.
 */
.estilo {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas:
    "marca texto"
    ".     pie";
  gap: 4px 10px;
  padding: var(--se-sp-3) var(--se-sp-4);
  text-align: left;
  border-radius: var(--se-r-campo);
  border: 1.2px solid var(--se-linea);
  background: var(--se-papel);
  transition: border-color var(--se-trans), background var(--se-trans), box-shadow var(--se-trans);
}
.estilo:hover { border-color: var(--se-linea-fuerte); background: var(--se-papel-calido); }
.estilo.es-elegido {
  border-color: var(--se-verde);
  background: var(--se-verde-tint);
  box-shadow: 0 0 0 2px var(--se-verde-tint);
}

.estilo__marca {
  grid-area: marca;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: var(--se-r-sello);
  border: 1.4px solid var(--se-linea-fuerte);
  background: var(--se-papel);
  font-size: 12px;
  font-weight: 800;
  color: transparent;
  transition: background var(--se-trans), border-color var(--se-trans), color var(--se-trans);
}
.estilo.es-elegido .estilo__marca {
  background: var(--se-verde);
  border-color: var(--se-verde);
  color: var(--se-sobre-verde);
}

.estilo__texto { grid-area: texto; min-width: 0; }
.estilo__texto b {
  display: block;
  font-size: var(--se-fs-body);
  font-weight: 700;
  line-height: 1.3;
}
.estilo__texto small {
  display: block;
  margin-top: 3px;
  font-size: var(--se-fs-xs);
  line-height: 1.45;
  color: var(--se-tinta-3);
}

/* El sello va DENTRO del título: fuera de la caja se lo comía el recorte. */
.estilo__sello {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: var(--se-r-pill);
  background: var(--se-verde);
  color: var(--se-sobre-verde);
  font-style: normal;
  font-size: var(--se-fs-label);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}
.estilo__sello svg { width: 9px; height: 9px; }

.estilo__pie {
  grid-area: pie;
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.estilo__proporcion {
  padding: 1px 6px;
  border-radius: var(--se-r-sello);
  background: var(--se-papel-hundido);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  color: var(--se-tinta-3);
}
.estilo__hechas {
  font-size: var(--se-fs-label);
  font-weight: 700;
  color: var(--se-verde-tinta);
}

.eleccion__crear { flex: none; }
.eleccion__crear[disabled] { opacity: .45; pointer-events: none; }

/* El botón de lanzar, con lo que cuesta y lo que queda justo debajo. */
.mando__lanzar {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  margin-left: auto;
}
.mando__saldo {
  margin: 0;
  font-size: var(--se-fs-label);
  color: var(--se-tinta-2);
}
.mando__saldo.es-corto { color: var(--se-error); }
.mando__saldo a { color: inherit; font-weight: 700; }

/* ---------- Lo creado ---------- */

.resultados { display: flex; flex-direction: column; gap: var(--se-sp-3); }
.resultados__titulo {
  margin: 0;
  padding-top: var(--se-sp-4);
  border-top: .8px solid var(--se-linea);
  font-size: var(--se-fs-sm);
  font-weight: 700;
}

/* ============================================================
   El plano de cada estilo y la medida de salida
   ============================================================ */

/* La tarjeta de estilo pasa a tres columnas: marca, esquema y texto. */
.estilo {
  grid-template-columns: 20px 46px 1fr;
  grid-template-areas:
    "marca esquema texto"
    ".     esquema pie";
  gap: 4px 12px;
  align-items: start;
}
.estilo__esquema {
  grid-area: esquema;
  display: block;
  width: 46px;
  align-self: center;
}

.esquema {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  overflow: hidden;
  background: var(--se-papel-hundido);
  box-shadow: inset 0 0 0 .8px var(--se-linea);
}

/*
 * Los colores del esquema.
 *
 * No son decorativos: cada uno dice qué es esa zona. El acento es el color
 * plano del anuncio, el oscuro es la banda de texto, el gris es «lo de
 * siempre» y el punteado es el hueco de un texto.
 */
.esquema .e-color { fill: var(--se-dorado); }
.esquema .e-banda { fill: var(--se-tinta); }
.esquema .e-oscuro { fill: var(--se-tinta); opacity: .82; }
.esquema .e-gris { fill: var(--se-linea-fuerte); opacity: .5; }
.esquema .e-foto { fill: var(--se-tinta-3); opacity: .55; }
.esquema .e-hueco { fill: #fff; opacity: .82; }
.esquema .e-tarjeta { fill: #fff; }
.esquema .e-pill { fill: #fff; }
.esquema .e-guia { stroke: #fff; stroke-width: .8; }
.esquema .e-fila rect { fill: var(--se-tinta-3); opacity: .45; }
.esquema .e-fila path { stroke: var(--se-ok); stroke-width: 1.2; fill: none; }
.esquema .e-check circle { fill: var(--se-dorado); }
.esquema .e-check rect { fill: #fff; opacity: .8; }
.esquema .e-cifra {
  fill: var(--se-tinta);
  font-family: var(--se-fuente-titulo, sans-serif);
  font-size: 20px;
  font-weight: 800;
}
.esquema .e-cifra--sm { font-size: 11px; fill: var(--se-tinta); }

/* Elegido: el esquema se enciende con el verde de la casa */
.estilo.es-elegido .esquema { box-shadow: inset 0 0 0 1.2px var(--se-verde); }

/* ---------- El mando, en dos grupos ---------- */

.crea__mando {
  align-items: flex-end;
  gap: var(--se-sp-5);
}
.mando__grupo { display: flex; flex-direction: column; gap: 6px; }

.medidas {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea-fuerte);
  background: var(--se-papel);
}
.medida {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 12px;
  border-radius: var(--se-r-sello);
  color: var(--se-tinta-2);
  transition: background var(--se-trans), color var(--se-trans);
}
.medida b { font-size: 12px; font-weight: 700; white-space: nowrap; }
.medida small { font-size: var(--se-fs-label); opacity: .75; white-space: nowrap; }
.medida:hover { background: var(--se-papel-hundido); }
.medida.es-activa {
  background: var(--se-accion);
  color: var(--se-sobre-accion);
  box-shadow: var(--se-sombra-sello-sm);
}

@media (max-width: 860px) {
  .crea__mando { align-items: stretch; }
  .medidas { flex-wrap: wrap; }
  .mando__lanzar { margin-left: 0; align-items: stretch; }
}

/* ============================================================
   Los dos modos: elige la IA o eliges tú
   ============================================================ */

.modos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--se-sp-3);
}

.modo {
  display: flex; align-items: center; gap: var(--se-sp-3);
  padding: var(--se-sp-4);
  text-align: left;
  border-radius: var(--se-r-campo);
  border: 1.4px solid var(--se-linea);
  background: var(--se-papel);
  transition: border-color var(--se-trans), background var(--se-trans), box-shadow var(--se-trans);
}
.modo svg { width: 20px; height: 20px; flex: none; color: var(--se-tinta-3); }
.modo span { display: flex; flex-direction: column; min-width: 0; }
.modo b { font-size: var(--se-fs-body); font-weight: 700; line-height: 1.3; }
.modo small { font-size: var(--se-fs-xs); line-height: 1.4; color: var(--se-tinta-3); }
.modo:hover { border-color: var(--se-linea-fuerte); background: var(--se-papel-calido); }

.modo.es-activo {
  border-color: var(--se-verde);
  background: var(--se-verde-tint);
  box-shadow: 0 0 0 2px var(--se-verde-tint);
}
.modo.es-activo svg { color: var(--se-verde-tinta); }
.modo.es-activo b { color: var(--se-verde-tinta); }

/* ---------- Lo que ha elegido el sistema ---------- */

.auto { display: flex; flex-direction: column; gap: var(--se-sp-3); }
.auto__cabecera { display: flex; align-items: baseline; gap: var(--se-sp-3); flex-wrap: wrap; }
.auto__cabecera h4 { margin: 0; font-size: var(--se-fs-sm); font-weight: 700; }
.auto__cabecera span { font-size: 12px; color: var(--se-tinta-3); }

.auto__elegidos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--se-sp-3);
}

.auto__estilo {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--se-sp-3);
  padding: var(--se-sp-4);
  border-radius: var(--se-r-campo);
  border: 1.2px solid var(--se-verde);
  background: var(--se-verde-tint);
}
.auto__puesto {
  position: absolute;
  top: 8px; left: 8px;
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--se-accion);
  color: var(--se-sobre-accion);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  font-weight: 700;
}
.auto__esquema { display: block; align-self: center; padding-top: 10px; }
.auto__texto { min-width: 0; }
.auto__texto b { display: block; font-size: var(--se-fs-body); font-weight: 700; }
.auto__texto p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--se-tinta-2);
}
.auto__pie { display: flex; align-items: center; gap: 6px; margin-top: var(--se-sp-2); }
.auto__estilo .estilo__proporcion { background: var(--se-papel); }

.auto__vacio {
  margin: 0;
  padding: var(--se-sp-5);
  text-align: center;
  font-size: var(--se-fs-sm);
  line-height: 1.55;
  color: var(--se-tinta-3);
  border-radius: var(--se-r-campo);
  background: var(--se-papel-hundido);
}

/* ---------- Vídeo ---------- */

.pieza__lienzo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Los campos del copy, cuando van fuera de la vista previa */
.copias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--se-sp-3);
}

/* La miniatura de un vídeo en la galería */
.tarjeta-galeria__lienzo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
/* En el feed, el vídeo ocupa lo mismo que ocuparía la imagen */
video.feed__imagen { width: 100%; display: block; background: #000; }

/* ============================================================
   Tarjetas con y sin dibujo
   ============================================================ */

/*
 * La columna del dibujo, solo si hay dibujo.
 *
 * Las dos rejillas reservaban su columna para el esquema aunque la tarjeta no
 * lo trajera. En «Elijo yo» quedaba un hueco vacío entre la casilla y el
 * texto; en el automático, el texto caía en la columna de 52 px y salía una
 * palabra por línea con el número encima del título. Ahora cada tarjeta se
 * maqueta según lo que lleva dentro.
 */
.estilo:not(:has(.estilo__esquema svg)) {
  grid-template-columns: 20px 1fr;
  grid-template-areas:
    "marca texto"
    ".     pie";
}
.estilo:not(:has(.estilo__esquema svg)) .estilo__esquema { display: none; }

.auto__estilo:not(:has(.auto__esquema svg)) {
  grid-template-columns: 1fr;
  /* El número va arriba a la izquierda: el texto baja para no quedar debajo. */
  padding-top: calc(var(--se-sp-4) + 18px);
}
.auto__estilo:not(:has(.auto__esquema svg)) .auto__esquema { display: none; }

/* El número del puesto no puede tapar nunca el título */
.auto__estilo:has(.auto__esquema svg) .auto__texto { padding-top: 2px; }

/* ---------- Lo que solo dibujan los planos de vídeo ---------- */

/* Las flechas son el movimiento de la cámara */
.esquema .e-flecha {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.esquema .e-flecha--oscura { stroke: var(--se-tinta); }
.esquema .e-mano { fill: #e8b89a; }
.esquema .e-tapa { fill: var(--se-dorado); opacity: .7; }

/* El plano que no se pudo rodar: se queda a la vista con su motivo */
.pieza__fallido {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 80%;
  text-align: center;
  color: var(--se-error);
}
.pieza__fallido svg { width: 26px; height: 26px; opacity: .7; }
.pieza__fallido b { font-size: 13px; }
.pieza__fallido small {
  font-size: var(--se-fs-xs);
  line-height: 1.5;
  color: var(--se-tinta-2);
}

/* ============================================================
   Rediseño 2026-10-07: pasos, subida con «así funciona»,
   análisis del producto, estilos con un anuncio real de
   ejemplo, plan de fotos y sello de la revisión de calidad.
   ============================================================ */

/* ---------- Los pasos ---------- */
.crea-pasos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin: 0 0 var(--se-sp-3); padding: 6px;
  list-style: none;
  border-radius: 999px;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
}
.crea-paso {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 10px;
  border-radius: 999px;
  font-size: var(--se-fs-sm); font-weight: 600; color: var(--se-tinta-3);
  white-space: nowrap;
}
.crea-paso b {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--se-papel-hundido); color: var(--se-tinta-3);
  font-family: var(--se-fuente-mono); font-size: 12px;
}
.crea-paso b svg { width: 13px; height: 13px; }
.crea-paso.es-hecho { color: var(--se-verde-tinta); }
.crea-paso.es-hecho b { background: var(--se-verde-tint); color: var(--se-verde-tinta); }
.crea-paso.es-actual { background: var(--se-verde-tint); color: var(--se-tinta); }
.crea-paso.es-actual b { background: var(--se-verde); color: var(--se-sobre-verde); }

/* ---------- Subida ---------- */
.crea--subir { padding: var(--se-sp-5); }
.crea-subir { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: var(--se-sp-6); align-items: start; }
.crea-subir__zona { display: flex; flex-direction: column; gap: var(--se-sp-3); }
.crea-subir__zona .crea__titulo { text-align: left; margin: 0; }
.crea-subir__zona .crea__texto { text-align: left; margin: 0; max-width: 56ch; }
.crea-subir__zona .soltar { min-height: 240px; }
.crea-subir__zona .crea__cta { align-self: flex-start; min-height: 50px; padding: 0 28px; font-size: 15px; }

.crea-detalles { border: .8px solid var(--se-linea); border-radius: var(--se-r-campo); background: var(--se-papel-calido); }
.crea-detalles > summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; cursor: pointer; font-size: var(--se-fs-sm); font-weight: 700; list-style: none; }
.crea-detalles > summary::-webkit-details-marker { display: none; }
.crea-detalles > summary::before { content: '+'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--se-papel-hundido); font-weight: 700; }
.crea-detalles[open] > summary::before { content: '−'; }
.crea-detalles > summary i { font-style: normal; font-weight: 500; color: var(--se-tinta-3); }
.crea-detalles > summary:focus-visible { outline: none; box-shadow: var(--se-anillo-foco); border-radius: var(--se-r-campo); }
.crea-detalles .crea__campos { padding: 0 16px 16px; }
.campo--ancho { grid-column: 1 / -1; }

.crea-subir__como {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px;
  border-radius: var(--se-r-card);
  background: #0c100f; color: #eef3f1;
  background-image: radial-gradient(90% 70% at 100% 0%, rgba(20, 195, 154, .22), transparent 60%);
}
.crea-subir__como h3 { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.crea-subir__como ol { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.crea-subir__como li { display: flex; gap: 12px; align-items: flex-start; }
.crea-subir__como li > b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(20, 195, 154, .18); color: #7cf0cf; font-family: var(--se-fuente-mono); font-size: 12px; }
.crea-subir__como li > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; color: rgba(238, 243, 241, .72); }
.crea-subir__como li strong { color: #fff; font-size: 13.5px; }
.crea-consejos { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.crea-consejos__titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: #fff; }
.crea-consejos__titulo svg { width: 14px; height: 14px; color: #7cf0cf; }
.crea-consejos ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.crea-consejos li { position: relative; padding-left: 18px; font-size: 12px; line-height: 1.35; color: rgba(238, 243, 241, .8); }
.crea-consejos li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.crea-consejos li.es-bien::before { content: '✓'; color: #3be3b5; }
.crea-consejos li.es-mal::before { content: '✕'; color: #ff8a80; }

/* ---------- Lo que hemos visto ---------- */
.analisis { display: flex; flex-direction: column; gap: var(--se-sp-3); }
.analisis__producto { display: flex; align-items: flex-start; gap: var(--se-sp-4); }
.analisis__foto { width: 104px; height: 104px; flex: none; object-fit: contain; border-radius: 16px; background: #fff; border: .8px solid var(--se-linea); }
.analisis__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.analisis__rotulo { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border-radius: 999px; background: var(--se-verde-tint); color: var(--se-verde-tinta); font-size: 11.5px; font-weight: 700; }
.analisis__rotulo svg { width: 12px; height: 12px; }
.analisis__texto h3 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: var(--se-peso-titulo, 700); letter-spacing: -.02em; }
.analisis__texto p { margin: 0; font-size: var(--se-fs-sm); color: var(--se-tinta-2); }
.analisis__traducido { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 6px 10px; border-radius: 10px; background: var(--se-dorado-tint); color: var(--se-dorado-tinta) !important; font-weight: 600; }
.analisis__traducido svg { width: 14px; height: 14px; }
.analisis__textos { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.analisis__textos li { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px; border-radius: 8px; background: var(--se-papel-hundido); font-size: 12px; }
.analisis__textos span { color: var(--se-tinta-3); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.analisis__textos b { color: var(--se-tinta); font-weight: 600; }
.analisis__otro { flex: none; }
.analisis__angulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.angulo { padding: 12px 14px; border-radius: 12px; background: var(--se-papel-calido); border: .8px solid var(--se-linea); }
.angulo small { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--se-verde-tinta); }
.angulo p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--se-tinta); }

/* ---------- Estilos con anuncio de ejemplo ---------- */
.crea .estilos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.crea .estilo {
  display: flex; flex-direction: column; gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1.5px solid var(--se-linea);
  background: var(--se-papel);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--se-trans), box-shadow var(--se-trans), transform var(--se-trans);
}
.crea .estilo:hover { transform: translateY(-2px); border-color: var(--se-linea-fuerte); box-shadow: 0 14px 30px -18px rgba(9, 30, 24, .45); background: var(--se-papel); }
.crea .estilo.es-elegido { border-color: var(--se-verde); box-shadow: 0 0 0 3px rgba(var(--se-verde-rgb), .22); background: var(--se-papel); }
.crea .estilo:focus-visible { outline: none; box-shadow: var(--se-anillo-foco); }
.estilo__ejemplo { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 4 / 5; background: var(--se-papel-hundido); overflow: hidden; }
.estilo__ejemplo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 1; transition: transform .4s ease; }
.crea .estilo:hover .estilo__ejemplo img { transform: scale(1.03); }
.estilo__ejemplo .esquema { position: absolute; inset: 18% 22%; width: auto; height: auto; }
.estilo__ejemplo:not(.sin-foto) .esquema { visibility: hidden; }
.crea .estilo__marca {
  position: absolute; z-index: 3; top: 10px; right: 10px;
  display: grid; place-items: center;
  width: 28px; height: 28px; margin: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(10, 14, 13, .35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  color: transparent;
}
.crea .estilo__marca svg { width: 14px; height: 14px; }
.crea .estilo.es-elegido .estilo__marca { background: var(--se-verde); border-color: #fff; color: var(--se-sobre-verde); }
.crea .estilo__sello {
  position: absolute; z-index: 3; left: 10px;
  /* Abajo de la imagen: arriba tapaba el titular del ejemplo. */
  bottom: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(10, 14, 13, .82); color: #fff;
  font-style: normal; font-size: 11px; font-weight: 700;
  backdrop-filter: blur(6px);
}
.crea .estilo__sello svg { width: 12px; height: 12px; color: #7cf0cf; }
.crea .estilo__texto { padding: 12px 14px 4px; }
.crea .estilo__texto b { font-size: 14.5px; }
.crea .estilo__texto small { font-size: 12px; line-height: 1.45; color: var(--se-tinta-2); }
.crea .estilo__pie { display: flex; align-items: center; gap: 6px; padding: 6px 14px 12px; margin-top: auto; }

/* ---------- Plan de fotos ---------- */
.plan { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: var(--se-papel-calido); border: 1px solid rgba(var(--se-verde-rgb), .35); animation: plan-entra .4s ease both; }
.plan__cabeza h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.plan__cabeza h4 svg { width: 16px; height: 16px; color: var(--se-verde-tinta); }
.plan__cabeza span { font-size: 12.5px; color: var(--se-tinta-2); }
.plan__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan__foto { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--se-papel); border: .8px solid var(--se-linea); }
.plan__foto.es-pendiente { opacity: .6; }
.plan__mini { flex: none; width: 56px; border-radius: 8px; overflow: hidden; }
.plan__mini .estilo__ejemplo { border-radius: 8px; }
.plan__texto { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.45; color: var(--se-tinta-2); }
.plan__texto b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--se-tinta); }
.plan__texto b i { font-style: normal; font-family: var(--se-fuente-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: var(--se-papel-hundido); color: var(--se-tinta-3); }
@keyframes plan-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mando__lanzar--abajo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mando__lanzar--abajo .eleccion__crear { min-height: 52px; padding: 0 30px; font-size: 15.5px; }
.mando__lanzar--abajo .eleccion__crear small { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 11px; font-weight: 700; }

/* ---------- Sello de la revisión ---------- */
.revision { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.revision svg { width: 12px; height: 12px; }
.revision.es-ok { background: var(--se-verde-tint); color: var(--se-verde-tinta); }
.revision.es-aviso { background: var(--se-dorado-tint); color: var(--se-dorado-tinta); max-width: 100%; white-space: normal; }

@media (max-width: 1000px) {
  .crea-subir { grid-template-columns: 1fr; }
  .analisis__angulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .crea-pasos { border-radius: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crea-paso { flex-direction: column; gap: 4px; min-height: 52px; padding: 6px 2px; font-size: 10.5px; white-space: normal; text-align: center; line-height: 1.15; border-radius: 12px; }
  .analisis__producto { flex-wrap: wrap; }
  .analisis__foto { width: 72px; height: 72px; }
  .analisis__otro { width: 100%; }
  .analisis__angulos { grid-template-columns: 1fr; }
  .crea .estilos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .crea .estilo__texto small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .crea-subir__zona .crea__cta, .mando__lanzar--abajo .eleccion__crear { width: 100%; justify-content: center; }
  .crea-consejos ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .estilo__ejemplo img { animation: none; transition: none; }
}

/* ---------- Vídeo · paso 1: las fotos y los ejemplos (2026-10-09) ---------- */

.vs { gap: var(--se-sp-5); padding: var(--se-sp-5); }

/* Los pasos: una línea fina, el actual en verde. */
.vs-pasos {
  display: flex; align-items: center; gap: var(--se-sp-2);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--se-fs-sm); font-weight: 600; color: var(--se-tinta-3);
}
.vs-pasos li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.vs-pasos li + li::before {
  content: ""; width: 36px; height: 1.5px; margin-right: var(--se-sp-2);
  background: var(--se-linea-fuerte); border-radius: 2px;
}
.vs-pasos span {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--se-linea-fuerte);
  font-size: 12px;
}
.vs-pasos li.es-actual { color: var(--se-tinta); }
.vs-pasos li.es-actual span { background: var(--se-verde); border-color: var(--se-verde); color: var(--se-sobre-verde); }

.vs-rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--se-sp-6); align-items: start;
}

/* ---- El panel de las fotos ---- */
.vs-panel { display: flex; flex-direction: column; gap: var(--se-sp-4); min-width: 0; }
.vs-panel__cabeza h2 {
  margin: 0 0 6px;
  font-family: var(--se-fuente-titulo); font-size: 24px; line-height: 1.2; letter-spacing: -.01em;
}
.vs-panel__cabeza p { margin: 0; max-width: 60ch; font-size: var(--se-fs-body); line-height: 1.55; color: var(--se-tinta-2); }

.vs-huecos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr;
  gap: var(--se-sp-3);
  border-radius: var(--se-r-card);
  transition: box-shadow var(--se-trans);
}
.vs-huecos.es-encima { box-shadow: 0 0 0 3px var(--se-verde-tint), 0 0 0 4px var(--se-verde); }

.vs-hueco {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1; min-width: 0; margin: 0; padding: var(--se-sp-3);
  border: 1.4px dashed var(--se-linea-fuerte); border-radius: var(--se-r-campo);
  background: var(--se-papel-hundido);
  color: var(--se-tinta-2); font: inherit; text-align: center;
  cursor: pointer; overflow: hidden;
  transition: border-color var(--se-trans), background var(--se-trans), transform var(--se-trans);
}
button.vs-hueco:hover { border-color: var(--se-verde); background: var(--se-verde-tint); }
button.vs-hueco:active { transform: scale(.98); }
button.vs-hueco:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 2px; }
.vs-hueco--principal { grid-column: span 2; grid-row: span 2; }
.vs-hueco b { font-size: var(--se-fs-sm); color: var(--se-tinta); line-height: 1.25; }
.vs-hueco__obligatoria {
  padding: 1px 8px; border-radius: var(--se-r-pill);
  background: var(--se-dorado-tint); color: var(--se-dorado-tinta);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.vs-hueco__pista { font-size: var(--se-fs-xs); line-height: 1.35; color: var(--se-tinta-3); }
.vs-hueco__icono {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--se-papel); color: var(--se-verde-tinta);
  box-shadow: var(--se-sombra-suave);
}
.vs-hueco__icono svg { width: 16px; height: 16px; }
.vs-hueco--principal .vs-hueco__icono { width: 52px; height: 52px; }
.vs-hueco--principal .vs-hueco__icono svg { width: 22px; height: 22px; }
.vs-hueco--principal b { font-size: var(--se-fs-body); }
.vs-hueco--principal .vs-hueco__pista { max-width: 26ch; font-size: var(--se-fs-sm); }

/* Con foto: la foto entera sobre fondo blanco, el nombre abajo y las acciones arriba. */
.vs-hueco--lleno { padding: 0; border-style: solid; border-color: var(--se-linea); background: #fff; cursor: default; }
.vs-hueco--lleno.vs-hueco--principal { border: 2px solid var(--se-verde); }
.vs-hueco--lleno img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vs-hueco--lleno figcaption {
  position: absolute; left: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  max-width: calc(100% - 12px);
  padding: 3px 8px; border-radius: var(--se-r-pill);
  background: rgba(17, 17, 17, .72); color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vs-hueco--lleno.vs-hueco--principal figcaption { background: var(--se-verde); color: var(--se-sobre-verde); }
.vs-hueco--lleno figcaption svg { width: 12px; height: 12px; }
.vs-hueco__acciones {
  position: absolute; top: 6px; right: 6px; left: 6px;
  display: flex; justify-content: flex-end; gap: 4px;
  opacity: 0; transition: opacity var(--se-trans);
}
.vs-hueco--lleno:hover .vs-hueco__acciones, .vs-hueco--lleno:focus-within .vs-hueco__acciones { opacity: 1; }
@media (hover: none) { .vs-hueco__acciones { opacity: 1; } }
.vs-hueco__acciones button {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 8px;
  border: 0; border-radius: var(--se-r-pill);
  background: rgba(17, 17, 17, .78); color: #fff;
  font: 600 11px/1 inherit; cursor: pointer;
}
.vs-hueco__acciones button:hover { background: #111; }
.vs-hueco__acciones button svg { width: 12px; height: 12px; }
.vs-hueco__acciones button { padding: 0; width: 26px; }

/* El contador de fotos. */
.vs-progreso { display: flex; flex-direction: column; gap: 8px; }
.vs-progreso__barra { height: 6px; border-radius: 6px; background: var(--se-papel-hundido); overflow: hidden; }
.vs-progreso__barra span {
  display: block; height: 100%; border-radius: inherit;
  background: var(--se-dorado); transition: width .35s cubic-bezier(.2, .8, .2, 1);
}
.vs-progreso.es-completo .vs-progreso__barra span { background: var(--se-verde); }
.vs-progreso__texto { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: var(--se-fs-sm); }
.vs-progreso__texto span { color: var(--se-tinta-3); }

.vs-pistas {
  border: .8px solid var(--se-linea); border-radius: var(--se-r-campo);
  padding: var(--se-sp-3) var(--se-sp-4);
}
.vs-pistas summary { cursor: pointer; font-size: var(--se-fs-sm); font-weight: 600; color: var(--se-tinta-2); }
.vs-pistas summary i { font-style: normal; font-weight: 400; color: var(--se-tinta-3); margin-left: 4px; }
.vs-pistas[open] summary { margin-bottom: var(--se-sp-3); }

.vs-panel__pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--se-sp-3);
  padding-top: var(--se-sp-4); border-top: .8px solid var(--se-linea);
}
.vs-panel__pie > span { font-size: var(--se-fs-sm); color: var(--se-tinta-3); }
.vs-panel__pie .btn { min-width: 170px; justify-content: center; gap: 8px; }
.vs-panel__pie .btn svg { width: 16px; height: 16px; }
.vs-panel__pie .btn svg:last-child:not(:first-child) { transform: rotate(-90deg); }

/* ---- El reproductor de ejemplos ---- */
.vs-muestra {
  position: sticky; top: calc(var(--se-sp-5) + 64px);
  display: flex; flex-direction: column; gap: var(--se-sp-3);
}
.vs-muestra__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vs-muestra__cabeza b { font-family: var(--se-fuente-titulo); font-size: 18px; }
.vs-muestra__cabeza span { font-size: var(--se-fs-xs); color: var(--se-tinta-3); }

.vs-movil {
  position: relative;
  aspect-ratio: 9 / 16; max-height: 600px; width: 100%;
  border-radius: 26px; overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 6px #111, 0 0 0 7px rgba(255, 255, 255, .08), 0 24px 48px -18px rgba(0, 0, 0, .55);
}
.vs-movil video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.vs-movil__estilo {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: var(--se-r-pill);
  background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 600;
}
.vs-movil__sonido {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px); cursor: pointer;
}
.vs-movil__sonido svg { width: 16px; height: 16px; }
.vs-movil__play {
  position: absolute; inset: 0; margin: auto;
  display: grid; place-items: center; width: 64px; height: 64px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #111; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: opacity var(--se-trans), transform var(--se-trans);
}
.vs-movil__play svg { width: 24px; height: 24px; margin-left: 3px; }
.vs-movil__play.es-oculto { opacity: 0; pointer-events: none; transform: scale(.9); }
.vs-movil__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 36px 14px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
  color: #fff; pointer-events: none;
}
.vs-movil__pie b { font-size: var(--se-fs-sm); }
.vs-movil__flechas { display: flex; gap: 6px; pointer-events: auto; }
.vs-movil__flechas button {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.vs-movil__flechas button:hover { background: rgba(255, 255, 255, .32); }

.vs-miniaturas { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.vs-miniatura {
  flex: none; width: 48px; aspect-ratio: 9 / 16; padding: 0;
  border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  background: #000; cursor: pointer; opacity: .6;
  transition: opacity var(--se-trans), border-color var(--se-trans);
}
.vs-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-miniatura:hover { opacity: 1; }
.vs-miniatura.es-actual { border-color: var(--se-verde); opacity: 1; }

@media (max-width: 1000px) {
  .vs-rejilla { grid-template-columns: 1fr; }
  .vs-muestra { position: static; max-width: 340px; width: 100%; margin: 0 auto; }
  .vs-movil { max-height: 520px; }
}
@media (max-width: 640px) {
  .vs { padding: var(--se-sp-4); }
  .vs-huecos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .vs-hueco--principal { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .vs-hueco__pista { display: none; }
  .vs-hueco--principal .vs-hueco__pista { display: block; }
  .vs-panel__pie { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .vs-panel__pie .btn { width: 100%; }
  .vs-pasos li + li::before { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-progreso__barra span, .vs-movil__play, button.vs-hueco { transition: none; }
}

/* ---- Vídeo · paso 2: los estilos con su vídeo de ejemplo (solo en .crea--video) ---- */
.crea--video .vs-pasos { margin-bottom: calc(var(--se-sp-2) * -1); }
.vs-pasos li.es-hecho { color: var(--se-tinta-2); }
.vs-pasos li.es-hecho span { background: var(--se-verde-tint); border-color: var(--se-verde); color: var(--se-verde-tinta); }

.vs-mini {
  position: relative; display: block;
  width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 8px; background: #000;
  box-shadow: 0 0 0 .8px var(--se-linea);
}
.vs-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-mini__play {
  position: absolute; inset: 0; margin: auto;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #111;
}
.vs-mini__play svg { width: 12px; height: 12px; margin-left: 2px; }

.crea--video .estilo { grid-template-columns: 20px 64px 1fr; }
.crea--video .estilo__esquema { width: 64px; }
.crea--video .auto__estilo { grid-template-columns: 72px 1fr; }
.crea--video .auto__esquema { padding-top: 0; }

/* ---- Vídeo · revisar: lo que se va a crear ---- */
.vs-crear {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--se-sp-4); align-items: start;
  padding: var(--se-sp-4);
  border: 1.2px solid var(--se-verde); border-radius: var(--se-r-campo);
  background: var(--se-verde-tint);
}
.vs-crear__texto h4 { margin: 6px 0 4px; font-family: var(--se-fuente-titulo); font-size: 18px; }
.vs-crear__texto p { margin: 0 0 var(--se-sp-2); max-width: 70ch; font-size: var(--se-fs-sm); line-height: 1.55; color: var(--se-tinta-2); }
.vs-crear__texto ul { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.vs-crear__texto li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--se-fs-sm); font-weight: 600; }
.vs-crear__texto li svg { width: 14px; height: 14px; color: var(--se-verde-tinta); }
@media (max-width: 640px) {
  .vs-crear { grid-template-columns: 72px 1fr; }
}