/* ====== Variables + base responsiva ====== */
:root{
  --gold:#B8943D;
  --goldSoft:#DBC584;
  --ink:#0F172A;
  --text:#0b1220;
  --muted:#6b7280;
  --bg:#ffffff;
  --bgSoft:#f9fafb;
  --card:#ffffff;
  --brd:#e5e7eb;
  --shadow:0 20px 60px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

/* Oculta el H1 del contenido del editor (p.ej. “Inicio”) */
#luisca-main > h1:first-child,
#luisca-main .post-title:first-child,
#luisca-main .wp-block-post-title:first-child{display:none !important}

/* ====== NAV ====== */
.lf-nav{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
.lf-nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;flex-wrap:wrap}
.lf-brand{display:flex;align-items:center;gap:12px;min-height:44px}
.lf-brand img{height:36px;flex:0 0 auto}
.lf-word{font-weight:800;letter-spacing:.08em;color:var(--ink)}
.lf-word small{font-weight:400;margin-left:6px;letter-spacing:.3em;color:var(--muted)}
.lf-nav nav{display:flex;flex-wrap:wrap;gap:10px}
.lf-nav a{padding:10px 12px;color:#374151;text-decoration:none;border-radius:10px}
.lf-nav a:hover{color:var(--gold);background:#fff7ea}
.lf-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ====== HERO ====== */
.lf-hero{padding:clamp(32px,6vw,72px) 20px;background:linear-gradient(180deg,#fff,#fafafa)}
.lf-hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,3vw,36px);align-items:center}
.lf-hero h1{font-size:clamp(32px,6.5vw,64px);line-height:1.06;margin:0;color:var(--text)}
.lf-hero h1 span{color:var(--gold)}
.lf-hero p{color:var(--muted);font-size:clamp(16px,2.4vw,20px);margin:.8rem 0 1.2rem}
.lf-btn{display:inline-block;background:var(--gold);color:#fff;padding:14px 22px;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:0 10px 25px rgba(184,148,61,.35);min-height:44px}
.lf-btn:hover{filter:brightness(.96)}
.lf-btn:focus-visible{outline:2px solid var(--goldSoft);outline-offset:3px}
.lf-hero-img{width:100%;height:auto;border-radius:16px;box-shadow:0 40px 80px rgba(0,0,0,.18);display:block}

/* ====== FEATURES ====== */
.lf-feats{max-width:1180px;margin:24px auto 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,28px);padding:0 20px}
.lf-feat{background:var(--card);padding:clamp(18px,2.4vw,28px);border-radius:16px;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease;will-change:transform}
.lf-feat:hover{transform:translateY(-4px);box-shadow:0 28px 70px rgba(0,0,0,.10)}
.lf-feat h3{margin:8px 0 6px;font-size:clamp(18px,2.4vw,22px);color:var(--text)}
.lf-feat p{color:var(--muted);font-size:clamp(14px,2vw,16px)}
.lf-feat .ic{width:28px;height:28px;color:var(--gold);display:block}

/* ====== GATE (Token) ====== */
.lf-gate{max-width:min(880px,92vw);margin:28px auto 12px;background:#FDF8EE;border:1px solid #F1E6CE;border-radius:14px;padding:clamp(16px,2.6vw,24px)}
.lf-gate .row{display:grid;grid-template-columns:1fr auto;gap:12px}
.lf-gate input{width:100%;padding:14px 12px;border:1px solid var(--brd);border-radius:10px;font-size:16px;min-height:44px}
.lf-gate .lf-btn{padding:12px 18px;border-radius:10px}
.lf-msg{margin-top:8px;color:var(--muted)}

/* ====== CALCULATOR ====== */
.lf-calc{max-width:1180px;margin:12px auto 80px;padding:0 20px}
.lf-sub{color:var(--muted);margin-top:-6px}
.lf-calc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(14px,2.2vw,28px);margin-top:18px}
.lf-card{background:var(--card);padding:clamp(16px,2.2vw,22px);border-radius:16px;box-shadow:var(--shadow)}
.lf-card-ttl{margin:0 0 10px}
.lf-inp{display:flex;align-items:center;gap:8px}
.lf-inp span{opacity:.7}
.lf-inp input{flex:1;padding:12px;border:1px solid var(--brd);border-radius:10px;min-height:44px}
label{display:block;margin:10px 0;color:var(--text)}
select{width:100%;padding:12px;border:1px solid var(--brd);border-radius:10px;min-height:44px;background:#fff}

.lf-kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}
.k{border-radius:12px;padding:16px;background:#F4F6F8}
.k.green{background:#EFFBF3}
.k.blue{background:#EEF5FF}
.k-name{color:var(--muted);font-size:14px}
.k-val{font-size:clamp(20px,3.2vw,28px);font-weight:800;color:var(--text)}

.lf-tabs{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.lf-tabs button{border:1px solid var(--brd);background:#fff;border-radius:10px;padding:10px 12px;cursor:pointer;min-height:40px}
.lf-tabs button.on{border-color:var(--gold);background:#FFF9EE}
.lf-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.tab{display:none}
.tab.on{display:block}

/* Canvas/Chart responsivo */
.lf-chart{position:relative;width:100%}
.lf-chart canvas{width:100% !important;height:auto !important;display:block}

/* Tabla con scroll en móvil */
.lf-table-wrap{width:100%;overflow:auto;border-radius:12px;border:1px solid var(--brd);background:#fff}
.lf-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.lf-table th,.lf-table td{padding:12px 14px;border-bottom:1px solid #f0f2f5;color:#111827;white-space:nowrap}
.lf-table thead th{position:sticky;top:0;background:#fff;z-index:1}
.lf-table .tr{text-align:right}
.lf-table .bold{font-weight:700}

/* Ocultar UI hasta validar token */
.lf-locked .lf-calc-ui{display:none}

/* ====== FOOTER ====== */
.lf-footer{padding:30px 20px;text-align:center;color:var(--muted);background:var(--bgSoft)}
.lf-footer a{color:#334155;text-decoration:none}
.lf-footer a:hover{color:var(--gold)}

/* ====== RESPONSIVE BREAKPOINTS ====== */
@media (max-width: 1024px){
  .lf-hero-grid{grid-template-columns:1fr}
  .lf-calc-grid{grid-template-columns:1fr}
}

@media (max-width: 768px){
  .lf-nav-inner{flex-direction:column;align-items:flex-start}
  .lf-nav nav{gap:6px}
  .lf-hero{padding:40px 16px}
  .lf-feats{grid-template-columns:1fr;gap:18px;padding:0 16px}
  .lf-calc{padding:0 16px}
  .lf-gate{margin:20px auto}
  .lf-gate .row{grid-template-columns:1fr;gap:10px}
  .lf-table th,.lf-table td{padding:10px 12px}
}

/* Accesibilidad / rendimiento */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ====== MOBILE: centrado profesional ====== */
@media (max-width: 768px){
  /* NAV */
  .lf-nav-inner{flex-direction:column;align-items:center;gap:12px;text-align:center}
  .lf-brand{justify-content:center}
  .lf-nav nav{width:100%;display:flex;justify-content:center;gap:8px}
  .lf-nav a{padding:10px 12px}

  /* HERO */
  .lf-hero{padding:40px 16px}
  .lf-hero-grid{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center}
  .lf-hero h1{font-size:clamp(28px,7vw,40px);line-height:1.1}
  .lf-hero p{margin:.6rem 0 1rem}
  .lf-hero-img{max-width:640px;width:100%}

  /* FEATURES */
  .lf-feats{grid-template-columns:1fr;gap:18px;padding:0 16px}
  .lf-feat{text-align:center}

  /* GATE / INPUTS / BUTTONS */
  .lf-gate{margin:20px auto;text-align:center}
  .lf-gate .row{grid-template-columns:1fr;gap:10px}
  .lf-inp{justify-content:center}
  label{display:block;text-align:left}
  .lf-kpis{grid-template-columns:1fr;gap:10px}

  /* CALCULATOR */
  .lf-calc{padding:0 16px}
  .lf-calc-grid{grid-template-columns:1fr;gap:18px}
  .lf-tabs{justify-content:center}

  /* TABLAS y CHARTS */
  .lf-table-wrap{margin-top:8px}
  .lf-chart canvas{width:100% !important;height:auto !important}

  /* FOOTER */
  .lf-footer{text-align:center}
}

/* ====== TABLET: centrado suave ====== */
@media (min-width: 769px) and (max-width: 1024px){
  .lf-nav-inner{flex-wrap:wrap;gap:12px}
  .lf-hero-grid{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
  .lf-feats{grid-template-columns:1fr 1fr}
  .lf-calc-grid{grid-template-columns:1fr;gap:20px}
}
@media (max-width: 768px){
  .lf-nav-inner{flex-direction:column;align-items:center;gap:12px;text-align:center}
  .lf-brand{justify-content:center}
  .lf-nav nav{width:100%;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
  .lf-hero{padding:40px 16px}
  .lf-hero-grid{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center}
  .lf-hero h1{font-size:clamp(28px,7vw,40px);line-height:1.12}
  .lf-feats{grid-template-columns:1fr;gap:18px;padding:0 16px}
  .lf-feat{text-align:center}
  .lf-calc{padding:0 16px}
  .lf-calc-grid{grid-template-columns:1fr;gap:18px}
  .lf-tabs{justify-content:center}
  .lf-gate{margin:20px auto;text-align:center}
  .lf-gate .row{grid-template-columns:1fr;gap:10px}
  .lf-kpis{grid-template-columns:1fr;gap:10px}
  .lf-footer{text-align:center}
}
/* Aviso de calls restantes */
.lf-calls{margin:8px 0 14px}
.lf-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:#ECFDF5;border:1px solid #BBF7D0;color:#065F46;
  padding:10px 12px;border-radius:12px;font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.04)
}
@media (max-width:768px){
  .lf-calls{display:flex;justify-content:center}
}

/* ====== Móvil (<= 768px) – hero con imagen arriba y todo centrado ====== */
@media (max-width: 768px){

  /* Navbar centrada en móvil */
  .lf-nav-inner{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .lf-nav nav{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  /* Hero a 1 columna y con la imagen ARRIBA */
  .lf-hero{ padding: 40px 16px; }
  .lf-hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: center;
    justify-items: center;   /* centra la imagen y el texto */
    text-align: center;      /* centra los textos */
  }
  /* mueve la imagen arriba del texto */
  .lf-hero-grid .lf-hero-img-wrap{ order: -1; }
  /* botón centrado */
  .lf-hero-grid .lf-btn{ margin: 8px auto 0; display: inline-block; }

  /* Features en columna, icono y textos centrados */
  .lf-feats{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 16px;
  }
  .lf-feat{
    text-align: center;
  }
  .lf-feat .ic{
    display: block;
    margin: 0 auto 8px;   /* centra el icono */
  }

  /* Ajustes generales ya existentes */
  .lf-calc{ padding: 0 16px; }
  .lf-gate{ margin: 20px auto; }
  .lf-gate .row{ grid-template-columns: 1fr; gap: 10px; }
  .lf-table th, .lf-table td{ padding: 10px 12px; }
}
@media (max-width: 1024px){
  .lf-hero-grid{ grid-template-columns: 1fr; }
  .lf-hero-grid .lf-hero-img-wrap{ order: -1; } /* opcional en tablet */
  .lf-calc-grid{ grid-template-columns: 1fr; }
}
/* ====== Redes sociales en footer ====== */
.lf-social{
  display:flex; gap:14px; justify-content:center; align-items:center;
  margin-bottom:8px;
}
.lf-soc{ display:inline-flex; width:28px; height:28px; }
.lf-soc svg{ width:28px; height:28px; display:block; }

/* Botón flotante de WhatsApp (aparece si configuraste enlace) */
.lf-wa-float{
  position:fixed; right:16px; bottom:16px; width:56px; height:56px;
  border-radius:50%; background:#25D366; box-shadow:0 10px 28px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.lf-wa-float svg{ width:30px; height:30px; }
.lf-wa-float:hover{ filter:brightness(.95); }

/* En móvil, todo centrado en footer */
@media (max-width:768px){
  .lf-footer{ text-align:center; }
  .lf-admin-links{ margin-top:6px; }
}
/* header */
.lf-nav { background:#fff; color:#000; border-bottom:1px solid #eee; }
.lf-nav-inner { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; }
.lf-brand img { height:40px; display:block; }

/* socials (común) */
.lf-socials { display:flex; gap:.9rem; color:#000; }
.lf-right { margin-left:auto; justify-content:flex-end; }

/* tamaño grande en header */
.lf-nav .lf-socials .lf-social { 
  width:44px; height:44px;        /* ícono “button” más grande */
}
.lf-nav .lf-socials .lf-social svg { 
  width:24px; height:24px;        /* tamaño del SVG */
}
@media (max-width: 1024px) {
  .lf-nav-inner { flex-direction: column; align-items: center; }
  .lf-brand { width:100%; display:flex; justify-content:center; }
  .lf-nav .lf-socials { margin-left:0 !important; align-self:center; justify-content:center; margin-top:.25rem; }
}
@media (max-width: 640px) {
  .lf-social { width:40px; height:40px; }
  .lf-social svg { width:22px; height:22px; }
}

/* estados */
.lf-social { display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:transparent; color:inherit; 
  transition:transform .15s ease; text-decoration:none;
}
.lf-social:hover { transform: translateY(-1px); }
.lf-social svg { fill: currentColor; }

/* base */
.lf-footer { background:#f8f9fb; color:#000; border-top:1px solid #eee; }

/* copy centrado absoluto + iconos derecha */
.lf-footer-inner {
  position: relative;
  padding: 1rem;
  min-height: 56px;                 /* asegura altura para centrar verticalmente */
}
.lf-copy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;               /* evita salto del copy */
}
.lf-footer .lf-socials {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: .9rem;
  color: #000;                       /* iconos negros */
  white-space: nowrap;               /* evita salto de iconos */
}
.lf-footer .lf-social { 
  width: 40px; height: 40px; 
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit; text-decoration: none;
}
.lf-footer .lf-social svg { width: 22px; height: 22px; fill: currentColor; }

/* móvil: apilar y centrar todo */
@media (max-width: 640px) {
  .lf-footer-inner { 
    position: static; 
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    min-height: unset;
  }
  .lf-copy, .lf-footer .lf-socials {
    position: static; transform: none; white-space: normal;
  }
}
/* Banner “pancarta” de bienvenida */
.lf-w-banner{
  position: relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:1rem 1.1rem;
  border:1px solid rgba(184,148,61,.28);                    /* dorado suave */
  background: linear-gradient(180deg,#FFFDF6 0%, #FBF4E6 100%);
  border-radius:16px;
  box-shadow: 0 12px 24px rgba(184,148,61,.10);
  margin: 0 0 14px 0;
  color:#0F172A; /* ink */
}
.lf-w-banner::before{
  content:""; position:absolute; inset:0 0 0 auto;
  width:6px; border-radius:0 16px 16px 0;
  background: linear-gradient(180deg,#CFAF62 0%, #B8943D 100%); /* listón dorado */
  opacity:.85;
}

.lf-w-left{display:flex; align-items:center; gap:.75rem;}
.lf-w-emoji{font-size:1.4rem}
.lf-w-text .lf-w-hello{font-weight:700; font-size:1.05rem; line-height:1.2;}
.lf-w-text .lf-w-sub{font-size:.92rem; opacity:.9; margin-top:.1rem;}
.lf-w-right{display:flex; align-items:center; gap:.35rem;}
.lf-w-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius:999px;
  background:#fff; color:#0F172A; border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 4px 10px rgba(15,23,42,.05);
  font-weight:600;
}
.lf-w-chip-ico{opacity:.9}

/* Responsive: pancarta centrada en mobile */
@media (max-width:640px){
  .lf-w-banner{flex-direction:column; text-align:center; padding:1rem .9rem;}
  .lf-w-right{justify-content:center;}
  .lf-w-banner::before{width:100%; height:6px; inset:auto 0 0 0; border-radius:0 0 16px 16px;} /* listón abajo en mobile */
}
/* Forzar oculto cuando tenga el atributo hidden/aria-hidden */
.lf-w-banner[hidden],
.lf-w-banner[aria-hidden="true"]{
  display: none !important;
}





/* ===== Cartera / Portfolio ===== */
.lf-portfolio{ padding: 26px 0 8px; background: linear-gradient(180deg,#fff 0%, #FCFAF4 100%); }
.lf-container{ max-width:1100px; margin:0 auto; padding:0 16px; }

.lf-port-head{ text-align:center; margin-bottom:16px; }
.lf-port-ttl{ font-size:28px; line-height:1.15; margin:0; color:#0F172A; letter-spacing:.3px; }
.lf-port-sub{ margin:6px 0 0; color:#4B5568; }

.lf-port-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .lf-port-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .lf-port-grid{ grid-template-columns: 1fr; } }

.lf-port-card{
  background:#fff; border:1px solid rgba(15,23,42,.08);
  border-radius:16px; box-shadow:0 10px 24px rgba(15,23,42,.06);
  overflow:hidden;
}
.lf-port-card-h{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; background:linear-gradient(180deg,#FFFDF6 0%, #FBF4E6 100%);
  border-bottom:1px solid rgba(184,148,61,.25);
}
.lf-port-card-h h3{ margin:0; font-size:16px; color:#0F172A; }
.lf-chip{
  font-size:12px; font-weight:700; color:#0F172A;
  padding:4px 8px; border-radius:999px; background:#fff;
  border:1px solid rgba(184,148,61,.38); box-shadow:0 4px 10px rgba(184,148,61,.12);
}
.lf-port-body{ padding:12px 14px 14px; }

.lf-legend{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.lf-legend li{ display:flex; align-items:center; gap:8px; color:#0F172A; }
.lf-legend .dot{ width:12px; height:12px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.06); }
.lf-legend .nm{ font-weight:600; }
.lf-legend .tkr{ margin-left:auto; font-weight:700; color:#6B7280; }

@media (max-width:640px){
  .lf-port-card-h{ flex-direction:column; align-items:flex-start; gap:6px; }
  .lf-legend .tkr{ margin-left:0; }
}

/* Tabs principales */
.lf-tabs-head{
  display:flex; gap:.5rem; border-bottom:1px solid #eee; margin:8px 0 12px;
}
.lf-tab-btn{
  appearance:none; border:1px solid #eee; background:#fff; color:#0F172A;
  padding:.55rem .9rem; border-radius:10px 10px 0 0; font-weight:600;
  transform:translateY(1px); cursor:pointer;
}
.lf-tab-btn.on{
  border-color:#B8943D; border-bottom-color:#fff; color:#0F172A;
  box-shadow:0 6px 14px rgba(184,148,61,.08) inset;
}
.lf-tab-pane{ display:none; }
.lf-tab-pane.on{ display:block; }

/* Cartera */
.lf-portfolio{ padding-top:.25rem; }
.lf-portfolio .lf-ttl{ margin:4px 0 4px; }
.lf-subtabs{ display:flex; gap:.5rem; margin:8px 0 12px; flex-wrap:wrap; }
.lf-subtab{
  appearance:none; border:1px solid #e9e7df; background:#fffdf6;
  color:#0F172A; padding:.45rem .75rem; border-radius:999px; cursor:pointer;
}
.lf-subtab.on{ border-color:#B8943D; background:#FBF4E6; }
.lf-subpane{ display:none; }
.lf-subpane.on{ display:block; }

.lf-legend{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:.35rem; }
.lf-legend li{ display:flex; align-items:center; gap:.5rem; color:#334155; }
.lf-legend li span{
  width:10px; height:10px; border-radius:2px; background:#cbd5e1; display:inline-block;
}
/* solo para estética – colorcitos escalonados */
#p-ai   .lf-legend li span:nth-child(1n){ background:#2b8ec6 }
#p-ai   .lf-legend li span:nth-child(2n){ background:#37b26f }
#p-commod .lf-legend li span:nth-child(1n){ background:#2b8ec6 }
#p-reit  .lf-legend li span:nth-child(1n){ background:#2b8ec6 }

.lf-note{ margin-top:8px; font-size:.95rem; color:#475569 }

/* Responsive */
@media (max-width:640px){
  .lf-tabs-head{ overflow:auto; }
  .lf-legend{ grid-template-columns: 1fr; }
}
/* Switch principal (segmentado) */
.lf-locked #lf-switch{ display:none !important; } /* siguen ocultos mientras haya lock */

.lf-switch{ display:flex; gap:.5rem; margin:.75rem 0 10px; }
.lf-seg{
  appearance:none; border:1px solid rgba(15,23,42,.12);
  background:#fff; color:#0F172A; padding:.5rem .9rem; border-radius:999px;
  font-weight:600; cursor:pointer; transition:.15s ease;
}
.lf-seg:hover{ transform: translateY(-1px); }
.lf-seg.on{ background:#B8943D; color:#fff; border-color:#B8943D; box-shadow:0 6px 16px rgba(184,148,61,.25); }

/* Cartera */
.lf-port .lf-port-head { display:flex; align-items:baseline; justify-content:center; gap:.5rem; }
.lf-port-sub{ font-size:.95rem; opacity:.85; }
.lf-port-legend{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:.6rem; }
.lf-port-legend .pf-item{ display:inline-flex; align-items:center; gap:.45rem; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:999px; padding:.3rem .6rem; }
.lf-port-legend .pf-item i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.lf-port-legend .pf-item b{ font-weight:700; margin-left:.2rem; }

.lf-port-nav{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:.6rem; }
.lf-navbtn{
  width:36px; height:36px; border-radius:999px; border:1px solid rgba(15,23,42,.12);
  background:#fff; cursor:pointer; font-size:18px; line-height:1; color:#0F172A;
}
.lf-dots{ display:flex; gap:.35rem; }
.lf-dots button{
  width:8px; height:8px; border-radius:999px; border:none; background:rgba(15,23,42,.25); cursor:pointer;
}
.lf-dots button.on{ background:#B8943D; }

@media (max-width:640px){
  .lf-port .lf-port-head{ flex-direction:column; gap:.25rem; }
}

/* Switch debajo del enunciado con buen espaciado */
.lf-switch{ 
  display:flex; gap:.5rem; margin:.75rem 0 14px; 
  justify-content:center;
}

/* Cartera: gráfico izquierda + data derecha (escritorio) */
.lf-port-split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;   /* gráfico un poco más grande */
  gap: 16px;
  align-items: center;
}

/* Ajustes del chart y la data */
.lf-port-split .lf-chart{
  width:100%; max-width:400px; margin:0 auto;
}
.lf-port-legend{
  display:flex; flex-direction:column; gap:.5rem;
}
.lf-port-legend .pf-item{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; border:1px solid rgba(15,23,42,.10);
  border-radius:12px; padding:.4rem .6rem; font-size:.95rem;
}

/* Responsive tablet/móvil: apilar (gráfico arriba, data abajo) */
@media (max-width: 900px){
  .lf-port-split{ grid-template-columns: 1fr; }
  .lf-port-legend{ align-items:flex-start; }
}
