/* ==========================================================================
   INMEMARK - app.css  (Framework visual público - responsive, tarjetas)
   Inspirado en estilos modernos: flexbox + grid, mobile first.
   ========================================================================== */

/* ===== Tipografía Inter (100% local, sin CDN) ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Inter/Inter-ExtraBold.woff2') format('woff2');
}

:root {
  --color-primary:   #1e3a8a;
  --color-primary-d: #172554;
  --color-primary-l: #3b82f6;
  --color-secondary: #0ea5e9;
  --color-accent:    #f97316;
  --color-success:   #10b981;
  --color-warning:   #f59e0b;
  --color-danger:    #ef4444;
  --color-info:      #06b6d4;

  --color-navy:      #041b4e;
  --color-navy-2:    #0a2a6b;
  --color-cta-teal:  #0d9488;
  --hero-overlay-opacity: 0.72;
  --text-on-navy:    rgba(255,255,255,.88);

  --bg-body:   #f8fafc;
  --bg-soft:   #f1f5f9;
  --bg-white:  #ffffff;
  --bg-dark:   #0f172a;

  --text-1:    #0f172a;
  --text-2:    #334155;
  --text-3:    #64748b;
  --text-4:    #94a3b8;

  --border:    #e2e8f0;
  --border-2:  #cbd5e1;
  --radius:    14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px 0 rgba(15,23,42,.06);
  --shadow:    0 4px 14px 0 rgba(15,23,42,.08);
  --shadow-lg: 0 10px 30px 0 rgba(15,23,42,.12);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max-w:     1200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  background: var(--bg-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-primary-l); text-decoration: underline; }

hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

h1,h2,h3,h4,h5,h6 {
  font-weight: 700; color: var(--text-1); line-height: 1.2; margin: 0 0 .8rem 0;
}
h1 { font-size: clamp(1.8rem, 2.4vw + .8rem, 2.7rem); letter-spacing: -.02em;}
h2 { font-size: clamp(1.5rem, 1.5vw + .9rem, 2.1rem); letter-spacing: -.015em;}
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1rem 0; }
small, .text-small { font-size: .85rem; }
.lead { font-size: 1.1rem; color: var(--text-3); }

/* ===== Layout helpers ===== */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 1rem; }
.container-fluid { width: 100%; padding-inline: 1rem; }
.row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.col { flex: 1 0 0%; padding-inline: .75rem; }
[class*="col-"] { padding-inline: .75rem; width: 100%; }
@media (min-width: 576px) {
  .col-sm-6 { max-width: 50%; flex: 0 0 50%; }
}
@media (min-width: 768px) {
  .col-md-3 { max-width: 25%; flex: 0 0 25%; }
  .col-md-4 { max-width: 33.333333%; flex: 0 0 33.333333%; }
  .col-md-5 { max-width: 41.666667%; flex: 0 0 41.666667%; }
  .col-md-6 { max-width: 50%; flex: 0 0 50%; }
  .col-md-7 { max-width: 58.333333%; flex: 0 0 58.333333%; }
  .col-md-8 { max-width: 66.666667%; flex: 0 0 66.666667%; }
  .col-md-9 { max-width: 75%; flex: 0 0 75%; }
  .col-md-12{ max-width: 100%; flex: 0 0 100%; }
}
@media (min-width: 992px) {
  .col-lg-3 { max-width: 25%; flex: 0 0 25%; }
  .col-lg-4 { max-width: 33.333333%; flex: 0 0 33.333333%; }
  .col-lg-6 { max-width: 50%; flex: 0 0 50%; }
  .col-lg-8 { max-width: 66.666667%; flex: 0 0 66.666667%; }
}
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: .75rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

/* ===== Espaciado ===== */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .5rem; }    .mb-1 { margin-bottom: .5rem; }
.mt-2 { margin-top: 1rem; }     .mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; }   .mb-3 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 2.5rem; }   .mb-4 { margin-bottom: 2.5rem; }
.mx-auto { margin-inline: auto; }
.p-0 { padding: 0 !important; }
.p-1 { padding: .5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.px-2 { padding-inline: 1rem; }
.py-2 { padding-block: 1rem; }
.py-3 { padding-block: 1.5rem; }
.py-4 { padding-block: 2.5rem; }
.py-5 { padding-block: 4rem; }

/* ===== Tipografía helpers ===== */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--text-3); }
.text-light   { color: #fff; }
.text-dark    { color: var(--text-1); }
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.fw-bold      { font-weight: 700; }
.fw-semibold  { font-weight: 600; }
.fst-italic   { font-style: italic; }
.nowrap       { white-space: nowrap; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Botones ===== */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1.2rem;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  line-height: 1.2;
  border: 1px solid var(--btn-bd); border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  user-select: none;
  white-space: nowrap;
}
.btn:hover   { filter: brightness(1.07); color: var(--btn-fg); text-decoration: none; }
.btn:active  { transform: translateY(1px); }
.btn:focus   { outline: 2px solid var(--color-primary-l); outline-offset: 2px; }
.btn-sm      { padding: .4rem .8rem; font-size: .82rem; }
.btn-lg      { padding: .9rem 1.6rem; font-size: 1.05rem; }
.btn-primary    { --btn-bg: var(--color-primary); --btn-fg: #fff; }
.btn-secondary  { --btn-bg: var(--color-secondary); --btn-fg: #fff; }
.btn-accent     { --btn-bg: var(--color-accent);    --btn-fg: #fff; }
.btn-success    { --btn-bg: var(--color-success);   --btn-fg: #fff; }
.btn-danger     { --btn-bg: var(--color-danger);    --btn-fg: #fff; }
.btn-outline-primary {
  --btn-bg: transparent; --btn-fg: var(--color-primary); --btn-bd: var(--color-primary);
}
.btn-outline-primary:hover { --btn-bg: var(--color-primary); --btn-fg: #fff; }
.btn-outline-light {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.8);
}
.btn-outline-light:hover { --btn-bg: #fff; --btn-fg: var(--color-primary); }
.btn-light { --btn-bg: #fff; --btn-fg: var(--color-primary); --btn-bd: var(--border-2); }
.btn-link  { background: transparent; color: var(--color-primary); border: none; padding: 0; }
.btn-link:hover { background: transparent; text-decoration: underline; }
.btn-group   { display: inline-flex; flex-wrap: wrap; gap: .5rem; }

/* ===== Formularios ===== */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; margin-bottom: .4rem; font-weight: 600; color: var(--text-1); font-size: .92rem; }
.form-control,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: .65rem .85rem;
  font-family: inherit; font-size: .95rem;
  color: var(--text-1);
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary-l);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.form-textarea { resize: vertical; min-height: 140px; }
.form-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.form-check input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.form-text { font-size: .82rem; color: var(--text-3); margin-top: .3rem; }
.form-error  { font-size: .82rem; color: var(--color-danger); margin-top: .3rem; }
.input-group  { display: flex; }
.input-group > :first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :last-child  { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }
.invalid { border-color: var(--color-danger) !important; }

/* ===== Tarjetas / Cards ===== */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-img-top {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: linear-gradient(135deg, var(--color-primary-d), var(--color-secondary));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700;
}
.card-body { padding: 1.15rem 1.25rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.card-title { font-size: 1.05rem; margin-bottom: .5rem; color: var(--text-1); font-weight: 700; }
.card-title a { color: inherit; }
.card-text  { color: var(--text-3); font-size: .92rem; flex: 1; }
.card-footer {
  padding: .9rem 1.25rem; border-top: 1px solid var(--border);
  background: #fbfcfe; display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.card-stats {
  display: flex; gap: 1rem; flex-wrap: wrap; color: var(--text-3); font-size: .82rem;
  padding: 0 1.25rem .8rem;
}
.card-stat { display: inline-flex; align-items: center; gap: .3rem; }

/* ===== Badges / Tags ===== */
.badge {
  display: inline-flex; align-items: center; padding: .25rem .6rem;
  font-size: .75rem; font-weight: 600; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-2); line-height: 1;
}
.badge-primary { background: rgba(59,130,246,.12); color: var(--color-primary); }
.badge-secondary{ background: rgba(14,165,233,.12); color: #0369a1; }
.badge-accent  { background: rgba(249,115,22,.12); color: #c2410c; }
.badge-success { background: rgba(16,185,129,.12); color: #047857; }
.badge-danger  { background: rgba(239,68,68,.12); color: #b91c1c; }
.badge-warning { background: rgba(245,158,11,.12); color: #92400e; }
.tags-inline { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }

/* ===== Alertas / Notificaciones ===== */
.alert {
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  font-size: .92rem;
}
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info    { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }
.alert-primary { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }

/* ===== Tablas ===== */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table th, .table td {
  padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--border);
  font-size: .9rem; vertical-align: middle;
}
.table th {
  background: var(--bg-soft); font-weight: 600; color: var(--text-1);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .02em;
}
.table tbody tr:hover { background: #f8fafc; }
.table td.actions { width: 1%; white-space: nowrap; }

/* ===== Paginación ===== */
.pagination {
  display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 1.5rem 0;
  list-style: none; justify-content: center; align-items: center;
}
.pagination .page-item { }
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .75rem;
  border: 1px solid var(--border-2); background: #fff;
  border-radius: var(--radius-sm); color: var(--text-2);
  font-weight: 600; font-size: .9rem; transition: all .15s ease;
}
.page-link:hover { background: var(--bg-soft); color: var(--color-primary); border-color: var(--color-primary-l); text-decoration: none; }
.page-item.active .page-link {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.page-item.disabled .page-link { opacity: .5; pointer-events: none; }
.pagination-info { font-size: .85rem; color: var(--text-3); text-align: center; margin-bottom: .5rem; }

/* ===== Navbar / Header público ===== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.navbar { display: flex; align-items: center; justify-content: space-between; padding-block: .75rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--text-1); font-size: 1.3rem; }
.brand img { height: 38px; width: auto; }
.brand .brand-logo { height: auto; max-height: 56px; width: auto; object-fit: contain; }
.brand:hover { color: var(--color-primary); text-decoration: none; }
.nav-links { display: none; list-style: none; padding: 0; margin: 0; gap: .15rem; align-items: center; }
@media (min-width: 1200px) {
  .nav-links { display: flex; }
}
.nav-link {
  display: inline-flex; align-items: center; padding: .55rem .9rem; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 600; font-size: .93rem; transition: background .15s ease, color .15s ease;
}
.nav-link:hover, .nav-link.active {
  background: rgba(30,58,138,.08); color: var(--color-primary); text-decoration: none;
}
.nav-cta { margin-left: .5rem; }
.navbar-toggle {
  display: inline-flex; border: 1px solid var(--border-2); background: #fff;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  flex-shrink: 0;
}
.navbar-toggle:hover { background: var(--bg-soft); }
.navbar-toggle:active { transform: scale(.96); }
.navbar-toggle.is-open { background: rgba(30,58,138,.08); border-color: var(--color-primary); }
@media (min-width: 1200px) { .navbar-toggle { display: none; } }
.navbar-toggle span { width: 22px; height: 2px; background: var(--text-2); position: relative; display: block; transition: transform .25s ease, background .2s ease; }
.navbar-toggle span::before, .navbar-toggle span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--text-2);
  transition: transform .25s ease, top .2s ease, background .2s ease;
}
.navbar-toggle span::before { top: -7px; }
.navbar-toggle span::after  { top:  7px; }
.navbar-toggle.is-open span { background: transparent; }
.navbar-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.navbar-toggle.is-open span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: .25rem 0 .75rem;
  position: relative;
  z-index: 50;
  box-shadow: 0 14px 30px -10px rgba(15,23,42,.18);
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.2,.8,.2,1);
}
.mobile-menu.open {
  display: block;
  max-height: 560px;
  overflow-y: auto;
}
.mobile-menu a {
  display: block; padding: .9rem 1.1rem; color: var(--text-2);
  font-weight: 500; border-bottom: 1px solid var(--border);
  font-size: .96rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, padding-left .2s ease;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.active, .mobile-menu a:hover {
  color: var(--color-primary);
  background: var(--bg-soft);
  border-left-color: var(--color-primary);
  padding-left: 1.3rem;
  text-decoration: none;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  background: linear-gradient(135deg, rgba(30,58,138,.95) 0%, rgba(14,165,233,.92) 100%),
              var(--color-primary-d);
  color: #fff;
  overflow: hidden;
  padding-block: 5rem;
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .1;
  background-image: radial-gradient(circle at 20% 30%, #fff 0, transparent 40%),
                    radial-gradient(circle at 80% 70%, #fff 0, transparent 40%);
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero p.lead { color: rgba(255,255,255,.85); font-size: 1.15rem; }
.hero-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* ===== Secciones ===== */
.section { padding-block: 4rem; }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title h2 { margin-bottom: .5rem; }
.section-title p { color: var(--text-3); max-width: 640px; margin: 0 auto; font-size: 1.02rem; }
.section-soft   { background: var(--bg-soft); }
.section-white  { background: #fff; }

/* Servicios - items */
.service-item {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
  transition: all .2s ease;
  height: 100%;
}
.service-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
.service-icon {
  width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff; margin-bottom: 1rem;
}

/* Valores / features */
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1rem; }
.feature-card {
  padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
}
.feature-card h4 { margin-bottom: .3rem; font-size: 1.02rem; }
.feature-card p { color: var(--text-3); font-size: .9rem; }

/* Clientes logos */
.clients-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem; align-items: center;
}
.client-logo {
  background: #fff; border-radius: var(--radius-sm); padding: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); filter: grayscale(40%); transition: all .2s ease;
}
.client-logo:hover { filter: none; box-shadow: var(--shadow); }

/* Contacto form */
.contact-card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.contact-card .form-wrap { padding: 1.75rem; }
.contact-card .info-wrap {
  padding: 1.75rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-d));
  color: #fff;
}
.contact-card .info-wrap h3 { color: #fff; }
.contact-card .info-wrap .c-item { display: flex; gap: .8rem; margin-bottom: 1rem; align-items: flex-start; }
.contact-card .info-wrap .c-item .c-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.12);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 1.1rem;
}
.contact-card .info-wrap a { color: #fff; text-decoration: underline; }

/* ===== Filters ===== */
.filters-panel {
  background: #fff; border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}
.filters-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.filters-actions { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.filters-summary { font-size: .9rem; color: var(--text-3); margin-bottom: 1rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ===== Detalle publicación ===== */
.pub-detail-head {
  background: #fff; padding: 2rem; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 2rem; border: 1px solid var(--border);
}
.pub-detail-meta {
  display: flex; flex-wrap: wrap; gap: 1rem; color: var(--text-3); font-size: .9rem; margin: .5rem 0 1rem;
}
.pub-detail-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.download-list {
  display: flex; flex-direction: column; gap: .6rem;
}
.download-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: all .15s ease;
}
.download-item:hover { box-shadow: var(--shadow); border-color: var(--color-primary-l); }
.download-icon {
  width: 48px; height: 48px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-size: .85rem; text-transform: uppercase;
  background: rgba(59,130,246,.1); color: var(--color-primary); flex-shrink: 0;
}
.download-icon.pdf { background: rgba(239,68,68,.1); color: var(--color-danger); }
.download-icon.xlsx, .download-icon.xls { background: rgba(16,185,129,.1); color: var(--color-success); }
.download-icon.sav { background: rgba(139,92,246,.1); color: #6d28d9; }
.download-info { flex: 1; min-width: 0; }
.download-info strong { display: block; color: var(--text-1); margin-bottom: .2rem; }
.download-info span { color: var(--text-3); font-size: .8rem; }

/* Galería */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem; margin-top: 1rem;
}
.gallery-grid a, .gallery-grid .gallery-item {
  display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-primary-l), var(--color-secondary));
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-grid img:hover { transform: scale(1.05); }

/* ===== Footer ===== */
.site-footer {
  background: var(--bg-dark); color: #cbd5e1; margin-top: auto;
}
.site-footer a { color: #e2e8f0; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-inner { padding-block: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.footer-brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-size: 1.3rem; font-weight: 800; margin-bottom: .8rem; }
.footer-brand img { height: 36px; }
.footer-desc { color: #94a3b8; font-size: .9rem; max-width: 360px; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.socials { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #fff; transition: background .2s ease;
  font-size: .9rem;
}
.social-icon:hover { background: var(--color-primary-l); text-decoration: none; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: 1rem;
  font-size: .85rem;
  color: #94a3b8;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ===== Utils / misc ===== */
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.w-100 { width: 100%; }
.maxw-700 { max-width: 700px; }
.maxw-800 { max-width: 800px; }
.maxw-900 { max-width: 900px; }
.dashed { border: 2px dashed var(--border-2); border-radius: var(--radius-sm); padding: 1.5rem; background: #fafbff; }
.empty-state {
  padding: 3rem 1.5rem; text-align: center; color: var(--text-3);
  background: #fff; border-radius: var(--radius); border: 1px dashed var(--border-2);
}
.empty-state h4 { margin-bottom: .3rem; color: var(--text-2); }
.hover-scale { transition: transform .2s ease; }
.hover-scale:hover { transform: scale(1.02); }

/* ===== Breadcrumbs ===== */
.breadcrumb {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
  font-size: .88rem; color: var(--text-3);
}
.breadcrumb-item { display: inline-flex; align-items: center; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  display: inline-block;
  margin-inline: .25rem;
  color: var(--text-3); opacity: .7;
}
.breadcrumb-item a {
  color: var(--text-2);
  text-decoration: none;
  transition: color .15s ease;
}
.breadcrumb-item a:hover { color: var(--color-primary-d); text-decoration: underline; }
.breadcrumb-item.active { color: var(--text-1); font-weight: 600; }

/* ===== Navbar brand text helper ===== */
.brand-text { font-weight: 800; font-size: 1.25rem; color: var(--text-1); letter-spacing: -0.01em; }
.d-none { display: none !important; }

/* ===== Admin gallery placeholders ===== */
.agi-placeholder {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; padding: .5rem; text-align: center;
}
.agi-placeholder-icon { font-size: 2rem; opacity: .7; }
.agi-placeholder-name { font-size: .72rem; color: var(--text-2); line-height: 1.15; word-break: break-word; }

/* ===== REDISEÑO IPSOS CORPORATIVO ===== */

/* ===== Headings refinados (tipografía Inter) ===== */
h1,h2,h3,h4,h5,h6 {
  font-weight: 800; letter-spacing: -0.02em; color: var(--text-1); line-height: 1.15;
}
h1 { font-size: clamp(2rem, 4.8vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 2.7vw, 2.3rem); }
.section-title h2 { font-weight: 800; }
.section-title p { color: var(--text-3); font-size: 1.02rem; line-height: 1.65; }

/* ===== Navbar sticky refine ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.navbar { padding-block: .9rem; }
.brand { gap: .65rem; }
.brand img { height: 42px; }
.nav-links { gap: 1.5rem; }
.nav-link {
  font-weight: 600; font-size: .95rem; color: var(--text-2);
  padding-block: .4rem; position: relative;
}
.nav-link:hover { color: var(--color-primary-d); text-decoration: none; }
.nav-link.active { color: var(--color-primary); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--color-primary); border-radius: 2px;
}

/* ===== Sections padding clamp uniforme ===== */
.section { padding-block: clamp(2.6rem, 5.2vw, 5rem); }
.section-white  { background: #fff; }
.section-soft   { background: var(--bg-soft); }

/* ===== Cards sombras corporativas + padding ===== */
.card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(15,23,42,.05), 0 16px 36px rgba(15,23,42,.10);
}
.service-item {
  padding: 1.6rem 1.4rem; border-radius: var(--radius);
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(15,23,42,.05), 0 18px 38px rgba(15,23,42,.10);
}

/* ===== HERO IPSOS: Imagen + Overlay navy ===== */
.hero-ipsos {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
  min-height: min(86vh, 720px);
  display: flex;
  align-items: center;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--color-navy) 92%, transparent) calc(var(--hero-overlay-opacity, 0.72) * 100%),
    color-mix(in srgb, var(--color-navy-2, var(--color-primary)) 70%, transparent) calc(var(--hero-overlay-opacity, 0.72) * 80%),
    rgba(15,23,42,0) 80%
  );
}
@supports not (color: color-mix(in srgb, red, white)) {
  .hero-overlay {
    background: linear-gradient(120deg,
      rgba(4,27,78, calc(0.92 * var(--hero-overlay-opacity, 0.72))) 0%,
      rgba(10,42,107, calc(0.78 * var(--hero-overlay-opacity, 0.72))) 55%,
      rgba(10,42,107, calc(0.55 * var(--hero-overlay-opacity, 0.72))) 100%);
  }
}
.hero-ipsos::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(59,130,246,.16), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(13,148,136,.14), transparent 55%);
}
.hero-ipsos-row { min-height: 100%; position: relative; z-index: 1; }
.hero-title {
  color: #fff; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.08; margin-bottom: 1.2rem;
  text-shadow: 0 2px 18px rgba(4,27,78,.45);
  max-width: 16ch;
}
.hero-lead {
  color: rgba(255,255,255,.9); font-weight: 500; font-size: 1.1rem;
  line-height: 1.6; max-width: 56ch; margin-bottom: 2rem;
}
.hero-badges { margin-bottom: 1.6rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.hero-badge-white  { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.18); font-weight: 600; padding: .45rem .9rem; border-radius: 999px; font-size: .85rem;}
.hero-badge-teal   { background: var(--color-cta-teal); color: #fff; font-weight: 600; padding: .45rem .9rem; border-radius: 999px; font-size: .85rem; box-shadow: 0 4px 14px rgba(13,148,136,.35);}
.hero-badge-outline{ background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); font-weight: 500; padding: .45rem .9rem; border-radius: 999px; font-size: .85rem;}

/* ===== Botones CTA estilo IPSOS ===== */
.btn-cta-teal {
  --btn-bg: var(--color-cta-teal);
  --btn-fg: #fff;
  --btn-bd: transparent;
  padding: .9rem 1.6rem;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(13,148,136,.35);
  gap: .65rem;
}
.btn-cta-teal:hover { box-shadow: 0 10px 28px rgba(13,148,136,.45); filter: brightness(1.05); }
.btn-outline-light-solid {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: 1.5px solid rgba(255,255,255,.75);
  padding: .85rem 1.55rem;
  font-weight: 600; font-size: .95rem;
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}
.btn-outline-light-solid:hover { background: #fff; --btn-fg: var(--color-navy); color: var(--color-navy); filter: none; text-decoration: none;}
.btn-primary {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  --btn-bd: transparent;
  border-radius: 6px;
  padding: .7rem 1.25rem;
  font-weight: 700;
}
.btn-outline-primary {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  --btn-bd: 1.5px solid var(--color-primary);
  border-radius: 6px;
  font-weight: 700;
}
.btn-outline-primary:hover {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
}

/* ===== Footer navy corporativo ===== */
.site-footer {
  background: var(--color-navy);
  color: var(--text-on-navy, rgba(255,255,255,.88));
  margin-top: auto;
}
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; text-decoration: none; }
.footer-inner { padding-block: clamp(2.5rem, 5vw, 4.2rem); }
.footer-brand { color: #fff; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.015em; }
.footer-brand img { height: 40px; }
.footer-desc  { color: rgba(255,255,255,.65); line-height: 1.65; }
.footer-col h4 { color: #fff; font-size: .98rem; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 1.1rem; }
.footer-links { color: rgba(255,255,255,.72); }
.footer-links li:hover a { padding-left: 2px; color: #fff; transition: padding .15s ease, color .15s ease; }
.social-icon {
  background: rgba(255,255,255,.08); color: #fff;
  transition: background .18s ease, transform .18s ease;
}
.social-icon:hover { background: var(--color-cta-teal); color: #fff; transform: translateY(-2px); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  padding-block: 1.1rem;
}

/* ===== Media query small tweaks ===== */
@media (max-width: 576px) {
  .btn { width: 100%; }
  .btn-group .btn { width: auto; }
  .hero { padding-block: 3rem; }
  .hero-ipsos { padding-block: 3.5rem; min-height: 68vh; }
  .section { padding-block: 2.5rem; }
  .hero-title { max-width: none; }
  .hero-lead { font-size: 1.02rem; }
  .hero-badges { margin-bottom: 1.2rem; }
}

/* ============================================================
   MEJORAS V2: Filtros compactos + Contacto estético + Galería
   ============================================================ */

.muted, .muted-sm { color: var(--text-3, #6b7280); }
.muted-sm { font-size: .8rem; line-height: 1.55; }

.btn-icon-left {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
}
.btn-icon-left span:first-child { font-size: 1.05em; line-height: 1; }

/* ===== FILTROS PUBLICACIONES: 1 LÍNEA COMPACTA ===== */
.filters-compact {
  background: #ffffff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: .9rem 1.05rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15,23,42,.03);
}
.filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .7rem .85rem;
}
.fi {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.fi-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-3, #6b7280);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.fi-search {
  flex: 1 1 220px;
  min-width: 200px;
}
.fi-search .input-group-sm > .form-control,
.fi-search .input-group-sm > .btn {
  min-height: 34px;
  font-size: .86rem;
}
.fi-actions { flex-shrink: 0; }

.filters-meta {
  border-top: 1px dashed var(--border, #e5e7eb);
  padding-top: .55rem;
  margin-top: .35rem;
  font-size: .8rem;
}

/* ===== CONTACTO: Tarjetas + iconos circulares ===== */
.contact-info-card,
.contact-form-card,
.contact-about-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}
.contact-info-card .card-body,
.contact-form-card .card-body,
.contact-about-card .card-body { padding: 1.6rem 1.55rem; }

.ci-row {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .8rem 0;
  border-bottom: 1px dashed rgba(148,163,184,.25);
}
.ci-row:last-child { border-bottom: none; padding-bottom: .2rem; }
.ci-row:first-child { padding-top: .2rem; }

.ci-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}
.ci-icon-navy   { background: color-mix(in srgb, var(--color-navy, #041b4e) 10%, #fff); color: var(--color-navy, #041b4e); }
.ci-icon-teal   { background: color-mix(in srgb, var(--color-cta-teal, #0d9488) 12%, #fff); color: var(--color-cta-teal, #0d9488); }
.ci-icon-accent { background: color-mix(in srgb, var(--color-accent, #f97316) 12%, #fff); color: var(--color-accent, #f97316); }
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .ci-icon-navy   { background: rgba(4, 27, 78, .08); color: #041b4e; }
  .ci-icon-teal   { background: rgba(13,148,136,.09);  color: #0d9488; }
  .ci-icon-accent { background: rgba(249,115,22,.09);  color: #f97316; }
}

.ci-body { flex: 1 1 auto; min-width: 0; }
.ci-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-3, #64748b);
  text-transform: uppercase;
  margin-bottom: .2rem;
  line-height: 1.2;
}
.ci-value {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-1, #0f172a);
  line-height: 1.4;
}
a.ci-link { color: var(--color-primary, #1e3a8a); text-decoration: none; }
a.ci-link:hover { color: var(--color-cta-teal, #0d9488); text-decoration: underline; }

.contact-cta-card {
  background: linear-gradient(135deg, var(--color-navy, #041b4e) 0%, color-mix(in srgb, var(--color-navy, #041b4e) 70%, #0ea5e9) 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(4,27,78,.25);
}
@supports not (background: color-mix(in srgb, red 50%, white)) {
  .contact-cta-card { background: linear-gradient(135deg, #041b4e 0%, #082c7a 100%); }
}
.contact-cta-card h3, .contact-cta-card p { color: #fff; }
.contact-cta-card p { color: rgba(255,255,255,.82); }
.contact-cta-card .btn-light {
  background: #fff;
  color: var(--color-navy, #041b4e);
  border: none;
  border-radius: 8px;
  font-weight: 800;
}
.contact-cta-card .btn-light:hover { color: var(--color-cta-teal, #0d9488); }

.contact-form-card .form-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-2, #334155);
  margin-bottom: .35rem;
  letter-spacing: .01em;
}
.contact-form-card .form-control,
.contact-form-card .form-select {
  border-radius: 8px;
  border-color: #cbd5e1;
  font-size: .92rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
  border-color: var(--color-primary, #1e3a8a);
  box-shadow: 0 0 0 3px rgba(30,58,138,.12);
}
.form-help { font-size: .76rem; color: var(--text-3, #64748b); margin-top: .35rem; line-height: 1.45; }

/* ===== GALERÍA PÚBLICA: doc placeholder ===== */
.gallery-item-doc .agi-placeholder {
  aspect-ratio: 4 / 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.gallery-item-doc .agi-ic { font-size: 2rem; line-height: 1; }
.gallery-item-doc .agi-nm { font-size: .75rem; font-weight: 600; padding: 0 .6rem; text-align: center; }

/* ===== Media Query: filtros en mobile ===== */
@media (max-width: 768px) {
  .filters-row { gap: .6rem; }
  .fi { flex: 1 1 calc(50% - .6rem); }
  .fi-search { flex: 1 1 100%; }
  .fi-actions { flex: 1 1 100%; }
  .contact-info-card .card-body,
  .contact-form-card .card-body,
  .contact-about-card .card-body { padding: 1.15rem 1rem; }
}

/* =========================================================
   ===== V3 · DETALLE PUBLICACIÓN: MEDIA GRID + ZOOM + ATTACHMENTS PROFESIONAL
   ========================================================= */

/* ===== HERO MEDIA GRID (Imagen grande + miniaturas vertical) ===== */
.pub-media-wrapper {
  width: 100%;
}
.pub-media-grid {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
}
.pmg-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pmg-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(13,148,136,.18), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(4,27,78,.18),  transparent 55%),
    linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15,23,42,.05);
  cursor: zoom-in;
  transition: box-shadow .3s ease, transform .3s ease;
  border: 1px solid rgba(148, 163, 184, .15);
}
.pmg-img-box:hover {
  box-shadow: 0 16px 44px rgba(4, 27, 78, 0.12), 0 3px 10px rgba(15,23,42,.06);
}
.pmg-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.pmg-img-box:hover img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}
.pmg-zoom-hint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  color: #f8fafc;
  font-size: .82rem;
  font-weight: 500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  width: fit-content;
  max-width: calc(100% - 32px);
  pointer-events: none;
}
.pmg-img-box:hover .pmg-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}
.pmg-zl { font-size: .95rem; line-height: 1; }
.pmg-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .15rem .35rem;
}
.pmg-count { font-size: .82rem; }
.pmg-count strong { color: var(--text-1, #0f172a); font-weight: 700; }

/* ===== ===== Ajustes compactación detalle publicación ===== ===== */
.page-head-gradient { padding-bottom: clamp(1.05rem, 2.1vw, 1.45rem); }
.section.pub-detail { padding-block-start: clamp(.9rem, 1.9vw, 1.4rem); }
.section.pub-detail .pub-media-wrapper { margin-top: .2rem; }

/* ===== THUMBS STRIP (lado derecho vertical) — compacto ===== */
.pmg-thumbs {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .45rem;
  max-height: calc(100vw * 0.55);
  max-width: 116px;
  overflow-y: auto;
  padding: 1px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.pmg-thumbs::-webkit-scrollbar { width: 4px; }
.pmg-thumbs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.pmg-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 2px solid #e2e8f0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  transition: all .22s ease;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  display: block;
}
.pmg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pmg-thumb:hover {
  border-color: #94a3b8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15,23,42,.1);
}
.pmg-thumb.active {
  border-color: var(--color-navy, #041b4e);
  box-shadow:
    0 0 0 3px rgba(4, 27, 78, 0.14),
    0 4px 14px rgba(4,27,78,.15);
  transform: scale(1.02);
}

/* ===== CARD SOMBRA PROFESIONAL ===== */
.card-shadow {
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15,23,42,.04);
  border: 1px solid rgba(226, 232, 240, .8);
}

/* ===== ARCHIVOS ADJUNTOS PROFESIONAL (Lista tipo Google Drive) ===== */
.att-empty {
  padding: 1.8rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  text-align: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px dashed #cbd5e1;
}
.att-empty-ic { font-size: 2.3rem; line-height: 1; opacity: .55; }

.att-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.att-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 0.2rem;
  transition: background .2s ease, padding .2s ease;
  border-radius: 0;
}
.att-row-sep {
  border-bottom: 1px dashed #e2e8f0;
}
.att-row:hover {
  background: linear-gradient(90deg, rgba(4,27,78,.03) 0%, rgba(13,148,136,.025) 100%);
  border-radius: 10px;
  padding-left: .6rem;
  padding-right: .6rem;
}
.att-row:hover + .att-row { border-top-color: transparent; }
.att-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  background: rgba(15,23,42,.06);
  color: #0f172a;
}
.att-icon-badge {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
}
/* Icon color por tipo */
.att-icon-pdf     { background: rgba(239,68,68,.10);  color: #dc2626; }
.att-icon-excel   { background: rgba(16,185,129,.10);  color: #047857; }
.att-icon-spss    { background: rgba(139,92,246,.10);  color: #6d28d9; }
.att-icon-word    { background: rgba(37,99,235,.10);   color: #1d4ed8; }
.att-icon-zip     { background: rgba(115,115,115,.10); color: #475569; }
.att-icon-default { background: rgba(15,23,42,.08);    color: #0f172a; }

.att-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.att-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-1, #0f172a);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.att-meta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
/* Chip tipo (estilo badge compacto) */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .18rem .55rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}
.chip-type {
  background: rgba(148, 163, 184, .15);
  color: #334155;
}
.chip-type-pdf,
.chip-type-pdf { background: rgba(239,68,68,.12);  color: #b91c1c; }
.chip-type-xlsx,
.chip-type-xls,
.chip-type-csv  { background: rgba(16,185,129,.13);  color: #047857; }
.chip-type-sav  { background: rgba(139,92,246,.14);  color: #6d28d9; }
.chip-type-doc,
.chip-type-docx { background: rgba(37,99,235,.13);   color: #1d4ed8; }
.chip-type-zip,
.chip-type-rar  { background: rgba(115,115,115,.12); color: #475569; }
.chip-type-default { background: rgba(15,23,42,.08);  color: #0f172a; }

/* Botones Ver / Descargar (icono + texto) */
.att-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
}
.btn-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .36rem .7rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 7px;
  line-height: 1.3;
  transition: all .18s ease;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  min-width: 80px;
}
.btn-xs.btn-outline-primary {
  background: #fff;
  color: var(--color-primary, #1e3a8a);
  border-color: rgba(30,58,138,.22);
}
.btn-xs.btn-outline-primary:hover {
  background: rgba(30,58,138,.05);
  border-color: var(--color-primary, #1e3a8a);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(30,58,138,.12);
}
.btn-xs.btn-primary {
  background: var(--color-primary, #1e3a8a);
  color: #fff;
  border-color: var(--color-primary, #1e3a8a);
}
.btn-xs.btn-primary:hover {
  background: var(--color-navy, #041b4e);
  border-color: var(--color-navy, #041b4e);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(4,27,78,.22);
}
.ab-ic { font-size: .82rem; line-height: 1; }
.ab-tx { font-size: .78rem; }

/* ===== PS LIGHTBOX MODAL ZOOM (profesional · navy/teal) ===== */
.ps-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  color: #f8fafc;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}
.ps-lightbox[hidden] { display: none !important; }
.ps-lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1;
  cursor: zoom-out;
}
.ps-lb-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.5rem;
  background: linear-gradient(180deg, rgba(2,6,23,.75) 0%, rgba(2,6,23,0) 100%);
  pointer-events: none;
}
.ps-lb-topbar > * { pointer-events: auto; }
.ps-lb-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  max-width: calc(100% - 380px);
}
.ps-lb-filename {
  font-size: .98rem;
  font-weight: 600;
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-lb-counter {
  font-size: .82rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: .01em;
}
.ps-lb-ctrls {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ps-lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: 36px;
  min-width: 36px;
  padding: 0 .85rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.08);
  color: #f8fafc;
  font-size: .83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.ps-lb-btn:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.ps-lb-btn:active { transform: translateY(0); }
.ps-lb-btn-close {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.38);
  min-width: 36px;
  padding: 0 .7rem;
}
.ps-lb-btn-close:hover {
  background: rgba(239, 68, 68, 0.5);
  border-color: #ef4444;
}

/* Botones anterior/siguiente */
.ps-lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #f8fafc;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  padding: 0;
}
.ps-lb-nav:hover {
  background: rgba(4, 27, 78, .7);
  border-color: rgba(13,148,136,.4);
  color: #fff;
  transform: translateY(-50%) scale(1.04);
}
.ps-lb-nav-prev { left: 1.2rem; }
.ps-lb-nav-next { right: 1.2rem; }

/* Stage + imagen (pan/zoom) */
.ps-lb-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 72px 2rem 2rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  overflow: hidden;
}
.ps-lb-stage:active { cursor: grabbing; }
.ps-lb-img-wrap {
  max-width: 100%;
  max-height: 100%;
  display: inline-flex;
  transform-origin: center center;
  will-change: transform;
  transition: transform .12s ease-out;
}
#psLbImg {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0,0,0,.4);
  background: #0f172a;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ===== Media Queries: Responsive ===== */
@media (max-width: 1100px) {
  .pub-media-grid { gap: .7rem; }
  .pmg-thumbs  { max-width: 100px; }
  .section.pub-detail { padding-block-start: clamp(.85rem, 1.7vw, 1.25rem); }
}
@media (max-width: 991px) {
  /* MEDIA GRID pasa a columna: thumbs → horizontal scroll abajo */
  .pub-media-grid {
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
  }
  .pmg-thumbs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    max-height: none;
    padding: 1px 1px 5px 1px;
    scroll-snap-type: x mandatory;
    gap: .4rem;
  }
  .pmg-thumb {
    flex: 0 0 auto;
    width: 108px;
    scroll-snap-align: start;
  }
  .page-head-gradient { padding-bottom: 1.05rem; }
  .section.pub-detail { padding-block-start: .9rem; }
  .ps-lb-info { max-width: calc(100% - 310px); }
}
@media (max-width: 768px) {
  .pmg-img-box { aspect-ratio: 4 / 3; border-radius: 12px; }
  .pmg-zoom-hint { font-size: .75rem; padding: .45rem .8rem; left: 12px; right: 12px; bottom: 12px; }
  .pmg-caption { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .pmg-thumb { width: 96px; }

  .att-row {
    flex-wrap: wrap;
    gap: .65rem;
    padding: 1rem .15rem;
  }
  .att-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .att-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    padding-left: 56px; /* alinear con nombre (debajo icono) */
    margin-top: .25rem;
  }
  .btn-xs { min-width: 0; padding: .42rem .8rem; }

  /* Lightbox responsive */
  .ps-lb-topbar { padding: .75rem .85rem; flex-direction: column; align-items: flex-start; gap: .5rem; background: rgba(2,6,23,.75); }
  .ps-lb-info { max-width: 100%; }
  .ps-lb-ctrls { width: 100%; justify-content: space-between; }
  .ps-lb-btn { height: 34px; padding: 0 .6rem; font-size: .78rem; }
  .ps-lb-nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .ps-lb-nav-prev { left: .55rem; }
  .ps-lb-nav-next { right: .55rem; }
  .ps-lb-stage { padding: 140px 1rem 1rem 1rem; }
  #psLbImg { max-height: calc(100vh - 160px); }
  .pub-media-wrapper { margin-bottom: 2.5rem; }
}

/* =========================================================
   ===== V4 · LOGOS ADMINISTRABLES + HERO BRAND STACK
   ========================================================= */

/* --- Navbar logo --- */
.brand-logo {
  max-height: 56px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 480px) {
  .brand-logo { max-height: 44px; }
}

/* --- Hero brand stack: logo + texto resolución --- */
.hero-brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1.7rem;
  max-width: 560px;
}
.hero-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.hero-logo {
  max-width: 100%;
  width: auto;
  max-height: 150px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(2,6,23,.45));
  display: block;
}
.hero-resolucion-text {
  margin: 0;
  color: #ffffff;
  font-weight: 500;
  font-size: .86rem;
  line-height: 1.55;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .45rem .85rem;
  border-left: 3px solid rgba(13,148,136,.85);
  background: rgba(4,27,78,.35);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 0 8px 8px 0;
  opacity: .94;
  max-width: 100%;
  word-break: break-word;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* --- Hero title / lead más pequeños y profesionales --- */
.hero-title-pro {
  font-size: clamp(2rem, 3.6vw, 3rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em;
  margin-bottom: 1rem !important;
  font-weight: 800 !important;
  text-shadow: 0 3px 18px rgba(2,6,23,.45);
}
.hero-lead-pro {
  font-size: clamp(.95rem, 1.2vw, 1.08rem) !important;
  line-height: 1.6 !important;
  max-width: 640px;
  margin-bottom: 1.8rem !important;
  color: rgba(255,255,255,.88);
  font-weight: 400;
}

@media (max-width: 1100px) {
  .hero-logo { max-height: 130px; }
  .hero-brand-stack { margin-bottom: 1.5rem; }
}
@media (max-width: 991px) {
  .hero-brand-stack { max-width: 100%; align-items: flex-start; }
  .hero-logo { max-height: 115px; }
  .hero-title-pro { font-size: clamp(1.8rem, 5.5vw, 2.5rem) !important; }
  .hero-resolucion-text { font-size: .78rem; letter-spacing: .07em; padding: .4rem .75rem; }
}
@media (max-width: 768px) {
  .hero-brand-stack { align-items: center; text-align: center; gap: .75rem; margin-bottom: 1.25rem; }
  .hero-logo-wrap { justify-content: center; }
  .hero-logo { max-height: 96px; }
  .hero-resolucion-text {
    border-left: none;
    border-top: 3px solid rgba(13,148,136,.85);
    border-radius: 0 0 8px 8px;
    text-align: center;
    font-size: .74rem;
    letter-spacing: .06em;
    padding: .5rem .7rem;
  }
  .hero-title-pro { text-align: center; font-size: clamp(1.6rem, 7.2vw, 2.2rem) !important; }
  .hero-lead-pro { text-align: center; }
}
@media (max-width: 420px) {
  .hero-logo { max-height: 80px; }
  .hero-resolucion-text { font-size: .7rem; letter-spacing: .05em; }
}

/* =========================================================
   V8 · Cards Publicaciones: Portada con imagen real + overlay color transparente (IPSOS-style)
   ========================================================= */
.pub-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 640 / 340;
  min-height: 220px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  isolation: isolate;
}
.pub-cover {
  position: absolute;
  z-index: 1;
  display: block;
  /* Coverage TOTAL del contenedor (+1px por lado para evitar gaps de 1px por rounding en alturas min-height/aspect-ratio) */
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  min-width: 100%;
  min-height: 100%;
  object-fit: fill !important;
  pointer-events: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  /* Previene preserveAspectRatio del SVG por si el navegador lo ignora object-fit */
  transform-origin: center center;
  transform: scale(1.005);
  box-sizing: border-box;
}

/* Imagen de fondo real (primera galería) · capa 0 */
.pcm-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform-origin: 50% 50%;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 400ms ease;
  filter: saturate(1.05) contrast(1.02);
  will-change: transform;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  /* Garantiza que NO haya overflow NINGÚN pixel por fuera del card media */
  clip-path: inset(0 0 0 0 round 16px 16px 0 0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}
.pub-card:hover .pcm-bg-image {
  transform: scale(1.045);
  filter: saturate(1.15) contrast(1.06);
}

/* Badges flotantes sobre las cards · capa 99 (queden POR ENCIMA DE TODO — TOP para mayor visibilidad) */
.pub-card-badges {
  position: absolute;
  left: .9rem;
  top: .9rem;
  z-index: 99;
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  pointer-events: none;
}
.pub-card-badges .badge {
  backdrop-filter: blur(6px) saturate(170%);
  -webkit-backdrop-filter: blur(6px) saturate(170%);
  box-shadow: 0 3px 10px rgba(2,6,23,.32);
  padding: .36rem .72rem;
  font-size: .78rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.22);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(2,6,23,.45);
  letter-spacing: .01em;
}

/* ==============================================================
   MÓDULO PUBLICIDAD ADMINISTRABLE · Posiciones + Widgets
   ============================================================== */
.ad-pos {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--space-4, 1rem);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
  isolation: isolate;
}
.ad-inner { display: flex; flex-direction: column; }
.ad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .75rem;
  background: linear-gradient(90deg, rgba(124,58,237,.05), rgba(13,148,136,.05));
  border-bottom: 1px solid #e2e8f0;
}
.ad-tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #041b4e;
  background: rgba(4,27,78,.06);
  padding: .12rem .5rem;
  border-radius: 999px;
}
.ad-close {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(2,6,23,.05);
  color: #334155;
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  text-decoration: none !important;
  transition: all .2s ease;
  cursor: pointer;
  border: 1px solid rgba(2,6,23,.08);
}
.ad-close:hover {
  background: #ef4444;
  color: #ffffff !important;
  border-color: #ef4444;
  transform: rotate(90deg);
}
.ad-body {
  display: block;
  width: 100%;
  line-height: 0;
  background: #f8fafc;
}
.ad-link { display:block; width:100%; height:100%; text-decoration: none !important; }
.ad-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform .6s ease, filter .3s ease;
}
.ad-pos:hover .ad-img {
  transform: translateY(-1px);
  filter: saturate(1.1) contrast(1.03);
}

/* Posición TOP-BANNER */
.ad-pos-top {
  margin: 0 auto 1.5rem;
  max-width: 1200px;
  border-radius: 16px;
}
.ad-pos-top .ad-img { max-height: 180px; object-fit: cover; }

/* Posición BOTTOM-STICKY (fijo abajo pantalla) */
.ad-pos-bottom {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1040px;
  margin: 0;
  z-index: 90;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.22);
  animation: ad-slide-up 450ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ad-slide-up {
  0%   { opacity: 0; transform: translate(-50%, 40px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
.ad-pos-bottom .ad-img { max-height: 120px; object-fit: cover; }

/* Posición SIDEBAR RIGHT */
.ad-pos-side {
  border-radius: 14px;
  margin: 0 0 1.25rem;
}
.ad-pos-side .ad-body { display: block; }
.ad-pos-side .ad-img  { object-fit: cover; }

/* =============== REGLAS NUEVAS SIN ENCABEZADO (v2 clean) =============== */
.ad-pos-clean {
  border: 1px solid rgba(15,23,42,.08);
  background: transparent;
  box-shadow: 0 10px 24px -16px rgba(2,6,23,.18);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.ad-pos-clean .ad-head,
.ad-pos-clean .ad-tag,
.ad-pos .ad-head,
.ad-pos .ad-tag {
  display: none !important;
}
.ad-body-nohead {
  display: block;
  width: 100%;
  line-height: 0;
  background: #f8fafc;
  padding: 0;
  margin: 0;
}
.ad-body-nohead .ad-img { width: 100%; display: block; height: auto; object-fit: cover; line-height: 0; }

/* Botón cerrar FLOTANTE (SOBRE LA IMAGEN, SIN ENCABEZADO) */
.ad-close-float {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  color: #ffffff;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, opacity 180ms ease;
  box-shadow: 0 10px 20px -10px rgba(2,6,23,.45);
  opacity: 0.92;
}
.ad-close-float span { display: inline-grid; place-items: center; transform: translateY(-1px); }
.ad-close-float:hover {
  background: #dc2626;
  border-color: rgba(255,255,255,.3);
  color: #fff !important;
  transform: rotate(90deg) scale(1.05);
  opacity: 1;
}
.ad-close-float:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(239,68,68,.3), 0 10px 20px -10px rgba(2,6,23,.45);
}

/* TOP-BANNER clean: márgenes actualizados */
.ad-pos.ad-pos-top.ad-pos-clean {
  margin: 0 auto 1.25rem;
  max-width: 1200px;
  border-radius: 16px;
}
.ad-pos.ad-pos-top.ad-pos-clean .ad-img { max-height: 180px; object-fit: cover; border-radius: 16px; }

/* BOTTOM-STICKY -> AHORA INLINE (NO FIXED).  NO SE SUPERPONE SOBRE LAS CARDS. */
.ad-pos.ad-pos-bottom.ad-pos-bottom-inline {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 1.5rem auto 0 !important;
  z-index: 1;
  border-radius: 16px;
  animation: none !important;
  box-shadow: 0 12px 34px -18px rgba(2,6,23,.2);
}
.ad-pos.ad-pos-bottom.ad-pos-bottom-inline .ad-img {
  max-height: 180px;
  object-fit: cover;
  border-radius: 16px;
}
@media (max-width: 768px) {
  .ad-close-float {
    width: 28px; height: 28px;
    top: 8px; right: 8px;
    font-size: 1.05rem;
  }
  .ad-pos.ad-pos-top.ad-pos-clean,
  .ad-pos.ad-pos-bottom.ad-pos-bottom-inline {
    border-radius: 12px;
    margin: 0 0 1rem;
  }
  .ad-pos.ad-pos-top.ad-pos-clean .ad-img,
  .ad-pos.ad-pos-bottom.ad-pos-bottom-inline .ad-img {
    max-height: 130px;
    border-radius: 12px;
  }
}

/* Posición INTERSTITIAL (pantalla completa, modal) */
.ad-pos-inter {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 0;
  border: none;
  padding: 1.5rem;
  overflow: auto;
  animation: ad-fade-in 320ms ease both;
}
.ad-pos-inter .ad-inner {
  max-width: 920px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(0,0,0,.38);
  animation: ad-pop 420ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ad-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes ad-pop {
  0%   { opacity: 0; transform: scale(.92); }
  60%  { opacity: 1; transform: scale(1.01); }
  100% { transform: scale(1); }
}
.ad-pos-inter .ad-head { padding: .75rem 1rem; }
.ad-pos-inter .ad-img  { max-height: 72vh; object-fit: contain; }

/* Ocultar banner bottom en mobile si es muy alto */
@media (max-width: 768px) {
  .ad-pos-bottom { width: calc(100% - 16px); bottom: 8px; }
  .ad-pos-bottom .ad-img { max-height: 96px; }
  .ad-pos-top    { margin: 0 0 1rem; border-radius: 12px; }
  .ad-pos-top .ad-img { max-height: 120px; }
  .ad-tag { font-size: .65rem; }
}
.ad-dismissed-by-user { display:none !important; }

/* ===== AJUSTE: filtro publicaciones más cerca del texto ===== */
.page-head.page-head-light { padding-block: 1.7rem 1.1rem; }
.page-head.page-head-light .page-subtitle { max-width: 720px; }
.section.section-white.pt-4 { padding-block-start: .9rem !important; }
.section.section-white.pt-md-5 { padding-block-start: 1.2rem !important; }
@media (max-width: 768px) {
  .page-head.page-head-light { padding-block: 1.3rem .7rem; }
  .section.section-white.pt-4,
  .section.section-white.pt-md-5 { padding-block-start: .6rem !important; }
  .filters-compact { padding: .75rem; border-radius: 10px; }
}

/* ============================================================
   PÁGINA LOGIN ADMIN — REDISEÑO PROFESIONAL (IPSOS-STYLE)
   ============================================================ */
.login-body {
  margin: 0;
  min-height: 100dvh;
  background: #f3f6fb;
  color: #0f172a;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.l-wrap {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  width: 100%;
}

/* ---------- LADO IZQUIERDO: HERO BRANDING ---------- */
.l-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  display: flex;
  align-items: stretch;
}
.l-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(13,148,136,.55) 0%, transparent 55%),
    radial-gradient(900px  700px at 110% 110%, rgba(99,102,241,.38) 0%, transparent 60%),
    linear-gradient(145deg, var(--l-bg-navy, #041b4e) 0%, #0c2866 48%, #11357d 100%);
  z-index: -2;
}
.l-hero-bg-pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.08) 0 1px, transparent 2px);
  background-size: 28px 28px, 44px 44px;
  opacity: .9;
  z-index: -1;
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
.l-hero-inner {
  width: 100%;
  max-width: 640px;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 72px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  animation: heroFadeIn 800ms 50ms both cubic-bezier(.22,1,.36,1);
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
.l-hero-logo-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.l-hero-logo {
  max-height: clamp(44px, 6vw, 64px);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
}
.l-hero-copy { display: flex; flex-direction: column; gap: 26px; }

.l-hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  width: fit-content;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.dot-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.55);
  animation: dotPulse 1.8s infinite;
}
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(52,211,153,0);   }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0);     }
}

.l-hero-h1 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #ffffff !important;      /* User request: texto bienvenido 100% BLANCO contrastado */
  text-shadow: 0 2px 12px rgba(0,0,0, 0.22), 0 1px 0 rgba(255,255,255,0.04);
}
.l-hero-h1 strong {
  background: linear-gradient(90deg, #ffffff 0%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0, 0.22));
}
.l-hero-p {
  margin: 0;
  color: #ffffff;  /* User request: texto blanco puro (antes rgba 88% → 100% white + contraste mejorado) */
  font-weight: 500;
  font-size: clamp(.95rem, 1.25vw, 1.06rem);
  line-height: 1.7;
  max-width: 62ch;
  text-shadow: 0 1px 8px rgba(0,0,0, 0.28);
}
.l-hero-bullets strong { display: block; font-size: .98rem; margin-bottom: 4px; color: #fff !important; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0, 0.25); }
.l-hero-bullets span { color: #ffffff !important; font-weight: 500; font-size: .9rem; line-height: 1.6; text-shadow: 0 1px 5px rgba(0,0,0, 0.22); }
.l-hero-bullets li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 240ms ease, background 240ms ease, border-color 240ms ease;
}
.l-hero-bullets li:hover {
  transform: translateX(3px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.bh-ic {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--l-bg-teal, #0d9488) 0%, #22c55e 100%);
  font-size: 1.2rem;
  box-shadow: 0 6px 16px rgba(13,148,136,.35);
}

.l-hero-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  color: rgba(255,255,255,.82);
  font-size: .82rem;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  text-shadow: 0 1px 4px rgba(0,0,0, 0.18);
}

/* ---------- LADO DERECHO: CARD LOGIN ---------- */
.l-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(900px 500px at 100% 10%, rgba(13,148,136,.08), transparent 60%),
    radial-gradient(700px 500px at 0% 100%,   rgba(99,102,241,.09), transparent 60%),
    #f3f6fb;
  position: relative;
}
.l-card {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  padding: clamp(26px, 4vw, 40px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 24px 60px -20px rgba(15,23,42,.18),
    0 10px 28px -14px rgba(15,23,42,.10);
  animation: cardPop 700ms 120ms both cubic-bezier(.22,1,.36,1);
}
@keyframes cardPop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.l-card-head { margin-bottom: 22px; }
.l-card-title {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 750;
  letter-spacing: -.015em;
  color: #0b1220;
}
.l-card-sub {
  margin: 0;
  color: #475569;
  font-size: .96rem;
}

/* Alertas flash (heredadas parcial) re-contextualizadas dentro de l-card */
.l-card .alert { border-radius: 12px; padding: 12px 14px; margin: 0 0 18px; border: 1px solid transparent; font-size: .92rem; }
.l-card .alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.l-card .alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.l-card .alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.l-card .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

.l-form { display: flex; flex-direction: column; gap: 16px; }
.lf-group { display: flex; flex-direction: column; gap: 8px; }
.lf-label-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px;
}
.lf-label {
  font-size: .86rem;
  font-weight: 600;
  color: #1e293b;
  display: inline-flex; align-items: center; gap: 8px;
}
.lf-label-ic {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem;
  background: #eef2ff;
  color: var(--l-primary, #1e3a8a);
  border-radius: 6px;
}
.lf-forgot {
  font-size: .82rem;
  color: var(--l-primary, #1e3a8a);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease;
}
.lf-forgot:hover { color: var(--l-bg-teal, #0d9488); text-decoration: underline; }

.lf-input {
  position: relative;
  display: flex; align-items: center;
  background: #fff;
  border: 1.5px solid #dbe3ee;
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.lf-input:focus-within {
  border-color: var(--l-primary, #1e3a8a);
  box-shadow: 0 0 0 4px rgba(30,58,138,.12);
  background: #fff;
}
.lf-input input {
  flex: 1;
  width: 100%;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  outline: none;
  font-size: .96rem;
  color: #0f172a;
  font-family: inherit;
  border-radius: 12px;
}
.lf-input input::placeholder { color: #94a3b8; }
.lf-eye {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  margin-right: 6px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: #64748b;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  font-size: 1rem;
}
.lf-eye:hover { background: #f1f5f9; color: var(--l-primary, #1e3a8a); transform: scale(1.04); }

.lf-row-between {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: -2px;
}
.lf-remember {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .88rem;
  color: #334155;
  cursor: pointer;
  user-select: none;
}
.lf-remember input {
  width: 16px; height: 16px;
  accent-color: var(--l-primary, #1e3a8a);
  cursor: pointer;
  border-radius: 4px;
}

.lf-submit {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: .01em;
  cursor: pointer;
  background: linear-gradient(135deg, var(--l-primary, #1e3a8a) 0%, var(--l-bg-teal, #0d9488) 100%);
  box-shadow:
    0 12px 24px -12px rgba(30,58,138,.55),
    0 6px 14px -8px  rgba(13,148,136,.45);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  font-family: inherit;
  margin-top: 2px;
}
.lf-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 16px 28px -14px rgba(30,58,138,.62),
    0 10px 18px -10px rgba(13,148,136,.52);
}
.lf-submit:active { transform: translateY(0) scale(.995); }
.lf-submit:focus-visible { outline: 0; box-shadow: 0 0 0 5px rgba(30,58,138,.22), 0 12px 24px -12px rgba(30,58,138,.55); }
.s-ic { font-size: 1.05rem; }
.s-spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.lf-submit.is-loading .s-spinner { display: inline-block; }
.lf-submit.is-loading .s-ic { opacity: .25; }
.lf-submit:disabled { cursor: progress; filter: saturate(.85); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tarjeta de credenciales demo */
.lf-demo-card {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid #e0e7ff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 4px;
}
.lf-demo-title {
  font-size: .8rem;
  font-weight: 650;
  color: var(--l-primary, #1e3a8a);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.lf-demo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.lf-demo-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.ld-role {
  font-size: .72rem;
  font-weight: 700;
  color: #065f46;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lf-demo-item:nth-child(2) .ld-role { color: #78350f; background: #fef3c7; }
.lf-demo-item code {
  font-size: .76rem;
  color: #334155;
  background: #f8fafc;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lf-bottom-links {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px 10px;
  padding-top: 6px;
  font-size: .86rem;
  color: #475569;
}
.lf-bottom-links a { text-decoration: none; color: #334155; display: inline-flex; align-items: center; gap: 6px; transition: color .15s ease; }
.lf-bottom-links a:hover { color: var(--l-primary, #1e3a8a); }
.lf-bottom-links .lf-back { font-weight: 500; }
.lf-bottom-links .lf-support { color: #0f766e; }
.lf-bottom-links .lf-support:hover { color: #115e59; }
.lf-bottom-links .sep { color: #cbd5e1; }

.l-card-foot {
  margin: 18px auto 0;
  text-align: center;
  color: #94a3b8;
  font-size: .8rem;
}
.muted-sm { color: #94a3b8; }

/* ---------- MOBILE / TABLET RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .l-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .l-wrap { grid-template-columns: 1fr; }
  .l-hero { min-height: 300px; }
  .l-hero-inner { max-width: 100%; padding: 30px 26px; gap: 24px; }
  .l-hero-p { max-width: 100%; }
  .l-card-wrap { padding: 0 20px 32px; margin-top: -54px; z-index: 2; }
  .l-card { padding: 26px 22px; }
  .l-hero-bullets { max-width: 100%; }
  .l-hero-foot { padding-top: 18px; gap: 8px; }
}
@media (max-width: 560px) {
  .lf-demo-grid { grid-template-columns: 1fr; }
  .l-card-wrap { padding: 0 14px 28px; margin-top: -40px; }
  .l-card { border-radius: 18px; padding: 22px 18px; }
  .l-hero-inner { padding: 24px 20px; }
  .l-hero-h1 { font-size: 26px; }
  .l-hero-bullets li { padding: 12px 14px; gap: 12px; grid-template-columns: 36px 1fr; }
  .bh-ic { width: 36px; height: 36px; font-size: 1.1rem; }
  .lf-bottom-links { font-size: .82rem; }
  .login-body { background: #eef2ff; }
}

/* Sticky submit cards (Settings / long forms) */
.sticky-bottom-card {
  position: sticky;
  bottom: 1rem;
  z-index: 50;
  margin-top: 1rem;
  border: 1px solid #e2e8f0;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 18px 40px -20px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(15, 23, 42, 0.04) inset;
  border-radius: 14px;
}
.sticky-bottom-card .card-body { padding: 12px 18px; }

@media (max-width: 768px) {
  .sticky-bottom-card { bottom: 0; border-radius: 14px 14px 0 0; margin: 1.2rem -1rem -1rem; }
  .sticky-bottom-card .card-body { padding: 14px 16px; justify-content: stretch !important; }
  .sticky-bottom-card .btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   PAGE HERO COVER (Imagen destacada portada + degradado IPSOS)
   ========================================================================== */
.page-hero-cover {
  position: relative;
  width: 100%;
  min-height: 340px;
  height: clamp(320px, 42vw, 520px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  margin-bottom: 2rem;
  box-shadow: 0 20px 60px -24px rgba(15,23,42, 0.28);
}
.page-hero-cover::after { /* Borde degradado elegante */
  content: '';
  position: absolute;
  inset: 0;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  pointer-events: none;
  box-shadow: inset 0 -40px 80px -40px rgba(0,0,0, 0.35);
  z-index: 2;
}
.page-hero-cover .phc-bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  /* Subtle parallax-like transform (scale tiny) */
  transform-origin: 50% 50%;
  transform: scale(1.04);
  transition: transform 600ms cubic-bezier(.2,.7,.2,1), filter 400ms ease;
  filter: saturate(1.1) contrast(1.02) brightness(0.96);
}
.page-hero-cover:hover .phc-bg { transform: scale(1.08); filter: saturate(1.2) contrast(1.05) brightness(0.93); }
.page-hero-cover .phc-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* IPSOS-like navy/cyan gradient + darkness bottom */
  background:
    linear-gradient(90deg, rgba(8, 20, 66, 0.92) 0%, rgba(8, 20, 66, 0.76) 38%, rgba(6, 182, 212, 0.22) 80%, rgba(6, 182, 212, 0.10) 100%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.0) 25%, rgba(15, 23, 42, 0.42) 75%, rgba(15, 23, 42, 0.72) 100%);
  pointer-events: none;
}
.page-hero-cover .phc-content {
  position: relative;
  z-index: 3;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}
.page-hero-cover .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(255,255,255, 0.55);
}
.page-hero-cover .breadcrumb a,
.page-hero-cover .breadcrumb-item,
.page-hero-cover .breadcrumb-item.active {
  color: rgba(255,255,255, 0.9) !important;
  text-shadow: 0 1px 3px rgba(0,0,0, 0.35);
}
.page-hero-cover .page-title {
  color: #ffffff !important;
  font-size: clamp(1.9rem, 3.8vw, 3.25rem);
  line-height: 1.12;
  max-width: 38ch;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 20px rgba(0,0,0, 0.45), 0 1px 0 rgba(255,255,255, 0.06);
}
.phc-subtitle {
  font-size: clamp(0.98rem, 1.3vw, 1.15rem);
  color: rgba(255, 255, 255, 0.88);
  max-width: 58ch;
  margin: 1rem 0 0;
  line-height: 1.55;
  text-shadow: 0 1px 6px rgba(0,0,0, 0.35);
}
@media (max-width: 768px) {
  .page-hero-cover {
    min-height: 280px;
    height: clamp(280px, 64vw, 380px);
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
  }
  .page-hero-cover .page-title { font-size: clamp(1.55rem, 6.4vw, 2.1rem); max-width: 26ch; }
  .page-hero-cover .phc-overlay {
    background:
      linear-gradient(180deg, rgba(8, 20, 66, 0.35) 0%, rgba(8, 20, 66, 0.78) 62%, rgba(15,23,42, 0.92) 100%);
  }
}
/* Page breadcrumb contrast for hero images also */
.page-hero-cover + .section.section-white { padding-top: 1rem; }

/* WYSIWYG inline uploaded images in rich-text (public pages default layout) */
.rich-text img[data-inline-upload="1"],
.rich-text img.img-fluid {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 14px 40px -22px rgba(15, 23, 42, 0.35);
  margin: 1rem 0 1.25rem;
  display: block;
}
@media (max-width: 576px) {
  .rich-text img[data-inline-upload="1"],
  .rich-text img.img-fluid { border-radius: 10px; margin: .8rem 0; }
}

/* Admin pages cover preview wrapper smooth transition */
#page_cover_preview_wrap img {
  transition: transform 500ms ease, opacity 300ms ease;
}