/* ==========================================================================
   PÁGINAS — Encabezados, blog, error 404, textos legales
   Catalina Casa de Té — https://mktactual.com/
   ========================================================================== */

/* ==========================================================================
   1. ENCABEZADO DE PÁGINA
   El bloque crema con el título que abre las páginas internas.
   ========================================================================== */

.catalina-pagina-hero,
.catalina-entrada-hero {
  padding: 68px 24px 56px;
  background: linear-gradient(160deg, var(--catalina-light-cream) 0%, #fff 100%);
  border-bottom: 1px solid rgba(219, 212, 191, 0.5);
  text-align: center;
}

.catalina-pagina-hero-inner,
.catalina-entrada-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.catalina-pagina-titulo,
.catalina-entrada-titulo {
  font-family: var(--catalina-font-heading);
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--catalina-dark);
  margin: 14px 0 16px;
}

.catalina-pagina-bajada {
  font-family: var(--catalina-font-body);
  font-size: 1.02rem;
  line-height: 1.75;
  color: #6b6157;
  margin: 0;
}

.catalina-pagina-portada,
.catalina-entrada-portada {
  max-width: 1100px;
  margin: -20px auto 0;
  padding: 0 24px;
}

.catalina-pagina-portada img,
.catalina-entrada-portada img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 44px rgba(164, 94, 68, 0.15);
}

/* ==========================================================================
   2. CONTENIDO DE PÁGINA
   Columna de lectura cómoda para lo que se escribe en el editor.
   ========================================================================== */

.catalina-contenido {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  font-family: var(--catalina-font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: #4a423b;
}

.catalina-contenido-ancho {
  max-width: var(--catalina-container-width);
}

.catalina-contenido > * + * {
  margin-top: 1.35em;
}

.catalina-contenido h2 {
  font-family: var(--catalina-font-heading);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 600;
  color: var(--catalina-dark);
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: 1.25;
}

.catalina-contenido h3 {
  font-family: var(--catalina-font-heading);
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
  font-weight: 600;
  color: var(--catalina-brown-text);
  margin-top: 1.7em;
  margin-bottom: 0.4em;
}

.catalina-contenido h4 {
  font-family: var(--catalina-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--catalina-dark);
  margin-top: 1.5em;
}

.catalina-contenido a {
  color: var(--catalina-terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(164, 94, 68, 0.32);
  transition: border-color 0.2s ease;
}

.catalina-contenido a:hover {
  border-bottom-color: var(--catalina-terracotta);
}

.catalina-contenido ul,
.catalina-contenido ol {
  padding-left: 1.4em;
}

.catalina-contenido li + li {
  margin-top: 0.5em;
}

.catalina-contenido ul li::marker {
  color: var(--catalina-terracotta);
}

.catalina-contenido ol li::marker {
  color: var(--catalina-terracotta);
  font-weight: 700;
}

.catalina-contenido blockquote {
  margin: 2em 0;
  padding: 22px 28px;
  background: var(--catalina-light-cream);
  border-left: 3px solid var(--catalina-salmon);
  border-radius: 0 12px 12px 0;
  font-family: var(--catalina-font-heading);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--catalina-brown-text);
}

.catalina-contenido blockquote p:last-child {
  margin-bottom: 0;
}

.catalina-contenido img {
  border-radius: 14px;
  height: auto;
}

.catalina-contenido figure {
  margin: 2em 0;
}

.catalina-contenido figcaption {
  margin-top: 10px;
  font-size: 0.83rem;
  color: #8d8378;
  text-align: center;
}

.catalina-contenido hr {
  margin: 2.6em 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175, 129, 105, 0.4), transparent);
}

.catalina-contenido table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.catalina-contenido th,
.catalina-contenido td {
  padding: 11px 14px;
  border: 1px solid rgba(219, 212, 191, 0.8);
  text-align: left;
}

.catalina-contenido th {
  background: var(--catalina-light-cream);
  font-weight: 600;
  color: var(--catalina-dark);
}

.catalina-contenido code {
  padding: 2px 7px;
  background: var(--catalina-light-cream);
  border-radius: 5px;
  font-size: 0.88em;
}

.catalina-contenido pre {
  padding: 20px;
  background: #2c2c2c;
  color: #f0ebdc;
  border-radius: 12px;
  overflow-x: auto;
}

/* Alineaciones del editor de bloques */
.catalina-contenido .alignwide {
  margin-left: calc(50% - 50vw + 12px);
  margin-right: calc(50% - 50vw + 12px);
  max-width: 100vw;
  width: auto;
}

.catalina-contenido .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: auto;
}

.catalina-contenido .alignleft {
  float: left;
  margin: 0.4em 1.6em 1.2em 0;
  max-width: 46%;
}

.catalina-contenido .alignright {
  float: right;
  margin: 0.4em 0 1.2em 1.6em;
  max-width: 46%;
}

.catalina-contenido .aligncenter {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ==========================================================================
   3. TEXTOS LEGALES
   ========================================================================== */

.catalina-contenido-legal {
  font-size: 0.96rem;
  line-height: 1.85;
}

.catalina-legal-fecha {
  font-family: var(--catalina-font-body);
  font-size: 0.83rem;
  color: #8d8378;
  margin: 0;
}

.catalina-legal-pie {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 24px 72px;
}

.catalina-legal-pie p {
  padding: 20px 24px;
  background: var(--catalina-light-cream);
  border-radius: 14px;
  font-family: var(--catalina-font-body);
  font-size: 0.92rem;
  color: #5c5147;
  margin: 0;
}

.catalina-legal-pie a {
  color: var(--catalina-terracotta);
  font-weight: 600;
}

/* ==========================================================================
   4. BLOG
   ========================================================================== */

.catalina-blog-grid {
  max-width: var(--catalina-container-width);
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.catalina-entrada-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(219, 212, 191, 0.6);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.catalina-entrada-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(164, 94, 68, 0.14);
  border-color: rgba(164, 94, 68, 0.3);
}

.entrada-card-imagen {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--catalina-light-cream);
}

.entrada-card-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.catalina-entrada-card:hover .entrada-card-imagen img {
  transform: scale(1.07);
}

.entrada-card-sin-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--catalina-beige);
}

.entrada-card-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}

.entrada-card-categoria {
  font-family: var(--catalina-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--catalina-olive);
  margin-bottom: 9px;
}

.entrada-card-titulo {
  font-family: var(--catalina-font-heading);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 11px;
}

.entrada-card-titulo a {
  color: var(--catalina-dark);
  text-decoration: none;
  transition: color 0.22s ease;
}

.entrada-card-titulo a:hover {
  color: var(--catalina-terracotta);
}

.entrada-card-resumen {
  flex: 1 1 auto;
  font-family: var(--catalina-font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: #6b6157;
  margin: 0 0 18px;
}

.entrada-card-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid rgba(219, 212, 191, 0.7);
}

.entrada-card-pie time {
  font-family: var(--catalina-font-body);
  font-size: 0.78rem;
  color: #8d8378;
}

.entrada-card-enlace {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--catalina-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--catalina-terracotta);
  text-decoration: none;
  transition: gap 0.24s ease;
}

.catalina-entrada-card:hover .entrada-card-enlace {
  gap: 10px;
}

/* --- Entrada individual --- */
.catalina-entrada-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--catalina-font-body);
  font-size: 0.85rem;
  color: #8d8378;
}

.catalina-entrada-meta .separador {
  color: var(--catalina-beige);
}

.catalina-entrada-etiquetas {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.etiquetas-titulo {
  font-family: var(--catalina-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8d8378;
  margin-right: 4px;
}

.catalina-entrada-etiquetas a {
  padding: 6px 14px;
  background: var(--catalina-light-cream);
  border-radius: 18px;
  font-family: var(--catalina-font-body);
  font-size: 0.78rem;
  color: var(--catalina-brown-text);
  text-decoration: none;
  transition: background 0.22s ease, color 0.22s ease;
}

.catalina-entrada-etiquetas a:hover {
  background: var(--catalina-terracotta);
  color: var(--catalina-light-cream);
}

.catalina-entrada-navegacion {
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 24px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  border-top: 1px solid rgba(219, 212, 191, 0.7);
}

/*
 * Cada vecina es una tarjeta con su rótulo («Entrada anterior» / «Entrada
 * siguiente») encima del título. Antes eran dos enlaces de texto con una
 * flecha pegada al título, sobre un fondo crema igual al de la página: no se
 * leían como algo en lo que se pueda pulsar.
 */
.catalina-entrada-navegacion a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid rgba(219, 212, 191, 0.8);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}

.catalina-entrada-navegacion a:hover {
  border-color: var(--catalina-salmon);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(164, 94, 68, 0.12);
}

.catalina-entrada-navegacion .nav-etiqueta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--catalina-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--catalina-olive);
}

.catalina-entrada-navegacion .nav-titulo {
  font-family: var(--catalina-font-heading);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--catalina-dark);
}

.catalina-entrada-navegacion a:hover .nav-titulo {
  color: var(--catalina-terracotta);
}

/* La flecha de «anterior» apunta hacia atrás. */
.catalina-entrada-navegacion .nav-anterior .nav-etiqueta svg {
  transform: rotate(180deg);
}

.catalina-entrada-navegacion .nav-siguiente {
  text-align: right;
}

.catalina-entrada-navegacion .nav-siguiente .nav-etiqueta {
  justify-content: flex-end;
}

/* Con una sola vecina, ocupa la fila entera en vez de dejar un hueco. */
.catalina-entrada-navegacion.tiene-una {
  grid-template-columns: 1fr;
}

@media (max-width: 600px) {
  .catalina-entrada-navegacion {
    grid-template-columns: 1fr;
  }

  .catalina-entrada-navegacion .nav-siguiente,
  .catalina-entrada-navegacion .nav-siguiente .nav-etiqueta {
    text-align: left;
    justify-content: flex-start;
  }
}

/* --- Paginación --- */
.catalina-blog .navigation.pagination {
  max-width: var(--catalina-container-width);
  margin: 0 auto;
  padding: 0 24px 72px;
}

.catalina-blog .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.catalina-blog .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid rgba(219, 212, 191, 0.8);
  border-radius: 11px;
  font-family: var(--catalina-font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: #5c5147;
  text-decoration: none;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.catalina-blog .page-numbers:hover {
  background: var(--catalina-light-cream);
  border-color: var(--catalina-terracotta);
  color: var(--catalina-terracotta);
}

.catalina-blog .page-numbers.current {
  background: var(--catalina-terracotta);
  border-color: var(--catalina-terracotta);
  color: var(--catalina-light-cream);
}

.catalina-blog .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ==========================================================================
   5. ERROR 404 Y SIN RESULTADOS
   ========================================================================== */

.catalina-404 {
  padding: 80px 24px 90px;
  background: linear-gradient(160deg, var(--catalina-light-cream) 0%, #fff 100%);
}

.catalina-404-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.catalina-404-numero {
  display: block;
  font-family: var(--catalina-font-heading);
  font-size: clamp(4.5rem, 16vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--catalina-beige);
  letter-spacing: 4px;
}

.catalina-404 h1 {
  font-family: var(--catalina-font-heading);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 600;
  color: var(--catalina-dark);
  margin: 6px 0 14px;
}

.catalina-404 > .catalina-404-inner > p {
  font-family: var(--catalina-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: #6b6157;
  max-width: 480px;
  margin: 0 auto 38px;
}

.catalina-404-enlaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 38px;
}

.catalina-404-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 20px;
  background: #fff;
  border: 1px solid rgba(219, 212, 191, 0.7);
  border-radius: 16px;
  text-decoration: none;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.catalina-404-tarjeta:hover {
  transform: translateY(-5px);
  border-color: rgba(164, 94, 68, 0.32);
  box-shadow: 0 12px 32px rgba(164, 94, 68, 0.12);
}

.catalina-404-tarjeta svg {
  color: var(--catalina-terracotta);
  margin-bottom: 6px;
}

.catalina-404-tarjeta strong {
  font-family: var(--catalina-font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--catalina-dark);
}

.catalina-404-tarjeta span {
  font-family: var(--catalina-font-body);
  font-size: 0.82rem;
  color: #8d8378;
  text-align: center;
}

.catalina-404-buscador {
  display: flex;
  justify-content: center;
  margin-bottom: 34px;
}

.catalina-sin-resultados {
  text-align: center;
}

.catalina-buscador-hero {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* ==========================================================================
   6. BOLETÍN
   ========================================================================== */

.catalina-newsletter-form {
  max-width: 520px;
  margin: 0 auto;
}

.catalina-newsletter-form .mailpoet_form {
  padding: 0 !important;
  background: transparent !important;
}

.catalina-newsletter-form .mailpoet_text,
.catalina-newsletter-form input[type="email"],
.catalina-newsletter-form input[type="text"] {
  width: 100%;
  padding: 14px 18px !important;
  font-family: var(--catalina-font-body) !important;
  font-size: 0.95rem !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 11px !important;
  box-sizing: border-box;
}

.catalina-newsletter-form .mailpoet_submit,
.catalina-newsletter-form input[type="submit"] {
  width: 100%;
  padding: 14px 28px !important;
  background: var(--catalina-terracotta) !important;
  color: var(--catalina-light-cream) !important;
  font-family: var(--catalina-font-body) !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-radius: 11px !important;
  cursor: pointer;
  transition: background 0.26s ease, transform 0.2s ease;
}

.catalina-newsletter-form .mailpoet_submit:hover,
.catalina-newsletter-form input[type="submit"]:hover {
  background: var(--catalina-brown-text) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

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

@media (max-width: 768px) {
  .catalina-pagina-hero,
  .catalina-entrada-hero {
    padding: 46px 20px 38px;
  }

  .catalina-contenido {
    padding: 40px 20px 56px;
  }

  .catalina-blog-grid {
    grid-template-columns: 1fr;
    padding: 40px 20px 30px;
  }

  .catalina-entrada-navegacion {
    grid-template-columns: 1fr;
  }

  .catalina-entrada-navegacion .nav-siguiente {
    text-align: left;
  }

  /* Las alineaciones anchas se normalizan en móvil */
  .catalina-contenido .alignwide,
  .catalina-contenido .alignfull {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .catalina-contenido .alignleft,
  .catalina-contenido .alignright {
    float: none;
    margin: 1.4em auto;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .catalina-404 {
    padding: 54px 18px 64px;
  }

  .catalina-404-enlaces {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   7. CONTENIDO LIBRE
   Plantilla "Contenido libre (solo el editor)": pinta lo que se pegue en el
   editor sin envolverlo en nada. Pensada para incrustados que traen su
   propio diseño (quiz, iframes, formularios de otros plugins).
   ========================================================================== */

.catalina-pagina-libre {
  display: block;
}

.catalina-contenido-libre {
  width: 100%;
  /* Un respiro para que el incrustado no quede pegado al menú ni al pie. */
  padding: 32px 20px 56px;
}

/* Lo que se pegue ocupa el ancho disponible sin desbordar en móvil. */
.catalina-contenido-libre > * {
  max-width: 100%;
}

.catalina-contenido-libre iframe,
.catalina-contenido-libre embed,
.catalina-contenido-libre object,
.catalina-contenido-libre video {
  max-width: 100%;
}

/* Las tablas anchas se desplazan solas en vez de romper la página. */
.catalina-contenido-libre table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

@media (max-width: 640px) {
  .catalina-contenido-libre {
    padding: 20px 14px 40px;
  }
}

/* ==========================================================================
   BLOG · COMENTARIOS DE LA ENTRADA
   --------------------------------------------------------------------------
   Este bloque no tenía ni una línea de CSS: el formulario salía con el aspecto
   crudo del navegador y, al no estar dentro de ninguna columna, sus etiquetas
   arrancaban pegadas al borde izquierdo de la pantalla. Aquí se le da la misma
   columna de lectura que el resto de la entrada y el lenguaje de la casa.
   ========================================================================== */
.catalina-comentarios {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 80px;
  font-family: var(--catalina-font-body);
  color: #4a423b;
}

.catalina-comentarios-titulo,
.catalina-comentarios .comment-reply-title {
  font-family: var(--catalina-font-heading);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 600;
  color: var(--catalina-terracotta);
  margin: 0 0 8px;
  line-height: 1.25;
}

/* --- La conversación --- */
.catalina-lista-comentarios {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
}

.catalina-lista-comentarios .children {
  list-style: none;
  margin: 18px 0 0;
  /* La respuesta se sangra y se marca con un filete: se lee de quién cuelga. */
  padding: 0 0 0 22px;
  border-left: 2px solid rgba(219, 212, 191, 0.8);
}

.catalina-lista-comentarios li.comment {
  margin-bottom: 18px;
}

.catalina-comentarios .comment-body {
  padding: 22px 24px;
  background: var(--catalina-light-cream);
  border: 1px solid rgba(219, 212, 191, 0.6);
  border-radius: 16px;
}

.catalina-comentarios .comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.catalina-comentarios .comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--catalina-dark);
}

.catalina-comentarios .comment-author img.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: var(--catalina-shadow-sm);
}

.catalina-comentarios .comment-author .says {
  /* «dice:» no aporta nada y ensucia la línea. */
  display: none;
}

.catalina-comentarios .comment-metadata {
  font-size: 0.78rem;
  color: #8d8378;
}

.catalina-comentarios .comment-metadata a {
  color: inherit;
  text-decoration: none;
}

.catalina-comentarios .comment-metadata a:hover {
  color: var(--catalina-terracotta);
}

.catalina-comentarios .comment-content {
  font-size: 0.96rem;
  line-height: 1.75;
}

.catalina-comentarios .comment-content p:last-child {
  margin-bottom: 0;
}

.catalina-comentarios .reply {
  margin-top: 10px;
}

.catalina-comentarios .comment-reply-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 15px;
  border: 1px solid var(--catalina-beige);
  border-radius: 999px;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--catalina-terracotta);
  text-decoration: none;
  transition: var(--catalina-transition);
}

.catalina-comentarios .comment-reply-link:hover {
  background: var(--catalina-terracotta);
  border-color: var(--catalina-terracotta);
  color: #fff;
}

.catalina-comentarios .comment-awaiting-moderation {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--catalina-brown);
}

.catalina-comentarios-cerrados {
  padding: 16px 20px;
  background: var(--catalina-light-cream);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--catalina-brown);
}

/* --- El formulario --- */
.catalina-comentarios .comment-respond {
  padding: 30px 28px 32px;
  background: #fff;
  border: 1px solid rgba(219, 212, 191, 0.7);
  border-radius: 20px;
  box-shadow: var(--catalina-shadow-sm);
}

.catalina-comentarios .comment-notes,
.catalina-comentarios .logged-in-as {
  font-size: 0.85rem;
  color: #8d8378;
  margin: 0 0 22px;
}

.catalina-comentarios .logged-in-as a {
  color: var(--catalina-terracotta);
  text-decoration: none;
}

.catalina-comentarios .comment-form p {
  margin: 0 0 18px;
}

.catalina-comentarios .comment-form label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--catalina-olive);
}

.catalina-comentarios .comment-form input[type="text"],
.catalina-comentarios .comment-form input[type="email"],
.catalina-comentarios .comment-form input[type="url"],
.catalina-comentarios .comment-form textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--catalina-light-cream);
  border: 1px solid rgba(219, 212, 191, 0.9);
  border-radius: 12px;
  font-family: var(--catalina-font-body);
  font-size: 0.95rem;
  color: #4a423b;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.catalina-comentarios .comment-form textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.7;
}

.catalina-comentarios .comment-form input:focus,
.catalina-comentarios .comment-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--catalina-salmon);
  box-shadow: 0 0 0 3px rgba(205, 146, 116, 0.18);
}

.catalina-comentarios .comment-form input::placeholder,
.catalina-comentarios .comment-form textarea::placeholder {
  color: #b3a99d;
}

/* Nombre y correo en dos columnas: son cortos y así el formulario no se alarga. */
.catalina-comentarios .comment-form-author,
.catalina-comentarios .comment-form-email {
  display: inline-block;
  width: calc(50% - 9px);
  vertical-align: top;
}

.catalina-comentarios .comment-form-author {
  margin-right: 14px;
}

.catalina-comentarios .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.catalina-comentarios .comment-form-cookies-consent input {
  margin-top: 3px;
  accent-color: var(--catalina-terracotta);
}

.catalina-comentarios .comment-form-cookies-consent label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #6b6157;
}

.catalina-comentarios .form-submit {
  margin: 4px 0 0;
}

.catalina-comentarios .form-submit input[type="submit"] {
  cursor: pointer;
  border: 0;
}

.catalina-comentarios .comment-reply-title small {
  display: block;
  margin-top: 6px;
  font-family: var(--catalina-font-body);
  font-size: 0.82rem;
  font-weight: 400;
}

.catalina-comentarios .comment-reply-title small a {
  color: var(--catalina-brown);
}

/* Paginación de comentarios. */
.catalina-comentarios .comments-pagination {
  margin-bottom: 40px;
}

.catalina-comentarios .comments-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.catalina-comentarios .comments-pagination a,
.catalina-comentarios .comments-pagination span {
  padding: 8px 16px;
  border: 1px solid var(--catalina-beige);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--catalina-terracotta);
  text-decoration: none;
}

@media (max-width: 600px) {
  .catalina-comentarios {
    padding: 0 18px 60px;
  }

  .catalina-comentarios .comment-respond {
    padding: 24px 20px 26px;
  }

  .catalina-comentarios .comment-body {
    padding: 18px 18px;
  }

  /* En móvil, nombre y correo uno debajo del otro. */
  .catalina-comentarios .comment-form-author,
  .catalina-comentarios .comment-form-email {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .catalina-comentarios .comment-author img.avatar {
    width: 36px;
    height: 36px;
  }

  .catalina-lista-comentarios .children {
    padding-left: 14px;
  }
}

/* ==========================================================================
   QUIZ «TU TAZA IDEAL»
   --------------------------------------------------------------------------
   El cuestionario lo trae RevenueHunt desde sus servidores. Si no llega
   (servicio caído, bloqueador de anuncios, red lenta) la página se quedaba
   completamente en blanco. Ahora siempre hay título, entradilla y, si el
   recuadro no aparece, un aviso con salidas. Ver inc/quiz.php.
   ========================================================================== */

.catalina-quiz {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 0 16px;
  box-sizing: border-box;
}

.catalina-quiz-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 26px;
}

body.catalina-redesign .catalina-quiz-intro .catalina-quiz-titulo {
  font-family: var(--catalina-font-heading);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--catalina-terracotta);
  margin: 10px 0 12px;
}

.catalina-quiz-intro p {
  font-family: var(--catalina-font-body);
  font-size: 0.98rem;
  line-height: 1.7;
  color: #6b6157;
  margin: 0;
}

.catalina-quiz-caja[hidden] {
  display: none;
}

/* Aviso de emergencia: solo se ve si el cuestionario no llegó a cargar. */
.catalina-quiz-respaldo[hidden] {
  display: none;
}

.catalina-quiz-respaldo {
  max-width: 620px;
  margin: 0 auto;
  padding: 34px 26px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(205, 187, 155, 0.55);
  border-radius: 16px;
}

.catalina-quiz-respaldo p {
  font-family: var(--catalina-font-body);
  font-size: 0.96rem;
  line-height: 1.7;
  color: #6b6157;
  margin: 0 0 18px;
}

.catalina-quiz-respaldo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
}

@media (max-width: 640px) {
  .catalina-quiz-intro {
    margin-bottom: 20px;
  }

  .catalina-quiz-respaldo {
    padding: 26px 18px;
  }

  .catalina-quiz-respaldo-acciones .slide-cta {
    width: 100%;
    justify-content: center;
  }
}