/*
Theme Name: Adesco Theme
Theme URI: https://www.webeolia.com/
Template: hello-elementor
Author: Webeolia Team
Author URI: https://www.webeolia.com/
Version: 1.0.1787036373
Updated: 2026-08-18 06:59:33

*/

/* ============================================================
   demineralisee.com — Sistema de diseño
   Referencia para la migración a WordPress + Elementor

   El sitio original está construido con estilos en línea.
   Este archivo traduce esos valores a variables CSS y a clases
   de utilidad para que se puedan cargar en Elementor como
   "Global Colors", "Global Fonts" y CSS personalizado.

   ORDEN DE TRABAJO SUGERIDO
   1. Copiar los valores de :root en Elementor > Ajustes del sitio
      > Colores globales y Fuentes globales.
   2. Cargar este archivo como CSS personalizado del tema hijo.
   3. Usar las clases .ads-* al construir los widgets.
   ============================================================ */

:root {
  /* --- Color: texto ------------------------------------------------ */
  --ads-text:            #1C1F22;  /* titulares y texto principal */
  --ads-text-body:       #33393F;  /* cuerpo de texto largo */
  --ads-text-muted:      #525A62;  /* texto secundario */
  --ads-text-soft:       #6C767F;  /* etiquetas, pies de foto, migas */
  --ads-text-faint:      #8E969D;  /* texto terciario, poco usado */

  /* --- Color: marca ------------------------------------------------ */
  --ads-accent:          #2C5F7C;  /* azul Adesco: enlaces, hover, kickers */

  /* --- Color: superficies ----------------------------------------- */
  --ads-bg:              #F4F8FB;  /* fondo general de página */
  --ads-surface:         #FFFFFF;  /* planchas, tarjetas, fotos de producto */
  --ads-surface-tint:    #E7EFF6;  /* plancha azulada, hover de menú */
  --ads-surface-tint-2:  #ECF2F7;  /* variante más clara */
  --ads-surface-white:   #FBFDFE;  /* blanco roto */

  /* --- Color: bordes ---------------------------------------------- */
  --ads-border:          #D2DEE8;  /* borde estándar 1px */
  --ads-border-strong:   #BFCDD8;  /* borde de énfasis */
  --ads-border-soft:     #DCE6EE;  /* separadores internos */

  /* --- Color: estados --------------------------------------------- */
  --ads-error:           #B3261E;  /* errores de formulario, asterisco */
  --ads-error-bg:        #FBEAE8;
  --ads-error-text:      #7F1D17;
  --ads-warn:            #C9A227;
  --ads-warn-text:       #8A6F14;

  /* --- Sombras ---------------------------------------------------- */
  --ads-shadow-menu:     0 14px 30px rgba(28, 31, 34, 0.10);

  /* --- Tipografía ------------------------------------------------- */
  --ads-font-display: 'Archivo', sans-serif;      /* 500 600 700 */
  --ads-font-body:    'IBM Plex Sans', sans-serif; /* 400 500 600 */
  --ads-font-mono:    'IBM Plex Mono', monospace;  /* 400 500 */

  /* --- Escala tipográfica (valores reales del sitio) --------------- */
  --ads-size-h1:      46px;  /* h1 de página */
  --ads-size-h2:      32px;  /* h2 de sección */
  --ads-size-h3:      23px;
  --ads-size-h4:      19px;
  --ads-size-lead:    17.5px; /* párrafo de entrada */
  --ads-size-body:    15.5px; /* cuerpo por defecto */
  --ads-size-body-sm: 15px;
  --ads-size-ui:      14.5px; /* navegación, botones */
  --ads-size-caption: 13px;   /* pies de foto */
  --ads-size-kicker:  11.5px; /* etiqueta superior en mayúsculas */

  /* --- Rejilla y ritmo -------------------------------------------- */
  --ads-max-width:    1360px; /* ancho del contenedor */
  --ads-gutter:       40px;   /* padding lateral */
  --ads-radius:       2px;    /* único radio del sitio */
  --ads-header-h:     80px;
  --ads-section-gap:  104px;  /* separación entre secciones */
  --ads-section-gap-sm: 88px;
}

/* ============================================================
   BASE
   ============================================================ */

body {
  margin: 0;
  background: var(--ads-bg);
  color: var(--ads-text);
  font-family: var(--ads-font-body);
  font-size: var(--ads-size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: var(--ads-accent); text-decoration: none; }
a:hover { color: var(--ads-text); }

img { max-width: 100%; height: auto; }

/* ============================================================
   TIPOGRAFÍA
   Los titulares usan Archivo 600 con tracking negativo.
   ============================================================ */

.ads-h1,
.ads-h2,
.ads-h3 {
  font-family: var(--ads-font-display);
  font-weight: 600;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.ads-h1 { font-size: var(--ads-size-h1); }
.ads-h2 { font-size: var(--ads-size-h2); }
.ads-h3 { font-size: var(--ads-size-h3); line-height: 1.25; }

/* Etiqueta en mayúsculas sobre el titular */
.ads-kicker {
  font-family: var(--ads-font-mono);
  font-size: var(--ads-size-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ads-accent);
}

.ads-lead {
  font-size: var(--ads-size-lead);
  line-height: 1.6;
  color: var(--ads-text-muted);
  margin: 0;
}

.ads-body { font-size: var(--ads-size-body); line-height: 1.7; color: var(--ads-text-body); }

.ads-caption {
  font-family: var(--ads-font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ads-text-soft);
}

/* ============================================================
   ESTRUCTURA
   ============================================================ */

.ads-section { padding: var(--ads-section-gap) var(--ads-gutter) 0; }
.ads-container { max-width: var(--ads-max-width); margin: 0 auto; }

/* Migas de pan */
.ads-breadcrumb {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--ads-font-mono);
  font-size: var(--ads-size-caption);
  color: var(--ads-text-soft);
}
.ads-breadcrumb a { color: var(--ads-text-soft); }
.ads-breadcrumb a:hover { color: var(--ads-accent); }

/* ============================================================
   COMPONENTES
   ============================================================ */

/* Botón primario: negro, se vuelve azul al pasar el cursor */
.ads-btn {
  display: inline-block;
  background: var(--ads-text);
  color: var(--ads-surface);
  font-weight: 600;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: var(--ads-radius);
  white-space: nowrap;
}
.ads-btn:hover { background: var(--ads-accent); color: var(--ads-surface); }

/* Botón secundario */
.ads-btn-ghost {
  display: inline-block;
  border: 1px solid var(--ads-border);
  background: var(--ads-surface);
  color: var(--ads-text);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 21px;
  border-radius: var(--ads-radius);
}
.ads-btn-ghost:hover { border-color: var(--ads-accent); color: var(--ads-accent); }

/* Tarjeta / plancha */
.ads-card {
  background: var(--ads-surface);
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-radius);
}

/* Rejilla de 1px: el fondo hace de líneas divisorias.
   Patrón muy usado en el sitio: contenedor con background del borde
   y gap de 1px, las celdas en blanco. */
.ads-hairline-grid {
  display: grid;
  gap: 1px;
  background: var(--ads-border);
  border: 1px solid var(--ads-border);
}
.ads-hairline-grid > * { background: var(--ads-surface); }

/* ============================================================
   TABLAS
   Todas las tablas del sitio son <table> semánticas con
   border-spacing de 1px sobre fondo #D2DEE8, que dibuja la
   retícula sin usar borders por celda.
   En Elementor: usar un widget HTML, no el widget de tabla.
   ============================================================ */

.ads-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px;
  background: var(--ads-border);
  font-size: var(--ads-size-body-sm);
}
.ads-table th,
.ads-table td {
  background: var(--ads-surface);
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
}
.ads-table thead th {
  background: var(--ads-surface-tint);
  font-family: var(--ads-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ads-text-muted);
  font-weight: 500;
}
.ads-table th[scope="row"] { font-weight: 600; color: var(--ads-text); }

/* ============================================================
   FOTOGRAFÍA
   Regla del sitio: una foto de producto con fondo blanco va
   siempre sobre plancha blanca, nunca sobre el azul de fondo.
   ============================================================ */

.ads-photo { overflow: hidden; background: var(--ads-surface-tint); }
.ads-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Producto recortado sobre blanco: contain + plancha blanca */
.ads-product-shot { background: var(--ads-surface); overflow: hidden; }
.ads-product-shot > img { width: 100%; height: 100%; object-fit: contain; padding: 10px; display: block; }

/* ============================================================
   FORMULARIO
   Ver 06-formulaires/demande-de-devis.md para el detalle.
   ============================================================ */

.ads-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; min-width: 0; }
.ads-field input,
.ads-field select,
.ads-field textarea {
  min-width: 0;
  border: 1px solid var(--ads-border);
  border-radius: var(--ads-radius);
  padding: 13px 14px;
  font-family: var(--ads-font-body);
  font-size: var(--ads-size-body-sm);
  background: var(--ads-bg);
  color: var(--ads-text);
}
.ads-field input:focus,
.ads-field select:focus,
.ads-field textarea:focus { outline: none; border-color: var(--ads-accent); }
.ads-required { color: var(--ads-error); }
.ads-field-error { font-weight: 400; font-size: var(--ads-size-caption); color: var(--ads-error); line-height: 1.4; }

/* ============================================================
   RESPONSIVE
   El sitio se diseñó a 1360px. Estos cortes reproducen el
   comportamiento esperado; ajustar en Elementor por widget.
   ============================================================ */

@media (max-width: 1024px) {
  :root { --ads-gutter: 28px; --ads-section-gap: 72px; --ads-size-h1: 38px; --ads-size-h2: 27px; }
}

@media (max-width: 767px) {
  :root { --ads-gutter: 20px; --ads-section-gap: 56px; --ads-size-h1: 30px; --ads-size-h2: 23px; }
  /* Toda rejilla de dos o más columnas pasa a una sola */
  .ads-hairline-grid { grid-template-columns: 1fr !important; }
}