/* =====================================================================
   HUELLA ETERNA - Hoja de estilo principal
   Entrega 001 | huellaeterna.com.py

   Paleta de marca: crema, teal profundo y dorado. Los tres colores
   estan medidos sobre el logo y el banner, no elegidos a ojo. Tipografia
   serif para todo lo emocional y sans para lo operativo. Se carga
   después de Bootstrap 5.3.

   El dorado #C89038 sobre crema da 2.6:1 de contraste: sirve de relleno,
   de filete y de icono, NUNCA de texto. Cuando el dorado es texto se usa
   --he-oro-texto (#8A5F18, 5.2:1).
   ===================================================================== */

:root{
  /* Fondos: la crema del banner */
  --he-bg:        #FCF4EA;
  --he-bg-alt:    #F6EADA;
  --he-panel:     #FFFFFF;
  --he-panel-alt: #FAF2E6;
  --he-line:      #E6D9C6;
  --he-line-suave:#F0E6D8;

  /* Teal: el del logo. Es la tinta del sitio. */
  --he-tinta:      #00343A;
  --he-teal:       #004848;
  --he-teal-claro: #0A6A6E;
  --he-teal-tenue: rgba(0,72,72,.07);

  /* Dorados: el del isotipo */
  --he-oro:        #C89038;
  --he-oro-claro:  #E3B567;
  --he-oro-oscuro: #96691F;
  --he-oro-texto:  #8A5F18;
  --he-oro-tenue:  rgba(200,144,56,.14);
  --he-oro-palido: #FCDC9C;

  /* Texto */
  --he-texto:   #00343A;
  --he-suave:   #4A5F62;
  --he-tenue:   #6B7B7D;

  /* Estados, oscurecidos para que se lean sobre crema */
  --he-ok:    #1E7A52;
  --he-error: #B3303C;
  --he-aviso: #8A5A10;
  --he-info:  #1F5B96;

  /* Tipografia */
  --he-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --he-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Medidas */
  --he-radio:     14px;
  --he-radio-sm:  9px;
  --he-sombra:    0 10px 30px rgba(0,52,58,.10);
  --he-sombra-sm: 0 4px 12px rgba(0,52,58,.07);
  --he-trans:     .22s ease;
}

/* =====================================================================
   BASE
   ===================================================================== */

*{ box-sizing:border-box }

html{ scroll-behavior:smooth }

body{
  margin:0;
  background:var(--he-bg);
  color:var(--he-texto);
  font-family:var(--he-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{ flex:1 }

h1,h2,h3,h4,.he-serif{
  font-family:var(--he-serif);
  font-weight:500;
  letter-spacing:.2px;
  line-height:1.25;
  color:var(--he-tinta);
}

h1{ font-size:clamp(2rem,4.2vw,3.1rem) }
h2{ font-size:clamp(1.55rem,3vw,2.25rem) }
h3{ font-size:1.35rem }

a{ color:var(--he-teal-claro); text-decoration:none; transition:color var(--he-trans) }
a:hover{ color:var(--he-oro-texto) }

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

::selection{ background:var(--he-teal); color:#FCF4EA }

:focus-visible{ outline:2px solid var(--he-teal); outline-offset:2px; border-radius:4px }

.he-suave{ color:var(--he-suave) }
.he-tenue{ color:var(--he-tenue) }
.he-oro{ color:var(--he-oro-texto) }
.he-mini{ font-size:.82rem }
.he-mayus{ text-transform:uppercase; letter-spacing:1.4px; font-size:.73rem }

/* =====================================================================
   CABECERA PUBLICA
   ===================================================================== */

.he-header{
  position:sticky; top:0; z-index:1030;
  background:rgba(252,244,234,.90);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--he-line-suave);
}

.he-header-in{
  max-width:1180px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:28px;
}

.he-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0 }
.he-logo-img{ height:40px; width:auto; max-width:100%; object-fit:contain; display:block }

/* En las barras laterales manda el ancho, no el alto. */
.he-sidebar-logo{ overflow:hidden }
.he-sidebar-logo .he-logo-img{ height:auto; width:100%; max-height:44px }
.he-logo-texto{
  font-family:var(--he-serif); font-size:1.6rem; color:var(--he-tinta);
  letter-spacing:.6px; line-height:1;
}

.he-nav{ display:flex; align-items:center; gap:24px; margin-left:auto }
.he-nav a{
  color:var(--he-suave); font-size:.93rem; position:relative; padding:4px 0;
}
.he-nav a:hover,.he-nav a.activo{ color:var(--he-tinta) }
.he-nav a.activo::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--he-oro);
}

.he-nav-toggle{
  display:none; background:none; border:1px solid var(--he-line);
  color:var(--he-texto); border-radius:8px; padding:7px 11px; font-size:1.1rem; cursor:pointer;
}

@media (max-width:900px){
  .he-nav-toggle{ display:block; margin-left:auto }
  .he-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--he-panel); border-bottom:1px solid var(--he-line);
    padding:10px 20px 18px;
  }
  .he-nav.abierto{ display:flex }
  .he-nav a{ padding:11px 0; border-bottom:1px solid var(--he-line-suave) }
  .he-nav a:last-child{ border-bottom:none }
  .he-nav .he-btn{ margin-top:12px; text-align:center }
}

/* =====================================================================
   BOTONES
   ===================================================================== */

.he-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 26px; border-radius:var(--he-radio-sm); border:1px solid transparent;
  background:var(--he-oro); color:var(--he-tinta);
  font-family:var(--he-sans); font-size:.96rem; font-weight:700;
  cursor:pointer; transition:var(--he-trans); text-align:center; line-height:1.3;
}
.he-btn:hover{ background:var(--he-oro-claro); color:var(--he-tinta); transform:translateY(-1px) }
.he-btn:active{ transform:translateY(0) }
.he-btn:disabled,.he-btn.disabled{ opacity:.5; cursor:not-allowed; transform:none }

.he-btn-linea{ background:transparent; border-color:var(--he-teal); color:var(--he-teal) }
.he-btn-linea:hover{ background:var(--he-teal-tenue); color:var(--he-tinta) }

.he-btn-suave{ background:var(--he-panel-alt); border-color:var(--he-line); color:var(--he-texto) }
.he-btn-suave:hover{ background:var(--he-line); color:var(--he-texto) }

.he-btn-peligro{ background:transparent; border-color:rgba(179,48,60,.45); color:var(--he-error) }
.he-btn-peligro:hover{ background:rgba(179,48,60,.09); color:var(--he-error) }

.he-btn-sm{ padding:8px 16px; font-size:.86rem }
.he-btn-lg{ padding:15px 34px; font-size:1.04rem }
.he-btn-bloque{ display:flex; width:100% }

.he-btn-google{
  background:#fff; color:#3c4043; border-color:#dadce0;
  font-weight:500;
}
.he-btn-google:hover{ background:#f6f7f9; color:#3c4043 }
.he-btn-google svg{ width:19px; height:19px; flex-shrink:0 }

/* =====================================================================
   TARJETAS Y PANELES
   ===================================================================== */

.he-card{
  background:var(--he-panel);
  border:1px solid var(--he-line);
  border-radius:var(--he-radio);
  padding:26px;
}
.he-card-sm{ padding:18px }

.he-card-h{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:-26px -26px 22px; padding:18px 26px;
  border-bottom:1px solid var(--he-line);
}
.he-card-h h2,.he-card-h h3{ margin:0; font-size:1.15rem }

.he-seccion{ padding:72px 0 }
.he-seccion-alt{ background:var(--he-bg-alt) }
.he-contenedor{ max-width:1180px; margin:0 auto; padding:0 20px }
.he-contenedor-sm{ max-width:760px; margin:0 auto; padding:0 20px }
.he-contenedor-xs{ max-width:480px; margin:0 auto; padding:0 20px }

.he-titulo-seccion{ text-align:center; margin-bottom:46px }
.he-titulo-seccion p{ color:var(--he-suave); max-width:620px; margin:14px auto 0 }

/* =====================================================================
   FORMULARIOS
   ===================================================================== */

.he-campo{ margin-bottom:18px }

.he-campo label,.he-label{
  display:block; margin-bottom:6px;
  font-size:.86rem; color:var(--he-suave); font-weight:500;
}
.he-label-req::after{ content:' *'; color:var(--he-oro-texto) }

.he-input,.he-select,.he-textarea,
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=date],input[type=number],input[type=url],select,textarea{
  width:100%; padding:11px 14px;
  background:var(--he-bg-alt); color:var(--he-texto);
  border:1px solid var(--he-line); border-radius:var(--he-radio-sm);
  font-family:var(--he-sans); font-size:.96rem; transition:var(--he-trans);
}
textarea{ min-height:120px; resize:vertical; line-height:1.6 }

.he-input:focus,.he-select:focus,.he-textarea:focus,
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--he-teal); background:var(--he-panel);
  box-shadow:0 0 0 3px var(--he-teal-tenue);
}
input::placeholder,textarea::placeholder{ color:var(--he-tenue) }
input:disabled,select:disabled,textarea:disabled{ opacity:.55; cursor:not-allowed }

select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234A5F62' d='M8 11L3 5h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:13px;
  padding-right:38px;
}

.he-ayuda{ display:block; margin-top:5px; font-size:.8rem; color:var(--he-tenue); line-height:1.5 }
.he-error-campo{ display:block; margin-top:5px; font-size:.82rem; color:var(--he-error) }
.he-input-mal{ border-color:var(--he-error) }

.he-fila{ display:flex; gap:18px; flex-wrap:wrap }
.he-fila > *{ flex:1; min-width:210px }

.he-check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px }
.he-check input[type=checkbox],.he-check input[type=radio]{
  width:18px; height:18px; margin-top:3px; flex-shrink:0;
  accent-color:var(--he-teal); cursor:pointer;
}
.he-check label{ margin:0; cursor:pointer; color:var(--he-texto); font-size:.92rem; font-weight:400 }

/* Honeypot: invisible para personas, presente para bots */
.he-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* =====================================================================
   ALERTAS
   ===================================================================== */

.he-alert{
  padding:13px 17px; border-radius:var(--he-radio-sm);
  margin-bottom:16px; font-size:.93rem; border:1px solid transparent;
}
.he-alert-ok{    background:#E7F3EC; border-color:rgba(30,122,82,.30);  color:#14563A }
.he-alert-error{ background:#FBEAEC; border-color:rgba(179,48,60,.30);  color:#8A2029 }
.he-alert-aviso{ background:#FAF0DC; border-color:rgba(138,90,16,.30);  color:#6B4509 }
.he-alert-info{  background:#E8F0F8; border-color:rgba(31,91,150,.30);  color:#16406B }

/* =====================================================================
   INSIGNIAS
   ===================================================================== */

.he-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px;
  font-size:.74rem; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  background:var(--he-panel-alt); color:var(--he-suave); border:1px solid var(--he-line);
}
.he-badge-oro{   background:var(--he-oro-tenue); color:var(--he-oro-texto); border-color:rgba(200,144,56,.45) }
.he-badge-ok{    background:#E7F3EC; color:#14563A; border-color:rgba(30,122,82,.32) }
.he-badge-error{ background:#FBEAEC; color:#8A2029; border-color:rgba(179,48,60,.32) }
.he-badge-aviso{ background:#FAF0DC; color:#6B4509; border-color:rgba(138,90,16,.32) }

/* =====================================================================
   PORTADA
   ===================================================================== */

.he-hero{
  position:relative; padding:96px 0 84px; text-align:center; overflow:hidden;
}
.he-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 900px 460px at 50% -6%, rgba(200,144,56,.17), transparent 70%);
  pointer-events:none;
}
.he-hero-in{ position:relative; max-width:820px; margin:0 auto; padding:0 20px }
.he-hero h1{ margin:0 0 20px }
.he-hero p.he-bajada{
  font-size:1.14rem; color:var(--he-suave); max-width:620px; margin:0 auto 34px;
}
.he-hero-botones{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

/* Antes eran estrellas doradas sobre fondo nocturno. Sobre crema no se
   veian, asi que ahora es el mismo recurso con otra forma: un velo
   calido que redondea las esquinas del hero sin ensuciar el texto. */
.he-estrellas{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 8% 10%,  rgba(200,144,56,.10), transparent 70%),
    radial-gradient(ellipse 55% 65% at 92% 18%, rgba(0,72,72,.06),    transparent 72%),
    linear-gradient(180deg, transparent 55%, rgba(246,234,218,.9) 100%);
}

/* Pasos */
.he-pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px }
.he-paso{ text-align:center; padding:8px }
.he-paso-num{
  width:52px; height:52px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--he-oro); border-radius:50%;
  font-family:var(--he-serif); font-size:1.4rem; color:var(--he-oro-texto);
  background:var(--he-oro-tenue);
}
.he-paso h3{ font-size:1.12rem; margin:0 0 9px }
.he-paso p{ color:var(--he-suave); font-size:.93rem; margin:0 }

/* =====================================================================
   PLANES
   ===================================================================== */

.he-planes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:26px; align-items:start;
}

.he-plan{
  background:var(--he-panel); border:1px solid var(--he-line);
  border-radius:var(--he-radio); padding:30px 26px;
  display:flex; flex-direction:column; position:relative;
  transition:var(--he-trans);
}
.he-plan:hover{ transform:translateY(-3px); box-shadow:var(--he-sombra) }
.he-plan-destacado{ border-color:var(--he-oro); box-shadow:0 0 0 2px rgba(200,144,56,.26) }

.he-plan-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--he-oro); color:var(--he-tinta);
  padding:4px 15px; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  white-space:nowrap;
}

.he-plan h3{ font-size:1.5rem; margin:0 0 4px }
.he-plan-sub{ color:var(--he-tenue); font-size:.88rem; margin:0 0 20px; min-height:2.6em }

.he-plan-precio{ margin-bottom:6px }
.he-plan-precio .monto{
  font-family:var(--he-serif); font-size:2.3rem; color:var(--he-tinta); line-height:1;
}
.he-plan-precio .periodo{ color:var(--he-suave); font-size:.88rem; margin-left:6px }
.he-plan-ext{ color:var(--he-tenue); font-size:.83rem; margin-bottom:22px }

.he-plan ul{ list-style:none; padding:0; margin:0 0 26px; flex:1 }
.he-plan li{
  position:relative; padding:7px 0 7px 26px;
  font-size:.92rem; color:var(--he-texto); line-height:1.5;
  border-bottom:1px solid var(--he-line-suave);
}
.he-plan li:last-child{ border-bottom:none }
.he-plan li::before{
  content:''; position:absolute; left:4px; top:15px;
  width:7px; height:7px; border-radius:50%; background:var(--he-oro);
}

/* =====================================================================
   PANEL DEL CLIENTE Y BACKOFFICE
   ===================================================================== */

.he-app{ display:flex; min-height:100vh; align-items:stretch }

.he-sidebar{
  width:252px; flex-shrink:0;
  background:var(--he-panel); border-right:1px solid var(--he-line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.he-sidebar-logo{ padding:20px; border-bottom:1px solid var(--he-line-suave) }
.he-sidebar-nav{ flex:1; overflow-y:auto; padding:14px 10px }

.he-sidebar-grupo{
  padding:16px 12px 7px; font-size:.68rem; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--he-tenue);
}
.he-sidebar-nav a{
  display:flex; align-items:center; gap:11px;
  padding:10px 13px; margin-bottom:2px; border-radius:var(--he-radio-sm);
  color:var(--he-suave); font-size:.92rem; transition:var(--he-trans);
}
.he-sidebar-nav a:hover{ background:var(--he-panel-alt); color:var(--he-texto) }
.he-sidebar-nav a.activo{
  background:var(--he-teal-tenue); color:var(--he-tinta);
  box-shadow:inset 2px 0 0 var(--he-oro);
}
.he-sidebar-nav a i{ width:18px; text-align:center; font-size:.95rem; flex-shrink:0 }
.he-sidebar-nav .cuenta{
  margin-left:auto; background:var(--he-oro); color:var(--he-tinta);
  border-radius:999px; padding:1px 7px; font-size:.72rem; font-weight:700;
}
.he-sidebar-pie{ padding:14px; border-top:1px solid var(--he-line-suave); font-size:.84rem }

.he-main{ flex:1; min-width:0; display:flex; flex-direction:column }

.he-topbar{
  display:flex; align-items:center; gap:16px;
  padding:14px 26px; border-bottom:1px solid var(--he-line);
  background:var(--he-bg-alt); position:sticky; top:0; z-index:20;
}
.he-topbar h1{ font-size:1.3rem; margin:0 }
.he-topbar-acciones{ margin-left:auto; display:flex; align-items:center; gap:11px }

.he-contenido{ padding:26px; max-width:1240px; width:100% }

.he-sidebar-toggle{
  display:none; background:none; border:1px solid var(--he-line);
  color:var(--he-texto); border-radius:8px; padding:6px 11px; cursor:pointer;
}

@media (max-width:980px){
  .he-sidebar{
    position:fixed; left:-260px; top:0; z-index:1050;
    transition:left var(--he-trans); box-shadow:var(--he-sombra);
  }
  .he-sidebar.abierto{ left:0 }
  .he-sidebar-toggle{ display:block }
  .he-velo{
    display:none; position:fixed; inset:0; background:rgba(0,52,58,.55); z-index:1040;
  }
  .he-velo.visible{ display:block }
  .he-contenido{ padding:18px }
}

/* Avatar */
.he-avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:1px solid var(--he-line); background:var(--he-panel-alt);
}
.he-avatar-letra{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--he-teal); color:var(--he-oro-palido);
  font-family:var(--he-serif); font-size:1.1rem; border:1px solid var(--he-teal);
}
.he-avatar-lg{ width:84px; height:84px; font-size:2rem }

/* =====================================================================
   TABLAS
   ===================================================================== */

.he-tabla-wrap{ overflow-x:auto; border-radius:var(--he-radio); border:1px solid var(--he-line) }

.he-tabla{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px }
.he-tabla th{
  text-align:left; padding:12px 15px; background:var(--he-panel-alt);
  font-size:.74rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--he-suave); font-weight:600; white-space:nowrap;
  border-bottom:1px solid var(--he-line);
}
.he-tabla td{ padding:13px 15px; border-bottom:1px solid var(--he-line-suave); vertical-align:middle }
.he-tabla tr:last-child td{ border-bottom:none }
.he-tabla tbody tr:hover{ background:var(--he-panel-alt) }
.he-tabla .num{ text-align:right; font-variant-numeric:tabular-nums }

/* =====================================================================
   PESTAÑAS
   ===================================================================== */

.he-tabs{
  display:flex; gap:4px; border-bottom:1px solid var(--he-line);
  margin-bottom:26px; overflow-x:auto; padding-bottom:1px;
}
.he-tab{
  padding:11px 19px; border:none; background:none; cursor:pointer;
  color:var(--he-suave); font-family:var(--he-sans); font-size:.93rem;
  border-bottom:2px solid transparent; white-space:nowrap; transition:var(--he-trans);
}
.he-tab:hover{ color:var(--he-texto) }
.he-tab.activo{ color:var(--he-tinta); border-bottom-color:var(--he-oro) }
.he-tab-panel{ display:none }
.he-tab-panel.activo{ display:block; animation:he-fade .22s ease }

@keyframes he-fade{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }

/* =====================================================================
   ESTADO VACIO
   ===================================================================== */

.he-vacio{ text-align:center; padding:62px 24px }
.he-vacio-icono{
  width:76px; height:76px; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(200,144,56,.38); border-radius:50%;
  font-size:1.9rem; color:var(--he-oro-texto); background:var(--he-oro-tenue);
}
.he-vacio h3{ margin:0 0 9px }
.he-vacio p{ color:var(--he-suave); max-width:430px; margin:0 auto 26px }

/* =====================================================================
   ESTADISTICAS
   ===================================================================== */

.he-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:16px }
.he-stat{
  background:var(--he-panel); border:1px solid var(--he-line);
  border-radius:var(--he-radio); padding:20px;
}
.he-stat-label{
  font-size:.73rem; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--he-tenue); margin-bottom:8px;
}
.he-stat-valor{
  font-family:var(--he-serif); font-size:2rem; color:var(--he-tinta); line-height:1;
}
.he-stat-pie{ font-size:.81rem; color:var(--he-suave); margin-top:7px }

/* =====================================================================
   INTEGRACIONES
   ===================================================================== */

.he-integracion{
  border:1px solid var(--he-line); border-radius:var(--he-radio);
  padding:22px; margin-bottom:18px; background:var(--he-panel);
}
.he-integracion-h{
  display:flex; align-items:center; gap:13px; margin-bottom:6px; flex-wrap:wrap;
}
.he-integracion-h h3{ margin:0; font-size:1.18rem }
.he-integracion-desc{ color:var(--he-suave); font-size:.89rem; margin:0 0 20px }

.he-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none }
.he-switch input{ position:absolute; opacity:0; width:0; height:0 }
.he-switch-pista{
  width:42px; height:23px; border-radius:999px;
  background:var(--he-line); position:relative; transition:var(--he-trans); flex-shrink:0;
}
.he-switch-pista::after{
  content:''; position:absolute; top:3px; left:3px;
  width:17px; height:17px; border-radius:50%;
  background:var(--he-suave); transition:var(--he-trans);
}
.he-switch input:checked + .he-switch-pista{ background:var(--he-teal) }
.he-switch input:checked + .he-switch-pista::after{ left:22px; background:#FFFFFF }
.he-switch-texto{ font-size:.88rem; color:var(--he-suave) }

.he-prueba-res{
  margin-top:13px; padding:11px 15px; border-radius:var(--he-radio-sm);
  font-size:.88rem; display:none; white-space:pre-wrap; word-break:break-word;
}
.he-prueba-res.visible{ display:block }

/* Marca */
.he-marca-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:18px }
.he-marca-item{
  border:1px solid var(--he-line); border-radius:var(--he-radio);
  padding:18px; background:var(--he-panel);
}
.he-marca-preview{
  height:112px; display:flex; align-items:center; justify-content:center;
  background:var(--he-bg-alt); border:1px dashed var(--he-line);
  border-radius:var(--he-radio-sm); margin-bottom:14px; overflow:hidden;
}
.he-marca-preview img{ max-width:88%; max-height:88px; object-fit:contain }
.he-marca-preview .vacio{ color:var(--he-tenue); font-size:.84rem }

/* =====================================================================
   PIE
   ===================================================================== */

/* El pie es el bloque teal de la barra inferior del banner. Es el unico
   fondo oscuro del sitio y por eso lleva el logo claro. */
.he-footer{
  background:var(--he-teal); border-top:3px solid var(--he-oro);
  padding:52px 0 26px; margin-top:auto; color:#E6EFEE;
}
.he-footer .he-logo-img{ height:46px }
.he-footer .he-logo-texto{ color:#FCF4EA }
.he-footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px;
  max-width:1180px; margin:0 auto; padding:0 20px;
}
.he-footer h4{
  font-family:var(--he-sans); font-size:.76rem; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--he-oro-palido); margin:0 0 15px; font-weight:600;
}
.he-footer ul{ list-style:none; padding:0; margin:0 }
.he-footer li{ margin-bottom:9px }
.he-footer a{ color:#CBDAD9; font-size:.91rem }
.he-footer a:hover{ color:var(--he-oro-palido) }
.he-footer .he-suave{ color:#CBDAD9 }
.he-footer-marca p{ color:#AEC4C3; font-size:.91rem; margin:14px 0 0; max-width:310px }
.he-footer-pie{
  max-width:1180px; margin:38px auto 0; padding:22px 20px 0;
  border-top:1px solid rgba(252,244,234,.18);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:#9FB8B7; font-size:.84rem;
}
@media (max-width:820px){
  .he-footer-grid{ grid-template-columns:1fr 1fr }
  .he-footer-marca{ grid-column:1 / -1 }
}

/* =====================================================================
   UTILIDADES
   ===================================================================== */

.he-centro{ text-align:center }
.he-derecha{ text-align:right }
.he-mt-0{ margin-top:0 } .he-mt-1{ margin-top:8px }  .he-mt-2{ margin-top:16px }
.he-mt-3{ margin-top:24px } .he-mt-4{ margin-top:34px }
.he-mb-0{ margin-bottom:0 } .he-mb-1{ margin-bottom:8px } .he-mb-2{ margin-bottom:16px }
.he-mb-3{ margin-bottom:24px } .he-mb-4{ margin-bottom:34px }
.he-flex{ display:flex; gap:12px; align-items:center }
.he-flex-entre{ display:flex; gap:12px; align-items:center; justify-content:space-between }
.he-flex-wrap{ flex-wrap:wrap }
.he-oculto{ display:none !important }

.he-divisor{
  display:flex; align-items:center; gap:14px;
  color:var(--he-tenue); font-size:.82rem; margin:24px 0;
}
.he-divisor::before,.he-divisor::after{
  content:''; flex:1; height:1px; background:var(--he-line);
}

@media print{
  .he-header,.he-footer,.he-sidebar,.he-topbar,.he-btn{ display:none !important }
  body{ background:#fff; color:#000 }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}