/* ============================================================================
   SPICA STUDIO · EL BLOQUE DE INDUSTRIAS DEL HOME (r27, ampliado en r32)
   ----------------------------------------------------------------------------
   La seccion #industries entra en el sitio exacto donde vivia el pin de las
   tres specialties, entre #before-after y #steps, y es la unica que carga esta
   hoja. Va en archivo nuevo por la regla 15 de la casa: sections.css no se
   toca, y el CSS de .specialties, .spec-card y .pin--spec se queda ahi como
   codigo muerto documentado.

   Tres decisiones que conviene dejar por escrito:

   1 · LA FOTO VA DEBAJO, al reves que en el popup de industrias (r26), donde
       el texto se monta sobre la imagen. Es lo que separa las dos piezas: el
       popup interrumpe y tiene que gritar, este bloque acompana la lectura de
       la portada y deja el nombre de la industria en papel, legible.

   2 · NADA NUEVO DE COLOR. La tarjeta es la de .steps__card y .cat-card (papel
       elevado, radio grande, hover de -5px) y el enlace "How we ..." es
       .pin-slide__more calcado en violeta, el acento por defecto del sistema.
       Aqui no hay acento por industria a proposito: cuatro colores distintos
       en una fila de cuatro tarjetas convertirian la seccion en un semaforo.

   3 · UN SOLO ENLACE POR TARJETA. La tarjeta entera es clicable porque
       .ind-card__more::after la cubre, la misma tecnica de .cat-card: sin
       enlaces anidados, sin onclick y con una sola parada de teclado.

   En r32 la seccion deja de terminar en la reja y pasa a cerrar con su propio
   par de CTA, asi que tambien cambia como respira. El porque de cada numero
   esta escrito en las dos reglas afectadas, aqui abajo.
   ========================================================================== */

/* r32: hasta r31 la seccion no llevaba NI UN PIXEL de aire abajo, porque
   terminaba en la reja de fotos y se apoyaba en el aire de arriba del #steps
   que viene detras. Ese razonamiento se cae en cuanto la seccion cierra con dos
   botones: un CTA pegado al borde de la seccion siguiente no parece el final de
   este bloque, parece el principio del otro, y esa es la lectura que Cesar
   describio como que los botones "no tienen su lugar".
   Asi que el aire de abajo se iguala al de arriba, 0.7 rhythm por lado, que es
   justo lo que ya hace .doors (sections.css 757), la otra seccion de reja con
   cierre propio y con exactamente el mismo margen de section-head.
   Lo que se gana es simetria medible en las dos costuras del bloque, porque las
   secciones vecinas son casi espejo: .ba cierra con 0.6 rhythm y esta abre con
   0.7 (1.3 rhythm), y ahora esta cierra con 0.7 y .steps abre con 0.6 (1.3
   rhythm otra vez). A 1440 son 206 px arriba y 206 px abajo; antes eran 206 px
   arriba y 95 px abajo, y por eso el borde inferior se veia pegado. */
.industries { padding: calc(var(--rhythm) * 0.7) 0; }
.industries .section-head { margin-bottom: calc(var(--rhythm-half) * 0.75); }

.industries__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}
/* mismo motivo que en .steps__card > * y .cat-card > *: sin esto la columna se
   dimensiona por el min-content del hijo mas ancho y una tarjeta estira a sus
   vecinas en las ventanas estrechas de escritorio */
.industries__grid > * { min-width: 0; }

/* ---- el par de CTA que cierra la seccion (r32) ------------------------------ */
/* Calcado de .steps__cta (sections.css 2164): la misma fila centrada en los dos
   ejes, el mismo wrap y el mismo gap de 0.9rem. No es pereza, es obligatorio:
   en esta misma portada conviven los dos pares con los mismos dos botones y las
   mismas dos puertas (data-door="plan" y data-door="demo"), asi que tienen que
   verse y comportarse igual. Vive en esta hoja y no en sections.css por la
   regla 15 de la casa: cada bloque escribe en la hoja que le toca.
   El margen de arriba es el MISMO valor que .industries .section-head lleva de
   margen abajo, para que la reja quede con el mismo aire por arriba y por abajo
   dentro de la seccion: 59 px por lado a 1440, 35 px en iPad, 24 px en telefono.
   Sin ese margen los botones se pegarian a la ultima fila de fotos, que es el
   otro lado del mismo problema que arregla el padding de arriba.
   En celular no lleva regla propia, y es una decision, no un olvido: .steps__cta
   tampoco la lleva en ninguna hoja. Es el mismo marcado dentro del mismo .shell,
   asi que los dos botones se quedan en una fila mientras quepan y, cuando dejan
   de caber, el flex-wrap los apila centrados, exactamente igual que el par de
   #steps en esa misma pantalla. Forzar aqui un ancho completo que #steps no
   tiene dejaria dos CTA distintos en la misma portada. */
.industries__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: calc(var(--rhythm-half) * 0.75);
}

/* ---- la tarjeta ------------------------------------------------------------ */
.ind-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--dur-state) var(--ease-out),
    box-shadow var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out);
}
.ind-card > * { min-width: 0; }
.ind-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--violet);
}

.ind-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem;
}
.ind-card__head .h3 {
  font-size: 1.25rem;
  line-height: 1.15;
}
.ind-card__line {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- el enlace, que es toda la tarjeta ------------------------------------- */
/* calcado de .pin-slide__more (sections.css), con el violeta del sistema en
   lugar de --pin-accent: aqui no hay acento por slide del que heredar.
   Un cambio si, y medido: el original es inline-flex, que en el pin nunca
   estorba porque el texto es corto. Aqui el espanol ocupa dos lineas ("Como
   trabajamos con remodeladores") y con inline-flex la flecha se quedaba
   colgada al borde derecho de la tarjeta, lejos de la ultima palabra y a
   distinta altura en cada tarjeta. Con el texto en flujo normal la flecha va
   pegada al final de la ultima linea, en los dos idiomas. */
.ind-card__more {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 520;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--violet);
}
.ind-card__more em {
  font-style: normal;
  display: inline-block;
  vertical-align: -0.12em;
  margin-left: 0.35rem;
  width: 1em;
  height: 1em;
  transition: transform var(--dur-state) var(--ease);
}
.ind-card__more em svg { width: 100%; height: 100%; }
/* z-index 1 y no es capricho: la foto lleva transform al pasar el raton, y un
   elemento transformado se pinta en la misma capa que los posicionados, o sea
   POR ENCIMA de este ::after por orden de arbol. Sin el indice, la mitad de
   abajo de la tarjeta dejaba de ser clicable en cuanto habia hover. Medido con
   elementFromPoint al 12, 50 y 88 % del alto de la tarjeta. */
.ind-card__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ind-card:hover .ind-card__more em { transform: translateX(4px); }
.ind-card:focus-within {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
.ind-card__more:focus-visible { outline: none; }

/* ---- la foto --------------------------------------------------------------- */
/* va al final de la tarjeta y ocupa lo que sobra, para que cuatro nombres de
   largo distinto no dejen las fotos a distinta altura */
.ind-card__media {
  margin-top: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--mist);
}
.ind-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.ind-card:hover .ind-card__media img { transform: scale(1.04); }

/* ============================================================================
   RESPONSIVE · en orden descendente, como el resto del sitio
   ========================================================================== */

/* --- iPad y ventanas medianas (<=1080) ----------------------------------- */
@media (max-width: 1080px) {
  .industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-card__head { padding: 1.25rem; }
}

/* --- telefono (<=619) ----------------------------------------------------- */
@media (max-width: 619px) {
  .industries__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- tactil --------------------------------------------------------------- */
/* la afordancia del enlace no puede depender del hover */
@media (hover: none) {
  .ind-card__more em { opacity: 1; transform: none; }
}

/* --- movimiento reducido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ind-card,
  .ind-card__more em,
  .ind-card__media img { transition: none; }
  .ind-card:hover { transform: none; }
  .ind-card:hover .ind-card__media img { transform: none; }
}

/* ===========================================================================
   r32 · EL AIRE DEL FAQ, SOLO EN LAS DOS PORTADAS

   Al mover el catalogo detras del FAQ, el FAQ cambio de vecino: antes lo
   precedia el catalogo, que cierra con su propio aire, y ahora lo precede el
   par de botones que cierra #steps. Como `.faq` no tiene NADA de aire arriba
   (sections.css: `padding: 0 0 var(--rhythm)`), los botones quedaron pegados al
   titular de las preguntas. Medido en Chromium sobre el sitio construido: 7 px
   a 390, 18 px a 768 y 77 px a 1440. Es exactamente la queja que Cesar hizo
   sobre #industries, trasplantada a otra seccion por el cambio de orden, y
   habria sido un defecto nuevo estrenado en esta misma ronda.

   Va en ESTA hoja y no en sections.css a proposito, y no solo por la regla 15:
   css/industries.css la piden EXACTAMENTE las dos portadas, que son las dos
   unicas paginas donde el FAQ cambio de vecino. En las ocho de industria el
   catalogo ya iba detras del FAQ desde r28 y alli el ritmo no se toca. La hoja
   se carga despues de sections.css, asi que gana sin necesidad de !important.

   0.55 y no 0.7: el par de botones ya trae su propio margen superior, y el
   titular del FAQ no va centrado sino a la izquierda de una reja de dos
   columnas, que pide menos aire que una cabecera centrada. Resuelto: 87 px a
   1440, 45 px a 1024 y 28 px a 390, que devuelve la costura a la familia del
   resto de la pagina sin abrir un hueco. */
.faq { padding-top: calc(var(--rhythm) * 0.55); }