/*
Theme Name: Espino Nativo
Theme URI: https://espinojuridico.do
Description: Tema nativo de Espino & Espino — sin Elementor. Incluye portada, áreas, centro de actualización, noticiero, videos, biblioteca forense y contacto. Configure todo desde el menú Espino del escritorio. Desarrollado por MetaMax Digital.
Author: MetaMax Digital
Author URI: https://metamaxdigital.com.do
Version: 1.0.2
Requires Plugins: espino-core
Text Domain: espino-nativo
Tags: law, lawyer, attorney, legal, corporate, prestigious, dominican-republic

    ╔══════════════════════════════════════════════════════════════════╗
    ║     ESPINO & ESPINO — SISTEMA DE DISEÑO CORPORATIVO             ║
    ║     Identidad Institucional de Alta Dirección Jurídica           ║
    ╚══════════════════════════════════════════════════════════════════╝
*/

:root {
  --color-navy-darkest: #050b14;
  --color-navy-dark: #08111e;
  --color-navy-surface: #0d1b2e;
  --color-navy-card: #11233b;
  --color-navy-border: #1e3557;
  --color-navy-border-subtle: rgba(201, 166, 92, 0.16);
  --color-gold: #c9a65c;
  --color-gold-light: #dfc385;
  --color-gold-highlight: #ebd39d;
  --color-gold-dark: #9e7d36;
  --color-bronze: #8b5a2b;
  --color-text-main: #f8fafc;
  --color-text-sub: #cbd5e1;
  --color-text-muted: #94a3b8;
  --font-serif: 'Cinzel', 'Times New Roman', Georgia, serif;
  --font-editorial: 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   1. RESET Y BASE GLOBAL (SOBRESCRIBE RESET.CSS DE HELLO ELEMENTOR)
   ============================================================ */
html,
body,
body.elementor-default,
body.page-template-default,
body.single,
body.archive,
#content,
.site-main {
  background-color: var(--color-navy-dark) !important;
  color: var(--color-text-main) !important;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  line-height: 1.7;
  background-image: radial-gradient(circle at 50% -10%, rgba(201, 166, 92, 0.05) 0%, transparent 60%);
  background-attachment: fixed;
}

/* Tipografías institucionales */
h1, h2, h3, .font-serif-legal {
  font-family: var(--font-serif);
  letter-spacing: 0.03em;
  color: var(--color-text-main);
}

h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-text-main);
}

p {
  color: var(--color-text-muted);
  line-height: 1.75;
}

a {
  color: var(--color-gold-light);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
  color: var(--color-gold);
}

::selection {
  background: var(--color-gold);
  color: var(--color-navy-darkest);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-navy-darkest);
}
::-webkit-scrollbar-thumb {
  background: var(--color-navy-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* ============================================================
   2. CONTENEDORES Y REGLAS DE LAYOUT
   ============================================================ */
.es-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .es-container {
    padding: 0 1rem;
  }
}

/* Seguridad responsive: ninguna imagen del contenido puede desbordar la
   pantalla del teléfono, y los textos largos (correos, enlaces) se parten
   en vez de empujar el layout. */
img {
  max-width: 100%;
  height: auto;
}
.es-single-content,
.es-socio-bio,
.es-scard-cred,
.es-acard-desc-text,
.es-rescard p,
.es-footer-contact,
.es-socio-contacto {
  overflow-wrap: break-word;
}

.es-grid {
  display: grid;
  gap: 1.5rem;
}
.es-grid-2 { grid-template-columns: repeat(2, 1fr); }
.es-grid-3 { grid-template-columns: repeat(3, 1fr); }
.es-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .es-grid-4, .es-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .es-grid-2, .es-grid-3, .es-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   3. HEADER Y NAVBAR GLOBAL
   ============================================================ */
.elementor-element-esheader0 {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  background: rgba(8, 17, 30, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(201, 166, 92, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  padding: 10px 24px !important;
  transition: all 0.3s ease;
}

/* Forzar el container raíz del header a fila, sin wrap
   IDs reales: esheader0 (root), 797dd90 (logo), 3328d90 (nav), 270b047 (cta) */
.elementor-element-esheader0 > .elementor-container,
.elementor-element-esheader0.e-con > .e-con-inner,
#esheader0 > .e-con-inner,
.elementor-element-esheader0 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
}

/* Columna del logo */
.elementor-element-797dd90,
.elementor-element-797dd90 > .e-con-inner {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Columna del menú — crece para ocupar el espacio central */
.elementor-element-3328d90,
.elementor-element-3328d90 > .e-con-inner {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Columna del botón CTA */
.elementor-element-270b047,
.elementor-element-270b047 > .e-con-inner {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Evitar que el nav-menu widget desborde */
.elementor-element-12792db,
.elementor-element-12792db .elementor-widget-container {
  width: 100% !important;
}

body.home.es-header-solid .elementor-element-esheader0,
body.es-header-solid .elementor-element-esheader0 {
  background: rgba(5, 11, 20, 0.98) !important;
  border-bottom-color: rgba(201, 166, 92, 0.35) !important;
}

.es-header-logo {
  display: flex !important;
  align-items: center;
  text-decoration: none;
}

a.es-header-logo img,
.es-header-logo img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  display: block;
}

/* Navegación del Header */
.es-header-nav {
  width: 100%;
}

.es-header-nav .elementor-nav-menu--main > ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.es-header-nav .elementor-nav-menu--main > ul > li > a {
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--color-text-sub) !important;
  padding: 7px 10px !important;
  border-radius: 6px;
  letter-spacing: 0.01em;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.es-header-nav .elementor-nav-menu--main > ul > li > a:hover,
.es-header-nav .elementor-nav-menu--main > ul > li.current-menu-item > a {
  color: var(--color-gold-light) !important;
  background: rgba(201, 166, 92, 0.08);
}

/* Botón CTA del Header */
.elementor-element-esheader0 .elementor-button,
.elementor-element-esheader0 .es-btn-cta-nav {
  background: linear-gradient(135deg, #DFC385 0%, #C9A65C 100%) !important;
  color: #08111e !important;
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-gold) !important;
  box-shadow: 0 2px 10px rgba(201, 166, 92, 0.25) !important;
  transition: all 0.25s ease !important;
}

.elementor-element-esheader0 .elementor-button:hover,
.elementor-element-esheader0 .es-btn-cta-nav:hover {
  background: linear-gradient(135deg, #EBD39D 0%, #DFC385 100%) !important;
  box-shadow: 0 4px 16px rgba(201, 166, 92, 0.4) !important;
  transform: translateY(-1px);
}

/* Toggle móvil */
.elementor-menu-toggle {
  color: var(--color-text-main) !important;
  border: 1px solid rgba(201, 166, 92, 0.3) !important;
  border-radius: 6px;
  padding: 6px;
}
.elementor-menu-toggle svg {
  fill: var(--color-gold-light) !important;
}

/* ============================================================
   4. COMPONENTES: BOTONES, PILLS Y BADGES
   ============================================================ */
.btn-gold,
.es-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #DFC385 0%, #C9A65C 100%);
  color: #08111e !important;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  border-radius: 6px;
  border: 1px solid var(--color-gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(201, 166, 92, 0.25);
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-gold:hover,
.es-btn-gold:hover {
  background: linear-gradient(135deg, #EBD39D 0%, #DFC385 100%);
  box-shadow: 0 6px 20px rgba(201, 166, 92, 0.35);
  transform: translateY(-2px);
  color: #08111e !important;
}

.btn-outline,
.es-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-gold-light) !important;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.85rem 1.7rem;
  border-radius: 6px;
  border: 1px solid rgba(201, 166, 92, 0.45);
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-outline:hover,
.es-btn-ghost:hover {
  background: rgba(201, 166, 92, 0.08);
  border-color: var(--color-gold);
  color: #fff !important;
  transform: translateY(-2px);
}

/* Eyebrows & Badges */
.es-eyebrow,
.es-kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.es-pill-gold,
.es-pill-brown {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(201, 166, 92, 0.08);
  border: 1px solid rgba(201, 166, 92, 0.28);
  color: var(--color-gold-light);
  margin-bottom: 0.8rem;
}

.es-badge--gold {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  background: rgba(201, 166, 92, 0.1);
  border: 1px solid rgba(201, 166, 92, 0.25);
  border-radius: 4px;
  padding: 0.2rem 0.65rem;
}

/* ============================================================
   5. CABECERAS DE PÁGINAS Y SECCIONES (100% LEGIBLES)
   ============================================================ */
.es-page-head,
.es-section-head,
.es-sec-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3rem;
  padding-top: 2rem;
}

.es-page-title,
.es-section-title,
.es-sec-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-main) !important;
  margin: 0.5rem 0 0.8rem;
}

.es-section-lead,
.es-sec-sub {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text-sub) !important;
  margin: 0 auto;
  max-width: 760px;
}

/* ============================================================
   6. TARJETAS CORPORATIVAS (CARDS)
   ============================================================ */
.es-card,
.fresh-card,
.es-acard,
.es-scard,
.es-rescard {
  position: relative;
  background: var(--color-navy-surface) !important;
  border: 1px solid var(--color-navy-border-subtle) !important;
  border-radius: 8px;
  padding: 1.75rem;
  color: var(--color-text-main);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.es-card:hover,
.fresh-card:hover,
.es-acard:hover,
.es-scard:hover,
.es-rescard:hover {
  border-color: rgba(201, 166, 92, 0.45) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 16px rgba(201, 166, 92, 0.08);
  transform: translateY(-3px);
  color: var(--color-text-main);
}
/* Al pasar el cursor por la tarjeta del socio, el enlace se enciende para
   invitar al clic: sube a dorado brillante y la flecha avanza un poco. */
.es-scard .es-scard-link {
  transition: color 0.2s ease;
}
.es-scard .es-scard-link .dashicons {
  transition: transform 0.2s ease;
}
.es-scard:hover .es-scard-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.es-scard:hover .es-scard-link .dashicons {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .es-scard:hover .es-scard-link .dashicons {
    transform: none;
  }
}

.es-card-title,
.es-acard h3,
.es-scard h3,
.es-rescard h3 {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-main);
  margin: 0.6rem 0 0.5rem;
  transition: color 0.2s ease;
}

.es-card:hover .es-card-title,
.es-acard:hover h3,
.es-rescard:hover h3 {
  color: var(--color-gold-light);
}

.es-card-excerpt,
.es-acard-desc,
.es-scard-cred,
.es-rescard p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: 0.8rem;
}
/* La descripcion del recurso se recorta a 3 lineas con puntos suspensivos:
   asi todas las tarjetas miden lo mismo aunque un texto sea mas largo. */
.es-rescard > p {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La biografia del socio se escribe con el editor completo, asi que puede
   traer varios parrafos, listas y su propia alineacion. Sin esto, los
   parrafos heredarian el margen del navegador sin control y las listas
   saldrian sin sangria dentro de la tarjeta. */
.es-scard-cred > p,
.es-socio-cred > p {
  margin: 0 0 0.8em;
}
.es-scard-cred > p:last-child,
.es-socio-cred > p:last-child {
  margin-bottom: 0;
}
.es-scard-cred ul,
.es-scard-cred ol,
.es-socio-cred ul,
.es-socio-cred ol {
  margin: 0 0 0.8em 1.2em;
  padding: 0;
}
.es-scard-cred li,
.es-socio-cred li {
  margin-bottom: 0.3em;
}

.es-card-meta {
  font-size: 0.8rem;
  color: var(--color-gold);
  margin-top: 0.4rem;
  margin-bottom: 0;
}

/* ============================================================
   7. FILTROS (PILLS) EN ARCHIVOS Y RECURSOS
   ============================================================ */
.es-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 0 0 2.5rem;
}

.es-pill {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--color-text-sub);
  background: var(--color-navy-surface);
  border: 1px solid var(--color-navy-border);
  border-radius: 6px;
  padding: 0.45rem 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.es-pill:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
  background: rgba(201, 166, 92, 0.08);
}

.es-pill--active {
  background: linear-gradient(135deg, #DFC385 0%, #C9A65C 100%) !important;
  color: #08111e !important;
  border-color: var(--color-gold) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(201, 166, 92, 0.25);
}

/* ============================================================
   7B. BIBLIOTECA FORENSE (Del otro lado del estrado)
   ============================================================ */
.es-prose {
  max-width: 860px;
  margin: 0 auto 1.5rem;
  color: var(--color-text-sub);
  font-size: 1.02rem;
  line-height: 1.85;
  text-align: left;
}

.es-prose > p:first-child {
  font-size: 1.15rem;
  color: var(--color-text-main);
}

.es-quote {
  margin: 2rem auto;
  max-width: 720px;
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--color-gold);
  background: var(--color-navy-card);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-gold-light);
}

.es-attribution {
  max-width: 720px;
  margin: -0.6rem auto 2.5rem;
  text-align: right;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Cabecera de la biblioteca */
.es-doclib-head {
  text-align: center;
  margin: 3rem auto 2rem;
}

.es-doclib-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0.4rem 0 0;
}

/* Filtro compacto por categoria (dropdown) */
.es-docfilter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 0 2.5rem;
  flex-wrap: wrap;
}

.es-docfilter-label {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-sub);
}

.es-docselect {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-navy-surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A65C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  color: var(--color-text-main);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  border: 1px solid var(--color-navy-border);
  border-radius: 6px;
  padding: 0.5rem 2.4rem 0.5rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.es-docselect:hover {
  border-color: var(--color-gold);
}

.es-docselect:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 166, 92, 0.15);
}

/* Tarjeta de documento: icónico, ordenado y con pie fijo */
.es-card--doc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
}

.es-docicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 6px;
  background: rgba(201, 166, 92, 0.12);
  border: 1px solid rgba(201, 166, 92, 0.3);
  color: var(--color-gold);
  margin-bottom: 1rem;
  transition: all 0.25s ease;
}

.es-card--doc:hover .es-docicon {
  background: var(--color-gold);
  color: #08111e;
  border-color: var(--color-gold);
}

.es-docicon .dashicons {
  font-size: 22px;
  width: 22px;
  height: 22px;
}

.es-card--doc .es-badge--gold {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

.es-card--doc .es-card-excerpt {
  flex: 1 1 auto;
}

.es-card--doc .es-card-meta {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-navy-border-subtle);
}

@media (max-width: 640px) {
  .es-grid.es-docgrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   8. HERO SECTION (PÁGINA DE INICIO)
   ============================================================ */
.es-phero {
  position: relative;
  min-height: calc(90vh - 70px);
  padding: 4rem 0 2.5rem;
  background: radial-gradient(ellipse 90% 70% at 50% 10%, #0d1e38 0%, #08111e 70%, #050b14 100%);
  border-bottom: 1px solid rgba(201, 166, 92, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Hero compacto: cuando las pildoras y el boton estan apagados, el alto
   minimo de 90vh sobra y deja un hueco vacio. Asi mide lo que su contenido. */
.es-phero-compacto {
  min-height: 0;
  padding: 3rem 0;
}

.es-phero-main {
  width: 100%;
}

.es-phero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}

.es-phero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.8vw, 3.8rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--color-text-main);
  /* El nombre siempre en una sola linea; en pantallas chicas la letra se
     achica sola con el vw del clamp. */
  white-space: nowrap;
  margin: 0.8rem 0 0.5rem;
}

.es-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.8rem 0 1.2rem;
}

.es-divider-line {
  width: 4rem;
  height: 1px;
  background: linear-gradient(to right, #DFC385, transparent);
}

.es-divider-line--r {
  background: linear-gradient(to left, #DFC385, transparent);
}

.es-divider-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}

.es-phero-taglines {
  margin-bottom: 1.8rem;
}

.es-phero-tag1 {
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-gold-light);
  margin: 0;
}

.es-phero-tag2 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-sub);
  margin: 0.3rem 0 0;
}

/* Quick areas pills */
.es-hero-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.es-hpill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: rgba(13, 27, 46, 0.7);
  border: 1px solid rgba(30, 53, 87, 0.85);
  color: var(--color-text-main);
  text-decoration: none;
  transition: all 0.25s ease;
}

.es-hpill:hover {
  background: var(--color-navy-card);
  border-color: var(--color-gold);
  transform: translateY(-2px);
  color: #fff;
}

.es-hpill-ico {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(201, 166, 92, 0.12);
  color: var(--color-gold);
}

.es-hpill-ico .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.es-hpill-lbl {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
  /* Antes estas cuatro etiquetas venian escritas en mayusculas en el propio
     texto. Ahora el nombre sale del area de practica, que esta en minusculas,
     asi que las mayusculas se ponen aqui para que la banda se vea igual. */
  text-transform: uppercase;
}

/* CTA del hero */
.es-phero-cta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.es-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #DFC385 0%, #C9A65C 100%);
  color: #08111e !important;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--color-gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(201, 166, 92, 0.25);
  text-decoration: none;
  transition: all 0.25s ease;
}

.es-cta-pill:hover {
  background: linear-gradient(135deg, #EBD39D 0%, #DFC385 100%);
  box-shadow: 0 6px 20px rgba(201, 166, 92, 0.35);
  transform: translateY(-2px);
  color: #08111e !important;
}

.es-cta-pill .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.es-phero-note {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--color-text-sub);
}

/* Retrato de socios directores en Hero */
.es-phero-frame {
  position: relative;
  border-radius: 8px;
  padding: 6px;
  background: linear-gradient(135deg, rgba(201, 166, 92, 0.35), rgba(30, 53, 87, 0.5));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.es-phero-media {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 13;
  background: radial-gradient(circle at 50% 40%, rgba(201, 166, 92, 0.12) 0%, rgba(13, 27, 46, 0.95) 75%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.es-phero-media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

.es-seal {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  background: rgba(5, 11, 20, 0.92);
  border: 1px solid rgba(201, 166, 92, 0.4);
  color: var(--color-gold-light);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.es-seal .dashicons {
  color: var(--color-gold);
  font-size: 15px;
  width: 15px;
  height: 15px;
}

/* Indicador de scroll del hero */
.es-scrollhint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-sub);
  animation: es-scrollhint-bob 2.4s ease-in-out infinite;
}

/* “Mouse” con rueda animada (indicador clásico de scroll) */
.es-scrollhint .dashicons {
  position: relative;
  width: 24px;
  height: 37px;
  font-size: 0;
  vertical-align: middle;
  border: 1.5px solid rgba(201, 166, 92, 0.55);
  border-radius: 13px;
  background: rgba(201, 166, 92, 0.05);
  overflow: hidden;
}

.es-scrollhint .dashicons::before {
  content: none;
}

.es-scrollhint .dashicons::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: -1.5px;
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: var(--color-gold);
  animation: es-scrollhint-wheel 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes es-scrollhint-wheel {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(15px);
  }
}

@keyframes es-scrollhint-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* Franja de Valores */
.es-values {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.es-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.es-value {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.es-value-ico {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(201, 166, 92, 0.1);
  border: 1px solid rgba(201, 166, 92, 0.25);
  color: var(--color-gold);
}

.es-value-ico .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.es-value h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin: 0;
}

.es-value p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0.25rem 0 0;
}

@media (max-width: 900px) {
  .es-phero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .es-values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .es-hero-pills { grid-template-columns: 1fr; }
  .es-values-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   9. SECCIONES: FILOSOFÍA, ÁREAS, SOCIOS, RECURSOS
   ============================================================ */
.es-light-sec,
.es-sec-dark,
.es-socios-sec,
.es-contactband {
  background-color: var(--color-navy-dark) !important;
  color: var(--color-text-main) !important;
  padding: 5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Filosofía y Misión */
.es-phil-card {
  background: var(--color-navy-surface) !important;
  border: 1px solid var(--color-navy-border-subtle);
  border-radius: 8px;
  padding: 3rem 2.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.es-phil-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.es-phil-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--color-text-main);
  margin: 0.8rem 0 1rem;
}

.es-phil-lead-photo {
  width: 140px;
  height: 140px;
  margin: 1.5rem auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(201, 166, 92, 0.2);
}

.es-phil-lead-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.es-phil-quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--color-gold-light);
  line-height: 1.65;
  border-left: 3px solid var(--color-gold);
  padding: 0.6rem 0 0.6rem 1.5rem;
  margin: 1.8rem auto;
  text-align: left;
  max-width: 780px;
}

.es-phil-mission {
  color: var(--color-text-sub);
  font-size: 1.02rem;
  line-height: 1.85;
  /* Justificado por defecto para que el bloque tenga forma de columna limpia.
     Si el cliente alinea un parrafo de otra manera en el editor, su estilo en
     linea manda sobre esta regla. */
  text-align: justify;
}

/* Los dos textos de Filosofia se escriben con el editor enriquecido, asi que
   pueden traer varios <p> y su propia alineacion. Antes eran un texto suelto
   dentro del blockquote, asi que el <p> de aqui tiene que ser invisible: sin
   esto el navegador le pondria su margen de 1em y, peor, la regla "p" del
   tema le imponia el color y el interlineado de un parrafo normal, con lo que
   la cita dejaria de dorada y la mision mas cerrada. */
.es-phil-quote > p,
.es-phil-mission > p {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.es-phil-quote > p + p,
.es-phil-mission > p + p {
  /* Separacion marcada entre parrafos: con el interlineado de 1.85 que lleva
     esta seccion, 1em apenas se distinguia del salto de linea normal y todo se
     leia como un solo bloque pegado. */
  margin-top: 1.5em;
}

/* La mision era un <p> suelto y el navegador le daba su margen de 1em; ahora
   el contenedor es un div, que no lleva ninguno, asi que hay que devolvérselo
   para que el bloque respire igual que antes. */
.es-phil-mission {
  margin: 1em 0;
}

/* El estilo de bloque "Justificado" que elige el cliente en el editor de
   bloques, registrado con register_block_style() en functions.php.

   WordPress solo imprime el CSS de un estilo de bloque en las paginas que
   llevan algun parrafo con ese estilo puesto. Repitiendo la regla en la hoja
   del tema esta disponible siempre, que es lo que hace falta para que un
   parrafo ya guardado siga saliendo justificado sin depender de que WordPress
   decida encolarla. La regla es identica a la que lleva el editor. */
.is-style-justificado {
  text-align: justify;
}

.es-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.es-pillar {
  background: var(--color-navy-dark);
  border: 1px solid var(--color-navy-border);
  border-radius: 6px;
  padding: 1.5rem;
}

.es-pillar-ico {
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(201, 166, 92, 0.1);
  color: var(--color-gold);
  margin-bottom: 0.8rem;
}

.es-pillar h3,
.es-pillar h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-gold-light);
  margin: 0 0 0.5rem;
}

.es-pillar p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 850px) {
  .es-pillars { grid-template-columns: 1fr; }
}

/* Áreas de práctica cards */
.es-areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.es-acard-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.es-acard-ico {
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(201, 166, 92, 0.1);
  color: var(--color-gold);
}

.es-acard-ico .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.es-badge-litigios {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  background: rgba(201, 166, 92, 0.08);
  border: 1px solid rgba(201, 166, 92, 0.25);
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
}

.es-servkeys {
  margin: 1rem 0 1.25rem;
  padding: 0.8rem 1rem;
  background: rgba(5, 11, 20, 0.4);
  border-radius: 4px;
}

.es-servkeys-lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
}

.es-servkeys ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.es-servkeys li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--color-text-sub);
  margin-bottom: 0.35rem;
}

.es-servkeys li .dashicons {
  color: var(--color-gold);
  font-size: 15px;
  width: 15px;
  height: 15px;
}

.es-acard-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.9rem;
  margin-top: auto;
}

.es-acard-lead {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.es-acard-lead strong {
  color: var(--color-text-main);
}

.es-acard-link,
.es-scard-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-gold-light);
  letter-spacing: 0.04em;
}

@media (max-width: 800px) {
  .es-areas-grid { grid-template-columns: 1fr; }
}

/* Socios Directores Section */
.es-socios-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.es-socios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.es-scard {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.es-scard-photo {
  flex-shrink: 0;
  width: 120px;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(201, 166, 92, 0.35);
  background: var(--color-navy-darkest);
}

.es-scard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.es-scard-role {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
}

.es-scard-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-gold-light);
  background: rgba(201, 166, 92, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
}

@media (max-width: 800px) {
  .es-socios-grid { grid-template-columns: 1fr; }
  .es-scard { flex-direction: column; align-items: center; text-align: center; }
}

/* Recursos Jurídicos & Actualidad — cards */
.es-res-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  /* Parejas por estirado: la descripcion se recorta abajo a 3 lineas, asi
     que el largo del texto no manda en la altura. */
}

.es-rescard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  gap: 0.35rem;
}

.es-rescard--new {
  padding-top: 2.7rem;
}

.es-badge-new {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy-darkest);
  background: linear-gradient(135deg, #ebd39d 0%, #c9a65c 100%);
  padding: 0.22rem 0.6rem;
  border-radius: 4px;
}

.es-rescard-ico {
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(201, 166, 92, 0.1);
  border: 1px solid rgba(201, 166, 92, 0.25);
  color: var(--color-gold);
  margin-bottom: 0.35rem;
}

.es-rescard-ico .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.es-rescard-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* Pegado abajo: con las descripciones recortadas parejo, los enlaces
     quedan en fila en las cuatro tarjetas. */
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-gold-light);
  letter-spacing: 0.04em;
}

.es-rescard-link .dashicons {
  color: var(--color-gold);
  font-size: 16px;
  width: 16px;
  height: 16px;
}

@media (max-width: 1024px) {
  .es-res-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .es-res-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   10. CONTACTO & CITAS (FORMULARIOS & BANDA)
   ============================================================ */
.es-contactband-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  background: var(--color-navy-surface) !important;
  border: 1px solid var(--color-navy-border-subtle);
  border-radius: 8px;
  padding: 3rem 2.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.es-contactband-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--color-text-main);
  margin: 0.5rem 0 0.8rem;
}

.es-contactband-sub {
  color: var(--color-text-sub);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.es-contactband-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.es-contactband-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-sub);
  margin-bottom: 0.75rem;
}

.es-contactband-list .dashicons {
  color: var(--color-gold);
  font-size: 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.es-contactband-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

@media (max-width: 800px) {
  .es-contactband-card { grid-template-columns: 1fr; }
}

/* Formulario en página /contacto (100% LEGIBLE) */
.es-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 2rem;
}

.es-info-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: var(--color-navy-surface);
  border: 1px solid var(--color-navy-border-subtle);
  border-radius: 6px;
}

.es-info-card h4 {
  color: var(--color-gold-light);
  font-size: 0.95rem;
  margin: 0 0 0.25rem;
}

.es-info-card p {
  color: var(--color-text-sub);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

.es-ico {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  background: rgba(201, 166, 92, 0.1);
  border: 1px solid rgba(201, 166, 92, 0.3);
}

/* Campos de Formulario Elementor en modo oscuro */
.elementor-form-fields-wrapper label.elementor-field-label,
.elementor-field-label {
  color: var(--color-text-main) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.4rem !important;
}

.elementor-field-group .elementor-field,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: var(--color-navy-dark) !important;
  border: 1px solid var(--color-navy-border) !important;
  color: var(--color-text-main) !important;
  border-radius: 6px !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.92rem !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

.elementor-field-group .elementor-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201, 166, 92, 0.2) !important;
}

.elementor-field-group select.elementor-field option {
  background: var(--color-navy-surface) !important;
  color: var(--color-text-main) !important;
}

.elementor-button[type="submit"] {
  background: linear-gradient(135deg, #DFC385 0%, #C9A65C 100%) !important;
  color: #08111e !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 2rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-gold) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.elementor-button[type="submit"]:hover {
  background: linear-gradient(135deg, #EBD39D 0%, #DFC385 100%) !important;
  box-shadow: 0 4px 18px rgba(201, 166, 92, 0.35) !important;
  transform: translateY(-2px);
}

/* Perfil individual del socio: foto y datos en cabecera profesional. */
.es-socio-hero {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 2rem;
  align-items: center;
}
.es-socio-hero-photo img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  display: block;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.es-socio-hero-photo img:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(201, 166, 92, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .es-socio-hero-photo img {
    transition: none;
  }
  .es-socio-hero-photo img:hover {
    transform: none;
    box-shadow: none;
  }
}
.es-socio-hero-role {
  color: var(--color-gold-light);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 0.8rem;
}
/* Insignias y botones del héroe: en fila, sin adornos de tarjeta genérica. */
.es-socio-hero-insignias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
}
.es-socio-hero-areas {
  font-size: 0.85rem;
  color: var(--color-text-sub);
}
.es-socio-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
}
.es-socio-hero-cta .es-btn-gold,
.es-socio-hero-cta .es-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.es-socio-bio p {
  margin: 0 0 1.1em;
}
/* Biografía con forma: texto justificado, primer párrafo destacado como
   entradilla y los títulos como separadores de sección dorados. */
.es-socio-bio {
  text-align: justify;
}
.es-socio-bio > p:first-child {
  font-size: 1.08rem;
  line-height: 1.8;
}
.es-socio-bio h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-gold);
  margin: 2em 0 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--color-navy-border);
  text-align: left;
}
.es-socio-bio ul,
.es-socio-bio ol {
  margin: 0 0 1.1em;
  padding: 0;
  list-style: none;
}
.es-socio-bio li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.55em;
}
.es-socio-bio li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.62em;
  width: 0.45em;
  height: 0.45em;
  transform: rotate(45deg);
  background: var(--color-gold);
}
.es-socio-bio li > p {
  margin: 0;
}
.es-socio-bio li ul,
.es-socio-bio li ol {
  margin: 0.55em 0 0.2em;
}
.es-socio-bio li li::before {
  background: transparent;
  border: 1px solid var(--color-gold);
}
.es-socio-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.5rem 0 2rem;
}
/* Mini-lista de socios en la columna lateral del perfil. */
.es-socio-lateral {
  list-style: none;
  margin: 0;
  padding: 0;
}
.es-socio-lateral li {
  margin-bottom: 0.8rem;
}
.es-socio-lateral li:last-child {
  margin-bottom: 0;
}
.es-socio-lateral a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-decoration: none;
}
.es-socio-lateral img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.es-socio-lateral strong {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-main);
}
.es-socio-lateral small {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.es-socio-lateral-cta .es-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
/* Cita dentro de la biografía: filete dorado a la izquierda, como la cita de
   Filosofía, para que no parezca un párrafo más. */
.es-socio-bio blockquote {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--color-gold-light);
  border-left: 3px solid var(--color-gold);
  padding: 0.4rem 0 0.4rem 1.2rem;
  margin: 1.6rem 0;
}
/* Tarjeta de contacto del perfil: sobria, sin degradados ni sombras de
   catálogo. Reusa los tonos del tema. */
.es-socio-contacto {
  border: 1px solid var(--color-navy-border);
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
  margin: 2.2rem 0;
}
.es-socio-contacto h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-text-main);
  margin: 0 0 0.9rem;
}
.es-socio-contacto ul {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}
.es-socio-contacto li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  color: var(--color-text-sub);
  font-size: 0.95rem;
}
.es-socio-contacto li .dashicons {
  color: var(--color-gold);
  margin-top: 0.15em;
}
.es-socio-contacto p {
  margin: 0;
}
@media (max-width: 640px) {
  .es-socio-hero {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .es-socio-hero-photo img {
    width: 130px;
    height: 130px;
  }
}

/* ============================================================
   11. SINGLE POST TEMPLATES (ACTUALIZACIÓN, NOTICIA, VIDEO, DOCS)
   ============================================================ */
.es-single-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

.es-backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-gold-light);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-decoration: none;
}
.es-backlink:hover {
  color: var(--color-gold);
}

.es-single-hero {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.es-single-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-main);
  margin: 0.6rem 0 1rem;
}

.es-single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.86rem;
  color: var(--color-gold);
  margin-bottom: 0.6rem;
}

.es-single-featured {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-navy-border-subtle);
  margin-bottom: 2.5rem;
}

.es-single-featured img {
  display: block;
  width: 100%;
  height: auto;
}

.es-single-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-text-sub);
}

.es-single-content p {
  margin-bottom: 1.4rem;
  color: var(--color-text-sub);
}

.es-single-content h2,
.es-single-content h3 {
  font-family: var(--font-serif);
  color: var(--color-gold-light);
  margin: 2.2rem 0 1rem;
}

.es-single-content ul,
.es-single-content ol {
  margin: 1rem 0 1.5rem 1.5rem;
  color: var(--color-text-sub);
}

.es-single-content li {
  margin-bottom: 0.5rem;
}

.es-single-content blockquote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1.15rem;
  border-left: 3px solid var(--color-gold);
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: 1.8rem 0;
  color: var(--color-gold-highlight);
  background: rgba(201, 166, 92, 0.04);
}

/* Video Player Frame */
.es-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-navy-border);
  margin: 2rem 0;
  background: #000;
}

.es-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.es-single-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.es-prev-next {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.es-prev-next a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--color-gold-light);
  font-size: 0.88rem;
  font-weight: 600;
}

.es-prev-next a:hover {
  color: var(--color-gold);
}

.es-prev-next-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-text-main);
  max-width: 320px;
}

/* ============================================================
   12. FOOTER GLOBAL
   ============================================================ */
.elementor-element-esfooter0 {
  background: var(--color-navy-darkest) !important;
  border-top: 1px solid rgba(201, 166, 92, 0.25) !important;
  padding: 4rem 1.5rem 2rem !important;
}

/* Footer: las 4 columnas en una sola fila, sin wrap (evita que la columna
   de Contacto caiga debajo de las redes sociales) */
.elementor-element-esfooter0,
.elementor-element-esfooter0 > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 24px !important;
}

.elementor-element-esfooter0 > .e-con-inner > .e-con {
  flex: 1 1 var(--width);
  justify-content: flex-start;
  min-width: 0;
}

@media (max-width: 1024px) {
  .elementor-element-esfooter0 > .e-con-inner {
    flex-wrap: wrap !important;
  }
  .elementor-element-esfooter0 > .e-con-inner > .e-con {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 640px) {
  .elementor-element-esfooter0 > .e-con-inner > .e-con {
    flex: 0 0 100%;
  }
}

.es-footer-logo {
  max-width: 120px;
  width: 120px;
  height: auto;
  margin-bottom: 0.5rem;
}

.es-footer-tagline {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0 0 0.6rem;
}

.es-footer-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gold-light);
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
}

.es-footer-nav .elementor-item {
  color: var(--color-text-muted) !important;
  font-size: 0.88rem !important;
  padding: 0.3rem 0 !important;
  transition: color 0.2s ease !important;
}

.es-footer-nav .elementor-item:hover {
  color: var(--color-gold-light) !important;
}

.es-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.es-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 0.65rem;
}

.es-footer-contact .dashicons {
  color: var(--color-gold);
  font-size: 16px;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.es-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.es-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: rgba(201, 166, 92, 0.08);
  border: 1px solid rgba(201, 166, 92, 0.25);
  color: var(--color-gold-light);
  transition: all 0.2s ease;
}

.es-social a:hover {
  background: var(--color-gold);
  color: #08111e;
  border-color: var(--color-gold);
}

.es-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

/* ============================================================
   13. LAYOUT DE DOS COLUMNAS: CONTENIDO + SIDEBAR LATERAL
   ============================================================ */

/**
 * Contenedor externo que organiza el artículo + sidebar en
 * un grid de dos columnas en pantallas grandes.
 */
.es-single-outer {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
  align-items: start;
}

/* El área de contenido no tiene max-width propia; la controla el grid */
.es-single-outer .es-single-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0; /* evita desbordamiento en flexbox/grid */
}

/* ============================================================
   SIDEBAR (columna derecha)
   ============================================================ */
.es-sidebar {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Widget individual */
.es-sidebar-widget {
  background: var(--color-navy-card);
  border: 1px solid var(--color-navy-border-subtle);
  border-radius: 8px;
  padding: 1.25rem 1.25rem 1.5rem;
  overflow: hidden;
}

/* Título del widget */
.es-sidebar-widget-title {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(201, 166, 92, 0.2);
}

/* Imagen dentro del sidebar (banners) */
.es-sidebar-widget img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Links dentro del sidebar */
.es-sidebar-widget a {
  color: var(--color-gold-light);
  transition: color 0.2s ease;
}
.es-sidebar-widget a:hover {
  color: var(--color-gold);
}

/* Widget de texto simple */
.es-sidebar-widget p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

/* Widget de lista de recientes / navegación */
.es-sidebar-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.es-sidebar-widget ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.55rem 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.es-sidebar-widget ul li:last-child {
  border-bottom: none;
}

/* Placeholder cuando el sidebar no tiene widgets */
.es-sidebar-placeholder {
  background: rgba(201, 166, 92, 0.04);
  border: 1px dashed rgba(201, 166, 92, 0.25);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}
.es-sidebar-placeholder-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   RESPONSIVE: sidebar debajo del contenido en móvil/tablet
   ============================================================ */
@media (max-width: 1024px) {
  .es-single-outer {
    grid-template-columns: 1fr 260px;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .es-single-outer {
    grid-template-columns: 1fr;
    padding: 2rem 1rem 4rem;
  }

  .es-sidebar {
    position: static; /* quita el sticky en móvil */
  }
}

/* ============================================================
   14. PÁGINA DE CONTACTO COMPLETA (/contacto)
   ============================================================ */

/* ── Hero ── */
.es-ct-hero {
  background: linear-gradient(160deg, #050b14 0%, #0d1b2e 60%, #08111e 100%);
  border-bottom: 1px solid rgba(201, 166, 92, 0.18);
  padding: 5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.es-ct-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 20%, rgba(201, 166, 92, 0.07) 0%, transparent 65%);
  pointer-events: none;
}
.es-ct-hero-inner {
  max-width: 780px;
  text-align: center;
  margin: 0 auto;
  position: relative;
}
.es-ct-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--color-text-main);
  line-height: 1.15;
  margin: 0.6rem 0 1rem;
  letter-spacing: 0.01em;
}
.es-ct-hero-sub {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--color-text-sub);
  max-width: 640px;
  margin: 0 auto 2rem;
}
.es-ct-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.es-ct-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(201, 166, 92, 0.08);
  border: 1px solid rgba(201, 166, 92, 0.22);
  border-radius: 100px;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-gold-light);
  letter-spacing: 0.04em;
}
.es-ct-chip .dashicons { font-size: 14px; width: 14px; height: 14px; color: var(--color-gold); }
.es-ct-hero-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,166,92,0.35) 40%, rgba(201,166,92,0.35) 60%, transparent);
  margin-top: 3rem;
}

/* ── Main section (2 columnas) ── */
.es-ct-main { background: var(--color-navy-dark); padding: 4rem 0 5rem; }
.es-ct-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}

/* ── Formulario card ── */
.es-ct-form-card {
  background: var(--color-navy-surface);
  border: 1px solid var(--color-navy-border-subtle);
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.es-ct-form-header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.es-ct-form-title { font-family: var(--font-serif); font-size: 1.55rem; color: var(--color-text-main); margin: 0 0 0.4rem; }
.es-ct-form-sub { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; }

/* ── Formulario nativo ── */
.es-native-form { display: flex; flex-direction: column; gap: 1.1rem; }
.es-nf-row { display: grid; gap: 1.1rem; }
.es-nf-row--2 { grid-template-columns: 1fr 1fr; }
.es-nf-group { display: flex; flex-direction: column; gap: 0.35rem; }
.es-nf-label { font-size: 0.82rem; font-weight: 700; color: var(--color-text-main); letter-spacing: 0.05em; text-transform: uppercase; }
.es-nf-req { color: var(--color-gold); margin-left: 2px; }
.es-nf-input {
  background: var(--color-navy-dark) !important;
  border: 1px solid var(--color-navy-border) !important;
  border-radius: 7px !important;
  padding: 0.78rem 1rem !important;
  color: var(--color-text-main) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.93rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none;
  appearance: none;
}
.es-nf-input:focus {
  border-color: var(--color-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201, 166, 92, 0.18) !important;
}
.es-nf-input.es-nf-error {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15) !important;
}
.es-nf-textarea { resize: vertical; min-height: 130px; }
.es-nf-group--check { margin-top: 0.25rem; }
.es-nf-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1.5;
}
.es-nf-check-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-gold);
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.es-nf-check-label a { color: var(--color-gold-light); }
.es-nf-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.es-nf-submit { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem !important; font-size: 0.9rem !important; }
.es-nf-submit .dashicons { font-size: 16px; width: 16px; height: 16px; }
.es-nf-msg { border-radius: 7px; padding: 0.85rem 1.1rem; font-size: 0.9rem; font-weight: 600; display: none; }
.es-nf-msg--success { display: block; background: rgba(72,187,120,0.12); border: 1px solid rgba(72,187,120,0.4); color: #68d391; }
.es-nf-msg--error   { display: block; background: rgba(229,62,62,0.1); border: 1px solid rgba(229,62,62,0.35); color: #fc8181; }

/* ── Columna de información ── */
.es-ct-info-col { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 5rem; }
.es-ct-info-card,
.es-ct-schedule-card,
.es-ct-social-card {
  background: var(--color-navy-surface);
  border: 1px solid var(--color-navy-border-subtle);
  border-radius: 10px;
  padding: 1.5rem;
}
.es-ct-info-title {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.es-ct-info-title .dashicons { font-size: 16px; width: 16px; height: 16px; }
.es-ct-data-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.es-ct-data-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.es-ct-data-ico {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 7px;
  background: rgba(201,166,92,0.1);
  border: 1px solid rgba(201,166,92,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  margin-top: 2px;
}
.es-ct-data-ico .dashicons { font-size: 14px; width: 14px; height: 14px; }
.es-ct-data-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-gold-light); margin-bottom: 0.2rem; }
.es-ct-data-val { display: block; font-size: 0.87rem; color: var(--color-text-sub); line-height: 1.55; }
.es-ct-data-link { color: var(--color-text-sub); text-decoration: none; transition: color 0.2s; }
.es-ct-data-link:hover { color: var(--color-gold-light); }

/* Tabla de horario */
.es-ct-schedule { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.es-ct-schedule td { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
.es-ct-schedule tr:last-child td { border-bottom: none; }
.es-ct-day { color: var(--color-text-sub); width: 45%; }
.es-ct-time { color: var(--color-text-muted); font-size: 0.83rem; }
.es-ct-badge-open, .es-ct-badge-cita, .es-ct-badge-closed {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 0.18rem 0.5rem;
  white-space: nowrap;
}
.es-ct-badge-open   { background: rgba(72,187,120,0.12); color: #68d391; border: 1px solid rgba(72,187,120,0.3); }
.es-ct-badge-cita   { background: rgba(201,166,92,0.12); color: var(--color-gold); border: 1px solid rgba(201,166,92,0.3); }
.es-ct-badge-closed { background: rgba(160,160,160,0.08); color: #94a3b8; border: 1px solid rgba(160,160,160,0.2); }

/* WhatsApp CTA */
.es-ct-wa-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(37,211,102,0.1), rgba(37,211,102,0.05));
  border: 1px solid rgba(37,211,102,0.3);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  transition: all 0.25s ease;
}
.es-ct-wa-block:hover { background: rgba(37,211,102,0.15); border-color: rgba(37,211,102,0.5); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,0.1); }
.es-ct-wa-ico { flex-shrink: 0; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(37,211,102,0.15); display: flex; align-items: center; justify-content: center; color: #25d366; }
.es-ct-wa-ico .dashicons { font-size: 20px; width: 20px; height: 20px; }
.es-ct-wa-block strong { display: block; font-size: 0.9rem; color: #25d366; font-weight: 700; }
.es-ct-wa-block > div > span { font-size: 0.82rem; color: var(--color-text-muted); }
.es-ct-wa-arrow { margin-left: auto; color: #25d366; font-size: 18px !important; width: 18px !important; height: 18px !important; }

/* Redes sociales */
.es-ct-social-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 0.85rem; }
.es-ct-social-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.es-ct-social-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  background: rgba(201,166,92,0.07);
  border: 1px solid rgba(201,166,92,0.2);
  color: var(--color-gold-light);
  font-size: 0.8rem; font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.es-ct-social-btn:hover { background: rgba(201,166,92,0.14); border-color: var(--color-gold); color: var(--color-gold); transform: translateY(-1px); }
.es-ct-social-btn .dashicons { font-size: 14px; width: 14px; height: 14px; }

/* ── Mapa ── */
.es-ct-map-section { background: var(--color-navy-darkest); padding: 4rem 0; border-top: 1px solid rgba(255,255,255,0.05); }
.es-ct-map-header { text-align: center; margin-bottom: 2.5rem; }
.es-ct-map-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-text-main); margin: 0.5rem 0 0.5rem; }
.es-ct-map-sub { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; }
.es-ct-map-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--color-navy-border-subtle); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.es-ct-map-wrap iframe { display: block; }

/* ── Trust strip ── */
.es-ct-trust {
  background: var(--color-navy-surface);
  border-top: 1px solid rgba(201,166,92,0.12);
  border-bottom: 1px solid rgba(201,166,92,0.12);
  padding: 3.5rem 0;
}
.es-ct-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.es-ct-trust-item { text-align: center; padding: 1.5rem 1rem; }
.es-ct-trust-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(201,166,92,0.1);
  border: 1px solid rgba(201,166,92,0.25);
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.es-ct-trust-ico .dashicons { font-size: 20px; width: 20px; height: 20px; }
.es-ct-trust-item strong { display: block; font-family: var(--font-serif); font-size: 0.95rem; color: var(--color-text-main); margin-bottom: 0.5rem; }
.es-ct-trust-item p { font-size: 0.85rem; line-height: 1.6; color: var(--color-text-muted); margin: 0; }
/* Ocultar el div vacío del trust-grid */
.es-ct-trust-ico-wrap { display: none; }

/* ── Responsive contacto ── */
@media (max-width: 1100px) { .es-ct-grid { grid-template-columns: 1fr 320px; } }
@media (max-width: 900px) {
  .es-ct-grid { grid-template-columns: 1fr; }
  .es-ct-info-col { position: static; }
  .es-ct-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .es-ct-hero { padding: 3rem 0 2rem; }
  .es-ct-form-card { padding: 1.5rem; }
  .es-nf-row--2 { grid-template-columns: 1fr; }
  .es-ct-trust-grid { grid-template-columns: 1fr; }
  .es-nf-actions { flex-direction: column; }
  .es-ct-hero-chips { flex-direction: column; align-items: center; }
}

/* ============================================================
   15. DERECHO PARA TODOS & TIKTOK EMBED SECTION
   ============================================================ */
.es-videos-page {
  padding-bottom: 5rem;
}

.es-social-pills-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.es-pill-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.es-pill-social--tiktok {
  background: rgba(255, 0, 80, 0.08);
  border: 1px solid rgba(255, 0, 80, 0.35);
  color: #ff3b68;
}

.es-pill-social--tiktok:hover {
  background: rgba(255, 0, 80, 0.16);
  border-color: #ff0050;
  color: #fff;
  transform: translateY(-2px);
}

.es-pill-social--insta {
  background: rgba(225, 48, 108, 0.08);
  border: 1px solid rgba(225, 48, 108, 0.35);
  color: #e1306c;
}

.es-pill-social--insta:hover {
  background: rgba(225, 48, 108, 0.16);
  border-color: #e1306c;
  color: #fff;
  transform: translateY(-2px);
}

/* Portada Destacada con Video Original */
.es-featured-video-section {
  padding: 1rem 0 3.5rem;
}

.es-featured-video-card {
  background: var(--color-navy-surface);
  border: 1px solid var(--color-navy-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  padding: 2rem;
}

.es-featured-video-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2.5rem;
  align-items: center;
}

.es-featured-video-player {
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-navy-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}

/* TikTok Embed & iFrames */
.es-tiktok-embed-wrapper {
  position: relative;
  width: 100%;
  max-width: 360px;
  min-height: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

.es-tiktok-iframe {
  width: 100%;
  min-height: 520px;
  border: 0;
  display: block;
}

.es-video-frame-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-width: 340px;
}

.es-video-frame-inner iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.es-native-video {
  width: 100%;
  max-height: 520px;
  background: #000;
  border-radius: 8px;
}

.es-featured-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 9 / 16;
  background-size: cover;
  background-position: center;
  text-decoration: none;
}

.es-featured-video-info {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.es-featured-video-badges {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.es-featured-video-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.es-featured-video-title a {
  color: var(--color-text-main);
  text-decoration: none;
  transition: color 0.2s ease;
}

.es-featured-video-title a:hover {
  color: var(--color-gold-light);
}

.es-featured-video-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin: 0;
}

.es-featured-video-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-gold);
}

.es-featured-video-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.es-featured-video-meta .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.es-featured-video-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Single Video template ajustes para vertical/TikTok */
.es-video-frame--single {
  aspect-ratio: auto;
  max-width: 480px;
  margin: 2rem auto;
  background: #000;
  border-radius: 10px;
  min-height: 480px;
}

.es-video-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.es-video-empty .dashicons {
  font-size: 32px;
  width: 32px;
  height: 32px;
  color: var(--color-gold);
}

/* Tarjetas de video en Grid */
.es-card--video .es-card-media {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 6px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-bottom: 1rem;
  display: block;
}

.es-card--video .es-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(8, 17, 30, 0.75);
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
}

.es-card--video:hover .es-play {
  background: var(--color-gold);
  color: var(--color-navy-darkest);
  transform: translate(-50%, -50%) scale(1.1);
}

.es-card--video .es-duration {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  background: rgba(5, 11, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}

/* CTA Band inferior */
.es-video-cta-band {
  margin-top: 4.5rem;
}

.es-video-cta-card {
  background: var(--color-navy-surface);
  border: 1px solid rgba(201, 166, 92, 0.3);
  border-radius: 12px;
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.es-video-cta-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: var(--color-text-main);
  margin: 0.6rem 0 0.35rem;
}

.es-video-cta-text {
  font-size: 0.92rem;
  color: var(--color-text-sub);
  margin: 0;
}

.es-video-cta-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Responsive Videos */
@media (max-width: 900px) {
  .es-featured-video-grid {
    grid-template-columns: 1fr;
  }
  .es-featured-video-player {
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
  .es-video-cta-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

@media (max-width: 600px) {
  .es-featured-video-card {
    padding: 1.25rem;
  }
}