@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600;700&display=swap');

:root{
  --bg1:#c8f1ee; --bg2:#b9ebff; --bg3:#c9f2d0;
  --ink:#0c2a2f; --white:#fff;
  --brand1:#7ac8ff; --brand2:#9fe8e0;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --glow:0 0 0 12px rgba(122,200,255,.28), 0 0 40px rgba(122,200,255,.22);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; font-family:'Open Sans',system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 0% 20%, #b1e8de 0%, transparent 60%),
    radial-gradient(1200px 600px at 100% 80%, #a5efcc 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 40%, var(--bg3) 100%);
}
a{ text-decoration:none; color:inherit }

/* NAV fija */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; gap:.75rem; justify-content:center; align-items:center;
  padding:.8rem 1rem; background:rgba(255,255,255,.6); backdrop-filter: blur(8px);
}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; border-radius:999px; background:var(--white);
  color:var(--ink); font-weight:700; box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
.pill:hover{ transform: scale(1.06); filter: brightness(1.03); box-shadow: var(--glow) }
.pill:active{ animation: flash .38s ease }

/* Secciones */
.section{
  max-width:1100px; margin:0 auto; padding:2.2rem 1rem;
  scroll-margin-top: 92px;
}
.title{
  font-family:'Montserrat',system-ui,sans-serif;
  text-align:center; font-size:clamp(1.6rem,1.2rem + 2.2vw,2.2rem);
  margin:0 0 1.3rem;
}

/* HERO ondas horizontales */
.hero-box{
  position:relative; height:300px; border-radius:28px; overflow:hidden;
  box-shadow: var(--shadow); margin:0 0 1rem; background: linear-gradient(180deg,var(--brand1),var(--brand2))
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100% }

/* Botón (base pill) */
.btn-white{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  background:#fff; color:var(--ink); border:0;
  padding:.78rem 1.35rem; border-radius:999px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.12); overflow:hidden;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
.btn-white:hover{ transform:translateX(-50%) scale(1.06); filter: brightness(1.03); box-shadow: var(--glow) }
.btn-white:active{ animation: flash .38s ease }

/* Texto desplegable */
.intro-text{ max-width:72ch; margin:2.2rem auto 0; line-height:1.8; text-align: justify }

/* ===== ENCARGOS ===== */
.encargos-title{ margin: 0 0 2.2rem }
.encargos-layout{ display:grid; grid-template-columns: 2fr 1fr; gap:2rem; align-items:start }

/* Preview grande */
.encargo-main{ display:grid; grid-template-columns: 62px 1fr 62px; align-items:center; gap:1rem }
.arrow{
  background:#fff; border:0; font-size:2rem; line-height:1;
  width:62px; height:62px; border-radius:50%; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.arrow:hover{ transform: scale(1.12); filter: brightness(1.04); box-shadow: var(--glow) }

.encargo-preview{
  position:relative;
  width:100%;
  border-radius:20px; overflow:hidden; box-shadow: var(--shadow);
  display:block;
  aspect-ratio: 16 / 9; /* el JS lo actualizará si es imagen */
}
.encargo-media{
  display:none;      /* el JS muestra el que toque */
  width:100%;
  height:100%;
  border:0;
  object-fit: contain; /* no recorta en la vista grande */
}

.encargo-desc{ background:#fff; padding:1.35rem 1.5rem 1.7rem; font-size:1rem; min-height:160px }

/* Grid 2×2 */
.mini-grid.mini-2x2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; justify-items:center }
.mini-card{
  width:180px; background:#7ac8ff; border-radius:20px; padding:12px 12px 16px;
  box-shadow: var(--shadow); display:flex; flex-direction:column; align-items:stretch; gap:.7rem;
}
.mini-preview{
  width:100%; height:160px; border-radius:14px; overflow:hidden; background:#cfe9ff; position:relative;
}
.mini-preview iframe, .mini-preview .thumb{ width:100%; height:100%; display:block; border:0; object-fit:cover }

/* El botón queda totalmente dentro del card y centrado */
.mini-btn{
  position:relative; inset:auto; transform:none;
  align-self:center; display:block; margin:0 auto 0; border-radius:999px; padding:.5rem 1.1rem;
}

/* ===== SOBRE MÍ (franja con ondas verticales) ===== */
.sobre-title{ margin: 2.2rem 0 1.2rem }
.sobre-texto .placeholder{ margin:0 0 1.2rem }
.sobre-franja{
  position:relative; width:100%; height:200px; border-radius:20px; overflow:hidden;
  box-shadow: var(--shadow); background: linear-gradient(180deg,var(--brand1),var(--brand2))
}
#about-band{ position:absolute; inset:0; width:100%; height:100% }
/* Botón Wiki CUADRADO (no circular) y centrado */
.wiki-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) }
.wiki-square{ border-radius:16px; padding:.6rem 1.1rem }

/* ===== REPOSITORIO ===== */
.repo-title{ margin: 0 0 2rem }
.repo-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; text-align:center }
.repo-item{
  display:grid; gap:.6rem; justify-items:center; border-radius:22px; padding:1rem 0;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease, background-color .5s ease;
  background:#ffffffcc;  /* se sobrescribe por JS con colores rotativos */
}
.repo-item:hover{ transform: scale(1.06); filter: brightness(1.03); box-shadow: var(--glow) }
.repo-icon{ width:96px; height:96px; border-radius:22px; background:#fff; box-shadow: var(--shadow) }

/* CONTACTO */
.contact-rect{ background: rgba(255,255,255,.7); border-radius:20px; text-align:center; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease }
.hover-grow:hover{ transform: scale(1.02); filter: brightness(1.02); box-shadow: var(--glow) }
.press-grow:active{ transform: scale(1.04); box-shadow: var(--glow) }

/* Destello animado para pills */
@keyframes flash{
  0%{ box-shadow: 0 0 0 0 rgba(122,200,255,0) }
  50%{ box-shadow: 0 0 0 14px rgba(122,200,255,.36) }
  100%{ box-shadow: 0 0 0 0 rgba(122,200,255,0) }
}

/* Responsive */
@media (max-width: 980px){
  .encargos-layout{ grid-template-columns: 1fr; }
  .mini-grid.mini-2x2{ grid-template-columns: 1fr 1fr }
}

/* Botones de la cuadrícula: sin escala, pero con destello */
.mini-card .mini-btn { transition: none !important; box-shadow: 0 6px 16px rgba(0,0,0,.12) }
.mini-card .mini-btn:hover,
.mini-card .mini-btn:focus { transform:none !important; filter:none !important; box-shadow: 0 6px 16px rgba(0,0,0,.12) !important }
.mini-card .mini-btn:active { transform:none !important; animation: flash .38s ease !important; box-shadow: 0 6px 16px rgba(0,0,0,.12) !important 
}