/*
Theme Name: Kadence Child
Theme URI: https://pecerio.es/
Description: Tema hijo de Kadence para pecerío: personalizaciones CSS y funciones propias. No editar el tema padre.
Author: Alberto Estrada
Template: kadence
Version: 1.0.3
Requires at least: 6.0
Text Domain: kadence-child
*/

/* ==========================================================================
   pecerío · estilos propios
   Las tipografías (Nunito + Inter) y la paleta global se configuran en
   Apariencia > Personalizar de Kadence; aquí solo va lo que Kadence no cubre.
   ========================================================================== */


:root {
  --pec-abisal: #0B3C5D;
  --pec-agua: #1FA3A3;
  --pec-planta: #4C9A2A;
  --pec-arena: #F4EDE1;
  --pec-coral: #FF7A59;
  --pec-texto: #2C2C2A;
  --pec-suave: #5F5E5A;
}

/* Respuesta rápida (bloque para AI Overviews / fragmentos destacados) */
.pec-resumen {
  background: #E1F5EE;
  border-left: 4px solid var(--pec-agua);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.pec-resumen p { margin: 0; }

/* Ficha rápida */
.pec-ficha {
  background: var(--pec-arena);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.pec-ficha h2 { margin-top: 0; font-size: 1.25rem; color: var(--pec-abisal); }
.pec-ficha table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.pec-ficha td { padding: .45rem .5rem; border-bottom: 1px solid rgba(11,60,93,.12); vertical-align: top; }
.pec-ficha td:first-child { color: var(--pec-suave); width: 42%; }
.pec-ficha td:last-child { font-weight: 600; color: var(--pec-texto); }
.pec-ficha tr:last-child td { border-bottom: 0; }

/* Etiquetas de dificultad */
.pec-tag {
  display: inline-block;
  font-size: .8rem;
  padding: .15rem .6rem;
  border-radius: 6px;
  background: #EAF3DE;
  color: #27500A;
}

/* Compatibilidades */
.pec-compat table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pec-compat th { background: var(--pec-abisal); color: #fff; text-align: left; padding: .5rem; }
.pec-compat td { padding: .5rem; border-bottom: 1px solid #e5e2da; vertical-align: top; }

/* Caja "Lo que necesitas" con enlaces a Amazon */
.pec-necesitas {
  border: 1px solid #e5e2da;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.pec-necesitas h2 { margin-top: 0; }
.pec-producto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid #efece5;
}
.pec-producto:last-of-type { border-bottom: 0; }
.pec-producto p { margin: 0; flex: 1 1 260px; }
.pec-producto .wp-block-buttons { margin: 0; }

/* Botón Amazon: el único elemento coral de la web */
.pec-btn-amazon .wp-block-button__link {
  background: var(--pec-coral);
  color: #4A1B0C;
  font-weight: 700;
  border-radius: 8px;
  padding: .55rem 1.1rem;
  font-size: .95rem;
}
.pec-btn-amazon .wp-block-button__link:hover { background: #F0643F; color: #4A1B0C; }

/* Aviso / consejo */
.pec-consejo {
  background: #EAF3DE;
  border-left: 4px solid var(--pec-planta);
  padding: .9rem 1.1rem;
  margin: 1.25rem 0;
}
.pec-aviso {
  background: #FAEEDA;
  border-left: 4px solid #BA7517;
  padding: .9rem 1.1rem;
  margin: 1.25rem 0;
}
.pec-consejo p, .pec-aviso p { margin: 0; }

/* Experiencia propia (E-E-A-T) */
.pec-experiencia {
  border: 2px dashed var(--pec-agua);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.pec-experiencia h2, .pec-experiencia h3 { margin-top: 0; }

/* FAQ en acordeón (bloque Detalles) */
.pec-faq .wp-block-details {
  border: 1px solid #e5e2da;
  border-radius: 8px;
  padding: .6rem 1rem;
  margin-bottom: .6rem;
}
.pec-faq summary { font-weight: 600; cursor: pointer; color: var(--pec-abisal); }
.pec-faq .wp-block-details p { margin: .6rem 0 0; }

/* Aviso de afiliación */
.pec-afiliacion { font-size: .85rem; color: var(--pec-suave); }

/* ==========================================================================
   Portada · vídeo de la pecera bajo el menú
   Ocupa el ancho del contenedor de Kadence (no el de la pantalla).
   16:9 en escritorio; en móvil se recorta a 4:5 con object-fit para
   que la pecera llene la pantalla sin franjas.
   ========================================================================== */
.pec-hero-video {
	margin: 0 0 2rem;
}
.pec-hero-video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
	background: var(--pec-arena);
}
@media (max-width: 767px) {
	.pec-hero-video video {
		aspect-ratio: 4 / 5 !important; /* WP pone aspect-ratio en línea en el <video> */
	}
}
/* Movimiento reducido: sin vídeo, solo el póster fijo */
@media (prefers-reduced-motion: reduce) {
	.pec-hero-video {
		aspect-ratio: 16 / 9;
		border-radius: 12px;
		background: url("/wp-content/uploads/2026/09/pecerio-portada-acuario-poster.webp") center / cover no-repeat;
	}
	.pec-hero-video video {
		display: none;
	}
}
.pec-home-h1 {
	margin-top: 0;
	color: var(--pec-abisal);
}
.pec-home-intro {
	font-size: 1.15rem;
	color: var(--pec-suave);
	max-width: 46rem;
}