/**
 * SurGlobal Odorox - Landing «Control de olores» (template-control-de-olores.php).
 * Solo piezas que no existen en style.css. Se carga despues de style.css (inc/olores.php).
 */

/* Solo piezas que no existen en el tema. Todo lo demás viene de style.css. */

/* Hero: el tema alinea el video arriba; aquí se centra en vertical respecto del texto */
.sector-hero.olores-hero .sector-patho{align-self:center}

/* Alternancia de fondos: cada pieza trae el suyo y aquí quedan juntas en otro orden */
section.section.olores-bg-alt{background:var(--bg-light-100)}
section.section.olores-bg-base{background:var(--bg-light-50)}

/* El problema: texto + mosaico de fotos, y debajo la escalada del problema */
.olores-problema__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);align-items:center}
.olores-problema__text .section-head{margin-bottom:0}
.olores-prose p{margin:18px 0 0}
.olores-prose a{color:var(--accent-primary);font-weight:600}
@media(max-width:960px){.olores-problema__grid{grid-template-columns:1fr}}

.olores-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.olores-bento figure{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--bg-light-100);aspect-ratio:4/3}
.olores-bento img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.olores-bento .olores-bento__tall{grid-row:span 2;aspect-ratio:auto}
.olores-bento figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 12px;font-size:13px;line-height:1.4;color:#fff;background:linear-gradient(180deg,rgba(9,13,26,0) 0%,rgba(9,13,26,.82) 100%)}
/* En pantallas chicas los recuadros quedaban de 160 px y el pie tapaba la foto: una columna */
@media(max-width:600px){
  .olores-bento{grid-template-columns:1fr}
  .olores-bento figure,.olores-bento .olores-bento__tall{grid-row:auto;aspect-ratio:16/10}
}

.olores-escala{margin-top:clamp(40px,6vw,64px);background:var(--base-white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:28px clamp(20px,3vw,36px) 32px}
.olores-escala__title{margin:0 0 24px;text-align:center;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-primary)}
.olores-escala ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;position:relative}
.olores-escala ol::before{content:"";position:absolute;left:10%;right:10%;top:21px;height:2px;background:linear-gradient(90deg,var(--primary-300),#D34B4B);opacity:.55}
.olores-escala li{position:relative;text-align:center}
.olores-escala__no{position:relative;z-index:1;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--base-white);border:2px solid var(--primary-300);color:var(--accent-primary);font-family:var(--font-display);font-weight:600;font-size:14px}
.olores-escala strong{display:block;margin-top:12px;font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.25;color:var(--text-primary)}
.olores-escala li > span:last-child{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:#6A7390}
.olores-escala li.is-critical .olores-escala__no{border-color:#D34B4B;color:#D34B4B;background:#FDEDED}
.olores-escala li.is-critical strong{color:#D34B4B}
@media(max-width:860px){
  .olores-escala ol{grid-template-columns:1fr;gap:18px}
  .olores-escala ol::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto;background:linear-gradient(180deg,var(--primary-300),#D34B4B)}
  .olores-escala li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;text-align:left}
  .olores-escala__no{grid-row:span 2}
  .olores-escala strong{margin-top:2px}
}

/* Comparativa: tabla más compacta en escritorio (en móvil se mantiene la del tema, con scroll) */
@media(min-width:861px){
  .olores-compare .tech-compare__wrap{max-width:900px;margin-inline:auto}
  .olores-compare .tech-table th,.olores-compare .tech-table td{padding:11px 16px;font-size:14.5px}
  .olores-compare .tech-table .mk{width:22px;height:22px;font-size:12px}
}

/* Nota centrada bajo una grilla */
.olores-note{max-width:52em;margin:36px auto 0;text-align:center;font-size:15px;line-height:1.6;color:#6A7390}
.olores-note a{color:var(--accent-primary);font-weight:600}

/* Sectores: tarjetas del tema un poco más chicas (grilla más angosta, imagen más baja) + descripción */
.sector-grid.olores-sector-grid{max-width:980px;margin-inline:auto;gap:18px}
.olores-sector-grid .sector-card__img{display:block;aspect-ratio:2/1;height:auto;overflow:hidden}
.olores-sector-grid .sector-card__img img{width:100%;height:100%;object-fit:cover}
.olores-sector-grid .sector-card__body{padding:16px 18px 18px}
.olores-sector-grid .sector-card h5{font-size:17px}
.olores-sector-desc{margin:6px 0 10px;font-size:14px;line-height:1.5;color:var(--text-secondary)}

/* Casos: 4 tarjetas compactas. En el tema .cases-grid es flex (filas de 3), por eso se pasa a grid:
   4 en fila en escritorio, 2×2 en tablet y apiladas en móvil (comportamiento del tema). */
@media(min-width:861px){.cases-grid.olores-cases-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(min-width:1100px){.cases-grid.olores-cases-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.olores-cases-grid .case-card{padding:22px 20px;flex-direction:column}
.olores-cases-grid .case-card h4{font-size:18px;line-height:1.25;margin:10px 0 12px}
.olores-cases-grid .case-card__metric{font-size:30px;line-height:1.1;letter-spacing:-1px;margin-bottom:6px}
.olores-cases-grid .case-card__result{font-size:14px;line-height:1.4;margin-bottom:10px}
.olores-cases-grid .case-card__quote{font-size:14px;line-height:1.5;margin-bottom:16px}
.olores-cases-grid .case-card__author{font-size:13px;margin-top:auto}
/* En la fila de 4, títulos y resultados de 1 o 2 líneas desalineaban cifras y citas: alto fijo de 2 líneas */
@media(min-width:1100px){
  .olores-cases-grid .case-card h4{min-height:2.5em}
  .olores-cases-grid .case-card__result{min-height:2.8em}
}
.case-card__author a{color:var(--accent-primary);font-weight:600}

/* Banner del brochure: la banda highlight del tema + portada */
.olores-bro__lead{display:flex;align-items:center;gap:22px}
.olores-bro__cover{width:64px;height:auto;flex:0 0 auto;border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.28);transform:rotate(-3deg)}
.olores-bro__sub{margin:6px 0 0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.8)}

/* Banda de la prueba: gráfico inline */
.featured-case__chart svg{width:100%;height:auto;display:block}

/* Formulario: columna izquierda con el llamado */
.olores-aside h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-1px;margin:10px 0 0}
.olores-aside > p{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--text-secondary)}