/*
 Theme Name: Astra Child – SanPanchito.soy
 Theme URI: https://sanpanchito.soy
 Description: Child theme of Astra for SanPanchito.soy – Directorio del Pueblo Digital.
 Author: Francisco Hernández / Odin Consultores
 Template: astra
 Version: 1.0.0
*/

/* Importa estilos del tema padre */
@import url("../astra/style.css");

/* Estilos generales del proyecto */
body {
    font-family: 'DM Sans', sans-serif;
}

/* Tarjetas de listados */
.sps-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e5e5;
    transition: 0.3s ease;
}
.sps-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Secciones premium */
.sps-premium-badge {
    background: #4CB5A3;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px;
}

/* Hero con video */
.sps-video-hero video {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.sps-search{
  display:flex;
  gap:12px;
  align-items:center;
  margin: 16px 0 10px;
}

.sps-search input{
  flex:1;
  padding: 14px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  width: 100%;
}

.sps-search button{
  padding: 14px 18px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
}

.sps-sr-only{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.sps-search-results{
  margin-top: 20px;
}

.sps-search-results h3{
  margin-bottom: 12px;
}

.sps-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 900px){
  .sps-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 600px){
  .sps-grid{ grid-template-columns: 1fr; }
}

.sps-card{
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 16px;
  padding: 16px;
}

.sps-card--premium{
  border-width: 2px;
}

.sps-excerpt{
  margin-top: 8px;
  opacity: .85;
}

.sps-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
}

.sps-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:16px;
    position:relative;
    transition:transform .2s ease, box-shadow .2s ease;
}

.sps-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.sps-thumb img{
    border-radius:10px;
    width:100%;
    height:auto;
}

.sps-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:#16a085;
    color:#fff;
    padding:4px 10px;
    font-size:12px;
    border-radius:20px;
}

.sps-title{
    margin:12px 0 6px;
    font-size:18px;
}

.sps-excerpt{
    font-size:14px;
    color:#444;
}

.sps-meta span{
    display:block;
    font-size:13px;
    color:#666;
}

.sps-actions{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.btn-ver{
    background:#16a085;
    color:#fff;
    padding:8px 14px;
    border-radius:8px;
    text-decoration:none;
}

.btn-wa{
    background:#25D366;
    color:#fff;
    padding:8px 14px;
    border-radius:8px;
    text-decoration:none;
}

/*Ficha para rubros*/
/* ====== CONTENEDOR GENERAL ====== */
.sps-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:18px;
}

/* ====== HERO DEL RUBRO (FULL BLEED + ALTO) ====== */
.sps-tax-hero{
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);

  /* Alto: más hero, menos banner */
  min-height: 520px;          /* desktop */
  background-size: cover;
  background-position: center 30%; /* ajusta encuadre hacia arriba */
  border-radius: 0;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 22px;
}

/* Overlay: que llene el alto completo */
.sps-tax-hero__overlay{
  min-height: 520px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 34px;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,.18) 100%
  );
  color:#fff;
}

/* Centrar contenido del hero al ancho del sitio */
.sps-tax-hero__overlay > *{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

/* Título y tagline forzados a blanco */
.sps-tax-hero__title{
  margin:0 0 10px;
  font-size: 42px;
  color:#fff !important;
  text-shadow:0 8px 22px rgba(0,0,0,.60);
}

.sps-tax-hero__tagline{
  margin:0 0 18px;
  opacity:.95;
  font-size: 16px;
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 6px 16px rgba(0,0,0,.50);
}

/* Buscador */
.sps-tax-search{
  display:flex;
  gap:10px;
  max-width: 820px;
}

.sps-tax-search input{
  flex:1;
  padding: 14px 16px;
  border-radius: 14px;
  border: 0;
}

.sps-tax-search button{
  padding: 14px 18px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
}

/* Responsive: ajusta alto en pantallas chicas */
@media (max-width: 900px){
  .sps-tax-hero{
    min-height: 420px;
    background-position: center 25%;
  }
  .sps-tax-hero__overlay{
    min-height: 420px;
    padding: 22px;
  }
  .sps-tax-hero__title{
    font-size: 32px;
  }
  .sps-tax-search{
    max-width: 100%;
  }
}

@media (max-width: 520px){
  .sps-tax-hero{
    min-height: 360px;
    background-position: center 20%;
  }
  .sps-tax-hero__overlay{
    min-height: 360px;
  }
  .sps-tax-search{
    flex-direction: column;
  }
  .sps-tax-search button{
    width: 100%;
  }
}

/* ====== SECCIONES ====== */
.sps-section{
  margin:22px 0;
}

.sps-section__title{
  margin:0 0 12px;
  font-size:22px;
}

/* ====== GRIDS ====== */
.sps-grid{
  display:grid;
  gap:16px;
}

.sps-grid--featured{
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.sps-grid--cards{
  grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width: 900px){
  .sps-grid--featured,
  .sps-grid--cards{
    grid-template-columns:1fr;
  }
}

/* ====== TARJETAS ====== */
.sps-card{
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.sps-card__media{
  display:block;
  position:relative;
}

.sps-card__media img{
  width:100%;
  height:auto;
  display:block;
}

.sps-card__body{
  padding:14px;
}

.sps-card__title{
  margin:0 0 8px;
  font-size:18px;
}

.sps-card__meta{
  margin:0 0 10px;
  opacity:.8;
}

.sps-card__cta{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  background:#111;
  color:#fff;
  text-decoration:none;
}

/* Destacada */
.sps-card--featured .sps-card__title{
  font-size:20px;
}

.sps-badge{
  position:absolute;
  top:12px;
  left:12px;
  background:#111;
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}
/*Paginación*/
.sps-pagination{
  margin: 28px 0;
  display: flex;
  justify-content: center;
}

.sps-pagination .page-numbers{
  margin: 0 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f2f2f2;
  text-decoration: none;
}

.sps-pagination .current{
  background: #111;
  color: #fff;
}
/*nota búsqueda*/
.sps-search-note{
  margin: -6px 0 14px;
  opacity: .7;
}

/* ================================
   SanPanchito.soy — Negocio Premium
   ================================ */

.sps-single-wrapper--premium{
  max-width:1100px;
  margin:40px auto;
  padding:0 16px;
}

.sps-single-hero-premium{
  margin-bottom:28px;
}

.sps-hero-grid{
  display:grid;
  gap:20px;
  align-items:center;
}

.sps-hero-grid--split{
  grid-template-columns:minmax(0,2fr) minmax(0,1.5fr);
}

.sps-video-hero{
  margin-bottom:16px;
}

.sps-video-hero--43 .sps-video{
  aspect-ratio:4/3;
}

.sps-video-hero--169 .sps-video{
  aspect-ratio:16/9;
}

.sps-video{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  object-fit:cover;
}
.sps-video-hero--169{
  max-width: 920px;
  margin: 0 auto 16px;
}

.sps-thumb{
  overflow:hidden;
  border-radius:16px;
  margin-bottom:16px;
}

.sps-thumb img{
  width:100%;
  height:auto;
  display:block;
}

.sps-hero-info{
  /* espacio natural bajo hero */
}

.sps-premium-badge{
  display:inline-block;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:#E9F5F1;
  color:#2E3A3A;
  border:1px solid #CFE8E0;
}

.sps-title{
  font-size:30px;
  margin:8px 0 8px;
  color:#2E3A3A;
}

.sps-terms{
  font-size:13px;
  color:#777;
  margin-bottom:10px;
}

.sps-contact{
  margin-top:8px;
}

.sps-contact--stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sps-contact--chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.sps-btn{
  text-decoration:none;
  border-radius:999px;
  padding:8px 14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
}

.sps-btn--whatsapp{
  background:#25D366;
  color:#fff;
}

.sps-meta{
  font-size:13px;
  color:#555;
}

.sps-link{
  font-size:13px;
  color:#2E3A3A;
  text-decoration:none;
}

.sps-chip-link{
  font-size:13px;
  background:#E9F5F1;
  color:#2E3A3A;
  padding:7px 12px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid #CFE8E0;
}

.sps-section{
  margin-bottom:28px;
}

.sps-h2{
  font-size:20px;
  margin-bottom:10px;
  color:#2E3A3A;
}

.sps-content{
  font-size:15px;
  color:#444;
  line-height:1.7;
}

/* Responsive split -> stack */
@media (max-width: 860px){
  .sps-hero-grid--split{
    grid-template-columns:1fr;
  }
}

/* Hero spacing */
.sps-single-hero-premium{ margin-bottom: 22px; }

/* Badge overlay on video */
.sps-video-hero{ position: relative; }
.sps-thumb{ position: relative; }

.sps-badge-overlay{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
}

.sps-badge-overlay--center{
  left:5%;
  transform:none;
}

.sps-title-bottom{
  margin-top: 18px;
  margin-bottom: 10px;
}

.sps-title--center{
  text-align:center;
}

.sps-terms--center{
  text-align:center;
  margin-bottom: 0;
}

.sps-contact--center{
  justify-content:center;
}

.sps-contact-footer{
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #E7EFEA;
}

/* 4:3 split side: keep it light */
.sps-hero-side{
  display:flex;
  align-items:center;
  justify-content:center;
}