/* =========================================================
   Precisa Studio — estilos
   Cómo leer este archivo:
   1) Variables (colores, tipografías): cambiar aquí cambia toda la web.
   2) Base (textos, enlaces, contenedor).
   3) Componentes (botones, tarjetas…).
   4) Secciones, en el mismo orden que aparecen en la página.
   5) Ajustes para celular (al final).
   ========================================================= */

/* 0) TIPOGRAFÍAS (guardadas en la propia web: más rápido y sin depender de Google) */
@font-face {
  font-family: "Manrope"; src: url("fonts/manrope.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

/* 1) VARIABLES ------------------------------------------------ */
:root {
  --grafito: #14171C;
  --grafito-2: #1D2128;      /* tarjetas sobre fondo oscuro */
  --hueso: #F6F5F1;
  --blanco: #FFFFFF;
  --lima: #C6F432;           /* acento: solo sobre fondo oscuro o como fondo */
  --lima-texto: #4F7A00;     /* lima legible sobre fondo claro */
  --gris: #5F6672;
  --gris-claro: #9AA0A6;
  --borde: #E4E2DC;
  --radio: 14px;
  --ancho: 1120px;
  --titulos: "Manrope", system-ui, sans-serif;
  --texto: "Inter", system-ui, sans-serif;
}

/* 2) BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  color: var(--grafito);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.seccion { padding: 96px 0; }
.seccion--blanca { background: var(--blanco); }
.seccion--oscura { background: var(--grafito); color: var(--hueso); }
.antetitulo {
  display: inline-block; font-family: var(--titulos); font-weight: 700;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lima-texto); margin-bottom: 12px;
}
.seccion--oscura .antetitulo { color: var(--lima); }
.intro { max-width: 640px; color: var(--gris); font-size: 1.1rem; }
.seccion--oscura .intro { color: var(--gris-claro); }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 16px; background: var(--lima); padding: 8px 12px; z-index: 100; }
:focus-visible { outline: 3px solid var(--lima-texto); outline-offset: 3px; }

/* 3) COMPONENTES --------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--titulos); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; transition: transform .15s, background .15s;
}
.boton:hover { transform: translateY(-2px); }
.boton--lima { background: var(--lima); color: var(--grafito); }
.boton--borde { border-color: currentColor; background: transparent; }
.boton--oscuro { background: var(--grafito); color: var(--hueso); }
.boton svg { width: 20px; height: 20px; flex: none; }

.check { color: var(--lima-texto); font-weight: 800; }
.seccion--oscura .check, .hero .check, .plan--destacado .check { color: var(--lima); }
.hero .antetitulo { color: var(--lima); }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 28px;
}
.icono-caja {
  width: 48px; height: 48px; border-radius: 12px; background: var(--grafito);
  color: var(--lima); display: grid; place-items: center; margin-bottom: 18px;
}
.icono-caja svg { width: 24px; height: 24px; }

/* 4) SECCIONES ------------------------------------------------ */

/* Menú superior */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 23, 28, .92); backdrop-filter: blur(8px);
  color: var(--hueso); border-bottom: 1px solid rgba(255,255,255,.06);
}
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca svg { width: 30px; height: 30px; }
.marca span { font-family: var(--titulos); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.menu { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; color: var(--gris-claro); font-size: .95rem; }
.menu a:hover { color: var(--hueso); }
.cabecera .boton { padding: 10px 18px; font-size: .9rem; }

/* Inicio (hero) */
.hero { background: var(--grafito); color: var(--hueso); padding: 96px 0 104px; }
.hero h1 span { color: var(--lima); }
.hero .intro { font-size: 1.2rem; margin-bottom: 32px; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.senales { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 0; margin: 0; color: var(--gris-claro); font-size: .95rem; }

/* Para quién */
.rubros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.rubro { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.rubro .icono-caja { margin: 0; width: 42px; height: 42px; }
.rubro strong { font-family: var(--titulos); }

/* Servicios */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.tarjeta p { color: var(--gris); margin: 0; }

/* Calidad */
.calidad { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.lista-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lista-checks li {
  background: var(--grafito-2); border-radius: 12px; padding: 16px 20px;
  display: flex; gap: 12px; align-items: center; font-weight: 500;
}

/* Precios */
.precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; }
.plan--destacado { background: var(--grafito); color: var(--hueso); border-color: var(--grafito); }
.plan__etiqueta {
  position: absolute; top: -13px; left: 28px; background: var(--lima); color: var(--grafito);
  font-family: var(--titulos); font-weight: 800; font-size: .75rem; padding: 4px 12px; border-radius: 999px;
}
.tarjeta .plan__precio { color: inherit; }
.plan__precio { font-family: var(--titulos); font-weight: 800; font-size: 2.4rem; margin: 6px 0 18px; letter-spacing: -0.03em; }
.plan__precio small { font-size: .95rem; font-weight: 600; color: var(--gris); }
.plan--destacado .plan__precio small { color: var(--gris-claro); }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; }
.plan .boton { margin-top: auto; }
.notas-precios { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; color: var(--gris); font-size: .95rem; }
.notas-precios p { margin: 0; }
.lanzamiento {
  margin-top: 28px; padding: 18px 22px; border-radius: 12px;
  background: #EEF8CC; color: #2F4700; font-weight: 500;
}

/* Portafolio */
.proyecto { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-top: 40px; overflow: hidden; padding: 0; }
.proyecto__texto { padding: 36px; }
.proyecto__imagen { background: var(--grafito); height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 32px 32px 0; gap: 16px; }
.proyecto__imagen img { border-radius: 12px 12px 0 0; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; padding: 0; list-style: none; }
.etiquetas li { background: var(--hueso); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 12px; font-size: .85rem; }
.proyecto__botones { display: flex; gap: 12px; flex-wrap: wrap; }

/* Proceso */
.pasos { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: paso; }
.paso { counter-increment: paso; }
.paso::before {
  content: counter(paso, decimal-leading-zero); display: block;
  font-family: var(--titulos); font-weight: 800; font-size: 1.1rem; color: var(--lima-texto); margin-bottom: 10px;
}

/* Sobre mí */
.sobre { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; }
.avatar {
  width: 220px; aspect-ratio: 1; border-radius: 28px; background: var(--grafito);
  display: grid; place-items: center; font-family: var(--titulos); font-weight: 800;
  font-size: 5rem; color: var(--lima);
}

/* Preguntas frecuentes */
.faq { max-width: 800px; margin-top: 32px; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--titulos); font-weight: 700; font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.6rem; color: var(--lima-texto); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--gris); padding-right: 40px; }

/* Contacto */
.contacto { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; }
.formulario { display: grid; gap: 16px; background: var(--grafito-2); padding: 32px; border-radius: var(--radio); }
.formulario label { display: grid; gap: 6px; font-weight: 500; font-size: .95rem; }
.formulario input, .formulario select, .formulario textarea {
  font: inherit; color: var(--hueso); background: var(--grafito);
  border: 1px solid #343A44; border-radius: 10px; padding: 12px 14px; width: 100%;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 2px solid var(--lima); border-color: transparent; }
.formulario .doble { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario .boton { width: 100%; }
.estado-form { margin: 0; font-size: .95rem; min-height: 1.5em; }
.estado-form.ok { color: var(--lima); }
.estado-form.error { color: #FF9C8A; }
.dato-contacto { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; color: var(--hueso); text-decoration: none; }
.dato-contacto svg { width: 22px; height: 22px; color: var(--lima); }
.trampa { display: none; } /* campo oculto anti-spam */

/* Pie */
.pie { background: var(--grafito); color: var(--gris-claro); padding: 40px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: .9rem; }
.pie .contenedor { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.pie a { color: var(--gris-claro); }

/* Botón flotante de WhatsApp */
.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.wa-flotante svg { width: 30px; height: 30px; }

/* Página de caso de estudio */
.articulo { max-width: 780px; }
.articulo h2 { font-size: 1.7rem; margin-top: 56px; }
.articulo table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: .95rem; }
.articulo th, .articulo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.articulo th { font-family: var(--titulos); }
.articulo figure { margin: 24px 0; }
.articulo figcaption { color: var(--gris); font-size: .9rem; margin-top: 8px; }
.capturas-movil { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.capturas-movil img, .articulo figure img { border-radius: 12px; border: 1px solid var(--borde); }

/* 5) CELULAR Y TABLET ---------------------------------------- */
@media (max-width: 900px) {
  .menu { display: none; }               /* en celular solo queda el botón */
  .grid-3, .precios, .pasos { grid-template-columns: 1fr; }
  .rubros { grid-template-columns: 1fr 1fr; }
  .calidad, .proyecto, .contacto, .sobre { grid-template-columns: 1fr; gap: 32px; }
  .proyecto__imagen { order: -1; }
  .notas-precios { grid-template-columns: 1fr; }
  .precios { gap: 28px; }
  .avatar { width: 140px; font-size: 3.2rem; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .seccion { padding: 72px 0; }
  .hero { padding: 64px 0 72px; }
  .rubros { grid-template-columns: 1fr; }
  .formulario .doble { grid-template-columns: 1fr; }
  .formulario { padding: 22px; }
  .hero__botones .boton { width: 100%; }
  .cabecera .boton span { display: none; } /* en pantallas muy chicas: solo ícono */
  .cabecera .boton { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton { transition: none; }
}