/* ============================================
   GUIAS.CSS
   Estilos para páginas de guías de contenido
   (como /guias/como-usar-mandolina-de-cocina.html)
   ============================================ */

.page-guia {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}

/* Migas de pan */

.guia-breadcrumbs {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: 1.5rem 0 1rem;
}

.guia-breadcrumbs a {
  color: var(--accent);
}

.guia-breadcrumbs a:hover {
  text-decoration: underline;
}

/* Artículo principal */

.guia-article {
  background-color: var(--bg-panel);
  border-radius: 1rem;
  padding: 1.8rem 1.8rem 2.4rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
}

.guia-header h2 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  color: var(--accent-dark);
}

.guia-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 0.4rem;
}

.guia-intro {
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}

/* Índice de contenidos */

.guia-indice {
  background-color: #f9fafb;
  border-radius: 0.8rem;
  padding: 1rem 1.1rem;              /* un pelín menos de padding horizontal */
  border: 1px solid var(--border-soft);
  max-width: 520px;                   /* la hacemos más recogida/cuadrada */
  margin: 0 auto 1.8rem;              /* centrada dentro del contenido */
}


.guia-indice h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  color: var(--accent-dark);
}

.guia-indice ol {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.guia-indice li {
  margin-bottom: 0.3rem;
}

.guia-indice a {
  color: var(--accent);
  text-decoration: none;
}

.guia-indice a:hover {
  text-decoration: underline;
}

/* Tipografías dentro del artículo */

.guia-article h2 {
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  font-size: 1.4rem;
  color: var(--accent-dark);
}

.guia-article h3 {
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--accent-dark);
}

.guia-article p {
  margin-bottom: 0.9rem;
  line-height: 1.7;
  color: var(--text-main);
}

.guia-article ul,
.guia-article ol {
  margin: 0.4rem 0 1rem;
  padding-left: 1.4rem;
}

.guia-article li {
  margin-bottom: 0.45rem;
}

/* Cajita de consejo */

.guia-tip {
  margin: 1rem 0 1.4rem;
  background-color: #ecfdf5;
  border-radius: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid #bbf7d0;
  border-left: 4px solid #16a34a;
}

.guia-tip p {
  margin: 0;
  font-size: 0.9rem;
  color: #166534;
}

/* =======================================================
   Bloques en 2 columnas (texto + producto o texto + vídeo)
   ======================================================= */

.guia-grid-2 {
  display: flex;
  gap: 1.5rem;
  margin: 1.4rem 0 1.8rem;
  justify-content: center;
}

/* Variante para invertir columnas en escritorio */
.guia-grid-2--reverse {
  display: flex;
  flex-direction: row-reverse; /* y lo mismo cuando invertimos */
}

.texto-guia-grid-2 {
  max-width: 230px;
}

/* En móvil, una sola columna */
@media (max-width: 768px) {
  .guia-grid-2,
  .guia-grid-2--reverse {
    flex-direction: column;
    align-items: center;
  }

  .guia-producto-inline .producto-amazon {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    margin: 0 auto;         /* por si quieres asegurarte que queda centrada */
    box-sizing: border-box;
  }
}



/* Versión general inline (escritorio) */
.guia-producto-inline .producto-amazon {
  padding: 1rem 1.05rem;
  box-shadow: var(--shadow-soft);
  max-width: 400px;
  width: 100%;
  box-sizing: border-box;
}

/* Imagen dentro de esa tarjeta inline */
.guia-producto-inline .producto-amazon img {
  height: 160px;
  object-fit: cover;
}

/* =======================================================
   Vídeos pequeños dentro de la guía
   ======================================================= */

.guia-media {
  margin: 1.6rem 0 2rem;
}

.guia-media-text p {
  color: var(--text-muted);
}

/* Reaprovechamos .video-wrapper global y lo hacemos más compacto */
.video-wrapper.video-wrapper--small {
  max-width: 500px;              /* más anchura en escritorio */
  margin: 0.5rem 0 0.3rem;       /* pegado al lado izquierdo de su columna */
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
  border-radius: 0.8rem;
}


.video-wrapper.video-wrapper--small iframe {
  border-radius: 0.8rem;
}

.guia-media-video .video-caption {
  font-size: 0.85rem;
  color: var(--text-soft);
  text-align: left;
}

/* En móvil, centramos un poco más las cosas */
@media (max-width: 768px) {
  .video-wrapper.video-wrapper--small {
    max-width: 100%;
  }

  .guia-media-video .video-caption {
    text-align: left;
  }
}


/* Layout de todas las secciones de texto + vídeo de la guía */
@media (min-width: 769px) {
  .guia-media.guia-grid-2 {
    align-items: flex-start; /* para que texto y vídeo se alineen arriba */
  }

  .guia-media.guia-grid-2 .guia-media-text {
    flex: 0 0 45%;   /* el porcentaje que te funcionó bien en la otra página */
    max-width: 45%;
  }

  .guia-media.guia-grid-2 .guia-media-video {
    flex: 0 0 55%;   /* y el resto para el vídeo */
    max-width: 55%;
  }

  .guia-media.guia-grid-2 .video-wrapper.video-wrapper--small {
    max-width: 100%; /* que el vídeo aproveche toda su columna */
  }
}




/* =======================================================
   CTA final en tarjeta independiente
   ======================================================= */

.guia-cta-section {
  margin-top: 2.4rem;
}

.guia-cta-card {
  background-color: var(--bg-panel);
  border-radius: 1rem;
  padding: 1.8rem 1.8rem 1.9rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
}

.guia-cta-card h2 {
  margin-top: 0;
  margin-bottom: 0.7rem;
  color: var(--accent-dark);
}

.guia-cta-card p {
  margin-bottom: 0.9rem;
  color: var(--text-muted);
}

/* Responsive ajustes pequeños */

@media (max-width: 640px) {
  .guia-article {
    padding: 1.4rem 1.3rem 1.9rem;
    border-radius: 0.9rem;
  }

  .guia-article h2 {
    font-size: 1.25rem;
  }

  .guia-indice {
    padding: 1rem 1.1rem;
  }

  .guia-cta-card {
    padding: 1.5rem 1.4rem 1.6rem;
  }
}








/* ============================================
   GUIAS: meta + CTA final (amarillito)
   ============================================ */

/* Post meta (reutilizado del blog) */
.page-guia .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  opacity: 0.9;
}

.page-guia .post-meta li {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
}

.page-guia .post-meta a {
  text-decoration: none;
  font-weight: 700;
}

/* CTA final: “Qué mandolina elegir...” con degradado amarillito */
.guia-cta-section .guia-cta-card {
  background: linear-gradient(135deg, #fff3c4 0%, #fffdf2 70%);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  border-radius: 22px;
}

.guia-cta-section .guia-cta-card h2 {
  margin-top: 0;
}

.guia-cta-section .guia-cta-card p {
  opacity: 0.92;
}






/* =========================================
   CTA final (guia-cta-card): 3 botones alineados
   ========================================= */

.guia-cta-card > a.btn-cta{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;

  /* 3 columnas iguales + 2 gaps */
  width: calc((100% - (2 * 12px)) / 3);

  /* separación con el texto superior */
  margin-top: 0.9rem;

  /* si tu .btn-cta tiene padding, perfecto; si no, puedes mantenerlo en su CSS actual */
}

/* gaps entre botones (solo el 2º y 3º) */
.guia-cta-card > a.btn-cta:nth-of-type(n+2){
  margin-left: 12px;
}

/* En móvil: apilados a 100% */
@media (max-width: 768px){
  .guia-cta-card > a.btn-cta{
    width: 100%;
    margin-left: 0 !important;
    margin-top: 0.75rem;
  }
}







/* =========================================
   FIX: CTA final con 3 botones perfectos (sin wrap raro)
   ========================================= */

.guia-cta-card{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* El contenido de texto ocupa toda la fila */
.guia-cta-card > h2,
.guia-cta-card > p{
  grid-column: 1 / -1;
}

/* Los botones ya no necesitan widths ni márgenes */
.guia-cta-card > a.btn-cta{
  width: auto !important;
  margin: 0 !important;
  display: flex;             /* o inline-flex si prefieres */
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* En móvil: uno debajo de otro */
@media (max-width: 768px){
  .guia-cta-card{
    grid-template-columns: 1fr;
  }
}