/* ============================================================
   mikecrea.pe — hoja de estilos compartida
   Para cambiar TODA la paleta, edita solo las variables de :root
   ============================================================ */

:root{
  /* --- Colores --- */
  --fondo:        #FAFAF8;   /* blanco hueso */
  --fondo-alt:    #F2F2EF;   /* gris muy claro, secciones alternas */
  --texto:        #1C1C1E;   /* grafito */
  --texto-suave:  #6E6E73;   /* gris medio */
  --borde:        #E4E4DF;
  --acento:       #B9A8F5;   /* lila */
  --acento-fuerte:#7B63D8;   /* lila oscuro, para texto sobre claro */

  /* --- Tipografía --- */
  --fuente: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Medidas --- */
  --ancho: 1120px;
  --radio: 14px;
  --gutter: 24px;
  --trans: 200ms ease;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--fuente);
  font-size:17px;
  line-height:1.7;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Tipografía ---------- */
h1,h2,h3{ line-height:1.2; margin:0 0 .5em; font-weight:600; letter-spacing:-.02em; }
h1{ font-size:clamp(2.1rem, 5.5vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 3.6vw, 2.3rem); }
h3{ font-size:1.15rem; font-weight:600; }
p{ margin:0 0 1.1em; }
.plomo{ color:var(--texto-suave); }
.entradilla{ font-size:1.12rem; color:var(--texto-suave); max-width:62ch; }
.etiqueta{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acento-fuerte); margin-bottom:1rem;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:999px; border:1px solid transparent;
  font-size:.95rem; font-weight:500; text-decoration:none; cursor:pointer;
  transition:transform var(--trans), background var(--trans), border-color var(--trans);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primario{ background:var(--texto); color:var(--fondo); }
.btn-primario:hover{ background:#000; }
.btn-secundario{ background:transparent; color:var(--texto); border-color:var(--borde); }
.btn-secundario:hover{ border-color:var(--texto); }

/* ---------- Encabezado ---------- */
.cabecera{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,248,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--borde);
}
.cabecera-int{ display:flex; align-items:center; justify-content:space-between; height:68px; }

/* Logo provisional: monograma tipográfico. Para reemplazarlo, cambia solo este bloque. */
.marca{ display:flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:600; letter-spacing:-.02em; }
.marca-mono{
  width:34px; height:34px; border-radius:10px; background:var(--texto); color:var(--fondo);
  display:grid; place-items:center; font-size:.85rem; font-weight:600; letter-spacing:0;
}
.marca-txt{ font-size:1rem; }
.marca-txt span{ color:var(--texto-suave); font-weight:400; }

.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav a{
  text-decoration:none; font-size:.95rem; color:var(--texto-suave);
  padding:.25rem 0; border-bottom:2px solid transparent; transition:color var(--trans);
}
.nav a:hover{ color:var(--texto); }
.nav a.activo{ color:var(--texto); border-bottom-color:var(--acento); }

.hamburguesa{
  display:none; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; padding:10px; margin-right:-10px;
}
.hamburguesa span{ display:block; height:2px; background:var(--texto); margin:5px 0; border-radius:2px; transition:var(--trans); }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:820px){
  .hamburguesa{ display:block; }
  .nav{
    position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--fondo); border-bottom:1px solid var(--borde);
    padding:.5rem var(--gutter) 1.5rem; transform:translateY(-120%);
    transition:transform 260ms ease; box-shadow:0 20px 40px rgba(0,0,0,.06);
  }
  .nav.abierto{ transform:translateY(0); }
  .nav a{ width:100%; padding:.9rem 0; font-size:1.05rem; border-bottom:1px solid var(--borde); }
  .nav a:last-child{ border-bottom:0; }
  .nav a.activo{ border-bottom-color:var(--borde); }
}

/* ---------- Secciones ---------- */
.seccion{ padding:clamp(56px, 9vw, 104px) 0; }
.seccion-alt{ background:var(--fondo-alt); }
.seccion-cab{ max-width:64ch; margin-bottom:2.5rem; }

/* ---------- Portada ---------- */
.portada{ padding:clamp(56px,10vw,110px) 0 clamp(40px,7vw,80px); }
.portada-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,5vw,64px); align-items:center; }
@media (max-width:820px){ .portada-grid{ grid-template-columns:1fr; } }
.portada h1 span{ color:var(--texto-suave); }
.portada-acciones{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }

/* PLACEHOLDER: reemplazar por foto real de Mike */
.retrato{
  aspect-ratio:1; border-radius:24px; background:var(--acento);
  display:grid; place-items:center; overflow:hidden; max-width:360px; margin-inline:auto; width:100%;
}
.retrato svg{ width:62%; height:62%; opacity:.9; }

/* ---------- Rejillas ---------- */
.rejilla{ display:grid; gap:clamp(16px,2.4vw,26px); }
.rejilla-3{ grid-template-columns:repeat(3,1fr); }
.rejilla-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .rejilla-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .rejilla-3,.rejilla-2{ grid-template-columns:1fr; } }

/* ---------- Tarjeta de proyecto ---------- */
.proyecto{
  background:var(--fondo); border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; text-decoration:none; display:flex; flex-direction:column;
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.proyecto:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(28,28,30,.08); border-color:#d8d8d2; }
.proyecto-img{ aspect-ratio:4/3; background:var(--fondo-alt); overflow:hidden; }
.proyecto-img img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
.proyecto:hover .proyecto-img img{ transform:scale(1.04); }
.proyecto-cuerpo{ padding:1.25rem 1.35rem 1.5rem; }
.proyecto-cat{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--acento-fuerte); font-weight:600; }
.proyecto h3{ margin:.5rem 0 .35rem; }
.proyecto p{ margin:0; font-size:.95rem; color:var(--texto-suave); }

/* ---------- Tarjeta de servicio ---------- */
.servicio{ background:var(--fondo); border:1px solid var(--borde); border-radius:var(--radio); padding:1.75rem; }
.servicio .num{ font-size:.8rem; color:var(--texto-suave); letter-spacing:.1em; }
.servicio h3{ margin:.6rem 0 .5rem; }
.servicio p{ margin:0; font-size:.95rem; color:var(--texto-suave); }

/* ---------- Franja de cierre ---------- */
.cierre{ background:var(--texto); color:var(--fondo); border-radius:var(--radio); padding:clamp(32px,5vw,56px); text-align:center; }
.cierre h2{ color:var(--fondo); }
.cierre p{ color:#c9c9cd; max-width:52ch; margin-inline:auto; }
.cierre .btn-primario{ background:var(--fondo); color:var(--texto); }

/* ---------- Pie ---------- */
.pie{ border-top:1px solid var(--borde); padding:2.5rem 0; font-size:.9rem; color:var(--texto-suave); }
.pie-int{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.pie a{ text-decoration:none; }
.pie a:hover{ color:var(--texto); }
.pie-enlaces{ display:flex; gap:1.25rem; flex-wrap:wrap; }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:52px; height:52px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform var(--trans);
}
.wa:hover{ transform:scale(1.06); }
.wa svg{ width:27px; height:27px; fill:#fff; }

/* ---------- Filtros ---------- */
.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filtro{
  border:1px solid var(--borde); background:transparent; color:var(--texto-suave);
  padding:.5rem 1.05rem; border-radius:999px; font-family:inherit; font-size:.9rem;
  cursor:pointer; transition:var(--trans);
}
.filtro:hover{ color:var(--texto); border-color:var(--texto); }
.filtro.activo{ background:var(--texto); border-color:var(--texto); color:var(--fondo); }

/* ---------- Formulario ---------- */
.campo{ margin-bottom:1.1rem; }
.campo label{ display:block; font-size:.9rem; margin-bottom:.4rem; font-weight:500; }
.campo input,.campo textarea,.campo select{
  width:100%; padding:.85rem 1rem; border:1px solid var(--borde); border-radius:10px;
  font-family:inherit; font-size:1rem; background:var(--fondo); color:var(--texto);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{ outline:2px solid var(--acento); border-color:transparent; }

/* ---------- Utilidades ---------- */
.centro{ text-align:center; }
.mt-2{ margin-top:2rem; }
.oculto{ display:none !important; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- Imágenes reales en portada y servicios ---------- */
.retrato-foto{ background:var(--fondo-alt); padding:0; }
.retrato-foto img{ width:100%; height:100%; object-fit:cover; }
.servicio-img{
  margin:-1.75rem -1.75rem 1.25rem; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radio) var(--radio) 0 0; background:var(--fondo-alt);
}
.servicio-img img{ width:100%; height:100%; object-fit:cover; }