/* [phn-portada-compacta-v1] Portada compacta: experiencias en cuadricula, hero mas bajo, contacto y dirección compactos. Lo instala automatizacion/portada-compacta.py: no se edita en cada sitio. */

/* 1. Experiencias: de lista en zigzag a cuadrícula */
#section-experiences { padding: 48px 20px; }
#section-experiences .exp-section-title { margin-bottom: 28px; font-size: 1.9em; }
#section-experiences .ct-section-inner-wrap {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px;
}
#section-experiences .exp-section-title { grid-column: 1 / -1; }
#section-experiences .exp-card {
  flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0;
  border: 1px solid #e6ece0; border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.07); transition: transform .2s, box-shadow .2s;
}
#section-experiences .exp-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
html.dark #section-experiences .exp-card { background: #161616; border-color: #2a2a2a; }
#section-experiences .exp-image-col { order: -1; position: static; flex: none; width: 100%; }
#section-experiences .exp-img {
  display: block; width: 100%; height: 230px; max-height: none; aspect-ratio: auto;
  border-radius: 0; box-shadow: none; object-fit: cover; object-position: top;
}
#section-experiences .exp-text-col { order: 1; flex: 1; padding: 16px 18px 18px; gap: 8px; }
#section-experiences .exp-title { font-size: 1.02em; line-height: 1.25; }
#section-experiences .exp-text-col > .exp-desc {
  margin: 0; font-size: .92em; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* el detalle largo vive en la página de compra */
#section-experiences .exp-details { display: none; }
#section-experiences .exp-buy-btn {
  margin-top: auto; align-self: stretch; text-align: center; padding: 11px 18px; font-size: .85em;
}

/* 2. Hero: no ocupa toda la pantalla */
#hero-phn { min-height: 0; height: 72vh; max-height: 640px; }

/* 3. Libros: tira más baja */
#section-libros { padding-top: 36px !important; padding-bottom: 36px !important; }

/* 4. Preguntas: menos aire */
#section-faq { padding-top: 40px !important; padding-bottom: 40px !important; }

/* 5. Contacto: menos relleno y dos columnas */
#section-contacto { padding: 44px 24px !important; }
#section-contacto .ct-section-inner-wrap { padding: 28px 32px !important; }

/* 6. Dirección: banda delgada */
#section-info { padding: 28px 24px !important; }

@media (max-width: 1000px) {
  #section-experiences .ct-section-inner-wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  #section-experiences { padding: 32px 14px; }
  #section-experiences .ct-section-inner-wrap { gap: 12px; }
  #section-experiences .exp-img { height: 130px; }
  #section-experiences .exp-text-col { padding: 10px 11px 12px; gap: 6px; }
  #section-experiences .exp-title { font-size: .8em; }
  #section-experiences .exp-text-col > .exp-desc { display: none; }
  #section-experiences .exp-buy-btn { padding: 9px 8px; font-size: .75em; border-radius: 10px; }
  #hero-phn { height: 64vh; }
  #section-contacto { padding: 28px 12px !important; }
}
@media (max-width: 420px) {
  #section-experiences .ct-section-inner-wrap { grid-template-columns: repeat(2, 1fr); }
}

/* 7. Contacto: mapas más bajos y datos compactos */
#section-contacto .con-map-wrap { height: 170px !important; }
#section-contacto .con-map-wrap iframe { height: 100% !important; }
#section-contacto .con-map-info { padding: 10px 14px !important; }
@media (max-width: 700px) {
  #section-contacto .con-maps-row { gap: 12px !important; }
  #section-contacto .con-map-wrap { height: 130px !important; }
  #section-contacto .con-form { gap: 8px !important; }
}

/* 8. Pie como el de proher-natura.com (direccion · logo · mas informacion con iconos), pero compacto */
#section-info {
  background: #2b2b2b !important; color: #e9e9e4 !important; border-top: 0 !important;
  padding: 22px 24px 18px !important;
}
#section-info .info-grid {
  max-width: 1100px; grid-template-columns: 1fr 1fr 1fr !important; gap: 16px 32px !important; align-items: center !important;
}
#section-info h3 {
  display: block !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: #fff !important; margin: 0 0 6px !important;
}
#section-info .info-address p, #section-info .info-center p { margin: 0 !important; color: #e9e9e4 !important; font-size: .88em; line-height: 1.5; }
#section-info .info-center { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
#section-info .info-center img { display: block !important; width: 120px !important; height: auto !important; margin: 0 !important; filter: none !important; }
#section-info .info-center a { color: #bfe38a !important; text-decoration: underline; font-size: .85em; margin: 0 !important; }
#section-info .info-social { text-align: center; }
#section-info .info-social-grid { display: flex; gap: 8px; justify-content: center; }
#section-info .info-social-btn { background: transparent !important; width: auto !important; height: auto !important; box-shadow: none !important; padding: 0 !important; line-height: 0; }
#section-info .info-social-btn img { width: 36px !important; height: 36px !important; border-radius: 50%; }
@media (max-width: 900px) {
  #section-info .info-grid { grid-template-columns: 1fr !important; text-align: center !important; gap: 14px !important; }
}

/* 9. Boton flotante de WhatsApp nuevo: el de la web oficial (icono redondo, sin fondo verde) */
#wa-float {
  width: 60px !important; height: 60px !important; background: transparent !important; box-shadow: none !important;
}
#wa-float img { width: 60px; height: 60px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }