/* ACTION ADVERT · estilos. Blanco de expositor, amarillo en acentos, subrayados tipo rotulador. */
:root {
  --fondo: #FFFDF8;
  --crema: #F7F1DF;
  --tinta: #16160f;
  --gris: #6d6b60;
  --linea: #e6e0cc;
  --amarillo: #FFE55C;
  --amarillo-fuerte: #FFD400;
  --oscuro: #16160f;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --escrita: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --papel: #FBF7EA;
  --ancho: 1120px;
  --prosa: 66ch;
  --radio: 14px;
}
/* Alternativa de tipografía (pendiente de que Pablo elija): cambia --display por "Newsreader" o "Instrument Serif"
   y añade la familia en el <link> de Google Fonts de index.html. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--texto); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.prosa { max-width: var(--prosa); }
.oculto { position: absolute; left: -9999px; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; }
p { margin: 0 0 1.1em; }
strong { font-weight: 600; }
.mono { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.kicker { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 1.4em; display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 8px; height: 8px; background: var(--amarillo); border: 1px solid var(--tinta); display: inline-block; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3dbb6d; margin-right: 10px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(61,187,109,.18); }
.remate { margin-top: 2.2rem; font-size: 1.12rem; }

/* Subrayado de rotulador */
mark {
  background: none; color: inherit;
  background-image: linear-gradient(transparent 58%, var(--amarillo) 58%, var(--amarillo) 94%, transparent 94%);
  padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
h1 mark { background-image: linear-gradient(transparent 62%, var(--amarillo) 62%, var(--amarillo) 96%, transparent 96%); }

/* Botones */
.btn {
  display: inline-block; background: var(--tinta); color: #fff; text-decoration: none;
  font-weight: 600; padding: .95rem 1.5rem; border-radius: 999px; border: 1.5px solid var(--tinta);
  font-size: 1rem; line-height: 1; transition: transform .15s ease, background .15s ease, color .15s ease; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); background: #000; }
.btn--peq { padding: .65rem 1.1rem; font-size: .92rem; }
.btn--grande { padding: 1.1rem 1.9rem; font-size: 1.05rem; }
.btn--amarillo { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.btn--amarillo:hover { background: var(--amarillo-fuerte); border-color: var(--amarillo-fuerte); }

/* ===== Cortina de carga ===== */
.cortina {
  position: fixed; inset: 0; z-index: 90; background: var(--tinta); color: var(--crema);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 24px;
}
.cortina__marca { font-family: var(--display); font-size: clamp(2rem, 6vw, 4rem); margin: 0; letter-spacing: -.02em; opacity: 0; animation: subir .7s ease .1s forwards; }
.cortina__frase { margin: 0; color: #cfc8ad; font-size: clamp(.95rem, 2vw, 1.15rem); opacity: 0; animation: subir .7s ease .45s forwards; }
.cortina.abre { animation: abrir 1.5s cubic-bezier(.65,.02,.3,1) forwards; }
.cortina.abre .cortina__marca, .cortina.abre .cortina__frase { animation: bajar .45s ease forwards; }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bajar { to { opacity: 0; transform: translateY(-12px); } }
@keyframes abrir { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 102%); } }
body.sin-cortina .cortina { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cortina { display: none; }
}

/* ===== Nav ===== */
.nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: color-mix(in srgb, var(--fondo) 86%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.nav.con-borde { border-color: var(--linea); }
.nav__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 1.25rem; font-weight: 500; }
.nav__links { display: flex; gap: 26px; }
.nav__links a { text-decoration: none; color: var(--gris); transition: color .15s; }
.nav__links a:hover { color: var(--tinta); }
@media (max-width: 900px) { .nav__links { display: none; } }

/* ===== Hero ===== */
.hero { position: relative; padding: clamp(28px, 4vh, 44px) 0 clamp(36px, 5vh, 56px); overflow: hidden; }
.hero__cuerpo { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__eyebrow { color: var(--gris); margin-bottom: 1.1rem; }
.hero__titulo { max-width: 22ch; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; }
.hero__sub { font-size: clamp(1.02rem, 1.5vw, 1.15rem); max-width: 58ch; color: #2b2a22; margin-top: .9rem; }
.hero__cta { margin-top: 1.1rem; }

/* Ventana del vídeo (estilo ventana de escritorio) */
.ventana { width: min(100%, clamp(500px, calc((100vh - 520px) * 1.6), 720px)); margin-top: clamp(14px, 2vh, 24px); background: var(--fondo); border: 1px solid var(--tinta); border-radius: 10px; overflow: hidden; text-align: left;
  box-shadow: 0 2px 0 0 var(--linea), 0 24px 60px -20px rgba(22,22,15,.35), 0 10px 24px rgba(22,22,15,.08); }
.ventana__barra { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--tinta); background: #fff; }
.ventana__puntos { display: flex; gap: 6px; }
.ventana__puntos i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--tinta); background: var(--linea); }
.ventana__puntos i:first-child { background: var(--amarillo); }
.ventana__titulo { color: var(--gris); }
.ventana__cuerpo { aspect-ratio: 16/9; background: #111; position: relative; }
.ventana__cuerpo video { width: 100%; height: 100%; display: block; }
.ventana__pronto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--crema);
  background: radial-gradient(ellipse at 50% 60%, #2a2a20 0%, #16160f 70%); }
.ventana__pronto p { margin: 0; color: #bdb69c; }
.ventana__play { width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid var(--crema); display: grid; place-items: center; position: relative; }
.ventana__play::after { content: ""; border-left: 22px solid var(--amarillo); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; }

/* ===== Bloques ===== */
.bloque { padding: clamp(64px, 10vh, 120px) 0; }
.bloque--crema { background: var(--crema); }
.bloque--oscuro { background: var(--oscuro); color: var(--crema); }
.bloque--oscuro .kicker { color: #bdb69c; }
.bloque--oscuro mark { background-image: linear-gradient(transparent 58%, rgba(255,229,92,.55) 58%, rgba(255,229,92,.55) 94%, transparent 94%); }

.tres { list-style: none; padding: 0; margin: 2.2rem 0 0; counter-reset: tres; }
.tres li { position: relative; padding-left: 3.4rem; margin-bottom: 2rem; counter-increment: tres; }
.tres li::before { content: counter(tres); position: absolute; left: 0; top: .1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--amarillo); font-family: var(--display); font-weight: 600; display: grid; place-items: center; font-size: 1.2rem; }

/* Test */
.test { margin: 2.4rem 0 2.6rem; border: 1px solid var(--tinta); border-radius: var(--radio); background: var(--fondo); padding: clamp(18px, 3vw, 30px); box-shadow: 0 2px 0 0 var(--linea); }
.test__label { display: block; font-weight: 600; margin-bottom: .6rem; }
.test__select { width: 100%; font: inherit; font-size: 1.05rem; padding: .85rem 1rem; border: 1px solid var(--tinta); border-radius: 10px; background: #fff; color: var(--tinta); }
.test__res { margin-top: 1.6rem; border-top: 1px dashed var(--linea); padding-top: 1.4rem; }
.test__intro { color: var(--gris); margin-bottom: .8rem; }
.test__ideas { padding-left: 1.3rem; margin: 0 0 1rem; }
.test__ideas li { margin-bottom: .7rem; font-size: 1.08rem; }
.test__ideas small { display: block; color: var(--gris); font-size: .85rem; margin-top: .15rem; }
.test__fuente { font-size: .82rem; color: var(--gris); border-left: 3px solid var(--amarillo); padding-left: .8rem; }
.test__pregunta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.test__pregunta p { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 500; }

/* Gauss */
.gauss { margin: 2.4rem 0 0; }
.gauss svg { width: 100%; height: auto; font-family: var(--texto); font-size: 17px; font-weight: 600; }
.gauss figcaption { color: var(--gris); font-size: .92rem; margin-top: .8rem; max-width: 70ch; }
.gauss--datos svg { font-weight: 400; }
.campana__pregunta { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 2.6rem; }
.gauss__leyenda { display: none; list-style: none; padding: 0; margin: 1rem 0 0; font-size: .72rem; letter-spacing: .04em; text-transform: none; }
.gauss__leyenda li { display: flex; justify-content: space-between; gap: 12px; padding: .35rem 0; border-bottom: 1px solid var(--linea); }
.gauss__leyenda li span { color: var(--gris); white-space: nowrap; }
.gauss__leyenda .gauss__leyenda-t { display: block; text-transform: uppercase; color: var(--gris); border: 0; padding-top: .9rem; }
@media (max-width: 700px) {
  .gauss--datos .gauss__detalle { display: none; }
  .gauss--datos .gauss__tick { font-size: 22px; } .gauss--datos .gauss__sub, .gauss--datos .gauss__nota { display: none; }
  .gauss--datos .gauss__tu text { font-size: 30px; text-anchor: end; }
  .gauss--datos .gauss__fuera { font-size: 17px; text-anchor: end; } .gauss--datos .gauss__tick--2, .gauss--datos .gauss__tick--3 { display: none; }
  .gauss__leyenda { display: block; }
}

/* Casos */
.casos { display: grid; gap: 18px; margin-top: 2rem; }
.casos { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .casos { grid-template-columns: 1fr; } }
.caso { background: var(--fondo); border: 1px solid var(--tinta); border-radius: var(--radio); padding: 22px 24px; box-shadow: 0 2px 0 0 var(--linea); }
.caso__n { color: var(--gris); display: block; margin-bottom: 1.2rem; }
.caso h3 { margin-bottom: .4em; }
.caso p { margin: 0; }

/* Pasos */
.pasos { margin: 2rem 0 0; display: grid; gap: 1.4rem; }
.pasos div { padding-left: 1.2rem; border-left: 3px solid var(--amarillo); }
.pasos dt { font-family: var(--display); font-size: 1.45rem; font-weight: 600; margin-bottom: .25rem; }
.pasos dd { margin: 0; }

/* Cosas que no vas a leer aquí */
.tachadas { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: 1.5rem; }
.tachadas li { padding-left: 1.2rem; border-left: 3px solid var(--linea); }
.tachadas s { display: block; font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--gris); text-decoration-thickness: 2px; text-decoration-color: var(--tinta); margin-bottom: .3rem; }
.tachadas p { margin: 0; }

/* Libertad */
.libertad__titulo { font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.05; }
#libertad p { color: #d9d3b8; font-size: 1.12rem; }

/* Nota del fundador: una carta de papel */
.carta {
  position: relative; max-width: 780px; margin-inline: auto; background: var(--papel); color: #1d1c14;
  padding: clamp(28px, 5vw, 60px) clamp(22px, 6vw, 72px) clamp(32px, 5vw, 56px); border-radius: 3px;
  font-family: var(--escrita); font-size: clamp(1.4rem, 2.3vw, 1.7rem); line-height: 1.42;
  box-shadow: 0 1px 2px rgba(22,22,15,.1), 0 14px 40px -10px rgba(22,22,15,.22), 0 50px 90px -40px rgba(22,22,15,.3);
  transform: rotate(-.5deg);
}
.carta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.carta::after { /* doblez */
  content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(22,22,15,.045) 20%, rgba(22,22,15,.045) 80%, transparent);
}
.carta > * { position: relative; z-index: 1; }
.carta p { margin: 0 0 .85em; }
.carta strong { font-weight: 700; }
.carta mark { background-image: linear-gradient(transparent 48%, rgba(255,229,92,.9) 48%, rgba(255,229,92,.9) 96%, transparent 96%); }
.carta__kicker { color: var(--gris); margin-bottom: 1.6rem; }
.carta__foto { float: right; width: clamp(140px, 24%, 210px); margin: -8px -12px 18px 28px; background: #fff; padding: 9px 9px 10px; transform: rotate(2.4deg);
  box-shadow: 0 1px 2px rgba(22,22,15,.15), 0 10px 24px -8px rgba(22,22,15,.35); }
.carta__foto::before { content: ""; position: absolute; left: 50%; top: -12px; width: 86px; height: 26px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255,229,92,.6); border: 1px solid rgba(22,22,15,.08); box-shadow: 0 1px 2px rgba(22,22,15,.08); }
.carta__foto img { display: block; aspect-ratio: 3/4; object-fit: cover; }
.carta__foto figcaption { font-family: var(--escrita); font-size: 1.15rem; color: var(--gris); text-align: center; margin-top: 8px; }
.carta__firma { font-size: 2.3rem; font-weight: 700; margin-top: 1.4em !important; line-height: 1.2; }
.carta__firma .mono { font-size: .72rem; color: var(--gris); letter-spacing: .1em; }
@media (max-width: 640px) {
  .carta { transform: none; font-size: 1.35rem; }
  .carta__foto { float: none; width: 170px; margin: 0 auto 26px; transform: rotate(-1.5deg); }
}

/* Reviews */
.reviews { display: grid; gap: 16px; margin-top: 2rem; }
.review { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px 22px; }
.review p { margin: 0 0 .6rem; }
.review cite { font-style: normal; color: var(--gris); font-size: .92rem; }

/* Reserva */
.reserva { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.reserva__filtro { color: #cfc8ad; border-left: 3px solid var(--amarillo); padding-left: .9rem; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; }
.form label span { font-weight: 600; font-size: .95rem; }
.form small { color: #bdb69c; font-weight: 400; }
.form input, .form textarea { font: inherit; padding: .8rem .95rem; border-radius: 10px; border: 1px solid #4a4a3e; background: #22221a; color: var(--crema); width: 100%; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--amarillo); }
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .btn { justify-self: start; margin-top: 6px; }
.form__legal { font-size: .82rem; color: #bdb69c; margin: 0; }
.reserva__ok h3 { font-size: 1.8rem; }
#calendario iframe { width: 100%; height: 720px; border: 0; border-radius: var(--radio); background: #fff; }
@media (max-width: 820px) { .reserva { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form__fila { grid-template-columns: 1fr; } }

/* FAQ */
.faq { margin-top: 1.6rem; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; padding: 1rem 0; font-family: var(--display); font-size: 1.3rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--texto); color: var(--gris); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1.1rem; max-width: 60ch; }

/* Pie */
.pie { padding: 56px 0 40px; border-top: 1px solid var(--linea); }
.pie__frase { font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin-bottom: 1.4rem; }
.pie__links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.pie__links a { color: var(--gris); text-decoration: none; }
.pie__links a:hover { color: var(--tinta); text-decoration: underline; }
.pie__copy { color: var(--gris); font-size: .8rem; margin-top: 1.6rem; font-family: var(--mono); }

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Páginas legales */
.legal { padding: 48px 0 80px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); }
.legal h2 { font-size: 1.4rem; margin-top: 2rem; }
.legal .pendiente { background: var(--amarillo); padding: 0 .2em; }

/* Pantallas bajas (portátiles 768-800px): que el inicio entre entero sin scroll */
@media (min-width: 901px) and (max-height: 820px) {
  .hero { padding-top: 18px; padding-bottom: 28px; }
  .hero__eyebrow { margin-bottom: .6rem; }
  .hero__titulo { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
  .hero__sub { margin-top: .6rem; font-size: 1rem; }
  .ventana { margin-top: 12px; }
  .hero__cta { margin-top: .8rem; }
  .btn--grande { padding: .85rem 1.5rem; font-size: 1rem; }
}