/* Aluca · página «Empresas». Se suma después de aluca.css. */

.migas { margin: clamp(4px, .6vw, 10px) var(--g) clamp(10px, 1vw, 16px); }
.migas ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 calc(var(--g) * 1.2); list-style: none; font-size: var(--t-xs); color: var(--suave); }
.migas li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.migas a { text-decoration: underline; text-underline-offset: 3px; }
.migas a:hover { color: var(--acento); }

/* hero */
.em-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin: 0 var(--g); }
.em-hero__texto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(16px, 1.6vw, 28px); padding: clamp(24px, 5vw, 96px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.em-hero__texto .titulo { max-width: 11em; }
.em-hero__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.em-hero__foto { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: #16110E; min-height: clamp(380px, 44vw, 860px); }
.em-hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* para quién */
.em-quienes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); }
.em-quien { display: flex; flex-direction: column; gap: 6px; padding: clamp(8px, .7vw, 12px) clamp(8px, .7vw, 12px) clamp(16px, 1.6vw, 28px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.em-quien figure { margin: 0 0 clamp(8px, .8vw, 14px); aspect-ratio: 4 / 5; border-radius: calc(var(--r) * .7); overflow: hidden; background: #16110E; }
.em-quien figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--facil); }
.em-quien:hover figure img { transform: scale(1.05); }
.em-quien h3 { margin: 0; padding-inline: clamp(8px, .8vw, 14px); font: 600 var(--t-l)/1.2 'Manrope'; letter-spacing: -.01em; text-wrap: balance; }
.em-quien p { margin: 0; padding-inline: clamp(8px, .8vw, 14px); color: var(--suave); font-size: var(--t-s); line-height: 1.5; }

/* galería: una foto grande y varias chicas */
.em-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); }
.em-gal__f { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: #16110E; }
.em-gal__f--grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.em-gal__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--facil); }
.em-gal__f:hover img { transform: scale(1.04); }

/* qué ofrecemos */
.em-ofertas { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--g); margin: 0; padding: 0; list-style: none; }
.em-oferta { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 1.6vw, 28px); border-radius: var(--r); background: var(--pastilla); transition: background-color .6s; }
.em-oferta svg { width: clamp(24px, 2vw, 34px); height: clamp(24px, 2vw, 34px); margin-bottom: clamp(18px, 2.4vw, 44px); color: var(--acento); }
.em-oferta h3 { margin: 0; font: 600 var(--t-m)/1.25 'Manrope'; letter-spacing: -.01em; }
.em-oferta p { margin: 0; color: var(--suave); font-size: var(--t-s); line-height: 1.5; }

/* cómo trabajamos */
.em-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); margin: 0; padding: 0; list-style: none; }
.em-paso { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 1.6vw, 28px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.em-paso span { font: 700 var(--t-xs)/1 'Manrope'; letter-spacing: .18em; color: var(--acento); margin-bottom: clamp(16px, 2vw, 36px); }
.em-paso h3 { margin: 0; font: 600 var(--t-l)/1.2 'Manrope'; letter-spacing: -.01em; }
.em-paso p { margin: 0; color: var(--suave); font-size: var(--t-s); line-height: 1.5; }

/* formulario */
.em-form { scroll-margin-top: calc(var(--g) * 3); }
.em-form__caja { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--g) clamp(24px, 5vw, 100px); padding: clamp(20px, 4vw, 80px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.em-form__texto { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.2vw, 20px); }
.em-form__texto .titulo { max-width: 9em; }
.em-form__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.em-campo { display: grid; gap: 6px; align-content: start; }
.em-campo--ancho { grid-column: 1 / -1; }
.em-campo label { font: 700 var(--t-xs)/1 'Manrope'; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.em-campo input, .em-campo textarea { width: 100%; padding: 1em 1.2em; border-radius: calc(var(--r) * .8); border: 1px solid transparent; background: var(--fondo); color: var(--texto); font: 500 var(--t-m)/1.3 'Manrope', sans-serif; outline: 0; resize: vertical; transition: border-color .3s, background-color .6s; }
.em-campo input:focus, .em-campo textarea:focus { border-color: var(--acento); }
.em-campo [aria-invalid="true"] { border-color: var(--acento); }
.em-error { min-height: 0; color: var(--acento); font-size: var(--t-xs); }
.em-error:empty { display: none; }
.em-estado { margin: 0; text-align: center; color: var(--texto); font-weight: 600; font-size: var(--t-s); }
.em-estado:empty { display: none; }

/* cierre pegado al footer */
.em-cierre__caja { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.4vw, 24px); padding: clamp(40px, 6vw, 120px) var(--g); border-radius: var(--r); background: var(--acento); color: #fff; text-align: center; }
.em-cierre__caja .titulo { max-width: 12em; }
.em-cierre__caja p { margin: 0; max-width: 32em; font-size: var(--t-m); line-height: 1.5; opacity: .85; }
.em-cierre__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.pastilla.em-cierre__wpp { background: linear-gradient(#fff, #fff) 50% 100% / 100% 0% no-repeat, rgba(255,255,255,.16); color: #fff; }
.pastilla.em-cierre__wpp:hover, .pastilla.em-cierre__wpp:focus-visible { background-size: 100% 100%; color: #250A03; }
.em-cierre .pastilla--clara:hover, .em-cierre .pastilla--clara:focus-visible { background-size: 100% 100%; }
main:has(.em-cierre:last-child) + .pie { margin-top: var(--g); }

@media (max-width: 1024px) {
  .em-quienes, .em-pasos { grid-template-columns: repeat(2, 1fr); }
  .em-ofertas { grid-template-columns: repeat(2, 1fr); }
  .em-ofertas .em-oferta:last-child { grid-column: 1 / -1; }
  .em-form__caja { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .em-hero { grid-template-columns: 1fr; }
  .em-hero__foto { min-height: 0; aspect-ratio: 4 / 3.4; order: -1; }
  .em-hero__texto { padding: 32px 20px 36px; }
  .em-gal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .em-quienes, .em-pasos, .em-ofertas { grid-template-columns: 1fr; }
  .em-form__caja { padding: 24px 16px; }
  .em-form__form { grid-template-columns: 1fr; }
  .em-hero__botones, .em-cierre__botones { width: 100%; flex-direction: column; }
  .em-hero__botones .pastilla, .em-cierre__botones .pastilla { width: 100%; }
  .em-campo input, .em-campo textarea { font-size: 16px; }
}

/* label adentro del campo (placeholder) */
.em-campo input::placeholder, .em-campo textarea::placeholder { color: var(--suave); opacity: .7; }
.em-form__form { gap: 10px; }