:root{
  --navy:#071426;
  --navy2:#0a1c30;
  --navy3:#0d2339;
  --blue:#1687df;
  --green:#55dfa9;
  --text:#10263b;
  --muted:#687c90;
  --line:#dce5eb;
  --bg:#f4f7f9;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color:var(--text);
  background:#fff;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(1180px,calc(100% - 64px));
  margin:0 auto;
}


/* HEADER */

.dev-header{
  height:82px;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(7,20,38,.97);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand img{
  display:block;
  width:245px;
  max-height:52px;
  object-fit:contain;
}

.back-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  border:1px solid rgba(85,223,169,.35);
  border-radius:8px;
  color:#d8e2eb;
  font-size:12px;
  font-weight:700;
  transition:.2s ease;
}

.back-link span{
  color:var(--green);
}

.back-link:hover{
  background:rgba(85,223,169,.07);
  border-color:rgba(85,223,169,.6);
}


/* HERO */

.dev-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(22,135,223,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 15% 90%,
      rgba(85,223,169,.08),
      transparent 28%
    ),
    var(--navy);
}

.dev-hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.055;
  background-image:
    linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);
  background-size:65px 65px;
}

.hero-grid{
  position:relative;
  z-index:1;
  min-height:610px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:90px;
  align-items:center;
  padding-top:65px;
  padding-bottom:65px;
}

.eyebrow{
  color:var(--green);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.8px;
}

.eyebrow.dark{
  color:#1687df;
}

.hero-copy h1{
  margin:15px 0 15px;
  font-size:clamp(55px,6vw,82px);
  line-height:.91;
  letter-spacing:-4px;
}

.role{
  margin-top:22px;
  color:#fff;
  font-size:18px;
  font-weight:750;
}

.company-name{
  margin-top:7px;
  color:#55dfa9;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

.hero-description{
  max-width:650px;
  margin:28px 0 0;
  color:#9eb0c3;
  font-size:16px;
  line-height:1.75;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:32px;
}

.button{
  padding:13px 18px;
  border-radius:7px;
  font-size:12px;
  font-weight:750;
}

.button.primary{
  background:#55dfa9;
  color:#071426;
}

.button.secondary{
  border:1px solid rgba(255,255,255,.16);
  color:#dce6ef;
}


/* PROFILE VISUAL */

.profile-frame{
  position:relative;
  min-height:390px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );
  box-shadow:0 30px 80px rgba(0,0,0,.20);
}

.profile-frame::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  border:1px solid rgba(85,223,169,.18);
  box-shadow:
    0 0 0 35px rgba(22,135,223,.025),
    0 0 0 70px rgba(85,223,169,.018);
}

.profile-placeholder{
  position:relative;
  z-index:2;
  width:210px;
  height:210px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border-radius:50%;
  background:#0a1d31;
  border:1px solid rgba(85,223,169,.26);
}

.profile-placeholder>span{
  color:#55dfa9;
  font-size:50px;
  font-weight:800;
  letter-spacing:-3px;
}

.profile-placeholder strong{
  max-width:150px;
  margin-top:8px;
  font-size:12px;
}

.profile-placeholder small{
  max-width:160px;
  margin-top:6px;
  color:#71869b;
  font-size:9px;
}

.profile-status{
  position:absolute;
  left:25px;
  bottom:23px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#7f94a9;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
}

.profile-status span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#55dfa9;
  box-shadow:0 0 10px rgba(85,223,169,.6);
}


/* PROFILE */

.profile-section{
  padding:90px 0;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(22,135,223,.045),
      transparent 30%
    ),
    #fff;
}

.profile-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
}

.profile-section h2,
.projects-section h2,
.professional-contact h2{
  margin:13px 0 0;
  font-size:clamp(38px,4vw,54px);
  line-height:1.04;
  letter-spacing:-2px;
}

.profile-text p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}

.skills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}

.skills span{
  padding:8px 10px;
  border:1px solid #d8e3ea;
  border-radius:6px;
  background:#f7fafc;
  color:#425b72;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.45px;
}


/* PROJECTS */

.projects-section{
  padding:90px 0;
  background:
    linear-gradient(180deg,#f1f5f8,#f7f9fb);
}

.section-heading{
  max-width:780px;
  margin-bottom:42px;
}

.section-heading p{
  max-width:680px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.project-card{
  min-height:300px;
  position:relative;
  padding:32px;
  background:#fff;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.project-card.featured{
  background:#0a1c30;
  color:#fff;
}

.project-number{
  position:absolute;
  right:27px;
  top:25px;
  color:#9aa9b8;
  font-size:10px;
  font-weight:900;
}

.project-type{
  color:#1687df;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.featured .project-type{
  color:#55dfa9;
}

.project-card h3{
  margin:38px 0 13px;
  font-size:27px;
}

.project-card p{
  max-width:470px;
  color:#697d91;
  font-size:14px;
  line-height:1.65;
}

.featured p{
  color:#9aabbd;
}

.project-card a{
  display:inline-block;
  margin-top:17px;
  color:#1687df;
  font-size:11px;
  font-weight:800;
}

.featured a{
  color:#55dfa9;
}


/* CONTACT */

.professional-contact{
  padding:90px 0;
  color:#fff;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(22,135,223,.13),
      transparent 30%
    ),
    #08182a;
}

.contact-heading{
  max-width:750px;
}

.contact-heading p{
  max-width:650px;
  color:#91a5b9;
  font-size:15px;
  line-height:1.7;
}

.social-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:42px;
}

.social-card{
  min-height:92px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:17px;
  align-items:center;
  padding:20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  transition:.2s ease;
}

.social-card:hover{
  transform:translateY(-2px);
  border-color:rgba(85,223,169,.32);
  background:rgba(255,255,255,.045);
}

.social-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:rgba(85,223,169,.08);
  color:#55dfa9;
  font-size:11px;
  font-weight:900;
}

.social-card strong,
.social-card small{
  display:block;
}

.social-card strong{
  font-size:13px;
}

.social-card small{
  margin-top:4px;
  color:#72879c;
  font-size:11px;
}

.social-card b{
  color:#55dfa9;
}


/* FOOTER */

.dev-footer{
  padding:30px 0;
  background:#050f1c;
  border-top:1px solid rgba(255,255,255,.07);
  color:#657a8f;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  font-size:11px;
}

.footer-inner>div:first-child{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-inner strong{
  color:#8ea0b2;
  font-size:10px;
  letter-spacing:.7px;
}


/* RESPONSIVE */

@media(max-width:900px){

  .hero-grid,
  .profile-grid{
    grid-template-columns:1fr;
  }

  .hero-grid{
    gap:45px;
  }

  .profile-grid{
    gap:35px;
  }

  .profile-frame{
    min-height:340px;
  }
}

@media(max-width:620px){

  .container{
    width:min(100% - 28px,1180px);
  }

  .dev-header{
    height:72px;
  }

  .brand img{
    width:190px;
  }

  .back-link{
    padding:9px 11px;
    font-size:10px;
  }

  .hero-grid{
    min-height:auto;
    padding-top:55px;
    padding-bottom:55px;
  }

  .hero-copy h1{
    font-size:48px;
    letter-spacing:-2.5px;
  }

  .profile-section,
  .projects-section,
  .professional-contact{
    padding:65px 0;
  }

  .project-grid,
  .social-grid{
    grid-template-columns:1fr;
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .footer-inner>div:first-child{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
}

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *{
    transition:none !important;
  }
}


/* ==========================================================
   EDUARDO CABRAL MARTÍNEZ — PROFILE VISUAL V2
   Fotografía real + firma tecnológica ECM
   ========================================================== */

.profile-frame{
  min-height:430px;
  overflow:hidden;
  isolation:isolate;
  justify-content:flex-start;
  padding:20px;
}

/* Anula el aro decorativo central de V1 */
.profile-frame::before{
  width:360px;
  height:360px;
  right:-100px;
  top:-100px;
  left:auto;
  border-color:rgba(85,223,169,.10);
  box-shadow:
    0 0 0 55px rgba(22,135,223,.025),
    0 0 0 110px rgba(85,223,169,.012);
}

.profile-photo-wrap{
  position:absolute;
  inset:20px;
  z-index:1;
  overflow:hidden;
  border-radius:11px;
  background:#0a1d31;
}

.profile-photo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgba(5,15,28,.10) 68%,
      rgba(5,15,28,.72) 100%
    );
}

.profile-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Firma ECM: conserva la identidad visual original */
.profile-signature{
  position:absolute;
  z-index:4;
  right:34px;
  bottom:34px;
  width:190px;
  min-height:124px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:17px 19px;
  border:1px solid rgba(85,223,169,.28);
  border-radius:12px;
  background:rgba(7,20,38,.90);
  box-shadow:0 16px 40px rgba(0,0,0,.30);
  backdrop-filter:blur(10px);
}

.profile-signature>span{
  color:#55dfa9;
  font-size:31px;
  line-height:1;
  font-weight:850;
  letter-spacing:-2px;
}

.profile-signature strong{
  margin-top:9px;
  color:#fff;
  font-size:10px;
  line-height:1.3;
}

.profile-signature small{
  margin-top:5px;
  color:#7f95aa;
  font-size:8px;
  line-height:1.4;
}

.profile-status{
  z-index:5;
  left:35px;
  bottom:35px;
  padding:8px 10px;
  border-radius:6px;
  background:rgba(7,20,38,.82);
  backdrop-filter:blur(8px);
}

@media(max-width:900px){

  .profile-frame{
    min-height:500px;
  }

}

@media(max-width:620px){

  .profile-frame{
    min-height:410px;
    padding:12px;
  }

  .profile-photo-wrap{
    inset:12px;
  }

  .profile-signature{
    right:24px;
    bottom:24px;
    width:170px;
    min-height:112px;
  }

  .profile-status{
    left:24px;
    bottom:24px;
  }

}

@media(max-width:440px){

  .profile-signature{
    right:20px;
    bottom:62px;
  }

  .profile-status{
    left:20px;
    bottom:20px;
  }

}


/* ==========================================================
   PROFILE VISUAL V3
   Corrección de proporción y composición fotográfica
   ========================================================== */

.profile-visual{
  display:flex;
  justify-content:flex-end;
}

.profile-frame{
  width:100%;
  max-width:500px;
  min-height:0;
  aspect-ratio:1 / 1;
  padding:18px;
  overflow:hidden;
}

/*
   La fotografía original es cuadrada.
   Se mantiene su relación de aspecto real.
*/
.profile-photo-wrap{
  inset:18px;
  border-radius:12px;
}

.profile-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  aspect-ratio:1 / 1;
}

/*
   Gradiente inferior únicamente para integrar
   los elementos gráficos, sin oscurecer el rostro.
*/
.profile-photo-wrap::after{
  background:
    linear-gradient(
      180deg,
      transparent 62%,
      rgba(5,15,28,.08) 75%,
      rgba(5,15,28,.55) 100%
    );
}

/*
   Firma ECM más compacta.
   Se comporta como sello tecnológico,
   no como segundo protagonista.
*/
.profile-signature{
  right:30px;
  bottom:30px;
  width:188px;
  min-height:118px;
  padding:16px 18px;
}

.profile-signature>span{
  font-size:30px;
}

.profile-status{
  left:30px;
  bottom:30px;
}


/* Notebook */
@media(max-width:1100px) and (min-width:901px){

  .hero-grid{
    grid-template-columns:1.12fr .88fr;
    gap:55px;
  }

  .profile-frame{
    max-width:450px;
  }

  .profile-signature{
    width:170px;
  }

}


/* Tablet */
@media(max-width:900px){

  .profile-visual{
    justify-content:center;
  }

  .profile-frame{
    width:min(100%,520px);
    min-height:0;
    aspect-ratio:1 / 1;
  }

}


/* Mobile */
@media(max-width:620px){

  .profile-frame{
    width:100%;
    min-height:0;
    aspect-ratio:1 / 1;
    padding:12px;
  }

  .profile-photo-wrap{
    inset:12px;
  }

  .profile-signature{
    right:22px;
    bottom:22px;
    width:165px;
    min-height:105px;
    padding:14px;
  }

  .profile-status{
    left:22px;
    bottom:22px;
  }

}



/* ==========================================================
   PROFILE VISUAL V4 — POSICIONES INVERTIDAS
   ECM = izquierda
   Desarrollo & Tecnología = derecha
   ========================================================== */

.profile-signature{
  left:30px;
  right:auto;
}

.profile-status{
  left:auto;
  right:30px;
}


/* Mobile */
@media(max-width:620px){

  .profile-signature{
    left:22px;
    right:auto;
  }

  .profile-status{
    left:auto;
    right:22px;
  }

}


/* Mobile pequeño */
@media(max-width:440px){

  .profile-signature{
    left:20px;
    right:auto;
    bottom:62px;
  }

  .profile-status{
    left:auto;
    right:20px;
    bottom:20px;
  }

}


/* ==========================================================
   PROJECTS — PREMIUM EFFECTS V1
   Profundidad, acentos tecnológicos y microinteracciones
   ========================================================== */

.projects-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(22,135,223,.075),
      transparent 27%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(85,223,169,.055),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #f0f5f8 0%,
      #f7f9fb 48%,
      #eef4f7 100%
    );
}

.projects-section::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-220px;
  top:80px;
  border-radius:50%;
  border:1px solid rgba(22,135,223,.07);
  box-shadow:
    0 0 0 70px rgba(22,135,223,.018),
    0 0 0 140px rgba(85,223,169,.012);
  pointer-events:none;
}

.project-grid{
  position:relative;
  z-index:2;
  overflow:hidden;
  border:1px solid rgba(15,45,72,.11);
  border-radius:16px;
  background:rgba(255,255,255,.58);
  box-shadow:
    0 24px 65px rgba(8,31,52,.07);
}

.project-card{
  position:relative;
  overflow:hidden;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    border-color .28s ease;
}

/* Acento superior */
.project-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  opacity:.72;
  background:
    linear-gradient(
      90deg,
      #1687df 0%,
      #55dfa9 100%
    );
  transform:scaleX(.18);
  transform-origin:left center;
  transition:
    transform .32s ease,
    opacity .32s ease;
}

/* Brillo ambiental muy sutil */
.project-card::after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-110px;
  bottom:-120px;
  border-radius:50%;
  background:rgba(22,135,223,.055);
  filter:blur(2px);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.project-card:hover{
  z-index:3;
  transform:translateY(-4px);
  box-shadow:
    0 20px 45px rgba(8,31,52,.11);
}

.project-card:hover::before{
  transform:scaleX(1);
  opacity:1;
}

.project-card:hover::after{
  opacity:1;
}

.project-card h3{
  transition:
    transform .25s ease,
    color .25s ease;
}

.project-card:hover h3{
  transform:translateX(3px);
}

.project-card a{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:
    transform .22s ease,
    opacity .22s ease;
}

.project-card a:hover{
  transform:translateX(4px);
}


/* GuaranIA — mantiene su carácter premium oscuro */
.project-card:first-child{
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(85,223,169,.08),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #071c30,
      #0a243a
    );
}

.project-card:first-child::before{
  background:
    linear-gradient(
      90deg,
      #55dfa9,
      #1687df
    );
}


/* TrackingPar */
.project-card:nth-child(2){
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(241,248,252,.96)
    );
}


/* TrackingPar Conductor */
.project-card:nth-child(3){
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(244,249,251,.96)
    );
}


/* ErenAI */
.project-card:nth-child(4){
  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(85,223,169,.055),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f4f9fb
    );
}


/* Número de proyecto */
.project-card .project-number{
  transition:
    color .25s ease,
    transform .25s ease;
}

.project-card:hover .project-number{
  transform:translateY(-2px);
}


/* Evitar movimiento innecesario en táctiles */
@media (hover:none){

  .project-card:hover{
    transform:none;
    box-shadow:none;
  }

  .project-card:hover h3,
  .project-card a:hover{
    transform:none;
  }

}


/* Respeto a usuarios con movimiento reducido */
@media (prefers-reduced-motion:reduce){

  .project-card,
  .project-card::before,
  .project-card::after,
  .project-card h3,
  .project-card a,
  .project-card .project-number{
    transition:none;
  }

}