/* =====================================================================
   PXI Open · pxiecuador.com
   Copia fiel de la web que estaba en el editor de Hostinger (oct. 2026).
   Medidas tomadas de la original a 1280 px de ancho.
   ===================================================================== */

:root {
  --verde: #74baa6;          /* botones y título de sectores */
  --verde-claro: #d7ece6;    /* fondo de "¿Por qué suscribirse?" */
  --gris-fondo: #ececec;     /* hero, dimensiones y pie */
  --texto: #1d1e20;
  --oscuro: rgba(29, 30, 32, .84);
  --azul: #176be0;           /* botón Enviar */
  --ancho: 1224px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--texto);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h5, h6 { margin: 0; color: var(--texto); }
h2 { font-size: 40px; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 16px; }

.contenedor { width: 100%; max-width: calc(var(--ancho) + 56px); margin: 0 auto; padding: 0 28px; }
.centrado { text-align: center; }
.texto-pequeno { font-size: 14px; line-height: 1.6; }
.parrafo-centro { max-width: 760px; margin-left: auto; margin-right: auto; }
.parrafo-ancho { max-width: 900px; font-size: 16px; }

/* ------------------------------------------------------------ botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 40px;
  border-radius: 999px; border: 0;
  font: 400 16px/1.2 "Open Sans", Arial, sans-serif;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: filter .2s, background-color .2s, color .2s;
}
.boton-verde { background: var(--verde); color: #fff; }
.boton-verde:hover { filter: brightness(.92); }
.boton-grande { min-height: 64px; min-width: 353px; font-size: 17px; font-weight: 700; }
.boton-ancho { min-width: 245px; font-weight: 700; }
.boton-borde { background: transparent; color: #fff; border: 2px solid #fff; font-weight: 700; min-width: 210px; }
.boton-borde:hover { background: #fff; color: var(--texto); }
.boton-azul { background: var(--azul); color: #fff; min-width: 130px; min-height: 50px; }
.boton-azul:hover { filter: brightness(1.1); }
.boton-azul:disabled { opacity: .6; cursor: wait; }

/* ------------------------------------------------------------ cabecera */
.cabecera { position: relative; z-index: 20; background: #fff; }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; height: 100px; padding-left: 44px; }
.cabecera-logo img { width: 123px; }
.menu { display: flex; align-items: center; gap: 34px; }
.menu > a, .menu-desplegable-titulo { font-size: 16px; color: #1a1a1a; text-decoration: none; }
.menu > a:hover, .menu-desplegable-titulo:hover { color: var(--verde); }
.menu .menu-llamar { color: #fff; min-width: 161px; margin-left: 10px; }
.menu .menu-llamar:hover { color: #fff; }
.menu-desplegable { position: relative; }
.flecha { font-size: 12px; margin-left: 6px; }
.menu-desplegable-lista {
  position: absolute; top: 100%; left: -16px; padding-top: 10px;
  opacity: 0; visibility: hidden; transition: opacity .15s;
}
.menu-desplegable-lista a {
  display: block; white-space: nowrap; padding: 12px 18px;
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  font-size: 15px; text-decoration: none; color: #1a1a1a;
}
.menu-desplegable-lista a:hover { color: var(--verde); }
.menu-desplegable:hover .menu-desplegable-lista,
.menu-desplegable:focus-within .menu-desplegable-lista { opacity: 1; visibility: visible; }
.menu-boton { display: none; }

/* ------------------------------------------------------------ hero */
.hero { background: var(--gris-fondo); }
.hero-fila { position: relative; display: flex; min-height: 663px; align-items: center; }
.hero-texto { width: 560px; padding: 40px 0; }
.hero h1 { font-size: 46px; font-weight: 800; line-height: 1.3; margin-bottom: 36px; }
.hero p { font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
.hero .boton { margin-top: 26px; }
.hero-revistas { position: absolute; right: 0; top: 64px; width: 593px; height: 620px; }
.hero-portada { position: absolute; right: 0; top: 0; width: 297px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.hero-pagina { position: absolute; left: 0; top: 94px; width: 340px; box-shadow: 0 8px 24px rgba(0,0,0,.22); border: 4px solid #fff; }
.hero-movil { display: none; }

/* ------------------------------------------------------------ ranking */
.ranking { padding: 120px 0 90px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.etiqueta { font-size: 32px; font-weight: 400; line-height: 1.3; margin-bottom: 4px; }
.ranking h2 { margin-bottom: 26px; }
.ranking .boton { margin-top: 30px; min-width: 227px; }
.ranking-laptop { width: 612px; justify-self: end; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 70px; }
.cifras strong { display: block; font-size: 32px; font-weight: 800; line-height: 1.3; }
.cifras span { display: block; font-size: 24px; font-weight: 400; line-height: 1.3; }

/* ------------------------------------------------------------ por qué suscribirse */
.por-que { background: var(--verde-claro); padding: 100px 0 110px; }
.tarjetas { display: grid; grid-template-columns: repeat(3, 284px); justify-content: center; column-gap: 96px; row-gap: 26px; margin: 66px 0 64px; }
.tarjeta {
  background: #fff; border-radius: 16px; min-height: 222px; padding: 22px 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tarjeta img { width: 80px; height: 80px; margin-bottom: 14px; }
.tarjeta strong { font-size: 18px; line-height: 1.5; }
.tarjeta p { font-size: 16px; margin: 0; line-height: 1.5; }

/* ------------------------------------------------------------ metodología */
.metodologia { padding: 46px 0 0; }
.titulo-verde { color: var(--verde); }
.sectores { width: 798px; margin: 50px auto 54px; }
.como-medimos { grid-template-columns: 503px 1fr; gap: 110px; align-items: center; }
.persona { width: 503px; }
.como-medimos h2 { margin-bottom: 30px; }
.lista-medicion { list-style: none; padding: 0; margin: 0 0 54px; max-width: 470px; }
.lista-medicion li { margin-bottom: 22px; }
.como-medimos .boton { min-width: 227px; font-weight: 700; }

/* ------------------------------------------------------------ dimensiones */
.dimensiones { background: var(--gris-fondo); padding: 70px 0 80px; }
.dimensiones-fila { display: grid; grid-template-columns: 480px 1fr; gap: 50px; max-width: 1000px; margin: 60px auto 64px; align-items: center; }
.citas { display: grid; grid-template-rows: repeat(3, 1fr); height: 403px; font-size: 14px; }
.citas p { align-self: center; margin: 0; max-width: 400px; }
.cita-1 { padding-left: 0; }
.cita-2 { padding-left: 70px; }
.cita-3 { padding-left: 130px; }
.dimensiones .boton { min-width: 350px; }

/* ------------------------------------------------------------ entregables */
.entregables { padding: 48px 0 100px; }
.subtitulo { font-size: 24px; font-weight: 400; margin: 34px 0 40px; }
.incluye { grid-template-columns: 1fr 1fr; max-width: 1000px; margin: 0 auto; align-items: start; }
.lista-puntos { margin: 0 0 32px; padding-left: 22px; font-size: 16px; line-height: 1.5; max-width: 420px; }
.nota-nps { font-size: 12px; line-height: 1.3; max-width: 432px; }
.pxi-dimensiones { display: flex; flex-direction: column; align-items: center; }
.pxi-dimensiones-logo { width: 261px; }
.pxi-dimensiones-flechas { width: 365px; margin-top: 4px; }
.pxi-dimensiones-nombres { display: flex; justify-content: space-between; width: 420px; margin-top: 14px; font-size: 16px; }
.personalizacion { margin: 150px 0 40px; }
.matriz-cuadrantes { width: 480px; margin: 34px auto 40px; }
.matriz-areas { width: 795px; margin: 30px auto 50px; }
.entregables .boton { margin-top: 30px; min-width: 210px; }

/* ------------------------------------------------------------ fondos oscuros con foto */
.fondo-oscuro { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.fondo-oscuro h2 { color: #fff; }
.fondo-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fondo-oscuro::before { content: ""; position: absolute; inset: 0; background: var(--oscuro); z-index: -1; }

/* ------------------------------------------------------------ media partner */
.media-partner { padding: 60px 0 110px; }
.logo-vistazo { width: 351px; margin: 0 auto 50px; }
.media-partner h2 { margin-bottom: 40px; }
.revistas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 60px 0 70px; }
.revista-par { position: relative; height: 500px; }
.revista-portada { position: absolute; left: 0; top: 0; width: 236px; }
.revista-pagina { position: absolute; left: 103px; top: 147px; width: 268px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }

/* ------------------------------------------------------------ contacto */
.contacto { padding: 110px 0 120px; }
.contacto h2 { margin-bottom: 30px; }
.formulario, .formulario-gracias {
  max-width: 604px; margin: 30px auto 0; padding: 32px 32px 40px;
  background: rgba(255, 255, 255, .32); border-radius: 16px;
  backdrop-filter: blur(2px);
}
.formulario label { display: block; font-size: 14px; line-height: 1.7; color: #fff; }
.formulario input, .formulario textarea {
  width: 100%; margin: 0 0 18px; padding: 12px 16px;
  border: 1px solid transparent; border-radius: 12px; background: #ececec;
  font: 400 14px/1.5 "Open Sans", Arial, sans-serif; color: var(--texto);
}
.formulario textarea { min-height: 88px; resize: vertical; }
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
.formulario input.con-error { border-color: #e5484d; }
.formulario .boton { display: flex; margin: 10px auto 0; }
.formulario-aviso { background: #fff; color: #b42318; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.formulario-aviso a { color: #b42318; }
.formulario-gracias { text-align: center; }
.formulario-gracias p { margin: 0; font-size: 28px; font-weight: 700; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ pie */
.pie { background: var(--gris-fondo); }
.pie-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 217px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000; }
.pie-fila img { width: 91px; }
.pie-fila a { text-decoration: none; }
.pie-politica { font-weight: 700; text-decoration: underline !important; }

/* =====================================================================
   Tablet y móvil
   ===================================================================== */
@media (max-width: 1180px) {
  .menu { gap: 20px; }
  .hero-revistas { transform: scale(.85); transform-origin: right top; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); column-gap: 30px; }
  .como-medimos { grid-template-columns: 420px 1fr; gap: 60px; }
  .persona { width: 420px; }
  .revista-portada { width: 64%; }
  .revista-pagina { left: 28%; width: 72%; }
}

@media (max-width: 919px) {
  h2 { font-size: 32px; }
  .contenedor { padding: 0 24px; }

  /* menú ☰ */
  .cabecera-fila { height: 72px; padding-left: 24px; }
  .cabecera-logo img { width: 90px; }
  .menu-boton {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; border: 0; background: none; cursor: pointer;
  }
  .menu-boton span { display: block; height: 2px; background: #1a1a1a; border-radius: 2px; transition: transform .2s, opacity .2s; }
  .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 8px 24px 24px; box-shadow: 0 12px 24px rgba(0,0,0,.1);
  }
  .menu.abierto { display: flex; }
  .menu > a, .menu-desplegable-titulo { display: block; padding: 14px 0; border-bottom: 1px solid #eee; }
  .flecha { display: none; }
  .menu-desplegable-lista { position: static; opacity: 1; visibility: visible; padding: 0; }
  .menu-desplegable-lista a { box-shadow: none; padding: 12px 0 12px 16px; border-bottom: 1px solid #eee; }
  .menu .menu-llamar { margin: 18px 0 0; }

  /* hero: texto centrado y la foto de la mujer con flechas */
  .hero-fila { flex-direction: column; min-height: 0; padding-top: 30px; }
  .hero-texto { width: auto; text-align: center; padding: 0; }
  .hero h1 { font-size: 30px; margin-bottom: 30px; }
  .hero .boton { margin-top: 10px; }
  .boton-grande { min-width: 0; min-height: 48px; font-size: 16px; padding: 12px 22px; }
  .hero-revistas { display: none; }
  .hero-movil { display: block; width: 100%; max-width: 360px; margin: 30px auto 0; }

  .dos-columnas, .como-medimos, .incluye { grid-template-columns: 1fr; gap: 40px; }
  .ranking { padding: 60px 0; text-align: center; }
  .etiqueta { font-size: 22px; }
  .ranking-laptop { width: 100%; justify-self: center; }
  .cifras { grid-template-columns: 1fr; gap: 28px; margin-top: 50px; }
  .cifras strong { font-size: 24px; }
  .cifras span { font-size: 20px; }

  .por-que { padding: 70px 0; }
  .tarjetas { grid-template-columns: minmax(0, 290px); row-gap: 26px; margin: 40px 0; }

  .sectores { width: 100%; max-width: 420px; margin: 30px auto; }
  .como-medimos { text-align: center; }
  .persona { width: 100%; max-width: 300px; margin: 0 auto; }
  .lista-medicion { max-width: none; margin-bottom: 30px; }

  .dimensiones { padding: 60px 0; }
  .dimensiones-fila { grid-template-columns: 1fr; gap: 30px; margin: 40px auto; }
  .piramide { width: 100%; max-width: 420px; margin: 0 auto; }
  .citas { height: auto; grid-template-rows: none; gap: 22px; text-align: center; }
  .citas p { padding: 0 !important; justify-self: center; }
  .dimensiones .boton { min-width: 0; }

  .entregables { padding: 60px 0; }
  .lista-puntos { max-width: none; }
  .nota-nps { max-width: none; }
  .pxi-dimensiones-logo { width: 200px; }
  .pxi-dimensiones-flechas { width: 280px; }
  .pxi-dimensiones-nombres { width: 320px; font-size: 14px; }
  .personalizacion { margin: 70px 0 30px; }
  .matriz-cuadrantes, .matriz-areas { width: 100%; }

  .media-partner { padding: 60px 0 70px; }
  .logo-vistazo { width: 240px; }
  .revistas { grid-template-columns: 1fr; gap: 24px; max-width: 330px; margin: 40px auto 50px; }
  .revista-par { height: 400px; }
  .revista-portada { width: 60%; }
  .revista-pagina { left: 32%; top: 22%; width: 68%; }

  .contacto { padding: 70px 0; }
  .formulario, .formulario-gracias { padding: 24px 20px 30px; }

  .pie-fila { flex-direction: column; justify-content: center; text-align: center; padding: 50px 24px 60px; }
}