/* ─────────────────────────────────────────────────────────────────────────
   Home — estilos específicos de la portada (rediseño full-screen hero).
   Sin degradados. Contenedores cuadrados (excepto botones e iconos
   circulares). Estilo limpio inspirado en la referencia.
   ───────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────
   1. HERO full-screen con imagen de fondo
   ───────────────────────────────────────────────────────────────────────── */
.hero--full {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  color: var(--c-text);
  background: var(--c-white);
  /* Compensar el header transparente: el contenido vive bajo el header */
  padding: calc(var(--header-h, 80px) + var(--sp-9)) 0 var(--sp-10);
}

/* Layout dos columnas: texto izquierda + imagen derecha */
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-9);
  align-items: center;
}
.hero__copy {
  position: relative;
  z-index: 2;
  text-align: left;
  transform: translateY(-32px);
}
.hero__eyebrow {
  color: var(--c-text-soft);
  margin-bottom: var(--sp-5);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: var(--sp-5);
}
.hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--c-text-soft);
  max-width: 560px;
  margin: 0 0 var(--sp-7);
}
.hero__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.hero__ctas .btn--ghost-light {
  background: var(--c-graphite);
  border-color: var(--c-graphite);
  color: var(--c-white);
  box-shadow: var(--sh-md);
}
.hero__ctas .btn--ghost-light:hover {
  background: var(--c-graphite-2);
  border-color: var(--c-graphite-2);
  color: var(--c-white);
}

/* Imagen a la derecha con animación de entrada desde la derecha */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  /* Animación: entra desde fuera del viewport hacia su posición final */
  animation: hero-slide-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.hero__visual img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
}
@keyframes hero-slide-in {
  from { opacity: 0; transform: translateX(80%); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__visual { animation: none; }
}
/* ─────────────────────────────────────────────────────────────────────────
   2. Layout general de secciones
   ───────────────────────────────────────────────────────────────────────── */
.section {
  padding: var(--sp-12, 6rem) 0;
}
.section--tight { padding: var(--sp-10, 5rem) 0; }
.section--alt { background: var(--c-ice); }

.section__head {
  margin-bottom: var(--sp-9);
}
.section__head.text-center,
.text-center {
  text-align: center;
}
/* Centrar el bloque de la cabecera cuando lleva .text-center
   (la base define max-width 720px sin auto-margins). */
.section__head.text-center {
  margin-left: auto;
  margin-right: auto;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--sp-4);
}
.section__sub {
  font-size: var(--fs-md);
  color: var(--c-text-soft);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}
.text-center .section__sub { margin-left: auto; margin-right: auto; }
.ctas-center {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}


/* ─────────────────────────────────────────────────────────────────────────
   2.b — Propuesta de valor: 3 pilares (Servicio, Experiencia, Confianza)
   ───────────────────────────────────────────────────────────────────────── */
.value-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-9);
  margin-top: var(--sp-10);
  text-align: center;
}
.pillar { padding: 0; }
.pillar__media {
  width: 220px;
  height: 220px;
  margin: 0 auto var(--sp-6);
  display: grid;
  place-items: center;
  position: relative;
}
.pillar__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
/* Placeholder: si la imagen no carga (onerror), mostramos un marco con
   "Imagen pendiente" para que se vea estructura sin lucir roto. */
.pillar__media.is-empty {
  border: 2px dashed var(--c-border-strong);
  background: var(--c-ice);
}
.pillar__media.is-empty::after {
  content: "Imagen pendiente";
  position: absolute;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.pillar__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin-bottom: var(--sp-4);
}
.pillar__text {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--c-text-soft);
  max-width: 320px;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────────────────────
   3. two-col (Beneficios, Contacto)
   ───────────────────────────────────────────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}
.two-col__media img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--c-border);
}
.two-col__body .eyebrow { margin-bottom: var(--sp-4); display: block; }
.two-col__body .section__title { text-align: left; }
.two-col__body .btn { margin-top: var(--sp-6); }

/* Check-list para beneficios */
.check-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.check-list li {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--c-text);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-violet);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12l3 3 5-6'/></svg>") center / 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12l3 3 5-6'/></svg>") center / 100% no-repeat;
}


/* ─────────────────────────────────────────────────────────────────────────
   4. Por qué Trixel (reasons-grid)
   ───────────────────────────────────────────────────────────────────────── */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.reason {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  transition: border-color var(--t-base), transform var(--t-base);
}
.reason:hover {
  border-color: var(--c-violet);
  transform: translateY(-4px);
}
.reason__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
  margin: 0 auto var(--sp-4);
}
.reason__icon img { width: 32px; height: 32px; }
.reason h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}
.reason p { color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.6; }


/* ─────────────────────────────────────────────────────────────────────────
   5. Servicios (svc-card) — mantiene estructura previa, sin cambios
   ───────────────────────────────────────────────────────────────────────── */
.services-grid {
  display: grid;
  /* 6 columnas para poder centrar las 2 últimas cards de un total de 5
     (cada card ocupa 2 columnas: 3 cards arriba, 2 centradas abajo). */
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-6);
}
.services-grid .svc-card { grid-column: span 2; }
/* Centrado de las 2 últimas (item 4 y 5 de 5) */
.services-grid .svc-card:nth-child(4) { grid-column: 2 / span 2; }
.services-grid .svc-card:nth-child(5) { grid-column: 4 / span 2; }
.svc-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 0 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.svc-card:hover {
  border-color: var(--c-violet);
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.svc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-mist);
}
.svc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.svc-card:hover .svc-card__media img { transform: scale(1.06); }
.svc-card__media.is-empty { background: var(--c-violet-tint); }
.svc-card__icon {
  margin-top: calc(-1 * var(--sp-7));
  margin-left: var(--sp-2);
  z-index: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
}
.svc-card__icon img { width: 30px; height: 30px; }
.svc-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--sp-3) var(--sp-6) var(--sp-2);
}
.svc-card__text {
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  margin: 0 var(--sp-6) var(--sp-5);
  line-height: 1.6;
}
.svc-card__link {
  display: inline-flex;
  gap: var(--sp-2);
  color: var(--c-violet);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin: 0 var(--sp-6);
  transition: gap var(--t-fast);
}
.svc-card:hover .svc-card__link { gap: var(--sp-3); }


/* ─────────────────────────────────────────────────────────────────────────
   6. Casos de éxito (cases-grid)
   ───────────────────────────────────────────────────────────────────────── */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.case {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base);
}
.case:hover { transform: translateY(-4px); border-color: var(--c-violet); }
.case__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-mist);
}
.case__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.case:hover .case__media img { transform: scale(1.06); }
.case__body { padding: var(--sp-5); }
.case__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--c-violet);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.case__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
}
.case__body p { color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.55; }

/* Variante .case--logo: el media muestra el logo del cliente centrado
   sobre fondo blanco (en vez de una foto cover). Se usa cuando la marca
   se identifica por su logo en lugar de una captura del proyecto. */
.case--logo .case__media {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  display: grid;
  place-items: start center;
  padding: var(--sp-4) var(--sp-7) var(--sp-6);
}
/* Modificador para logos horizontales (ej. Horeka): los empuja un poco
   más abajo dentro del marco para que no queden pegados arriba. */
.case--logo-down .case__media { padding-top: var(--sp-7); }
.case--logo .case__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* En blanco y negro por defecto; recupera el color al pasar el mouse. */
  filter: grayscale(100%);
  opacity: 0.88;
  transition: filter var(--t-base), opacity var(--t-base), transform var(--t-slow);
}
.case--logo:hover .case__media img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.04);
}
.case--logo .case__media.is-empty {
  border-style: dashed;
  background: var(--c-ice);
}


/* ─────────────────────────────────────────────────────────────────────────
   7. Iconbox grids (Garantía, Compromiso)
   ───────────────────────────────────────────────────────────────────────── */
.iconbox-grid {
  display: grid;
  gap: var(--sp-6);
}
.iconbox-grid--3 { grid-template-columns: repeat(3, 1fr); }
.iconbox-grid--4 { grid-template-columns: repeat(4, 1fr); }
.iconbox {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  transition: border-color var(--t-base), transform var(--t-base);
}
.iconbox:hover { border-color: var(--c-violet); transform: translateY(-4px); }
.iconbox__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: grid; place-items: center;
  margin: 0 auto var(--sp-4);
}
.iconbox__icon img { width: 32px; height: 32px; }
.iconbox h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
}
.iconbox p { color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.6; }


/* ─────────────────────────────────────────────────────────────────────────
   8. Contacto + formulario (sobre fondo graphite)
   ───────────────────────────────────────────────────────────────────────── */
.section--graphite {
  background: var(--c-graphite);
  color: rgba(255, 255, 255, 0.85);
}
.section--graphite .section__title,
.section--graphite .contact__intro strong { color: var(--c-white); }
.section--graphite .section__sub { color: rgba(255, 255, 255, 0.65); }

.contact { align-items: stretch; }
.contact__intro { padding: var(--sp-4) 0; }
.contact__intro .section__title { text-align: left; margin-bottom: var(--sp-4); }
.contact__list {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.contact__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact__list strong {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cyan-soft);
}
.contact__list a,
.contact__list span {
  color: var(--c-white);
  font-size: var(--fs-md);
  text-decoration: none;
}
.contact__list a:hover { color: var(--c-cyan); }

.contact-form {
  background: var(--c-white);
  color: var(--c-text);
  padding: var(--sp-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form .field--full { grid-column: 1 / -1; }
.contact-form label {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  font-weight: 600;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: inherit;
  font-size: var(--fs-md);
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-text);
  transition: border-color var(--t-fast);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--c-violet);
}
.contact-form textarea { resize: vertical; min-height: 100px; }
.contact-form button { grid-column: 1 / -1; }


/* ─────────────────────────────────────────────────────────────────────────
   9. Responsive
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid   { grid-template-columns: repeat(2, 1fr); }
  .iconbox-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  /* Reset del span y centrado calculados para 6 cols */
  .services-grid .svc-card,
  .services-grid .svc-card:nth-child(4),
  .services-grid .svc-card:nth-child(5) { grid-column: auto; }
  .value-pillars { gap: var(--sp-7); }
}
@media (max-width: 760px) {
  .value-pillars { grid-template-columns: 1fr; gap: var(--sp-8); }
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); text-align: center; }
  .hero__copy { text-align: center; transform: translateY(-18px); }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__ctas { justify-content: center; }
  .hero__visual { order: 2; }
  .hero__visual img { max-width: 320px; }
}
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; gap: var(--sp-7); }
  .two-col__body .section__title { text-align: center; }
  .contact-form { grid-template-columns: 1fr; }
  .iconbox-grid--3 { grid-template-columns: 1fr; }
  .reasons-grid, .cases-grid, .services-grid, .iconbox-grid--4 { grid-template-columns: 1fr; }
  .hero--full { min-height: 90vh; }
}