/* =========================================================
   HERO PROFESSIONAL V23
   Solo afecta #inicio. No contiene reglas para Galería.
   ========================================================= */
#inicio.hero{
  min-height:calc(100svh - 82px) !important;
  display:grid !important;
  grid-template-columns:minmax(320px,.76fr) minmax(520px,1.34fr) !important;
  align-items:center !important;
  gap:clamp(2rem,3vw,3.5rem) !important;
  max-width:1540px !important;
  margin:0 auto !important;
  padding:clamp(3rem,5vw,4.8rem) max(4vw,24px) clamp(4rem,5.5vw,5.5rem) !important;
  background:#fff !important;
  position:relative !important;
}
#inicio .hero-copy{max-width:540px !important;}
#inicio .hero-eyebrow{display:inline-flex !important;align-items:center !important;gap:.8rem !important;font-size:.69rem !important;letter-spacing:.22em !important;margin-bottom:1rem !important;}
#inicio .hero-eyebrow-line{width:3rem;height:1px;background:rgba(80,54,78,.22);flex:0 0 auto;}
#inicio h1{max-width:9.5ch !important;margin:.15rem 0 1.4rem !important;font-size:clamp(3.25rem,5.7vw,6.45rem) !important;line-height:.95 !important;letter-spacing:-.045em !important;}
#inicio .hero-description{position:relative;max-width:33rem;padding-left:1.15rem;margin-bottom:2rem;}
#inicio .hero-description::before{content:"";position:absolute;left:0;top:.15rem;bottom:.15rem;width:1px;background:rgba(80,54,78,.18);}
#inicio .hero-description p{margin:0 !important;color:#635966 !important;font-size:clamp(1rem,1.2vw,1.12rem) !important;line-height:1.85 !important;}
#inicio .actions{display:flex !important;align-items:center !important;gap:1.2rem !important;margin-top:0 !important;}
#inicio .button{padding:.95rem 1.4rem !important;border-radius:999px !important;text-transform:uppercase !important;letter-spacing:.11em !important;font-size:.74rem !important;}
#inicio .text-link{display:inline-flex !important;gap:.5rem !important;align-items:center !important;border-bottom:0 !important;}
#inicio .hero-visual{position:relative !important;min-height:auto !important;overflow:visible !important;background:transparent !important;border-radius:0 !important;padding:1rem 0 0 1rem !important;}
#inicio .hero-panel{position:absolute;inset:0 0 1.1rem 1.65rem;background:#f5efe8;border-radius:2rem;}
#inicio .hero-media{position:relative;z-index:1;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:2rem;background:#eee7df;}
#inicio .hero-media>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#eee7df;}
#inicio .hero-media-overlay{position:absolute;inset:0;background:rgba(44,34,41,.045);pointer-events:none;}
#inicio .portrait-placeholder{width:100% !important;height:100% !important;min-height:unset !important;}
#inicio .hero-badge{position:absolute;z-index:2;left:-.9rem;bottom:1rem;display:flex;align-items:flex-start;gap:.75rem;max-width:270px;padding:.95rem 1.05rem;background:rgba(255,255,255,.97);border-radius:1.1rem;box-shadow:0 16px 38px rgba(44,34,41,.08);}
#inicio .hero-badge-icon{display:grid;place-items:center;width:1.85rem;height:1.85rem;flex:0 0 auto;border-radius:50%;background:#f5efe8;color:var(--accent);font-weight:900;}
#inicio .hero-badge p{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--primary);font-size:.96rem;line-height:1.4;}
@media(max-width:1100px){#inicio.hero{grid-template-columns:1fr !important;min-height:auto !important;gap:2.4rem !important;}#inicio .hero-copy{max-width:700px !important;}#inicio h1{max-width:12ch !important;}}
@media(max-width:600px){#inicio.hero{padding:2.4rem 1.25rem 4rem !important;gap:1.9rem !important;}#inicio h1{font-size:clamp(2.8rem,13vw,4rem) !important;max-width:10ch !important;}#inicio .actions{align-items:flex-start !important;flex-direction:column !important;gap:.9rem !important;}#inicio .hero-visual{padding:.65rem 0 0 .65rem !important;}#inicio .hero-panel{inset:0 0 .8rem .9rem;border-radius:1.4rem;}#inicio .hero-media{border-radius:1.35rem;}#inicio .hero-badge{position:relative;left:auto;bottom:auto;margin:-1.1rem .75rem 0;max-width:calc(100% - 1.5rem);}}


/* =========================================================
   HERO PROFESSIONAL V24 — TEXTO DINÁMICO SIN CORTAR PALABRAS
   SOLO afecta #inicio.
   Mantiene el diseño visual actual y mejora su robustez
   cuando el título o la descripción son más largos.
   ========================================================= */

/* La columna de texto nunca debe comprimirse hasta romper palabras. */
#inicio.hero{
  grid-template-columns:minmax(470px,.88fr) minmax(0,1.12fr) !important;
  gap:clamp(2rem,3vw,3.4rem) !important;
}

#inicio .hero-copy{
  width:100% !important;
  max-width:620px !important;
  min-width:0 !important;
}

/*
 * El ancho lo determina la columna, no una medida fija en caracteres.
 * Nunca cortar, guionizar ni partir una palabra.
 */
#inicio h1{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  font-size:clamp(3rem,4.75vw,5.65rem) !important;
  line-height:.96 !important;
  letter-spacing:-.043em !important;

  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;

  text-wrap:balance;
}

/* La descripción también conserva palabras completas. */
#inicio .hero-description,
#inicio .hero-description p{
  min-width:0 !important;

  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

#inicio .hero-description{
  max-width:36rem !important;
}

/*
 * Antes de que las dos columnas queden demasiado estrechas,
 * pasamos ordenadamente a una sola columna.
 */
@media (max-width:1180px){
  #inicio.hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    gap:2.35rem !important;
  }

  #inicio .hero-copy{
    max-width:760px !important;
  }

  #inicio h1{
    max-width:12ch !important;
    font-size:clamp(3rem,7vw,5.4rem) !important;
  }

  #inicio .hero-visual{
    width:100% !important;
  }
}

/* Tablet */
@media (max-width:820px){
  #inicio h1{
    max-width:none !important;
    font-size:clamp(2.75rem,9vw,4.5rem) !important;
    line-height:.98 !important;
  }

  #inicio .hero-description{
    max-width:38rem !important;
  }
}

/* Móvil */
@media (max-width:600px){
  #inicio.hero{
    padding:2.4rem 1.25rem 4rem !important;
    gap:1.9rem !important;
  }

  #inicio .hero-copy{
    width:100% !important;
    max-width:none !important;
  }

  #inicio h1{
    width:100% !important;
    max-width:none !important;

    font-size:clamp(2.35rem,10.5vw,3.55rem) !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
  }
}

/* Teléfonos estrechos */
@media (max-width:390px){
  #inicio h1{
    font-size:clamp(2.15rem,10vw,2.75rem) !important;
  }
}


/* =========================================================
   HERO V25 — ANTETÍTULO MÁS VISIBLE
   SOLO afecta el eyebrow del Hero.
   ========================================================= */

#inicio .hero-eyebrow{
  font-size:.82rem !important;
  font-weight:850 !important;
  letter-spacing:.18em !important;
  color:var(--accent) !important;
  line-height:1.35 !important;
}

#inicio .hero-eyebrow-line{
  width:3.35rem !important;
  background:color-mix(in srgb, var(--accent) 42%, transparent) !important;
}

@media(max-width:600px){
  #inicio .hero-eyebrow{
    font-size:.74rem !important;
    letter-spacing:.15em !important;
  }
}


/* =========================================================
   HERO V26 — ANTETÍTULO CON MÁS PRESENCIA
   SOLO afecta el eyebrow del Hero.
   ========================================================= */

#inicio .hero-eyebrow{
  font-size:.94rem !important;
  font-weight:900 !important;
  letter-spacing:.155em !important;
  color:var(--accent) !important;
  line-height:1.35 !important;
  text-shadow:0 0 0.01px currentColor !important;
}

#inicio .hero-eyebrow-line{
  width:3.7rem !important;
  height:2px !important;
  background:color-mix(in srgb, var(--accent) 62%, transparent) !important;
}

@media(max-width:600px){
  #inicio .hero-eyebrow{
    font-size:.82rem !important;
    letter-spacing:.135em !important;
  }

  #inicio .hero-eyebrow-line{
    width:3rem !important;
  }
}