/* ============================================================
   /web/ — la página de servicio freelance

   Audiencia distinta al resto del sitio: dueños de negocio, no
   reclutadores. Mismo sistema de diseño, tono más comercial, y
   siempre en español.

   Fuera del menú principal a propósito: se llega por link directo.
   ============================================================ */

.web-nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-nav);
  display:flex;align-items:center;gap:var(--space-md);
  padding:var(--space-sm) var(--gutter);
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px);border-block-end:1px solid var(--hairline);
}
.web-nav__brand{font-weight:var(--w-bold);letter-spacing:-.02em;text-decoration:none}
.web-nav__brand span{color:var(--dim);font-weight:var(--w-regular)}
.web-nav .btn{margin-inline-start:auto;font-size:var(--step--1);padding:.5rem 1.1rem}

/* ---------- Botón de WhatsApp ---------- */
.wa{
  display:inline-flex;align-items:center;gap:.6rem;
  background:#1E9E5A;color:#fff;border-color:#1E9E5A;
  font-weight:var(--w-medium);
}
.wa:hover{background:#18854B;border-color:#18854B;color:#fff}
.wa svg{flex:none}

/* ---------- Hero ---------- */
.web-hero{
  min-height:min(86svh,52rem);display:flex;align-items:center;
  padding-block-start:calc(var(--section-y) + var(--nav-h));
}
.web-hero h1{font-size:var(--step-5);max-width:16ch}
.web-hero__sub{font-size:var(--step-1);line-height:var(--lh-snug);
  max-width:46ch;margin-block-start:var(--space-lg);color:var(--dim)}
.web-hero__acciones{display:flex;gap:var(--space-sm);flex-wrap:wrap;
  margin-block-start:var(--space-xl);align-items:center}
.web-hero__precio{font-size:var(--step--1);color:var(--dim)}

/* ---------- Rejillas ---------- */
.web-grid{
  display:grid;gap:var(--space-md);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  margin-block-start:var(--space-xl);
}
.web-card{
  border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:var(--space-lg);display:grid;gap:.4rem;align-content:start;
  transition:transform var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.web-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.web-card h3{font-size:var(--step-1)}
.web-card p{color:var(--dim);max-width:none}

/* ---------- Ejemplos ---------- */
.ej-grid{
  display:grid;gap:var(--space-md);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  margin-block-start:var(--space-xl);
}
.ej a,.ej > div{
  display:block;text-decoration:none;border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--hairline);height:100%;
  transition:transform var(--dur-base) var(--ease);
}
.ej a:hover{transform:translateY(-3px)}
.ej img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.ej__body{padding:var(--space-md)}
.ej__title{font-weight:var(--w-bold);font-size:var(--step-1);letter-spacing:-.01em}
.ej__linea{color:var(--dim);font-size:var(--step--1);margin-block-start:.2rem}
.ej__link{display:inline-block;margin-block-start:var(--space-sm);
  font-size:var(--step--1);font-weight:var(--w-medium);
  color:var(--link,var(--coral-text));text-decoration:underline;text-underline-offset:3px}

/* ---------- Precios ---------- */
.precios{display:grid;gap:var(--space-md);margin-block-start:var(--space-xl);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
/* Las dos tarjetas miden lo mismo aunque una tenga más viñetas: la
   columna es flex, la lista crece para llenar el hueco y el botón queda
   pegado abajo, alineado en las dos. */
.plan{border:1.5px solid var(--hairline);border-radius:var(--r-lg);padding:var(--space-xl);
      display:flex;flex-direction:column}
.plan--destacado{border-color:var(--ink);border-width:2px}
.plan__etiqueta{font-size:var(--step--2);letter-spacing:var(--track-caps);
  text-transform:uppercase;font-weight:var(--w-medium);color:var(--link,var(--coral-text));
  align-self:start}
.plan h3{font-size:var(--step-2);margin-block:.3em .1em}
.plan__precio{font-size:var(--step-3);font-weight:var(--w-bold);letter-spacing:var(--track-tight)}
.plan__precio small{font-size:var(--step--1);font-weight:var(--w-regular);color:var(--dim)}
.plan ul{margin-block-start:var(--space-lg);display:grid;gap:var(--space-sm);align-content:start;flex:1}
.plan li{position:relative;padding-inline-start:var(--space-md);color:var(--dim)}
.plan li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:.35rem;block-size:.35rem;border-radius:var(--r-pill);background:#1E9E5A}
.plan .btn{margin-block-start:var(--space-lg);width:100%;text-align:center}

/* ---------- Pasos ---------- */
.pasos{display:grid;gap:var(--space-xl);margin-block-start:var(--space-xl);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.paso__num{font-size:var(--step-4);font-weight:var(--w-bold);
  letter-spacing:var(--track-tight);color:var(--dim);line-height:1}
.paso h3{font-size:var(--step-1);margin-block:var(--space-sm) .2em}
.paso p{color:var(--dim)}

/* ---------- Cierre ---------- */
.web-cierre h2{font-size:var(--step-4);max-width:18ch}
.web-cierre__acciones{display:flex;gap:var(--space-sm);flex-wrap:wrap;
  margin-block-start:var(--space-xl)}


/* Distintivo de muestra. La rejilla se llama "Sitios que he hecho" y
   junto a cuatro trabajos de cliente, una demo sin marcar se leería
   como uno más. */
.ej__demo{display:inline-block;vertical-align:middle;margin-inline-start:.5em;
  font-size:var(--step--2);font-weight:var(--w-medium);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--dim);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:.15em .7em}

/* ---------- Reseña ----------
   Una sola, y a propósito no va en tarjeta: una cita a tamaño grande
   sostiene la sección sin que se note que no hay una segunda. */
.resena{margin:0;max-width:34ch;display:grid;gap:var(--space-xl)}
@media (min-width:800px){ .resena{max-width:none;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:var(--space-2xl);align-items:start} }
.resena__texto{margin:0;font-size:var(--step-2);line-height:var(--lh-snug);
  letter-spacing:var(--track-tight);text-wrap:pretty}
/* Las comillas cuelgan hacia afuera para que la primera línea del texto
   arranque alineada con el resto de la página. */
.resena__texto::before{content:"“";float:left;margin-inline-start:-.42em;
  font-size:1.1em;line-height:1;opacity:.45}
.resena__quien{display:grid;gap:.15rem;align-content:start}
@media (min-width:800px){ .resena__quien{padding-block-start:.6em} }
.resena__nombre{font-weight:var(--w-bold);letter-spacing:var(--track-caps);
  font-size:var(--step-0)}
.resena__rol{color:var(--dim);font-size:var(--step--1)}
.resena__sitio{margin-block-start:var(--space-sm);color:var(--link,var(--coral-mint));
  font-size:var(--step--1);font-weight:var(--w-medium);
  text-decoration:underline;text-underline-offset:.2em}