/*
Theme Name: Pura PYME
Theme URI: https://purapyme.com
Author: Colmena Comunicación
Author URI: https://colmenacomunicacion.com
Description: Tema para la comunidad de pymes Pura PYME. Incluye directorio de empresas, portada con novedades y pymes destacadas, plantillas para podcast y chat comunitario.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pura-pyme
Tags: blog, community, custom-logo, custom-menu, featured-images, two-columns
*/

/* ===== Variables (colores del logo) ===== */
:root {
  --pp-azul: #21386f;      /* azul marino del "Pura" */
  --pp-celeste: #6fa8b8;   /* celeste del globo de diálogo */
  --pp-naranja: #f29b38;   /* naranja del "PYME" */
  --pp-crema: #f7efe3;     /* fondo crema */
  --pp-blanco: #ffffff;
  --pp-texto: #2b3245;
  --pp-radius: 18px;
  --pp-sombra: 0 6px 24px rgba(33, 56, 111, 0.10);
}

/* ===== Base ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Baloo 2', 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--pp-texto);
  background: var(--pp-crema);
}

img { max-width: 100%; height: auto; }

a { color: var(--pp-azul); }
a:hover { color: var(--pp-naranja); }

h1, h2, h3, h4 {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  color: var(--pp-azul);
  line-height: 1.2;
}

.pp-script { font-family: 'Pacifico', cursive; font-weight: 400; }
.pp-naranja { color: var(--pp-naranja); }

.pp-contenedor {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Botones ===== */
.pp-boton,
button, input[type="submit"] {
  display: inline-block;
  background: var(--pp-naranja);
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 12px 30px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.pp-boton:hover, button:hover, input[type="submit"]:hover {
  background: var(--pp-azul);
  transform: translateY(-2px);
}
.pp-boton--secundario { background: var(--pp-celeste); }
.pp-boton--contorno {
  background: transparent;
  color: var(--pp-azul) !important;
  border: 2px solid var(--pp-azul);
}

/* ===== Cabecera ===== */
.pp-header {
  background: var(--pp-blanco);
  box-shadow: var(--pp-sombra);
  position: sticky;
  top: 0;
  z-index: 100;
}
.pp-header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  max-width: 1140px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.pp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.pp-logo img { max-height: 60px; width: auto; }
.pp-logo__texto { font-size: 30px; text-decoration: none; }
.pp-logo__texto .pura { font-family: 'Pacifico', cursive; color: var(--pp-azul); }
.pp-logo__texto .pyme { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: var(--pp-naranja); text-transform: uppercase; }

.pp-menu ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex-wrap: wrap; }
.pp-menu a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: var(--pp-azul);
}
.pp-menu a:hover, .pp-menu .current-menu-item > a {
  background: var(--pp-crema);
  color: var(--pp-naranja);
}

/* ===== Héroe (portada) ===== */
.pp-heroe {
  background: linear-gradient(135deg, var(--pp-azul) 0%, #2c4a8f 100%);
  color: #fff;
  padding: 80px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pp-heroe::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(111, 168, 184, .25);
}
.pp-heroe h1 { color: #fff; font-size: clamp(34px, 5vw, 56px); margin: 0 0 10px; }
.pp-heroe h1 .pp-script { color: var(--pp-celeste); }
.pp-heroe h1 .pp-naranja { color: var(--pp-naranja); }
.pp-heroe p { font-size: 20px; max-width: 640px; margin: 0 auto 30px; opacity: .92; }
.pp-heroe .pp-boton { margin: 0 8px 10px; }

/* ===== Secciones ===== */
.pp-seccion { padding: 60px 0; }
.pp-seccion--blanca { background: var(--pp-blanco); }
.pp-seccion__titulo { text-align: center; font-size: 34px; margin: 0 0 8px; }
.pp-seccion__sub { text-align: center; margin: 0 auto 40px; max-width: 600px; color: #5a6378; }

/* ===== Tarjetas ===== */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }

.pp-tarjeta {
  background: var(--pp-blanco);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease;
}
.pp-tarjeta:hover { transform: translateY(-4px); }
.pp-tarjeta__imagen img { width: 100%; height: 200px; object-fit: cover; display: block; }
.pp-tarjeta__cuerpo { padding: 22px 24px 26px; flex: 1; }
.pp-tarjeta__cuerpo h3 { margin: 0 0 8px; font-size: 21px; }
.pp-tarjeta__cuerpo h3 a { text-decoration: none; }
.pp-tarjeta__meta { font-size: 14px; color: #8a91a5; margin-bottom: 8px; }

.pp-etiqueta {
  display: inline-block;
  background: var(--pp-naranja);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.pp-etiqueta--celeste { background: var(--pp-celeste); }

/* ===== Directorio ===== */
.pp-empresa__contacto { list-style: none; margin: 14px 0 0; padding: 0; font-size: 15px; }
.pp-empresa__contacto li { margin-bottom: 6px; }
.pp-empresa__contacto a { text-decoration: none; font-weight: 600; }

/* ===== Contenido / blog ===== */
.pp-contenido {
  background: var(--pp-blanco);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-sombra);
  padding: 40px;
  margin: 40px auto;
  max-width: 820px;
}
.pp-contenido h1.entry-title { margin-top: 0; }
.pp-contenido img { border-radius: 12px; }

/* ===== Podcast ===== */
.pp-podcast-embed iframe { width: 100%; border: 0; border-radius: var(--pp-radius); }
.pp-video-marco {
  position: relative; padding-bottom: 56.25%; height: 0;
  border-radius: var(--pp-radius); overflow: hidden; box-shadow: var(--pp-sombra);
}
.pp-video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Redes ===== */
.pp-redes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pp-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pp-celeste); color: #fff !important;
  text-decoration: none; font-weight: 800; font-size: 15px;
  transition: background .15s ease;
}
.pp-redes a:hover { background: var(--pp-naranja); }

/* ===== Formularios ===== */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="tel"], textarea, select {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid #dfd7c8;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  background: #fff;
}
input:focus, textarea:focus { outline: none; border-color: var(--pp-celeste); }
label { font-weight: 700; color: var(--pp-azul); }

/* ===== Aviso chat / cajas ===== */
.pp-aviso {
  background: var(--pp-blanco);
  border-left: 6px solid var(--pp-celeste);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: var(--pp-sombra);
  margin: 24px 0;
}

/* ===== Pie de página ===== */
.pp-footer {
  background: var(--pp-azul);
  color: #cfd8ec;
  padding: 50px 0 30px;
  margin-top: 60px;
}
.pp-footer a { color: #fff; text-decoration: none; }
.pp-footer a:hover { color: var(--pp-naranja); }
.pp-footer__columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}
.pp-footer h4 { color: #fff; margin-top: 0; }
.pp-footer ul { list-style: none; margin: 0; padding: 0; }
.pp-footer li { margin-bottom: 8px; }
.pp-footer__creditos {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 20px;
  text-align: center;
  font-size: 14px;
}

/* ===== Paginación ===== */
.pp-paginacion { text-align: center; margin: 40px 0; }
.pp-paginacion .page-numbers {
  display: inline-block; padding: 8px 16px; margin: 0 3px;
  background: #fff; border-radius: 999px; text-decoration: none; font-weight: 700;
}
.pp-paginacion .current { background: var(--pp-naranja); color: #fff; }

/* ===== Dinamismo y diversión ===== */
@keyframes pp-flotar {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
}
@keyframes pp-marquesina {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes pp-titilar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}

/* Burbujas decorativas del héroe (como el globo del logo) */
.pp-heroe::before {
  content: "";
  position: absolute;
  left: -100px; bottom: -120px;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 16px solid rgba(242, 155, 56, .35);
}
.pp-heroe__chispa {
  position: absolute;
  width: 10px; height: 46px;
  border-radius: 999px;
  background: var(--pp-naranja);
  animation: pp-titilar 2.4s ease-in-out infinite;
}
.pp-heroe__chispa--1 { top: 60px; right: 16%; transform: rotate(28deg); }
.pp-heroe__chispa--2 { top: 40px; right: 12%; transform: rotate(0deg); animation-delay: .4s; }
.pp-heroe__chispa--3 { top: 64px; right: 8%; transform: rotate(-28deg); animation-delay: .8s; }

/* Insignia flotante del héroe */
.pp-badge-flotante {
  display: inline-block;
  background: #fff;
  color: var(--pp-azul);
  border-radius: 999px;
  padding: 8px 22px;
  font-weight: 800;
  font-size: 16px;
  transform: rotate(-3deg);
  animation: pp-flotar 4s ease-in-out infinite;
  margin-bottom: 22px;
  box-shadow: var(--pp-sombra);
}

/* Cinta animada (marquesina) */
.pp-ticker {
  background: var(--pp-naranja);
  color: #fff;
  overflow: hidden;
  padding: 13px 0;
}
.pp-ticker__pista {
  display: flex;
  gap: 46px;
  width: max-content;
  white-space: nowrap;
  font-weight: 800;
  font-size: 18px;
  animation: pp-marquesina 22s linear infinite;
}
.pp-ticker__pista span { display: inline-flex; align-items: center; gap: 46px; }

/* Tarjetas juguetonas: levemente inclinadas, se enderezan al pasar el mouse */
.pp-grid--vivo .pp-tarjeta:nth-child(odd) { transform: rotate(-1.3deg); }
.pp-grid--vivo .pp-tarjeta:nth-child(even) { transform: rotate(1.3deg); }
.pp-grid--vivo .pp-tarjeta:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); }

.pp-etiqueta--girada { transform: rotate(-4deg); }

/* PYME de la semana (bloque destacado de portada) */
.pp-spotlight {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--pp-celeste);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--pp-sombra);
  position: relative;
}
.pp-spotlight__texto { padding: 44px 40px; color: #fff; position: relative; }
.pp-spotlight__texto h3 { color: #fff; font-size: 30px; margin: 12px 0 10px; }
.pp-spotlight__texto h3 a { color: #fff; text-decoration: none; }
.pp-spotlight__texto p { font-size: 17px; opacity: .95; }
.pp-spotlight__cinta {
  display: inline-block;
  background: var(--pp-azul);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 18px;
  transform: rotate(-3deg);
}
.pp-spotlight__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 260px; }
.pp-spotlight__imagen--vacia {
  background: repeating-linear-gradient(45deg, #7fb3c2, #7fb3c2 24px, #6fa8b8 24px, #6fa8b8 48px);
  min-height: 260px;
}
@media (max-width: 760px) {
  .pp-spotlight { grid-template-columns: 1fr; }
}

/* Ondas divisorias entre secciones */
.pp-onda { line-height: 0; }
.pp-onda svg { width: 100%; height: 46px; display: block; }

/* Botones con rebote */
.pp-boton:active { transform: scale(.96); }

/* Respeto por quienes prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .pp-badge-flotante, .pp-heroe__chispa, .pp-ticker__pista { animation: none; }
}

/* ===== Responsive ===== */
@media (max-width: 700px) {
  .pp-header__interior { justify-content: center; }
  .pp-heroe { padding: 50px 20px; }
  .pp-contenido { padding: 26px 20px; }
}


/* ===== Logo personalizado (cabecera) ===== */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
}
.custom-logo-link img,
img.custom-logo {
  max-height: 68px;
  width: auto;
}