/* ============================================================
   PLEASEPOINT 2026 — HOME
   Solo lo específico de las once secciones. Todo lo compartido
   (tokens, componentes, cabecera, pie) está en agency.css.
   ============================================================ */

/* ---------- S1 · Hero ---------- */
.hero{
  position:relative;
  padding-top:clamp(140px,16vh,200px);
  padding-bottom:clamp(72px,10vh,120px);
  overflow:hidden;
}
.hero .field{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ max-width:16ch; }
.hero-sub{ margin-top:32px; max-width:52ch; color:var(--ink-2); }

/* Las dos puertas se apoyan en el párrafo en vez de flotar a media
   pantalla: una regla las une al texto y el aire va por debajo. */
.doors{ margin-top:36px; display:flex; flex-wrap:wrap; gap:0 clamp(32px,5vw,80px); }
.door{
  display:flex; align-items:baseline; gap:.5em;
  padding-top:18px; border-top:1px solid var(--line);
  min-width:min(100%,260px);
}

/* La retícula que aprende. Solo transform, una vez y se detiene. */
.mk{ transform-box:fill-box; transform-origin:center; transform:rotate(0deg); }
.field .mk{ transition:transform 1.15s cubic-bezier(.22,.65,.25,1); transition-delay:var(--d,0s); }
.field.go .mk{ transform:rotate(-38deg); }
.mk-origin{ transform:rotate(-38deg); }

/* Sin movimiento: el campo se pinta directamente en su estado final. */
@media (prefers-reduced-motion:reduce){
  .field .mk{ transition:none !important; }
}

/* ---------- S3 · Las dos puertas ----------
   Se separa de la franja con una regla, no con el campo de marcas:
   dos secciones seguidas de prueba y reparto se leen mejor pegadas. */
/* Con dos palabras menos el titular entra en dos líneas en vez de tres:
   el bloque empieza a leerse antes de haber bajado media pantalla. */
.s3-h2{ margin-top:20px; max-width:24ch; }

.doors2{ display:grid; grid-template-columns:1fr 1px 1fr; gap:0; margin-top:56px; }
.doors2 .vr{ background:var(--line); }
/* Columna en flex para que los dos enlaces de salida caigan a la misma
   altura: las listas no miden lo mismo y sin esto uno quedaba colgado
   por encima del otro. */
.doors2 .half{ display:flex; flex-direction:column; padding:0 clamp(24px,4vw,64px); min-width:0; }
.doors2 .half:first-child{ padding-left:0; }
.doors2 .half:last-child{ padding-right:0; }

/* La etiqueta de rol se dibuja como pastilla y a 14 px, no como la
   etiqueta de 12 px del resto del sitio: elegir columna es lo primero
   que se hace en esta sección y las dos tienen que verse de un vistazo,
   antes de entrar en el titular o en el texto. */
.half-label{
  /* La columna es un flex vertical: sin align-self la pastilla se
     estiraba de lado a lado y dejaba de leerse como etiqueta. */
  display:inline-flex; align-items:center; align-self:flex-start;
  padding:9px 17px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--paper-raised);
  font-size:0.875rem; letter-spacing:0.08em; color:var(--ink);
}

/* El claim es el subtítulo del h2 de la sección. A display-s el salto
   entre los dos era tan grande que se leían como dos niveles distintos
   de la página en vez de como titular y bajada. */
.half-claim{ margin-top:18px; max-width:18ch; }

/* Cada punto es un párrafo de dos frases: la línea de trabajo y lo que
   se hace de verdad. Sin negrita, sin partirlo en dos bloques y sin
   regla entre uno y otro: la columna es título, texto y botón, y las
   hairlines dibujaban una tabla donde solo hay prosa. El aire entre
   párrafos es lo único que los separa, y basta. */
.plist{ list-style:none; margin:26px 0 0; padding:0; }
.plist li{
  font-size:1rem; line-height:1.55; color:var(--ink-2);
  max-width:44ch;
}
.plist li + li{ margin-top:18px; }

/* Un solo destino por columna, en botón. Va al fondo para que los dos
   caigan a la misma altura aunque las listas no midan lo mismo. */
.half-cta{ margin:30px 0 0; }
@media (min-width:1001px){ .half-cta{ margin-top:auto; padding-top:30px; } }

/* ---------- S4 · Qué implantamos ----------
   Una ficha por área, del mismo papel que la franja de desarrollo a
   medida que cierra la sección: sin borde, sin cabecera con fondo y sin
   filas numeradas. Antes cada área era un índice completo, y tres
   índices en paralelo pesaban más que todo lo que venían a resumir.

   La ficha entera es el enlace, que es lo que hace fácil elegir área. */

/* La cabecera de sección con salida —.head-row— se fue a agency.css el
   día que la usó también la página de desarrollo a medida. Aquí la usan
   qué implantamos y proyectos, y sigue siendo la misma pieza. */

.impl-board{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:48px; }
@media (min-width:760px){
  .impl-board{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); }
}

.impl-card{
  display:flex; flex-direction:column; gap:14px;
  padding:26px 28px 24px;
  background:var(--paper-sunk); color:var(--ink);
  transition:background .2s ease;
}
.impl-card:hover{ background:var(--sand-soft); }

/* Papel levantado y sin borde, igual que la franja de abajo: el tono es
   lo único que separa las fichas del fondo, y con eso basta. */
.impl-card-h{
  margin:0;
  font-family:var(--font-display); font-weight:var(--display-wght);
  letter-spacing:var(--display-tracking);
  font-size:clamp(1.35rem,1.9vw,1.65rem); line-height:1.14;
}

/* Los tres casos, uno por línea. Son nombres reales —el h2 promete
   casos concretos— y en líneas sueltas se ve dónde acaba cada uno. Sin
   viñeta, sin número y sin regla: la lista no dibuja nada, solo se lee. */
.impl-card-cases{
  flex:1; list-style:none; margin:0; padding:0;
  font-size:.9375rem; line-height:1.45; color:var(--ink-2);
}
.impl-card-cases li + li{ margin-top:7px; }

.impl-card-cta{ font-size:.9375rem; }
.impl-card:hover .impl-card-cta .arw{ transform:translateX(4px); }

/* Sin ruta todavía: la ficha se queda, pero apagada y fuera del orden
   de tabulación, como cualquier enlace pendiente del sitio. */
.impl-card-pending{ cursor:default; }
.impl-card-pending:hover{ background:var(--paper-sunk); }
.impl-card-pending .impl-card-cta{ color:var(--ink-3); }

/* El desarrollo a medida no es de un área ni de otra: cruza por debajo
   de las tres, y por eso ocupa el ancho entero y va en otro papel. */
.impl-across{
  display:grid; grid-template-columns:1fr; gap:14px;
  margin-top:24px; padding:28px 32px;
  background:var(--sand-soft);
}
@media (min-width:900px){
  .impl-across{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(24px,4vw,48px); align-items:center;
  }
}
.impl-across .label{ color:var(--ink-2); }
.impl-across-text{ margin:0; }
.impl-across .fwd{ white-space:nowrap; }

/* La cita es la voz del cliente sobre lo que se acaba de listar, no un
   capítulo aparte: media sección de aire por cada lado la desconectaba
   de lo que viene a respaldar. */
#s4{ padding-bottom:calc(var(--sec) / 3); }
.quote-sec{ padding-top:calc(var(--sec) / 3); padding-bottom:calc(var(--sec) / 2); }

/* Credenciales y método van seguidos: el panel ya corta y no hace falta
   media pantalla de papel entre los dos. */
#s6{ padding-bottom:calc(var(--sec) / 2); }

/* ---------- Costura con los paneles oscuros ----------
   Un panel no es una sección más: ya trae 86 px de aire dentro, su radio
   de 32 px y sus márgenes laterales. Si además se le suman los 128 px de
   cada vecina, entre el último texto y el borde negro quedan 256 px de
   papel vacío.

   Aquí la costura papel↔panel se reparte a medias entre las dos, así que
   el borde del panel cae a los 128 px de rigor —el mismo ritmo que el
   resto de la página— y el aire de dentro lo pone el propio panel. */
#s5, #s9{
  padding-top:calc(var(--sec) / 2);
  padding-bottom:calc(var(--sec) / 2);
}
#s7{ padding-bottom:calc(var(--sec) / 2); }        /* justo antes de un panel */
#s6, #s10{ padding-top:calc(var(--sec) / 2); }     /* justo después de uno   */

/* ---------- S5 · Cómo trabajamos (panel oscuro) ---------- */
/* SIN USO. Las señales de agilidad nunca llegaron a pintarse en la home
   y su clave se ha retirado de services.php al pasar a tres servicios.
   Se deja anotado, no borrado: quien toque la home decide si las quiere
   y las escribe donde toque, o se lleva estas reglas por delante. */
.signals{
  display:flex; flex-wrap:wrap; align-items:baseline;
  margin:40px 0 0; padding-top:20px; border-top:1px solid var(--panel-line);
}
.signals span{
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-panel-2);
}
.signals span:not(:last-child)::after{
  content:"·"; margin:0 clamp(12px,1.4vw,20px); color:var(--on-panel-2); opacity:.45;
}

/* ---------- S6 · Por qué nosotros ---------- */

/* ---------- Testimonio ----------
   Su propia sección y con aire: pegado a la parrilla de casos no se
   leía ni él ni ella. Lo único que queda aquí es esa sección: la figura
   se ha MOVIDO a agency.css, que la comparte con la página de
   formación. La costura de arriba vive con las demás, más arriba. */

/* ---------- S7 · Casos ----------
   La parrilla y la tarjeta se han MOVIDO a agency.css: las usan esta
   sección y /agency/projects, y una clase compartida no puede existir dos
   veces. Aquí no queda nada suyo. */

/* ---------- S9 · La plataforma (panel oscuro) ----------
   Una sola columna: el esquema es lo que sostiene la sección, así que
   ocupa el ancho y el texto va debajo, corto. */
.s9-h2{ margin-top:16px; max-width:24ch; }
.s9-schema{ margin-top:24px; overflow-x:auto; }
.s9-schema svg{ width:100%; min-width:560px; }
.s9-text{ margin-top:16px; max-width:62ch; }
.s9-link{ margin-top:20px; }

/* ---------- S10 · Preguntas ---------- */

/* ---------- S11 · Cierre ----------
   Sin nada propio: el titular lo acota el bloque compartido de
   agency.css, y desde que esa medida es la buena esta hoja no
   tiene que corregirla. */

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  /* Las dos puertas pasan a carrusel: se ven las dos de entrada y se
     elige deslizando. Scroll-snap puro, sin JavaScript, y con la
     segunda asomando para que se sepa que está ahí.

     El carrusel va a sangre —margen negativo y el hueco devuelto como
     relleno— para que la segunda puerta se corte contra el borde de la
     pantalla y no contra una raya invisible a media pantalla.

     El scroll-padding es el que sostiene el margen de la izquierda. Sin
     él, el imán del scroll alinea la puerta con el borde de la caja de
     relleno, no con el relleno: al cargar la página se comía los
     24 px y la primera puerta salía pegada al canto de la pantalla.

     Y la última ancla por su borde derecho, no por el izquierdo. Anclada
     por la izquierda su posición de imán cae más allá del final del
     scroll, así que no se podía llegar a ella: la segunda puerta se
     quedaba a medio deslizar y el imán la devolvía a la primera. */
  .doors2{
    display:flex; grid-template-columns:none;
    gap:20px; margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
    padding:0 var(--pad);
    scroll-padding-left:var(--pad); scroll-padding-right:var(--pad);
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .doors2::-webkit-scrollbar{ display:none; }
  .doors2 .vr{ display:none; }
  .doors2 .half{
    flex:0 0 86%; padding:0; scroll-snap-align:start;
  }
  .doors2 .half:last-child{ scroll-snap-align:end; }
}
@media (max-width:640px){
  .aws{ padding:10px 14px; }
}