/* ==========================================================================
   pages.css — Páginas de contenido (Sobre Nosotros, Contacto)
   ========================================================================== */

/* ---- Hero de página ---- */
.esp-page-hero {
	position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6rem);
	background:
		linear-gradient(180deg, rgba(8, 4, 3, 0.78), rgba(8, 4, 3, 0.92)),
		var(--esp-page-hero-img, none) center/cover no-repeat,
		linear-gradient(158deg, #2a0a08 0%, #160706 50%, #0a0605 100%);
	border-bottom: 1px solid rgba(255, 198, 46, 0.14);
	text-align: center;
}
.esp-page-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: url("../img/textures/chili-pattern.svg") repeat; background-size: 120px 120px; opacity: 0.05;
}
.esp-page-hero__inner { position: relative; z-index: 1; }
.esp-page-hero__inner .eyebrow { justify-content: center; }
.esp-page-hero__title { font-family: var(--font-heading); font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 0.95; color: var(--color-cream); margin: var(--esp-space-3) 0; text-transform: uppercase; letter-spacing: var(--esp-tracking-display); }
.esp-page-hero__title em { color: var(--color-gold); font-style: normal; }
.esp-page-hero__lead { color: var(--esp-text-muted); font-size: var(--esp-fs-500); max-width: 56ch; margin: 0 auto; }

/* ---- Sobre Nosotros: valores ---- */
.esp-about__values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-space-5); }
.esp-value-card {
	background: var(--esp-surface); border: 1px solid rgba(255, 198, 46, 0.14); border-radius: var(--radius-lg);
	padding: var(--esp-space-6) var(--esp-space-5);
	transition: transform 320ms var(--esp-ease-emph), border-color 280ms var(--esp-ease-emph), box-shadow 320ms var(--esp-ease-emph);
}
.esp-value-card:hover { transform: translateY(-6px); border-color: rgba(255, 198, 46, 0.4); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(226, 42, 35, 0.14); }
.esp-value-card__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%;
	background: color-mix(in srgb, var(--color-red) 18%, transparent); color: var(--color-gold);
	border: 1px solid rgba(255, 198, 46, 0.3); margin-bottom: var(--esp-space-4);
}
.esp-value-card__title { font-family: var(--font-body); font-weight: 700; font-size: var(--esp-fs-500); color: var(--color-cream); margin-bottom: var(--esp-space-2); }
.esp-value-card__text { color: var(--esp-text-muted); font-size: var(--esp-fs-300); line-height: 1.5; }

/* ---- Contacto ---- */
.esp-contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--esp-space-7); align-items: start; }
.esp-contact__cards { display: grid; gap: var(--esp-space-4); }
.esp-contact-card {
	display: flex; align-items: center; gap: var(--esp-space-4); padding: var(--esp-space-4) var(--esp-space-5);
	background: var(--esp-surface); border: 1px solid var(--esp-border); border-radius: var(--radius-lg); color: inherit;
	transition: transform 280ms var(--esp-ease-emph), border-color 280ms var(--esp-ease-emph);
}
a.esp-contact-card:hover { transform: translateX(4px); border-color: rgba(255, 198, 46, 0.4); }
.esp-contact-card__icon {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
	background: color-mix(in srgb, var(--color-red) 16%, transparent); color: var(--color-gold); border: 1px solid rgba(255, 198, 46, 0.28);
}
.esp-contact-card__label { display: block; font-size: var(--esp-fs-300); text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); color: var(--esp-text-dim); }
.esp-contact-card__value { display: block; font-weight: 600; color: var(--color-cream); }

.esp-contact__form { background: var(--esp-surface); border: 1px solid rgba(255, 198, 46, 0.14); border-radius: var(--radius-xl); padding: var(--esp-space-6); }
.esp-contact__form-title { font-family: var(--font-heading); font-size: var(--esp-fs-700); color: var(--color-cream); text-transform: uppercase; letter-spacing: var(--esp-tracking-display); margin-bottom: var(--esp-space-5); }
.esp-field { display: block; margin-bottom: var(--esp-space-4); }
.esp-field span { display: block; font-size: var(--esp-fs-300); font-weight: 600; color: var(--esp-text-muted); margin-bottom: var(--esp-space-2); }
.esp-field input, .esp-field textarea {
	width: 100%; padding: 0.8rem 1rem; background: var(--esp-surface-3); border: 1px solid var(--esp-border);
	border-radius: var(--esp-radius-sm); color: var(--color-cream); font: inherit; resize: vertical;
}
.esp-field input::placeholder, .esp-field textarea::placeholder { color: var(--esp-text-dim); }
.esp-field input:focus-visible, .esp-field textarea:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 1px; border-color: var(--color-gold); }
.esp-contact__submit { width: 100%; justify-content: center; }
.esp-contact__note { color: var(--esp-text-dim); font-size: var(--esp-fs-300); margin-top: var(--esp-space-4); text-align: center; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
	.esp-about__values { grid-template-columns: repeat(2, 1fr); }
	.esp-contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.esp-about__values { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Programa de Afiliados (SliceWP) — estilo de marca sobre el markup del plugin
   ========================================================================== */
.slicewp-affiliate-area, .slicewp { color: var(--esp-text-muted); }
.slicewp-affiliate-area a, .slicewp a { color: var(--color-gold); }

/* Inputs */
.slicewp input[type="text"], .slicewp input[type="email"], .slicewp input[type="password"],
.slicewp input[type="url"], .slicewp input[type="number"], .slicewp input[type="tel"],
.slicewp select, .slicewp textarea,
.slicewp-affiliate-area input:not([type="submit"]):not([type="button"]),
.slicewp-affiliate-area select, .slicewp-affiliate-area textarea {
	width: 100%; padding: 0.78rem 1rem; background: var(--esp-surface-3) !important; color: var(--color-cream) !important;
	border: 1px solid var(--esp-border) !important; border-radius: var(--esp-radius-sm) !important; font: inherit; box-shadow: none !important;
}
.slicewp input:focus, .slicewp select:focus, .slicewp textarea:focus,
.slicewp-affiliate-area input:focus, .slicewp-affiliate-area textarea:focus { outline: 2px solid var(--color-gold) !important; outline-offset: 1px; border-color: var(--color-gold) !important; }
.slicewp label, .slicewp-label, .slicewp-affiliate-area label { display: block; color: var(--esp-text-muted); font-weight: 600; margin-bottom: var(--esp-space-2); }
.slicewp-form-field, .slicewp-field { margin-bottom: var(--esp-space-4); }

/* Botones (rojo de marca, vence el default del plugin) */
.slicewp-button, .slicewp button[type="submit"], .slicewp input[type="submit"],
.slicewp-affiliate-area input[type="submit"], .slicewp-affiliate-area .button, .slicewp-affiliate-area button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-space-2);
	background: var(--color-red) !important; background-color: var(--color-red) !important; color: #fff !important; border: 0 !important;
	font-family: var(--font-body) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: var(--esp-tracking-caps);
	font-size: var(--esp-fs-300); padding: 0.85rem 1.5rem; border-radius: var(--esp-radius-pill) !important; cursor: pointer;
	box-shadow: 0 8px 22px rgba(226, 42, 35, 0.32); transition: background 160ms var(--esp-ease-emph), transform var(--esp-press) var(--esp-press-ease);
}
.slicewp-button:hover, .slicewp input[type="submit"]:hover, .slicewp-affiliate-area .button:hover { background: #ef332c !important; transform: translateY(-2px); }

/* Navegación / tabs del dashboard */
.slicewp-affiliate-area-navigation, .slicewp-tabs, .slicewp-affiliate-area ul.slicewp-affiliate-area-navigation {
	display: flex; flex-wrap: wrap; gap: var(--esp-space-2); list-style: none; padding: 0; margin: 0 0 var(--esp-space-5);
	border-bottom: 1px solid var(--esp-border);
}
.slicewp-affiliate-area-navigation a, .slicewp-tabs a {
	display: inline-block; padding: 0.7rem 1.1rem; color: var(--esp-text-muted); font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--esp-tracking-caps); font-size: var(--esp-fs-300); border-bottom: 2px solid transparent;
}
.slicewp-affiliate-area-navigation a.slicewp-active, .slicewp-affiliate-area-navigation .slicewp-active a,
.slicewp-affiliate-area-navigation a:hover, .slicewp-tabs a:hover { color: var(--color-gold); border-bottom-color: var(--color-red); }

/* Tarjetas de estadísticas */
.slicewp-statistics, .slicewp-affiliate-area-statistics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--esp-space-4); margin-bottom: var(--esp-space-5); }
.slicewp-statistic, .slicewp-affiliate-area-statistic {
	background: var(--esp-surface); border: 1px solid rgba(255, 198, 46, 0.16); border-radius: var(--radius-lg, 22px);
	padding: var(--esp-space-5); text-align: center;
}
.slicewp-statistic-value, .slicewp-affiliate-area-statistic-value { display: block; font-family: var(--font-heading); font-size: var(--esp-fs-700); color: var(--color-gold); }
.slicewp-statistic-label, .slicewp-affiliate-area-statistic-label { color: var(--esp-text-muted); font-size: var(--esp-fs-300); text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); }

/* Caja del link de referido */
.slicewp-affiliate-area-referral-url, .slicewp-referral-url { display: flex; gap: var(--esp-space-2); flex-wrap: wrap; margin-bottom: var(--esp-space-5); }
.slicewp-affiliate-area-referral-url input { flex: 1 1 220px; min-width: 0; }

/* Tablas (comisiones, visitas, pagos) */
.slicewp-table, .slicewp-affiliate-area table, .slicewp table {
	width: 100%; border-collapse: collapse; background: var(--esp-surface);
	border: 1px solid var(--esp-border); border-radius: var(--radius-lg, 22px); overflow: hidden; margin-bottom: var(--esp-space-5);
}
.slicewp-table th, .slicewp-affiliate-area table th, .slicewp table th {
	text-align: left; padding: var(--esp-space-4); color: var(--esp-text-muted); font-family: var(--font-body);
	text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); font-size: var(--esp-fs-300); border-bottom: 1px solid var(--esp-border);
}
.slicewp-table td, .slicewp-affiliate-area table td, .slicewp table td { padding: var(--esp-space-4); color: var(--color-cream); border-bottom: 1px solid var(--esp-border); }

/* Notices */
.slicewp-notice, .slicewp-message { background: var(--esp-surface); border: 1px solid var(--esp-border); border-left: 3px solid var(--color-gold); border-radius: var(--esp-radius-sm); padding: var(--esp-space-4); color: var(--esp-text-muted); margin-bottom: var(--esp-space-4); }
.slicewp-notice-error, .slicewp-notice.slicewp-notice-error { border-left-color: var(--color-red); color: #ffd9d6; }
.slicewp-notice-success { border-left-color: var(--color-green); }

/* ==========================================================================
   Programa de Afiliados — hero + pasos + panel (landing de marca)
   ========================================================================== */
.esp-aff { max-width: 980px; margin: 0 auto; }

/* Hero */
.esp-aff__hero { text-align: center; padding: var(--esp-space-6) 0 var(--esp-space-7); }
.esp-aff__eyebrow { display: inline-block; color: var(--color-gold); font-weight: 800; text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); font-size: var(--esp-fs-300); margin-bottom: var(--esp-space-3); }
.esp-aff__title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, var(--esp-fs-800)); line-height: 1.04; color: var(--color-cream); margin: 0 0 var(--esp-space-4); }
.esp-aff__lead { max-width: 620px; margin: 0 auto var(--esp-space-5); color: var(--esp-text-muted); font-size: var(--esp-fs-500); }
.esp-aff__lead strong { color: var(--color-gold); }
.esp-aff__cta {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-space-2);
	background: var(--color-red); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: var(--esp-tracking-caps);
	padding: 1rem 2rem; border-radius: var(--esp-radius-pill); box-shadow: 0 10px 26px rgba(226, 42, 35, 0.34);
	transition: background 160ms var(--esp-ease-emph), transform var(--esp-press) var(--esp-press-ease);
}
.esp-aff__cta:hover { background: #ef332c; transform: translateY(-2px); color: #fff; }

/* Pasos */
.esp-aff__h { font-family: var(--font-heading); font-size: var(--esp-fs-600); color: var(--color-cream); text-align: center; margin: 0 0 var(--esp-space-5); }
.esp-aff__grid { list-style: none; margin: 0 0 var(--esp-space-7); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-space-4); }
.esp-aff__step { position: relative; background: var(--esp-surface); border: 1px solid var(--esp-border); border-radius: var(--radius-lg, 22px); padding: var(--esp-space-6) var(--esp-space-5); text-align: center; }
.esp-aff__num { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--color-red); color: #fff; font-family: var(--font-heading); font-size: var(--esp-fs-500); margin-bottom: var(--esp-space-3); box-shadow: 0 6px 16px rgba(226, 42, 35, 0.34); }
.esp-aff__step h4 { font-family: var(--font-heading); color: var(--color-gold); font-size: var(--esp-fs-500); margin: 0 0 var(--esp-space-2); }
.esp-aff__step p { color: var(--esp-text-muted); font-size: var(--esp-fs-400); margin: 0; }

/* Panel (preview del dashboard) */
.esp-aff__panel { background: var(--esp-surface); border: 1px solid rgba(255, 198, 46, 0.18); border-radius: var(--radius-lg, 22px); padding: var(--esp-space-6); }
.esp-aff__panel-head { text-align: center; margin-bottom: var(--esp-space-5); }
.esp-aff__panel-head h3 { margin-bottom: var(--esp-space-2); }
.esp-aff__panel-head p { color: var(--esp-text-muted); margin: 0; }
.esp-aff__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-space-4); margin-bottom: var(--esp-space-5); }
.esp-aff__stat { background: var(--esp-bg, #140d0b); border: 1px solid var(--esp-border); border-radius: var(--esp-radius); padding: var(--esp-space-5); text-align: center; }
.esp-aff__stat-val { display: block; font-family: var(--font-heading); font-size: var(--esp-fs-700); color: var(--color-gold); line-height: 1; }
.esp-aff__stat-label { display: block; margin-top: var(--esp-space-2); color: var(--esp-text-muted); font-size: var(--esp-fs-300); text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); }
.esp-aff__ref { display: flex; flex-direction: column; gap: var(--esp-space-2); background: var(--esp-bg, #140d0b); border: 1px dashed var(--esp-border-strong, #4a3b36); border-radius: var(--esp-radius); padding: var(--esp-space-4); }
.esp-aff__ref-label { color: var(--esp-text-muted); font-size: var(--esp-fs-300); text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); }
.esp-aff__ref-url { color: var(--color-gold); font-family: var(--font-mono, monospace); font-size: var(--esp-fs-400); word-break: break-all; }
.esp-aff__note { margin: var(--esp-space-4) 0 0; color: var(--esp-text-muted); font-size: var(--esp-fs-300); text-align: center; opacity: 0.8; }

@media (max-width: 760px) {
	.esp-aff__grid, .esp-aff__stats { grid-template-columns: 1fr; }
}