/**
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) === */
.hero-parallax {
  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;
  position: relative;
  overflow: hidden;
}

.hero-parallax .hero-content {
  background: rgba(0, 0, 0, 0.4); /* sombra para texto legible */
  padding: 40px 20px;
  border-radius: 12px;
  max-width: 900px;
}

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

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

.hero-parallax .btn {
  background-color: #fff;
  color: #000;
  border: 2px solid #fff;
  padding: 12px 32px;
  font-size: 14px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.hero-parallax .btn:hover {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

/* Responsivo – Desactivamos parallax en móviles */
@media (max-width: 768px) {
  .hero-parallax {
    background-attachment: scroll;
    height: auto;
    padding: 40px 20px;
  }

  .hero-parallax h1 {
    font-size: 28px;
  }

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

  .hero-parallax .btn {
    padding: 10px 24px;
    font-size: 14px;
  }
}
/** === 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;
}

.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;
}
/** === BLOQUE MINIINTRO – presentación con CTA === */
.bloque-miniintro {
  max-width: 900px;
  margin: 80px 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: 100px 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(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.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(32px, 6vw, 48px);
  margin-bottom: 50px;
  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 {
  background-color: #f8f8f8;
  padding: 60px 20px;
  text-align: center;
  border-radius: 12px;
  margin: 80px auto;
  max-width: 800px;
}

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

.bloque-contacto-final p {
  font-size: 17px;
  color: #555;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contacto-datos {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  font-size: 16px;
  color: #444;
}

.contacto-datos li {
  margin-bottom: 10px;
}

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

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

/* 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: 60px 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: 1000px;
  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: 80px 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;
}