/*
Theme Name: Super Pulga Jump
Theme URI: https://superpulga.com
Description: Página de entrada para superpulga.com. Muestra la lista de ciudades (Houston, Dallas, Fort Worth, San Antonio, Austin) y manda al visitante al sitio de la ciudad que elija. Diseñada primero para celular: una sola columna, botones grandes y sin imágenes pesadas. Incluye el logo, el botón "Publicar Anuncio Gratis", las redes sociales y los enlaces del pie. Las ciudades, los enlaces y el logo se editan en el escritorio, en SP-Settings → Jump Page. Para agregar una ciudad basta con escribir un renglón más. Incluye también una plantilla de página de contacto con formulario propio, sin necesidad de Elementor ni plugins.
Author: Super Pulga
Author URI: https://superpulga.com
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spjump
Tags: one-column, custom-logo, accessibility-ready, translation-ready
*/

:root{
  --azul:#0E2A47;
  --azul-hondo:#08192B;
  --papel:#FFF8EC;
  --amarillo:#FFC42D;
  --rojo:#E03A2F;
  --verde:#1B7A5A;
  --turquesa:#0F8FA6;
  --tinta:#14202E;

  --display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --texto:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:var(--azul);
  color:var(--papel);
  font-family:var(--texto);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

a{color:inherit}

.sp-saltar{
  position:absolute;
  left:-9999px;
}
.sp-saltar:focus{
  left:1rem;
  top:1rem;
  z-index:99;
  background:var(--amarillo);
  color:var(--tinta);
  padding:.6rem 1rem;
  border-radius:.4rem;
  font-weight:700;
}

/* ---------- Barra superior ---------- */
.sp-cabecera{
  background:var(--papel);
  padding:.9rem 1.1rem 1.1rem;
  text-align:center;
  border-bottom:.45rem solid var(--rojo);
}
.sp-cabecera__logo img{
  display:block;
  margin:0 auto;
  max-width:min(100%,17rem);
  height:auto;
}
.sp-cabecera__nombre{
  font-family:var(--display);
  font-size:2rem;
  color:var(--azul);
  margin:0;
}

.sp-publicar{
  display:block;
  margin:.95rem auto 0;
  max-width:24rem;
  padding:.95rem 1rem;
  background:var(--amarillo);
  color:var(--tinta);
  font-family:var(--display);
  font-size:1.05rem;
  text-decoration:none;
  border-radius:.5rem;
  box-shadow:0 3px 0 #C58F00;
}
.sp-publicar:active{transform:translateY(2px);box-shadow:0 1px 0 #C58F00}
.sp-publicar:focus-visible{outline:3px solid var(--azul);outline-offset:3px}

.sp-social{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin:.9rem 0 0;
  padding:0;
  list-style:none;
}
.sp-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.9rem;
  height:2.9rem;
  border-radius:50%;
  background:var(--azul);
  color:var(--papel);
}
.sp-social a:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
.sp-social svg{width:1.35rem;height:1.35rem;fill:currentColor}

/* ---------- Contenido ---------- */
.sp-envoltura{
  width:100%;
  max-width:34rem;
  margin:0 auto;
  padding:1.5rem 1.1rem 2rem;
  flex:1;
}

.sp-titulo{
  font-family:var(--display);
  font-size:1.35rem;
  line-height:1.2;
  margin:0 0 1rem;
  text-align:center;
}

.sp-ciudades{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.7rem;
}

.sp-ciudad{
  display:flex;
  align-items:center;
  min-height:4.4rem;
  padding:.8rem 1rem .8rem 0;
  background:var(--papel);
  color:var(--tinta);
  text-decoration:none;
  border-radius:.6rem;
  border-left:.7rem solid var(--franja,var(--rojo));
  box-shadow:0 2px 0 rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.sp-ciudad:active{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.35)}
.sp-ciudad:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

.sp-ciudad__texto{padding-left:1rem;flex:1;min-width:0}
.sp-ciudad__nombre{
  font-family:var(--display);
  font-size:1.45rem;
  line-height:1.05;
  letter-spacing:-.01em;
  display:block;
}
.sp-ciudad__nota{
  display:block;
  margin-top:.2rem;
  font-size:.86rem;
  font-weight:500;
  color:#5B6672;
}
.sp-ciudad__flecha{
  flex:none;
  width:1.6rem;
  height:1.6rem;
  color:var(--franja,var(--rojo));
}

.sp-ciudad[data-color="rojo"]{--franja:var(--rojo)}
.sp-ciudad[data-color="verde"]{--franja:var(--verde)}
.sp-ciudad[data-color="turquesa"]{--franja:var(--turquesa)}
.sp-ciudad[data-color="amarillo"]{--franja:#D89A00}
.sp-ciudad[data-color="azul"]{--franja:#1E5FA8}

.sp-aviso{
  margin-top:1.6rem;
  padding:1.15rem 1.1rem;
  background:var(--azul-hondo);
  border:2px dashed rgba(255,196,45,.55);
  border-radius:.7rem;
  text-align:center;
}
.sp-aviso p{margin:0 0 .15rem;font-weight:600}
.sp-aviso small{display:block;color:#9FB4C9;font-size:.86rem;line-height:1.5}

/* ---------- Páginas normales (privacidad, etc.) ---------- */
.sp-pagina{
  background:var(--papel);
  color:var(--tinta);
  border-radius:.6rem;
  padding:1.4rem 1.2rem;
  line-height:1.65;
}
.sp-pagina h1,.sp-pagina h2{font-family:var(--display);line-height:1.15}
.sp-pagina h1{font-size:1.7rem;margin-top:0}
.sp-pagina a{color:#0B5FA5}
.sp-pagina img{max-width:100%;height:auto}

/* ---------- Pie ---------- */
.sp-pie{
  background:var(--azul-hondo);
  padding:1.6rem 1.1rem calc(1.8rem + env(safe-area-inset-bottom));
  text-align:center;
  font-size:.9rem;
  color:#9FB4C9;
  line-height:1.6;
}
.sp-pie__ciudades,
.sp-pie__enlaces{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem 1.1rem;
}
.sp-pie__ciudades a,
.sp-pie__enlaces a{
  display:inline-block;
  padding:.45rem .2rem;
  color:var(--papel);
  text-decoration:none;
  font-weight:600;
}
.sp-pie__ciudades a{color:#CFE0F0;font-weight:500}
.sp-pie a:focus-visible{outline:2px solid var(--amarillo);outline-offset:2px}
.sp-pie__legal{margin:0;font-size:.82rem}
.sp-pie__legal a{color:#CFE0F0}

@media (min-width:36rem){
  .sp-envoltura{padding-top:2.2rem}
  .sp-ciudad{min-height:4.8rem}
  .sp-titulo{font-size:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* ---------- Página de contacto ---------- */
.sp-telefono{
  margin:1.2rem 0;
  font-family:var(--display);
  font-size:1.5rem;
}
.sp-telefono a{
  color:var(--tinta);
  text-decoration:none;
  border-bottom:.25rem solid var(--amarillo);
}
.sp-telefono a:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}

.sp-mensaje{
  margin:1.3rem 0;
  padding:1rem 1.1rem;
  border-radius:.5rem;
  line-height:1.55;
  font-size:.98rem;
}
.sp-mensaje--bien{background:#E8F5EF;border-left:.4rem solid var(--verde)}
.sp-mensaje--error{background:#FDECEA;border-left:.4rem solid var(--rojo)}
.sp-mensaje ul{margin:.5rem 0 0;padding-left:1.2rem}
.sp-mensaje strong{display:block;margin-bottom:.15rem}

.sp-form{margin-top:1.2rem}
.sp-form__campo{margin:0 0 1.1rem}
.sp-form__campo label{
  display:block;
  font-weight:700;
  margin-bottom:.35rem;
  font-size:1rem;
}
.sp-form__opcional{font-weight:500;color:var(--tinta);opacity:.6}

.sp-form input[type=text],
.sp-form input[type=email],
.sp-form input[type=tel],
.sp-form textarea{
  width:100%;
  font-family:var(--texto);
  font-size:1.05rem;      /* 16px o más evita que el iPhone haga zoom */
  padding:.85rem .8rem;
  color:var(--tinta);
  background:#fff;
  border:2px solid #C9CFD6;
  border-radius:.45rem;
}
.sp-form input:focus,
.sp-form textarea:focus{
  outline:none;
  border-color:var(--turquesa);
  box-shadow:0 0 0 3px rgba(15,143,166,.25);
}
.sp-form textarea{line-height:1.5;resize:vertical}

.sp-form__trampa{position:absolute;left:-9999px}

.sp-form__enviar{
  width:100%;
  min-height:3.4rem;
  padding:.9rem 1rem;
  font-family:var(--display);
  font-size:1.1rem;
  color:var(--tinta);
  background:var(--amarillo);
  border:0;
  border-radius:.5rem;
  box-shadow:0 3px 0 #C58F00;
  cursor:pointer;
}
.sp-form__enviar:active{transform:translateY(2px);box-shadow:0 1px 0 #C58F00}
.sp-form__enviar:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}

@media (min-width:36rem){
  .sp-form__enviar{width:auto;min-width:16rem}
}