/*
Theme Name: Play Fan Kids Cafe Child
Template: playfan-theme
Author: Apixel Marketing
Version: 1.0.0
Description: Child theme de Play Fan Kids Cafe
Text Domain: playfan-theme-child
*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700&display=swap');

/* =========================
   RESET SUAVE (evita blancos raros)
========================= */
html, body { height: 100%; }
body { margin: 0; }

/* Para que el footer quede abajo y no deje franja blanca */
.site, #page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main, #primary, .site-content{
  flex: 1 0 auto;
}

/* =========================
   FUENTE GLOBAL
========================= */
body, a {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 400;
}
h1, h2, h3 { font-weight: 700; }

/* =========================
   MINI HEADER (FIX LINKS)
========================= */
.mini-header{
  background:#f4c84d;
  font-size:14px;
  flex: 0 0 auto; /* ✅ FIX: evita que se estire por el flex layout */
}

.mini-container{
  max-width:1400px;
  margin:0 auto;
  padding:0 24px;              /* ✅ FIX: al ras de iconos (alto lo define height:34px) */
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Contacto izquierda */
.mini-header .contact-info{
  display:flex;
  align-items:center;
  gap:18px;
  color:#111827;
  font-weight:600;
  line-height:1;
}

.mini-header .contact-info a,
.mini-header .contact-info a:visited{
  color:#111827 !important;
  text-decoration:none !important;
  font-weight:600;
}
.mini-header .contact-info a:hover{
  color:#0f172a !important;
  text-decoration:none !important;
  opacity:.9;
}

.mini-header .contact-info i{
  margin-right:6px;
  color:#111827;
}

/* Redes derecha */
.mini-header .social{
  display:flex;
  align-items:stretch;
  line-height:1;
}
.mini-header .social a{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff !important;
  font-size:15px;
  text-decoration:none !important;
}
.social a.fb{ background:#ff4d4d; }
.social a.ig{ background:#ff9800; }
.social a.tt{ background:#000; }

/* =========================
   HEADER PRINCIPAL
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:9999;
  background:#fff8e6;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  border-bottom:4px solid #ff4d4d;
}

.header-container{
  max-width:1400px;
  margin:0 auto;
  padding:0px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

/* LOGO controlado */
.site-branding,
.custom-logo-link{
  display:flex;
  align-items:center;
  line-height:0;
}

.custom-logo,
.site-branding img,
.custom-logo-link img{
  max-height:70px !important;
  max-width:180px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain;
}

/* MENÚ */
.main-navigation .main-menu{
  display:flex;
  gap:22px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}

.main-navigation .main-menu > li > a,
.main-navigation .main-menu > li > a:visited{
  color:#1f2a44 !important;
  font-weight:700;
  font-size:18px;
  padding:10px 18px;
  border-radius:12px;
  text-decoration:none !important;
  transition:all .25s ease;
  white-space:nowrap;
}
.main-navigation .main-menu > li > a:hover{
  background:rgba(255,77,77,.15);
  color:#e11d48 !important;
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a{
  background:rgba(255,77,77,.20);
  color:#e11d48 !important;
}

/* BOTÓN WHATSAPP */
.wa-button{
  background:#22c55e;
  color:#fff !important;
  padding:12px 22px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none !important;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 8px 20px rgba(34,197,94,.35);
  white-space:nowrap;
}
.wa-button:hover{ background:#16a34a; }

/* =========================
   FOOTER (estilo oscuro como tu mock)
========================= */
.pf-footer{
  margin-top: auto;
  background:
    radial-gradient(900px 380px at 20% 10%, rgba(99,102,241,.20), transparent 55%),
    radial-gradient(700px 300px at 85% 40%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #070c16 100%);
  color: rgba(255,255,255,.86);
  padding: 60px 0 0;
  position: relative;
  overflow: hidden;
}

.pf-footer__container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.pf-footer__logo .custom-logo{
  max-height: 72px !important;
  max-width: 140px !important;
}

.pf-footer__desc{
  margin: 14px 0 18px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  max-width: 420px;
}

.pf-footer__title{
  font-size: 18px;
  margin: 0 0 16px;
  color: rgba(255,255,255,.92);
}

/* WhatsApp footer */
.pf-footer__wa{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #22c55e;
  color: #fff !important;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(34,197,94,.28);
}
.pf-footer__wa:hover{ background:#16a34a; }

/* Menu footer */
.pf-footer__menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pf-footer__menu a{
  color: rgba(255,255,255,.80) !important;
  text-decoration: none !important;
  font-weight: 600;
}
.pf-footer__menu a:hover{
  color: #fff !important;
  opacity: .95;
}

/* mini links */
.pf-footer__links-mini{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.55);
}
.pf-footer__links-mini a{
  color: rgba(255,255,255,.75) !important;
  text-decoration: none !important;
}
.pf-footer__links-mini a:hover{ color:#fff !important; }

/* ✅ nuevo: bloque contacto debajo de navegación */
.pf-footer__contact-block{
  margin-top: 28px;
}

/* Contacto */
.pf-footer__contact{
  list-style:none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.pf-footer__contact li{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.85);
}
.pf-footer__contact i{
  color: #f4c84d;
}
.pf-footer__contact a{
  color: rgba(255,255,255,.85) !important;
  text-decoration: none !important;
  font-weight: 600;
}
.pf-footer__contact a:hover{ color:#fff !important; }

/* Social footer */
.pf-footer__social{
  display: flex;
  gap: 10px;
  margin: 8px 0 16px;
}
.pf-social{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}
.pf-social.fb{ background:#ff4d4d; }
.pf-social.ig{ background:#ff9800; }
.pf-social.tt{ background:#000; }
.pf-social:hover{ transform: translateY(-1px); }

.pf-footer__note{
  margin: 0;
  color: rgba(255,255,255,.70);
}

/* Dirección */
.pf-footer__address-text{
  margin: 0;
  color: rgba(255,255,255,.86);
  line-height: 1.35;
  font-weight: 600;
}

/* Horarios */
.pf-footer__hours{
  margin-top: 22px;
}
.pf-hours{
  display: grid;
  gap: 12px;
}
.pf-hours__row{
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: rgba(255,255,255,.90);
  font-weight: 600;
  line-height: 1.2;
}
.pf-hours__label{
  min-width: 86px;
}
.pf-hours__dots{
  flex: 1 1 auto;
  border-bottom: 2px dotted rgba(255,255,255,.65);
  transform: translateY(-2px);
}
.pf-hours__value{
  min-width: 150px;
  text-align: left;
  color: #f4c84d;
  font-weight: 800;
}

/* ¿Por qué Play Fan? */
.pf-footer__why{
  margin-top: 22px;
}
.pf-footer__why-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.86);
  font-weight: 600;
}
.pf-footer__why-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
}
.pf-footer__why-ico{
  width: 22px;
  text-align: center;
  font-size: 16px;
  transform: translateY(1px);
}

/* ✅ NUEVO: Newsletter por correo (solo front-end) */
.pf-footer__newsletter{
  margin-top: 26px;
}
.pf-footer__newsletter-text{
  margin: 0 0 10px;
  color: rgba(255,255,255,.75);
}
.pf-newsletter{
  margin: 0;
}
.pf-newsletter__label{
  display: none;
}
.pf-newsletter__row{
  display: flex;
  gap: 10px;
  align-items: center;
}
.pf-newsletter input{
  flex: 1 1 auto;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}
.pf-newsletter input::placeholder{
  color: rgba(255,255,255,.55);
}
.pf-newsletter button{
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: #22c55e;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(34,197,94,.22);
}
.pf-newsletter button:hover{ background:#16a34a; }
.pf-newsletter__hint{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  line-height: 1.35;
}

/* ✅ NUEVO: Info rápida */
.pf-footer__info{
  margin-top: 22px;
}
.pf-footer__info-list{
  list-style:none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.86);
  font-weight: 600;
}
.pf-footer__info-list strong{
  color: rgba(255,255,255,.95);
}

/* Bottom bar */
.pf-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 16px 0;
}
.pf-footer__bottom-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: rgba(255,255,255,.58);
  font-size: 14px;
}
.pf-footer__bottom-links{
  display:flex;
  gap: 10px;
  align-items:center;
}
.pf-footer__bottom-links a{
  color: rgba(255,255,255,.68) !important;
  text-decoration: none !important;
}
.pf-footer__bottom-links a:hover{ color:#fff !important; }

/* =========================
   FIX: NO BLANCO EXTRA ABAJO
   (sin romper miniheader)
========================= */
.site-footer,
.pf-footer{
  margin-bottom: 0 !important;
}
body:after{ content: none !important; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1024px){
  .mini-container,
  .header-container{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

  .main-navigation .main-menu{
    flex-direction:column;
    gap:12px;
  }

  .custom-logo,
  .site-branding img,
  .custom-logo-link img{
    max-height:60px !important;
    max-width:160px !important;
  }

  .pf-footer__container{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pf-footer__bottom-container{
    flex-direction: column;
    text-align: center;
  }

  .pf-hours__label{ min-width: 78px; }
  .pf-hours__value{ min-width: 0; }

  .pf-newsletter__row{
    flex-direction: column;
    align-items: stretch;
  }
  .pf-newsletter button{
    width: 100%;
  }
}


/* FORZAR fondo del header (si algún CSS lo pisa) */
.site-header,
.site-header.site-header,
#masthead.site-header{
  background: #fff8e6 !important;
}

/* =========================
   FOOTER — Iconos de medios de pago
========================= */
.pf-footer__payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
}

.pf-footer__payment-icons img {
  height: 26px;
  width: auto;
  border-radius: 4px;
  opacity: 0.9;
  transition: opacity .2s ease;
}

.pf-footer__payment-icons img:hover {
  opacity: 1;
}

/* Logo Nave inline en el texto del footer */
.pf-footer__nave-logo {
  height: 18px;
  width: auto;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.9;
}

/* Crédito agencia en el footer */
.pf-footer__credit {
  color: rgba(255,255,255,.55) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}

.pf-footer__credit:hover {
  color: #f4c84d !important;
}