/* Landing de Soshally UGC — construida con el SISTEMA SOSHALLY (soshally-brand):
   ink sobre bg, muted, un único acento rojo (el punto), DM Sans con matriz de
   pesos (500 editorial · 600 estructura · 700 impacto · 900 aparato) y Playfair
   600 italic como firma cross-familia (una sola palabra dentro del display).
   Kickers 11.5px/600/uppercase/1.84px. Sin gradientes ni hero de SaaS. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

/* voz de etiqueta del sistema (no inventar variantes) */
.lab { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.84px; color: var(--mut); }

/* display: comprimido y sub-1 de interlínea */
h1, .closing h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.h-soft { font-weight: 500; font-size: clamp(30px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -0.025em; margin: 14px 0 46px; }
em { font-family: var(--font-display-italic); font-style: italic; font-weight: 600; margin: 0 .1em; }

/* pastillas */
.btn { display: inline-block; border-radius: 100px; padding: 16px 34px; font-size: 15px; font-weight: 600; transition: opacity .2s, border-color .2s; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { opacity: .84; }
.btn--plain { border: 1px solid var(--line); }
.btn--plain:hover { border-color: var(--ink); }
/* Botón claro sobre fondo de color (el bloque de precio). */
.btn--paper { background: #fff; color: var(--ink); }
.btn--paper:hover { opacity: .88; }

/* Subtítulo de sección: va debajo del título grande, no al lado. */
.h-soft--tight { margin-bottom: 12px; }
.sec__sub { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--mut); margin-bottom: 46px; }

/* ---------- Top bar ---------- */
/* Fondo propio: sin él, el contenido pasaba por debajo y se leía fatal.
   Arriba del todo es limpio; en cuanto se scrollea aparece el fondo + hairline. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 40px; padding: 26px 64px;
  background: var(--bg); border-bottom: 1px solid transparent;
  transition: border-color .25s, padding .25s, box-shadow .25s;
}
.top.is-scrolled { border-bottom-color: var(--line); padding-top: 16px; padding-bottom: 16px; }
.toplogo { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.topdot { color: var(--red); }
.topnav { display: flex; gap: 28px; flex: 1; }
.topnav a { font-size: 13.5px; font-weight: 600; color: var(--mut); }
.topnav a:hover { color: var(--ink); }
.top__cta { padding: 11px 22px; font-size: 13.5px; }

/* ---------- 1 · Hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 140px 64px 90px; }
.hero__in { max-width: 1180px; }
/* El titular va en TRES líneas, partidas a mano con <br>: el corte no se deja al
   azar del ancho del navegador porque cambia el ritmo de la frase. Por eso el
   ancho máximo deja de mandar aquí — si sobrara ancho, el navegador metería una
   cuarta línea propia. */
.hero h1 { font-size: clamp(46px, 8.6vw, 104px); margin: 18px 0 26px; max-width: none; }
.hero__sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--soft); max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }

/* ---------- 2 · Estilos ---------- */
.styles { padding: 110px 64px; }
.styles__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.scard { border: 1px solid var(--line); border-radius: 18px; padding: 40px; display: flex; flex-direction: column; gap: 12px; transition: border-color .25s, transform .25s; }
.scard:hover { border-color: var(--ink); transform: translateY(-3px); }
.scard__n { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.03em; }
/* Sin max-width: el ancho de la tarjeta YA es el límite. Con 40ch el texto se
   quedaba a media tarjeta y parecía cortado a la mitad. */
.scard__d { font-size: 15px; line-height: 1.55; color: var(--mut); }
.scard__go { margin-top: 14px; font-size: 13px; font-weight: 600; }

/* ---------- 3 · Cómo funciona ---------- */
.how { padding: 110px 64px; }
/* Los pasos a un lado y el asistente de verdad al otro: el paso 02 habla de ver
   tu portfolio montándose, y enseñarlo mientras se lee vale más que contarlo. */
.how__cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: start; }
.how__list { list-style: none; }
.how__step { padding: 30px 0; border-top: 1px solid var(--line); }
.how__n { display: block; font-size: clamp(18px, 2vw, 24px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
.how__step p { font-size: 15.5px; line-height: 1.6; color: var(--mut); }

/* El teléfono: marco negro, pantalla dentro. Sin barra de navegador — un móvil
   no la tiene, y ponerla delataba que es un iframe. */
.phone { display: flex; flex-direction: column; align-items: center; gap: 16px; position: sticky; top: 120px; }
.phone:hover .frame--phone { transform: translateY(-4px); }
.frame--phone { transition: transform .25s; }
.phone__go { font-size: 13px; font-weight: 600; }
.frame--phone {
  width: 100%; max-width: 300px; margin: 0;
  border: 9px solid #101010; border-radius: 40px;
  box-shadow: 0 50px 90px -40px rgba(14,14,14,.5);
}
.frame--phone .frame__stage { aspect-ratio: 430 / 880; border-radius: 30px; }

/* ---------- 4 · Qué te llevas (filas pesadas, patrón services2) ---------- */
.gets { padding: 110px 0 40px; }
.gets .lab { padding: 0 64px 34px; }
.row { border-top: 2px solid var(--divider-services2); }
.row:last-child { border-bottom: 2px solid var(--divider-services2); }
.row__btn {
  width: 100%; text-align: center; padding: 30px 64px;
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(24px, 5.4vw, 72px); line-height: 1.05;
  transition: opacity .2s;
}
.row__btn:hover { opacity: .55; }
.row__panel { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.7,0,.3,1); }
.row__panel p { padding: 0 64px 32px; font-size: 16px; line-height: 1.6; color: var(--mut); max-width: 70ch; margin: 0 auto; text-align: center; }

/* ---------- 5 · Precio ---------- */
/* Bloque de precio CENTRADO y en el rojo de Soshally (el mismo que llena el menú
   y las filas de servicios en soshally.es). Es el único bloque de color de la
   página: por eso funciona como punto final. */
.price { padding: 110px 64px; text-align: center; }
.price .lab { color: var(--mut); }
.price__box {
  max-width: 640px; margin: 30px auto 0; padding: 64px 48px 56px;
  background: var(--rojo-soshally); color: #fff; border-radius: 26px;
}
.price__fig { font-size: clamp(64px, 11vw, 130px); font-weight: 700; letter-spacing: -0.05em; line-height: .9; }
.price__antes { color: rgba(255,255,255,.62); }
.price__claim { font-size: clamp(17px, 2vw, 21px); font-weight: 600; letter-spacing: -0.02em; margin-top: 18px; }
.price__incluye { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.84px; color: rgba(255,255,255,.72); margin: 38px 0 6px; }
/* `width: max-content` + `margin: 0 auto` centra la lista SIN sacarla de la
   línea: con `display:inline-block` el botón de abajo se colocaba a su lado en
   vez de debajo, porque los dos eran elementos de línea. */
.price__list { list-style: none; display: block; width: max-content; max-width: 100%; margin: 0 auto; text-align: left; }
.price__list li { font-size: 16px; line-height: 1.55; padding: 11px 0 11px 30px; position: relative; color: #fff; }
.price__list li::before { content: "✓"; position: absolute; left: 0; top: 11px; opacity: .8; }
.price .btn--paper { margin-top: 34px; }
.price__note { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72); margin: 22px auto 0; max-width: 44ch; }

/* ---------- 6 · Preguntas ---------- */
/* Centrada en escritorio: la columna de preguntas queda a la mitad de la página
   y las cabeceras encima, alineadas con ella. Las respuestas siguen alineadas a
   la izquierda — un párrafo centrado se lee mal. */
.faq { padding: 110px 64px; text-align: center; }
.faq__list { max-width: 900px; margin: 0 auto; text-align: left; }
.q { border-top: 1px solid var(--line); }
.q:last-child { border-bottom: 1px solid var(--line); }
.q__btn { width: 100%; text-align: left; padding: 26px 40px 26px 0; font-size: clamp(17px, 1.9vw, 21px); font-weight: 600; letter-spacing: -0.01em; position: relative; }
.q__btn::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-weight: 400; color: var(--mut); transition: transform .3s; }
.q__btn[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.q__panel { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.7,0,.3,1); }
.q__panel p { padding-bottom: 26px; font-size: 15.5px; line-height: 1.6; color: var(--mut); }

/* ---------- 7 · Cierre + pie que se vuelven negros ----------
   El mismo gesto que cierra soshally.es: el bloque final está en BLANCO y, justo
   cuando la firma gigante "Soshally." va a asomar por abajo, la sección entera
   —cierre y pie— se invierte a negro de una vez. Lo dispara landing.js cuando el
   wordmark se acerca al viewport, no el scroll a ojo.
   La transición es la MISMA curva y duración en todos los elementos: si cada uno
   va a su ritmo se ve como un fallo de carga, no como un gesto. */
.closing, .foot {
  background: var(--bg); color: var(--ink);
  transition: background-color .45s cubic-bezier(.4,0,.2,1), color .45s cubic-bezier(.4,0,.2,1);
}
.closing { padding: 130px 64px 0; }
.closing h2 { font-size: clamp(40px, 7vw, 90px); margin-bottom: 40px; }
.closing .btn--ink,
.foot__c, .foot__c a, .foot__links a, .footwm {
  transition: background-color .45s cubic-bezier(.4,0,.2,1), color .45s cubic-bezier(.4,0,.2,1), border-color .45s cubic-bezier(.4,0,.2,1);
}
.footwm-wrap { margin: 120px -64px 0; padding: 60px 64px 40px; overflow: hidden; }
.footwm {
  font-weight: 700; font-size: clamp(64px, 24vw, 374px); line-height: .75;
  letter-spacing: -0.055em; text-align: center; white-space: nowrap; user-select: none;
}

/* Estado invertido: fondo negro y todo lo de dentro volteado. */
.closing.is-dark, .foot.is-dark { background: var(--ink); color: #fff; }
.closing.is-dark .btn--ink { background: #fff; color: var(--ink); }
.foot.is-dark .foot__c { color: #8a8a8a; }
.foot.is-dark .foot__c a { color: #fff; }
.foot.is-dark .foot__links a { color: #8a8a8a; }
.foot.is-dark .foot__links a:hover { color: var(--red); }
.foot.is-dark .foot__row { border-top-color: rgba(255,255,255,.16); }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  /* En el teléfono el menú desaparece, y con él lo que empujaba el botón hacia
     el otro extremo: se quedaba pegado al logo, como si fueran una cosa. El
     `margin-left:auto` hace ese trabajo y lo manda al borde derecho. */
  .top { padding: 18px 22px; gap: 16px; }
  .topnav { display: none; }
  .top__cta { margin-left: auto; }
  .hero { padding: 120px 22px 70px; }
  .styles, .how, .price, .faq { padding: 70px 22px; }
  .styles__grid, .price__box { grid-template-columns: 1fr; gap: 18px; }
  .scard { padding: 28px; }
  .how__cols { grid-template-columns: 1fr; gap: 40px; }
  .how__step { padding: 26px 0; }
  .phone { position: static; }
  .frame--phone { max-width: 260px; }
  .price__box { padding: 46px 26px 40px; border-radius: 20px; }
  .faq { text-align: left; }
  .closing { padding: 80px 22px 0; }
  .footwm-wrap { margin: 70px -22px 0; padding: 40px 22px 24px; }
}

/* Las tres líneas del titular se mantienen hasta el móvil de verdad. Por debajo
   de 480 px los cortes a mano sobran: la frase ya cae sola en varias líneas y
   forzarlos dejaba renglones de dos palabras. */
@media (max-width: 480px) {
  .hero h1 br { display: none; }
}

/* ---------- Cluster de fotos del hero ---------- */
.hero { position: relative; }
.hero__in { position: relative; z-index: 2; }
/* El grupo entero se separa del borde derecho: `translateX(-15%)` lo mueve un
   15% de su propio ancho hacia dentro, sin tocar la colocación de cada foto. */
.cluster { position: absolute; right: 3vw; top: 50%; transform: translate(-15%, -50%); width: 42vw; max-width: 620px; height: 74vh; pointer-events: none; }
.cluster__ph {
  position: absolute; width: 44%; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px;
  box-shadow: 0 40px 80px -34px rgba(14,14,14,.45);
  animation: float 16s ease-in-out infinite;
}
/* Flotación más marcada: cada foto sube lo suyo y con su propio ritmo, así el
   grupo no se mueve en bloque (que es lo que hacía que casi no se notara). */
.cluster__ph--a { left: 0;   top: 4%;  width: 46%; animation-duration: 11s; --sube: -42px; --gira: -1.1deg; }
.cluster__ph--b { right: 2%; top: 0;   width: 38%; animation-duration: 14s; animation-delay: -4s;  --sube: -30px; --gira: 1.4deg; }
.cluster__ph--c { left: 14%; top: 40%; width: 42%; animation-duration: 9s;  animation-delay: -6s;  --sube: -52px; --gira: 1deg; }
.cluster__ph--d { right: 0;  top: 34%; width: 46%; animation-duration: 12.5s; animation-delay: -2s; --sube: -36px; --gira: -1.3deg; }
.cluster__ph--e { left: 30%; top: 72%; width: 34%; animation-duration: 10s; animation-delay: -7s;  --sube: -46px; --gira: .9deg; }
@keyframes float {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%     { transform: translate3d(0, var(--sube, -34px), 0) rotate(var(--gira, 0deg)); }
}
@media (prefers-reduced-motion: reduce) { .cluster__ph { animation: none; } }

/* ---------- Ventana de navegador con la web REAL dentro ---------- */
.frame { display: block; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg);
  box-shadow: 0 40px 70px -40px rgba(14,14,14,.4); margin-bottom: 26px; }
.frame__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #e2e2e2; display: block; }
.frame__url { flex: 1; margin-left: 8px; font-size: 11.5px; color: var(--mut); background: #f4f4f4; border-radius: 100px; padding: 5px 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame__stage { display: block; position: relative; overflow: hidden; aspect-ratio: 16/10; background: #fafafa; }
.frame__stage iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.frame--wide .frame__stage { aspect-ratio: 16/9; }

/* ---------- El asistente en vivo ---------- */
.live { padding: 110px 64px; }
/* El margen de arriba era NEGATIVO (-26px): compensaba a mano los 46px que traía
   el título antes. Al ajustar el título para que lleve subtítulo debajo, ese
   truco dejó el subtítulo montado sobre el título. Ahora cada uno pone su aire y
   no hay que compensar nada. */
.live__sub { font-size: 16px; line-height: 1.55; color: var(--mut); margin: 0 0 34px; }
/* La ventana no ocupa todo el ancho: a pantalla completa el asistente de dentro
   se ve enorme y el botón se pierde al final de la fila. Centrada y algo más
   pequeña, y el botón debajo, en negro y centrado: es la acción de la sección. */
.live .frame--wide { max-width: 940px; margin-left: auto; margin-right: auto; }
.live__cta { display: block; width: max-content; margin: 4px auto 0; }

@media (max-width: 860px) {
  /* En el teléfono el grupo ya no desaparece: baja debajo del texto y se
     convierte en una tira de tres fotos. Las cinco flotando en 390 px de ancho
     se pisaban unas a otras; tres, en fila y sin superponerse, se leen. */
  .hero { flex-direction: column; align-items: flex-start; padding-bottom: 40px; }
  .cluster {
    position: relative; right: auto; top: auto; transform: none;
    width: 100%; max-width: none; height: auto;
    display: flex; gap: 12px; margin-top: 46px;
  }
  .cluster__ph {
    position: static; width: auto; flex: 1 1 0; min-width: 0;
    border-radius: 12px; box-shadow: 0 22px 42px -24px rgba(14,14,14,.45);
  }
  /* Las dos últimas sobran en fila: con tres el tamaño sigue siendo legible. */
  .cluster__ph--d, .cluster__ph--e { display: none; }
  .live { padding: 70px 22px; }
}

/* ---------- Pie ---------- */
.foot { padding: 40px 64px 54px; }
.foot__row { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--line); padding-top: 26px; }
.foot__c { font-size: 14px; color: var(--mut); }
.foot__c a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.foot__links { display: flex; gap: 24px; }
.foot__links a { font-size: 13px; color: var(--mut); }
.foot__links a:hover { color: var(--ink); }
.foot__mut { margin-top: 22px; font-size: 12.5px; }

/* ---------- Página legal ---------- */
.legal { max-width: 900px; margin: 0 auto; padding: 150px 64px 90px; }
.legal h1 { font-size: clamp(38px, 6vw, 84px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; margin-bottom: 14px; }
.legal__sub { font-size: 16px; color: var(--mut); line-height: 1.55; margin-bottom: 10px; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px 0; margin: 34px 0 50px; position: sticky; top: 68px; background: var(--bg); z-index: 5; }
.legal__nav a { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.84px; color: var(--mut); }
.legal__nav a:hover { color: var(--ink); }
.legal h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin: 56px 0 18px; scroll-margin-top: 130px; }
.legal h3 { font-size: 17px; font-weight: 600; margin: 30px 0 8px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.65; color: var(--soft); }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px 20px; }
.legal li { margin-bottom: 7px; }
.legal .pend { background: #fff7db; border: 1px solid #f0e2a8; border-radius: 12px; padding: 14px 18px; color: #7a5c00; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 860px) {
  /* En el teléfono todo lo que va bajo la firma se centra: el correo, los
     enlaces legales y la línea del final. En dos columnas quedaban desalineados
     y con la firma gigante encima se leía como un desorden. */
  .foot { padding: 30px 22px 40px; text-align: center; }
  .foot__row { justify-content: center; gap: 14px; }
  .foot__links { justify-content: center; flex-wrap: wrap; }
  .legal { padding: 120px 22px 70px; }
  .legal__nav { top: 58px; gap: 16px; }
}

/* Precio de lanzamiento: el anterior tachado, en pequeño y muteado. */
.price__antes { font-size: .42em; color: var(--mut); text-decoration-thickness: .06em; margin-right: .12em; vertical-align: super; }