/* ======= PALETA TREE (basada en #1D5D5F) ======= */
:root{
  --primary:          #1D5D5F; /* base buttons / headings           */
  --primary-40:       #2F989C; /* hover, backgrounds claros         */
  --primary-60:       #62CBCF; /* secciones destacadas              */
  --primary-dark:     #11393A; /* sombras / overlays                */
  --analog-1:         #1C5F40; /* íconos suaves                     */
  --analog-2:         #1C3B5F; /* detalles secundarios              */
  --triad-1:          #5C5F1C; /* bordes / acentos                  */
  --triad-2:          #5F1C5C; /* resaltados puntuales              */
  --complement:       #5F1F1C; /* CTA rojo oscuro                   */
  --neutral-light:    #F8F8F8;
}

/* ======= RESET / TIPOGRAFÍA ======= */
*,::before,::after{box-sizing:border-box}
body{
  font-family:'Montserrat',sans-serif;
  background:#fff;color:var(--primary-dark);margin:0;
  scroll-behavior:smooth;
}
h1,h2,h3,h4{font-weight:700;color:var(--primary)}
p{margin-bottom:1rem}

/* ======= NAVBAR ======= */
.navbar-brand img{height:46px}
.navbar-light .nav-link{color:var(--primary-dark);font-weight:600}
.navbar-light .nav-link:hover{color:var(--primary)}
.navbar{box-shadow:0 2px 6px rgba(0,0,0,.1)}

/* ======= HERO ======= */
/* ---------- HERO STYLES ---------- */
/* Hero full‐screen */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;              /* altura = 100% del viewport */
  display: flex;              /* para centrar su contenido */
  flex-direction: column;
  justify-content: center;    /* centra vertical */
  align-items: center;        /* centra horizontal */
  overflow: hidden;
  
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: url("img/fondo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* si prefieres video, pon un <video> aquí */
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.2);
}

/* Contenido */
.hero-content {
  position: relative;
  z-index: 1;
}
.text-highlight {
  color: #62CBCF;
}

/* Beneficios */
.hero-features li {
  width: 120px;
  text-align: center;
  color: #fff;
}
.hero-features i {
  color: #62CBCF;
}

/* Botones */
.btn-cta {
  background: #5F1F1C;
  border: none;
  padding: .9rem 2.2rem;
  border-radius: 50px;
  color: #fff;
  font-weight: 600;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.btn-cta:hover {
  background: #62CBCF;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(98,203,207,.45);
}
.btn-outline-light {
  border: 2px solid #fff;
  color: #fff;
  transition: background .3s, color .3s;
}
.btn-outline-light:hover {
  background: #fff;
  color: #5F1F1C;
}

/* Indicador scroll */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes bounce {
  0%,20%,50%,80%,100%{transform:translate(-50%,0)}
  40%{transform:translate(-50%,-8px)}
  60%{transform:translate(-50%,-4px)}
}
.animate-bounce {
  animation: bounce 2s infinite;
  color: #fff;
}

/* Responsivo */
@media (max-width: 991.98px) {
  .hero-features li { width: 100px; }
  .display-4 { font-size: 2.5rem; }
}

/* ======= SECCIONES GENERALES ======= */
section{padding:4.5rem 0}
.section-light{background:var(--neutral-light)}
.section-title{position:relative;margin-bottom:2.8rem;text-align:center}


/* ======= CARDS PLANES ======= */
.card-plan{
  border:2px solid var(--analog-2);border-radius:10px;
  transition:transform .3s,box-shadow .3s;
}
.card-plan:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(28,63,95,.15)}
.card-plan .card-title{color:var(--primary);font-weight:700}
.card-price{color:var(--primary);font-size:1.9rem;font-weight:700}

/* botón WhatsApp pequeño dentro de cards */
.btn-wsp{
  background:#25d366;border:none;color:#fff;font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1.1rem;border-radius:50px;
}
.btn-wsp:hover{background:#1faa54}

/* ======= PROCESO PASOS ======= */
.step{
  text-align:center;border:2px dashed var(--primary-40);border-radius:12px;padding:1.8rem;
  transition:transform .3s,background .3s
}
.step:hover{background:var(--primary-60);color:#fff;transform:translateY(-3px)}
.step .num{
  width:48px;height:48px;border-radius:50%;background:var(--primary);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 1rem
}

/* ======= PORTAFOLIO ======= */
.port-item{position:relative;border-radius:12px;overflow:hidden}
.port-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.port-item:hover img{transform:scale(1.07)}
.port-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
  opacity:0;transition:opacity .4s
}
.port-item:hover .port-overlay{opacity:1}

/* ======= SERVICIOS ======= */
.srv-card{
  background:#fff;border:2px solid var(--primary-40);border-radius:10px;height:100%;
  padding:2rem;transition:transform .3s,box-shadow .3s
}
.srv-card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(45,98,105,.15)}
.srv-card i{font-size:2.2rem;color:var(--primary-40);margin-bottom:1rem}

/* ======= CTA FINAL ======= */
.cta{
  background:var(--primary-40);color:#fff;text-align:center;padding:4rem 1rem
}
.cta .btn-cta{background:var(--triad-2)}

/* ======= FOOTER ======= */
footer{background:var(--primary-dark);color:#fff;text-align:center;padding:2.5rem 1rem}
footer a{color:var(--primary-60);text-decoration:none}
footer a:hover{text-decoration:underline}
/* Animación suave para todas las cards */
.card-plan{
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),
             box-shadow .45s;
}

/* Estado “glow” – se activa con JS */
.card-plan.led-glow{
  transform:scale(1.08);
  box-shadow:
    0 0 8px  rgba(0,255,234,.65),
    0 0 18px rgba(0,255,234,.45),
    0 0 28px rgba(0,255,234,.35);
  border-color:#00ffe0;                        /* borde cian-neón opcional */
}
/* ---------- TIMELINE ---------- */
.timeline{
  /* 1 col mobile · 2 col tablet · 4 col desktop */
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  position:relative;
  padding-left:15px;               /* espacio para línea en mobile */
}
.timeline::before{                 /* línea vertical en mobile */
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--primary),var(--primary-60));
  border-radius:2px;
}
@media(min-width:992px){           /* cambia a línea horizontal */
  .timeline{padding-left:0}
  .timeline::before{
    top:auto;left:0;right:0;bottom:calc(50% - 2px);height:4px;width:100%;
  }
}

/* ---------- CARD ---------- */
.step-card{
  background:#F8F8F8;border:2px solid var(--primary-40);
  border-radius:16px;padding:2.5rem 1.4rem;
  text-align:center;position:relative;overflow:hidden;
  transition:transform .45s,cubic-bezier(.34,1.56,.64,1),box-shadow .45s;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  opacity:0;transform:translateY(40px) scale(.94);
}

/* número circular */
.step-card::before {
    content: attr(data-step);
    position: absolute;
    top: 11px;
    left: 9px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    display: flex
;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px #fff;
}

/* icono */
.step-icon{
  font-size:2.6rem;color:var(--primary-60);margin-bottom:1rem;
  transition:transform .45s;
}

/* HOVER efecto neón */
.step-card:hover{
  transform:translateY(-8px) rotateX(6deg) rotateY(-4deg);
  box-shadow:0 10px 24px rgba(0,255,234,.25),0 4px 16px rgba(0,0,0,.1);
  border-color:#00ffe0;
}
.step-card:hover .step-icon{
  transform:scale(1.15) rotate(4deg);
  color:#00ffe0;
}

/* ---------- SCROLL-REVEAL ---------- */
.step-card.in-view{
  opacity:1;transform:translateY(0) scale(1);
}
/* ---------- PORTAFOLIO ---------- */
.portfolio-card{
  position:relative;cursor:pointer;border-radius:18px;overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.25,.8,.25,1),box-shadow .55s;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.portfolio-card img{
  width:100%;height:100%;object-fit:cover;transition:transform .55s ease;
}

/* overlay */
.portfolio-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:1.4rem;background:linear-gradient(0deg,rgba(17,57,58,.9) 0%,rgba(17,57,58,.0) 60%);
  opacity:0;transition:opacity .45s;
  color:#fff;
}
.portfolio-card:hover .portfolio-overlay{opacity:1}
.portfolio-card:hover{
  transform:rotateX(6deg) rotateY(-6deg) scale(1.04);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.portfolio-card:hover img{transform:scale(1.15)}

.tech-list{
  list-style:none;padding:0;margin:.5rem 0 1rem;display:flex;flex-wrap:wrap;gap:.4rem;
}
.tech-list li{
  background:var(--primary-40);padding:.2rem .6rem;border-radius:4px;
  font-size:.7rem;font-weight:600;color:#fff
}
.links .btn{
  --bs-btn-font-size:.8rem;--bs-btn-padding-y:.25rem;--bs-btn-padding-x:.85rem;
}

/* scroll-reveal baseline */
.portfolio-grid .col-sm-6{
  opacity:0;transform:translateY(40px);transition:all .6s ease;
}
.portfolio-grid .col-sm-6.show{
  opacity:1;transform:translateY(0);
}
/* ---------- ICONO CIRCULAR BLANCO ---------- */


/* ---------- BOTÓN WHATSAPP ARMONIZADO ---------- */
.btn-wsp{
  /* centrar icono + texto */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  

  /* dimensión y espaciado homogéneo */
  min-width:160px;                     /* ancho fijo para los tres */
  padding:.65rem 1.6rem;

  /* estética */
  background:#fff;
  color:#25d366;
  border:2px solid #25d366;
  border-radius:48px;                  /* más pill */
  font-weight:600;

  /* animación */
  transition:background .3s,color .3s,box-shadow .3s,transform .3s;
}
.btn-wsp i{font-size:1.25rem}

.btn-wsp:hover{
  background:#25d366;
  color:#fff;
  box-shadow:0 0 16px rgba(37,211,102,.45);
  transform:translateY(-3px);
}
/* ---------- CTA SUPER ---------- */
.cta-super{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-40) 90%,var(--primary-60) 100%);
}

/* fondo animado con “stars” */
.cta-bg::before,
.cta-bg::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle,#fff 0%,transparent 60%) repeat;
  opacity:.15;animation:stars 60s linear infinite;
}
.cta-bg::after{animation-duration:90s;opacity:.1}
@keyframes stars{
  from{background-position:0 0}
  to{background-position:1000px 500px}
}

/* ondas blancas */
.wave-top,
.wave-bottom{
  position:absolute;left:0;width:100%;height:80px;pointer-events:none;
}
.wave-top{top:-1px;transform:rotate(180deg) scaleX(-1)}   /* voltear para que encaje */
.wave-bottom{bottom:-1px}

/* botón WhatsApp */
.btn-wsp-cta{
  --clr:#25d366;
  background:#fff;color:var(--clr);border:2px solid var(--clr);
  border-radius:50px;padding:.8rem 2.2rem;font-weight:700;
  transition:background .3s,color .3s,box-shadow .3s;
  animation:pulse 2.4s infinite;
}
.btn-wsp-cta:hover{
  background:var(--clr);color:#fff;
  box-shadow:0 0 18px rgba(37,211,102,.5);
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.0)}
  50%{box-shadow:0 0 18px 4px rgba(37,211,102,.35)}
}
@import url(//fonts.googleapis.com/css?family=Lato:300:400);

body {
  margin:0;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
}
p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 1px;
  font-size:14px;
  color: #333333;
}

.header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgb(48, 114, 94) 0%, rgba(0,172,193,1) 100%);
  color:white;
}
.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}

.inner-header {
  height:65vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}
 /* Tarjetas destacadas (plan-highlight) */
.plan-highlight {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* sombra estática suave */
  box-shadow: 0 0.5rem 1rem rgba(255, 193, 7, 0.25); /* amarillo #ffc107 */
  border-width: 2px;               /* resalta el borde warning */
}

/* Efecto zoom y brillo al pasar el mouse */
.plan-highlight:hover,
.plan-highlight:focus-within {
  transform: translateY(-4px) scale(1.02);          /* ligero zoom */
  box-shadow: 0 0.75rem 1.5rem rgba(255, 193, 7, 0.45);
}


/* --- CONTENEDOR GENERAL --- */
#fundador{
  background:#f7fafc;
  padding-block:5rem;
}

/* --- CARD PRINCIPAL --- */
/* ==== AJUSTE: avatar más abajo y visible por completo ==== */
.about-card{
  position:relative;
  background:#ffffff;
  border-radius:1rem;
  box-shadow:0 10px 32px rgba(0,0,0,.08);
  padding:4.5rem 2rem 2.5rem;   /* ↑ aumentamos el padding-top */
  overflow:hidden;
}

.about-card::before{                   /* textura sutil de fondo */
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#0A66C210 0%,#ffc10710 100%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.about-card::after{                    /* borde decorativo izquierdo */
  content:'';
  position:absolute;
  inset-block:1.5rem;
  left:0;
  width:6px;
  border-radius:6px;
  background:linear-gradient(180deg,#0A66C2 0%,#ffc107 100%);
}


.avatar{
  position:absolute;
  top: 9px;                    /* ↓ bajamos el avatar (antes -60px) */
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:50%;
  border:6px solid #ffffff;
  box-shadow:0 0 0 4px #0A66C233;
}


/* --- TITULOS Y ROLES --- */
.about-name{
  margin-top:70px;         /* espacio por el avatar */
  font-size:1.85rem;
  font-weight:800;
  text-align:center;
}
.about-role{
  font-size:1.05rem;
  font-weight:600;
  color:#0A66C2;
  text-align:center;
  margin-bottom:1.25rem;
}

/* --- EXPERIENCIA --- */
.experience-list{
  margin-top:1.25rem;
}
.experience-list li{
  display:flex;
  gap:.8rem;
  margin-bottom:1rem;
  align-items:flex-start;
}
.experience-logo{
  width:42px;
  height:42px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:.35rem;
  background:#f1f1f1;
  padding:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* --- CTA --- */
.btn-live{
  display:inline-block;
  font-size:1rem;
  font-weight:700;
  padding:.75rem 2rem;
  border:none;
  border-radius:.45rem;
  background:#ffc107;
  color:#222;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.btn-live:hover{
  background:#ffdb5c;
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}

  @import url(//fonts.googleapis.com/css?family=Lato:300:400);

body {
  margin:0;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
}
p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 1px;
  font-size:14px;
  color: #333333;
}

.header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgb(48, 114, 94) 0%, rgba(0,172,193,1) 100%);
  color:white;
}
.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}

.inner-header {
  height:65vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}

  /* Tarjetas destacadas (plan-highlight) */
.plan-highlight {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* sombra estática suave */
  box-shadow: 0 0.5rem 1rem rgba(255, 193, 7, 0.25); /* amarillo #ffc107 */
  border-width: 2px;               /* resalta el borde warning */
}

/* Efecto zoom y brillo al pasar el mouse */
.plan-highlight:hover,
.plan-highlight:focus-within {
  transform: translateY(-4px) scale(1.02);          /* ligero zoom */
  box-shadow: 0 0.75rem 1.5rem rgba(255, 193, 7, 0.45);
}



/* --- CONTENEDOR GENERAL --- */
#fundador{
  background:#f7fafc;
  padding-block:5rem;
}

/* --- CARD PRINCIPAL --- */
/* ==== AJUSTE: avatar más abajo y visible por completo ==== */
.about-card{
  position:relative;
  background:#ffffff;
  border-radius:1rem;
  box-shadow:0 10px 32px rgba(0,0,0,.08);
  padding:4.5rem 2rem 2.5rem;   /* ↑ aumentamos el padding-top */
  overflow:hidden;
}

.about-card::before{                   /* textura sutil de fondo */
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#0A66C210 0%,#ffc10710 100%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.about-card::after{                    /* borde decorativo izquierdo */
  content:'';
  position:absolute;
  inset-block:1.5rem;
  left:0;
  width:6px;
  border-radius:6px;
  background:linear-gradient(180deg,#0A66C2 0%,#ffc107 100%);
}


.avatar{
  position:absolute;
  top: 9px;                    /* ↓ bajamos el avatar (antes -60px) */
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:50%;
  border:6px solid #ffffff;
  box-shadow:0 0 0 4px #0A66C233;
}


/* --- TITULOS Y ROLES --- */
.about-name{
  margin-top:70px;         /* espacio por el avatar */
  font-size:1.85rem;
  font-weight:800;
  text-align:center;
}
.about-role{
  font-size:1.05rem;
  font-weight:600;
  color:#0A66C2;
  text-align:center;
  margin-bottom:1.25rem;
}

/* --- EXPERIENCIA --- */
.experience-list{
  margin-top:1.25rem;
}
.experience-list li{
  display:flex;
  gap:.8rem;
  margin-bottom:1rem;
  align-items:flex-start;
}
.experience-logo{
  width:42px;
  height:42px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:.35rem;
  background:#f1f1f1;
  padding:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* --- CTA --- */
.btn-live{
  display:inline-block;
  font-size:1rem;
  font-weight:700;
  padding:.75rem 2rem;
  border:none;
  border-radius:.45rem;
  background:#ffc107;
  color:#222;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.btn-live:hover{
  background:#ffdb5c;
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}


  /* ---------- IFRAME WRAPPER ---------- */
  .iframe-container {
    position: relative;
    width: 100%;
    padding-top: 68.42%;
    overflow: hidden;
    border-radius: .75rem;
    background: #f5f5f5;
  }
  .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1900px;
    height: 1300px;
    transform: translateX(-50%) scale(.20);
    transform-origin: top center;
    border: none;
  }

  /* ---------- TARJETAS ---------- */
  .portfolio-card {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .45s ease, box-shadow .45s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
  }
  .portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 32px rgba(0,0,0,.16);
  }

  .portfolio-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.83);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.75rem;
    opacity: 0;
    transition: opacity .35s ease;
    text-align: center;
  }
  .portfolio-card:hover .portfolio-overlay { opacity: 1; }
  .portfolio-overlay h5 { font-weight: 700; margin-bottom: .4rem; }
  .portfolio-overlay p  { font-size: .875rem; margin-bottom: 1rem; }

  /* ---------- LABEL & ICONOS TECNO ---------- */
  .tech-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
    color: #ffc107;
    margin-bottom: .35rem;
  }

  .tech-icons {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .tech-icons i {
    font-size: 1.6rem;
  }
  /* Colores icónicos */
  .bi-filetype-html      { color:#e44d26; }
  .bi-filetype-css       { color:#1572b6; }
  .bi-filetype-js        { color:#f7df1e; }
  .bi-bootstrap-fill     { color:#7952b3; }
  .bi-filetype-php       { color:#787cb5; }
  .bi-react              { color:#61dafb; }
  .vscode-icon           { color:#007acc; }

  /* ---------- BOTÓN LIVE ---------- */
  .btn-live {
    font-size: 1rem;
    font-weight: 700;
    padding: .7rem 2rem;
    border: none;
    border-radius: .35rem;
    background: #ffc107;
    color: #222;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .btn-live:hover {
    background: #ffdb5c;
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 9px 20px rgba(0,0,0,.30);
    color: #222;
  }

  /* ---- CONTACTO ---- */


.contact-section::before{               /* textura con hojas sutiles */
  content:"";
  position:absolute;
  inset:0;
  background:url('https://www.toptal.com/designers/subtlepatterns/uploads/leaf.png');
  opacity:.08;
  mix-blend-mode: soft-light;
}

.contact-logo{max-width:300px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));}

.contact-card{border-radius:1rem;}
.contact-card .form-control{
  background:rgba(255,255,255,.9);
  border:1px solid #e0e0e0;
}
.contact-card .form-control:focus{border-color:#88d3cf;box-shadow:none;}

.btn-brand{
  --bs-btn-bg:#ffbf00;
  --bs-btn-hover-bg:#ffae00;
  --bs-btn-border-color:transparent;
  --bs-btn-hover-border-color:transparent;
  color:#1d5d5f;
  font-weight:600;
}

.btn-outline-light:hover{color:#1d5d5f;background:#fff;border-color:#fff;}


/* --------  BOTONES FLOTANTES  -------- */
.floating-btn{
  position:fixed;
  z-index:1050;                /* por encima de casi todo */
  right:18px;                  /* distancia al borde */
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.6rem;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.floating-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  text-decoration:none;
}

/* ––––– Ajusta su posición vertical  ––––– */
.whatsapp{
  bottom:94px;                 /* 94px para dejar espacio al botón de IG */
  background:#25D366;
}
.instagram{
  bottom:24px;                 /* 24px respecto al borde inferior */
  background:#E4405F;
}