/* ===== Tokens ===== */
:root{
  --bg: #f7f9ff;              /* Lienzo claro */
  --bg-2: #f4f6ff;
  --text: #0e1625;
  --muted: #6b7280;
  --accent: #4f8cff;          /* Azul suave CTA */
  --accent-2: #8aa8ff;        /* Degradado CTA */
  --glass: rgba(255,255,255,0.65);
  --glass-brd: rgba(255,255,255,0.80);
  --glass-brd-2: rgba(180,195,255,0.35);
  --shadow-1: 0 10px 30px rgba(74, 108, 255, 0.08);
  --shadow-2: 0 30px 60px rgba(13, 32, 88, 0.10);
  --radius: 18px;
}

/* ===== Base ===== */
html,body { height: 100%; }
body{
  color: var(--text);
  background:
    radial-gradient(900px 700px at 80% 0%, rgba(114,131,255,0.12), transparent 60%),
    radial-gradient(900px 700px at 10% 20%, rgba(255,142,193,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 { color: var(--text); }
.lead, .text-secondary, .text-body-tertiary { color: var(--muted) !important; }
.fw-700 { font-weight: 700; }

    .hero-title{
  font-weight:800; line-height:1.05; margin:0 0 .6rem 0;
  letter-spacing:-0.02em; font-size: clamp(2.2rem, 5vw, 4.2rem);
}
.hero-title .brand{ display:block; opacity:.95 }
.hero-title .punch{
  display:block;
  background: linear-gradient(90deg,#4882fb,#1a1a1a 20%, #3bc1f6 60%, #1f8a95);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 6px 18px rgba(60,130,246,.18));
}
.hero-sub{
  max-width:48ch; opacity:.8; font-size:clamp(1rem,1.4vw,1.1rem);
}
.btn.shadow-soft{
  border:none; border-radius:18px; padding:.9rem 1.4rem;
  box-shadow: 0 14px 32px rgba(64,115,255,.22);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn.shadow-soft:hover{ transform: translateY(-2px); box-shadow:0 18px 40px rgba(64,115,255,.32) }



/* ===== Capa base de fondo (no interfiere con clicks) ===== */
.bg-ambient{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden; /* para los pseudo-elementos */
}

/* ---------- MODO 1: AURORA (recomendado) ---------- */
.bg-aurora{
  background:
    radial-gradient(900px 700px at 80% -10%, rgba(114,131,255,.22), transparent 60%),
    radial-gradient(900px 700px at 12% 20%, rgba(255,142,193,.16), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.bg-aurora::before,
.bg-aurora::after{
  content:""; position:absolute; inset:-20%;
  filter: blur(40px); opacity:.9; will-change: transform;
  background:
    radial-gradient(35% 25% at 30% 10%, rgba(77,191,245,.20), transparent 60%),
    radial-gradient(40% 28% at 80% 25%, rgba(157,89,255,.18), transparent 60%),
    radial-gradient(22% 18% at 10% 80%, rgba(45,212,191,.16), transparent 60%);
  animation: auroraMove 24s ease-in-out infinite alternate;
}
.bg-aurora::after{ animation-duration: 32s; animation-direction: alternate-reverse; opacity:.75; }
@keyframes auroraMove{
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-2%, -1%, 0) rotate(6deg)  scale(1.02); }
  100% { transform: translate3d(1.5%, 1%, 0) rotate(-4deg) scale(1.01); }
}

/* ---------- MODO 2: GRIDNOVA (retícula luminosa premium) ---------- */
.bg-gridnova{
  background:
    radial-gradient(900px 700px at 80% -10%, rgba(114,131,255,.18), transparent 60%),
    radial-gradient(900px 700px at 12% 20%, rgba(255,142,193,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.bg-gridnova::before{
  content:""; position:absolute; inset:0;
  background:
    /* líneas verticales y horizontales */
    repeating-linear-gradient( to right, rgba(150,170,255,.14) 0 1px, transparent 1px 28px),
    repeating-linear-gradient( to bottom, rgba(150,170,255,.14) 0 1px, transparent 1px 28px);
  mask-image: radial-gradient(80% 70% at 50% 35%, #000 40%, transparent 90%);
  opacity:.9;
  filter: blur(.2px) saturate(120%);
  animation: gridGlow 12s ease-in-out infinite alternate;
}
@keyframes gridGlow{
  from{ opacity:.7; filter: blur(.4px) saturate(115%); }
  to  { opacity:.95; filter: blur(.2px) saturate(130%); }
}

/* ---------- MODO 3: CONSTELLATION (puntos sutiles tipo estrellas) ---------- */
.bg-constellation{
  background:
    radial-gradient(900px 700px at 78% -8%, rgba(114,131,255,.18), transparent 60%),
    radial-gradient(900px 700px at 12% 20%, rgba(255,142,193,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.bg-constellation::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(#ffffff 0.7px, transparent 1px) 0 0/22px 22px,
    radial-gradient(#d7e0ff 0.7px, transparent 1px) 11px 11px/22px 22px;
  opacity:.45;
  mask-image: radial-gradient(75% 65% at 55% 35%, #000 45%, transparent 90%);
  animation: drift 30s linear infinite;
}
@keyframes drift{
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(22px,0,0); }
}

/* ---------- MODO 4: ORBITS (arcos en la esquina del globo) ---------- */
.bg-orbits{
  background:
    radial-gradient(900px 700px at 78% -8%, rgba(114,131,255,.20), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.bg-orbits::before{
  content:""; position:absolute; right:-8%; top:-22%;
  width: 64vmin; height: 64vmin; border-radius: 50%;
  background:
    conic-gradient(from 200deg at 50% 50%, rgba(114,131,255,.35), transparent 35%),
    conic-gradient(from 210deg at 50% 50%, rgba(45,212,191,.25), transparent 40%),
    conic-gradient(from 220deg at 50% 50%, rgba(157,89,255,.25), transparent 45%);
  mask: radial-gradient(circle at 50% 50%, transparent 70%, #000 72%, #000 78%, transparent 80%);
  filter: blur(10px) saturate(120%);
  opacity: .9;
  animation: orbitSweep 18s cubic-bezier(.22,1,.36,1) infinite alternate;
}
@keyframes orbitSweep{
  from { transform: rotate(-6deg) scale(1);   opacity:.85; }
  to   { transform: rotate( 6deg) scale(1.03); opacity:1;  }
}

/* --------- Accesibilidad: reduce motion --------- */
@media (prefers-reduced-motion: reduce){
  .bg-ambient::before,
  .bg-ambient::after{ animation: none !important; }
}


/* ===== Navbar ===== */
/*.navbar-wrapper { padding-top: .25rem; }*/
.navbar-brand { font-size: 1.25rem; }
.brand-mark{
  width: 16px; height: 28px; display:inline-block; border-radius: 6px;
  background: linear-gradient(180deg, #8aa8ff, #bfd0ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(79,140,255,.35);
}










/* ===== HEADER responsive ===== */
.site-header { background: transparent; }

/* Marca */
.brand-logo{ width:28px; height:28px; object-fit:contain; }
.brand-text{ font-size:1.25rem; letter-spacing:.01em; color:var(--text); }

/* Navbar glass + separación */
.navbar-wrapper .navbar{
  padding-block: .9rem;
  backdrop-filter: saturate(120%) blur(6px);
}

/* Menú centrado en desktop */
.nav-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.nav-center-list{ gap:2.25rem; }
.nav-center .nav-link{
  color:var(--text); font-weight:500; opacity:.9; padding:.25rem .25rem;
}
.nav-center .nav-link:hover{ opacity:1; text-decoration:none; }

/* Hamburguesa: tamaño cómodo (44px) y visible */
.navbar-toggler{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:10px;
}
.navbar-light .navbar-toggler-icon{
  /* aumentar tamaño del ícono nativo de Bootstrap */
  width: 1.6em; height: 1.6em;
  filter: contrast(0.9) brightness(0.6);
}

/* Offcanvas estilo vidrio */
.offcanvas{
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-left: 1px solid rgba(180,195,255,.35);
}
.offcanvas .nav-link{ color:var(--text); font-weight:600; }
.offcanvas .nav-link:active{ opacity:.7; }

/* En móviles ocultamos menú centrado (usamos offcanvas) */
@media (max-width: 991.98px){
  .nav-center{ display:none !important; }
  .navbar-wrapper .navbar{ padding-block: .45rem; }
  .brand-text{ font-size:1.1rem; }
}
/* ===== Animación suave del Offcanvas (override a Bootstrap) ===== */
.offcanvas-ui{
  /* Estado base (oculto) — partimos un poco fuera y con micro-scale */
  transform: translate3d(100%,0,0) scale(.985);
  opacity: .98;
  will-change: transform, opacity, box-shadow;
  transition:
    transform 420ms cubic-bezier(.22,1,.36,1),
    opacity   280ms ease-out,
    box-shadow 420ms ease;
}

/* Durante el show/hide Bootstrap usa showing/hiding: afinamos ambos */
.offcanvas-ui.showing,
.offcanvas-ui.show{
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
  box-shadow: -22px 0 60px rgba(13,32,88,.12), -8px 0 20px rgba(79,140,255,.08);
}
.offcanvas-ui.hiding{
  transform: translate3d(2%,0,0) scale(.995);
  opacity: .96;
}

/* Borde y halo lateral sutil al aparecer */
.offcanvas-ui::after{
  content:"";
  position:absolute; inset:0 100% 0 auto; width:22px; pointer-events:none;
  background: linear-gradient(90deg, rgba(147,173,255,.18), transparent 60%);
  filter: blur(6px);
  transition: inset 420ms cubic-bezier(.22,1,.36,1), opacity 420ms ease;
  opacity: .0;
}
.offcanvas-ui.show::after,
.offcanvas-ui.showing::after{
  inset:0 calc(100% - 6px) 0 auto;
  opacity:.9;
}

/* Backdrop más elegante (fade + ligera blur) */
.offcanvas-backdrop.fade{
  transition: opacity 420ms cubic-bezier(.22,1,.36,1);
}
.offcanvas-backdrop.show{
  background:
    radial-gradient(60% 80% at 20% 30%, rgba(114,131,255,.18), rgba(0,0,0,.24));
  backdrop-filter: blur(2px);
  opacity: 1; /* asegura el máximo */
}

/* Hover de links coherente con el panel */
.offcanvas-ui .nav-link{
  transition: background .18s ease, transform .08s ease, box-shadow .18s ease, color .18s ease;
}
.offcanvas-ui .nav-link:hover{
  background: rgba(233,239,255,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
  text-decoration: none;
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .offcanvas-ui,
  .offcanvas-backdrop.fade{
    transition: none !important;
  }
}











/* ===== Hero ===== */
.hero { position: relative; }
.hero-title{
  letter-spacing: -0.02em;
  margin-bottom: .25rem;
}
.btn-gradient{
  --bs-btn-color:#fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: transparent;
  padding-block: .8rem;
  border-radius: 999px;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 25px rgba(79,140,255,.25);
}
.btn-gradient:focus-visible { outline: 3px solid rgba(79,140,255,.35); outline-offset: 2px; }

/* Globo */
.globe-wrap{
  position: relative;
  width: clamp(260px, 48vw, 520px);
  aspect-ratio: 1/1;
  margin-right: 0;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 40% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.3) 100%),
    linear-gradient(180deg, rgba(147,173,255,.25), rgba(147,173,255,.05));
  box-shadow:
    inset 0 12px 28px rgba(255,255,255,.8),
    inset 0 -10px 30px rgba(140,160,255,.25),
    var(--shadow-1), var(--shadow-2);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.globe-wrap::after{
  content:"";
  position:absolute; inset:-15%; border-radius:50%;
  background: radial-gradient(60% 60% at 70% 70%, rgba(79,140,255,.25), transparent 60%);
  filter: blur(20px);
}
.globe-img{
  position: absolute;
  inset: 8%;
  width: 84%; height: 84%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: .9;
}

/* ===== Tarjetas Neumórficas ===== */
.neo-card{
  position: relative;
  background: var(--glass);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1px solid var(--glass-brd);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 20px 40px rgba(13,32,88,.08),
    0 5px 15px rgba(79,140,255,.08);
  backdrop-filter: blur(8px);
}
.neo-card .arrow-soft{
  position: absolute; right: 1rem; bottom: 1rem;
  color: var(--muted); opacity: .6; font-weight: 600;
}



/*==============================================================*/
/************************PRESENTACION ***************************/
/*==============================================================*/
.presentacion-card{ cursor:pointer; transition:transform .18s ease, box-shadow .2s ease; }
.presentacion-card:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(64,115,255,.15); }
.presentacion-card .arrow-soft{ transition:transform .2s ease, opacity .2s; }
.presentacion-card:hover .arrow-soft{ transform:translateX(4px); opacity:.9; }

.neo-modal{ border-radius:18px; box-shadow:0 16px 56px rgba(10,22,70,.25); }

.timeline{ list-style:none; padding-left:0; margin:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:10px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(79,151,255,.22), rgba(79,151,255,.06)); }
.timeline li{ position:relative; padding:0 0 14px 32px; }
.timeline li::before{ content:""; position:absolute; left:4px; top:3px; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at center,#7da7ff 0%,#4f97ff 45%,rgba(79,151,255,.3) 75%);
  box-shadow:0 6px 18px rgba(79,151,255,.35); }
.timeline h6{ margin:0 0 2px; font-weight:700; }
.timeline p{ margin:0; color:#6b7280; font-size:.95rem; }

.metric-card{ background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border:1px solid rgba(120,145,255,.16); backdrop-filter:blur(6px); }

.spark{ overflow:visible; }
.spark-bg{ stroke:rgba(90,110,160,.2); stroke-width:1; fill:none; }
.spark-line{ stroke:#4f97ff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:200; stroke-dashoffset:200; animation:draw 1.2s ease forwards; }
.spark-dot{ fill:#4f97ff; opacity:0; animation:pop .8s ease forwards 1.1s; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ to{ opacity:1; r:2.8; } }

/* ===== Paleta (ajústala si cambias el tema) ===== */
:root{
  --em-blue: #4F97FF;
  --em-blue-deep: #355CFF;
  --em-perla-1: #EEF2FF;
  --em-perla-2: #E6ECFF;
  --em-slate: #475569;
}

/* ===== Card ===== */
.presentacion-logo.pro{
  position: relative; 
  padding: 20px 22px 28px;
  transition: transform .18s ease, box-shadow .22s ease;
}
.presentacion-logo.pro:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(53,92,255,.18);
}

/* acento de fondo sutil (no interfiere) */
.presentacion-logo.pro::before{
  content:""; position:absolute; inset:-20% -30% auto auto; height:220px; width:220px;
  /*background: radial-gradient(120px 90px at 80% 30%, rgba(168,191,255,.25), transparent 60%);*/
  pointer-events:none;
}

/* ===== Stack de marca ===== */
.em-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; max-width:48ch; }

/* Tile “glass” para la torre */
.logo-tile{
 margin:0;
  place-items:center; position:relative; overflow:hidden;
  transition: transform .18s ease, box-shadow .22s ease;
}
.halo{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background: radial-gradient(80px 70px at 50% 40%, rgba(159,185,255,.55), rgba(79,151,255,.15) 60%, transparent 75%);
  filter: blur(6px);
}
.em-torre{
  height:auto; display:block;
  transition: transform .18s ease, filter .22s ease;
}

.em-word{
  font-family:"Bodoni Moda", serif; font-weight:700;
  letter-spacing:-.01em; line-height:1.05;
  font-size: clamp(24px, 3vw, 34px);
}
.em-underline{
  display:block; height:2px; width:34%;
  background: linear-gradient(90deg, var(--em-blue), var(--em-blue-deep));
  border-radius:2px; margin:6px 0 10px;
  transform-origin:left; transform:scaleX(.4);
  transition: transform .35s ease;
}
.presentacion-logo.pro:hover .em-underline{ transform:scaleX(1); }

/* Descripción */
.em-desc{ margin:0; color:var(--em-slate); font-weight:500; font-size:clamp(14px,1.4vw,16px); }

/* Flecha */
#presentacion .arrow-soft{
  position:absolute; right:16px; bottom:14px; opacity:.75;
  transition: transform .2s ease, opacity .2s;
}
.presentacion-logo.pro:hover .arrow-soft{ transform: translateX(4px); opacity:.95; }

/* Accesibilidad: sin mareos si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .presentacion-logo.pro:hover{ transform:none; box-shadow:inherit; }
  .presentacion-logo.pro:hover .logo-tile,
  .presentacion-logo.pro:hover .em-torre,
  .presentacion-logo.pro:hover .em-underline{ transform:none; }
}
/* ===== Modal: ¿Qué es Emirion? ===== */
.hero-quees{
  padding: .6rem 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(120,145,255,.18);
  box-shadow: 0 10px 22px rgba(64,115,255,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-title{
  font-weight: 800;
  letter-spacing: .01em;
}
.hero-strap{
  color: var(--muted);
  font-size: .98rem;
}

/* Pilares */
.pill-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
@media (max-width: 991.98px){ .pill-grid{ grid-template-columns: 1fr; } }

.pill-card{
  text-align: center;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(120,145,255,.18);
  box-shadow: 0 12px 28px rgba(64,115,255,.10), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.pill-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(64,115,255,.18);
  border-color: rgba(120,145,255,.28);
}

.icon-circle{
  width: 42px; height: 42px; margin: 0 auto .35rem;
  display:grid; place-items:center; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #fff 10%, #f4f6ff 55%, #eef2ff 100%);
  border: 1px solid rgba(120,145,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 18px rgba(64,115,255,.12);
}

.pill-title{ font-weight: 800; margin-bottom: .15rem; }
.pill-copy{ margin: 0; color: var(--muted); font-size: .92rem; }

/* Divider */
.divider-soft{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,145,255,.25), transparent);
  margin-top: .4rem;
}
/* Tooltip de los pilares */
.pill-tooltip{
  position: absolute;
  z-index: 9999;
  max-width: 240px;
  padding: .45rem .65rem;
  font-size: .78rem;
  background: #0e1625;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.pill-tooltip.show{
  opacity: 1;
  transform: translate(-50%, calc(-100% - 14px));
}
/* ===== Hero: ¿Qué es Emirion? ===== */
.hero-title-quees{
  font-size: 1.6rem;
  font-weight: 700;
  color: #0e1625;
  margin-bottom: .4rem;
  text-align: center;
  line-height: 1.3;
}
.hero-title-quees span{
  color: #355CFF; /* azul branding */
  font-weight: 800;
}

.hero-strap-quees{
  text-align: center;
  font-size: 1rem;
  color: #4b4f58;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 600px;
}

@media (max-width: 576px){
  .hero-title-quees{ font-size: 1.35rem; }
  .hero-strap-quees{ font-size: .92rem; }
}










/* Centrado total de la tarjeta Presentación */
#presentacion {
  display: flex;
  justify-content: center;   /* centra horizontal */
  align-items: center;       /* centra vertical */
  text-align: center;        /* alinea el texto */
  padding: 2.5rem 1.5rem;    /* más respiración */
}

/* Ajuste del stack de marca */
#presentacion .em-brand {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centra hijos */
  justify-content: center;
  gap: 1.2rem;               /* espacio uniforme */
  max-width: 380px;          /* ancho ideal de bloque */
}

/* Flecha se centra abajo */
#presentacion .arrow-soft {
  position: relative;
  margin-top: 1.5rem;
  right: auto;
  bottom: auto;
}



/**************PRINCIPIOS ***********************/

/* ===== Principios (grid + microinteracciones) ===== */
.principles-card .p-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 991.98px){ .principles-card .p-grid{ grid-template-columns: repeat(2, 1fr); } }

.p-item{ margin:0; text-align:center; cursor:pointer; }
.p-bubble{
  height:86px; display:grid; place-items:center; border-radius:18px;
  background: radial-gradient(120% 120% at 30% 20%, #fff 10%, var(--em-perla-1) 55%, var(--em-perla-2) 100%);
  border:1px solid rgba(120,145,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px rgba(64,115,255,.10);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.p-icon{ filter: drop-shadow(0 8px 18px rgba(79,140,255,.25)); transition: transform .2s ease; }
.p-caption{ margin-top:.55rem; font-weight:600; color: var(--text); opacity:.9; }

.p-item:hover .p-bubble{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 34px rgba(64,115,255,.18);
  border-color: rgba(120,145,255,.28);
}
.p-item:hover .p-icon{ transform: translateY(-1px) }

/* Modal detalles */
#modalPrincipios .modal-content{ padding: .6rem .6rem 1rem; }
#modalPrincipios .modal-header .modal-title{ letter-spacing:-.01em; }
#modalPrincipios .metric-card{ border-radius:16px; }
#modalPrincipios .badge{ font-size:.8rem; }

/* Botón CTA con resplandor suave */
#modalPrincipios #mp-cta{
  border-radius:14px; backdrop-filter: blur(4px);
  transition: transform .15s ease, box-shadow .2s ease;
}
#modalPrincipios #mp-cta:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(64,115,255,.22); }





/*================================*/
/********* HABILIDADES ***********/
/*================================*/
/* ===== Skills: chips activos ===== */
#skills-chips .chip { transition: transform .2s ease, box-shadow .2s ease, background .2s; }
#skills-chips .chip.active{
  background:#eef2ff; color:#3c4b99; border-color:rgba(79,140,255,.35);
  box-shadow: 0 8px 18px rgba(79,140,255,.18) inset, 0 6px 16px rgba(64,115,255,.10);
  transform: translateY(-1px);
}

/* ===== Skills: radial meter ===== */
.skills-radial{ width:110px; height:110px; position:relative; }
.radial{ width:100%; height:100%; }
.radial .r-bg{ fill:none; stroke: rgba(120,145,255,.22); stroke-width: 12; }
.radial .r-val{
  fill:none; stroke-width: 12; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  stroke-dasharray: 301.59; /* 2πr con r=48 */
  stroke-dashoffset: 301.59;
  filter: drop-shadow(0 6px 16px rgba(64,115,255,.25));
  transition: stroke-dashoffset .9s cubic-bezier(.22,1,.36,1);
}
.radial .r-txt{ font-size: 20px; font-weight: 800; fill: #0e1625; }

/* Detalle modal */
#modalSkill .timeline h6{ font-weight:700; }
#modalSkill .timeline p{ font-size:.95rem; }




/*================================*/
/********* LEGADO ***********/
/*================================*/


/* Toggle (reusa estilos previos) */
.legacy-card .toggle { display:flex; gap:.35rem; }
.legacy-card .tbtn{
  border:1px solid rgba(79,140,255,.25); background:rgba(255,255,255,.6);
  padding:.25rem .6rem; border-radius:999px; font-size:.8rem; cursor:pointer;
  transition:all .2s ease; backdrop-filter:saturate(1.2) blur(3px);
}
.legacy-card .tbtn.active{
  background:#eef2ff; color:#3c4b99; box-shadow:0 8px 18px rgba(79,140,255,.18) inset;
}

/* Radar (del bloque anterior) */
.radar-wrap { position:relative; width:100%; aspect-ratio:1/1; }
#lg-radar { width:100%; height:auto; }
#lg-radar .grid polygon{ fill:none; stroke:rgba(120,145,255,.25); stroke-width:1; }
#lg-radar .axes line{ stroke:rgba(120,145,255,.35); stroke-width:1; }
#lg-radar .area{
  fill:rgba(64,115,255,.18); stroke:rgba(64,115,255,.55); stroke-width:2;
  filter: drop-shadow(0 6px 14px rgba(64,115,255,.25));
  transition: all .6s cubic-bezier(.22,1,.36,1);
}
#lg-radar .point{
  fill:#fff; stroke:#3d5bff; stroke-width:2; r:4;
  filter: drop-shadow(0 2px 6px rgba(64,115,255,.35));
  transition: transform .15s ease;
}
#lg-radar .point:hover{ transform: scale(1.12); }
#lg-radar .lbl{
  font-size:.76rem; fill:#0e1625; font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.rtip{
  position:absolute; pointer-events:none; padding:.4rem .6rem; border-radius:10px;
  background:#0e1625; color:#fff; font-size:.8rem; box-shadow:0 8px 18px rgba(0,0,0,.25);
  transform:translate(-50%, calc(-100% - 10px));
}

/* Narrativa: bloques legibles y elegantes */
#lg-narrative .n-block{ 
  padding:.75rem .9rem; border-radius:16px; background:rgba(255,255,255,.65);
  border:1px solid rgba(120,145,255,.18); box-shadow:0 8px 22px rgba(64,115,255,.08);
  margin-bottom:.8rem;
}
#lg-narrative .n-kicker{
  display:inline-block; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  color:#3c4b99; background:#eef2ff; border:1px solid rgba(79,140,255,.25);
  padding:.2rem .5rem; border-radius:999px; margin-bottom:.35rem;
}
#lg-narrative .n-copy{ margin:0; color:var(--text); }
#lg-narrative .n-chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin: .4rem 0 0 0; padding:0; list-style:none; }
#lg-narrative .n-chips li{
  padding:.25rem .55rem; border-radius:999px; font-size:.82rem;
  background:rgba(240,245,255,.9); border:1px solid rgba(120,145,255,.22);
}
#lg-narrative .n-list{ margin:.35rem 0 0 1.1rem; }
#lg-narrative .n-metrics{ display:grid; grid-template-columns: 1fr 1fr; gap:.55rem; }
#lg-narrative .n-metric{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:.45rem; }
#lg-narrative .n-m-title{ font-size:.82rem; color:var(--muted); }
#lg-narrative .n-bar{ height:10px; border-radius:999px; background:rgba(210,220,255,.6); overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
#lg-narrative .n-bar > div{
  height:100%; background: linear-gradient(90deg, var(--em-blue), var(--em-blue-deep));
  box-shadow: 0 6px 14px rgba(79,140,255,.25) inset; transition: width .7s cubic-bezier(.22,1,.36,1);
}
#lg-narrative .n-bar.danger > div{ background: linear-gradient(90deg, #ff6a6a, #ff3b3b); }
#lg-narrative .n-val{ font-weight:700; font-size:.85rem; color:var(--text); }

/* Badges */
#lg-badges .badge{
  font-size:.78rem; border:1px solid rgba(79,140,255,.25); background:rgba(255,255,255,.65);
  color:#2c3a86;
}

/* Responsive */
@media (max-width: 420px){
  #lg-radar .lbl{ font-size:.7rem; }
  #lg-narrative .n-metrics{ grid-template-columns: 1fr; }
}




/*=================================================*/
/********************PROYECTOS *********************/
/* ===== Proyectos: Coverflow 3D ===== */
.proyectos-card{ overflow: hidden; }
.px-coverflow{
  position: relative; padding: .25rem 2.5rem 0; /* espacio para flechas */
  perspective: 1200px; user-select: none;
}
.px-track{
  display: grid; grid-auto-flow: column; gap: 14px;
  transform-style: preserve-3d; will-change: transform;
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
}
.px-slide{
  width: clamp(220px, 26vw, 320px); text-decoration: none;
  transform-origin: center center; transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.22,1,.36,1), filter .3s ease, opacity .3s ease;
  opacity: .92;
   position: relative; z-index: 1; 
}
.px-card{
  margin:0; overflow:hidden; border-radius:16px; background: rgba(255,255,255,.78);
  border:1px solid var(--glass-brd-2);
  box-shadow: 0 18px 36px rgba(13,32,88,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.px-card img{ display:block; width:100%; height: 180px; object-fit: cover; }
.px-meta{ padding:.8rem .9rem 1rem; color: var(--text); }
.px-title{ font-size:1.02rem; font-weight:800; margin:0 0 .2rem; letter-spacing:.01em; }
.px-desc{ margin:0 0 .55rem; color: var(--muted); font-size:.92rem; }
.px-tags .chip{ font-size:.78rem; padding:.3rem .6rem; }

/* Estados de profundidad (se asignan por JS) */
.px-slide.is-center{
  transform: translateZ(80px) scale(1.03);
  filter: saturate(1.05) drop-shadow(0 10px 28px rgba(64,115,255,.18));
  opacity: 1;
}
.px-slide.is-left  { transform: rotateY( -30deg) translateX(-12px) translateZ(0); }
.px-slide.is-right { transform: rotateY(  30deg) translateX( 12px) translateZ(0); }
.px-slide.is-far   { transform: translateZ(-120px) scale(.94); opacity:.75; }

/* Navegación */
.px-nav{
  position:absolute; top:42%; transform: translateY(-50%); z-index: 99 !important;
  width:38px; height:38px; border-radius: 999px; border:1px solid rgba(120,145,255,.25);
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  display:grid; place-items:center; font-size: 22px; line-height:1; color:#3c4b99;
  box-shadow: 0 8px 20px rgba(64,115,255,.12);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.proyectos-card, .px-coverflow, .px-track, .px-slide, .px-card{
  pointer-events: auto;
}
.px-prev{ left: .35rem; } .px-next{ right: .35rem; }
.px-nav:hover{ transform: translateY(-50%) scale(1.05); box-shadow: 0 12px 28px rgba(64,115,255,.18); }

/* Dots */
.px-dots{ display:flex; justify-content:center; gap:8px; margin:.6rem 0 .1rem; }
.px-dots button{
  width:8px; height:8px; border-radius:999px; border:0; background: rgba(120,145,255,.35);
  transition: transform .15s ease, background .2s ease;
}
.px-dots button[aria-current="true"]{ background:#355CFF; transform: scale(1.25); }


/* Accesibilidad / motion */
@media (prefers-reduced-motion: reduce){
  .px-track, .px-slide{ transition: none !important; }
}

/* Responsive */
@media (max-width: 576px){
  .px-coverflow{ padding: .25rem 2rem 0; }
  .px-card img{ height: 150px; }
}














/*=========================================================================================*/


/* ===== Hero Manifiesto Cinemático (mxh-) ===== */
.mxh-hero{ position:relative; overflow:hidden; padding:1.2rem 1.2rem 1rem; display:flex; flex-direction:column; gap:.75rem; min-height: 360px; }
.mxh-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(53,92,255,.18), transparent 60%),
    radial-gradient(120% 140% at 80% 100%, rgba(46,255,209,.12), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, rgba(255,215,64,.10), transparent 70%);
  filter: blur(12px);
}
.mxh-head{ position:relative; z-index:1; display:flex; justify-content:flex-end; }
.mxh-badges{ display:flex; gap:.4rem; flex-wrap:wrap; }

.mxh-stage{
  position:relative; z-index:1; display:grid; place-items:center; text-align:center;
  min-height: 220px; padding: .5rem .5rem 0;
}
.mxh-line{
  max-width: 28ch;
  font-weight: 900; letter-spacing: .01em; line-height: 1.05; margin: 0 auto;
  font-size: clamp(2rem, 6.2vw, 3.4rem);
  background: linear-gradient(180deg, #0b1e66 0%, #1b35a6 40%, #3b5cff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 6px 30px rgba(64,115,255,.14);
  transform: translateY(10px) scale(.98); opacity:0;
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s cubic-bezier(.22,1,.36,1);
}
.mxh-line small{
  display:block; margin-top:.6rem; font-weight:700; letter-spacing:.02em;
  font-size: clamp(.95rem, 2.2vw, 1.1rem); color:#334; opacity:.8;
}
.mxh-line.is-in{ transform:none; opacity:1; }

.mxh-foot{
  position:relative; z-index:1; display:flex; align-items:center; gap:.1rem;
  justify-content:space-between; padding-top:.4rem;flex-direction: column; 
}
/* 1) Centra los dots debajo del texto */
.mxh-foot{
  display: flex;
  flex-direction: column;   /* CTA arriba, dots abajo */
  align-items: center;      /* centrado horizontal */
  gap: .6rem;
  justify-content: center;  /* sin space-between */
}

/* 2) Si no quieres mostrar el CTA aún, ocúltalo */
.mxh-cta{ display: none; }

/* 3) Asegura dots centrados y planos */
.mxh-dots{ display:flex; justify-content:center; gap:8px; }
.mxh-dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(120,145,255,.35);
  display:inline-block; border:none; box-shadow:none; cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.mxh-dot[aria-current="true"]{ background:#355CFF; transform: scale(1.3); }


.mxh-cta{
  border:1px solid rgba(120,145,255,.35); border-radius:999px; padding:.6rem 1rem;
  background:rgba(255,255,255,.92); color:#1f2a7a; font-weight:800; letter-spacing:.02em;
  box-shadow: 0 10px 26px rgba(64,115,255,.12); transition: transform .15s ease, box-shadow .2s ease;
}
.mxh-cta:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(64,115,255,.18); }

.mxh-dots{ display:flex; gap:8px; }
.mxh-dot{
  width:8px; height:8px; border-radius:999px; background: rgba(120,145,255,.35);
  transition: transform .15s ease, background .2s ease;
}
.mxh-dot[aria-current="true"]{ background:#355CFF; transform: scale(1.25); }

@media (prefers-reduced-motion: reduce){
  .mxh-line{ transition:none; }
}











/* Chips */
.chip, .chip-ghost, .chip-ico{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .45rem .75rem;
  border-radius: 12px; font-weight: 600; font-size: .9rem;
}
.chip{ background: #eef2ff; color: #3c4b99; border: 1px solid rgba(79,140,255,.25); }
.chip-ghost{ background: rgba(255,255,255,.55); color: var(--muted); border: 1px solid var(--glass-brd-2); }
.chip-ico{ background: rgba(255,255,255,.7); border: 1px solid var(--glass-brd-2); color: var(--text); }
.chip-ico .ico-dot,
.chip-ico .ico-wave,
.chip-ico .ico-shield,
.chip-ico .ico-spark{
  width: 22px; height: 22px; border-radius: 999px; display:inline-block;
  background: linear-gradient(135deg, #dff, #b3d3ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 8px rgba(79,140,255,.25);
}

/* Mini “tarjeta dentro de tarjeta” */
.mini-card{
  background: rgba(255,255,255,.75);
  border-radius: 14px;
  border: 1px solid var(--glass-brd-2);
  padding: .8rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* Barchart minimal */
.bar{
  width: 18%;
  background: linear-gradient(180deg, #cfe0ff, #a8c0ff);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.h-25{ height: 28px; }
.h-50{ height: 50px; }
.h-75{ height: 72px; }
.h-100{ height: 96px; }

/* Line chart minimal */
.mini-chart{
  height: 84px; position: relative; overflow: hidden; border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(207,224,255,.55), rgba(207,224,255,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.mini-chart::before{
  content:"";
  position:absolute; left:-10%; right:-5%; bottom:18%;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #9fb8ff, #6e93ff);
  transform: rotate(-6deg);
  box-shadow: 0 8px 18px rgba(79,140,255,.25);
}

/* Otra línea ascendente para “Proyectos” */
.mini-line{
  height: 120px; border-radius: 12px; background: rgba(255,255,255,.7);
  border: 1px solid var(--glass-brd-2); position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.mini-line::before{
  content:"";
  position:absolute; left: -5%; right: -5%; bottom: 20%;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #a7c2ff, #5c86ff);
  transform: rotate(8deg);
  box-shadow: 0 8px 18px rgba(79,140,255,.25);
}

/* Quote */
.quote{
  padding: .75rem 1rem; border-left: 4px solid #d8e2ff; color: var(--muted);
  background: rgba(255,255,255,.55); border-radius: 12px; border: 1px solid var(--glass-brd-2);
}

/* Lista de “chips” anchos */
.list-pill{
  display:inline-block; height: 12px; width: 18%;
  background: rgba(210,220,255,.9);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}






/* ===== Footer ===== */
.site-footer { opacity: .95; }

/* ===== Helpers y Responsivo ===== */
.py-lg-6{ padding-top:4.5rem !important; padding-bottom:4.5rem !important; }
@media (max-width: 991.98px){
  .hero-title{ font-size: 2.3rem; }
  .globe-wrap{ margin-top: .5rem; }
}
@media (min-width: 992px){
  .hero-title{ font-size: 3.25rem; }
}