:root {
  --texto-corrido: 'Poppins', sans-serif;
  --titulo: 'Raleway', sans-serif;
  --sucess: #630000;
  --claro: #F9F0CD;
  --primary: #CE1212;
  --text: #707070;
  --black: #000;
  --white: #fff;
  --grey: #303030;
  --blackish: #1b1717;
  --cream: #eeebdd;
  --padding-rp: 0 6%;
  --padding-rp-hd: 0 12%;
  --radius: 5px;
  --sombra: 0 10px 20px rgba(0, 0, 0, .2);
  --transicion: .4s all ease;

  /* Botón de WhatsApp: cambia aquí color y tamaño */
  --wpp-color: var(--primary);   /* verde oficial de WhatsApp: #25D366 */
  --wpp-size: 60px;
}

/*--------------------------------------------------------------
>>> Botón flotante de WhatsApp
--------------------------------------------------------------*/
/*
  Antes:
  · El ícono salía diminuto: el SVG trae su propio círculo con mucho
    margen, y agrandar la imagen al 150% no lo arreglaba.
  · El anillo animado quedaba ENCIMA del ícono y lo tapaba con rojo
    transparente (se veía "lavado").
  · La animación crecía y luego se encogía de golpe, dando un salto.
  Ahora el ícono se dibuja con CSS (nítido a cualquier tamaño), el
  anillo va detrás y la onda sale suave hacia afuera.
*/
#whatsapp .wtsapp {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  width: var(--wpp-size);
  height: var(--wpp-size);
  border-radius: 50%;
  background-color: var(--wpp-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
  isolation: isolate;          /* el anillo queda detrás del botón */
  transition: transform .3s ease, box-shadow .3s ease;
}
#whatsapp .wtsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .32);
}
#whatsapp .wtsapp:focus-visible {
  outline: 3px solid var(--wpp-color);
  outline-offset: 4px;
}

/* Se oculta la imagen SVG y se dibuja el ícono blanco con CSS */
#whatsapp .wtsapp img {
  display: none !important;
}
#whatsapp .wtsapp::after {
  content: "";
  width: 52%;
  height: 52%;
  background-color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4a.5.5 0 0 0 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4a.5.5 0 0 0 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Onda que sale del botón: suave, detrás y sin "salto" */
#whatsapp .wtsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--wpp-color);
  z-index: -1;
  animation: wpp-onda 2.4s ease-out infinite;
}
@keyframes wpp-onda {
  0%   { transform: scale(1);   opacity: .45; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Quien tiene activado "reducir movimiento" no ve la onda */
@media (prefers-reduced-motion: reduce) {
  #whatsapp .wtsapp::before {
    animation: none;
    opacity: 0;
  }
  #whatsapp .wtsapp,
  #whatsapp .wtsapp:hover {
    transition: none;
    transform: none;
  }
}

/* Pantallas táctiles: sin efecto de agrandar que se queda pegado */
@media (hover: none) {
  #whatsapp .wtsapp:hover {
    transform: none;
  }
}


/*===================================================================*/
/*=                        5. Responsive                            =*/
/*===================================================================*/

@media (max-width: 768px) {

  /* WhatsApp: un poco más pequeño y más abajo en celular */
  :root {
    --wpp-size: 54px;
  }
  #whatsapp .wtsapp {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  /* Blog, archivo, entradas y 404
     (antes este selector estaba repetido dos veces: se unificó) */
  .error404 main#primary,
  .archive main#primary,
  .single main#primary,
  .blog main#primary {
    flex-direction: column;
    padding: 5%;
  }

  .contentBlog,
  .filtrosBlog,
  .contentBlog .mk-post-recent {
    width: 100%;
    margin: 10px 0;
  }

  .filtrosBlog #secondary {
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .filtrosBlog #secondary #search-2 input[type="submit"] {
    width: 25px;
  }

  .single .post-thumbnail {
    width: 100%;
    height: 250px;
    margin: 20px 0;
  }
  .single .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* la foto no se deforma */
  }
  .single .contBoxes {
    flex-direction: column;
  }
  .single .contBoxes .mk-post-recent {
    width: 100%;                /* antes 80%: quedaba angosto y descentrado */
    margin: 20px 0;
  }
  .relacionados-new,
  .single main#primary .post {
    width: 100%;
  }
  .moreRead .content-boxes-new {
    display: initial;
  }
  .single h1.entry-title {
    font-size: clamp(1.6rem, 1.2rem + 2vw, 1.9rem) !important;
    line-height: 1.2;
  }

  .formContact > div {
    width: 100% !important;
  }

  .copymk {
    padding: 20px !important;
    flex-direction: column-reverse;
    text-align: center;
  }
}