/* ==========================================================================
   PEONIA CHILD · peonia.css · v0.1.0 · 2026-09-23
   Prefijo: pna-  ·  Sistema: RKT/03-Diseno/Sistemas/Sistema visual PEONIA
   ========================================================================== */

/* El reset de Hello Elementor, dentro de una capa. Su reset.css pinta todo
   <button> de rosa (#c36) con un selector (0,1,1) que le gana a nuestras clases
   (0,1,0). functions.php no deja que Hello lo cargue; aquí entra en @layer.
   Lo que no está en una capa (nuestro CSS, el de Elementor) le gana siempre,
   sin importar la especificidad. Tiene que ser la primera regla del archivo. */
@import url("../../../hello-elementor/assets/css/reset.css") layer(hello-reset);

:root {
	/* Paleta del manual de identidad */
	--pna-marfil:  #F9F6F2;
	--pna-hueso:   #EBDDD5;
	--pna-taupe:   #BFAB9B;
	--pna-borgona: #480F1F;
	--pna-grafito: #2E2E2E;

	/* Derivado: el manual no trae tinta secundaria. 5.77:1 sobre marfil, 4.68:1 sobre hueso */
	--pna-tinta-2: #6A5F55;

	/* Roles */
	--pna-fondo:          var(--pna-marfil);
	--pna-fondo-alt:      var(--pna-hueso);
	--pna-fondo-oscuro:   var(--pna-borgona);
	--pna-tinta:          var(--pna-grafito);
	--pna-acento:         var(--pna-borgona);
	--pna-filete:         var(--pna-taupe);   /* nunca texto sobre claro: 2.05:1 */
	--pna-sobre-oscuro:   var(--pna-marfil);
	--pna-tinta-2-oscuro: var(--pna-taupe);   /* 6.98:1 sobre borgoña */

	/* Tipografía. Canela va primero por si se licencia; mientras, Gilda Display */
	--pna-display: "Canela", "Gilda Display", Georgia, "Times New Roman", serif;
	--pna-texto:   "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	/* Escala */
	--pna-t-hero:    clamp(2.5rem, 6vw, 4.5rem);
	--pna-t-h2:      clamp(1.75rem, 3.4vw, 2.75rem);
	--pna-t-h3:      clamp(1.25rem, 2vw, 1.5rem);
	--pna-t-body:    1rem;
	--pna-t-small:   0.875rem;
	--pna-t-eyebrow: 0.75rem;

	/* Ritmo */
	--pna-track-eyebrow: 0.18em;
	--pna-track-display: -0.015em;
	--pna-lh-display: 1.08;
	--pna-lh-body:    1.7;
	--pna-medida:     68ch;

	/* Espaciado */
	--pna-sp-1: .5rem;  --pna-sp-2: 1rem;  --pna-sp-3: 1.5rem;
	--pna-sp-4: 2.5rem; --pna-sp-5: 4rem;  --pna-sp-6: 6rem;
}

/* ── Base ─────────────────────────────────── */
body {
	background: var(--pna-fondo);
	color: var(--pna-tinta);
	font-family: var(--pna-texto);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--pna-borgona);
	color: var(--pna-marfil);
}

:focus-visible {
	outline: 2px solid var(--pna-borgona);
	outline-offset: 3px;
}

/* ── Clases base ──────────────────────────── */
.pna-eyebrow {
	font-family: var(--pna-texto);
	font-size: var(--pna-t-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--pna-track-eyebrow);
	color: var(--pna-tinta-2);
}

.pna-display {
	margin: 0;
	font-family: var(--pna-display);
	font-size: var(--pna-t-hero);
	font-weight: 400;
	line-height: var(--pna-lh-display);
	letter-spacing: var(--pna-track-display);
	color: var(--pna-acento);
	text-wrap: balance;
}

.pna-h2 {
	margin: 0;
	font-family: var(--pna-display);
	font-size: var(--pna-t-h2);
	font-weight: 400;
	line-height: 1.15;
	color: var(--pna-acento);
	text-wrap: balance;
}

.pna-body {
	font-family: var(--pna-texto);
	font-size: var(--pna-t-body);
	line-height: var(--pna-lh-body);
	color: var(--pna-tinta);
	max-width: var(--pna-medida);
}

/* Botón principal: grafito sobre claro, como la maqueta. 12.60:1 */
.pna-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: 1rem 1.75rem;
	font-family: var(--pna-texto);
	font-size: var(--pna-t-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--pna-track-eyebrow);
	text-decoration: none;
	background: var(--pna-grafito);
	color: var(--pna-marfil);
	border: 1px solid var(--pna-grafito);
	border-radius: 0;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pna-btn:hover {
	background: var(--pna-borgona);
	border-color: var(--pna-borgona);
	color: var(--pna-marfil);
}

/* Botón secundario sobre foto o fondo oscuro */
.pna-btn--claro {
	background: transparent;
	color: var(--pna-marfil);
	border-color: var(--pna-marfil);
}

.pna-btn--claro:hover {
	background: var(--pna-marfil);
	border-color: var(--pna-marfil);
	color: var(--pna-grafito);
}

/* Sección invertida */
.pna-inv {
	background: var(--pna-fondo-oscuro);
	color: var(--pna-sobre-oscuro);
}

.pna-inv .pna-display,
.pna-inv .pna-h2 { color: var(--pna-sobre-oscuro); }
.pna-inv .pna-eyebrow { color: var(--pna-tinta-2-oscuro); }

/* ── Movimiento reducido ──────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}