La brújula Trama

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
background: #2C3B28;
color: #F3EEE6;
font-family: 'Poppins', sans-serif;
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
overflow-x: hidden;
}

.contenedor {
width: 100%;
max-width: 520px;
min-height: 100vh;
position: relative;
}

.pantalla {
display: none;
min-height: 100vh;
padding: 56px 32px 72px;
flex-direction: column;
justify-content: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
}

.pantalla.visible {
opacity: 1;
transform: translateY(0);
}

.pantalla.activa {
display: flex;
}

/* TIPOGRAFÍA */
.serif {
font-family: 'Cormorant Garamond', serif;
}

.marca {
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(243,238,230,0.35);
margin-bottom: 48px;
}

.titulo-grande {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(48px, 10vw, 72px);
font-weight: 300;
color: #F3EEE6;
line-height: 1.05;
margin-bottom: 8px;
}

.titulo-acento {
color: #C98A72;
font-style: italic;
}

.separador {
width: 32px;
height: 1px;
background: #C98A72;
margin: 32px 0;
}

.texto-intro {
font-size: 16px;
font-weight: 300;
color: rgba(243,238,230,0.78);
line-height: 1.9;
margin-bottom: 16px;
}

.frase-destacada {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-style: italic;
color: #F3EEE6;
line-height: 1.5;
margin: 24px 0;
padding-left: 20px;
border-left: 1px solid #C98A72;
}

/* ESCENAS */
.escena-contexto {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(22px, 5vw, 30px);
font-weight: 300;
color: #F3EEE6;
line-height: 1.5;
margin-bottom: 32px;
}

.pregunta-label {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(243,238,230,0.35);
margin-bottom: 20px;
}

.opciones {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 8px;
}

.opcion {
background: transparent;
border: 1px solid rgba(243,238,230,0.15);
border-radius: 4px;
padding: 18px 22px;
cursor: pointer;
font-size: 15px;
font-weight: 300;
color: rgba(243,238,230,0.75);
line-height: 1.65;
text-align: left;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
position: relative;
overflow: hidden;
}

.opcion::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0; height: 100%;
background: rgba(201,138,114,0.08);
transition: width 0.4s ease;
}

.opcion:hover {
border-color: rgba(201,138,114,0.5);
color: #F3EEE6;
}

.opcion:hover::before {
width: 100%;
}

.opcion.elegida {
border-color: #C98A72;
color: #F3EEE6;
background: rgba(201,138,114,0.1);
}

/* TRANSICIONES */
.transicion-txt {
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-style: italic;
color: rgba(243,238,230,0.6);
line-height: 1.7;
text-align: center;
max-width: 320px;
margin: 0 auto;
}

/* PANTALLA 5 ESPECIAL */
.texto-revelacion {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(20px, 4.5vw, 28px);
font-weight: 300;
color: #F3EEE6;
line-height: 1.7;
text-align: center;
max-width: 380px;
margin: 0 auto 48px;
}

/* PANTALLA 8 ESPECIAL */
.silencio {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(24px, 5vw, 36px);
font-weight: 300;
color: #F3EEE6;
line-height: 1.6;
margin-bottom: 16px;
}

.silencio-sub {
font-size: 15px;
font-weight: 300;
color: rgba(243,238,230,0.5);
line-height: 1.8;
margin-bottom: 36px;
}

/* PANTALLA 9 */
.devolución-intro {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(28px, 6vw, 40px);
font-weight: 300;
color: #F3EEE6;
line-height: 1.4;
margin-bottom: 28px;
}

.devolución-txt {
font-size: 15px;
font-weight: 300;
color: rgba(243,238,230,0.72);
line-height: 1.9;
margin-bottom: 12px;
}

/* PANTALLA 10 */
.lista-items {
list-style: none;
margin: 20px 0 32px;
}

.lista-items li {
font-size: 14px;
font-weight: 300;
color: rgba(243,238,230,0.78);
line-height: 1.7;
padding: 10px 0;
border-bottom: 1px solid rgba(243,238,230,0.08);
display: flex;
align-items: flex-start;
gap: 12px;
}

.lista-items li::before {
content: '✦';
color: #C98A72;
font-size: 10px;
margin-top: 4px;
flex-shrink: 0;
}

.input-tel {
width: 100%;
background: rgba(243,238,230,0.06);
border: 1px solid rgba(243,238,230,0.2);
border-radius: 4px;
padding: 16px 20px;
font-size: 16px;
font-family: 'Poppins', sans-serif;
font-weight: 300;
color: #F3EEE6;
margin-bottom: 8px;
transition: border-color 0.3s;
}

.input-tel::placeholder { color: rgba(243,238,230,0.25); }
.input-tel:focus { outline: none; border-color: #C98A72; }

.nota-privacidad {
font-size: 11px;
color: rgba(243,238,230,0.25);
margin-bottom: 28px;
}

/* BOTONES */
.btn-principal {
display: block;
width: 100%;
background: transparent;
border: 1px solid rgba(243,238,230,0.4);
border-radius: 4px;
padding: 18px 32px;
font-size: 11px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: #F3EEE6;
cursor: pointer;
font-family: 'Poppins', sans-serif;
transition: all 0.4s ease;
text-decoration: none;
text-align: center;
}

.btn-principal:hover {
background: rgba(243,238,230,0.06);
border-color: rgba(243,238,230,0.7);
}

.btn-terracota {
background: #C98A72;
border-color: #C98A72;
color: #F3EEE6;
}

.btn-terracota:hover {
background: #B07360;
border-color: #B07360;
}

.btn-wa {
background: #25A244;
border-color: #25A244;
color: #F3EEE6;
}

.btn-wa:hover { background: #1a8a35; border-color: #1a8a35; }

/* INDICADOR */
.indicador {
display: flex;
gap: 6px;
margin-bottom: 40px;
}

.punto {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(243,238,230,0.15);
transition: all 0.4s ease;
}

.punto.activo { background: #C98A72; width: 20px; border-radius: 2px; }
.punto.completado { background: rgba(243,238,230,0.4); }

/* TRANSICIÓN ESPECIAL */
.pantalla-transicion {
align-items: center;
justify-content: center;
text-align: center;
background: rgba(0,0,0,0.15);
}

/* PROCESANDO */
.procesando-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}

.circulo-pulso {
width: 64px;
height: 64px;
border-radius: 50%;
border: 1px solid #C98A72;
display: flex;
align-items: center;
justify-content: center;
animation: pulso 2s ease-in-out infinite;
}

@keyframes pulso {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
}

.firma {
text-align: center;
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid rgba(243,238,230,0.08);
}
.firma p { font-size: 11px; color: rgba(243,238,230,0.2); }
.firma strong {
font-family: 'Cormorant Garamond', serif;
font-size: 16px;
font-style: italic;
color: rgba(243,238,230,0.3);
display: block;
margin-top: 4px;
}

@keyframes typewriter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

.animar-entrada {
animation: typewriter 0.6s ease forwards;
}

.delay-1 { animation-delay: 0.2s; opacity: 0; }
.delay-2 { animation-delay: 0.5s; opacity: 0; }
.delay-3 { animation-delay: 0.8s; opacity: 0; }
.delay-4 { animation-delay: 1.1s; opacity: 0; }

@media(max-width: 480px) {
.pantalla { padding: 48px 24px 64px; }
}

</style>
<div class="contenedor">

<div class="pantalla activa" id="p1">
<p class="marca">Método TRAMA · Paula Argalás</p>
<h1 class="titulo-grande">La <span class="titulo-acento">Brújula</span></h1>
<div class="separador"></div>
<p class="texto-intro">Hay días en los que terminás agotada y no sabés exactamente por qué. Otros en los que volvés a aceptar algo que en realidad no querías, o te descubrís reaccionando de una manera que ya habías prometido cambiar.</p>
<p class="texto-intro">No siempre pasa lo mismo, pero hay una sensación que vuelve:</p>
<div class="frase-destacada">¿Por qué termino otra vez en este lugar?</div>
<p class="texto-intro">En los próximos minutos quiero invitarte a mirar eso desde otro lugar. No para decirte quién sos ni para ponerle un nombre a tu historia, sino para empezar a descubrir si hay algo que se viene repitiendo y que hasta ahora había pasado desapercibido.</p>
<button class="btn-principal btn-terracota" style="margin-top:40px;" onclick="irA(2)">Comenzar</button>
<div class="firma"><p>Una experiencia del</p><strong>Método TRAMA · Paula Argalás</strong></div>
</div>

<div class="pantalla" id="p2">
<div class="indicador" id="ind2"></div>
<p class="escena-contexto">Son las ocho de la noche.<br>Llegás a casa después de un día largo.<br>Alguien te pide un favor que no tenías pensado hacer.</p>
<p class="pregunta-label">¿Qué suele pasar primero?</p>
<div class="opciones">
<button class="opcion" onclick="elegir(this,'Ad',3)">Digo que sí casi sin pensarlo y recién después me doy cuenta de que no tenía ganas.</button>
<button class="opcion" onclick="elegir(this,'A',3)">Antes de responder pienso si voy a poder hacerlo como la otra persona espera.</button>
<button class="opcion" onclick="elegir(this,'H',3)">Lo primero que se me viene es que, si no lo hago yo, probablemente termine haciéndose mal.</button>
<button class="opcion" onclick="elegir(this,'C',3)">Necesito entender qué espera esa persona antes de decidir qué responder.</button>
</div>
</div>

<div class="pantalla pantalla-transicion" id="t1">
<p class="transicion-txt animar-entrada">Las respuestas más automáticas suelen aparecer antes de que podamos pensarlas.<br><br>Sigamos observando.</p>
</div>

<div class="pantalla" id="p3">
<div class="indicador" id="ind3"></div>
<p class="escena-contexto">Habías reservado un rato para hacer algo que realmente tenías ganas.<br><br>Justo antes de empezar aparece un mensaje, una tarea pendiente o un pedido inesperado.<br><br>