/*
Theme Name: PickleLoop Child
Theme URI: https://padas.webdev.paginaweb4u.com/
Description: Tema hijo de Hello Elementor para PickleLoop. Contiene los tokens de marca, estilos base y personalizaciones del sitio. No modificar el tema padre (Hello Elementor); todo lo custom vive aquí.
Author: PáginaWeb4U
Author URI: https://paginaweb4u.com/
Template: hello-elementor
Version: 1.2.0
Text Domain: pickleloop-child
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: elementor, child-theme
*/

/* ==========================================================================
   PickleLoop · Tokens de marca (manual de marca — paleta TURQUESA)
   --------------------------------------------------------------------------
   Fuente de verdad del color/tipografía. Coinciden con los Colores/Fuentes
   globales de Elementor (Ajustes del sitio).
   Turquesa medido del logo oficial = #00AFA5 (coincide con el manual).
   ========================================================================== */
:root {
	/* Paleta turquesa del manual */
	--pl-color-primary: #00AFA5;        /* Turquesa Pickleloop (Primary/Accent) */
	--pl-color-primary-dark: #007C75;   /* Turquesa oscuro (Secondary, enlaces/contraste) */
	--pl-color-ink: #080808;            /* Texto principal / negro */
	--pl-color-bg: #FFFFFF;             /* Fondo principal */
	--pl-color-bg-alt: #F5F7F6;         /* Fondo secundario */
	--pl-color-light-accent: #E5F8F6;   /* Turquesa muy claro (fondos suaves) */
	--pl-color-text-muted: #505858;     /* Texto secundario */
	--pl-color-border: #D8E2E0;         /* Bordes */

	/* Roles semánticos */
	--pl-color-text: var(--pl-color-ink);
	--pl-color-on-primary: var(--pl-color-ink); /* sobre turquesa => texto negro */
	--pl-color-secondary: var(--pl-color-primary-dark);
	--pl-color-accent: var(--pl-color-primary);
	--pl-color-link: var(--pl-color-ink);
	--pl-color-link-hover: var(--pl-color-primary-dark);

	/* Tipografía (Poppins provisional aprobada) */
	--pl-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pl-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Escala tipográfica fluida (mobile-first con clamp) */
	--pl-fs-h1: clamp(38px, 5vw, 64px);
	--pl-fs-h2: clamp(30px, 4vw, 44px);
	--pl-fs-h3: clamp(24px, 3vw, 28px);
	--pl-fs-h4: 21px;
	--pl-fs-large: 20px;
	--pl-fs-body: 17px;
	--pl-fs-small: 14px;

	/* Radios, espaciado y contenedor */
	--pl-radius-btn: 12px;
	--pl-radius-card: 20px;
	--pl-container-max: 1240px;
	--pl-space: 1rem;
	--pl-shadow-card: 0 6px 24px rgba(8, 8, 8, 0.06);
}

/* ==========================================================================
   Base heredable (mínima y no invasiva con Elementor)
   ========================================================================== */
body {
	font-family: var(--pl-font-body);
	font-size: var(--pl-fs-body);
	line-height: 1.65;
	color: var(--pl-color-text);
	background-color: var(--pl-color-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pl-font-heading);
	color: var(--pl-color-ink);
}

h1 { font-size: var(--pl-fs-h1); line-height: 1.05; font-weight: 700; }
h2 { font-size: var(--pl-fs-h2); line-height: 1.15; font-weight: 700; }
h3 { font-size: var(--pl-fs-h3); line-height: 1.25; font-weight: 600; }
h4 { font-size: var(--pl-fs-h4); line-height: 1.3;  font-weight: 600; }

/* Enlaces: negros por defecto, verde oscuro + subrayado en hover
   (no depender solo del color para señalar interacción) */
a {
	color: var(--pl-color-link);
	text-decoration: none;
}
a:hover,
a:focus-visible {
	color: var(--pl-color-link-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Componentes reutilizables (clases opcionales para Elementor)
   ========================================================================== */

/* Botón principal: fondo verde, texto negro; hover fondo negro, texto verde */
.pl-btn {
	display: inline-block;
	padding: 16px 26px;
	border-radius: var(--pl-radius-btn);
	background-color: var(--pl-color-primary);
	color: var(--pl-color-on-primary);
	font-family: var(--pl-font-heading);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	border: 2px solid var(--pl-color-primary);
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.pl-btn:hover,
.pl-btn:focus-visible {
	background-color: var(--pl-color-ink);
	color: var(--pl-color-primary);
	border-color: var(--pl-color-ink);
	text-decoration: none;
}

/* Botón secundario: transparente, borde negro; hover fondo negro, texto blanco */
.pl-btn--secondary {
	background-color: transparent;
	color: var(--pl-color-ink);
	border: 2px solid var(--pl-color-ink);
}
.pl-btn--secondary:hover,
.pl-btn--secondary:focus-visible {
	background-color: var(--pl-color-ink);
	color: #ffffff;
	border-color: var(--pl-color-ink);
}

/* Tarjeta */
.pl-card {
	background-color: var(--pl-color-bg);
	border: 1px solid var(--pl-color-border);
	border-radius: var(--pl-radius-card);
	padding: 28px;
	box-shadow: var(--pl-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pl-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(8, 8, 8, 0.10);
}

/* Respeto de accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	.pl-btn, .pl-card, a { transition: none; }
	.pl-card:hover { transform: none; }
}

/* Fin de PickleLoop Child style.css */