/* iwp-home.css — lo propio de la portada, encima del sistema.
   Orden de carga: iwp-tokens.css → iwp-bundle.css → este.

   Dos cosas viven aquí y NO en el sistema:
   1. El CSS de página que la propia portada del sistema de diseño lleva en su
      <style> (escena del hero, rejilla de puntos, pies de sección).
   2. El menú de móvil. El Header del sistema no tiene estado móvil: .iwp-nav
      es un flex sin ninguna media query, así que a 375px el logotipo, los
      cuatro enlaces y los dos botones se pisan. Esto lo resuelve con un cajón,
      reutilizando los tokens del sistema. Es un hueco del sistema, no un
      capricho de esta página. */

/* ---------- Página (del <style> de PageHome) ---------- */

body { margin: 0; background: var(--surface); font-family: var(--font-sans); }

/* El <style> de PageHome deja el hero sin padding inferior (`96px 0 0`), así
   que la tira de confianza quedaba pegada al borde de la escena negra y
   parecía cortada. Se le devuelve aire abajo. */
.hero { padding: 96px 0 var(--space-16); overflow: hidden; }
.hero__stage { padding-bottom: 120px; }

.points { display: grid; gap: 28px; margin-top: 40px; }
.point h3 { margin: 0 0 6px; color: inherit; }
.point p { margin: 0; color: var(--on-ink-muted); }

.themes-note { margin: 40px auto 0; max-width: 46ch; text-align: center; color: var(--ink-subtle); font-size: 15px; }
.plans-foot { display: flex; justify-content: center; margin-top: 32px; }
.panel-light { max-width: 460px; }

@media (max-width: 900px) {
  .hero { padding-top: 64px; }
  .hero__stage { padding-bottom: 72px; }
}

/* ---------- Titulares ----------
   Orden del usuario (2026-09-22): "los titulares deben ser iguales de tamaño y
   grosor". La portada del sistema mezclaba dos escalas —display-2xl a 80px en
   cuatro escenas y display-xl a 56px en otras cuatro— y las dos a peso 600.
   Aquí TODOS los h2 comparten un único tamaño y un único grosor, el que ya usa
   la web en sus secciones: 800 y clamp(29px, 4.6vw, 46px).

   Estas reglas valen (0,1,1) y ganan a las clases display-* del marcado, que
   valen (0,1,0). El marcado se deja como está para que siga siendo el del
   sistema de diseño. */

.iwp-scene h2 {
  font-size: clamp(29px, 4.6vw, 46px);
  line-height: 1.07;
  font-weight: 800;
  letter-spacing: -.04em;
  text-wrap: balance;
}

/* El titular del hero es el de la web viva, y conserva su escala: es el único
   de la página que puede ser mayor que los demás. */
.iwp-scene h1 {
  font-size: clamp(34px, 6.4vw, 66px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.045em;
  max-width: 1000px;
  margin-inline: auto;
  text-wrap: balance;
}

/* La web pinta en color de marca el trozo destacado del titular. Sobre la
   escena nocturna no vale --c-primary-ink (#4c56c0 da 2,81:1 sobre el negro):
   va --c-primary-soft, que la web define justo para fondo oscuro y da 8,76:1. */
.iwp-scene h1 em {
  font-style: normal;
  color: #4c56c0;
}
.iwp-scene--night h1 em { color: #aab6f2; }

/* ---------- Acción primaria con el degradado de la marca ----------
   El sistema rellena el botón primario con un color plano (--action). La web
   lo tiene con el degradado de la marca y eso se conserva.

   El arranque es --c-primary-ink #4c56c0, no el #667eea de la web: con #667eea
   el texto blanco del botón da 3,66:1 y no llega al 4,5:1 de AA. Son los dos
   colores de la marca igualmente, con la variante accesible del primero.
   Medido: 6,18:1 al arranque y 6,37:1 al final. */

.iwp-btn--primary {
  background: linear-gradient(135deg, #4c56c0 0%, #764ba2 100%);
  color: #ffffff;
  border-color: transparent;
}

/* Sobre la escena nocturna el botón sigue siendo blanco, como manda el
   sistema. Va después del degradado para no perder esa regla. */
.iwp-header--night .iwp-btn--primary {
  background: #ffffff;
  color: #1d1d1f;
}

/* ---------- Antes y después con capturas reales ----------
   Orden del usuario: una ficha real y una captura real de cómo queda con el
   plugin, en vez del esquema gris y la tarjeta de ejemplo del sistema.
   Las dos imágenes ya estaban en la web: la de "antes" lleva difuminados el
   nombre y el teléfono de la inmobiliaria, así que la comparación no señala a
   ninguna empresa. */

/* Las dos capturas no miden igual (1200x751 y 1200x890). Se les fija la misma
   proporción y se recortan por abajo, que es donde sobra: así las dos columnas
   tienen el mismo alto y los pies quedan a la par. Una comparación con una
   columna más alta que la otra parece trucada. */

.iwp-ba__frame--shot {
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 1200 / 751;
}

.iwp-ba__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: calc(var(--radius-lg) - 1px);
}

/* ---------- Muro de logotipos de clientes ----------
   La sección "Inmobiliarias que ya trabajan con InmovillaToWordPress" faltaba
   en la portada del sistema. Vuelve con los cuatro logotipos reales y la misma
   caja óptica que tenía en la web: cada marca pide una altura distinta, un
   cuadrado y un lockup no se miden igual que un logotipo apaisado. */

.logo-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}

.logo-wall li {
  --logo-h: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, border-color .22s ease;
}

.logo-wall li:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.logo-wall li.is-square { --logo-h: 74px; }
.logo-wall li.is-stacked { --logo-h: 66px; }

.logo-wall img {
  max-height: var(--logo-h);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 600px) {
  .logo-wall { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
  .logo-wall li { min-height: 104px; padding: 18px 20px; --logo-h: 44px; }
  .logo-wall li.is-square { --logo-h: 58px; }
  .logo-wall li.is-stacked { --logo-h: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-wall li:hover { transform: none; }
}

/* ---------- Rejilla de funcionalidades sobre escena nocturna ----------
   Orden del usuario: "todo lo que necesitas en un solo plugin... pero más
   vistoso". La rejilla era seis tarjetas blancas sobre gris. Pasa a la escena
   oscura, que es además donde la web viva ya pone sus funcionalidades.
   Contrastes sobre #1d1d1f: título 15,5:1, texto 6,5:1, icono 8,8:1. */

.iwp-scene--night .iwp-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}

.iwp-scene--night .iwp-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
}

.iwp-scene--night .iwp-card__title { color: var(--on-ink); }
.iwp-scene--night .iwp-card__text { color: var(--on-ink-muted); }

/* El icono del sistema mide 40px y en una tarjeta de 32px de padding queda
   perdido. Sobre la escena oscura pesa aún menos, así que aquí crece y se le
   pone un aro: es lo que da presencia a la rejilla. */

.iwp-scene--night .iwp-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: rgba(170, 182, 242, .14);
  box-shadow: inset 0 0 0 1px rgba(170, 182, 242, .25);
  color: #aab6f2;
}

.iwp-scene--night .iwp-card__icon svg { width: 26px; height: 26px; }

.iwp-scene--night .iwp-card__icon--mint {
  background: rgba(52, 211, 153, .14);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .28);
  color: var(--mint-on-night);
}

/* Filo superior de marca en cada tarjeta: un degradado de 1px que se enciende
   al pasar por encima. Da vistosidad sin meter color de relleno. */

.iwp-scene--night .iwp-card { position: relative; overflow: hidden; }

.iwp-scene--night .iwp-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #aab6f2, transparent);
  opacity: .35;
  transition: opacity .22s ease;
}

.iwp-scene--night .iwp-card:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .iwp-scene--night .iwp-card:hover { transform: none; }
}

/* ---------- Menú de móvil ---------- */

.iwp-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.iwp-header--night .iwp-burger { color: var(--on-ink); border-color: rgba(255, 255, 255, .28); }
.iwp-burger svg { width: 20px; height: 20px; }
.iwp-burger__close { display: none; }
.iwp-burger[aria-expanded="true"] .iwp-burger__open { display: none; }
.iwp-burger[aria-expanded="true"] .iwp-burger__close { display: block; }

.iwp-drawer {
  display: none;
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.iwp-header--night .iwp-drawer { background: var(--surface-night); border-top-color: rgba(255, 255, 255, .1); }
.iwp-drawer[hidden] { display: none; }

.iwp-drawer__list { display: grid; gap: var(--space-1); margin: 0 0 var(--space-6); padding: 0; list-style: none; }

.iwp-drawer__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.iwp-header--night .iwp-drawer__link { color: var(--on-ink); }
.iwp-drawer__link:hover { background: var(--surface-sunken); }
.iwp-header--night .iwp-drawer__link:hover { background: rgba(255, 255, 255, .1); }
.iwp-drawer__sub { font-size: 15px; color: var(--ink-muted); padding-left: var(--space-8); }
.iwp-header--night .iwp-drawer__sub { color: var(--on-ink-muted); }
.iwp-drawer__actions { display: grid; gap: var(--space-3); }

@media (max-width: 980px) {
  .iwp-nav,
  .iwp-header__actions { display: none; }

  .iwp-burger { display: inline-flex; }

  .iwp-drawer:not([hidden]) { display: block; }

  /* El mega-menú de escritorio no se abre nunca en móvil: su contenido
     vive dentro del cajón. */
  .iwp-mega { display: none !important; }
}

/* ---------- Arreglo del pie ----------
   El Footer del sistema pide los datos de contacto "enteros y enlazados", pero
   hola@inmovillatowordpress.com mide 30 caracteres y no cabe en una columna
   estrecha: sacaba la página 59px a 375 y 16px a 980. Se parte la palabra en
   vez de acortar el correo, que es lo que el sistema pide conservar.
   Es un hueco del sistema, no de esta página. */

.iwp-footer a { overflow-wrap: anywhere; }

/* El botón flotante de WhatsApp que traía la portada anterior se retiró el
   2026-09-22 por orden del usuario: tapaba el botón «Consultar» del último
   plan y la línea legal del pie. WhatsApp sigue estando en la cabecera, en el
   hero, en el mega-menú, en el cajón de móvil, en la banda de cierre y en el
   pie, que es lo que el sistema de diseño prevé. */

/* Logo original (ITW_Logo.webp) en la cabecera. Orden del usuario 2026-09-22:
   «el logo debe ser el original de antes». Va sobre la cabecera blanca: en la
   nocturna el marino y el «to» negro no se leían. */
.iwp-wordmark--logo img { display: block; height: 42px; width: auto; }
/* Logo de la cabecera más grande (orden del usuario 23-sep); el del pie se queda en 42px. */
.iwp-header .iwp-wordmark--logo img { height: 54px; }
@media (max-width: 640px) { .iwp-header .iwp-wordmark--logo img { height: 44px; } }
/* Con AutoRedes en la barra (23-sep) no cabe entre 981 y 1100 px: se aprietan
   los enlaces y el logo en ese tramo; por debajo manda el cajón. */
.iwp-nav__link { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1100px) {
  .iwp-header .iwp-wordmark--logo img { height: 40px; }
  .iwp-nav__link { padding-left: 8px; padding-right: 8px; }
  .iwp-header__actions { gap: 8px; }
}

/* Revisión responsive 2026-09-22.
   Tableta: con 4 clientes, auto-fit a 228px dejaba 3 + 1 huérfano a 768px.
   Móvil: el hueco negro bajo el portátil del hero medía 72px más la tira. */
@media (min-width: 601px) and (max-width: 980px) {
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hero__stage { padding-bottom: 40px; }
}

/* Hero en claro (orden del usuario 2026-09-22: «no me gusta el negro del
   primer banner, blanco/gris como el resto de la web»). El sistema pinta la
   tira de confianza solo para fondo negro (texto y borde blancos sin escena):
   fuera de la escena nocturna se le dan los tonos de texto sobre claro.
   Contrastes sobre blanco: --ink 16,8:1, --ink-muted 8,1:1, #4c56c0 6,3:1. */
.iwp-scene:not(.iwp-scene--night) .iwp-trust { border-top-color: var(--line); }
.iwp-scene:not(.iwp-scene--night) .iwp-trust__item { color: var(--ink-muted); }
.iwp-scene:not(.iwp-scene--night) .iwp-trust__item strong { color: var(--ink); }

/* Lo esencial bajo el hero, con icono (orden del usuario 2026-09-22: «añade
   iconos y ponlo de otra forma»). Sustituye a la tira de texto .iwp-trust.
   Iconos del set del sistema (IWP.icon: lock, fields, globe), como en las
   tarjetas de funcionalidades. Icono #4c56c0 sobre #eef0fc: 5,6:1. */
.itw-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}
.itw-facts__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.itw-facts__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eef0fc;
  color: #4c56c0;
}
.itw-facts__icon svg { width: 24px; height: 24px; }
.itw-facts__title { display: block; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); }
.itw-facts__text { display: block; margin-top: 2px; font-size: 14px; line-height: 21px; color: var(--ink-muted); }

@media (max-width: 900px) {
  .itw-facts { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; margin-top: var(--space-10); }
}

/* Móvil (23-sep): botón de WhatsApp junto al menú y maqueta del panel legible. */
.iwp-header__wa { display: none; }
@media (max-width: 980px) {
  .iwp-header__wa {
    display: inline-flex; align-items: center; gap: 6px;
    height: 44px; margin-left: auto; padding: 0 14px;
    border-radius: var(--radius-sm); background: #25d366; color: #ffffff;
    font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .iwp-header__wa:hover { background: #1ebe5b; color: #ffffff; }
  .iwp-header__wa svg { width: 18px; height: 18px; }
  .iwp-header__wa + .iwp-burger { margin-left: calc(8px - var(--space-8)); }
}
/* Logo más grande en móvil (orden del usuario 23-sep, noche): crece con el ancho
   hasta 50px. El hueco de 32px de la barra baja a 12px; el logo ocupa el resto
   que dejan WhatsApp + menú (ancho - 233px, con 8px de margen), a su proporción
   146:42. Con ≤374px WhatsApp va solo con icono y queda más sitio. */
@media (max-width: 640px) {
  .iwp-header__bar { gap: 12px; }
  .iwp-header .iwp-wordmark--logo img {
    height: clamp(40px, calc((100vw - 233px) * .2877), 50px);
    max-width: 100%; object-fit: contain; object-position: left center;
  }
  .iwp-header__wa { padding: 0 12px; font-size: 13px; }
  .iwp-header__wa + .iwp-burger { margin-left: -4px; }
}
@media (max-width: 374px) {
  .iwp-header__wa { width: 44px; padding: 0; justify-content: center; }
  .iwp-header__wa span { display: none; }
  .iwp-header .iwp-wordmark--logo img { height: clamp(40px, calc((100vw - 164px) * .2877), 50px); }
}
@media (max-width: 600px) {
  .iwp-ui { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .iwp-ui__side { display: none; }
  .iwp-ui__chrome { padding: 8px 10px; gap: 6px; }
  .iwp-ui__dot { width: 7px; height: 7px; }
  .iwp-ui__url { font-size: 10px; padding: 3px 8px; }
  .iwp-ui__main { padding: 14px 12px; }
  .iwp-ui__h { font-size: 14px; }
  .iwp-ui__sub { font-size: 11px; margin-bottom: 12px; }
  .iwp-ui__cards { gap: 6px; margin-bottom: 12px; }
  .iwp-ui__card { padding: 8px; }
  .iwp-ui__k { font-size: 8px; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .iwp-ui__v { font-size: 16px; }
  .iwp-ui__row { grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 8px; padding: 8px 10px; font-size: 11px; }
  .iwp-ui__t { font-size: 10px; }
  .iwp-ui__ok { font-size: 9px; letter-spacing: .3px; }
  .iwp-mac__screen { border-width: 8px; border-bottom-width: 12px; border-radius: 14px; }
  .iwp-mac__base { width: 104%; margin-left: -2%; height: 9px; }
}