/* Probador de estilos de la página: escribe tu frase, toca palabras para marcarlas y mírala animada.
   Imita 5 estilos de la app (vista previa; la app usa su propio motor). */
.pv { --pv-crema: #f6e9d5; --pv-tinta: #14110c; --pv-rojo: #e83b3f; --pv-gris: #a2968a; --pv-linea: #3a3129;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "escena escena" "texto estilos"; gap: 28px 36px; color: var(--pv-crema); }
.pv-escena { grid-area: escena; } .pv-controles { display: contents; } .pv-col-texto { grid-area: texto; } .pv-col-estilos { grid-area: estilos; }
.pv * { box-sizing: border-box; }


/* ── controles ── */
.pv-etiqueta { display: block; margin: 0 0 8px; font: 800 11px Figtree, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--pv-gris); }
.pv-bloque + .pv-bloque { margin-top: 22px; }
.pv-entrada { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--pv-linea); background: #1b1712;
  color: var(--pv-crema); font: 600 17px Figtree, sans-serif; outline: none; transition: border-color .2s; }
.pv-entrada:focus { border-color: var(--pv-crema); }
.pv-entrada:focus-visible { outline: 2px solid var(--pv-crema); outline-offset: 2px; }
.pv-palabras { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-palabra { position: relative; padding: 9px 14px 8px; border-radius: 999px; border: 1px solid var(--pv-linea); background: #1b1712;
  color: var(--pv-crema); font: 700 14px Figtree, sans-serif; cursor: pointer; transition: transform .15s, background .2s, border-color .2s; }
.pv-palabra:hover { transform: translateY(-1px); border-color: #6a5d4e; }
.pv-palabra small { display: block; margin-top: 2px; font: 800 9px Figtree, sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.pv-palabra[data-m="impacto"] { background: var(--pv-rojo); border-color: var(--pv-rojo); color: var(--pv-tinta); }
.pv-palabra[data-m="resaltar"] { background: #fcb52c; border-color: #fcb52c; color: var(--pv-tinta); }
.pv-palabra[data-m="nivel"] { background: var(--pv-crema); border-color: var(--pv-crema); color: var(--pv-tinta); }
.pv-palabra[data-m="ctx"], .pv-palabra[data-m="comp"] { border-color: var(--pv-crema); border-style: dashed; }
.pv-ayuda { margin: 10px 0 0; font: 500 13px/1.5 Figtree, sans-serif; color: var(--pv-gris); }
.pv-ayuda b { color: var(--pv-crema); }
.pv-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font: 700 12px Figtree, sans-serif; color: var(--pv-gris); }
.pv-leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.pv-estilos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.pv-estilo { display: grid; place-items: center; gap: 6px; padding: 14px 6px 10px; border-radius: 14px; border: 1px solid var(--pv-linea);
  background: #1b1712; color: var(--pv-crema); cursor: pointer; transition: transform .15s, border-color .2s, box-shadow .2s; }
.pv-estilo:hover { transform: translateY(-2px); }
.pv-estilo[aria-pressed="true"] { border-color: var(--pv-rojo); box-shadow: 0 0 0 1px var(--pv-rojo), 0 10px 24px rgba(232,59,63,.25); }
.pv-estilo .pv-aa { height: 34px; display: grid; place-items: center; font-size: 22px; line-height: 1; }
.pv-estilo .pv-nom { font: 800 10.5px Figtree, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--pv-gris); }
.pv-estilo[aria-pressed="true"] .pv-nom { color: var(--pv-crema); }
.pv-nota { margin-top: 18px; font: 500 12px/1.5 Figtree, sans-serif; color: var(--pv-gris); }

/* ── escenario: fondo vivo, colores que se mueven despacio ── */
.pv-escena { position: relative; aspect-ratio: 16 / 7; min-height: 280px; border-radius: 28px; overflow: hidden; container-type: inline-size; isolation: isolate;
  background: #120b0a; box-shadow: 0 0 0 1px #2c251e, 0 40px 80px rgba(0,0,0,.45); }
.pv-luz { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .85; z-index: -1; will-change: transform; }
.pv-luz.a { width: 60%; height: 120%; left: -10%; top: -40%; background: radial-gradient(circle, #e83b3f 0%, rgba(232,59,63,0) 65%); animation: pv-flota 14s ease-in-out infinite alternate; }
.pv-luz.b { width: 55%; height: 110%; right: -12%; top: -10%; background: radial-gradient(circle, #fcb52c 0%, rgba(252,181,44,0) 62%); opacity: .55; animation: pv-flota 18s ease-in-out -6s infinite alternate-reverse; }
.pv-luz.c { width: 70%; height: 110%; left: 20%; bottom: -70%; background: radial-gradient(circle, #7a1e3a 0%, rgba(122,30,58,0) 65%); animation: pv-flota 16s ease-in-out -3s infinite alternate; }
@keyframes pv-flota { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, 8%) scale(1.12); } 100% { transform: translate(-5%, -4%) scale(.95); } }
.pv-escena::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; mix-blend-mode: overlay;
  background: repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.35) 0 1px, transparent 1px 3px); }
.pv-escena::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55)); }
.pv-vivo { position: absolute; top: 18px; left: 20px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px); font: 800 10.5px Figtree, sans-serif; letter-spacing: .14em; color: #fff; }
.pv-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pv-rojo); animation: pv-parpadeo 1.2s infinite; }
@keyframes pv-parpadeo { 50% { opacity: .3; } }
.pv-otra { position: absolute; right: 18px; bottom: 18px; z-index: 3; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px); color: #fff; font: 700 13px Figtree, sans-serif; cursor: pointer; }
.pv-otra:hover, .pv-son:hover { background: rgba(0,0,0,.6); }
.pv-son { position: absolute; left: 18px; bottom: 18px; z-index: 3; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px); color: #fff; font: 700 13px Figtree, sans-serif; cursor: pointer; }
.pv-son[aria-pressed="true"] { background: var(--pv-rojo); border-color: var(--pv-rojo); }
.pv-subs { position: absolute; left: 8%; right: 8%; top: 52%; transform: translateY(-50%); z-index: 2; display: grid; justify-items: center; text-align: center;
  font-size: 6.2cqw; line-height: 1.05; pointer-events: none; }
.pv-linea { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .26em; }
.pv-w { display: inline-block; position: relative; white-space: nowrap; will-change: transform, opacity, filter; }

/* ── 1. Bigger: papel crema, letra de tinta, sombra roja ── */
.pv[data-e="bigger"] .pv-subs { font-family: Poppins, sans-serif; font-weight: 900; letter-spacing: -.02em; text-transform: lowercase; color: #140f0c; }
.pv[data-e="bigger"] .pv-linea { background: var(--pv-crema); padding: .12em .34em .16em; box-shadow: -.18em .18em 0 var(--pv-rojo); }
.pv[data-e="bigger"] .pv-w.impacto { color: #c21a1e; font-size: 1.08em; }
.pv[data-e="bigger"] .pv-w.resaltar { background: #fcb52c; padding: 0 .12em; }

/* ── 2. Portada: letra ancha crema con sombra negra dura ── */
.pv[data-e="portada"] .pv-subs { font-family: Archivo, sans-serif; font-weight: 900; font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--pv-crema); text-shadow: -.07em .07em 0 #0a0a0a; font-size: 5.6cqw; }
.pv[data-e="portada"] .pv-w.impacto { color: #0a0a0a; text-shadow: none; background: var(--pv-crema); padding: .04em .16em 0; font-size: 1.12em;
  box-shadow: -.1em .1em 0 var(--pv-rojo); }
.pv[data-e="portada"] .pv-w.resaltar { color: #fff; text-shadow: none; background: var(--pv-rojo); padding: .04em .16em 0; box-shadow: -.1em .1em 0 #0a0a0a; }

/* ── 3. Póster: crema con contorno y sombra roja, la que se dice en amarillo ── */
.pv[data-e="poster"] .pv-subs { font-family: Montserrat, sans-serif; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: #fff2d6;
  -webkit-text-stroke: .045em #140d0d; paint-order: stroke fill; text-shadow: .08em .08em 0 #eb2938; font-size: 6.4cqw; }
.pv[data-e="poster"] .pv-w.dice { color: #ffd61a; }
.pv[data-e="poster"] .pv-w.impacto { color: #ffd61a; font-size: 1.32em; transform: rotate(-3deg); }
.pv[data-e="poster"] .pv-w.resaltar { color: #140d0d; -webkit-text-stroke: 0; text-shadow: none; background: #ffd61a; padding: .02em .14em 0;
  box-shadow: .08em .08em 0 #eb2938; }

/* ── 4. Letras 3D: itálica blanca con relieve ── */
.pv[data-e="profundidad"] .pv-subs { font-family: Poppins, sans-serif; font-weight: 900; font-style: italic; letter-spacing: -.04em; text-transform: uppercase; color: #fff;
  font-size: 6.6cqw; --pv-rel: #3b3b40;
  text-shadow: .012em .012em 0 var(--pv-rel), .024em .024em 0 var(--pv-rel), .036em .036em 0 var(--pv-rel), .048em .048em 0 var(--pv-rel),
    .06em .06em 0 var(--pv-rel), .072em .072em 0 var(--pv-rel), .084em .084em 0 #26262a, .1em .12em .18em rgba(0,0,0,.55); }
.pv[data-e="profundidad"] .pv-w.impacto { color: #ffd61a; font-size: 1.32em; --pv-rel: #8a6a00; }
.pv[data-e="profundidad"] .pv-w.resaltar { color: #14110c; text-shadow: none; background: #ffd61a; padding: 0 .14em; transform: skewX(-8deg);
  box-shadow: .08em .08em 0 #3b3b40; }

/* ── 5. Editorial: cursiva fina blanca, énfasis coral subrayado y óvalo a mano ── */
.pv[data-e="editorial"] .pv-subs { font-family: "Playfair Display", serif; font-weight: 900; font-style: italic; letter-spacing: -.01em; color: #fff;
  -webkit-text-stroke: .03em #0b0a09; paint-order: stroke fill; text-shadow: 0 .03em .12em rgba(0,0,0,.75); font-size: 6.8cqw; }
.pv[data-e="editorial"] .pv-w.impacto { color: #f2404d; font-size: 1.3em; }
.pv[data-e="editorial"] .pv-w.impacto::after { content: ""; position: absolute; left: .02em; right: .02em; bottom: -.02em; height: .06em; border-radius: 1em;
  background: #f2404d; transform: scaleX(0); transform-origin: left; animation: pv-raya .35s .25s cubic-bezier(.3,.9,.3,1) forwards; }
@keyframes pv-raya { to { transform: scaleX(1); } }
.pv[data-e="editorial"] .pv-w.resaltar svg { position: absolute; left: -.28em; top: -.22em; width: calc(100% + .56em); height: calc(100% + .44em); overflow: visible; }
.pv[data-e="editorial"] .pv-w.resaltar path { fill: none; stroke: #f2404d; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: pv-ovalo .5s .1s ease-out forwards; }
@keyframes pv-ovalo { to { stroke-dashoffset: 0; } }

/* ── frases de énfasis (contexto · principal · complemento) ── */
.pv-nivel { display: grid; justify-items: center; gap: .1em; }
.pv-nivel .pv-chico { font-size: .46em; letter-spacing: .06em; }
.pv-nivel .pv-grande { font-size: 1.7em; line-height: .95; }
.pv[data-e="bigger"] .pv-nivel { gap: .14em; }
.pv[data-e="bigger"] .pv-nivel .pv-chico { background: #fcb52c; padding: .16em .5em .1em; box-shadow: none; }
.pv[data-e="bigger"] .pv-nivel .pv-grande { color: #c21a1e; background: var(--pv-crema); padding: .02em .22em .08em; box-shadow: -.1em .1em 0 var(--pv-rojo); }
.pv[data-e="portada"] .pv-nivel .pv-chico.comp { color: #fff; text-shadow: none; background: var(--pv-rojo); padding: .18em .5em .1em; box-shadow: -.12em .12em 0 #0a0a0a; }
.pv[data-e="portada"] .pv-nivel .pv-grande { text-shadow: -.05em .05em 0 var(--pv-rojo); }
.pv[data-e="poster"] .pv-nivel .pv-grande { color: #ffd61a; }
.pv[data-e="profundidad"] .pv-nivel .pv-grande { color: #ffd61a; --pv-rel: #8a6a00; }
.pv[data-e="editorial"] .pv-nivel .pv-chico { font-weight: 700; letter-spacing: .02em; }
.pv[data-e="editorial"] .pv-nivel .pv-grande { color: #f2404d; }

/* teléfono: el escenario pasa a vertical y los controles van debajo */
@media (max-width: 860px) { .pv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "escena" "texto" "estilos"; }
  .pv-escena { aspect-ratio: 4 / 5; min-height: 0; } .pv .pv-subs { left: 6%; right: 6%; } .pv[data-e] .pv-subs { font-size: 10.5cqw; } }