/* ============================================================
   ZAIWEBS — Estilos específicos por página
   ============================================================ */

/* ============ Hero (Home) ============ */

.hero {
  padding-block: var(--sp-16) var(--section-y);
}

.hero__inner {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero__title { margin-bottom: var(--sp-6); }

.hero__lede {
  font-size: 1.125rem;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.hero__visual {
  display: none;
}

@media (min-width: 900px) {
  .hero__visual {
    display: block;
  }
}

/* ============ Grid de servicios (Home) ============ */

.services-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============ Por qué elegirnos (Home) ============ */

.why-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

.why-item {
  display: flex;
  gap: var(--sp-4);
}

.why-item__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-item__icon svg {
  width: 22px; height: 22px;
  stroke: var(--c-accent-hover);
  fill: none;
  stroke-width: 2.5;
}

.why-item h3 { margin-bottom: var(--sp-2); font-size: 1.125rem; }
.why-item p { color: var(--c-text-muted); }

/* ============ Portfolio preview (Home) ============ */

.portfolio-preview-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .portfolio-preview-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ CTA final ============ */

.cta-final {
  text-align: center;
}

.cta-final__inner {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}

.cta-final h2 { margin-bottom: var(--sp-4); }

.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.cta-final__email {
  margin-top: var(--sp-6);
  color: var(--c-text-invert);
  opacity: 0.75;
}

.cta-final__email a { color: var(--c-accent); font-weight: 600; }

/* ============ Servicios — bloques alternados ============ */

.service-block {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

.service-block + .service-block {
  margin-top: var(--sp-24);
}

@media (min-width: 900px) {
  .service-block {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
  }

  .service-block--reverse .service-block__visual {
    order: 2;
  }
}

.service-block__visual {
  background: var(--c-bg-alt);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-block__visual svg {
  width: 55%;
  height: 55%;
  stroke: var(--c-accent-ink);
  fill: none;
  stroke-width: 1.5;
}

.service-block__intro {
  color: var(--c-text-muted);
  margin-block: var(--sp-4) var(--sp-6);
}

.service-block__meta {
  margin-block: var(--sp-6);
  font-size: var(--fs-small);
}

.service-block__meta strong {
  color: var(--c-primary);
}

.service-block h2 { margin-bottom: var(--sp-2); }

/* ============ Portfolio ============ */

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-12);
}

.filter-chip {
  padding: var(--sp-2) var(--sp-6);
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.filter-chip:hover {
  border-color: var(--c-accent);
  color: var(--c-primary);
}

.filter-chip[aria-pressed="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.portfolio-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.portfolio-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg);
  max-width: 460px;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.portfolio-card__img {
  /* 1200x624, que es la proporción real de una captura de pantalla de
     escritorio. Antes era 16/9 y obligaba a recortarles un 8% de ancho:
     como los hero están centrados, el recorte partía los titulares al medio.
     Es más barato adaptar la tarjeta que mutilar ocho capturas. */
  aspect-ratio: 1200 / 624;
  width: 100%;
  /* height:auto no es decorativo: sin él, el atributo height="624" del <img>
     fija la altura y el aspect-ratio no llega a aplicarse nunca. El bug ya
     estaba antes con height="225", pero como 225 quedaba cerca de lo que
     daba 16/9 no se notaba. Con 624 la tarjeta se estiraba al triple. */
  height: auto;
  object-fit: cover;
  background: var(--c-bg-alt);
  display: block;
}

.portfolio-card__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

/* ---- Nombre del cliente encima de la captura ----
   El rótulo va sobre la imagen y no debajo para que el nombre y el trabajo
   se lean como una sola cosa. El precio de esa decisión es que el texto
   queda apoyado sobre una captura que puede tener cualquier color, así que
   la legibilidad no se puede dar por sentada: la resuelve el degradado
   del ::after, no la suerte. */
.portfolio-card__visual {
  position: relative;
  overflow: hidden;
  /* Aísla el apilado para que el rótulo no compita con nada de la tarjeta. */
  isolation: isolate;
}

/* Velo en dos capas.

   La de abajo es un tinte parejo sobre TODA la captura. Sin ella, el velo
   degradado dejaba la mitad superior a plena luz y los títulos largos —los
   que ocupan dos renglones, como SWS— apoyaban el segundo renglón sobre una
   zona clara de la imagen. Además baja el ruido de capturas muy saturadas
   (el amarillo de Mandarini, el rojo de GHC) para que compitan menos con el
   nombre del cliente.

   La de arriba es el degradado que concentra el oscurecimiento donde va el
   texto. Ya no llega a transparente: arranca en 0.30, que es lo que impide
   el problema de los dos renglones. */
.portfolio-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(2, 10, 18, 0.95) 0%,
      rgba(2, 10, 18, 0.86) 22%,
      rgba(2, 10, 18, 0.56) 46%,
      rgba(2, 10, 18, 0.30) 70%,
      rgba(2, 10, 18, 0.30) 100%
    ),
    rgba(2, 10, 18, 0.22);
}

/* Al pasar el mouse el velo se afloja un poco: la captura se ve mejor y el
   nombre sigue teniendo fondo suficiente. */
.portfolio-card:hover .portfolio-card__visual::after { opacity: 0.88; }

.portfolio-card__rotulo {
  position: absolute;
  left: var(--sp-6);
  right: var(--sp-6);
  bottom: var(--sp-5, 1.25rem);
  z-index: 1;              /* por encima del velo */
}

.portfolio-card__rotulo h3 {
  color: #FFFFFF;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.3rem;
  /* Segunda red de contención: si una captura tuviera una zona muy clara
     justo detrás de una letra, la sombra la despega igual. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* El rubro va como texto en versalitas y no como píldora: una píldora sobre
   una captura suma un rectángulo más a una imagen que ya tiene botones y
   menús adentro. */
.portfolio-card__rubro {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.portfolio-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.portfolio-card__tag {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  background: var(--c-bg-alt);
  padding: 0.2rem var(--sp-3);
  border-radius: 999px;
}

.portfolio-card__link {
  margin-top: var(--sp-4);
  font-weight: 600;
  color: var(--c-accent-hover);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.portfolio-card__link svg {
  width: 16px; height: 16px;
}

.portfolio-card[hidden] { display: none; }

/* ============ Nosotros ============ */

.values-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .values-grid { grid-template-columns: repeat(4, 1fr); }
}

.team-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 700px;
}

.team-card {
  text-align: center;
}

.team-card img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  margin-bottom: var(--sp-4);
}

.team-card h3 { font-size: 1.0625rem; margin-bottom: var(--sp-1); }
.team-card p { color: var(--c-text-muted); font-size: var(--fs-small); }

/* ============ Contacto ============ */

.contact-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.contact-card--whatsapp {
  background: var(--c-primary);
  color: var(--c-text-invert);
  border-color: var(--c-primary);
}

.contact-card--whatsapp h3,
.contact-card--whatsapp p { color: var(--c-text-invert); }

.contact-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card--whatsapp .contact-card__icon {
  background: rgba(255,255,255,0.12);
}

.contact-card__icon svg {
  width: 24px; height: 24px;
}

.contact-card__value {
  font-weight: 600;
  font-size: 1.125rem;
}

.contact-card__social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.contact-card__social a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  transition: background var(--transition), border-color var(--transition);
}

.contact-card__social a:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.contact-card__social svg {
  width: 20px; height: 20px;
  fill: var(--c-primary);
  transition: fill var(--transition);
}

.contact-card__social a:hover svg { fill: #fff; }

.next-steps {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  counter-reset: step;
}

@media (min-width: 700px) {
  .next-steps { grid-template-columns: repeat(3, 1fr); }
}

.next-steps li {
  position: relative;
  padding-left: 3.5rem;
}

.next-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-steps p { color: var(--c-text-muted); }

.faq-list {
  max-width: var(--container-narrow);
}

/* ============ 404 ============ */

.error-page {
  text-align: center;
  padding-block: var(--sp-24);
}

.error-page__code {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 700;
  color: var(--c-accent-ink);
  line-height: 1;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* ============ Gracias ============ */

.thanks-page {
  text-align: center;
  padding-block: var(--sp-24);
}

.thanks-page__icon {
  width: 72px;
  height: 72px;
  margin-inline: auto var(--sp-6);
  color: var(--c-success);
}

/* ============================================================
   Páginas legales (privacidad, términos)
   ============================================================
   Son textos largos que se leen de corrido, no se escanean. Lo único
   que necesitan es una columna angosta, aire entre bloques y que los
   subtítulos se distingan sin gritar. */

.legal-fecha {
  margin-top: var(--sp-3);
  font-size: 0.875rem;
  color: var(--c-text-muted);
}

.legal-titulo {
  font-size: 1.1875rem;
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-3);
  /* El filete de arriba separa las secciones sin necesidad de más espacio:
     en un texto largo el aire solo termina pareciendo un error de maqueta. */
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

.container-narrow .lede + .legal-titulo { margin-top: var(--sp-8); }

.legal-lista {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.legal-lista li { padding-left: var(--sp-2); }
.legal-lista li::marker { color: var(--c-accent); }

.container-narrow p + p { margin-top: var(--sp-4); }