/* ══════════════════════════════════════════════════════════
   HAZTE CONDUCTOR PRO — CSS ADICIONAL GLOBAL (WordPress)
   Pega este archivo completo en Personalización → CSS adicional.
   Cubre las 7 páginas: home, pago, curso, aviso-legal,
   politica-privacidad, terminos-condiciones, politica-cookies.

   Cada página se pega envuelta en su contenedor
   div.hcp-page-XXX (ver los HTML limpios en
   wordpress/PAGINA/wp-content.html). El fondo/altura que
   antes vivía en body ahora vive en .hcp-page-XXX, así no
   se filtra al resto del sitio WordPress.
   ══════════════════════════════════════════════════════════ */

/* ── RESET GLOBAL ── */
/* Quita el margin/padding por defecto que el navegador pone en html/body
   (el "borde blanco" alrededor de toda la página). Cada página propia
   sigue controlando su fondo y layout a través de su contenedor
   .hcp-page-XXX, así que esto es seguro incluso a nivel global. */
html, body {
  margin: 0;
  padding: 0;
}
[class^="hcp-page-"], [class^="hcp-page-"] *, [class^="hcp-page-"] *::before, [class^="hcp-page-"] *::after {
  box-sizing: border-box;
}
[class^="hcp-page-"] p,
[class^="hcp-page-"] h1,
[class^="hcp-page-"] h2,
[class^="hcp-page-"] h3,
[class^="hcp-page-"] ul,
[class^="hcp-page-"] li {
  margin: 0;
  padding: 0;
}

/* ── VARIABLES (unión de todas las páginas; los valores coinciden donde se repiten) ── */
:root {
  --color-fondo-hero: #0c0c0c;
  --color-fondo-internacional: #141414;
  --color-fondo-beneficios: #141414;
  --color-fondo-testimonios: #0c0c0c;
  --color-fondo-detalles: #0c0c0c;
  --color-fondo-cta-final: #080808;
  --color-fondo-footer: #040404;
  --color-superficie-card: #1a1f2e;
  --color-superficie-bloque: #1e2640;
  --color-texto-principal: #e2e8f0;
  --color-texto-sobre-oscuro: #e2e8f0;
  --color-texto-suave: #64748b;
  --color-texto-secundario: #94a3b8;
  --color-texto-caption: #64748b;
  --color-acento: #ea580c;
  --color-acento-hover: #c2410c;
  --color-acento2: #fb923c;
  --color-acento2-hover: #ea580c;
  --color-acento-grad-fin: #f97316;
  --color-acento-hover-grad-fin: #c2410c;
  --color-acento-tenue: rgba(234, 88, 12, 0.08);
  --color-acento-tenue-plus: rgba(234, 88, 12, 0.15);
  --color-borde-card: #1e3a5f;
  --color-borde-separador: #1e293b;
  --color-borde-bloque: rgba(234, 88, 12, 0.2);
  --color-footer-link: #ea580c;
  --color-footer-texto: #64748b;
  --color-footer-link-muted: #1e3a5f;
  --color-footer-link-hover: #94a3b8;
  --color-sombra-card: rgba(29, 78, 216, 0.12);
  --radio: 10px;
}

/* Tipografía base compartida, con scope al contenedor de cada página (NO al body real de WP) */
[class^="hcp-page-"] {
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--color-texto-principal);
  line-height: 1.6;
}

.hcp-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── BOTÓN (compartido home / internacional / beneficios / cta-final) ── */
.hcp-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  padding: 16px 40px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.hcp-btn:hover {
  background: linear-gradient(135deg, var(--color-acento-hover) 0%, var(--color-acento-hover-grad-fin) 100%);
  transform: translateY(-2px);
}
.hcp-btn:active { transform: translateY(0); }

.hcp-section-cta { text-align: center; margin-top: 40px; }

/* ── FOOTER (compartido por las 6 páginas de contenido, no por curso) ── */
.hcp-footer {
  background: var(--color-fondo-footer);
  color: var(--color-footer-texto);
  text-align: center;
  padding: 24px 20px;
  font-size: 0.8rem;
}
.hcp-footer a { color: var(--color-footer-link-muted); text-decoration: none; }
.hcp-footer a:hover { color: var(--color-footer-link-hover); text-decoration: underline; }

/* ── HEADER MÍNIMO (solo mi-cuenta/carrito/checkout, ver functions.php) ──
   Reemplaza al header de Astra en las páginas que renderiza el tema:
   marca + enlace de acceso/Mi cuenta (la puerta de entrada de los
   compradores del curso). Los !important en colores evitan que el CSS
   dinámico de Astra para enlaces los pinte de su color por defecto. */
.hcp-mini-header {
  background: var(--color-fondo-footer);
  border-bottom: 1px solid var(--color-borde-separador);
  padding: 14px 20px;
}
.hcp-mini-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hcp-mini-header-brand {
  color: var(--color-texto-principal) !important;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none !important;
}
.hcp-mini-header-brand span { color: var(--color-acento); }
.hcp-mini-header-account {
  color: var(--color-texto-secundario) !important;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--color-borde-separador);
  border-radius: 8px;
  padding: 8px 14px;
  text-decoration: none !important;
  transition: color 0.15s, border-color 0.15s;
}
.hcp-mini-header-account:hover {
  color: var(--color-texto-principal) !important;
  border-color: var(--color-acento);
}


/* ══════════════════════════════════════════════════════════
   PÁGINA: HOME (.hcp-page-home)
   ══════════════════════════════════════════════════════════ */
.hcp-page-home {
  overflow-x: hidden;
}

/* ── HERO ── */
.hcp-hero {
  background: var(--color-fondo-hero);
  background-image: radial-gradient(ellipse 70% 50% at 50% 60%, rgba(212,160,23,0.1) 0%, transparent 70%);
  color: var(--color-texto-sobre-oscuro);
  text-align: center;
  padding: 64px 20px 56px;
}
.hcp-hero-eyebrow {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.hcp-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  max-width: 720px;
  margin: 0 auto 18px;
  letter-spacing: -0.02em;
}
.hcp-hero-highlight {
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hcp-hero .hcp-subtitle {
  font-size: 1.1rem;
  color: var(--color-texto-suave);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.hcp-hero-video {
  margin: 0 auto 28px;
  max-width: 720px;
}
.hcp-hero-video video {
  width: 100%;
  border-radius: 14px;
  display: block;
  object-fit: cover;
  max-height: 420px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
}

/* ── SOCIAL PROOF ── */
.hcp-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 32px;
  max-width: 420px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.3);
  position: relative;
}
.hcp-social-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hcp-proof-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  padding: 0 12px;
}
.hcp-proof-icon { font-size: 1.3rem; line-height: 1; }
.hcp-proof-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-acento);
  line-height: 1.2;
}
.hcp-proof-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hcp-proof-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* ── INTERNACIONAL ── */
.hcp-internacional {
  background: var(--color-fondo-internacional);
  padding: 72px 20px;
  text-align: center;
}
.hcp-internacional-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-acento2-hover);
  margin-bottom: 12px;
}
.hcp-internacional h2 {
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: 800;
  color: var(--color-texto-principal);
  margin-bottom: 44px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.hcp-flags-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 auto 40px;
}
.hcp-flag-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-card);
  border-radius: 14px;
  padding: 28px 16px 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hcp-flag-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.09);
  border-color: var(--color-acento2);
}
.hcp-flag-emoji { font-size: 2.8rem; line-height: 1; }
.hcp-flag-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-texto-principal);
  letter-spacing: 0.02em;
}
.hcp-internacional-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--color-texto-secundario);
  margin: 0 auto 40px;
  line-height: 1.7;
  text-align: left;
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-card);
  border-radius: 12px;
  padding: 16px 20px;
}
.hcp-internacional-note-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }

/* ── BENEFICIOS ── */
.hcp-benefits {
  background: var(--color-fondo-beneficios);
  padding: 72px 20px;
}
.hcp-benefits h2 {
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: 800;
  margin-bottom: 40px;
  color: var(--color-texto-principal);
  text-align: center;
  letter-spacing: -0.01em;
}
.hcp-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.hcp-benefit-card {
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-card);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hcp-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.hcp-benefit-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0 auto 4px;
  background: var(--color-superficie-bloque);
  border-radius: 10px;
}
.hcp-benefit-icon .material-symbols-outlined {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-texto-principal);
}
.hcp-benefit-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-texto-principal);
  line-height: 1.3;
}
.hcp-benefit-card p {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
  line-height: 1.6;
  margin: 0;
}

/* ── TESTIMONIOS ── */
.hcp-testimonials {
  background: var(--color-fondo-testimonios);
  color: var(--color-texto-sobre-oscuro);
  padding: 72px 20px;
  text-align: center;
}
.hcp-testimonials h2 {
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: 800;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}
.hcp-testimonial-slider { max-width: 560px; margin: 0 auto; }
.hcp-testimonial-card {
  background: var(--color-superficie-card);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hcp-testimonial-stars {
  color: var(--color-acento);
  font-size: 0.95rem;
  letter-spacing: 2px;
}
.hcp-testimonial-headline {
  font-size: 0.97rem;
  font-weight: 800;
  color: var(--color-texto-principal);
  line-height: 1.35;
}
.hcp-testimonial-body {
  font-size: 0.88rem;
  color: var(--color-texto-secundario);
  line-height: 1.65;
}
.hcp-testimonial-body strong { color: var(--color-texto-principal); font-weight: 700; }
.hcp-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-borde-separador);
}
.hcp-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hcp-author-name { font-size: 0.88rem; font-weight: 700; color: var(--color-texto-principal); display: block; }
.hcp-author-meta { font-size: 0.78rem; color: var(--color-texto-secundario); display: block; }
.hcp-testimonial-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--color-borde-separador);
}
.hcp-testimonial-btn {
  background: none;
  border: 1px solid var(--color-borde-card);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--color-texto-secundario);
  display: flex;
  align-items: center;
  transition: border-color 0.15s, color 0.15s;
}
.hcp-testimonial-btn:hover { border-color: var(--color-acento); color: var(--color-acento); }
.hcp-testimonial-counter { font-size: 0.82rem; color: var(--color-texto-secundario); }

/* ── VIDEO TESTIMONIALS ── */
.hcp-video-testimonials {
  background: var(--color-fondo-testimonios);
  padding: 64px 0 56px;
  text-align: center;
}
.hcp-video-testimonials h2 {
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  padding: 0 20px;
}
.hcp-vt-sub { font-size: 1rem; color: var(--color-texto-suave); margin-bottom: 36px; padding: 0 20px; }
.hcp-vt-carousel-wrapper { display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.hcp-vt-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-acento) var(--color-fondo-hero);
}
.hcp-vt-track::-webkit-scrollbar { height: 4px; }
.hcp-vt-track::-webkit-scrollbar-track { background: var(--color-fondo-hero); border-radius: 2px; }
.hcp-vt-track::-webkit-scrollbar-thumb { background: var(--color-acento); border-radius: 2px; }
.hcp-vt-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--color-superficie-card);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 2px 14px var(--color-sombra-card);
  display: flex;
  flex-direction: column;
}
.hcp-vt-embed-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  cursor: pointer;
  background: #000;
  overflow: hidden;
}
.hcp-vt-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}
.hcp-vt-embed-wrap:hover .hcp-vt-thumbnail { opacity: 0.8; }
.hcp-vt-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.hcp-vt-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hcp-vt-play-btn .material-symbols-outlined {
  font-size: 60px;
  color: #fff;
  opacity: 0.9;
  transition: transform 0.15s, opacity 0.15s;
}
.hcp-vt-embed-wrap:hover .hcp-vt-play-btn .material-symbols-outlined {
  transform: scale(1.1);
  opacity: 1;
  color: var(--color-acento);
}
.hcp-vt-info { padding: 16px 18px 20px; text-align: left; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hcp-vt-quote { font-size: 0.92rem; font-weight: 700; color: var(--color-texto-principal); line-height: 1.4; }
.hcp-vt-author { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--color-borde-separador); }
.hcp-vt-name { font-size: 0.87rem; font-weight: 700; color: var(--color-texto-principal); }
.hcp-vt-meta { font-size: 0.78rem; color: var(--color-texto-secundario); }
.hcp-vt-arrow {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--color-texto-suave);
  border-radius: var(--radio);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--color-texto-suave);
  display: flex;
  align-items: center;
  transition: border-color 0.15s, color 0.15s;
}
.hcp-vt-arrow:hover { border-color: var(--color-acento); color: var(--color-acento); }
.hcp-vt-dots { display: none; justify-content: center; gap: 8px; margin-top: 24px; padding: 0 20px; }
.hcp-vt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-texto-suave);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.hcp-vt-dot.active { background: var(--color-acento); transform: scale(1.3); }

/* ── DETALLES / MÓDULOS (home) ── */
.hcp-details {
  background: var(--color-fondo-detalles);
  padding: 64px 20px;
}
.hcp-details h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-texto-principal);
  margin-bottom: 32px;
}
.hcp-modulos-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 52px; }
.hcp-modulo-item {
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-card);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}
.hcp-modulo-item.open { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.hcp-modulo-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.hcp-modulo-trigger:hover { background: var(--color-superficie-bloque); }
.hcp-modulo-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-acento);
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
}
.hcp-modulo-title-wrap { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.hcp-modulo-title { font-size: 0.97rem; font-weight: 800; color: var(--color-texto-principal); line-height: 1.3; }
.hcp-modulo-desc { font-size: 0.82rem; color: var(--color-texto-secundario); line-height: 1.4; }
.hcp-modulo-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
}
.hcp-modulo-chevron::before, .hcp-modulo-chevron::after {
  content: "";
  position: absolute;
  background: var(--color-acento);
  border-radius: 2px;
  transition: transform 0.25s ease;
}
.hcp-modulo-chevron::before { width: 12px; height: 2px; top: 9px; left: 4px; }
.hcp-modulo-chevron::after { width: 2px; height: 12px; top: 4px; left: 9px; }
.hcp-modulo-item.open .hcp-modulo-chevron::after { transform: rotate(90deg); }
.hcp-modulo-body { display: none; padding: 4px 20px 20px 72px; }
.hcp-modulo-item.open .hcp-modulo-body { display: block; }
.hcp-modulo-temas { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hcp-modulo-temas li {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.hcp-modulo-temas li strong { color: var(--color-texto-principal); font-weight: 700; }
.hcp-modulo-temas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='1,6 4.5,9.5 11,2.5' fill='none' stroke='%23d4a017' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ── FAQs (home) ── */
.hcp-faq { margin-top: 52px; }
.hcp-faq h2 { font-size: 1.7rem; font-weight: 800; color: var(--color-texto-principal); margin-bottom: 12px; }
.hcp-faq-item { border-bottom: 1px solid var(--color-borde-separador); }
.hcp-faq-item:last-child { border-bottom: none; }
.hcp-faq-item summary {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-texto-principal);
  padding: 18px 40px 18px 12px;
  cursor: pointer;
  list-style: none;
  position: relative;
  line-height: 1.4;
  border-radius: 8px;
  transition: background 0.15s ease;
  margin: 0 -12px;
}
.hcp-faq-item summary:hover { background: var(--color-superficie-bloque); }
.hcp-faq-item summary::-webkit-details-marker { display: none; }
.hcp-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color-acento);
  line-height: 1;
  transition: transform 0.22s ease;
}
.hcp-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.hcp-faq-item p {
  font-size: 0.95rem;
  color: var(--color-texto-secundario);
  padding: 4px 12px 20px;
  line-height: 1.7;
}

/* ── CTA FINAL (home) ── */
.hcp-cta-final {
  background: var(--color-fondo-cta-final);
  text-align: center;
  padding: 60px 20px;
}
.hcp-cta-text {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-texto-sobre-oscuro);
  margin-bottom: 24px;
}

/* ── RESPONSIVE (home) ── */
@media (max-width: 600px) {
  .hcp-page-home .hcp-vt-arrow { display: none; }
  .hcp-page-home .hcp-vt-carousel-wrapper { padding: 0; }
  .hcp-page-home .hcp-vt-track { gap: 12px; padding: 4px 20px 8px; scroll-padding-left: 20px; }
  .hcp-page-home .hcp-vt-card { flex: 0 0 calc(100vw - 52px); }
  .hcp-page-home .hcp-vt-dots { display: flex; }
}
@media (max-width: 540px) {
  .hcp-page-home .hcp-hero h1 { font-size: 1.8rem; }
  .hcp-page-home .hcp-btn { font-size: 0.95rem; padding: 14px 28px; }
  .hcp-page-home .hcp-cta-text { font-size: 1.1rem; }
  .hcp-page-home .hcp-social-proof { max-width: 100%; padding: 14px 4px; }
  .hcp-page-home .hcp-proof-badge { padding: 0 8px; }
  .hcp-page-home .hcp-proof-value { font-size: 0.95rem; }
  .hcp-page-home .hcp-flags-grid { grid-template-columns: repeat(2, 1fr); }
  .hcp-page-home .hcp-internacional h2 { font-size: 1.3rem; margin-bottom: 32px; }
  .hcp-page-home .hcp-benefit-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   PÁGINA: PAGO (.hcp-page-pago)
   ══════════════════════════════════════════════════════════ */
.hcp-page-pago {
  background: var(--color-fondo-detalles);
}

.hcp-pago-page {
  min-height: 100vh;
  padding: 48px 20px 80px;
}

.hcp-pago-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
}

/* Columna izquierda */
.hcp-img-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.hcp-oferta-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-acento);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 1;
  letter-spacing: 0.04em;
}

.hcp-product-img {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.hcp-includes-card,
.hcp-modules-card,
.hcp-desc-card {
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-card);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 16px;
}

.hcp-card-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-texto-principal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-acento);
  display: inline-block;
}

.hcp-includes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hcp-includes-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
}

.hcp-includes-list li .material-symbols-outlined {
  font-size: 1.2rem;
  color: var(--color-acento);
  flex-shrink: 0;
}

.hcp-modules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hcp-modules-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-superficie-bloque);
  border-radius: 8px;
}

/* Namespaced para no chocar con .hcp-mod-num de la página curso */
.hcp-page-pago .hcp-mod-num {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--color-acento);
  min-width: 28px;
  flex-shrink: 0;
}

.hcp-page-pago .hcp-mod-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-texto-principal);
  flex: 1;
}

.hcp-page-pago .hcp-mod-desc {
  font-size: 0.75rem;
  color: var(--color-texto-suave);
  flex-shrink: 0;
}

.hcp-desc-card p {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
  line-height: 1.75;
  margin-bottom: 10px;
}
.hcp-desc-card p:last-child { margin-bottom: 0; }
.hcp-desc-card strong { color: var(--color-texto-principal); }

/* Columna derecha */
.hcp-pago-right {
  position: sticky;
  top: 24px;
}

.hcp-checkout-card {
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-card);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hcp-klarna {
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hcp-klarna-logo {
  background: #ffb3c7;
  color: #17120e;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 4px;
}

.hcp-klarna-link {
  color: var(--color-acento2);
  text-decoration: none;
  font-weight: 600;
}
.hcp-klarna-link:hover { text-decoration: underline; }

.hcp-product-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-texto-principal);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hcp-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.hcp-price-old {
  font-size: 1rem;
  color: var(--color-texto-suave);
  text-decoration: line-through;
}

.hcp-price-new {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-texto-principal);
}

.hcp-short-desc {
  font-size: 0.88rem;
  color: var(--color-texto-secundario);
  line-height: 1.6;
}
.hcp-short-desc strong { color: var(--color-acento); }

.hcp-secure-box {
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hcp-secure-box .material-symbols-outlined {
  font-size: 1.1rem;
  color: var(--color-acento);
}

.hcp-secure-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-texto-principal);
  flex: 1;
}

.hcp-card-logos {
  display: flex;
  gap: 6px;
}

.hcp-card-badge {
  font-size: 0.6rem;
  font-weight: 900;
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.hcp-paypal-note {
  font-size: 0.78rem;
  color: var(--color-texto-secundario);
  line-height: 1.5;
}

.hcp-check-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
  line-height: 1.5;
  transition: border-color 0.2s;
}

.hcp-check-label--active {
  border-color: var(--color-acento);
}

.hcp-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-acento);
  cursor: pointer;
}

.hcp-buy-btn {
  display: block;
  text-align: center;
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 18px 24px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, opacity 0.2s;
}

.hcp-buy-btn:hover:not(.hcp-buy-btn--disabled) {
  background: linear-gradient(135deg, var(--color-acento-hover) 0%, var(--color-acento-hover-grad-fin) 100%);
  transform: translateY(-2px);
}

.hcp-buy-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  font-size: 0.88rem;
}

/* ── Integración WooCommerce (woocommerce/single-product.php) ──
   Viste lo que imprime WooCommerce de verdad (avisos, precio del/ins,
   botón add-to-cart) en lugar de duplicar sus datos en HTML fijo. */
.hcp-page-pago .woocommerce-notices-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}
.hcp-page-pago .woocommerce-message,
.hcp-page-pago .woocommerce-info,
.hcp-page-pago .woocommerce-error,
.hcp-page-pago .woocommerce-error li {
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  border-left: 3px solid var(--color-acento);
  border-radius: 10px;
  color: var(--color-texto-principal);
  padding: 14px 16px;
  margin: 0 0 20px;
  list-style: none;
  font-size: 0.9rem;
}
.hcp-page-pago .woocommerce-error li { border: none; padding: 0; margin: 0; }
.hcp-page-pago .woocommerce-message a,
.hcp-page-pago .woocommerce-info a,
.hcp-page-pago .woocommerce-error a { color: var(--color-acento2); }

/* Precio real de WooCommerce: <del> (normal) + <ins> (rebajado) */
.hcp-page-pago .hcp-price-row .price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.hcp-page-pago .hcp-price-row del {
  font-size: 1rem;
  color: var(--color-texto-suave);
}
.hcp-page-pago .hcp-price-row ins {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-texto-principal);
  text-decoration: none;
}

/* Formulario real de compra: el curso se vende de uno en uno */
.hcp-page-pago .hcp-buy-form form.cart { margin: 0; }
.hcp-page-pago .hcp-buy-form .quantity { display: none; }

/* Campo de desistimiento que inyecta Product Input Fields dentro del
   formulario (su markup lo controla el plugin, por eso el selector genérico) */
.hcp-page-pago .hcp-buy-form form.cart > *:not(.quantity):not(.single_add_to_cart_button) {
  display: block;
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  border-radius: 10px;
  padding: 14px;
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
  line-height: 1.5;
  margin: 0 0 14px;
}
.hcp-page-pago .hcp-buy-form form.cart input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-acento);
  margin: 0 8px 0 0;
  vertical-align: -2px;
  cursor: pointer;
}
.hcp-page-pago .hcp-buy-form .single_add_to_cart_button {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 18px 24px;
  border-radius: 12px;
  transition: background 0.2s, transform 0.15s, opacity 0.2s;
}
.hcp-page-pago .hcp-buy-form .single_add_to_cart_button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-acento-hover) 0%, var(--color-acento-hover-grad-fin) 100%);
  transform: translateY(-2px);
}
.hcp-page-pago .hcp-buy-form .single_add_to_cart_button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hcp-guarantee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  justify-content: center;
}

.hcp-guarantee .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-acento);
}

.hcp-legal-links {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-texto-suave);
}

.hcp-legal-links a {
  color: var(--color-texto-suave);
  text-decoration: none;
}
.hcp-legal-links a:hover {
  color: var(--color-acento2);
  text-decoration: underline;
}

/* ── RESPONSIVE (pago) ── */
@media (max-width: 860px) {
  .hcp-pago-inner {
    grid-template-columns: 1fr;
  }
  .hcp-pago-right {
    position: static;
  }
}

@media (max-width: 540px) {
  .hcp-pago-page { padding: 24px 16px 60px; }
  .hcp-product-title { font-size: 1.3rem; }
  .hcp-price-new { font-size: 1.6rem; }
}


/* ══════════════════════════════════════════════════════════
   PÁGINA: CURSO (.hcp-page-curso)
   Layout de pantalla completa: al ir dentro de un contenedor
   de WordPress (no del body real) usamos min-height en vez de
   height:100%/overflow:hidden sobre html,body para no romper
   el scroll del resto del sitio.
   ══════════════════════════════════════════════════════════ */
.hcp-page-curso {
  background: var(--color-fondo-hero);
}

.hcp-curso-page {
  min-height: 100vh;
  display: flex;
}

.hcp-curso-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  background: var(--color-superficie-card);
}

/* ── SIDEBAR ── */
.hcp-sidebar {
  background: var(--color-superficie-bloque);
  border-right: 1px solid var(--color-borde-separador);
  display: flex;
  flex-direction: column;
}

.hcp-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-borde-separador);
}

.hcp-sidebar-label {
  font-size: 11px;
  color: var(--color-texto-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.hcp-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-texto-principal);
}

.hcp-progress-bar {
  height: 3px;
  background: var(--color-borde-separador);
  border-radius: 2px;
  margin-top: 12px;
}

.hcp-progress-fill {
  height: 100%;
  background: var(--color-acento);
  border-radius: 2px;
  transition: width 0.3s;
}

.hcp-mod-btn {
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-texto-secundario);
  border-bottom: 1px solid var(--color-borde-separador);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
  font-family: inherit;
}

.hcp-mod-btn:hover {
  background: var(--color-superficie-card);
}

.hcp-mod-btn.active {
  background: var(--color-superficie-card);
  color: var(--color-texto-principal);
  font-weight: 700;
  border-left: 2px solid var(--color-acento);
}

/* Namespaced para no chocar con .hcp-mod-num de la página pago */
.hcp-page-curso .hcp-mod-num {
  font-size: 11px;
  background: var(--color-borde-separador);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--color-texto-caption);
  flex-shrink: 0;
}

.hcp-mod-btn.active .hcp-mod-num {
  background: var(--color-acento-tenue-plus);
  color: var(--color-acento-hover);
}

/* ── CONTENT ── */
.hcp-content {
  padding: 28px 32px;
  background: var(--color-superficie-card);
}

.hcp-module-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-borde-separador);
}

.hcp-module-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-acento);
  font-weight: 700;
}

.hcp-module-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-texto-principal);
  margin-top: 4px;
}

/* ── TOPIC ACCORDION ── */
.hcp-topic {
  margin-bottom: 20px;
  border: 1px solid var(--color-borde-card);
  border-radius: var(--radio);
  overflow: hidden;
}

.hcp-topic-header {
  padding: 12px 16px;
  background: var(--color-superficie-bloque);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
  font-family: inherit;
}

.hcp-topic-header:hover {
  background: var(--color-borde-separador);
}

.hcp-topic-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-acento-hover);
  min-width: 22px;
  flex-shrink: 0;
}

.hcp-topic-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-texto-principal);
  flex: 1;
}

.hcp-topic-chevron {
  color: var(--color-texto-caption);
  transition: transform 0.2s;
  font-size: 18px;
}

.hcp-topic-chevron.open {
  transform: rotate(90deg);
}

.hcp-topic-body {
  padding: 16px;
  border-top: 1px solid var(--color-borde-card);
  background: var(--color-superficie-card);
}

/* ── BLOQUES DE CONTENIDO (curso) ── */
.hcp-paragraph {
  font-size: 14px;
  color: var(--color-texto-secundario);
  line-height: 1.7;
  margin-bottom: 10px;
}

.hcp-option-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-texto-principal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  margin-top: 14px;
}

.hcp-list {
  padding-left: 16px;
  font-size: 14px;
  color: var(--color-texto-secundario);
  line-height: 1.8;
}

.hcp-list li {
  margin-bottom: 4px;
}

.hcp-link-list {
  list-style: none;
  padding: 0;
}

.hcp-link-list li {
  margin-bottom: 6px;
  font-size: 14px;
}

.hcp-link-list a {
  color: var(--color-acento2);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hcp-link-list a:hover {
  color: var(--color-acento-hover);
  text-decoration: underline;
}

.hcp-link-list a .material-symbols-outlined {
  font-size: 16px;
}

.hcp-note-box {
  background: var(--color-acento-tenue);
  border: 1px solid var(--color-borde-bloque);
  border-radius: var(--radio);
  padding: 10px 14px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-acento-hover);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.hcp-note-box .material-symbols-outlined {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── NAVEGACIÓN INFERIOR (curso) ── */
.hcp-bottom-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--color-borde-separador);
}

.hcp-nav-btn {
  font-size: 13px;
  padding: 8px 16px;
  border: 1px solid var(--color-borde-card);
  border-radius: var(--radio);
  background: transparent;
  cursor: pointer;
  color: var(--color-texto-secundario);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
  font-family: inherit;
}

.hcp-nav-btn:hover {
  background: var(--color-superficie-bloque);
}

.hcp-nav-btn .material-symbols-outlined {
  font-size: 18px;
}

.hcp-nav-btn.primary {
  background: linear-gradient(135deg, var(--color-acento) 0%, #f97316 100%);
  color: var(--color-texto-principal);
  border-color: var(--color-acento);
  font-weight: 800;
}

.hcp-nav-btn.primary:hover {
  background: linear-gradient(135deg, var(--color-acento-hover) 0%, #ea580c 100%);
}

/* ── RESPONSIVE (curso) ── */
@media (max-width: 640px) {
  .hcp-curso-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .hcp-page-curso .hcp-content {
    padding: 20px 16px;
  }
}


/* ══════════════════════════════════════════════════════════
   PÁGINAS LEGALES: aviso-legal, politica-privacidad,
   terminos-condiciones, politica-cookies
   (.hcp-page-aviso-legal, .hcp-page-politica-privacidad,
    .hcp-page-terminos-condiciones, .hcp-page-politica-cookies)
   Las 4 comparten exactamente el mismo CSS.
   ══════════════════════════════════════════════════════════ */
.hcp-page-aviso-legal,
.hcp-page-politica-privacidad,
.hcp-page-terminos-condiciones,
.hcp-page-politica-cookies {
  background: var(--color-fondo-detalles);
}

.hcp-legal-page {
  min-height: 100vh;
  background: var(--color-fondo-detalles);
  padding: 64px 20px;
}

.hcp-legal-content {
  max-width: 780px;
  margin: 0 auto;
}

.hcp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-acento2);
  text-decoration: none;
  margin-bottom: 36px;
  transition: color 0.15s;
}
.hcp-back-link:hover { color: var(--color-acento2-hover); }

.hcp-legal-header {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--color-borde-separador);
}

.hcp-legal-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-acento2-hover);
  margin-bottom: 12px;
}

.hcp-legal-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  color: var(--color-texto-principal);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hcp-legal-section {
  margin-bottom: 40px;
}

.hcp-legal-section-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-texto-principal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-acento);
  display: inline-block;
}

.hcp-legal-section p {
  font-size: 0.95rem;
  color: var(--color-texto-secundario);
  line-height: 1.8;
  margin-bottom: 12px;
}
.hcp-legal-section p:last-child { margin-bottom: 0; }

.hcp-legal-section ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0;
}

.hcp-legal-section ul li {
  font-size: 0.95rem;
  color: var(--color-texto-secundario);
  line-height: 1.7;
  padding-left: 22px;
  position: relative;
}

.hcp-legal-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='1,6 4.5,9.5 11,2.5' fill='none' stroke='%23d4a017' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.hcp-legal-section strong { color: var(--color-texto-principal); font-weight: 700; }

.hcp-info-card {
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-card);
  border-radius: var(--radio);
  padding: 20px 24px;
  margin-top: 16px;
  font-size: 0.93rem;
  color: var(--color-texto-secundario);
  line-height: 1.7;
}
.hcp-info-card strong { color: var(--color-texto-principal); font-weight: 700; }

.hcp-sub-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-texto-principal);
  margin-top: 20px;
  margin-bottom: 8px;
}

.hcp-legal-section a {
  color: var(--color-acento2);
  text-decoration: none;
}
.hcp-legal-section a:hover {
  color: var(--color-acento2-hover);
  text-decoration: underline;
}

.hcp-warning-card {
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(234, 88, 12, 0.3);
  border-radius: var(--radio);
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
  line-height: 1.7;
}

/* ── RESPONSIVE (legales) ── */
@media (max-width: 540px) {
  .hcp-legal-page { padding: 40px 16px; }
  .hcp-legal-title { font-size: 1.5rem; }
}


/* ══════════════════════════════════════════════════════════
   CARRITO Y FINALIZAR COMPRA — skin oscuro de SOLO COLORES
   Regla de seguridad: aquí solo se tocan colores, bordes y
   tipografía sobre los selectores estándar de WooCommerce.
   Nada de layout/estructura: la lógica y los iframes de pago
   (WooPayments, PayPal, Klarna) quedan intactos. Si algo se
   ve mal, se puede borrar esta sección entera sin riesgo.
   ══════════════════════════════════════════════════════════ */
body.woocommerce-cart,
body.woocommerce-checkout {
  background: var(--color-fondo-detalles);
}
/* Astra envuelve el contenido en cajas blancas (las pinta su CSS dinámico
   del Customizer, por eso hace falta !important). Se apagan SOLO en estas
   dos páginas; el resto del sitio no se ve afectado. */
body.woocommerce-cart .site-content,
body.woocommerce-checkout .site-content,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-cart #main,
body.woocommerce-checkout #main,
body.woocommerce-cart article,
body.woocommerce-checkout article,
body.woocommerce-cart .ast-article-single,
body.woocommerce-checkout .ast-article-single,
body.woocommerce-cart .ast-article-post,
body.woocommerce-checkout .ast-article-post,
body.woocommerce-cart .ast-woocommerce-container,
body.woocommerce-checkout .ast-woocommerce-container,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content {
  background: transparent !important;
}

/* Texto y títulos */
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-cart h1, body.woocommerce-cart h2, body.woocommerce-cart h3,
body.woocommerce-checkout h1, body.woocommerce-checkout h2, body.woocommerce-checkout h3,
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout form.checkout label {
  color: var(--color-texto-principal);
}
body.woocommerce-cart .woocommerce a:not(.button),
body.woocommerce-checkout .woocommerce a:not(.button) {
  color: var(--color-acento2);
}

/* Tablas (carrito y resumen del pedido) */
body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table {
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-separador);
  border-radius: 12px;
  color: var(--color-texto-principal);
}
body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td {
  background: transparent;
  border-color: var(--color-borde-separador);
  color: var(--color-texto-principal);
}

/* Campos de formulario (dirección, cupones…) */
body.woocommerce-cart input.input-text,
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  color: var(--color-texto-principal);
  border-radius: 8px;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-texto-principal);
}
body.woocommerce-cart input.input-text:focus,
body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
  border-color: var(--color-acento);
}

/* Caja de métodos de pago (los iframes de tarjeta siguen claros: son del
   procesador y no se tocan) */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
  background: var(--color-superficie-card);
  border-radius: 12px;
}
/* .payment_box (donde el gateway pinta los campos de tarjeta) se deja con
   su apariencia por defecto a propósito: es la zona del iframe de Stripe/
   WooPayments y forzarle colores oscuros solo generaba choques visuales. */
body.woocommerce-checkout #payment .payment_methods li,
body.woocommerce-checkout #payment label {
  color: var(--color-texto-principal);
}

/* Botones principales (Finalizar compra / Realizar pedido / Actualizar) */
body.woocommerce-cart .woocommerce .button,
body.woocommerce-cart .checkout-button,
body.woocommerce-checkout .woocommerce .button,
body.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 800;
}
body.woocommerce-cart .woocommerce .button:hover,
body.woocommerce-checkout #place_order:hover {
  background: linear-gradient(135deg, var(--color-acento-hover) 0%, var(--color-acento-hover-grad-fin) 100%);
}

/* Avisos de WooCommerce en estas páginas */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
  background: var(--color-superficie-bloque);
  border-color: var(--color-acento);
  color: var(--color-texto-principal);
}

/* Metadatos del artículo tipo ": verdadero" (checkbox de consentimiento del
   plugin Product Input Fields): se ocultan solo visualmente en carrito y
   resumen; el valor sigue guardándose en el pedido. */
body.woocommerce-cart .cart_item dl.variation,
body.woocommerce-checkout .cart_item dl.variation {
  display: none;
}


/* ══════════════════════════════════════════════════════════
   CHECKOUT REDISEÑADO (woocommerce/checkout/form-checkout.php)
   Dos columnas explícitas (mismo grid que Pago): izquierda
   facturación, derecha (sticky) pedido + pago. El grid lo
   controlamos aquí, no el CSS nativo de checkout de Astra
   (que usaba floats y chocaba con este layout). Solo envuelve
   el HTML real de WooCommerce — nada de su lógica se toca.
   ══════════════════════════════════════════════════════════ */
.hcp-page-checkout {
  background: var(--color-fondo-detalles);
  min-height: 100vh;
  padding: 56px 20px 80px;
}

.hcp-checkout-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.hcp-checkout-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
}

.hcp-checkout-right {
  position: sticky;
  top: 24px;
}

.hcp-checkout-title {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--color-texto-principal);
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}

.hcp-checkout-section {
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-card);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
}

/* El formulario de checkout (facturación + pago) usa un tema CLARO propio,
   distinto del resto del sitio. Motivo: WooCommerce Payments samplea el
   background-color y el color de ".woocommerce-checkout .form-row label" de
   esta misma zona para "adaptar" el tema del Payment Element de Stripe
   dentro de su iframe — si el fondo aquí fuera oscuro, Stripe también se
   pinta oscuro y sus etiquetas flotantes (con la reducción de opacidad que
   aplica en reposo) quedan casi invisibles. Manteniendo un único esquema
   claro en toda esta zona evitamos tener que perseguir selectores internos
   de Stripe cada vez que cambia su lógica de detección. */
.hcp-checkout-form .hcp-checkout-section {
  background: #f7f7f9;
  border-color: #e2e2e6;
}

/* Astra trae CSS dinámico propio para #order_review_heading / #order_review
   (border-width: 2px 2px 0 2px / 0 2px 2px, pensado para su layout original
   de checkout). Como usa selectores de ID, le gana en especificidad a
   nuestras clases — hay que igualar la especificidad con el mismo ID para
   poder resetearlo. */
#order_review_heading,
#order_review {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hcp-checkout-section-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-texto-principal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-acento);
  display: inline-block;
}
.hcp-checkout-form .hcp-checkout-section-title {
  color: #1a1a1a;
}

/* Título "Detalles de facturación" / "Información adicional" que imprimen
   form-billing.php y form-shipping-fields.php respectivamente. */
.hcp-checkout-section .woocommerce-billing-fields > h3,
.hcp-checkout-section .woocommerce-additional-fields > h3 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-texto-principal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-acento);
  display: inline-block;
}
.hcp-checkout-form .hcp-checkout-section .woocommerce-billing-fields > h3,
.hcp-checkout-form .hcp-checkout-section .woocommerce-additional-fields > h3 {
  color: #1a1a1a !important;
}

/* Campos de formulario (nombre, DNI, email, dirección…), solo dentro del
   formulario de checkout (ver el comentario en .hcp-checkout-form
   .hcp-checkout-section más arriba: aquí el fondo es claro a propósito
   porque WooCommerce Payments samplea este mismo selector de label para
   colorear las etiquetas flotantes DENTRO del iframe de Stripe). */
.hcp-checkout-section .form-row { margin-bottom: 16px; }
.hcp-checkout-section label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-principal);
  margin-bottom: 6px;
}
.hcp-checkout-form .hcp-checkout-section label {
  color: #333 !important;
}
.hcp-checkout-section label .required {
  color: var(--color-acento);
  text-decoration: none;
}
/* Esto en la práctica ya no llega a los campos de tarjeta (viven en un
   iframe de js.stripe.com, fuera de nuestro alcance) — solo afecta a inputs
   reales de esta sección (facturación, cupón). width:100% se excluye dentro
   de #payment por si algún otro gateway sí usa inputs reales en su propia
   caja, para no forzarles una fila a columna. */
.hcp-checkout-section input.input-text,
.hcp-checkout-section select,
.hcp-checkout-section textarea,
.hcp-checkout-section .select2-container--default .select2-selection--single {
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  border-radius: 8px;
  color: var(--color-texto-principal);
  padding: 12px 14px;
  font-size: 0.95rem;
}
.hcp-checkout-form .hcp-checkout-section input.input-text,
.hcp-checkout-form .hcp-checkout-section select,
.hcp-checkout-form .hcp-checkout-section textarea,
.hcp-checkout-form .hcp-checkout-section .select2-container--default .select2-selection--single {
  background: #ffffff !important;
  border-color: #d0d0d6;
  color: #1a1a1a !important;
}
.hcp-checkout-form .hcp-checkout-section input.input-text::placeholder,
.hcp-checkout-form .hcp-checkout-section textarea::placeholder {
  color: #8a8a90;
  opacity: 1;
}
.hcp-checkout-section input.input-text:not(#payment *),
.hcp-checkout-section select:not(#payment *),
.hcp-checkout-section textarea:not(#payment *),
.hcp-checkout-section .select2-container--default .select2-selection--single:not(#payment *) {
  width: 100%;
}
.hcp-checkout-section input.input-text:focus,
.hcp-checkout-section select:focus,
.hcp-checkout-section textarea:focus {
  outline: none;
  border-color: var(--color-acento);
}

/* Astra trae CSS propio de checkout con floats para su layout de 2
   columnas por defecto. Aquí el grid de .hcp-checkout-inner ya define
   ambas columnas, así que se anula cualquier float/ancho heredado en los
   contenedores internos para que no compita con nuestro grid. */
#order_review,
.woocommerce-checkout-review-order,
.hcp-checkout-section #payment,
.hcp-checkout-section .woocommerce-checkout-payment {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.hcp-checkout-section .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-texto-principal);
  line-height: 44px;
}
.hcp-checkout-form .hcp-checkout-section .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1a1a1a;
}

/* Tabla "Tu pedido". WooCommerce trae fondo claro de fábrica en <thead>
   (pensado para temas claros) — se apaga explícitamente. */
.hcp-checkout-section table.shop_table thead,
.hcp-checkout-section table.shop_table th {
  background: transparent;
}
.hcp-checkout-section table.shop_table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-texto-principal);
  font-size: 0.9rem;
}
.hcp-checkout-form .hcp-checkout-section table.shop_table {
  background: transparent !important;
  color: #1a1a1a !important;
}
.hcp-checkout-section table.shop_table th,
.hcp-checkout-section table.shop_table td {
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-borde-separador);
  text-align: left;
}
.hcp-checkout-form .hcp-checkout-section table.shop_table th,
.hcp-checkout-form .hcp-checkout-section table.shop_table td {
  border-bottom-color: #e2e2e6;
  background: transparent !important;
  color: #1a1a1a !important;
}
.hcp-checkout-section table.shop_table th:last-child,
.hcp-checkout-section table.shop_table td:last-child { text-align: right; }
.hcp-checkout-section table.shop_table tr.order-total th,
.hcp-checkout-section table.shop_table tr.order-total td {
  font-size: 1.1rem;
  font-weight: 900;
  border-bottom: none;
  color: var(--color-acento);
}
/* Consentimiento del plugin Product Input Fields: mismo trato oscuro */
.hcp-checkout-section .cart_item dl.variation {
  font-size: 0.78rem;
  color: var(--color-texto-suave);
  margin: 4px 0 0;
}
.hcp-checkout-form .hcp-checkout-section .cart_item dl.variation {
  color: #6a6a6a;
}

/* Caja de métodos de pago (payment.php / payment-method.php).
   IMPORTANTE — no poner fondo oscuro aquí: WooCommerce Payments samplea el
   background-color computado de "#payment" (vía su lista backgroundSelectors
   en checkout.js) para decidir el color de fondo del iframe de Stripe. Si
   este contenedor es oscuro, Stripe pinta el Payment Element en modo oscuro
   y sus etiquetas flotantes (con la reducción de opacidad que aplica en
   reposo) quedan casi invisibles — esto es justo lo que causó la regresión
   de contraste. Dejarlo sin fondo propio (transparente/heredado del
   .hcp-checkout-section que sí es oscuro por fuera, pero sin pintar
   directamente #payment) hace que WooPayments detecte un fondo claro y
   renderice Stripe con su tema por defecto, ya accesible. Solo se fija
   el color de texto para los avisos propios de WooCommerce (Klarna/BNPL). */
.hcp-checkout-section #payment,
.hcp-checkout-section .woocommerce-checkout-payment {
  background: #f7f7f9 !important;
  border-radius: 10px;
  margin-top: 20px;
  padding: 16px;
  color: #4a4a4a !important;
}
.hcp-checkout-section #payment .payment_methods,
.hcp-checkout-section .woocommerce-checkout-payment .payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hcp-checkout-section #payment .payment_methods > li,
.hcp-checkout-section .woocommerce-checkout-payment .payment_methods > li {
  color: #1a1a1a !important;
  padding: 8px 0;
}
.hcp-checkout-section #payment label,
.hcp-checkout-section .woocommerce-checkout-payment label {
  color: #1a1a1a !important;
}
/* .payment_box: los campos de tarjeta (número, caducidad, CVC, país) van
   dentro de un iframe real de js.stripe.com — nuestro CSS no puede tocarlos
   por seguridad del navegador (dominio distinto). Se le da el mismo fondo
   claro que #payment (WooCommerce Payments también samplea
   "li.wc_payment_method .payment_box" como candidato de fondo, antes incluso
   de llegar a #payment en su lista de selectores) para que Stripe siga
   viendo un entorno claro de forma consistente. No poner fondo oscuro aquí.
   Los !important de este bloque son necesarios: hay reglas más antiguas
   (body.woocommerce-checkout #payment / #payment label, ver más arriba en
   este archivo) con la misma especificidad que ganaban por empate. */
.hcp-checkout-section #payment .payment_box,
.hcp-checkout-section .woocommerce-checkout-payment .payment_box {
  background: #f7f7f9 !important;
  border-radius: 8px;
  margin-top: 10px;
}
/* "Guardar la información de pago..." sí vive en nuestro DOM (no en el
   iframe): como la caja se queda clara, necesita un tono oscuro legible. */
.hcp-checkout-section #payment .payment_box .woocommerce-SavedPaymentMethods-saveNew,
.hcp-checkout-section .woocommerce-checkout-payment .payment_box .woocommerce-SavedPaymentMethods-saveNew {
  color: #333 !important;
}
.hcp-checkout-section .woocommerce-terms-and-conditions-wrapper,
.hcp-checkout-section .woocommerce-privacy-policy-text {
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
  margin: 16px 0;
}
.hcp-checkout-form .hcp-checkout-section .woocommerce-terms-and-conditions-wrapper,
.hcp-checkout-form .hcp-checkout-section .woocommerce-privacy-policy-text {
  color: #4a4a4a;
}
.hcp-checkout-section .woocommerce-terms-and-conditions-wrapper a,
.hcp-checkout-section .woocommerce-privacy-policy-text a {
  color: var(--color-acento2);
}

/* Botón "Realizar el pedido" */
.hcp-checkout-section #place_order {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 18px 24px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.hcp-checkout-section #place_order:hover {
  background: linear-gradient(135deg, var(--color-acento-hover) 0%, var(--color-acento-hover-grad-fin) 100%);
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .hcp-checkout-inner {
    grid-template-columns: 1fr;
  }
  .hcp-checkout-right {
    position: static;
  }
}

@media (max-width: 540px) {
  .hcp-checkout-wrap { max-width: 100%; }
  .hcp-checkout-title { font-size: 1.5rem; }
}


/* ══════════════════════════════════════════════════════════
   CARRITO REDISEÑADO (woocommerce/cart/cart.php)
   Misma tarjeta de sección que el checkout (.hcp-checkout-section),
   con la tabla clásica de WooCommerce dentro. Solo estilo — la
   lógica de cantidad/cupón/quitar artículo es la original.
   ══════════════════════════════════════════════════════════ */
.hcp-page-cart {
  background: var(--color-fondo-detalles);
  min-height: 100vh;
  padding: 56px 20px 80px;
}

.hcp-cart-wrap {
  max-width: 780px;
  margin: 0 auto;
}

.hcp-cart-title {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--color-texto-principal);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

/* Tabla de artículos: cabecera, miniatura, quitar, cantidad.
   WooCommerce trae fondo claro de fábrica en <thead> (pensado para temas
   claros) — se apaga explícitamente, si no queda un fondo blanco. */
.hcp-page-cart table.cart thead,
.hcp-page-cart table.cart th {
  background: transparent;
}
.hcp-page-cart table.cart th {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
  border-bottom: 1px solid var(--color-borde-separador);
}
.hcp-page-cart table.cart .product-thumbnail img {
  border-radius: 8px;
  width: 64px;
  height: auto;
}
.hcp-page-cart table.cart .product-name a {
  color: var(--color-texto-principal);
  font-weight: 700;
  text-decoration: none;
}
.hcp-page-cart table.cart .remove {
  color: var(--color-texto-suave);
  font-size: 1.3rem;
  text-decoration: none;
  line-height: 1;
}
.hcp-page-cart table.cart .remove:hover { color: var(--color-acento); }

.hcp-page-cart .quantity .qty {
  width: 64px;
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  border-radius: 8px;
  color: var(--color-texto-principal);
  padding: 8px;
  text-align: center;
}

/* Fila de acciones: cupón + actualizar carrito */
.hcp-page-cart tr.actions td.actions {
  border-bottom: none;
  padding-top: 20px;
}
.hcp-page-cart .coupon {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.hcp-page-cart .coupon .input-text {
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  border-radius: 8px;
  color: var(--color-texto-principal);
  padding: 10px 14px;
}
.hcp-page-cart .button {
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  color: var(--color-texto-principal);
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
}
.hcp-page-cart .button:hover { border-color: var(--color-acento); }

/* Caja de totales (cart-totals.php, enganchada por hook) */
.hcp-cart-collaterals .cart_totals h2 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-texto-principal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-acento);
  display: inline-block;
}
.hcp-cart-collaterals table.shop_table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-texto-principal);
  font-size: 0.9rem;
}
.hcp-cart-collaterals table.shop_table th,
.hcp-cart-collaterals table.shop_table td {
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-borde-separador);
  text-align: left;
}
.hcp-cart-collaterals table.shop_table th:last-child,
.hcp-cart-collaterals table.shop_table td:last-child { text-align: right; }
.hcp-cart-collaterals table.shop_table tr.order-total th,
.hcp-cart-collaterals table.shop_table tr.order-total td {
  font-size: 1.1rem;
  font-weight: 900;
  border-bottom: none;
  color: var(--color-acento);
}
.hcp-cart-collaterals .wc-proceed-to-checkout { margin-top: 16px; }
.hcp-cart-collaterals .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 18px 24px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.hcp-cart-collaterals .wc-proceed-to-checkout .checkout-button:hover {
  background: linear-gradient(135deg, var(--color-acento-hover) 0%, var(--color-acento-hover-grad-fin) 100%);
  transform: translateY(-2px);
}

/* Consentimiento del plugin Product Input Fields en la tabla del carrito */
.hcp-page-cart .cart_item dl.variation {
  font-size: 0.78rem;
  color: var(--color-texto-suave);
  margin: 4px 0 0;
}

/* ══════════════════════════════════════════════════════════
   MI CUENTA REDISEÑADA (woocommerce/myaccount/my-account.php)
   A diferencia de Home/Curso/Pago/Checkout, esta página NO trae
   su propio <html> — vive dentro del contenido normal de Astra
   (header/footer del tema siguen siendo los de Astra). Por eso
   se envuelve en una tarjeta oscura propia en vez de pintar el
   body entero. Menú lateral + panel de contenido; el contenido
   real (dashboard/pedidos/direcciones/datos/login) lo siguen
   generando los hooks/plantillas nativos de WooCommerce. */
/* La página entera en oscuro, igual que carrito/checkout: sin esto nuestro
   bloque quedaba como un cajón negro flotando sobre la página blanca de
   Astra. "woocommerce-account" es la clase de body de /mi-cuenta/ (y de
   todos sus endpoints: pedidos, direcciones, datos, login). El mismo
   listado de capas que Astra pinta de blanco desde su CSS dinámico del
   Customizer — por eso el !important, como en carrito/checkout. */
body.woocommerce-account {
  background: var(--color-fondo-detalles);
}
body.woocommerce-account .site-content,
body.woocommerce-account .site-main,
body.woocommerce-account #primary,
body.woocommerce-account #main,
body.woocommerce-account article,
body.woocommerce-account .ast-article-single,
body.woocommerce-account .ast-article-post,
body.woocommerce-account .ast-woocommerce-container,
body.woocommerce-account .entry-content {
  background: transparent !important;
}
/* Título "Mi Cuenta" de Astra y encabezados, legibles sobre el fondo oscuro */
body.woocommerce-account .entry-title,
body.woocommerce-account h1,
body.woocommerce-account h2,
body.woocommerce-account h3 {
  color: var(--color-texto-principal);
}

.hcp-myaccount-wrap {
  background: var(--color-fondo-detalles);
  border-radius: 16px;
  padding: 32px 0;
  margin: 24px 0;
}
.hcp-myaccount-inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

/* Navegación (Escritorio / Pedidos / Direcciones / Datos de la cuenta / Salir).
   WooCommerce trae por defecto un float+width porcentual en esta nav (pensado
   para su layout nativo de 2 columnas) — se anula explícitamente para que
   ocupe todo el ancho de nuestra columna del grid, igual que se tuvo que
   hacer con #order_review en el checkout. */
.hcp-myaccount-nav .woocommerce-MyAccount-navigation {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-card);
  border-radius: 14px;
  padding: 8px;
  box-sizing: border-box;
}
.hcp-myaccount-nav .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.hcp-myaccount-nav .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--color-borde-separador);
}
.hcp-myaccount-nav .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}
.hcp-myaccount-nav .woocommerce-MyAccount-navigation li a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--color-texto-secundario) !important;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
.hcp-myaccount-nav .woocommerce-MyAccount-navigation li a:hover {
  background: var(--color-superficie-bloque);
  color: var(--color-texto-principal) !important;
}
.hcp-myaccount-nav .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-acento-tenue);
  color: var(--color-acento2) !important;
}

/* Panel de contenido: escritorio, pedidos, direcciones, datos, login.
   Mismo reset que la nav: WooCommerce le pone float:right + width:68% de
   fábrica (su layout nativo de 2 columnas) y sin esto no llena su columna
   del grid — quedaba un hueco vacío a la derecha. */
.hcp-myaccount-content {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  background: var(--color-superficie-card);
  border: 1px solid var(--color-borde-card);
  color: var(--color-texto-principal);
  border-radius: 14px;
  padding: 28px;
}
.hcp-myaccount-content h2,
.hcp-myaccount-content h3 {
  color: var(--color-texto-principal) !important;
  font-weight: 800;
  margin: 0 0 16px;
}
.hcp-myaccount-content p {
  color: var(--color-texto-secundario);
  line-height: 1.6;
}
.hcp-myaccount-content a:not(.button) {
  color: var(--color-acento2);
}
.hcp-myaccount-content strong {
  color: var(--color-texto-principal);
}

/* Botón "Continuar con el curso" del escritorio (woocommerce_account_dashboard) */
.hcp-myaccount-content .hcp-dashboard-course-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  color: #fff !important;
  border-radius: 10px;
  font-weight: 800;
  padding: 14px 24px;
  text-decoration: none !important;
  margin-top: 8px;
  transition: background 0.2s, transform 0.15s;
}
.hcp-myaccount-content .hcp-dashboard-course-btn:hover {
  background: linear-gradient(135deg, var(--color-acento-hover) 0%, var(--color-acento-hover-grad-fin) 100%);
  transform: translateY(-2px);
}

/* Tabla de pedidos */
.hcp-myaccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-texto-principal);
  font-size: 0.9rem;
}
.hcp-myaccount-content table.shop_table thead,
.hcp-myaccount-content table.shop_table th {
  background: transparent !important;
}
.hcp-myaccount-content table.shop_table th,
.hcp-myaccount-content table.shop_table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-borde-separador);
  text-align: left;
  color: var(--color-texto-principal) !important;
}

/* Direcciones (facturación/envío) */
.hcp-myaccount-content .woocommerce-Address {
  background: var(--color-superficie-bloque);
  border-radius: 10px;
  padding: 18px;
}
.hcp-myaccount-content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hcp-myaccount-content .woocommerce-Address-title h2 {
  font-size: 0.95rem;
  margin: 0;
}
.hcp-myaccount-content address {
  color: var(--color-texto-secundario);
  font-style: normal;
  line-height: 1.6;
}
.hcp-myaccount-content.addresses,
.hcp-myaccount-content .u-columns.addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Formularios (editar cuenta, login, registro, direcciones) */
.hcp-myaccount-content form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-principal) !important;
  margin-bottom: 6px;
}
.hcp-myaccount-content form .input-text,
.hcp-myaccount-content form select,
.hcp-myaccount-content form textarea {
  width: 100%;
  background: var(--color-superficie-bloque);
  border: 1px solid var(--color-borde-separador);
  border-radius: 8px;
  color: var(--color-texto-principal);
  padding: 12px 14px;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.hcp-myaccount-content form .input-text:focus,
.hcp-myaccount-content form select:focus,
.hcp-myaccount-content form textarea:focus {
  outline: none;
  border-color: var(--color-acento);
}
.hcp-myaccount-content form fieldset {
  border: 1px solid var(--color-borde-separador);
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0;
}
.hcp-myaccount-content form fieldset legend {
  color: var(--color-texto-principal);
  font-weight: 700;
  padding: 0 8px;
}
.hcp-myaccount-content form button[type="submit"],
.hcp-myaccount-content form .button {
  background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-grad-fin) 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  padding: 12px 22px;
  cursor: pointer;
}
.hcp-myaccount-content form button[type="submit"]:hover,
.hcp-myaccount-content form .button:hover {
  background: linear-gradient(135deg, var(--color-acento-hover) 0%, var(--color-acento-hover-grad-fin) 100%);
}
.hcp-myaccount-content .woocommerce-form-login__rememberme {
  color: var(--color-texto-secundario);
  font-weight: 400;
}

/* Login/registro en 2 columnas (solo si el registro está habilitado) */
.hcp-myaccount-content #customer_login.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 860px) {
  .hcp-myaccount-inner {
    grid-template-columns: 1fr;
  }
  .hcp-myaccount-content .woocommerce-Address-title,
  .hcp-myaccount-content .u-columns.addresses,
  .hcp-myaccount-content #customer_login.col2-set {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .hcp-myaccount-wrap { padding: 20px 16px; }
  .hcp-myaccount-content { padding: 20px; }
}

@media (max-width: 540px) {
  .hcp-cart-wrap { max-width: 100%; }
  .hcp-cart-title { font-size: 1.5rem; }
}