/*
 * pages.css — Utilidades Tailwind para las paginas internas nuevas
 * (domotica-piscinas, trabaja-con-nosotros y sus /en/).
 *
 * Estas paginas reutilizan el header/menu/cookies/footer de la home, pero al
 * ser paginas nuevas usan algunas utilidades de Tailwind v3 que no estaban
 * en el build styles.css (generado a partir de las clases usadas en la home
 * y las legales). Aqui se repone SOLO lo que falta, con las mismas
 * definiciones que emite Tailwind v3, para mantener el mismo criterio que
 * legal.css.
 */

.self-start { align-self: flex-start; }
.h-10 { height: 2.5rem; }
.w-10 { width: 2.5rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.pt-40 { padding-top: 10rem; }

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:pb-32 { padding-bottom: 8rem; }
  .md\:pt-56 { padding-top: 14rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
}

/* Domótica: composición editorial y visual diferenciada de Empleo. */
.automation-page {
  background: #fff;
  color: #0a1a24;
}

.automation-shell {
  width: min(100% - 3rem, 80rem);
  margin-inline: auto;
}

.automation-hero {
  position: relative;
  min-height: 46rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0a1a24;
}

.automation-hero-media,
.automation-hero-media img,
.automation-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.automation-hero-media img {
  object-fit: cover;
  object-position: center 56%;
}

.automation-hero-shade {
  background: linear-gradient(90deg, rgba(7, 25, 36, .96) 0%, rgba(7, 25, 36, .83) 42%, rgba(7, 25, 36, .22) 78%, rgba(7, 25, 36, .36) 100%);
}

.automation-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 3rem, 80rem);
  margin: 0 auto;
  padding: 10rem 0 10.5rem;
}

.automation-breadcrumb {
  display: flex;
  gap: .65rem;
  margin-bottom: 2.5rem;
  color: rgba(255,255,255,.58);
  font: 600 .7rem/1.4 "Plus Jakarta Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.automation-breadcrumb a:hover { color: #36b9ed; }
.automation-eyebrow,
.automation-kicker {
  margin-bottom: 1rem;
  color: #36b9ed;
  font: 700 .75rem/1.5 "Plus Jakarta Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
}

.automation-hero h1,
.automation-intro h2,
.automation-section-heading h2,
.automation-project-copy h2,
.automation-final-cta h2 {
  font-family: "Playfair Display", serif;
  letter-spacing: 0;
}

.automation-hero h1 {
  max-width: 50rem;
  font-size: clamp(3.15rem, 6.4vw, 6rem);
  line-height: .98;
  margin-bottom: 1.75rem;
}

.automation-hero h1 span,
.automation-intro h2 span,
.automation-section-heading h2 span,
.automation-project-copy h2 span,
.automation-final-cta h2 span {
  color: #36b9ed;
  font-style: italic;
  font-weight: 400;
}

.automation-lead {
  max-width: 42rem;
  color: rgba(255,255,255,.8);
  font: 400 1.1rem/1.75 "Plus Jakarta Sans", sans-serif;
}

.automation-primary-cta,
.career-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.25rem;
  padding: 1rem 1.7rem;
  min-height: 3.25rem;
  border-radius: 999px;
  background: #36b9ed;
  color: #0a1a24;
  font: 700 .78rem/1.35 "Plus Jakarta Sans", sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  transition: background-color .25s ease, color .25s ease;
}

.automation-primary-cta:hover,
.career-hero-cta:hover { background: #fff; color: #0a1a24; }

.automation-proof {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(55rem, 67vw);
  background: rgba(10, 26, 36, .88);
  border-top: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}

.automation-proof > span {
  min-height: 6.5rem;
  padding: 1.4rem 1.75rem;
  color: rgba(255,255,255,.62);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  border-left: 1px solid rgba(255,255,255,.1);
}

.automation-proof-icon { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; color: #36b9ed; }
.automation-proof-copy { display: block; }
.automation-proof strong { display: block; margin-bottom: .25rem; color: #fff; font-size: .92rem; line-height: 1.3; }
.automation-proof small { display: block; color: rgba(255,255,255,.56); font-size: .72rem; line-height: 1.45; }

.automation-intro { padding: 8.5rem 0; }
.automation-intro-grid { display: grid; grid-template-columns: .9fr 1fr; gap: 8rem; align-items: start; }
.automation-intro h2,
.automation-section-heading h2,
.automation-project-copy h2,
.automation-final-cta h2 { font-size: clamp(2.65rem, 4.7vw, 4.8rem); line-height: 1.08; }
.automation-intro-copy { padding-top: 2rem; }
.automation-intro-copy p { color: rgba(10,26,36,.68); font: 400 1.05rem/1.85 "Plus Jakarta Sans", sans-serif; }
.automation-intro-copy p + p { margin-top: 1.35rem; }

.automation-systems { padding: 8.5rem 0; background: #112e40; }
.automation-section-heading { max-width: 47rem; margin-bottom: 5rem; }
.automation-system-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 5rem; }
.automation-system { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.35rem; padding: 2rem 0 2.25rem; border-top: 1px solid rgba(255,255,255,.15); align-items: start; }
.automation-system-icon { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-top: .05rem; border: 1px solid rgba(54,185,237,.38); border-radius: 50%; color: #36b9ed; background: rgba(54,185,237,.07); }
.automation-system-icon svg { width: 1.45rem; height: 1.45rem; }
.automation-system h3 { min-height: 3.25rem; display: flex; align-items: center; margin-bottom: .45rem; font: 500 1.65rem/1.2 "Playfair Display", serif; }
.automation-system p { color: rgba(255,255,255,.62); font: 400 .95rem/1.7 "Plus Jakarta Sans", sans-serif; }

.automation-projects { padding: 8.5rem 0; background: #eef3f5; }
.automation-project-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 6rem; align-items: center; }
.automation-project-photo { aspect-ratio: 4/5; overflow: hidden; border-radius: 2rem; }
.automation-project-photo picture,
.automation-project-photo img { display: block; width: 100%; height: 100%; }
.automation-project-photo img { object-fit: cover; object-position: center; }
.automation-project-copy h2 { margin-bottom: 2.5rem; }
.automation-project-option { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; padding: 1.6rem 0; border-top: 1px solid rgba(10,26,36,.17); }
.automation-project-option strong { font: 600 .95rem/1.5 "Plus Jakarta Sans", sans-serif; }
.automation-project-option p { color: rgba(10,26,36,.66); font: 400 .95rem/1.7 "Plus Jakarta Sans", sans-serif; }
.automation-text-link { display: inline-flex; gap: .7rem; margin-top: 2rem; padding-bottom: .35rem; border-bottom: 1px solid #0a1a24; font: 700 .88rem/1.4 "Plus Jakarta Sans", sans-serif; }
.automation-text-link:hover { color: #159ed5; border-color: #159ed5; }
.automation-final-cta { padding: 8.5rem 0; background: #112e40; }
.automation-contact-layout { width: min(calc(100% - 3rem), 80rem); margin: 0 auto; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 5rem; align-items: start; }
.automation-contact-copy > p:not(.automation-kicker) { max-width: 38rem; margin-top: 1.8rem; color: rgba(255,255,255,.67); font: 400 1.05rem/1.75 "Plus Jakarta Sans", sans-serif; }
.automation-contact-details { margin-top: 3rem; }
.automation-contact-form { min-width: 0; }

/* Empleo: misma identidad, jerarquía propia y vacantes reales. */
.career-hero { padding: 11rem 1.5rem 7rem; background: #0a1a24; }
.career-hero-inner { width: min(100%, 80rem); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 18rem; gap: 7rem; align-items: end; }
.career-hero-facts { border-top: 1px solid rgba(255,255,255,.18); }
.career-hero-facts p { display: grid; grid-template-columns: 6.4rem 1fr; gap: 1rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid rgba(255,255,255,.18); font-family: "Plus Jakarta Sans", sans-serif; }
.career-hero-facts strong { color: #36b9ed; font-size: 1.1rem; }
.career-hero-facts span { color: rgba(255,255,255,.65); font-size: .85rem; }
.career-values-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.5rem; min-height: 34rem; }
.career-value-feature { position: relative; min-height: 34rem; overflow: hidden; border-radius: 2rem; background: #0a1a24; }
.career-value-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,26,36,.06) 25%, rgba(10,26,36,.9) 100%); }
.career-value-feature picture,
.career-value-feature img { display: block; width: 100%; height: 100%; }
.career-value-feature img { position: absolute; inset: 0; object-fit: cover; object-position: center; }
.career-value-feature-copy { position: absolute; z-index: 2; left: 2.5rem; right: 2.5rem; bottom: 2.5rem; color: #fff; }
.career-value-feature-copy > p,
.career-value-index { margin-bottom: .75rem; color: #36b9ed; font: 700 .7rem/1.5 "Plus Jakarta Sans", sans-serif; text-transform: uppercase; letter-spacing: .16em; }
.career-value-feature-copy h3 { margin-bottom: .7rem; font: 500 2.25rem/1.15 "Playfair Display", serif; }
.career-value-feature-copy span { color: rgba(255,255,255,.72); font: 400 .95rem/1.7 "Plus Jakarta Sans", sans-serif; }
.career-value-secondary { display: grid; grid-template-rows: 1fr 1fr; gap: 1.5rem; }
.career-value-card { display: flex; flex-direction: column; justify-content: center; padding: 2.25rem; border: 1px solid rgba(10,26,36,.1); border-radius: 2rem; background: #eef3f5; }
.career-value-card h3 { margin-bottom: .65rem; font: 500 1.75rem/1.2 "Playfair Display", serif; }
.career-value-card p { color: rgba(10,26,36,.65); font: 400 .9rem/1.65 "Plus Jakarta Sans", sans-serif; }
.career-value-card-dark { color: #fff; background: #0a1a24; border-color: #0a1a24; }
.career-value-card-dark p { color: rgba(255,255,255,.64); }
.career-vacancies-intro { max-width: 43rem; margin-top: 1.5rem; color: rgba(10,26,36,.67); font: 400 1.05rem/1.75 "Plus Jakarta Sans", sans-serif; }
.career-job-list { border-top: 1px solid rgba(10,26,36,.17); }
.career-job { display: grid; grid-template-columns: 3.5rem minmax(0,1fr) 14rem; gap: 2rem; padding: 2.5rem 0; border-bottom: 1px solid rgba(10,26,36,.17); align-items: start; }
.career-job-number,
.career-job-label { color: #169fd6; font: 700 .72rem/1.5 "Plus Jakarta Sans", sans-serif; text-transform: uppercase; letter-spacing: .14em; }
.career-job-main h3 { margin: .3rem 0 .8rem; font: 500 2rem/1.2 "Playfair Display", serif; }
.career-job-main > p:last-child { max-width: 40rem; color: rgba(10,26,36,.66); font: 400 .95rem/1.7 "Plus Jakarta Sans", sans-serif; }
.career-job-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; color: rgba(10,26,36,.6); font: 500 .78rem/1.5 "Plus Jakarta Sans", sans-serif; }
.career-job-meta a { margin-top: .5rem; padding-bottom: .25rem; color: #0a1a24; border-bottom: 1px solid #0a1a24; font-weight: 700; }
.career-job-meta a:hover { color: #159ed5; border-color: #159ed5; }
.internal-footer-legal { color: rgba(255,255,255,.62); }
.internal-footer-legal a { color: rgba(255,255,255,.7); }
.internal-footer-legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .automation-hero { min-height: 44rem; }
  .automation-hero-inner { padding-bottom: 13rem; }
  .automation-proof { left: 0; right: 0; width: 100%; }
  .automation-intro-grid,
  .automation-project-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .automation-intro-grid { gap: 2rem; }
  .automation-intro-copy { padding-top: 0; }
  .automation-project-photo { aspect-ratio: 16/10; }
  .automation-system-list { column-gap: 2.5rem; }
  .automation-contact-layout { grid-template-columns: 1fr; gap: 4rem; }
  .career-hero-inner { grid-template-columns: 1fr; gap: 4rem; }
  .career-hero-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .career-hero-facts p { display: flex; flex-direction: column; gap: .3rem; padding-right: 1rem; }
  .career-values-layout { grid-template-columns: 1fr; }
  .career-value-feature { min-height: 31rem; }
  .career-value-secondary { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; }
  .career-job { grid-template-columns: 3rem 1fr; }
  .career-job-meta { grid-column: 2; flex-direction: row; flex-wrap: wrap; column-gap: 1rem; }
  .career-job-meta a { width: 100%; align-self: flex-start; }
}

@media (max-width: 640px) {
  .automation-shell,
  .automation-hero-inner { width: min(100% - 2rem, 80rem); }
  .automation-hero { min-height: 46rem; }
  .automation-hero-media img { object-position: 58% center; }
  .automation-hero-shade { background: linear-gradient(180deg, rgba(7,25,36,.55) 0%, rgba(7,25,36,.92) 58%, #071924 100%); }
  .automation-hero-inner { padding: 8.5rem 0 14rem; }
  .automation-breadcrumb { margin-bottom: 2rem; }
  .automation-hero h1 { font-size: 3rem; }
  .automation-lead { font-size: 1rem; line-height: 1.65; }
  .automation-primary-cta { width: 100%; min-height: 3.75rem; padding: 1rem 1.35rem; }
  .automation-proof { grid-template-columns: 1fr; }
  .automation-proof > span { min-height: 0; padding: .75rem 1rem; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .automation-proof-icon { width: 1.35rem; height: 1.35rem; }
  .automation-proof-copy { display: grid; grid-template-columns: 7.4rem 1fr; align-items: baseline; gap: .4rem; }
  .automation-proof strong { margin: 0; }
  .automation-proof small { font-size: .68rem; }
  .automation-intro,
  .automation-systems,
  .automation-projects,
  .automation-final-cta { padding: 5.5rem 0; }
  .automation-intro h2,
  .automation-section-heading h2,
  .automation-project-copy h2,
  .automation-final-cta h2 { font-size: 2.6rem; }
  .automation-system-list { grid-template-columns: 1fr; }
  .automation-section-heading { margin-bottom: 3rem; }
  .automation-system { grid-template-columns: 2.75rem 1fr; gap: 1rem; }
  .automation-system-icon { width: 2.75rem; height: 2.75rem; }
  .automation-system-icon svg { width: 1.25rem; height: 1.25rem; }
  .automation-system h3 { min-height: 2.75rem; font-size: 1.5rem; }
  .automation-project-photo { aspect-ratio: 4/5; border-radius: 1.25rem; }
  .automation-project-option { grid-template-columns: 1fr; gap: .5rem; }
  .automation-contact-layout { gap: 3.5rem; }
  .automation-contact-details { margin-top: 2.5rem; }
  .career-hero { padding: 9rem 1.5rem 5.5rem; }
  .career-hero-inner { gap: 3rem; }
  .career-hero-facts { grid-template-columns: 1fr; }
  .career-hero-facts p { display: grid; grid-template-columns: 6.5rem 1fr; padding: 1rem 0; }
  .career-hero-cta { width: 100%; }
  .career-values-layout { min-height: 0; }
  .career-value-feature { min-height: 27rem; border-radius: 1.25rem; }
  .career-value-feature-copy { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
  .career-value-feature-copy h3 { font-size: 1.9rem; }
  .career-value-secondary { grid-template-columns: 1fr; }
  .career-value-card { min-height: 15rem; padding: 1.75rem; border-radius: 1.25rem; }
  .career-job { grid-template-columns: 2rem 1fr; gap: 1rem; padding: 2rem 0; }
  .career-job-main h3 { font-size: 1.7rem; }
  .career-job-meta { flex-direction: column; }
  .internal-footer-legal { padding-bottom: 4rem; text-align: center; }
  .internal-footer-legal > div { flex-wrap: wrap; justify-content: center; row-gap: .75rem; }
}