/* Custom visual tweaks for Calcomanía y Circulación */

/* =====================================
   HEADER (sticky) + spacing control
   ===================================== */

/* Mantener el menu visible al hacer scroll */
body.landing #header{
  position: sticky !important;
  top: 0;
  z-index: 1000;
  padding: 0.75em 0 !important; /* reduce al alto del header */
  background: rgba(11,18,32,0.86) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Quitar estilos del template que agregan demasiado espacio */
body.landing #header.alt{
  background: rgba(11,18,32,0.86) !important;
}

/* Separacion justa entre header y hero */
body.landing #banner{
  height: auto !important;
  min-height: 0 !important;
  padding: 2.5em 0 1.5em 0 !important;
}

/* Desactivar centrado vertical del template (crea mucho espacio) */
body.landing #banner:before{
  display: none !important;
}

body.landing #banner .content{
  padding: 0.75em 2em 1.25em 2em !important;
}

/* === HERO / BANNER ===
   La plantilla original centra el Hero con 100vh (mucha área negra arriba).
   Aquí lo hacemos más "corto" y pegado al menú, manteniendo:
   - Escritorio: texto izquierda / imagen derecha
   - Móvil: imagen arriba / texto abajo
*/

/* Quita el truco de centrado vertical del template (before: 100vh) */
#banner:before{ display:none !important; }

/* Evita que el hero ocupe toda la pantalla y controla el espacio superior */
#banner{
  min-height:auto !important;
  height:auto !important;
  padding:0 !important;
}

/* Reduce el espacio negro entre el menú fijo y el Hero */
#banner .content{
  /* Ajuste fino del espacio entre menú y hero */
  padding: 0.9em 4em 3.25em 4em;
  margin-top:0 !important;
}

/* HERO: desktop side-by-side (texto izquierda, imagen derecha) */
#banner .hero-split{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:3em;
}
#banner .hero-left{flex:1 1 56%;}
#banner .hero-right{flex:0 0 40%;}
#banner .hero-right .image{display:block; max-width:520px; margin-left:auto;}

/* HERO: mobile stacked (imagen arriba, texto abajo) */
@media screen and (max-width: 736px){
  #banner .content{
    padding: 1.6em 1.75em 3em 1.75em;
  }
  #banner .hero-split{
    flex-direction:column;
    align-items:stretch;
    gap:1.25em;
  }
  #banner .hero-right{order:1; width:100%;}
  #banner .hero-left{order:2; width:100%;}
  #banner .hero-right .image{max-width:420px; margin:0 auto;}
  #banner .hero-left header h2{font-size:1.65em; line-height:1.15;}
  #banner .hero-left header p{margin-top:.5em;}
}

/* Soporte centrado (icono en medio) */
.support-center{
  text-align:center;
}
.support-center .icon.major{
  margin:0 auto 0.35em auto;
}

/* PACKAGES: 2 tarjetas iguales, centradas y clickeables */
.pkg-row{
  justify-content:center;
}
.pkg-card-link{
  text-decoration:none;
}
.pkg-card-box{
  height:100%;
  border-radius:18px;
  padding:1.8em 1.6em;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.pkg-card-box:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.09);
  border-color:rgba(125,211,252,.35);
}
.pkg-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:1em;
  padding:.65em 1.05em;
  border-radius:14px;
  border:1px solid rgba(125,211,252,.35);
  background:rgba(125,211,252,.14);
  font-weight:700;
}

@media screen and (max-width: 736px){
  .pkg-card-box{padding:1.4em 1.2em;}
}

/* =====================================
   COMPRAR (formulario) – alineación y CTA
   ===================================== */

.buy-wrap .box{
  border-radius:18px;
}

/* Campos parejos */
.buy-wrap .field label{
  font-weight:700;
  letter-spacing:0.02em;
  margin-bottom:.35em;
}

.buy-wrap .field input,
.buy-wrap .field select,
.buy-wrap .field textarea{
  /* Importante: algunos inputs del formulario no declaran type="text".
     main.css aplica width:100% solo a input[type="text"|"email"|...].
     Este override asegura campos parejos sin tocar lógica. */
  display:block;
  width:100%;
  border-radius:14px;
  min-height:3.05em;
  padding:.75em 1em;
}

/* Evita que el select se vea "más bajo" que el input */
.buy-wrap .field select{
  padding-right:2.2em;
}

/* Resumen */
.buy-wrap .sum-pill{
  display:inline-flex;
  align-items:center;
  padding:.72em 1em;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  font-weight:700;
}

/* Botón principal más visible */
.buy-wrap .actions .button.primary{
  font-weight:900;
  letter-spacing:.02em;
  padding:0 2.15em;
  height:3.05em;
  line-height:3.05em;
  border-radius:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

/* En móvil: botón ancho y centrado */
@media screen and (max-width: 736px){
  .buy-wrap .actions{
    flex-direction:column;
    align-items:stretch !important;
  }
  .buy-wrap .actions li{
    width:100%;
  }
  .buy-wrap .actions .button.primary{
    width:100%;
    text-align:center;
  }
  .buy-wrap .sum-pill{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}

/* =====================================
   Pedido creado – look & feel de landing
   ===================================== */

.order-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2.2em;
}
.order-hero .order-left{flex:1 1 60%;}
.order-hero .order-right{flex:0 0 36%;}
.order-hero .order-right .image{display:block; border-radius:18px; overflow:hidden;}

@media screen and (max-width: 736px){
  .order-hero{flex-direction:column; gap:1.1em;}
  .order-hero .order-right{order:1; width:100%;}
  .order-hero .order-left{order:2; width:100%;}
}

.order-badge{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.55em .95em;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.35);
  background:rgba(125,211,252,.14);
  font-weight:800;
}

.order-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1em;
}

@media screen and (max-width: 980px){
  .order-grid{grid-template-columns:1fr;}
}

/* =====================================
   Mobile polish (Android / iPhone)
   Solo visual: mejorar legibilidad y taps
   ===================================== */

@media screen and (max-width: 736px){
  /* Evitar zoom automático en iPhone (inputs < 16px) */
  .buy-wrap input,
  .buy-wrap select,
  .buy-wrap textarea,
  .pp-wrap input,
  .pp-wrap select,
  .pp-wrap textarea{
    font-size:16px !important;
  }

  /* Comprar: tarjetas y check más finos en pantallas chicas */
  .buy-wrap .box{
    padding:1.25em 1.1em;
  }
  .buy-wrap .step-title{
    margin-bottom:.55em;
  }
  .buy-wrap .muted{
    line-height:1.55;
  }
  .buy-wrap .pick .cardbox{
    padding:1.25em 1.05em;
  }
  .buy-wrap .pick .cardbox::after{
    width:24px;
    height:24px;
    top:12px;
    right:12px;
    font-size:.95em;
  }
  .buy-wrap .kcap{
    margin-top:.75em;
  }
  .buy-wrap .badge{
    padding:.5em .8em;
    border-radius:12px;
  }

  /* Comprar: CTA siempre a ancho completo */
  .buy-wrap .actions{
    flex-direction:column;
    align-items:stretch !important;
  }
  .buy-wrap .actions li{
    width:100%;
  }
  .buy-wrap .actions .button,
  .buy-wrap .actions button,
  .buy-wrap .actions input[type="submit"]{
    width:100% !important;
    text-align:center;
  }

  /* Pedido post: pills y botones en columna para evitar overflow */
  .pp-wrap .pp-grid{
    grid-template-columns:1fr !important;
  }
  .pp-wrap .pp-hero{
    order:-1;
    margin-bottom:1em;
  }
  .pp-wrap .kpi{
    gap:.6em;
  }
  .pp-wrap .kpi .pill{
    width:100%;
    justify-content:space-between;
  }
  .pp-wrap .cta{
    flex-direction:column;
    align-items:stretch;
  }
  .pp-wrap .cta .button{
    width:100% !important;
    text-align:center;
  }

  /* Botones grandes: evitar que el texto se salga */
  .button.large,
  button.button.large{
    white-space:normal !important;
    height:auto !important;
    line-height:1.25em !important;
    padding:0.95em 1.2em !important;
  }
}

/* =====================================
   Admin / Catálogo / Configuración
   Solo responsive visual (no lógica)
   ===================================== */

/* Tablas: permitir scroll horizontal en móvil sin romper layout */
.table-wrapper{overflow-x:auto; -webkit-overflow-scrolling:touch;}

@media screen and (max-width: 736px){
  /* Evita cortes feos en tablas y mantiene acciones clickeables */
  table{min-width:720px;}

  /* Botones y enlaces en admin: un poco más compactos */
  .admin-wrap .button,
  .admin-wrap button,
  .admin-wrap input[type="submit"]{
    white-space:normal;
  }

  /* Formularios en admin/catálogo/config: inputs al 100% */
  .admin-wrap input,
  .admin-wrap select,
  .admin-wrap textarea{
    width:100% !important;
    box-sizing:border-box;
  }
}
/* =====================================
   HERO alignment (desktop only)
   ===================================== */
@media (min-width: 768px){
  #banner .hero-left header{
    text-align:left !important;
  }
  #banner .hero-left header h2,
  #banner .hero-left header p{
    text-align:left !important;
  }
}

/* =====================================
   STEP 2 form consistency
   ===================================== */
/* Igualar input email al resto */
input.inp2[type="email"]{
  -webkit-appearance:none;
  appearance:none;
  background: rgba(255,255,255,.06);
}
/* Evitar estilos raros de autofill */
input.inp2[type="email"]:-webkit-autofill{
  -webkit-text-fill-color: inherit;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset;
}

/* Select de pago estilo input */
select.inp2{
  width:100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: inherit;
}

/* Botones paso 2: centrar texto en móvil */
@media (max-width: 520px){
  .cta .button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}