/* ==========================================================================
   TICsPoint — v7.css
   Mobile-first UI layer: dynamic sections, stable header/footer, scoped hovers.
   Loaded AFTER styles.css + site.css.
   ========================================================================== */

:root{
  --tp-bg: #0F172A;
  --tp-surface: rgba(22, 31, 51, 0.72);
  --tp-border: #24304A;
  --tp-text: #F8FAFC;
  --tp-muted: #CBD5E1;
  --tp-cyan: #23D0EB;
  --tp-violet: #6c5ce7;
}

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

/* ---------------- Header ---------------- */
.tp-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(15, 23, 42, 0.72);
  border-bottom: 1px solid rgba(36, 48, 74, 0.55);
}
.tp-header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 16px;
}

.tp-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--tp-text); }
.tp-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--tp-cyan);
  box-shadow: 0 0 14px rgba(35,208,235,.55);
}
.tp-brand__text{ font-family:'Montserrat', system-ui, sans-serif; font-weight:900; letter-spacing:.02em; }
.tp-brand__accent{ color: var(--tp-cyan); }

.tp-navbtn{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:42px; height:42px;
  border-radius: 12px;
  border: 1px solid rgba(36,48,74,.7);
  background: rgba(15,23,42,.6);
  color: var(--tp-text);
}
.tp-navbtn__bars{
  width:18px; height:12px; position:relative; display:block;
}
.tp-navbtn__bars::before,
.tp-navbtn__bars::after,
.tp-navbtn__bars{
  background: transparent;
}
.tp-navbtn__bars::before,
.tp-navbtn__bars::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; border-radius:999px;
  background: rgba(248,250,252,.9);
}
.tp-navbtn__bars::before{ top:0; box-shadow: 0 5px 0 rgba(248,250,252,.9), 0 10px 0 rgba(248,250,252,.9); }
.tp-nav{ display:none; }
.tp-nav.is-open{ display:block; }

.tp-nav{
  position:absolute;
  left: 16px; right: 16px;
  top: 64px;
  border-radius: 16px;
  background: rgba(15,23,42,.95);
  border: 1px solid rgba(36,48,74,.8);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  padding: 10px;
  max-height: calc(100vh - 90px);
  overflow:auto;
}
.tp-nav__link{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(203,213,225,.95);
  font-weight: 600;
}
.tp-nav__link:hover{ background: rgba(35,208,235,.08); color: var(--tp-text); }
.tp-nav__link.is-active{ color: var(--tp-cyan); background: rgba(35,208,235,.12); }

.tp-nav__meta{
  display:flex; align-items:center; justify-content:flex-end;
  gap: 8px;
  padding: 10px 6px 4px;
  border-top: 1px solid rgba(36,48,74,.6);
  margin-top: 8px;
}
/* Language + Theme controls */
.tp-nav__meta{ display:flex; align-items:center; gap: 10px; }

/* tp-lang can be a <div> (group) or a <button> (legacy). We support both. */
.tp-lang{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(30, 41, 59, 0.30);
  color: rgba(203,213,225,.92);
}
.tp-lang button{
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-weight: 800;
  font-family: 'Montserrat', system-ui, sans-serif;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.2;
}
.tp-lang button:hover{ background: rgba(255,255,255,.05); }
.tp-lang button.is-active{
  background: linear-gradient(135deg, var(--tp-cyan), var(--tp-green));
  color: #041018;
}

/* Theme button (Moon/Sun) */
.tp-themebtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(30, 41, 59, 0.30);
  color: rgba(234,242,255,.92);
  cursor: pointer;
  transition: background var(--tp-fast), transform var(--tp-fast), filter var(--tp-fast);
}

/* Theme button: soporte iconos inline (sol / luna) */
.tp-themebtn__icon{ display:inline-flex; align-items:center; justify-content:center; }
.tp-themebtn svg{ width:16px; height:16px; display:block; }

/* Por defecto (dark): mostramos luna, ocultamos sol */
html[data-theme="dark"] .tp-themebtn .icon-sun{ display:none; }
html[data-theme="dark"] .tp-themebtn .icon-moon{ display:inline-flex; }

/* En light: mostramos sol, ocultamos luna */
html[data-theme="light"] .tp-themebtn .icon-sun{ display:inline-flex; }
html[data-theme="light"] .tp-themebtn .icon-moon{ display:none; }

/* Lang: helper para ocultar el idioma actual y dejar visible el alternativo */
.tp-lang button.is-hidden{ display:none !important; }
.tp-themebtn:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.tp-themebtn:active{ transform: translateY(0); }
.tp-themebtn i{ pointer-events:none; }

.tp-sep{ color: rgba(148,163,184,.7); }

/* Desktop nav */
@media (min-width: 920px){
  .tp-navbtn{ display:none; }
  .tp-header__row{ padding: 14px 16px; }
  .tp-nav{
    position: static;
    display:flex !important;
    align-items:center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow:none;
    max-height:none;
    overflow:visible;
  }
  .tp-nav__link{ display:inline-flex; padding: 10px 12px; }
  .tp-nav__meta{ border:0; margin:0; padding:0 0 0 8px; }
}

/* ---------------- Footer ---------------- */
.tp-footer{
  margin-top: 26px;
  border-top: 1px solid rgba(36,48,74,.55);
  background: rgba(15,23,42,.65);
  backdrop-filter: blur(10px);
}
.tp-footer__inner{
  display:flex;
  flex-direction:column;
  gap: 16px;
  padding: 18px 16px;
}
.tp-footer__brand{ display:flex; align-items:center; gap:10px; }
.tp-footer__small{ margin: 0; color: rgba(203,213,225,.85); font-size: 13px; line-height: 1.4; }
.tp-footer__link{ color: var(--tp-cyan); text-decoration:none; }
.tp-footer__link:hover{ text-decoration: underline; }
.tp-footer__cta{ display:flex; gap: 10px; flex-wrap:wrap; }
.tp-footer__legal{ color: rgba(148,163,184,.75); font-size: 12px; margin-top: 6px; }

@media (min-width: 920px){
  .tp-footer__inner{ flex-direction:row; align-items:flex-start; justify-content:space-between; }
  .tp-footer__right{ text-align:right; }
}

/* ---------------- Buttons (user spec) ---------------- */
.btn-primary{
  background: linear-gradient(135deg, #23D0EB 0%, #6c5ce7 100%);
  color: #F8FAFC;
  padding: 14px 32px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(35, 208, 235, 0.30);
  position: relative;
  overflow: hidden;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(108, 92, 231, 0.50);
  background: linear-gradient(135deg, #6c5ce7 0%, #23D0EB 100%);
}
.btn-primary::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.30), transparent);
  transition: left 0.5s ease;
}
.btn-primary:hover::before{ left: 100%; }

.btn-secondary{
  background-color: transparent;
  color: #23D0EB;
  padding: 14px 32px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid #24304A;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.btn-secondary:hover{
  background-color: rgba(35, 208, 235, 0.10);
  border-color: #23D0EB;
  color: #23D0EB;
  box-shadow: 0 4px 15px rgba(35, 208, 235, 0.20);
  transform: translateY(-2px);
}

/* Make CTAs mobile-friendly */
@media (max-width: 520px){
  .btn-primary, .btn-secondary{ width: 100%; }
  .tp-footer__cta{ flex-direction:column; }
}

/* ---------------- Dynamic sections (cards, timeline) ---------------- */

/* Reduce excessive spacing from old css without breaking hero */
.section{ padding: 34px 0 !important; }
@media (max-width: 520px){ .section{ padding: 26px 0 !important; } }

/* Scoped cards with hover. Remove any top accent line artifacts. */
.cards{ display:grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px){ .cards{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.card{
  background: rgba(22,31,51,.55);
  border: 1px solid rgba(36,48,74,.7);
  border-radius: 16px;
  padding: 18px 18px;
  position: relative;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
/* Kill the "top line" if any legacy pseudo-element exists */
.card::before{ content:none !important; display:none !important; }

.card:hover{
  transform: translateY(-4px);
  border-color: rgba(35,208,235,.55);
  background: rgba(22,31,51,.72);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(35,208,235,.08);
}

.card-title{
  font-family:'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  font-size: 18px;
  color: var(--tp-text);
  margin-bottom: 8px;
}
.card-text{ color: rgba(203,213,225,.85); font-size: 14px; line-height: 1.55; margin:0; }

/* Services (page) – reduce hierarchy noise, add subtle icon */
.service-card{ padding-top: 22px; }
.service-icon{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(35,208,235,.12);
  color: rgba(35,208,235,.95);
  box-shadow: inset 0 0 0 1px rgba(35,208,235,.14);
}
.service-icon i{ font-size: 16px; }
.service-title{
  font-family:'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  font-size: 18px;
  color: var(--tp-text);
  margin: 14px 0 8px;
}
.service-text{ color: rgba(203,213,225,.85); font-size: 14px; line-height: 1.6; margin:0; }

/* Light theme: ensure service card text is readable */
html[data-theme="light"] .service-text{
  color: rgba(15, 23, 42, 0.78);
}

/* Light theme: service card titles must be readable on white cards */
html[data-theme="light"] .service-title{
  color: #0F172A;
}

html[data-theme="light"] .service-icon{
  background: rgba(108,92,231,.12);
  color: #6c5ce7;
  box-shadow: inset 0 0 0 1px rgba(108,92,231,.18);
}

/* Kicker with dot (restore impact) */
.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-family:'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(203,213,225,.8);
}
.kicker::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(35,208,235,.95);
  box-shadow: 0 0 14px rgba(35,208,235,.45);
}

/* Section title impact */
.section-title, .h2{
  font-family:'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.section-subtitle, .muted{
  color: rgba(203,213,225,.78);
}

/* Alerts (contact form) */
.tp-alert{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.28);
  color: rgba(248,250,252,.92);
  font-size: 13px;
  line-height: 1.45;
}
.tp-alert--success{ border-color: rgba(77,182,158,.45); box-shadow: 0 0 0 1px rgba(77,182,158,.10); }
.tp-alert--error{ border-color: rgba(239,68,68,.40); box-shadow: 0 0 0 1px rgba(239,68,68,.08); }
html[data-theme="light"] .tp-alert{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.10);
  color: rgba(15,23,42,.82);
}

/* Timeline inspired by your example */
.section-head{ margin-bottom: 18px; }
.timeline{
  margin-top: 16px;
  position: relative;
  display:grid;
  gap: 14px;
}
.timeline::before{
  content:"";
  position:absolute;
  left: 22px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(36,48,74,.8);
}
.tstep{
  position:relative;
  padding-left: 54px;
}
.ticon{
  position:absolute;
  left: 0;
  top: 6px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(36,48,74,.85);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 8px rgba(15,23,42,.85);
  color: rgba(203,213,225,.92);
}
.tnum{
  position:absolute;
  left: 30px;
  top: 2px;
  width: 22px; height: 22px;
  border-radius: 999px;
  font-family:'Montserrat', system-ui, sans-serif;
  font-weight: 900;
  font-size: 11px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(36,48,74,.9);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--tp-text);
}
.tcard{
  background: rgba(22,31,51,.50);
  border: 1px solid rgba(36,48,74,.7);
  border-radius: 16px;
  padding: 14px 14px;
}
.tcard h3{
  margin: 0 0 6px;
  font-family:'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--tp-text);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(148,163,184,.95);
  margin-bottom: 8px;
}
.deliverable{
  margin-top: 10px;
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 10px;
}
.deliverable small{
  display:block;
  color: rgba(100,116,139,.9);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  font-size: 10px;
  margin-bottom: 4px;
}
.deliverable span{ color: rgba(226,232,240,.95); font-weight: 700; font-size: 13px; }

/* Step accent colors (like your example) */
.step-1 .ticon{ border-color: rgba(96,165,250,.7); color: #60a5fa; box-shadow: 0 0 0 8px rgba(15, 23, 42, 0), 0 0 18px rgba(96,165,250,.15); }
.step-1 .tnum{ background: #60a5fa; color: #0f172a; border-color: rgba(96,165,250,.35); }

.step-2 .ticon{ border-color: rgba(129,140,248,.7); color: #818cf8; box-shadow: 0 0 0 8px rgba(15, 23, 42, 0), 0 0 18px rgba(129,140,248,.15); }
.step-2 .tnum{ background: #818cf8; color: #0f172a; border-color: rgba(129,140,248,.35); }

.step-3 .ticon{ border-color: rgba(192,132,252,.7); color: #c084fc; box-shadow: 0 0 0 8px rgba(15, 23, 42, 0), 0 0 18px rgba(192,132,252,.15); }
.step-3 .tnum{ background: #c084fc; color: #0f172a; border-color: rgba(192,132,252,.35); }

.step-4 .ticon{ border-color: rgba(244,114,182,.7); color: #f472b6; box-shadow: 0 0 0 8px rgba(15, 23, 42, 0), 0 0 18px rgba(244,114,182,.15); }
.step-4 .tnum{ background: #f472b6; color: #0f172a; border-color: rgba(244,114,182,.35); }

.step-5 .ticon{ border-color: rgba(52,211,153,.7); color: #34d399; box-shadow: 0 0 0 8px rgba(15, 23, 42, 0), 0 0 18px rgba(52,211,153,.15); }
.step-5 .tnum{ background: #34d399; color: #0f172a; border-color: rgba(52,211,153,.35); }

/* Horizontal timeline on desktop */
@media (min-width: 1020px){
  .timeline{
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 16px;
    padding-top: 6px;
  }
  .timeline::before{
    left: 50px;
    right: 50px;
    top: 26px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .tstep{ padding-left: 0; }
  .ticon{
    position: relative;
    left: auto; top: auto;
    margin: 0 auto 10px;
  }
  .tnum{
    left: 55%;
    top: 0;
    transform: translateX(-50%);
  }
  .tcard{ text-align:center; min-height: 220px; display:flex; flex-direction:column; gap: 10px; }
  .deliverable{ margin-top: auto; }
}

/* Divider tighten */
.tp-divider{ opacity: .45; }


/* ==========================================================================
   TICsPoint Light Theme Patch (v8)
   - Works with app.js: html[data-theme="light"] and prefers-color-scheme
   - Keeps palette: uses existing tokens from styles.css (no new colors)
   ========================================================================== */

html[data-theme="light"] .tp-header{
  background: rgba(248, 250, 252, 0.86);
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .tp-brand__text{ color: var(--color-text-primary, #0F172A); }
html[data-theme="light"] .tp-brand__accent{ color: var(--color-accent-violet, #6c5ce7); }

html[data-theme="light"] .tp-navbtn{
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .tp-navbtn__bars,
html[data-theme="light"] .tp-navbtn__bars::before,
html[data-theme="light"] .tp-navbtn__bars::after{
  background: rgba(15, 23, 42, 0.72);
}

html[data-theme="light"] .tp-nav{
  background: rgba(248, 250, 252, 0.96);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .tp-nav__link{
  color: var(--color-text-secondary, #334155);
}
html[data-theme="light"] .tp-nav__link:hover{
  background: rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .tp-nav__link.is-active{
  background: rgba(108, 92, 231, 0.10);
  border-color: rgba(108, 92, 231, 0.28);
  color: var(--color-text-primary, #0F172A);
}

html[data-theme="light"] .tp-lang{
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--color-text-secondary, #334155);
}
html[data-theme="light"] .tp-lang button.is-active{
  background: linear-gradient(135deg, var(--color-accent-violet, #6c5ce7), var(--color-accent-cyan, #22D3EE));
  color: #0B1220;
}

html[data-theme="light"] .tp-themebtn{
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--color-text-primary, #0F172A);
}
html[data-theme="light"] .tp-themebtn:hover{ background: rgba(15, 23, 42, 0.06); }

/* Cards / surfaces (keep the same structure, just invert contrast) */
html[data-theme="light"] .tp-card{
  background:
    radial-gradient(400px 240px at 10% 0%, rgba(34, 211, 238, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,0.03), rgba(15,23,42,0.01));
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .tp-card__title{ color: var(--color-text-primary, #0F172A); }
html[data-theme="light"] .tp-card__text{ color: var(--color-text-secondary, #334155); }


/* ==========================================================================
   v8.x MINI PATCH (visual): light theme tweaks
   - Brand accent: violet in light, cyan in dark
   - Muted text: improve contrast in light (matches body text hierarchy)
   ========================================================================== */

[data-theme="light"]{
  --tp-muted: rgba(15, 23, 42, 0.78);
}

[data-theme="light"] .tp-brand__accent{
  color: var(--tp-violet);
}

[data-theme="light"] .section-subtitle{ color: rgba(15, 23, 42, 0.78); }

/* ===== Profile photo (Contacto / Quién soy) ===== */
.tp-profile-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.tp-profile-row .tp-profile{ margin-top: 0; }

.tp-profile-meta{ min-width: 0; }

.tp-profile-name{
  font-family: var(--tp-font-heading);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

/* Nombre en light mode 
.tp-profile-name {
  color: #0f172a;
}   no usar porque si no no se ve el nombre */


.tp-profile{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  padding: 3px;
  background: rgba(35, 208, 235, 0.10);
  border: 1px solid rgba(35, 208, 235, 0.65);
  box-shadow: 0 0 0 1px rgba(35, 208, 235, 0.10), 0 10px 30px rgba(15, 23, 42, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.tp-profile__img{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px){
  .tp-profile{ width: 80px; height: 80px; }
}


.external-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.external-link:hover {
  text-decoration-thickness: 2px;
}