:root{
      --bg:#0b1220;          /* fondo principal */
      --bg-elev:#0e182b;     /* cartas/nav */
      --txt:#e6edf6;         /* texto base */
      --muted:#9fb0c7;       /* texto secundario */
      --brand:#5eead4;       /* color acento */
      --brand-2:#a78bfa;     /* acento alterno */
      --stroke:rgba(255,255,255,.08);
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --container:1200px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
      background:radial-gradient(1200px 600px at 80% -10%, rgba(167,139,250,.12), transparent 70%),
                 radial-gradient(900px 500px at 10% -10%, rgba(94,234,212,.12), transparent 70%),
                 var(--bg);
      color:var(--txt); line-height:1.6;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{width:min(100%, var(--container)); margin-inline:auto; padding-inline:20px}
    /* Header */
    header{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px);
      background:color-mix(in hsl, var(--bg) 80%, transparent);
      border-bottom:1px solid var(--stroke);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
    .brand{display:flex; align-items:center; gap:10px; font-weight:700}
    .brand .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 0 20px rgba(94,234,212,.5)}
    .menu{display:flex; align-items:center; gap:16px}
    .menu a{padding:10px 12px; border-radius:12px; border:1px solid transparent}
    .menu a:is(:hover,:focus){border-color:var(--stroke); background:rgba(255,255,255,.03)}
    .cta{padding:10px 14px; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0c1020; font-weight:700}
    .burger{display:none; width:40px; height:40px; place-items:center; border-radius:12px; border:1px solid var(--stroke)}
    @media (max-width: 860px){
      .menu{position:fixed; inset:64px 0 auto 0; height:auto; display:none; flex-direction:column; align-items:stretch; padding:12px; gap:8px; background:var(--bg); border-bottom:1px solid var(--stroke)}
      .menu.open{display:flex}
      .burger{display:grid}
    }

    /* Hero */
    .hero{padding:80px 0 40px}
    .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
    .eyebrow{display:inline-flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--stroke); border-radius:999px; color:var(--muted); font-size:.9rem}
    .eyebrow .spark{width:8px; height:8px; border-radius:50%; background:var(--brand)}
    h1{margin:14px 0 10px; font-size:clamp(32px, 6vw, 56px); line-height:1.05}
    .lead{color:var(--muted); font-size:clamp(16px, 2.4vw, 20px)}
    .hero-actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:14px; border:1px solid var(--stroke); background:rgba(255,255,255,.02); font-weight:600}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0c1020; border-color:transparent}
    .hero-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    .hero-visual{aspect-ratio:4/3; border-radius:var(--radius); border:1px dashed var(--stroke); display:grid; place-items:center; color:var(--muted)}
    @media (max-width: 960px){
      .hero-grid{grid-template-columns:1fr}
    }

    /* Sections */
    section{padding:72px 0; border-top:1px solid var(--stroke)}
    .section-header{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px}
    .section-header h2{margin:0; font-size:clamp(22px, 3.5vw, 34px)}
    .muted{color:var(--muted)}

    /* Grid cards */
    .grid{display:grid; gap:18px}
    .grid.cols-3{grid-template-columns:repeat(3, 1fr)}
    .grid.cols-2{grid-template-columns:repeat(2, 1fr)}
    @media (max-width: 920px){
      .grid.cols-3{grid-template-columns:repeat(2, 1fr)}
    }
    @media (max-width: 640px){
      .grid.cols-3, .grid.cols-2{grid-template-columns:1fr}
    }
    .card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid var(--stroke); border-radius:var(--radius); overflow:hidden}
    .card > .media{aspect-ratio:16/10; background:var(--bg-elev); border-bottom:1px solid var(--stroke); display:grid; place-items:center; color:var(--muted)}
    .card > .body{padding:16px}
    .pill{display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); color:var(--muted); font-size:.85rem}

    /* Skills */
    .skills{display:flex; flex-wrap:wrap; gap:10px}
    .skills .pill{border-color:rgba(94,234,212,.25)}

    /* Testimonials */
    .quote{font-size:1rem; color:var(--muted)}
    .quote strong{color:var(--txt)}

    /* Contact */
    form{display:grid; gap:12px; max-width:720px}
    .field{display:grid; gap:8px}
    input, textarea{
      width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.02); color:var(--txt)
    }
    textarea{min-height:140px; resize:vertical}
    .help{font-size:.85rem; color:var(--muted)}

    /* Footer */
    footer{padding:36px 0; border-top:1px solid var(--stroke); color:var(--muted)}

    /* Reveal on scroll */
    [data-reveal]{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
    [data-reveal].visible{opacity:1; transform:none}

    /* iconos skills */
    .skills-section {
  padding: 2rem;
  color: #fff;
  background-color: none;
}

.skills-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1.5rem;
  justify-items: center;
  align-items: center;
}

.skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.skill img {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5rem;
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  justify-items: center;
  align-items: center;
  padding: 20px 0;
}

/* Tarjetas */
.skills-grid .skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 15px;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 150px; /* Limite para pantallas grandes */
}

.skills-grid .skill i {
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Giro de icono */
.skills-grid .skill:hover i {
  transform: rotate(360deg);
}

/* Fondo con color aleatorio */
.skills-grid .skill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  border-radius: 15px;
  z-index: 0;
  transition: background 0.5s ease;
}

.skills-grid .skill:hover::before {
  background: rgba(var(--random-rgb), 0.2);
}

/* Texto y iconos arriba del fondo */
.skills-grid .skill span,
.skills-grid .skill i {
  position: relative;
  z-index: 1;
}

/* Texto rainbow */
.skills-grid .skill span {
  font-weight: bold;
  text-align: center;
  transition: background 0.5s ease;
}

.skills-grid .skill:hover span {
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff9900,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowText 3s linear infinite;
}

@keyframes rainbowText {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* MEDIA QUERIES */

/* Pantallas medianas */
@media (max-width: 768px) {
  .skills-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
  }

  .skills-grid .skill {
    padding: 15px;
    max-width: 120px;
  }

  .skills-grid .skill i {
    font-size: 3rem; /* iconos más pequeños */
  }
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 480px) {
  .skills-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
  }

  .skills-grid .skill {
    padding: 10px;
    max-width: 100px;
  }

  .skills-grid .skill i {
    font-size: 2.5rem;
  }

  .skills-grid .skill span {
    font-size: 0.9rem;
  }
}
 /* Botón regresar */
 .btn-regresar {
  position: fixed;
  top: 50%;
  left: 20px; /* flotando a la izquierda */
  transform: translateY(-50%);
  padding: 18px 28px;
  font-size: 1.3rem;
  font-weight: bold;
  border-radius: 12px;
  text-decoration: none;
  color: white;
  background: linear-gradient(
    45deg,
    red, orange, yellow, green, cyan, blue, magenta
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowText 3s linear infinite, bounce 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  z-index: 9999;
  text-align: center;
  cursor: pointer;
  display: inline-block;
}

/* Rainbow y bounce animation */
@keyframes rainbowText {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(-50%) translateY(0px); }
  50% { transform: translateY(-50%) translateY(-8px); }
}

/* Hover efecto */
.btn-regresar:hover {
  transform: translateY(-50%) translateY(-10px) scale(1.05);
  text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

/* Responsive */
@media (max-width: 768px) {
  .btn-regresar {
    padding: 14px 22px;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .btn-regresar {
    padding: 12px 18px;
    font-size: 1rem;
    left: 10px;
  }
}
/* Fin botón regresar */ 
.card {
  position: relative; /* necesario para que el botón se posicione respecto a la tarjeta */
  overflow: hidden;   /* opcional, solo si quieres recortar contenido extra */
}

.card-button {
  position: absolute;
  bottom: 12px;
  right: 12px;
  color: white;
  padding: 10px;
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card-button:hover {
  transform: scale(1.2) rotate(15deg);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Estilo base de la tarjeta */


/* Botón flotante */
.card-button {
  position: absolute;
  bottom: 12px;
  right: 12px;
  color: white;
  padding: 10px;
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}
/* Glow rainbow al pasar el cursor sobre la tarjeta */
.card:hover {
  animation: rainbowGlow 1.5s infinite alternate;
  transform: translateY(-4px);
}

@keyframes rainbowGlow {
  0%   { box-shadow: 0 0 10px #ff0000, 0 0 20px #ff7f00; }
  14%  { box-shadow: 0 0 10px #ffff00, 0 0 20px #7fff00; }
  28%  { box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff7f; }
  42%  { box-shadow: 0 0 10px #00ffff, 0 0 20px #007fff; }
  57%  { box-shadow: 0 0 10px #0000ff, 0 0 20px #7f00ff; }
  71%  { box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff007f; }
  85%  { box-shadow: 0 0 10px #ff0000, 0 0 20px #ff7f00; }
  100% { box-shadow: 0 0 10px #ffff00, 0 0 20px #7fff00; }
}

/*foto de eduardor*/
.card > .media {
  aspect-ratio: 16/10;      /* fuerza un tamaño uniforme para todas las tarjetas */
  background: var(--bg-elev); 
  border-bottom: 1px solid var(--stroke);
  display: grid;
  place-items: center;
  overflow: hidden;          /* recorta lo que sobresalga */
}

.card > .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* mantiene proporción y recorta si es necesario */
  display: block;
}
/* carrusel */
 /* Carrusel horizontal */
.grid.cols-3 {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory; /* Snap al centro de cada card */
}

.grid.cols-3 .card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  transition: transform 0.3s, box-shadow 0.3s;
}

.grid.cols-3 .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Ocultar scrollbar */
.grid.cols-3::-webkit-scrollbar {
  display: none;
}

/* Contenedor de puntitos */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.carousel-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dots button.active {
  background: #0077ff;
}

/* Fin carrusel */

/* Animación de carga */
#portafolio {
  background: transparent;
  color: #f0f0f0;
  padding: 40px 20px;
  font-family: 'Fira Code', monospace;
}

#portafolio h2 {
  text-align: center;
  margin-bottom: 30px;
}

/* Contenedor de tarjetas diagonales */
.tech-cards-diagonal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  perspective: 1000px;
}

/* Tarjetas semi-transparentes */
.tech-card {
  background: rgba(30,30,30,0.5); /* Fondo semi-transparente */
  border-radius: 10px;
  width: 250px;
  padding: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.6);
  transition: transform 0.4s, box-shadow 0.4s;
  overflow: hidden;
  position: relative;
  transform: rotate(-3deg);
}

.tech-card:nth-child(2) {
  transform: rotate(3deg) translateY(-20px);
}

.tech-card:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 15px 25px rgba(0,0,0,0.8);
}

/* Header estilo Mac */
.editor-header {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.circle.red { background: #f56565; }
.circle.yellow { background: #ecc94b; }
.circle.green { background: #48bb78; }

/* Código */
pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
  padding: 8px;
  border-radius: 6px;
}

/* Colores sintaxis */
.keyword { color: #569cd6; }
.comment { color: #6a9955; font-style: italic; }
.string { color: #d69d85; }
.type { color: #4ec9b0; }

/* Hover línea */
pre span {
  display: inline-block;
  width: 100%;
  transition: background 0.2s;
}

pre:hover span:hover {
  background: rgba(255,255,255,0.05);
}
/* Responsive */
@media (max-width: 900px) {
  .tech-card {
    width: 220px;
    transform: rotate(0deg) translateY(0); /* Menos diagonal en tablet */
  }
  .tech-card:nth-child(2) {
    transform: rotate(0deg) translateY(0);
  }
}

@media (max-width: 600px) {
  .tech-cards-diagonal {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .tech-card {
    width: 90%;
    transform: rotate(0deg);
  }
}