/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/**página proximamente*/
.coming-soon {
  max-width: 700px;
  margin: 10vh auto;
  text-align: center;
  padding: 2rem;
  font-family: 'Helvetica Neue', sans-serif;
  color: #222;
}

.coming-soon h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.coming-soon .tagline {
  font-size: 1.2rem;
  color: #888;
  margin-bottom: 1.5rem;
}

.coming-soon .message {
  font-size: 1.1rem;
  line-height: 1.6;
}

.subscribe-form {
  margin-top: 2rem;
}

.subscribe-form input[type="email"] {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 60%;
  max-width: 300px;
  font-size: 1rem;
}

.subscribe-form button {
  padding: 0.8rem 1.5rem;
  margin-left: 0.5rem;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


/** ---------------------------------------------------
 *  Estilos globales base para LifeIsLove.es
 *  Proyecto: Web de minimalismo emocional y afiliados
 *  Autor: [Tu nombre o equipo]
 *  Fecha: 2025
 *  Descripción: Sistema de estilos global, reutilizable
 * --------------------------------------------------- */

/** Tipografía y reset básico */
body {
    font-family: 'Helvetica Neue', 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #222;
    background-color: #fff;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #111;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

p {
    margin: 0 0 1.5em;
    color: #333;
}

/** ---------------------------------------------------
 *  Botones y enlaces
 * --------------------------------------------------- */
a {
    color: #8a4d76;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.btn {
    display: inline-block;
    padding: 0.8em 1.5em;
    background: #8a4d76;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.btn:hover {
    background: #6c3e5e;
}

/** ---------------------------------------------------
 *  Fichas de producto afiliado
 * --------------------------------------------------- */
.product-box {
    border: 1px solid #ddd;
    padding: 1.5em;
    margin-bottom: 2em;
    border-radius: 8px;
    background: #fafafa;
}

.product-box img {
    max-width: 100%;
    border-radius: 6px;
    margin-bottom: 1em;
}

.product-box h3 {
    margin-top: 0;
}

.product-box .btn {
    margin-top: 1em;
}

/** ---------------------------------------------------
 *  Listas y citas
 * --------------------------------------------------- */
ul, ol {
    margin-left: 2em;
    margin-bottom: 1.5em;
}

blockquote {
    border-left: 4px solid #ccc;
    padding-left: 1em;
    font-style: italic;
    color: #555;
}

/** ---------------------------------------------------
 *  Formularios (Fluent Forms compatibles)
 * --------------------------------------------------- */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 0.75em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

input[type="submit"] {
    background: #8a4d76;
    color: white;
    border: none;
    padding: 0.75em 1.5em;
    cursor: pointer;
    border-radius: 4px;
}

/** ---------------------------------------------------
 *  Diseño responsivo base
 * --------------------------------------------------- */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .product-box {
        padding: 1em;
    }
}

/** ---------------------------------------------------
 *  Página de prueba visual (bloques y clases reutilizables)
 * --------------------------------------------------- */
.test-page .section {
    padding: 2em 0;
    border-bottom: 1px solid #eee;
}

.test-page .section h2 {
    font-size: 1.8rem;
    margin-bottom: 1em;
}

/** ---------------------------------------------------
 *  Sistema de imágenes para LifeIsLove.es y futuras webs
 *  Tamaños y estilos reutilizables
 * --------------------------------------------------- */

/** Imagen destacada de artículos / home */
.img-destacada {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 auto 2rem auto;
  display: block;
  border-radius: 6px;
}

/** Imagen principal de artículo (cuerpo) */
.img-articulo {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 2rem 0;
  border-radius: 4px;
}

/** Ficha vertical tipo libro (Amazon, etc.) */
.img-producto-vertical {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/** Ficha horizontal (productos tipo comparativa) */
.img-producto-horizontal {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 1rem auto;
  display: block;
  border-radius: 6px;
}

/** Galería de imágenes */
.img-galeria {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0.5rem;
  border-radius: 4px;
  display: inline-block;
}

/** Thumbnail o miniatura */
.img-thumb {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  margin: 0.5rem;
}

/** Imagen para compartir (Open Graph) */
.img-social {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  display: block;
  margin: 2rem auto;
  border-radius: 6px;
}
/** === Hover Effects para Imágenes Clave === */
/** ---------------------------------------------------
 *  Efectos hover para imágenes clave (zoom suave)
 *  Aplicado a: fichas de producto, imagen principal artículo
 * --------------------------------------------------- */

/* Efecto base común */
.img-articulo,
.img-producto-vertical,
.img-producto-horizontal,
.img-thumb {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

/* Hover aplicado */
.img-articulo:hover,
.img-producto-vertical:hover,
.img-producto-horizontal:hover,
.img-thumb:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}
/** === Hover Effects para Imágenes Clave === */
/* Se aplica solo a pantallas mayores a 768px para evitar interferencias móviles */

@media (min-width: 768px) {
  .img-articulo,
  .img-producto-vertical,
  .img-producto-horizontal,
  .img-thumb {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
  }

  .img-articulo:hover,
  .img-producto-vertical:hover,
  .img-producto-horizontal:hover,
  .img-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  }
}
/** === Hero Section con Parallax (Escritorio) y scroll (Móvil) === */
/** === HERO modular con imagen desde HTML + fondo + texto legible === */
.hero-section {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 90vh;
  filter: brightness(0.65);
}

/* Sombra adicional en capa por encima */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* oscurece fondo */
  z-index: 1;
}

/* Contenido */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  max-width: 900px;
  z-index: 2;
  padding: 1.5rem;
}

.hero-content h1 {
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #eee;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Responsivo */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-bg {
    max-height: none;
  }
}
/* ================================
   HERO: versión con parallax real
   Modular, editable por página
   ================================ */
/** === HERO CON PARALLAX REAL (modular) === */
/* CSS Página bodas-de-oro */
.hero-bodas-oro {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.hero-bodas-oro .hero-content {
  background: rgba(0, 0, 0, 0.4); /* Sombra ligera para mejor lectura */
  padding: 40px 20px;
  border-radius: 12px;
}

.hero-bodas-oro h1 {
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.hero-bodas-oro p {
  font-size: 18px;
  color: #eee;
  margin-bottom: 30px;
}

.hero-bodas-oro .boton-whatsapp {
  background-color: #25D366;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.hero-bodas-oro .boton-whatsapp:hover {
  background-color: #1ebe5b;
}

/* 🎯 Versión adaptada para móviles */
@media only screen and (max-width: 768px) {
  .hero-bodas-oro {
    background-size: cover;
    background-position: center center;
    background-attachment: scroll; /* En móvil evitamos problemas de parallax */
    height: 90vh;
    min-height: 400px;
    padding: 20px;
  }

  .hero-bodas-oro .hero-content {
    padding: 30px 15px;
  }

  .hero-bodas-oro h1 {
    font-size: 18px;
    line-height: 1.2;
  }

  .hero-bodas-oro p {
    font-size: 16px;
  }

  .hero-bodas-oro .boton-whatsapp {
    padding: 12px 24px;
    font-size: 16px;
  }
}
/* Ajuste fino SOLO para móviles pequeños */
@media only screen and (max-width: 480px) {
  .hero-bodas-oro h1 {
    font-size: 20px;
    line-height: 1.3;
    word-break: normal;
    hyphens: none;
    padding: 0 10px;
  }

  .hero-bodas-oro .hero-content {
    padding: 25px 12px;
  }
}

/* 🥇 TÍTULO PRINCIPAL CON PRIORIDAD */
.hero-title {
  font-size: clamp(48px, 6vw, 80px) !important;
  line-height: 1.1 !important;
  font-weight: normal !important;
  color: #fff !important;
  letter-spacing: 4px !important;
  font-family: 'Poppins', sans-serif !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  margin: 0 !important;
  display: block;
  text-align: center;
}

/* SUBTÍTULO */
.hero-subtitle {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: #fff;
  margin: 20px 0 30px 0;
}


/** === HERO SIN PARALLAX (páginas interiores) === */
.hero-static {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
}

.hero-static .hero-content {
  background: rgba(0, 0, 0, 0.4);
  padding: 40px 20px;
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
}


.hero-static h1 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.hero-static p {
  font-size: 16px;
  color: #eee;
  margin-bottom: 30px;
}

@media (max-width: 480px) {
  .hero-static .hero-content {
    max-width: 95%;
    margin: 0 auto;
  }
}

/** === BLOQUE MINIINTRO – presentación con CTA === */
.bloque-miniintro {
  max-width: 900px;
  margin: 10px auto;
  text-align: center;
  padding: 0 20px;
}

.bloque-miniintro h2 {
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 700;
  margin-bottom: 20px;
  color: #111;
}

.bloque-miniintro p {
  font-size: 18px;
  color: #444;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* CTA WhatsApp (reutilizable con otras clases también) */
.btn-whatsapp {
  background-color: #25D366;
  color: white;
  font-weight: 600;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #1ebe5b;
}
/** === BLOQUE CATEGORÍAS PILAR === */
.bloque-categorias {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  text-align: center;
}

.bloque-categorias-titulo h2 {
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 700;
  margin-bottom: 20px;
  color: #111;
}

.bloque-categorias-subtitulo {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
}

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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


.categoria-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.categoria-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.categoria-card span {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #111;
  padding: 16px;
  background-color: #fff;
  text-align: center;
}

.categoria-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/** === BLOQUE BENEFICIOS / VENTAJAS CLAVE === */
.bloque-beneficios {
  max-width: 1200px;
  margin: 100px auto;
  padding: 0 20px;
  text-align: center;
}

.bloque-beneficios-titulo {
  font-size: clamp(36px, 6vw, 48px);
  margin-bottom: 30px;
  font-weight: 700;
}

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.beneficio-box {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 30px 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.beneficio-box:hover {
  transform: translateY(-5px);
}

.beneficio-icono {
  font-size: 40px;
  margin-bottom: 15px;
}

.beneficio-box h3 {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 600;
}

.beneficio-box p {
  font-size: 15px;
  color: #444;
  line-height: 1.5;
}
/** === BLOQUE TESTIMONIOS / EXPERIENCIAS DE CLIENTES === */
.bloque-testimonios {
  max-width: 1000px;
  margin: 100px auto;
  padding: 0 20px;
  text-align: center;
}

.bloque-testimonios-titulo {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 40px;
  font-weight: 700;
}

.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.testimonio-box {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  padding: 30px 20px;
  font-style: italic;
  position: relative;
  transition: transform 0.3s ease;
}

.testimonio-box:hover {
  transform: translateY(-6px);
}

.testimonio-box p {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

.testimonio-box span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #888;
}
/** === BLOQUE CONTACTO FINAL === */
.bloque-contacto-final {
  max-width: 900px;
  margin: 80px auto;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
}

.bloque-contacto-final h2 {
  font-size: clamp(28px, 5vw, 42px);
  margin-bottom: 20px;
  font-weight: 700;
  color: #111;
}

.bloque-contacto-final p {
  font-size: 18px;
  margin-bottom: 30px;
  color: #555;
}

.contacto-datos {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.contacto-datos li {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.bloque-contacto-final a {
  color: #b51768;
  text-decoration: none;
}

.btn-whatsapp {
  background-color: #25D366;
  color: #fff !important;
  padding: 15px 40px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 18px;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #1ebc59;
}

/* Reutilizamos botón WhatsApp de antes */
.btn-whatsapp {
  background-color: #25D366;
  color: white;
  font-weight: 600;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #1ebe5b;
}
/** === PÁGINA DE CONTACTO COMPLETA === */

.bloque-contacto-top, .bloque-formulario, .bloque-mapa, .bloque-cta-final {
  max-width: 900px;
  margin: 20px auto;
  padding: 0 20px;
  text-align: center;
}

.bloque-contacto-top h2,
.bloque-formulario h3,
.bloque-cta-final h3 {
  font-size: clamp(28px, 6vw, 40px);
  margin-bottom: 20px;
}

.bloque-contacto-top p,
.bloque-formulario p,
.bloque-cta-final p {
  font-size: 17px;
  color: #555;
  margin-bottom: 20px;
}

.contacto-grid-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  font-size: 16px;
  margin-top: 20px;
}

.contacto-grid-datos a {
  color: #0077cc;
  text-decoration: none;
}

.contacto-grid-datos a:hover {
  text-decoration: underline;
}

.formulario-placeholder {
  margin-top: 30px;
}

.bloque-mapa iframe {
  border-radius: 12px;
  margin-top: 20px;
}

.bloque-cta-final .btn-whatsapp {
  background-color: #25D366;
  color: white;
  font-weight: 600;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
  display: inline-block;
}

.bloque-cta-final .btn-whatsapp:hover {
  background-color: #1ebe5b;
}
/** === BLOQUE FAQS / PREGUNTAS FRECUENTES === */
.bloque-faqs {
  max-width: 800px;
  margin: 80px auto;
  padding: 0 20px;
}

.bloque-faqs h2 {
  font-size: clamp(28px, 5vw, 38px);
  text-align: center;
  margin-bottom: 40px;
}

.bloque-faqs details {
  margin-bottom: 16px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bloque-faqs details:hover {
  background-color: #f0f0f0;
  border-color: #bbb;
}

.bloque-faqs summary {
  font-weight: 600;
  font-size: 16px;
  list-style: none;
}

.bloque-faqs summary::-webkit-details-marker {
  display: none;
}

.bloque-faqs details[open] {
  background-color: #ececec;
}

.bloque-faqs p {
  margin-top: 10px;
  font-size: 15px;
  color: #444;
}
/** === BLOQUE CATEGORÍAS TIPO BOTÓN === */
.bloque-categorias-boton {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

.bloque-categorias-boton h2 {
  font-size: clamp(28px, 5vw, 40px);
  margin-bottom: 30px;
  font-weight: 700;
}

.categorias-boton-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.categoria-boton {
  background-color: #f0f0f0;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 12px;
  transition: all 0.25s ease;
  display: inline-block;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.categoria-boton:hover {
  background-color: #e0e0e0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
/** === BLOQUE ENLACES CARD (con imagen y marco clicable) === */
.bloque-enlaces-card {
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

.bloque-enlaces-card h2 {
  font-size: clamp(28px, 5vw, 40px);
  margin-bottom: 40px;
  font-weight: 700;
}

.enlaces-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.enlace-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  width: 160px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.enlace-card:hover {
  border-color: #aaa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.enlace-card img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.enlace-card:hover img {
  transform: scale(1.1);
}

.enlace-card span {
  font-weight: 600;
  color: #111;
  font-size: 15px;
  text-align: center;
}
/** === BLOQUE MAPA DEL SITIO === */
.bloque-mapa-sitio {
  max-width: 960px;
  margin: 80px auto;
  padding: 0 20px;
  line-height: 1.6;
}

.bloque-mapa-sitio h1 {
  font-size: clamp(28px, 6vw, 42px);
  margin-bottom: 20px;
  text-align: center;
}

.bloque-mapa-sitio p {
  font-size: 16px;
  color: #555;
  text-align: center;
  margin-bottom: 30px;
}

.bloque-mapa-sitio hr {
  margin: 40px auto;
  border: none;
  border-top: 1px solid #ddd;
  max-width: 300px;
}

.grupo-mapa {
  margin-bottom: 40px;
}

.grupo-mapa h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #111;
}

.grupo-mapa ul {
  list-style: none;
  padding-left: 0;
}

.grupo-mapa li {
  margin-bottom: 8px;
}

.grupo-mapa a {
  color: #0077cc;
  text-decoration: none;
  font-weight: 500;
}

.grupo-mapa a:hover {
  text-decoration: underline;
}
/** === FICHA DE PRODUCTO HORIZONTAL (Amazon, cursos, etc.) === */
/** CONTENEDOR CENTRAL PARA FICHAS DE PRODUCTO */
.contenedor-producto {
  max-width: 400px;
  margin: 0 auto 40px auto;
  padding: 0 20px;
}

.ficha-producto {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  max-width: 360px;
  margin: 20px auto;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.ficha-producto:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.ficha-producto img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}


.ficha-producto h3 {
  font-size: 18px;
  color: #cc7a00;
  font-weight: 700;
  margin-bottom: 12px;
}

.ficha-producto ul {
  padding-left: 20px;
  margin-bottom: 20px;
  font-size: 15px;
  color: #333;
}

.ficha-producto ul li {
  margin-bottom: 8px;
  list-style: disc;
}

.btn-amazon {
  display: inline-block;
  background-color: #f8a908;
  color: #000;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 15px;
  transition: background-color 0.3s ease;
}

.btn-amazon:hover {
  background-color: #e69400;
}
/** === FICHA DE PRODUCTO VERTICAL (libros, cursos, etc.) === */
.ficha-producto-vertical {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  max-width: 280px;
  margin: 20px auto;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.ficha-producto-vertical:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.ficha-producto-vertical img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

.ficha-producto-vertical h3 {
  font-size: 16px;
  font-weight: 700;
  color: #cc7a00;
  margin-bottom: 12px;
}

.ficha-producto-vertical ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #333;
}

.ficha-producto-vertical ul li {
  margin-bottom: 8px;
}

.btn-amazon {
  display: inline-block;
  background-color: #f8a908;
  color: #000;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 15px;
  transition: background-color 0.3s ease;
}

.btn-amazon:hover {
  background-color: #e69400;
}
/** === BLOQUE COMPARATIVA CON SCROLL EN MÓVIL === */
.bloque-comparativa-scroll {
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 20px;
}

.bloque-comparativa-scroll h2 {
  font-size: clamp(28px, 5vw, 40px);
  margin-bottom: 30px;
  text-align: center;
}

.tabla-scroll-wrapper {
  overflow-x: auto;
}

.tabla-comparativa {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.tabla-comparativa th,
.tabla-comparativa td {
  padding: 12px 16px;
  text-align: left;
  font-size: 15px;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

.tabla-comparativa th {
  background-color: #f7f7f7;
  font-weight: 600;
  color: #333;
}

.tabla-comparativa td strong {
  color: #111;
}

.precio-total {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  color: #444;
}

.btn-amazon {
  display: inline-block;
  background-color: #f8a908;
  color: #000;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.btn-amazon:hover {
  background-color: #e69400;
}
/** === BLOQUE MINI RATING PRODUCTO (estilo Amazon) === */
.mini-rating {
  font-size: 14px;
  color: #444;
  margin-bottom: 12px;
}

.mini-rating .estrellas {
  color: #f5a623; /* Amarillo tipo Amazon */
  margin-right: 6px;
}

.mini-rating .valoracion {
  color: #666;
}
.bloque-newsletter {
  max-width: 500px;
  margin: 80px auto;
  padding: 20px;
  background: #F5F0EB;
  border-radius: 12px;
  text-align: center;
}

.bloque-newsletter h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.bloque-newsletter p {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
}

.form-newsletter input[type="email"] {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.form-newsletter label {
  display: block;
  font-size: 13px;
  margin-bottom: 15px;
  color: #444;
}

.form-newsletter a {
  color: #DAA520;
  text-decoration: underline;
}

.form-newsletter button {
  background-color: #DAA520;
  color: #111;
  font-weight: 700;
  padding: 12px 20px;
  font-size: 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-newsletter button:hover {
  background-color: #B87400;
}
.bloque-libros-destacados {
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 20px;
  text-align: center;
}

.bloque-libros-destacados h2 {
  font-size: clamp(26px, 5vw, 36px);
  margin-bottom: 10px;
}

.bloque-libros-destacados p {
  color: #555;
  font-size: 16px;
  margin-bottom: 40px;
}

.libros-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

/** === BLOQUE CATEGORÍAS BOTÓN === */

.bloque-categorias-boton {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

.bloque-categorias-boton h2 {
  font-size: clamp(28px, 6vw, 40px);
  margin-bottom: 40px;
  font-weight: 700;
  color: #111;
}

.categorias-boton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  justify-items: center;
}

.categoria-boton-img {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform 0.3s ease;
  background-color: #fff;
  max-width: 260px;
}

.categoria-boton-img img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.categoria-boton-img span {
  padding: 12px;
  font-weight: 600;
  color: #111;
  font-size: 16px;
}

.categoria-boton-img:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}

.destacada {
  background-color: #c3d600;
  color: #000;
}


.busqueda-pergal {
  display: flex;
  max-width: 900px;
  margin: 10px auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  font-size: 16px;
  background-color: #fff;
}

.busqueda-pergal select,
.busqueda-pergal input[type="search"] {
  padding: 12px;
  border: none;
  font-size: 16px;
}

.busqueda-pergal select {
  background-color: #f4f4f4;
  color: #111;
  max-width: 220px;
  width: 100%;
  border-right: 1px solid #ddd;
  line-height: 1.4;
  padding: 14px 12px;
  appearance: none;
  height: 48px;
  box-sizing: border-box;
}


.busqueda-pergal input[type="search"] {
  flex: 1;
}

.busqueda-pergal button {
  background-color: #c3d600;
  color: #111;
  font-weight: bold;
  padding: 0 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.busqueda-pergal button:hover {
  background-color: #b0c500;
}

@media (max-width: 768px) {
  .busqueda-pergal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border: none;
    background: none;
  }

  .busqueda-pergal select {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  padding: 14px 16px;
  font-size: 16px;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  appearance: none;
}


  .busqueda-pergal input[type="search"] {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border: none;
    background-color: #f4f4f4;
    border-radius: 6px;
  }

  .busqueda-pergal button {
    margin-top: 8px;
    align-self: stretch;
    padding: 16px;
    background-color: #c3d600;
    color: #111;
    font-weight: bold;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    text-align: center;
    transition: background-color 0.2s ease;
  }

  .busqueda-pergal button:hover {
    background-color: #b0c500;
  }
}

.formulario-estilo-fluent {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.formulario-estilo-fluent .campo-formulario {
  margin-bottom: 20px;
}

.formulario-estilo-fluent input,
.formulario-estilo-fluent textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

.formulario-estilo-fluent textarea {
  min-height: 120px;
  resize: vertical;
}

.formulario-estilo-fluent .btn {
  background-color: #8a4d76;
  color: #fff;
  border: none;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.formulario-estilo-fluent .btn:hover {
  background-color: #6c3e5e;
}

/* Centrar productos destacados en móviles */
@media (max-width: 768px) {
  .woocommerce ul.products,
  .uagb-post-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .woocommerce ul.products li.product {
    float: none !important;
    margin: 0 auto 30px auto !important;
    width: 90% !important;
    max-width: 300px;
  }
}

/* Hero parallax con video */
.video-hero {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.sobre-nosotros {
  padding: 60px 20px;
  background-color: #fdfaf7; /* tono crema claro, similar al fondo actual */
}

.sobre-nosotros .container {
  max-width: 1100px;
  margin: 0 auto;
}

.sobre-nosotros h2 {
  text-align: center;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  margin-bottom: 30px;
}

.sobre-nosotros img {
  max-width: 280px;
  height: auto;
}

.sobre-nosotros p {
  font-size: 17px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 18px;
}

/* CONTENEDOR GENERAL */
.galeria-pergal {
  background-color: #fff;
  padding: 60px 20px;
}

.galeria-pergal .container {
  max-width: 1100px;
  margin: 0 auto;
}

.galeria-pergal h2 {
  text-align: center;
  font-size: clamp(24px, 5vw, 36px);
  margin-bottom: 30px;
}

/* BLOQUE FANCYBOX */
.galeria-fancybox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.galeria-fancybox a {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.galeria-fancybox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.galeria-fancybox a:hover img {
  transform: scale(1.05);
}

.subtitulo-galeria {
  text-align: center;
  font-size: 18px;
  color: #666;
  margin-top: -10px;
  margin-bottom: 30px;
  line-height: 1.6;
  font-style: italic;
  letter-spacing: 0.3px;
}


.bloque-contadores {
  background-color: #fff;
  padding: 60px 20px;
  text-align: center;
}

.container-contadores {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.contador-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contador {
  font-size: 60px;
  font-weight: 700;
  color: #bfd400; /* verde Pergal */
}

.contador-box p {
  font-size: 18px;
  margin-top: 10px;
  font-weight: 500;
  color: #111;
}
.animado {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animado.visible {
  opacity: 1;
  transform: translateY(0);
}
.contacto-dos-columnas {
  background-color: #fff;
  padding: 60px 20px;
}

.contacto-contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.contacto-info, .contacto-formulario {
  flex: 1 1 400px;
}

.contacto-info h3,
.contacto-formulario h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.contacto-info h4 {
  font-size: 20px;
  margin-top: 20px;
}

.contacto-info p {
  margin: 6px 0;
  color: #333;
}

.contacto-info a {
  color: #b0c800;
  text-decoration: none;
}

.contacto-formulario form {
  display: flex;
  flex-direction: column;
}

.contacto-formulario label {
  font-weight: 600;
  margin: 10px 0 5px;
}

.contacto-formulario input,
.contacto-formulario textarea {
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.captcha-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.error-captcha {
  color: red;
  display: none;
  margin-top: -10px;
  font-size: 14px;
}

.contacto-formulario button {
  padding: 14px;
  background-color: #b0c800;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contacto-formulario button:hover {
  background-color: #99aa00;
}

/* Responsive: apila columnas */
@media (max-width: 768px) {
  .contacto-contenedor {
    flex-direction: column;
  }
}

.bloque-mapa {
  background-color: #f9f9f9;
  padding: 40px 20px;
}

.bloque-mapa-contenedor {
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-radius: 12px;
  overflow: hidden;
}

.legal-page {
  background-color: #fff;
  padding: 60px 20px;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.legal-page .container {
  max-width: 900px;
  margin: 0 auto;
}

.legal-page h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 30px;
  font-weight: 700;
}

.legal-page h2 {
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 600;
}

.legal-page ul.legal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-page ul.legal-list li {
  margin-bottom: 10px;
}


/* ===== FOOTER GENERAL ===== */
footer, .site-footer {
  background-color: #111;
  color: #fff;
  padding: 40px 20px;
  font-size: 15px;
  line-height: 1.7;
}

footer p, footer li, footer a {
  color: #fff;
  margin-bottom: 8px;
}

footer strong {
  font-weight: 600;
}

footer a {
  color: #c8d400;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ===== FOOTER GRID ===== */
.footer-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-widget {
  padding: 0 10px;
}

@media (max-width: 768px) {
  .footer-widgets {
    text-align: center;
    grid-template-columns: 1fr;
  }
}

/** === HERO HOME PERGAL IA === */
.hero-pergal {
  position: relative;
  background: url('/wp-content/uploads/2025/almacen-pergal.jpg') center center / cover no-repeat;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.hero-pergal .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-pergal .hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: auto;
  padding: 20px;
}

.hero-pergal h1 {
  font-size: clamp(32px, 6vw, 52px);
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-pergal p {
  font-size: 20px;
  margin-bottom: 40px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.btn-principal {
  background: #b51768;
  color: #fff;
  padding: 15px 40px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s;
}

.btn-principal:hover {
  background: #900c4f;
}

/** === BLOQUE PRODUCTOS DESTACADOS === */
.bloque-productos-destacados {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

.titulo-seccion h2 {
  font-size: clamp(28px, 6vw, 42px);
  margin-bottom: 40px;
  font-weight: 700;
  color: #111;
}

/** Grid responsivo para productos */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

/** Tarjeta individual de producto */
.producto-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/** Efecto hover */
.producto-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/** Imagen del producto */
.producto-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

/** Nombre del producto */
.producto-card h3 {
  font-size: 18px;
  color: #111;
  font-weight: 600;
  margin-bottom: 10px;
}

/** Precio del producto */
.producto-card .precio {
  font-size: 16px;
  color: #b51768;
  font-weight: 700;
  margin-bottom: 15px;
}

/** === Etiqueta IA en productos destacados === */
.etiqueta-recomendado {
  display: inline-block;
  background-color: #ffe500;
  color: #111;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* bloque Newsletter */
.hero-newsletter {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-newsletter video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-newsletter .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-newsletter .hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  max-width: 700px;
  padding: 20px;
}

.hero-newsletter .hero-content h2,
.hero-newsletter .hero-content p {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-form input[type="email"] {
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
}

.newsletter-form button {
  padding: 14px;
  background-color: #c3d600;
  color: #111;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
  background-color: #b0c500;
}

/* Footer personalizado Pergal */
.footer-pergal {
  background-color: #111;
  color: #fff;
  padding: 30px 20px 30px; /* ↓ reducido el padding superior */
  font-size: 15px;
  line-height: 1.6;
}

.footer-pergal a {
  color: #c3d600;
  text-decoration: none;
}

.footer-pergal a:hover {
  text-decoration: underline;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-column {
  flex: 1 1 250px;
  min-width: 250px;
}

/* Eliminar margen superior solo del primer párrafo del primer bloque */
.footer-column:first-child p:first-child {
  margin-top: 0;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 8px;
}

.footer-copy {
  text-align: center;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  font-size: 14px;
  color: #ccc;
}

/* -----------------------------------------------
   Bloque: Productos Destacados IA (Homepage)
   Descripción: Estilo para el grid dinámico generado 
   con shortcode [pergal_productos_destacados]
-------------------------------------------------- */
.bloque-productos-destacados {
  padding: 4rem 2rem;
  background-color: #f8f2ec;
  text-align: center;
}

.bloque-productos-destacados .titulo-seccion h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  justify-content: center;
}

.producto-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.2s ease;
}

.producto-card:hover {
  transform: translateY(-5px);
}

.producto-card img {
  max-height: 200px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.producto-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

.producto-card .precio {
  color: #c21463;
  font-weight: bold;
  margin-bottom: 1rem;
}

.producto-card .btn-principal {
  display: inline-block;
  background: #c21463;
  color: #fff;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
}

.producto-card .btn-principal:hover {
  background: #a81054;
}
/* ======= Fin bloque: Productos Destacados IA ======= */