/* ============================================================================
   Composicion por pagina.
   Los planos diagonales usan la primitiva .plane de base.css: aqui solo se
   dice donde va el reparto y cuanto respira el contenido.
   ========================================================================== */

/* ============================ HOME ======================================== */

/* --- hero -------------------------------------------------------------------
   La foto va a sangre y el plano verde profundo la corta: es la portada del
   folleto. Un unico <h1> en toda la pagina.
   -------------------------------------------------------------------------- */
.hero { display: grid; align-items: end; min-height: min(42rem, 88svh); color: var(--c-on-dark); }
.hero__media img { object-position: 62% 40%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgb(27 25 25 / .80) 0 28%, rgb(27 25 25 / .22) 62%, rgb(27 25 25 / .38));
}
/* Plano OPACO. Al .93 se transparentaba el techo de la nave y leia como
   suciedad sobre el plano. Y como el titular (13ch) y el lead (34ch) caben
   dentro del 52%, el blanco queda garantizado a 8,73:1 pase lo que pase en la
   foto: por eso el degradado de la derecha puede bajar a .22/.38 y dejar
   pasar el color de las rosas. */
.hero .plane { --split: 52%; }
.hero__inner { padding-block: var(--s-6) var(--diag-pad); }

/* En movil el plano NO tapa la foto entera: la fotografia respira arriba y el
   plano verde entra por debajo con el borde superior en diagonal, que es como
   esta compuesta la portada del folleto. Con el plano a inset:0 y opacidad .93
   el trabajador desaparecia por completo. */
@media not all and (min-width: 64rem) {
  .hero { min-height: 0; }
  .hero .plane { inset: 13rem 0 0 0; opacity: 1; }
  .hero__inner { padding-block-start: 15rem; }
  /* La capa de foto se limita a la banda que queda a la vista. Si ocupa el alto
     entero del hero, object-fit encuadra sobre 729px y por la rendija de 208px
     solo se ve el techo de la nave, no la gente.
     El alto es 13rem + --diag, no 14rem fijo: el borde superior del plano es
     diagonal y arranca en 13rem + --diag por la izquierda, asi que con 14rem
     asomaba el blanco del body justo ahi. El hueco era --diag - 1rem: 6,5px a
     375px, 30px a 768px y 45,4px a 1023px. Atando los dos numeros se cierra a
     cualquier ancho y de paso se ve mas foto. */
  .hero__media { inset: 0 0 auto 0; height: calc(13rem + var(--diag)); }
}
@media (min-width: 64rem) { .hero__inner { padding-block: var(--s-10) var(--section-y); } }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-display); max-width: 13ch; }
.hero__lead { margin-block-start: var(--s-5); color: var(--c-on-dark-2); max-width: 34ch; }
.hero__actions { margin-block-start: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* --- el unico momento coreografiado del sitio -------------------------------
   Se ANADE bajo `no-preference`, no se quita bajo `reduce`. Asi el estado por
   defecto es el estatico y visible: el contenido no puede quedarse invisible
   nunca, que es exactamente el fallo que traia IX2.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__title     { animation: sss-rise var(--dur-3) var(--ease-out)       both; }
  .hero__lead      { animation: sss-rise var(--dur-3) var(--ease-out)  90ms both; }
  .hero__actions   { animation: sss-rise var(--dur-3) var(--ease-out) 170ms both; }
  .hero__media img { animation: sss-settle 1400ms var(--ease-out) both; }
}
@keyframes sss-rise   { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes sss-settle { from { transform: scale(1.06); } to { transform: none; } }

/* --- franja de marcas ------------------------------------------------------ */
/* .brands y la seccion de servicios son las dos blancas y se leian como una
   sola: 2.140px de blanco corrido a 375. Un filete marca la costura sin mover
   la franja a --c-paper-2, que es lo que haria aparecer la caja blanca opaca
   que aun trae uno de los catorce logos. Eran DOS: el JPEG de Miami Agro
   Import ya no esta en el sitio, asi que solo queda logo-servientrega.png
   (25,3% de blanco opaco). Cuando llegue su PNG con alfa -- y el SVG morado de
   The Elite Flower, si algun dia entra -- esto se puede sustituir por el cambio
   de fondo. */
.brands { padding-block: var(--s-8); border-block-end: 1px solid var(--c-line); }
.brands__title { font-size: var(--fs-h3); text-align: center; margin-block-end: var(--s-6); }

/* --- servicios ------------------------------------------------------------- */
.svc-grid { display: grid; gap: var(--s-7); margin-block-start: var(--s-8); }
@media (min-width: 40rem) { .svc-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }

/* --- quienes somos (la diagonal insignia) ---------------------------------- */
.who { color: var(--c-on-dark); }
/* El corte pasa del 58% al 47%. Al 58% la cuna visible medida 39% de la seccion
   y el grupo 45,5% del ancho de la foto: no cabia, y la primera persona vivia
   detras de la diagonal pasara lo que pasara con el JPEG. Al 47% la cuna da de
   si lo suficiente. El limite por la izquierda lo marco el cliente y esta a la
   altura del 41-52%, asi que 47% cae dentro con holgura por los dos lados.

   El corte vive en .who y no en .plane para que la foto pueda leerlo: los dos
   tienen que apoyarse en el MISMO numero o vuelve a aparecer la rendija. */
.who { --split: 47%; }

/* La foto NO va de fondo de la seccion, va acotada a la cuna que el plano deja
   libre. Con el fondo a toda anchura la geometria no tiene solucion: el grupo
   ocupa el 45,5% del ancho de la imagen y a 1920 la ventana vertical de `cover`
   solo deja el 61,7% del alto cuando el grupo mide 63,9%. Da igual el recorte
   del JPEG —se cancela en la cuenta—, siempre se corta a alguien. Por eso la
   primera persona quedaba detras de la diagonal y los pies se iban.

   Acotada a la cuna, la caja siempre es mas estrecha que la foto (1,07 frente a
   1,79 a 1440), asi que `cover` escala por ALTO: el grupo entra entero de cabeza
   a pies a cualquier ancho, y el recorte se lo come el pasillo por los lados.
   El borde izquierdo va al corte INFERIOR del plano, que es el punto mas a la
   izquierda que alcanza la diagonal: asi no queda rendija por debajo. */
.who__media { display: none; }
@media (min-width: 64rem) {
  .who__media { display: block; inset: 0 0 0 calc(var(--split) - var(--diag) / 2); }
  /* 90% y no `center`: el grupo vive entre el 48,5% y el 94% del ancho de la
     foto y la ventana hay que llevarla ahi. El ancho critico es 1024, donde la
     seccion es mas baja y la ventana se queda en el 47,2% —solo 1,7 puntos mas
     que el grupo—; al 90% ese margen queda repartido (1,0 a la izquierda, 0,7 a
     la derecha). Subirlo a 92% metia el borde de la ventana en el 48,6% y
     rozaba a la primera persona. */
  .who__media img { object-position: 90% center; }
}
.who__inner { padding-block: var(--section-y) var(--diag-pad); }
.who__body { max-width: 50ch; color: var(--c-on-dark-2); }
.who__body p + p { margin-block-start: var(--s-4); }
.who__pull {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-block-start: 2px solid var(--c-green);
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--tr-display);
  color: var(--c-on-dark);
  max-width: 28ch;
}
@media (min-width: 64rem) {
  .who__inner { padding-block: var(--section-y); }
  .who__grid { display: grid; grid-template-columns: 50% 1fr; }
  .who__body { max-width: 40ch; }
}

/* --- por que elegirnos ----------------------------------------------------- */
.why { background: var(--c-paper-2); }
.why__grid { display: grid; gap: var(--s-8); }
@media (min-width: 64rem) {
  .why__grid { grid-template-columns: 1fr 1.3fr; gap: var(--s-10); align-items: start; }
  .why__intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.why__items { display: grid; }
@media (min-width: 40rem) { .why__items { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }

/* --- cinta de llamada a la accion ------------------------------------------ */
.cta-band { color: var(--c-on-dark); text-align: center; }
.cta-band__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgb(27 25 25 / .80), rgb(42 84 45 / .80));
}
.cta-band__inner { padding-block: var(--diag-pad); }
.cta-band__title { font-size: var(--fs-h1); max-width: 18ch; margin-inline: auto; }
.cta-band__lead { margin-block-start: var(--s-5); margin-inline: auto; color: var(--c-on-dark-2); }
.cta-band__actions { margin-block-start: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }

/* --- proceso --------------------------------------------------------------- */
.process__grid { display: grid; gap: var(--s-8); }
@media (min-width: 64rem) { .process__grid { grid-template-columns: 1fr 1fr; gap: var(--s-10); align-items: start; } }
.process__media { aspect-ratio: 4 / 3; }
.process__steps { margin-block-start: var(--s-7); }

/* --- testimonios ----------------------------------------------------------- */
.quotes { background: var(--c-ink); color: var(--c-on-dark); }
.quotes__head { max-width: 48ch; margin-block-end: var(--s-8); }

/* ============================ CABECERA DE PAGINA INTERIOR ================= */
.page-hero { background: var(--c-green-deep); color: var(--c-on-dark); }
.page-hero--ink { background: var(--c-ink); }
.page-hero__inner { padding-block: var(--section-y) var(--diag-pad); }
.page-hero__title { font-size: var(--fs-h1); max-width: 16ch; }
/* 34ch, no 48ch, y es el mismo que usa el lead del hero de la home. Con 48ch
   la caja media 759px contra un plano opaco que acaba en el 48% del ancho:
   el parrafo salia del plano y caia sobre la foto. Medido: 1,27:1 en
   /services a 1440 y 1,41:1 en /about-us. Con 34ch ninguna linea cruza y el
   peor punto sube a 10,45:1 y 5,85:1. */
.page-hero__lead { margin-block-start: var(--s-5); color: var(--c-on-dark-2); max-width: 34ch; }

/* Hero de pagina CON fotografia.
   Tres decisiones, y las tres son a proposito:

   1. La foto va como background-image, no como <img>. Un <img> con display:none
      se descarga igual. Dentro de la media query el navegador no la pide
      siquiera. .who tenia ese mismo desperdicio y se arreglo igual.

   2. El corte es un plano DURO de --c-green-deep, no un degradado que tine la
      foto entera. Con foto oscura un scrim verde suave valia; con flor de color
      la volvia verdosa (saturacion 46% contra 58% con el plano duro) y encima se
      veia la nave fantasmeando bajo el verde, que es el mismo defecto que ya
      tiene el hero de la home. Asi que se copia lo que SI funciona en .who:
      plano opaco donde va el texto, foto intacta al otro lado.
      El corte va al 48%: medido, al 44% el titular cae sobre una zona clara de
      la foto y baja a 2,44:1. Al 48% el texto queda entero sobre verde macizo,
      8,73:1 garantizado. Los 96deg reproducen la inclinacion de .plane--split
      (86,4px sobre 794 = 6,2 grados desde la vertical).

   3. Solo a partir de 64rem. Por debajo el marco de estas secciones es casi
      cuadrado (0,41 en /contact-us, 0,82 en /services a 375px) y un 16:9 ahi se
      magnifica hasta lo ilegible. Debajo se queda el plano liso, que ya funciona.

   /services se queda SIN foto a proposito. Se probo un plano de nave desierta y
   medido no se ve: sigma de luminancia 0,31 en el tercio derecho contra 4,23 del
   hero de /about-us, y bajando el scrim hasta .72/.18/.32 solo sube a 1,54, punto
   en el que ya no hay plano de carbon. La imagen era intrinsecamente casi negra.
   Ademas debajo vienen tres fotos grandes y el carbon liso es lo que las deja
   respirar. El hueco de esa seccion no es falta de imagen: son 335px de padding
   alrededor de 320px de contenido. */
@media (min-width: 64rem) {
  .page-hero--aisle {
    background-image:
      linear-gradient(96deg, var(--c-ink) 0 48%, rgb(27 25 25 / 0) 48.6%),
      image-set(url('../images/checklist-overlay-1440.jpg') 1x,
                url('../images/checklist-overlay-2382.jpg') 1.65x);
  }
  .page-hero--cold-room {
    background-image:
      linear-gradient(96deg, var(--c-green-deep) 0 48%, rgb(42 84 45 / 0) 48.6%),
      image-set(url('../images/office-team-1440.jpg') 1x,
                url('../images/office-team-2000.jpg') 1.5x,
                url('../images/office-team-2731.jpg') 2x);
  }
  .page-hero--cold-room,
  .page-hero--aisle { background-size: cover; background-position: center; background-repeat: no-repeat; }
}

/* --- la fotografia que el movil no veia -------------------------------------
   Tres secciones tenian su foto SOLO dentro de min-width:64rem y por debajo de
   1024px eran un rectangulo de color liso: .who, el hero de /services y el de
   /about-us. Es decir, el visitante tipico de un sitio asi no veia tres de las
   diez fotografias.

   Bajar sin mas la imagen fuera de la media query no arregla nada, y esta medido
   ahi arriba: en .who el plano OPACO solo deja escapar un 0,6% de la seccion
   —se descargarian 188 KB a DPR3 para no ensenar nada—, y en los dos heroes el
   marco es casi cuadrado a 375px (0,82), no hay min-height, y un 2,4:1 con cover
   ahi se magnifica hasta lo ilegible; ademas el corte del 48% son 180px a 375px
   y el titular de 16ch lo cruzaria en todas las lineas.

   Se copia lo que el propio hero de la home ya hace por debajo de 64rem (lineas
   28-45): banda de foto arriba con altura controlada, color macizo debajo, texto
   SIEMPRE sobre el color. Asi ninguna linea se apoya en la imagen y el contraste
   sigue siendo el de los planos, que ya estaba medido.

   Los recortes son propios, no reescalados: el encuadre de escritorio pone el
   sujeto en la mitad derecha para que sobreviva bajo el plano, y en una banda
   ancha eso deja media foto vacia.

   El borde inferior de la banda es RECTO a proposito. Los dos heroes ya gastan
   la diagonal de su pantalla en la cuna .plane--wedge-br, y la regla 3 de
   base.css:116 permite una por altura de pantalla.
   -------------------------------------------------------------------------- */
@media not all and (min-width: 64rem) {
  .who, .page-hero--cold-room, .page-hero--aisle { --band-h: clamp(11rem, 34vw, 24rem); }
  .who::before,
  .page-hero--cold-room::before,
  .page-hero--aisle::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; z-index: 0;
    height: var(--band-h);
    background-size: cover; background-repeat: no-repeat;
  }
  .who::before {
    background-image: image-set(url('../images/warehouse-crew-band-800.jpg') 1x,
                                url('../images/warehouse-crew-band-972.jpg') 1.5x);
    background-position: 50% 35%;
  }
  .page-hero--cold-room::before {
    background-image: image-set(url('../images/office-team-band-800.jpg') 1x,
                                url('../images/office-team-band-1200.jpg') 1.5x,
                                url('../images/office-team-band-1600.jpg') 2x);
    background-position: 50% 40%;
  }
  .page-hero--aisle::before {
    background-image: image-set(url('../images/checklist-band-800.jpg') 1x,
                                url('../images/checklist-band-1200.jpg') 1.5x,
                                url('../images/checklist-band-1600.jpg') 2x);
    background-position: 50% 50%;
  }
  .who .plane { inset: var(--band-h) 0 0 0; }
  .who__inner,
  .page-hero__inner { padding-block-start: calc(var(--band-h) + var(--section-y)); }
}

/* Fichas de ancla del hero de servicios: ademas de navegar, son la prueba en
   pagina de que scroll-padding-top deja el destino por debajo de la barra. */
.anchor-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-7); }
/* Mismo motivo que el lead: la tercera ficha acababa 16px pasado el corte y su
   anillo de foco caia sobre una zona clara de la foto, a 1,98:1. */
@media (min-width: 64rem) { .anchor-chips { max-width: 45%; } }
.anchor-chip {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-inline: var(--s-5);
  border-radius: var(--r-2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .32);
  color: var(--c-on-dark); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.anchor-chip:hover { background: var(--c-green); color: var(--c-ink); box-shadow: none; }

/* --- bloque de socio (hero de sobre nosotros) ------------------------------ */
.partner-chip {
  display: inline-flex; align-items: center; gap: var(--s-4);
  margin-block-start: var(--s-7);
  padding: var(--s-3) var(--s-5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28);
  border-radius: var(--r-2);
  text-decoration: none;
}
.partner-chip img { height: 2.5rem; width: auto; }
.partner-chip__name { font-weight: 600; }
.partner-chip__role { font-size: var(--fs-sm); color: var(--c-on-dark-2); }

/* ============================ SOBRE NOSOTROS ============================== */
.values__grid { display: grid; margin-block-start: var(--s-8); }
@media (min-width: 40rem) { .values__grid { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
@media (min-width: 64rem) { .values__grid { grid-template-columns: repeat(4, 1fr); } }

.profile { background: var(--c-paper-2); }
.profile__grid { display: grid; gap: var(--s-7); }
@media (min-width: 64rem) {
  .profile__grid { grid-template-columns: 14rem 1fr; gap: var(--s-10); align-items: start; }
  /* El rail medía 331,5px dentro de una fila de 849,9px: 518,4px de columna
     izquierda vacia, el 61%. Acompana al texto en vez de quedarse arriba,
     igual que .why__intro. */
  .profile__rail { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.profile__rail { display: flex; flex-direction: column; gap: var(--s-3); }
.profile__avatar { width: 12rem; height: 12rem; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.profile__name { font-size: var(--fs-h2); }
.profile__role { font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600; color: var(--c-green-ink); letter-spacing: 0; }
.profile__bio > p + p { margin-block-start: var(--s-5); }
.profile__pull {
  margin-block: var(--s-6);
  padding-inline-start: var(--s-5);
  border-inline-start: 3px solid var(--c-green);
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: var(--tr-display);
  max-width: 32ch;
}

/* El plano carbon deja al descubierto la cuna de arriba a la derecha. Sin fondo
   propio esa cuna es el blanco del body y la diagonal se lee como un corte
   suelto; con el gris de .profile continua la seccion anterior y el corte se
   lee como lo que es. */
.mission { background: var(--c-paper-2); }
.mission__inner { padding-block: var(--diag-pad) var(--section-y); color: var(--c-on-dark); }
.mission__grid { display: grid; gap: var(--s-8); }
@media (min-width: 64rem) { .mission__grid { grid-template-columns: 1fr 1fr; gap: var(--s-10); } }
.mission__body { max-width: 46ch; }
.mission__body p + p { margin-block-start: var(--s-4); }
.mission h2, .mission h3 { margin-block-end: var(--s-4); }
/* Mismas metricas que .value__icon y .includes__icon: las tres rejillas de
   iconos del sitio miden igual. Aqui el <img> SI puede ir de hermano antes del
   encabezado —el contenedor es un <div> normal, no el <div> de un <dl>. */
/* El bloque es carbon, y los SVG originales llevan fill="#1b1919" incrustado:
   sobre el plano serian invisibles. Van dos copias -on-dark con ese carbon
   pasado a blanco. Un filter:invert(1) habria sido mas corto pero convierte el
   verde del catalejo en magenta; el acento verde se conserva a proposito. */
.mission__icon { display: block; width: 2.75rem; height: 2.75rem; margin-block-end: var(--s-4); }

/* Banda divisoria de /contact-us. Responde "existis de verdad y estais en
   Doral" sin empujar el formulario: 96-192px de alto, y va DESPUES del hero,
   antes del formulario. Lleva .photo, asi que recibe el mismo tratamiento
   fotografico que el resto (saturate .88 y el scrim de 200deg). */

/* ============================ SERVICIOS =================================== */
.svc-row { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 48rem) { .svc-row { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }
.svc-row__media { aspect-ratio: 5 / 4; }
@media (min-width: 48rem) { .svc-row--flip .svc-row__media { order: 2; } }
.svc-row__title { font-size: var(--fs-h2); margin-block-end: var(--s-4); }
.svc-row__body { color: var(--c-mute); max-width: 46ch; }
.svc-row__body p + p { margin-block-start: var(--s-4); }
.svc-row__cta { margin-block-start: var(--s-6); }
.svc-row + .svc-row { margin-block-start: var(--section-y); }
.svc-alt { background: var(--c-paper-2); }

/* Lo que incluye el servicio: plano verde, cortado arriba. */
.includes__inner { padding-block: var(--diag-pad) var(--section-y); color: var(--c-ink); }
.includes__grid { display: grid; margin-block-start: var(--s-7); }
@media (min-width: 40rem) { .includes__grid { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }
/* "Workers' compensation insurance" necesita ~13,5em de caja para caber en una
   linea, y a 28px eso son 364px. Con tres columnas y el hueco de --s-8 la
   columna medía 357px, asi que partia y dejaba "insurance" sola; text-wrap:
   balance no puede hacer nada si sencillamente no cabe. Tres columnas solo
   caben cuando .u-page toca su tope de 75rem, y eso pasa a partir de 80rem de
   viewport: por debajo la caja se queda corta a cualquier hueco. Hasta ahi,
   dos columnas. El hueco baja a --s-6 para dar los ultimos pixeles. */
@media (min-width: 80rem) { .includes__grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-6); } }
.includes__item { padding-block: var(--s-5); border-block-start: 1px solid rgb(27 25 25 / .24); }
/* <dt> no es un heading, asi que el text-wrap: balance de base.css no le
   llegaba y "Workers' compensation insurance" dejaba "insurance" sola. */
.includes__term { font-family: var(--ff-display); font-size: var(--fs-h3); letter-spacing: var(--tr-display); text-wrap: balance; }
/* El icono va DENTRO del <dt>: dentro de un <dl>, el <div> que agrupa solo
   admite <dt> y <dd>, asi que un <img> hermano no seria HTML valido. Y va
   encima del termino, no a su izquierda: la columna ya va justa —ver el
   comentario de las tres columnas mas arriba— y robarle ancho volveria a
   partir "Workers' compensation insurance". Mismas metricas que .value__icon
   para que las dos rejillas de iconos del sitio midan igual. */
.includes__icon { display: block; width: 2.75rem; height: 2.75rem; margin-block-end: var(--s-3); }
.includes__desc { color: rgb(27 25 25 / .86);   /* .76 daba 4,44:1 sobre el verde: por debajo de AA */ font-size: var(--fs-sm); margin-block-start: var(--s-1); }

/* Puestos que cubrimos: la seccion que mas debe parecer una pagina del folleto. */
.positions { background: var(--c-ink); color: var(--c-on-dark); }
/* Los catorce puestos son la promesa mas ancha del sitio y se hacia sin una sola
   imagen. Cabecera a dos columnas desde 48rem —texto a la izquierda, foto a la
   derecha— y la lista sigue debajo a ancho completo, con sus columns intactas.
   La foto es la unica del sitio que NO es el mundo de la flor: es lo que hace
   creible "si el puesto mantiene tu operacion en marcha, ya lo hemos cubierto".
   No va a sangre: medido en la fase 1, este encuadre solo sobrevive a medias una
   banda tendida y decapita al operario del fondo. Contenida y en 3:2, que es su
   proporcion nativa, no pierde nada. */
.positions__head { display: grid; gap: var(--s-7); }
@media (min-width: 48rem) {
  .positions__head { grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; }
}
.positions__media { aspect-ratio: 16 / 9; }
.positions__list { margin-block-start: var(--s-8); }
@media (min-width: 40rem) { .positions__list { columns: 2; column-gap: var(--s-8); } }
@media (min-width: 64rem) { .positions__list { columns: 3; } }
.positions__item {
  break-inside: avoid;
  padding-block: var(--s-4);
  border-block-start: 1px solid rgb(67 181 86 / .40);
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-display);
  line-height: 1.1;
}
.positions__note { margin-block-start: var(--s-7); color: var(--c-on-dark-2); }

/* ============================ CONTACTO ==================================== */
.contact-hero { background: var(--c-green-deep); color: var(--c-on-dark); }
/* La foto pasa a ser el fondo del hero con el velo encima, en vez de un hero de
   verde plano seguido de una rendija de 192px con la misma imagen. Es la
   estructura de la cinta CTA (mas abajo), pero con el degradado DIRECCIONAL:
   pesado arriba a la izquierda, donde viven el titular y el lead, y mas abierto
   abajo a la derecha para que la nave se lea. Las tres fichas son --c-ink opaco,
   asi que se sostienen solas pase lo que pase detras. */
.contact-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgb(42 84 45 / .97) 0 40%,
    rgb(42 84 45 / .88) 68%,
    rgb(27 25 25 / .78));
}
.contact-hero__inner { padding-block: var(--section-y) var(--diag-pad); }

/* Las fichas cruzan el corte a proposito: son opacas, asi que ahi el solape es seguro. */
.contact-tiles { display: grid; gap: var(--s-4); margin-block-start: var(--s-8); }
/* El <li> ya estiraba, pero la ficha es el <a> de dentro y se quedaba a su alto:
   con el email partido en dos lineas su ficha era mas alta que las otras dos. */
.contact-tiles > li { display: flex; }
.contact-tiles > li > .contact-tile { flex: 1; }
@media (min-width: 48rem) { .contact-tiles { grid-template-columns: repeat(3, 1fr); } }
.contact-tile {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-6);
  background: var(--c-ink);
  box-shadow: inset 0 3px 0 var(--c-green), var(--shadow-1);
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out);
}
.contact-tile img { width: 1.75rem; height: 1.75rem; margin-block-end: var(--s-2); }
.contact-tile__label { font-size: var(--fs-sm); color: var(--c-on-dark-2); }
.contact-tile__value { font-family: var(--ff-display); font-size: 1.25rem; letter-spacing: .01em; overflow-wrap: anywhere; }
a.contact-tile:hover { background: var(--c-ink-2); transform: translateY(-2px); }

.contact-form-section { padding-block: var(--section-y); }
/* La columna del titular era hueco muerto de 64rem para arriba. La foto responde
   la misma pregunta que la banda de doral-dock —"existis de verdad y estais en
   Doral"— pero desde dentro de la nave, con las palmeras al fondo del porton. */
.contact-form-section__media { aspect-ratio: 3 / 2; margin-block-start: var(--s-7); }
.contact-form-section__grid { display: grid; gap: var(--s-8); }
@media (min-width: 64rem) { .contact-form-section__grid { grid-template-columns: 1fr 1.2fr; gap: var(--s-10); align-items: start; } }

/* ============================ SOLICITUD DE EMPLEO ========================= */
.apply { padding-block: var(--section-y); }
.apply__intro { color: var(--c-mute); margin-block-start: var(--s-4); max-width: 60ch; }
.apply__form { margin-block-start: var(--s-8); display: grid; gap: var(--s-9); }

/* ============================ PIE (gesto conservado) ====================== */
.footer-cta-band { background: var(--c-green); }
.footer-cta-band__inner { padding-block: calc(var(--section-y) * .78 + var(--diag)); color: var(--c-ink); text-align: center; }

/* --- piezas nombradas que antes eran estilos en linea ---------------------- */
.section__lead { margin-block-start: var(--s-4); }
.u-actions { margin-block-start: var(--s-6); }
.why__lead { margin-block-start: var(--s-5); color: var(--c-mute); }
.quotes__lead { margin-block-start: var(--s-4); }
.who__body { margin-block-start: var(--s-5); }
.process__media { margin-block-start: var(--s-7); }

/* --- franja de cifras (sustituye al divisor decorativo de plantilla) ------- */
.facts { background: var(--c-ink); }
/* Aire medido: 70,9% a 1440 y 74,3% a 1920, con tres numeros de 131,8px
   dentro de 453,6px. Dos causas: el factor .6 y el --diag, que reservaba
   sitio para dos cunas. Las cunas se han ido —el hero de arriba ya pone la
   diagonal de esa pantalla y las dos juntas hacian un zigzag— asi que ya no
   hay nada que reservar. Queda en 39,8% de aire. */
.facts__inner { padding-block: clamp(var(--s-6), calc(var(--section-y) * .45), var(--s-8)); color: var(--c-on-dark); }
.facts__grid { display: grid; gap: var(--s-6); }
@media (min-width: 40rem) { .facts__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } }
.fact__num { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: 1; color: var(--c-green); letter-spacing: var(--tr-display); }
.fact__label { margin-block-start: var(--s-2); color: var(--c-on-dark-2); max-width: 22ch; }
.brands__lead { margin-inline: auto; text-align: center; margin-block-end: var(--s-7); }
.brands__title + .brands__lead { margin-block-start: calc(var(--s-6) * -1 + var(--s-4)); }