/* ==========================================================================
   OH WOW! · Landings de campaña

   Aquí va SOLO lo que la web no tiene y la landing necesita. Todo lo demás
   sale de las hojas del tema, que se cargan antes y no se tocan.

   Reglas de esta hoja:
   - Ni un color, tamaño de letra, aire o radio escrito a mano: salen de las
     variables del tema (ohwow-variables, ohwow-widgets y, dentro de
     .svc-single, las de ohwow-services).
   - Las únicas medidas literales son la línea fina de 1px y el contorno de
     foco de 2px, que son las que fija la casa, y los dos puntos de corte de
     las consultas de pantalla (768px y 1024px), que son los mismos del tema.
   - Sin sombras, sin animaciones y sin efectos al pasar el ratón.
   - Ninguna banda lateral de color. El lima no lleva letra blanca encima.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

/* Texto que solo leen los lectores de pantalla. */
.lp-solo-lectores,
.lp-trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lo que solo tiene sentido con JavaScript (los pasos, el botón de continuar). */
html:not(.js) .lp-solo-js {
  display: none;
}

/* Enlace de salto: fuera de la vista hasta que recibe el foco del teclado. */
.lp-saltar {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-ink-core);
  color: var(--color-white);
  font-size: var(--text-sm);
  transform: translateY(-400%);
}

.lp-saltar:focus {
  transform: none;
}

/* Los saltos internos dejan sitio a la cabecera fija. */
.lp #formulario {
  scroll-margin-top: var(--space-24);
}

/* --------------------------------------------------------------------------
   Foco de teclado: contorno de 2px, como en las fichas de servicio
   -------------------------------------------------------------------------- */

.lp a:focus-visible,
.lp button:focus-visible,
.lp .pillar-card:focus-visible {
  outline: 2px solid var(--color-ink-core);
  outline-offset: 2px;
}

/* Safari del iPhone y del iPad amplía la página al tocar un campo con letra de
   menos de 16 px, y el tema los deja en 15 (ohwow-pages.css pisa el 16 de
   ohwow-widgets.css). Medido el 15 de octubre de 2026 en seis móviles: el
   formulario entero hacía zoom al escribir. */
.lp .form-input,
.lp .form-select,
.lp .form-textarea {
  font-size: var(--text-base);
}

/* En el móvil, las etiquetas del tema («Caso real», a 11 px, y las pastillas de
   «qué hicimos» y de los proyectos, a 10 px) suben a 12 px: por debajo cuesta
   leerlas en un teléfono. En pantalla ancha siguen como en la web. Pedido por
   Alejandro el 15 de octubre de 2026 tras la revisión en seis móviles. */
@media not all and (min-width: 768px) {
  .lp .svc-etiqueta-seccion,
  .lp .pillar-tag,
  .lp .pillar-tag-accent {
    font-size: var(--text-xs);
  }
}

.lp .form-input:focus-visible,
.lp .form-select:focus-visible,
.lp .form-textarea:focus-visible,
.lp input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-ink-core);
  outline-offset: 2px;
}

.lp .footer.green a:focus-visible {
  outline-color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Encaje entre piezas que en la web nunca comparten página
   -------------------------------------------------------------------------- */

/* Las piezas de «Nosotros» traen un aire lateral propio en pantalla ancha y
   las de la ficha de servicio no. Aquí se alinean todas al borde de la ficha. */
@media (min-width: 1024px) {
  .svc-single > .nosotros-match,
  .svc-single > .nosotros-manifiesto {
    padding-left: 0;
    padding-right: 0;
  }

  .svc-single > .profile-services .profile-services-inner {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* 1. Cabecera sin menú: donde la web lleva enlaces de texto va un botón, que es
   más alto. Se le quita ese exceso para que la barra mida lo mismo que en la web. */
.lp .nav-links .btn-primary {
  margin-top: calc(var(--space-1) * -1);
  margin-bottom: calc(var(--space-1) * -1);
}

/* 7. Con tres pruebas, la rejilla de dos columnas deja un hueco: la última ocupa la fila. */
.services-cards-grid > .service-card-dark:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Contraste: textos de las piezas de la web que en las landings no llegaban
   a 4,5 a 1. Solo se les cambia el color, por uno del propio tema. Tamaño,
   peso y todo lo demás siguen siendo los de la web.
   -------------------------------------------------------------------------- */

/* 11. Frase de apoyo del formulario: gris de texto del tema, sobre la tarjeta blanca. */
.lp .contact-form-header p {
  color: var(--color-text-muted);
}

/* 12. Copyright del pie: sobre el lima ningún gris del tema llega, así que va en
   tinta, como las pastillas que tiene encima. Cuando el pie se vuelve oscuro
   manda la regla de la web, que lo pone en blanco. */
.lp .footer-copyright p {
  color: var(--color-ink-core);
}

/* 7. Tarjetas oscuras de «prueba» con el ratón encima: la web aclara el fondo de
   la tarjeta y la descripción y el número bajan de 4,5 a 1. El efecto de la web
   se conserva; se aclaran los dos textos mientras dura. */
.lp .service-card-dark:hover .service-card-desc {
  color: var(--color-white);
}

.lp .service-card-dark:hover .service-card-number {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   2. Apertura: el botón y la línea de la casa dentro de la cabecera de ficha
   -------------------------------------------------------------------------- */

.lp-hero-accion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.lp-hero-casa {
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Subtítulo dentro de una sección (las dos listas, lo que pasa después)
   -------------------------------------------------------------------------- */

.lp-subtitulo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-ink-core);
}

/* --------------------------------------------------------------------------
   3. Para quién es y para quién no, en compacto

   Es la lista de coincidencias de la web, con sus clases, sus iconos y sus
   colores. Lo que cambia aquí es la rejilla y el aire: el título va arriba, a
   todo el ancho, y las dos listas van lado a lado (las que encajan a la
   izquierda y las que no a la derecha). En móvil se apilan. La alternativa de
   cada «no» sigue en su fila, a continuación del texto.

   El alto de línea sale de la escala de aire del tema: 20px para la letra de
   14px y 24px para la de 16px.
   -------------------------------------------------------------------------- */

.svc-single > .lp-match {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.lp-match .nosotros-match-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.lp-match .nosotros-match-left {
  position: static;
}

.lp-match .nosotros-match-left h2 {
  margin-bottom: 0;
}

.lp-match-listas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  min-width: 0;
}

.lp-match-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.lp-match-lista .nosotros-match-item {
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.lp-match-lista .nosotros-match-text {
  line-height: var(--space-5);
}

/* El texto y su alternativa van seguidos, en la misma línea de lectura. El
   texto conserva el tamaño que tiene en la web, también en el móvil. */
.lp-match-lista .nosotros-match-text strong {
  display: inline;
  margin-bottom: 0;
  font-size: var(--text-base);
  line-height: var(--space-6);
}

@media (min-width: 768px) {
  .lp-match-listas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-12);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .lp-match-lista .nosotros-match-item {
    padding: var(--space-3) 0;
  }
}

/* --------------------------------------------------------------------------
   Botón que baja al formulario al final de una sección

   El botón es el de la web (el negro de la cabecera, o el lima de la apertura
   si la sección es oscura). Aquí solo se le da el aire de arriba.
   -------------------------------------------------------------------------- */

.lp-boton-seccion {
  display: flex;
  margin-top: var(--space-10);
}

/* --------------------------------------------------------------------------
   6. Qué nos diferencia: las tarjetas numeradas de «Nosotros»
   -------------------------------------------------------------------------- */

/* Encaje al borde de la ficha, como el resto de piezas de «Nosotros». */
@media (min-width: 1024px) {
  .svc-single > .nosotros-diferencias {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Contraste. Descripción de las tarjetas: gris de texto del tema sobre crema.
   Medido el 5 de octubre de 2026: de 3,53 a 5,05 a 1 (4,70 con el ratón encima). */
.lp .pillar-card-desc {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   7. Proyectos: la pieza de la portada de la web, sin tocar

   En la portada el título de la tarjeta abierta lleva su tamaño escrito en la
   propia etiqueta. Aquí va en la hoja, con el mismo valor (2,25rem).
   -------------------------------------------------------------------------- */

.lp .pillar-expanded .pillar-title {
  font-size: var(--text-4xl);
}

/* En la portada la pieza trae su propio aire lateral. Dentro de la ficha ya lo
   pone el contenedor, y sumados la dejaban más adentro que el resto (48px
   frente a 24px a 390 de ancho). Aquí se alinea al borde de la ficha. */
.svc-single > .pillars {
  padding-left: 0;
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   7. Testimonios: la web no tiene pieza de cita

   Tarjeta blanca sobre el crema de la página, sin borde y sin sombra. La cita
   va en la tipografía de titulares y la firma debajo, en dos líneas.
   -------------------------------------------------------------------------- */

.lp-testimonios {
  padding: var(--space-16) 0;
}

.lp-testimonios-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-24) * 3)), 1fr));
  gap: var(--space-4);
}

.lp-testimonio {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  min-width: 0;
  margin: 0;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-white);
}

.lp-testimonio-cita {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--space-8);
  color: var(--color-ink-core);
}

.lp-testimonio-firma {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.lp-testimonio-nombre {
  font-weight: 600;
  color: var(--color-ink-core);
}

.lp-testimonio-cargo {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   7. Caso real: un proyecto, con la imagen y la ficha lado a lado

   Sigue la ficha de la página de proyecto nueva de la web (título, lista de
   datos con «Qué hicimos» en etiquetas lima, presentación). La imagen se ve
   entera y a su proporción: ni se recorta ni se estira. En móvil se apilan.
   -------------------------------------------------------------------------- */

.lp-caso {
  padding: var(--space-16) 0;
}

.lp-caso-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .lp-caso-rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-12);
    row-gap: 0;
  }

  /* La imagen apaisada (la de los tres dispositivos) no cabe en 5 columnas de una tableta: va encima */
  .lp-caso--apaisado .lp-caso-rejilla {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .lp-caso--apaisado .lp-caso-rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-12);
    row-gap: 0;
  }
}

.lp-caso-imagen {
  margin: 0;
  min-width: 0;
}

.lp-caso-imagen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.lp-caso-texto {
  min-width: 0;
}

.lp-caso-ficha {
  display: grid;
  row-gap: var(--space-3);
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm);
}

.lp-caso-ficha dt {
  color: var(--color-text-muted);
}

.lp-caso-ficha dd {
  margin: 0;
  color: var(--color-ink-core);
}

.lp-caso-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) 0 0;
  list-style: none;
}

.lp-caso-resumen {
  margin: var(--space-6) 0 0;
  color: var(--color-ink-core);
}

/* --------------------------------------------------------------------------
   8. El manifiesto a lo ancho de su caja, y el aire con lo que lleva debajo
   -------------------------------------------------------------------------- */

/* El tema lo corta a 56rem y la caja mide más: quedaba media caja vacía a la
   derecha. Alejandro lo pidió a ancho completo el 14 de octubre de 2026. */
.lp .nosotros-manifiesto-text {
  max-width: none;
}

.lp-promesas {
  margin-top: var(--space-12);
}

.lp-atiende {
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   11. Formulario: reparto, pasos, casilla, errores
   -------------------------------------------------------------------------- */

.lp-form-reparto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .lp-form-reparto {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

.lp-form {
  min-width: 0;
}

.lp-paso {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Con JavaScript se ve un paso cada vez. Sin él, el formulario sale entero. */
.js .lp-form[data-paso-activo="1"] .lp-paso[data-paso="2"],
.js .lp-form[data-paso-activo="2"] .lp-paso[data-paso="1"] {
  display: none;
}

.lp-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.lp-pasos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.lp-pasos-texto {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink-core);
}

.lp-pasos-tramos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.lp-pasos-tramo {
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.lp-pasos-tramo.es-activo {
  background: var(--color-ink-core);
}

.lp-casilla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: start;
  font-size: var(--text-sm);
  color: var(--color-ink-core);
}

.lp-casilla input {
  width: var(--space-5);
  height: var(--space-5);
  accent-color: var(--color-ink-core);
}

.lp-casilla a {
  text-decoration: underline;
}

.lp-casilla .lp-error {
  grid-column: 1 / -1;
}

/* El error se lee por el texto y por el peso de la letra, no solo por el color. */
.lp-error {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-core);
}

.lp .form-input[aria-invalid="true"],
.lp .form-select[aria-invalid="true"],
.lp .form-textarea[aria-invalid="true"] {
  border-color: var(--color-signal);
}

.lp-nota {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: start;
}

.lp-estado {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-core);
}

.lp-estado:empty {
  display: none;
}

.lp-volver {
  font-size: var(--text-sm);
  color: var(--color-ink-core);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   11. Lo que pasa después, al lado del formulario
   -------------------------------------------------------------------------- */

.lp-despues {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.lp-despues .nosotros-match-arrow {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-core);
}

.lp-dato {
  font-size: var(--text-sm);
  color: var(--color-ink-core);
}

.lp-dato-et {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Página de gracias
   -------------------------------------------------------------------------- */

.lp-gracias .contact-form-section {
  padding-top: var(--space-20);
}

.lp-agenda-marco {
  display: block;
  width: 100%;
  min-height: calc(var(--space-24) * 7);
  border: 0;
}