/* ESTRALIA COMO-TRABAJAMOS CSS V11 - zigzag con espacios de imagen */
/* =========================================================
   Estralia · Cómo trabajamos
   Página de proceso. Complementa main.css y elementos comunes.
   Estructura propia: hero + intro + proceso zigzag + comunicación + CTA.
   ========================================================= */

:root{
  --work-blue: rgb(15, 98, 254);
  --work-blue-dark: rgb(10, 78, 210);
  --work-ink: #111827;
  --work-text: #222222;
  --work-muted: #5b6472;
  --work-line: #e5e7eb;
  --work-soft: #f5f7fb;
  --work-dark: #111827;
  --work-card: #ffffff;
  --work-max: 1120px;
}

.work-page{
  background:#ffffff;
  color:var(--work-text);
}

.work-wrap{
  width:min(var(--work-max), calc(100% - 40px));
  margin:0 auto;
}

.work-eyebrow{
  margin:0 0 10px;
  color:var(--work-blue);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.work-hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:118px 0 78px;
  background:
    linear-gradient(115deg, rgba(0,0,0,.74), rgba(0,0,0,.42)),
    url('../img/bg.webp') center center / cover no-repeat;
  color:#ffffff;
}

.work-hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

.work-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(12,22,32,.78) 0%,
    rgba(12,22,32,.70) 34%,
    rgba(12,22,32,.54) 56%,
    rgba(12,22,32,.28) 72%,
    rgba(12,22,32,.08) 88%,
    rgba(12,22,32,0) 100%
  );
  pointer-events:none;
}

.work-hero > .work-wrap{
  position:relative;
  z-index:2;
}

.work-breadcrumb{
  display:flex;
  gap:9px;
  align-items:center;
  margin:0 0 44px;
  color:rgba(255,255,255,.72);
  font-size:.92rem;
}

.work-breadcrumb a{
  color:rgba(255,255,255,.86);
  text-decoration:none;
}

.work-breadcrumb a:hover{ color:#ffffff; }

.work-hero__content{ max-width:840px; }

.work-hero h1{
  max-width:820px;
  margin:0;
  font-size:clamp(2.25rem, 5vw, 4.45rem);
  line-height:1.06;
  letter-spacing:-.055em;
}

.work-hero__lead{
  max-width:730px;
  margin:24px 0 0;
  color:rgba(255,255,255,.88);
  font-size:clamp(1.02rem, 1.45vw, 1.22rem);
  line-height:1.62;
}

.work-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}

.work-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 20px;
  border:1px solid transparent;
  border-radius:0;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  transition:transform .18s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.work-btn:hover{ transform:translateY(-1px); }

.work-btn--primary{
  background:var(--work-blue);
  color:#ffffff;
  border-color:var(--work-blue);
}

.work-btn--primary:hover{
  background:var(--work-blue-dark);
  color:#ffffff;
  border-color:var(--work-blue-dark);
}

.work-btn--secondary{
  background:rgba(255,255,255,.10);
  color:#ffffff;
  border-color:rgba(255,255,255,.35);
}

.work-btn--secondary:hover{
  background:rgba(255,255,255,.18);
  color:#ffffff;
  border-color:rgba(255,255,255,.55);
}

.work-section{
  padding:clamp(64px, 8vw, 104px) 0;
  background:#ffffff;
}

.work-section--intro{ padding-bottom:clamp(58px, 7vw, 86px); }
.work-section--soft{ background:var(--work-soft); }

.work-section h2,
.work-process__head h2{
  margin:0;
  color:var(--work-ink);
  font-size:clamp(1.95rem, 3.6vw, 3.25rem);
  line-height:1.08;
  letter-spacing:-.052em;
}

.work-intro{
  display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:start;
}

.work-copy p{
  margin:0 0 15px;
  color:var(--work-muted);
  font-size:1rem;
  line-height:1.72;
}

@media (min-width:981px){
  .work-intro .work-copy{ padding-top:27px; }
}

/* =========================================================
   Proceso zigzag con huecos preparados para imagen
   ========================================================= */
.work-section--process{
  padding-top:clamp(62px, 7.5vw, 96px);
  padding-bottom:clamp(62px, 7.5vw, 96px);
}

.work-process__head{
  max-width:760px;
  margin:0 0 clamp(38px, 5vw, 56px);
}

.work-process{
  display:grid;
  gap:clamp(46px, 6vw, 86px);
}

.work-zstep{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
}

.work-zstep:nth-child(even) .work-zstep__media{ order:-1; }

.work-zstep__num{
  width:56px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0 18px;
  background:var(--work-ink);
  color:#ffffff;
  font-weight:800;
  letter-spacing:-.04em;
  box-shadow:0 14px 34px rgba(17,24,39,.16);
}

.work-zstep--featured .work-zstep__num{ background:var(--work-blue); }

.work-zstep__title{
  margin:0 0 14px;
  color:var(--work-ink);
  font-size:clamp(1.35rem, 2.25vw, 1.92rem);
  line-height:1.15;
  letter-spacing:-.035em;
}

.work-zstep__lead{
  margin:0 0 16px;
  color:var(--work-muted);
  font-size:1rem;
  line-height:1.68;
}

.work-zstep__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px;
}

.work-zstep__list li{
  position:relative;
  padding-left:22px;
  color:var(--work-text);
  line-height:1.55;
}

.work-zstep__list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.66em;
  width:8px;
  height:8px;
  background:var(--work-blue);
}

.work-zstep__media{
  aspect-ratio:4 / 3;
  margin:0;
  background:
    repeating-linear-gradient(45deg, #eef2f8, #eef2f8 12px, #e6ebf3 12px, #e6ebf3 24px);
  border:1px solid var(--work-line);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  text-align:center;
  box-shadow:0 16px 42px rgba(15,23,42,.052);
}

.work-zstep__media span{
  max-width:270px;
  color:var(--work-muted);
  font-size:.84rem;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.01em;
}

/* Cuando se sustituyan los placeholders por imágenes reales:
   <figure class="work-zstep__media"><img src="..." alt="..."></figure> */
.work-zstep__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   Comunicación
   ========================================================= */
.work-section--communication{
  padding:clamp(52px, 6vw, 78px) 0;
}

.work-communication{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(44px, 7vw, 96px);
  align-items:stretch;
}

.work-communication__intro,
.work-communication__body{
  min-width:0;
}

.work-communication__body{
  display:flex;
  align-items:stretch;
}

.work-communication__intro .work-note{
  max-width:430px;
  margin-top:28px;
}

.work-channel-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-rows:repeat(2, minmax(0,1fr));
  gap:0;
  width:100%;
  flex:1;
  margin:0;
  border-top:1px solid var(--work-line);
  border-bottom:1px solid var(--work-line);
}

.work-channel-grid article{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-height:88px;
  padding:24px 22px;
  background:transparent;
  border:0;
  box-shadow:none;
}

.work-channel-grid article:nth-child(-n+2){
  border-bottom:1px solid var(--work-line);
}

.work-channel-grid article:nth-child(even){
  border-left:1px solid var(--work-line);
}

.work-channel-icon,
.channel__icon{
  width:24px;
  height:24px;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--work-blue);
  font-size:1.05rem;
  font-weight:700;
  line-height:1;
}

.work-channel-grid h3{
  margin:0;
  color:var(--work-ink);
  font-size:1.03rem;
  line-height:1.25;
  letter-spacing:-.025em;
}

.work-note{
  padding:0;
  background:transparent;
  border:0;
}

.work-note p{
  margin:0 0 12px;
  color:var(--work-muted);
  font-size:1rem;
  line-height:1.66;
}

.work-note p:last-child{ margin-bottom:0; }

/* =========================================================
   CTA final
   ========================================================= */
.work-final{
  padding:clamp(64px, 8vw, 100px) 0;
  background:#0b0d12;
  color:#ffffff;
}

.work-final__box{
  max-width:720px;
  color:#ffffff;
}

.work-final__box .work-eyebrow{ color:#6ea0ff; }

.work-final__box h2{
  margin:0;
  color:#ffffff;
  font-size:clamp(2rem, 4vw, 3.5rem);
  line-height:1.03;
  letter-spacing:-.055em;
}

.work-final__box p{
  max-width:680px;
  margin:18px 0 28px;
  color:rgba(255,255,255,.82);
  font-size:1.05rem;
  line-height:1.66;
}

/* Ajustes de integración con elementos comunes */
.work-page + .contacto{ margin-top:0; }
.work-final + .ars-bottom{ margin-top:0; }

@media (max-width:980px){
  .work-hero{ padding:148px 0 62px; }
  .work-breadcrumb{ margin-bottom:32px; }
  .work-section{ padding:58px 0; }
  .work-intro,
  .work-zstep,
  .work-communication{
    grid-template-columns:1fr;
  }
  .work-zstep:nth-child(even) .work-zstep__media{ order:0; }
  .work-zstep__media{ aspect-ratio:16 / 10; }
  .work-final{ padding:62px 0 74px; }
}

@media (max-width:640px){
  .work-wrap{ width:min(100% - 28px, var(--work-max)); }
  .work-hero h1{ font-size:clamp(2.25rem, 12vw, 3.35rem); }
  .work-actions{ flex-direction:column; }
  .work-btn{ width:100%; }
  .work-process{ gap:42px; }
  .work-zstep__num{ width:48px; height:48px; font-size:.9rem; }
  .work-zstep__media{ padding:20px; }
  .work-channel-grid{
    grid-template-columns:1fr;
  }
  .work-channel-grid article{
    min-height:64px;
    padding:18px 0;
  }
  .work-channel-grid article:nth-child(-n+2),
  .work-channel-grid article:nth-child(even){
    border-left:0;
    border-bottom:1px solid var(--work-line);
  }
  .work-channel-grid article:last-child{
    border-bottom:0;
  }
}

@media (min-width:981px){
  .work-intro .work-copy{
    padding-top:45px;
  }
}

.channel__icon svg{
  width:20px;
  height:20px;
  display:block;
}

.channel__icon--whatsapp{
  color:rgb(15, 98, 254);
}

/* =========================================================
   V17 · Imágenes reales del flujo
   Mantiene la retícula 4:3 original, elimina el tratamiento
   visual de placeholder y evita recortes de las imágenes.
   ========================================================= */
.work-zstep__media:not(.work-zstep__media--placeholder){
  aspect-ratio:4 / 3;
  margin:0;
  padding:0;
  background:#fff;
  border:0;
  box-shadow:none;
  overflow:hidden;
  display:block;
  text-align:initial;
}

.work-zstep__media:not(.work-zstep__media--placeholder) img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

/* =========================================================
   V20 · Contraste responsive del hero
   Solo tablet/móvil. Escritorio permanece sin cambios.
   ========================================================= */
@media (max-width:980px){
  .work-hero::after{
    background:
      linear-gradient(
        180deg,
        rgba(12,22,32,.12) 0%,
        rgba(12,22,32,.26) 32%,
        rgba(12,22,32,.58) 58%,
        rgba(12,22,32,.78) 76%,
        rgba(12,22,32,.84) 100%
      ),
      linear-gradient(
        90deg,
        rgba(12,22,32,.72) 0%,
        rgba(12,22,32,.58) 54%,
        rgba(12,22,32,.28) 100%
      );
  }
}

@media (max-width:640px){
  .work-hero::after{
    background:
      linear-gradient(
        180deg,
        rgba(12,22,32,.18) 0%,
        rgba(12,22,32,.34) 30%,
        rgba(12,22,32,.66) 54%,
        rgba(12,22,32,.84) 72%,
        rgba(12,22,32,.90) 100%
      ),
      linear-gradient(
        90deg,
        rgba(12,22,32,.78) 0%,
        rgba(12,22,32,.64) 62%,
        rgba(12,22,32,.36) 100%
      );
  }
}