/* ============================================================
   /empieza: Conversion-Funnel, paralleles Anzeigenziel zur Startseite.

   Designsprache der Foto-Sektionen der Startseite (.section-photo):
   dunkle Fläche, Atmosphäre-Foto mit demselben Filter und Verlauf,
   Glaskarten mit backdrop-filter, Headlines in Fraunces mit hellem
   Terrakotta-Akzent. Nur Tokens aus tokens.css, keine neue Farbe.

   Mobil ist der Hauptfall: oben ein Bildband, das wie auf der Startseite
   in die dunkle Fläche ausläuft, darunter Frage und Antworten im
   Daumenbereich. Ab 900px liegt das Foto randlos hinter allem und der
   Inhalt steht rechts auf einer Glasfläche, wie das Formular auf Foto.
   ============================================================ */

/* Die Startseite gibt dem Body unten 84px für den klebenden CTA. Den gibt
   es hier nicht, also auch keinen Leerraum. */
@media(max-width:760px){body.fn-page{padding-bottom:0}}

.fn-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Fläche ---------- */
.fn-fondo{
  --fn-kopf:76px;
  background:var(--dark);color:#fff;
}
@media(max-width:760px){.fn-fondo{--fn-kopf:64px}}

.fn-rejilla{
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--fn-kopf));
  min-height:calc(100dvh - var(--fn-kopf));
}

/* ---------- Bild ---------- */
.fn-media{
  position:relative;flex:none;background:var(--dark);
  height:clamp(170px,28vh,300px);
  height:clamp(170px,28dvh,300px);
}
/* Resumen und Buchung: das Bild bleibt als Stimmung, der Inhalt rückt hoch */
@media(max-width:899px){
  .fn-fondo[data-fase="contenido"] .fn-media{height:clamp(120px,18vh,170px);height:clamp(120px,18dvh,170px)}
}
/* Kurze Handys: flacheres Band, damit alle vier Antworten ohne Scrollen
   im Daumenbereich stehen */
@media(max-width:899px) and (max-height:780px){
  .fn-media{height:clamp(130px,20vh,190px);height:clamp(130px,20dvh,190px)}
}
.fn-img{
  position:absolute;inset:0;
  display:none;opacity:0;
  object-position:center 38%;
  filter:saturate(.95) contrast(1.03) brightness(.98);
  transition:opacity .2s var(--ease);
}
/* Ausschnitte wie auf der Startseite */
.fn-img.fn-pos-centro{object-position:center 50%}.fn-img.is-cargada{display:block}
.fn-img.is-previa{opacity:1;z-index:1}
.fn-img.is-activa{opacity:1;z-index:2}
/* Derselbe Verlauf wie die Foto-Bänder der Startseite auf dem Handy */
.fn-media.atmo::after{
  z-index:3;
  background:linear-gradient(rgba(30,27,24,.18) 0%,rgba(33,30,27,.55) 58%,var(--dark) 100%);
}

/* ---------- Panel ---------- */
.fn-panel{
  position:relative;z-index:4;
  flex:1;display:flex;flex-direction:column;min-width:0;
  margin-top:-44px;
  padding:0 var(--gutter) max(28px,env(safe-area-inset-bottom));
}

.fn-barra-sup{display:flex;align-items:center;gap:14px;min-height:44px}
.fn-atras{
  width:44px;height:44px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(10,9,8,.50);color:#fff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
@media(hover:hover){.fn-atras:hover{background:var(--accent);color:var(--dark)}}
.fn-atras svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Platz bleibt reserviert, sonst springt die Fortschrittsleiste auf Schritt 1 */
.fn-atras[hidden]{display:grid;visibility:hidden}

.fn-progreso{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.fn-progreso-txt{
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:rgba(255,255,255,.72);font-weight:700;font-variant-numeric:tabular-nums;
}
.fn-barra{display:block;height:4px;border-radius:var(--radius-pill);background:rgba(255,255,255,.16);overflow:hidden}
.fn-barra-fill{
  display:block;height:100%;width:100%;border-radius:inherit;
  background:var(--accent);
  transform-origin:left center;transform:scaleX(.05);
  transition:transform .25s var(--ease-out);
}
/* Einmaliges Aufleuchten bei 100 % */
.fn-barra.is-completa{animation:fnLeuchten .7s var(--ease-out) 1}
@keyframes fnLeuchten{
  0%  {box-shadow:0 0 0 0 rgba(227,183,142,0)}
  40% {box-shadow:0 0 0 4px rgba(227,183,142,.55)}
  100%{box-shadow:0 0 0 0 rgba(227,183,142,0)}
}

/* ---------- Überschriften ---------- */
.fn-fondo h2{color:#fff}
/* Heller Akzent wie auf den Foto-Sektionen. Das dunklere accent-ink läge
   auf Anthrazit unter 3:1. */
.fn-fondo h2 em{font-style:normal;color:var(--accent)}
/* Der Fokus springt nach jedem Schritt per Skript auf die Überschrift, damit
   Screenreader sie vorlesen. Dafür braucht es keinen sichtbaren Rahmen. */
.fn-fondo h2[tabindex="-1"]:focus,
.fn-fondo h2[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}

/* ---------- Bildschirmwechsel ----------
   Neuer Inhalt: 12px Slide plus Fade in 220ms. Alter Inhalt: reiner Fade
   in 120ms. Beim Zurückgehen kommt der neue Inhalt von oben. */
.fn-pantalla{transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
/* display:flex auf .fn-pregunta würde das hidden-Attribut sonst überstimmen */
.fn-pantalla[hidden]{display:none}
.fn-pantalla.is-saliendo{opacity:0;transition:opacity .12s linear}
.fn-pantalla.is-entrando{opacity:0;transition:none}
.fn-pantalla.is-entrando.desde-abajo{transform:translateY(12px)}
.fn-pantalla.is-entrando.desde-arriba{transform:translateY(-12px)}

/* ---------- Frage ---------- */
.fn-pregunta{flex:1;display:flex;flex-direction:column;padding-top:22px}
.fn-q{font-size:clamp(1.75rem,3vw,2.5rem);max-width:19ch}
/* Was Anfitria an dieser Stelle tut, in einem Satz */
.fn-exp{
  margin-top:14px;max-width:44ch;
  font-size:var(--fs-sm);line-height:1.55;color:rgba(255,255,255,.76);
  border-left:2px solid var(--accent);padding-left:12px;
}
.fn-exp strong{color:var(--accent);font-weight:700}

.fn-opts{
  display:grid;grid-template-columns:1fr;gap:12px;
  /* Antworten direkt unter der Frage, ohne Leerraum dazwischen */
  padding-top:24px;
}
/* Glaskarte wie die Karten der Foto-Sektionen */
.fn-opt{
  position:relative;width:100%;min-height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px 14px 20px;border-radius:var(--radius);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:700;
  color:#fff;text-align:left;line-height:1.3;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s var(--ease),border-color .12s var(--ease),background .12s var(--ease),box-shadow .12s var(--ease);
}
@media(hover:hover){.fn-opt:hover{border-color:rgba(227,183,142,.55);background:rgba(255,255,255,.09)}}
.fn-opt:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(227,183,142,.55)}
/* Gewählt: Akzentrahmen in der Markenfarbe plus Haken */
.fn-opt[aria-pressed="true"]{
  border-color:var(--accent);background:rgba(227,183,142,.14);
  box-shadow:0 0 0 3px rgba(227,183,142,.28);
}
/* Sofortiges Feedback beim Tippen, vor dem Übergang */
.fn-opt.is-tocada{transform:scale(.98)}
.fn-check{
  width:24px;height:24px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:var(--dark);
  opacity:0;transform:scale(.6);
  transition:opacity .12s var(--ease),transform .16s var(--ease-out);
}
.fn-check svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fn-opt[aria-pressed="true"] .fn-check{opacity:1;transform:scale(1)}

/* ---------- Resumen ---------- */
.fn-resumen{padding-top:22px}
.fn-h{font-size:clamp(1.75rem,3vw,2.5rem);max-width:19ch}
.fn-bloque{margin-top:20px}
/* Die Blöcke kommen gestaffelt, je 80ms versetzt */
.fn-resumen.is-animada .fn-bloque{animation:fnBloque .26s var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes fnBloque{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Glasfläche, dieselbe Rezeptur wie die Karten auf den Foto-Sektionen */
.fn-vidrio{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  padding:clamp(20px,3.4vw,30px);
}
.fn-etiqueta{
  display:block;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--accent);font-weight:700;
}

/* 1: Antwortzeit. Die Zahl ist der Moment der Seite und steht für sich. */
.fn-perdida-cifra{
  display:block;margin-top:10px;
  font-family:var(--font-display);font-weight:500;line-height:1;
  font-size:clamp(3.1rem,11vw,4.6rem);color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.fn-perdida-cifra small{font-family:var(--font-body);font-size:var(--fs-sm);font-weight:400;color:rgba(255,255,255,.62);margin-left:6px;letter-spacing:0}
.fn-extras{margin-top:12px;font-size:var(--fs-micro);line-height:1.55;color:rgba(255,255,255,.7)}
/* Verlust auf weisser Karte: dunkle Schrift, Label in der dunkleren
   Akzenttönung, die helle wäre auf Weiss zu schwach */
.fn-vidrio.fn-blanco{background:var(--surface);border-color:var(--surface);box-shadow:var(--shadow-3)}
.fn-blanco .fn-etiqueta{color:var(--accent-ink)}
.fn-blanco .fn-perdida-cifra{color:var(--ink)}
.fn-blanco .fn-perdida-cifra small,.fn-blanco .fn-extras{color:var(--ink-2)}

/* B: die Lösung, als Paket aus den eigenen Antworten */
.fn-modulos{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.fn-modulo{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.fn-modulo svg{width:22px;height:22px;margin-top:1px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fn-modulo strong{display:block;font-size:var(--fs-sm);color:#fff}
.fn-modulo span{display:block;font-size:var(--fs-sm);line-height:1.5;color:rgba(255,255,255,.72)}
.fn-precio{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;
}
.fn-precio-cifra{font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,4.6vw,2.1rem);color:var(--accent);font-variant-numeric:tabular-nums}
.fn-precio-cifra small{font-family:var(--font-body);font-size:var(--fs-sm);font-weight:400;color:rgba(255,255,255,.62)}
.fn-precio-roi{font-size:var(--fs-sm);font-weight:700;color:#fff}

.fn-cta{margin-top:20px}
.fn-cta .btn{width:100%;justify-content:center;height:56px}
@media(min-width:900px){.fn-cta .btn{width:auto}}

/* Rechenweg, zugeklappt: wer will, sieht ihn, wer nicht, scrollt nicht */
.fn-calculo{margin-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.fn-calculo summary{
  list-style:none;cursor:pointer;padding:14px 0;
  font-size:var(--fs-sm);font-weight:700;color:rgba(255,255,255,.85);
  display:flex;justify-content:space-between;gap:12px;
}
.fn-calculo summary::-webkit-details-marker{display:none}
.fn-calculo summary::after{content:'+';color:var(--accent);font-weight:400;font-size:1.2rem;line-height:1}
.fn-calculo[open] summary::after{content:'\2212'}
.fn-calculo summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fn-calculo ul{list-style:none;padding-bottom:10px;display:flex;flex-direction:column;gap:8px}
.fn-calculo li{position:relative;padding-left:14px;font-size:var(--fs-micro);line-height:1.6;color:rgba(255,255,255,.7)}
.fn-calculo li::before{content:'';position:absolute;left:0;top:.7em;width:5px;height:1px;background:var(--accent)}

/* ---------- Reservar ---------- */
.fn-reservar{padding-top:22px}
/* section-dark liefert Farben und Typo, die Fläche kommt vom Funnel */
.fn-reservar.section-dark{background:transparent}
.fn-reservar .section-head{margin-bottom:var(--s3)}
.fn-reservar .section-head h2{font-size:clamp(1.75rem,3vw,2.5rem);max-width:19ch}
/* Das Gesicht ist hier der Grund zu buchen: mindestens 96px auf dem Handy */
.fn-hablas-con .hc-foto{width:clamp(96px,11vw,120px);height:clamp(96px,11vw,120px)}
.fn-rgpd{margin-top:12px;margin-bottom:var(--s2)}
.fn-rgpd a{color:#fff;text-decoration:underline}
/* Höhe fest reservieren, damit beim Nachladen des Kalenders nichts springt.
   Werte wie beim Kalender auf der Startseite. */
.fn-cal{position:relative;z-index:1;width:100%;min-width:280px;height:820px}
@media(max-width:640px){.fn-cal{height:680px}}

.fn-noscript{margin-top:var(--s3);font-size:var(--fs-sm);color:rgba(255,255,255,.8)}
.fn-noscript a{color:var(--accent);text-decoration:underline}

/* ---------- Footer mit ruhigem Mail-Ausweg ---------- */
.fn-footer{padding-top:0}
.fn-legal{display:flex;gap:18px;flex-wrap:wrap}
.fn-legal a{color:var(--ink-2)}
.fn-legal a:hover{color:var(--accent-ink)}
.fn-mail{flex-basis:100%;margin:0;font-size:var(--fs-micro);color:var(--ink-2)}
.fn-mail a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.fn-mail a:hover{color:var(--accent-ink)}

/* ---------- Cookie-Hinweis ----------
   Solange er unten steht (einmalig, bis zur Entscheidung), wird das Bildband
   flacher und die Antworten rücken über den Hinweis. */
@media(max-width:899px){
  body:has(#cookie-banner.show) .fn-media{height:clamp(130px,17dvh,190px)}
  body:has(#cookie-banner.show) .fn-panel{padding-bottom:max(130px,calc(env(safe-area-inset-bottom) + 122px))}
}

/* ---------- Breite Schirme: Foto randlos dahinter, Inhalt auf Glas ---------- */
@media(min-width:900px){
  .fn-rejilla{display:grid;grid-template-columns:1fr;grid-template-rows:auto}
  .fn-media,.fn-panel{grid-area:1 / 1}
  .fn-media{
    position:sticky;top:var(--fn-kopf);align-self:start;
    height:calc(100vh - var(--fn-kopf));
    height:calc(100dvh - var(--fn-kopf));
  }
  /* Panel mittig: das Motiv bleibt an beiden Rändern sichtbar, zur Mitte hin
     etwas dunkler, wo der Inhalt steht */
  .fn-media.atmo::after{
    background:linear-gradient(90deg,rgba(30,27,24,.3) 0%,rgba(30,27,24,.5) 50%,rgba(30,27,24,.3) 100%);
  }
  .fn-panel{
    justify-self:center;align-self:start;
    width:min(620px,calc(100vw - 2 * var(--gutter)));margin:clamp(28px,5vh,56px) 0;
    padding:clamp(28px,2.8vw,40px);
    background:rgba(14,13,12,.78);
    border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);
    backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
    box-shadow:0 18px 44px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
    min-height:calc(100dvh - var(--fn-kopf) - 2 * clamp(28px,5vh,56px));
  }
}

/* ---------- Ohne Bewegung ---------- */
@media(prefers-reduced-motion:reduce){
  .fn-pantalla,.fn-img,.fn-opt,.fn-check,.fn-barra-fill{transition:none!important}
  .fn-resumen.is-animada .fn-bloque,.fn-barra.is-completa{animation:none!important}
  .fn-opt.is-tocada{transform:none}
}