/* Osser One V74 - geometria, tarjetas legibles y paridad Editor/publicado.
   Esta hoja se carga al final de los estilos; solo toca presentacion. */

/* Evita que una seccion de un <main> flex conserve un ancho de contenido
   en vez de ocupar el espacio disponible. */
main > :is(.block-services,.block-details,.block-process,.block-spotlight) {
  box-sizing:border-box;
  min-width:0;
}
:is(.service-layout,.service-grid,.detail-feature,.detail-copy,.process-steps,.osser-spotlight-copy) {
  min-width:0;
}
:is(.service-grid article,.detail-copy,.process-steps article) :is(h2,h3,p) {
  min-width:0;
  word-break:normal;
  hyphens:none;
}

/* Impacto (D): la regla auto-fit de V73 con un elemento que abarcaba dos
   columnas creaba una columna implicita de hasta 153 px.
   Se fija una cuadricula de dos columnas exactamente iguales. */
.layout_d .block-services .service-layout {
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(18px,2.5vw,38px);
}
.layout_d .block-services .service-grid {
  display:grid;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  align-content:stretch;
}
.layout_d .block-services .service-grid article,
.layout_d .block-services .service-grid article:nth-child(n) {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  min-width:0;
  width:100%;
  min-height:220px;
  height:100%;
  padding:clamp(22px,2.3vw,34px);
  grid-column:auto;
  overflow-wrap:break-word;
}
.layout_d .block-services .service-grid article:first-child {
  grid-column:1 / -1;
}
.layout_d .block-services .service-grid article > b {
  position:static;
  display:grid;
  flex:none;
  grid-area:auto;
  margin:0 0 20px;
}
.layout_d .block-services .service-grid article > h3,
.layout_d .block-services .service-grid article > p {
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  grid-area:auto;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}
.layout_d .block-services .service-grid article > h3 {
  margin-bottom:10px;
  font-size:clamp(1.14rem,1.65vw,1.45rem);
  line-height:1.27;
}
.layout_d .block-services .service-grid article > p {
  font-size:clamp(.94rem,1.08vw,1.03rem);
  line-height:1.58;
}

/* Vértice (B): la retícula de 12 columnas formaba tarjetas de ancho
   desigual dentro de la mitad de una seccion. Mantiene la primera destacada,
   pero permite las dos restantes iguales y legibles. */
.layout_b .block-services .service-grid {
  display:grid;
  width:100%;
  max-width:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(13px,1.5vw,20px);
}
.layout_b .block-services .service-grid article,
.layout_b .block-services .service-grid article:nth-child(n) {
  grid-column:auto;
  min-width:0;
  padding:clamp(21px,2vw,30px);
}
.layout_b .block-services .service-grid article:first-child {grid-column:1 / -1;}
.layout_b .block-services .service-grid article :is(h3,p) {
  overflow-wrap:break-word;
  hyphens:none;
}

/* Impacto: la seccion de detalles tenia max-width:1180px y ademas
   padding horizontal calculado con 100vw. En pantalla grande el relleno
   consumia 292px adicionales y hacia la imagen/texto MAS estrechos. */
.layout_d .detail-feature {
  box-sizing:border-box;
  width:calc(100% - 2 * clamp(18px,3.4vw,64px));
  max-width:1280px;
  margin-inline:auto;
  padding:clamp(30px,4.5vw,72px) 0 clamp(30px,5vw,80px) !important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:0 !important;
}
.layout_d .detail-feature > figure,
.layout_d .detail-feature > .detail-copy {
  min-width:0;
  width:100%;
}
.layout_d .detail-feature .detail-copy {
  padding:clamp(28px,3.5vw,54px);
}
.layout_d .detail-feature .detail-copy h2 {
  font-size:clamp(2.1rem,3.65vw,3.8rem);
  line-height:1.08;
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:none;
}

/* Norte y Vértice: cuando usan max-width y margin:auto, fijar el ancho
   explícitamente y evitar depender del ancho intrínseco del contenido. */
.layout_c .detail-feature {
  box-sizing:border-box;
  width:calc(100% - 2 * clamp(18px,3vw,50px));
  max-width:1180px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
@media(min-width:951px){
  .layout_b .detail-feature {
    width:100%;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}

/* Mosaico: mantiene su superposicion editorial mientras el panel de texto
   sea util; con espacio insuficiente la tarjeta pasa debajo de la foto. */
.layout_e .detail-feature > figure,
.layout_e .detail-feature > .detail-copy {
  min-width:0;
}
.layout_e .detail-feature .detail-copy h2 {
  font-size:clamp(2.15rem,3.7vw,4.25rem);
  overflow-wrap:break-word;
  hyphens:none;
}
@media(min-width:951px) and (max-width:1199px){
  .layout_e .detail-feature {
    grid-template-columns:minmax(0,1fr);
    padding-inline:clamp(24px,6vw,75px);
  }
  .layout_e .detail-feature > figure {grid-column:1;grid-row:1;min-height:430px;}
  .layout_e .detail-feature > .detail-copy {
    grid-column:1;grid-row:2;
    margin:-38px clamp(18px,4vw,60px) 0;
    padding:clamp(28px,4vw,45px);
  }
  .layout_e [data-osser-reversed="1"].block-details > figure,
  .layout_e [data-osser-reversed="1"].block-details > .detail-copy {
    grid-column:1;
  }
  .layout_e [data-osser-reversed="1"].block-details > figure {grid-row:1;}
  .layout_e [data-osser-reversed="1"].block-details > .detail-copy {grid-row:2;}
}

/* El ancho util manda: pantallas medianas, tabletas y vista previa del
   Editor no deben presentar tarjetas de texto por debajo de 230 px. */
@media(max-width:1050px){
  .layout_d .block-services .service-layout,
  .layout_b .block-services .service-layout {
    grid-template-columns:minmax(0,1fr);
  }
  .layout_d .block-services .editorial-photo,
  .layout_b .block-services .editorial-photo {
    min-height:330px;
    height:clamp(320px,42vw,520px);
  }
  .layout_d .block-services .service-grid,
  .layout_b .block-services .service-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .layout_d .detail-feature,
  .layout_c .detail-feature {
    width:calc(100% - 36px);
    max-width:none;
    grid-template-columns:minmax(0,1fr);
  }
  .layout_d .detail-feature figure,
  .layout_c .detail-feature figure {min-height:350px;}
  .layout_e .detail-feature > .detail-copy h2 {font-size:clamp(2.05rem,4.5vw,3.5rem);}
}
@media(max-width:650px){
  .layout_d .block-services .service-grid,
  .layout_b .block-services .service-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .layout_d .block-services .service-grid article:first-child,
  .layout_b .block-services .service-grid article:first-child {grid-column:auto;}
  .layout_d .block-services .service-grid article,
  .layout_b .block-services .service-grid article {min-height:0;padding:24px;}
  .layout_d .detail-feature {width:calc(100% - 28px);padding:0 0 38px !important;}
  .layout_d .detail-feature .detail-copy {padding:28px 22px;}
  .layout_d .detail-feature .detail-copy h2 {font-size:clamp(2rem,8vw,2.8rem);}
  .layout_c .detail-feature {width:calc(100% - 28px);}
}