/* =========================================================
   Careers y Catering — estilos comunes (réplica del original Divi)
   ========================================================= */

/* Columnas 3/5 y 2/5 con los anchos exactos de Divi (gutters3) */
.col-3-5 { width: 57.8%; }
.col-2-5 { width: 36.7%; }
.col-4-4 > .module { margin-bottom: 2.75%; }
.col-3-5 > .module { margin-bottom: 4.758%; }
.col-2-5 > .module { margin-bottom: 7.493%; }
.col > .module:last-child { margin-bottom: 0; }

.txt-left { text-align: left; }
.txt-center { text-align: center; }
.txt-justify { text-align: justify; }

/* ---------- Sección 1: portada amarilla ---------- */
.hero {
  height: 1000px;
  overflow: hidden;
  padding-bottom: 230px;
  background-color: #f3e24e;
  background-image: url(/img/matthias-mullie-F4LHE4PBWEA-unsplash-scaled.jpg);
  background-blend-mode: overlay;
}
.hero .hero-row { z-index: 10; position: relative; }

.hero-title { font-family: 'Abril Fatface', display; padding-bottom: 0; margin-bottom: -2px !important; }
.hero-title h1 {
  font-family: 'Allison', handwriting; font-weight: 800; font-size: 100px;
  color: #e81b1b; line-height: 1.2em;
}
.hero-sub {
  font-family: 'Abril Fatface', display; font-size: 58px; letter-spacing: 1px; line-height: 1em;
  color: #0c71c3; margin-top: -2px !important; margin-bottom: -1px !important;
}
.hero-text {
  font-family: 'Darker Grotesque', Helvetica, Arial, Lucida, sans-serif; font-weight: 500;
  font-size: 24px; line-height: 1.4em; color: #000; margin-top: 30px !important;
}

.hero-img {
  display: block; line-height: 0;
  width: 100%; max-width: 100%;
  margin-left: auto !important; margin-right: auto !important;
  z-index: -500; position: relative; top: 0; right: 0;
  text-align: left;
}
.hero-img .img-wrap {
  display: inline-block; position: relative; max-width: 100%;
  border-radius: 400px; overflow: hidden;
}
.hero-img img { position: relative; max-height: 707px; width: auto; }

/* Animación "roll" de Divi (intensidad 50% = 180°, 1000 ms, ease, opacidad inicial 0) */
@keyframes roll-center { from { opacity: 0; transform: rotateZ(180deg); } to { opacity: 1; transform: none; } }
[data-anim="roll-center"] { transform-origin: center; }
[data-anim="roll-center"].in-view { animation-name: roll-center; animation-timing-function: ease; }

/* Pincelada blanca sobre el borde inferior de la portada */
.hero .brush-row {
  position: absolute !important; bottom: 0; top: auto; left: 50%; right: auto;
  transform: translateX(-50%);
  width: 100%; max-width: 100%; padding-bottom: 0;
}
.brush-img { width: 100%; max-width: 100% !important; line-height: 0; }
.brush-img img { width: 100%; }

/* ---------- Sección 2: formulario ---------- */
.form-title { font-family: 'Abril Fatface', display; padding-bottom: 0; margin-top: -74px !important; margin-bottom: 93px !important; }
.form-title h1 {
  font-family: 'Allison', handwriting; font-weight: 800; font-size: 100px;
  color: #e81b1b; line-height: 1.2em;
}
.form-text {
  font-family: 'Darker Grotesque', Helvetica, Arial, Lucida, sans-serif; font-weight: 500;
  font-size: 24px; line-height: 1.4em; color: #000; margin-top: -84px !important;
}

/* ---------- Sección 3: dirección y teléfono ---------- */
.contact {
  background-image: url(/img/frase.png);
  padding-top: 0; padding-bottom: 4px;
}
.contact .row { padding-top: 88px; padding-bottom: 88px; }
.contact .label { margin-bottom: 0 !important; }
.contact .label h4 {
  font-family: 'Darker Grotesque', Helvetica, Arial, Lucida, sans-serif; font-weight: 700;
  font-size: 20px; color: #000; line-height: 1.4em; text-align: center;
}
.contact .value h3 {
  font-family: 'Darker Grotesque', Helvetica, Arial, Lucida, sans-serif; font-weight: 700;
  font-size: 36px; color: #000; line-height: 1.2em; text-align: center;
}

/* ---------- Tableta y celular ---------- */
@media (max-width: 980px) {
  .col { float: left; } /* en Divi las columnas siguen flotando */
  .col > .module { margin-bottom: 30px; }
  .col > .module:last-child { margin-bottom: 0; }
  .hero { height: 1000px; padding-top: 50px; }
  .hero-title { margin-bottom: -2px !important; }
  .hero-title h1 { font-size: 40px; }
  .hero-sub { font-size: 58px; }
  .hero-text { font-size: 20px; }
  .hero-img {
    width: 60%; text-align: center;
    margin-left: auto !important; margin-right: 0 !important;
  }
  .hero-img img { width: auto; }
  .contact { padding-top: 0; padding-bottom: 4px; }
  .contact .row { padding-top: 88px; padding-bottom: 88px; }
  .form-title h1 { font-size: 40px; }
  .form-text, .contact .value h3 { font-size: 20px; }
  .contact .label h4 { font-size: 17px; }
}
@media (max-width: 767px) {
  .hero { height: 647px; }
  .hero-title { margin-top: -34px !important; }
  .hero-title h1 { font-size: 63px; }
  .hero-sub { font-size: 33px; }
  .hero-text { font-size: 16px; }
  .hero-img { width: 92%; transform: translateX(-18px) translateY(0); transform-origin: center; }
  @keyframes roll-center-phone {
    from { opacity: 0; transform: translateX(-18px) translateY(0) rotateZ(180deg); }
    to { opacity: 1; transform: translateX(-18px) translateY(0); }
  }
  [data-anim="roll-center"].in-view { animation-name: roll-center-phone; }
  .form-title h1 { font-size: 48px; }
  .form-text, .contact .value h3 { font-size: 16px; }
  .contact .label h4 { font-size: 15px; }
}
@media (min-width: 1350px) {
  .contact .row { padding-top: 88px; padding-bottom: 88px; }
  .hero .brush-row { padding-bottom: 0; }
}