/* ==========================================================================
   ESTILOS CORPORATIVOS VARSTAT - OPTIMIZADO PARA MÓVIL (FUENTES CLARAS)
   ========================================================================== */
:root {
    --verde-campo: #295A19;
    --azul-tech: #008080;
    --marron-suelo: #5F4B3B;
    --gris-fondo-principal: #F8FAFC;
    --gris-tarjeta: #FFFFFF;
    --borde-suave: #E2E8F0;
    --texto-oscuro: #1E293B;
    --texto-mutado: #64748B;
    --rojo-crisis: #C53030;
    --rojo-fondo: #FFF5F5;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Trebuchet MS', sans-serif; /* Manual Corporativo */
    background-color: var(--gris-fondo-principal);
    color: var(--texto-oscuro);
    font-size: 15px;
    line-height: 1.45;
}

.mobile-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Tipografía Corporativa Estricta */
h1 { font-family: 'Trebuchet MS', sans-serif; font-weight: bold; color: var(--texto-oscuro); font-size: 24px; line-height: 1.25; }
h2 { font-family: 'Trebuchet MS', sans-serif; font-weight: bold; color: var(--texto-oscuro); font-size: 20px; line-height: 1.25; }
h3 { font-family: 'Trebuchet MS', sans-serif; font-weight: bold; color: var(--texto-oscuro); font-size: 16px; }
h4 { font-family: 'Trebuchet MS', sans-serif; font-weight: bold; color: var(--texto-oscuro); font-size: 15px; }

.font-italic { font-style: italic; } /* Destacar frases en itálica según manual */

/* Badges */
.hero-badge, .badge-alert, .badge-success, .badge-subtle {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.hero-badge { background-color: var(--verde-campo); color: #FFFFFF; }
.badge-alert { background-color: var(--rojo-fondo); color: var(--rojo-crisis); border: 1px solid rgba(197, 48, 48, 0.2); }
.badge-success { background-color: #E6FFFA; color: var(--azul-tech); border: 1px solid rgba(0, 128, 128, 0.2); }
.badge-subtle { background-color: #EDF2F7; color: var(--marron-suelo); }

/* HEADER */
.mobile-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--borde-suave);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; max-width: 480px; margin: 0 auto; padding: 0 16px; }
.logo-main { font-size: 15px; font-weight: bold; }
.logo-accent { color: var(--azul-tech); }
.logo-slug { display: block; font-size: 8px; letter-spacing: 1.5px; color: var(--verde-campo); font-weight: bold; }
.btn-header-action { background-color: var(--azul-tech); color: #FFFFFF; text-decoration: none; font-size: 11px; font-weight: bold; padding: 6px 10px; border-radius: 4px; }

/* 1. HERO */
.hero-mobile { background-color: #FFFFFF; border-bottom: 1px solid var(--borde-suave); padding-bottom: 24px; }
/* Ajustado levemente a 180px para dar mejor contexto a la foto real de Fusarium */
.hero-image-container { width: 100%; height: 180px; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-text-box { margin-top: 16px; text-align: left; }
.text-highlight { color: var(--verde-campo); border-bottom: 2px solid var(--azul-tech); }
.hero-lead { font-size: 14px; color: var(--texto-mutado); margin: 10px 0 16px 0; }
.btn-mobile-primary { display: block; width: 100%; background-color: var(--azul-tech); color: #FFFFFF; text-align: center; padding: 14px; font-size: 14px; font-weight: bold; text-decoration: none; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 128, 128, 0.2); }

/* 2. EL DOLOR */
.pain-mobile { padding: 32px 0; background-color: var(--gris-fondo-principal); }
.pain-intro { font-size: 13.5px; color: var(--texto-mutado); margin: 8px 0 16px 0; }
.pain-list-vertical { display: flex; flex-direction: column; gap: 12px; }
.pain-card-v { background-color: var(--gris-tarjeta); border: 1px solid var(--borde-suave); padding: 14px; border-radius: 6px; }
.pain-card-v.late { border-left: 4px solid var(--rojo-crisis); }
.pain-card-v.doubt { border-left: 4px solid var(--marron-suelo); }
.card-v-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.card-v-icon { color: var(--texto-mutado); font-weight: bold; font-size: 12px; }
.pain-card-v p { font-size: 13px; color: var(--texto-mutado); }

/* SECCIÓN HISTORIA */
.history-mobile { padding: 32px 0; background-color: #FFFFFF; border-bottom: 1px solid var(--borde-suave); }
.history-intro { font-size: 13.5px; color: var(--texto-mutado); margin-bottom: 16px; }
.history-timeline-vertical { display: flex; flex-direction: column; gap: 10px; }
.history-card { background-color: var(--gris-fondo-principal); border: 1px solid var(--borde-suave); padding: 12px; border-radius: 6px; }
.history-card h4 { color: var(--marron-suelo); margin-bottom: 2px; }
.history-card p { font-size: 13px; color: var(--texto-oscuro); }
.history-card.danger-highlight { border-left: 3px solid var(--rojo-crisis); background-color: var(--rojo-fondo); }
.quote-box-history { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--borde-suave); text-align: center; }
.quote-box-history p { font-size: 13px; color: var(--texto-mutado); line-height: 1.4; }

/* 3. SOLUCIÓN */
.solution-mobile { padding: 32px 0; background-color: #FFFFFF; }
.mobile-timeline { position: relative; padding-left: 20px; border-left: 2px solid var(--borde-suave); margin-top: 16px; }
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-badge-num { position: absolute; left: -31px; top: -1px; width: 20px; height: 20px; background-color: var(--marron-suelo); color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; }
.timeline-item p { font-size: 13px; color: var(--texto-mutado); }
.timeline-highlight .timeline-badge-num { background-color: var(--azul-tech); }
.timeline-highlight h3 { color: var(--azul-tech); }

/* 4. IMAGEN INTERMEDIA */
.visual-break { background-color: var(--gris-fondo-principal); padding: 16px 0; }
.img-crop-wrapper { background-color: #FFFFFF; border: 1px solid var(--borde-suave); padding: 8px; border-radius: 6px; }
/* Corregido: Se incrementó la altura a 210px y se centró la posición del objeto para que la composición del productor y su tablet no sufra recortes agresivos */
.body-dynamic-img { width: 100%; height: 210px; object-fit: cover; object-position: center 30%; border-radius: 4px; display: block; }
.img-caption { font-size: 11px; color: var(--texto-mutado); text-align: center; margin-top: 6px; font-style: italic; }

/* 5. CALCULADORA MEJORADA */
.calc-section { padding: 32px 0; background-color: #FFFFFF; border-bottom: 1px solid var(--borde-suave); }
.calc-intro { font-size: 13px; color: var(--texto-mutado); margin-bottom: 16px; }
.calc-box { background-color: var(--gris-fondo-principal); border: 1px solid var(--borde-suave); padding: 16px; border-radius: 6px; }
.range-group { margin-bottom: 18px; }
.range-labels { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.label-title { font-weight: bold; color: var(--texto-oscuro); }
.label-counter { color: var(--azul-tech); font-weight: bold; }

/* Corrección de compatibilidad en sliders para navegadores webkit/móviles */
.slider-tactic { width: 100%; height: 6px; background: #CBD5E1; border-radius: 4px; outline: none; -webkit-appearance: none; appearance: none; }
.slider-tactic::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--azul-tech); cursor: pointer; border: none; }
.slider-tactic::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--azul-tech); cursor: pointer; border: none; }
.range-references { display: flex; justify-content: space-between; font-size: 10px; color: var(--texto-mutado); margin-top: 4px; }

/* Estilo para el input manual del precio de tonelada */
.input-number-group { margin-bottom: 12px; }
.number-field-wrapper { display: flex; align-items: center; background-color: #FFFFFF; border: 1px solid var(--borde-suave); border-radius: 4px; padding: 4px 10px; width: 130px; margin-top: 4px; }
.currency-prefix { font-size: 13px; color: var(--texto-mutado); font-weight: bold; margin-right: 4px; }
.input-numeric-tactic { border: none; width: 100%; outline: none; font-size: 14px; font-weight: bold; color: var(--texto-oscuro); font-family: 'Trebuchet MS', sans-serif; }

.calc-results { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; border-top: 1px solid var(--borde-suave); padding-top: 16px; }
.result-node { background-color: #FFFFFF; border: 1px solid var(--borde-suave); padding: 12px; border-radius: 4px; text-align: center; }
.res-title { display: block; font-size: 12px; color: var(--texto-mutado); text-transform: uppercase; }
.res-value { display: block; font-size: 24px; font-weight: bold; margin: 2px 0; }
.warning-text { color: var(--marron-suelo); }
.danger-text { color: var(--rojo-crisis); }
.res-sub { display: block; font-size: 11px; color: var(--texto-mutado); }
.highlight-node { border-color: rgba(195, 48, 48, 0.3); background-color: var(--rojo-fondo); }

/* 6. CONVERSIÓN */
.conversion-mobile { padding: 32px 0; background-color: var(--gris-fondo-principal); }
.form-desc { color: var(--texto-mutado); font-size: 13px; margin-bottom: 16px; }
.mobile-card-form { background-color: #FFFFFF; padding: 16px; border-radius: 6px; border: 1px solid var(--borde-suave); }
.m-form-group { margin-bottom: 12px; }
.m-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-form-group label { display: block; font-size: 11px; color: var(--texto-mutado); margin-bottom: 4px; font-weight: bold; }
.m-form-group input { width: 100%; padding: 10px; background-color: var(--gris-fondo-principal); border: 1px solid var(--borde-suave); border-radius: 4px; color: var(--texto-oscuro); font-size: 13.5px; }
.m-form-group input:focus { outline: none; border-color: var(--azul-tech); background-color: #FFFFFF; }
.btn-submit-mobile { width: 100%; background-color: var(--verde-campo); color: #FFFFFF; border: none; padding: 14px; font-size: 14px; font-weight: bold; border-radius: 4px; cursor: pointer; margin-top: 4px; }
.m-feedback { margin-top: 8px; font-size: 12px; text-align: center; }
.m-feedback.success { color: #38A169; font-weight: bold; }

/* FOOTER */
.mobile-footer { background-color: #FFFFFF; color: var(--texto-mutado); font-size: 11px; text-align: center; padding: 20px 16px; border-top: 1px solid var(--borde-suave); }

/* Estilos para la nueva jerarquía de marca en el Header */
.logo-service {
    color: var(--azul-tech);
    font-size: 13px;
    font-weight: normal;
    margin-left: 2px;
}
.logo-slug {
    display: block;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--verde-campo);
    font-weight: bold;
    margin-top: 1px;
}

/* Aireado y separación del párrafo del Hero */
.hero-description {
    font-size: 14px;
    color: var(--texto-mutado);
    margin: 20px 0 24px 0;
    line-height: 1.5;
}

/* ==========================================================================
   NUEVOS ESTILOS OPTIMIZADOS BASADOS EN EL ANÁLISIS DE CRÍTICA
   ========================================================================== */

/* 3. Sección Validación Técnica e Informe */
.validation-mobile { padding: 32px 0; background-color: var(--gris-fondo-principal); border-bottom: 1px solid var(--borde-suave); }
.validation-intro { font-size: 13.5px; color: var(--texto-mutado); margin-bottom: 16px; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.metric-box { background-color: #FFFFFF; padding: 16px; border-radius: 6px; border: 1px solid var(--borde-suave); text-align: center; }
.metric-num { display: block; font-size: 24px; font-weight: bold; color: var(--verde-campo); }
.metric-label { display: block; font-size: 11px; color: var(--texto-mutado); margin-top: 4px; line-height: 1.3; }

.lead-magnet-box { background-color: #E6FFFA; border: 1px dashed var(--azul-tech); padding: 16px; border-radius: 6px; text-align: center; }
.lead-magnet-box h4 { color: var(--texto-oscuro); margin-bottom: 4px; }
.lead-magnet-box p { font-size: 12.5px; color: var(--texto-mutado); margin-bottom: 12px; line-height: 1.4; }
.btn-subtle-download { display: inline-block; background-color: var(--azul-tech); color: #FFFFFF; text-decoration: none; font-size: 11.5px; font-weight: bold; padding: 10px 14px; border-radius: 4px; width: 100%; box-sizing: border-box; }

/* 8. Sección Molinos y Acopios */
.industry-segment-mobile { padding: 24px 0; background-color: var(--texto-oscuro); color: #FFFFFF; }
.industry-box { background-color: rgba(255, 255, 255, 0.05); padding: 20px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); }
.industry-box h3 { color: #FFFFFF; font-size: 18px; margin: 8px 0; }
.industry-box p { font-size: 13px; color: #94A3B8; line-height: 1.45; margin-bottom: 16px; }
.btn-subtle-industry { display: inline-block; color: #38BDF8; font-size: 13px; font-weight: bold; text-decoration: none; }

/* Texto de Urgencia en Conversión */
.urgency-highlight { color: var(--rojo-crisis); font-weight: bold; display: block; margin-top: 4px; }

/* ============ MICROSITIO SPECIFICS ============ */
.micro-hero {
  min-height: 50vh;
  padding: 60px 0 50px;
}

.micro-hero h1 {
  font-size: clamp(30px, 4.5vw, 56px);
  line-height: 1.1;
  max-width: 16ch;
}

.micro-hero .lede {
  max-width: 50ch;
}

.micro-section {
  padding: 70px 0;
}

.micro-section h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  margin-bottom: 20px;
}

.micro-section p {
  font-size: 15.5px;
  color: var(--ink-dim);
  line-height: 1.8;
  max-width: 60ch;
}