/* ==========================================================================
   EcoAnalítica — Sistema visual
   Paleta: hoja "Paleta Completa" del manual corporativo (coincide con el logo)
   Motivo gráfico: la trama de píxeles del símbolo (datos dispersos -> forma)
   ========================================================================== */

:root {
  /* Marca */
  --bone:   #EDE9E5;  /* fondo de página */
  --sand:   #D8CCBB;  /* bloques destacados */
  --sage:   #9AAE93;  /* verde del símbolo */
  --clay:   #7A6856;  /* subtítulos, divisores */
  --slate:  #324640;  /* títulos, header, wordmark */
  --ink:    #262727;  /* texto */
  --white:  #FFFFFF;

  /* Submarca SIMONE */
  --simone-blue: #349ED8;
  --simone-navy: #363755;

  /* Acento contextual (se sobrescribe por página) */
  --accent:      var(--sage);
  --accent-deep: var(--slate);

  /* Superficies derivadas */
  --line: rgba(50, 70, 64, .16);
  --line-strong: rgba(50, 70, 64, .32);
  --card: #F6F4F1;

  /* Tipografía */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Métricas */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 2px;           /* la marca está hecha de cuadrados: casi sin curva */
  --section-y: clamp(4.5rem, 9vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Tema de página: línea industrial / SIMONE */
body[data-theme="simone"] {
  --accent: var(--simone-blue);
  --accent-deep: var(--simone-navy);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--slate); color: var(--white);
  padding: .75rem 1rem; z-index: 999;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------- Tipografía */

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--slate);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.15rem); font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.85rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 600; letter-spacing: -0.015em; }
h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: #3E4A46;
  max-width: 58ch;
}

.measure { max-width: 68ch; }

/* Etiqueta mono con marca de píxeles */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 6px;
  background:
    linear-gradient(var(--accent) 0 0) 0 0 / 6px 6px no-repeat,
    linear-gradient(var(--accent) 0 0) 8px 0 / 6px 6px no-repeat,
    linear-gradient(var(--accent) 0 0) 16px 0 / 6px 6px no-repeat;
  flex: none;
}

/* --------------------------------------------------------------- Botones */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding: .85rem 1.5rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--slate); color: var(--bone); }
.btn--primary:hover { background: var(--ink); }
body[data-theme="simone"] .btn--primary { background: var(--simone-navy); }
body[data-theme="simone"] .btn--primary:hover { background: #24253C; }

.btn--ghost { border-color: var(--line-strong); color: var(--slate); }
.btn--ghost:hover { border-color: var(--slate); background: rgba(50,70,64,.05); }

.btn--accent { background: var(--sage); color: var(--slate); }
.btn--accent:hover { filter: brightness(.93); }

.btn--on-dark { border-color: rgba(237,233,229,.4); color: var(--bone); }
.btn--on-dark:hover { background: rgba(237,233,229,.12); border-color: var(--bone); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* Enlace de texto con subrayado animado */
.tlink {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--slate);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.tlink:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* --------------------------------------------------------------- Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(237,233,229,.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-decoration: none;
  flex: none;
}
.brand img { height: 38px; width: auto; }
.brand-tagline {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clay);
  padding-left: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  color: var(--slate);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, opacity .18s ease;
}
.nav-links a:hover { border-bottom-color: var(--accent); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--slate); }

.nav-cta { flex: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .55rem .7rem;
  cursor: pointer;
  color: var(--slate);
}
.nav-toggle span {
  display: block; width: 20px; height: 2px;
  background: currentColor; margin: 4px 0;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: block; order: 3; }
  .nav-cta { display: none; }
  .nav-links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-links.is-open { max-height: 480px; padding-bottom: 1.25rem; }
  .nav-links li { width: 100%; border-top: 1px solid var(--line); }
  .nav-links a { display: block; padding: .9rem 0; border-bottom: none; }
  .nav { flex-wrap: wrap; }
}

/* --------------------------------------------------------------- Secciones */

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section--dark {
  background: var(--slate);
  color: rgba(237,233,229,.82);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--bone); }
.section--dark .lede { color: rgba(237,233,229,.8); }
.section--dark .eyebrow { color: var(--sage); }
body[data-theme="simone"] .section--dark { background: var(--simone-navy); }
body[data-theme="simone"] .section--dark .eyebrow { color: var(--simone-blue); }

.section--sand { background: var(--sand); }
.section--sand .eyebrow { color: #6A5A49; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

/* Regla de píxeles: divisor propio de la marca */
.rule {
  height: 6px;
  background-image: linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 14px);
  background-size: 14px 6px;
  background-repeat: repeat-x;
  opacity: .55;
  margin: 0;
  border: 0;
}

/* --------------------------------------------------------------- Hero */

.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3.5rem, 7vw, 5.5rem); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: .35em; }
.hero .lede { max-width: 52ch; }

/* Firma visual: la trama de píxeles del símbolo */
.raster-figure { display: flex; flex-direction: column; gap: 1rem; }

.raster {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: clamp(3px, .55vw, 6px);
  width: 100%;
}
.raster .px {
  aspect-ratio: 1;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
  transform: translateX(-14px);
}
.raster .px.is-scatter { background: var(--clay); }
.raster.is-live .px {
  animation: settle .7s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes settle {
  from { opacity: 0; transform: translateX(-14px) scale(.6); }
  to   { opacity: var(--o, 1); transform: translateX(0) scale(1); }
}

.raster-legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
}
.raster-legend span:last-child { color: var(--slate); }

/* --------------------------------------------------------------- Barra de confianza */

.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 2rem;
}
.trust-inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  flex-wrap: wrap;
}
.trust-label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay);
  flex: none;
}
.trust-logos {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.trust-logos img {
  height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.trust-logos img:hover { filter: none; opacity: 1; }
.trust-logos .trust-name {
  font-family: var(--display);
  font-weight: 600;
  color: var(--clay);
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------- Grillas y tarjetas */

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.15rem);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card p { color: #45514D; font-size: .98rem; }
.card--link { text-decoration: none; }
.card--link:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -20px rgba(38,39,39,.5);
}
.card .card-foot { margin-top: auto; padding-top: 1.35rem; }

.section--dark .card {
  background: rgba(237,233,229,.055);
  border-color: rgba(237,233,229,.16);
}
.section--dark .card p { color: rgba(237,233,229,.76); }
.section--dark .card--link:hover { border-color: var(--accent); }

.section--sand .card { background: rgba(255,255,255,.62); border-color: rgba(122,104,86,.22); }

/* Índice numerado: sólo donde el orden significa algo */
.card .idx {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: .9rem;
}

/* Tarjetas de puerta de entrada (líneas de negocio) */
.gateway {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  padding: clamp(1.75rem, 3.5vw, 2.6rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gateway::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: var(--gw, var(--sage));
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.gateway:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -28px rgba(38,39,39,.55); }
.gateway:hover::after { transform: scaleX(1); }
.gateway .gw-tag {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gw, var(--sage));
  margin-bottom: 1rem;
}
.gateway h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; }
.gateway ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.gateway ul li {
  font-size: .95rem;
  color: #45514D;
  padding-left: 1.15rem;
  position: relative;
  margin-bottom: .4rem;
}
.gateway ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  background: var(--gw, var(--sage));
}
.gateway .gw-go {
  margin-top: auto;
  padding-top: 1.75rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}

/* --------------------------------------------------------------- Bloques de producto */

.product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.product:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 860px) { .product { grid-template-columns: 1fr; } }

.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--clay);
  margin-bottom: 1rem;
}
.status::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--accent);
}
.status--live { color: var(--slate); border-color: var(--accent); }

/* Lista de definición para "para quién / modelo / estándares" */
.spec { margin: 1.75rem 0 0; display: grid; gap: 1rem; }
.spec div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; }
.spec dt {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
  padding-top: .28em;
}
.spec dd { margin: 0; font-size: .98rem; }
@media (max-width: 620px) {
  .spec div { grid-template-columns: 1fr; gap: .25rem; }
}

/* --------------------------------------------------------------- Listas */

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checklist li { position: relative; padding-left: 1.75rem; font-size: 1rem; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 10px; height: 10px;
  background: var(--accent);
}

.section--dark .checklist li { color: rgba(237,233,229,.82); }

/* --------------------------------------------------------------- Valores / equipo */

.value-item { border-top: 2px solid var(--slate); padding-top: 1.1rem; }
.value-item h4 { margin-bottom: .35rem; }
.value-item p { font-size: .95rem; color: #45514D; margin: 0; }

.person {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.person .role {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
}
.person h4 { margin: .35rem 0 0; font-size: 1.15rem; }

/* --------------------------------------------------------------- App cards */

.app {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.app:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 36px -26px rgba(38,39,39,.5); }
.app-visual {
  height: 150px;
  background: var(--slate);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.app-visual .mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -.03em;
  color: var(--bone);
  z-index: 1;
}
.app-visual .mark small {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--sage);
  margin-top: .35rem;
}
.app-visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(154,174,147,.22) 0 6px, transparent 6px 18px),
                    linear-gradient(rgba(154,174,147,.22) 0 6px, transparent 6px 18px);
  background-size: 18px 18px;
}
.app-body { padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .4rem; }
.app-body .card-foot { margin-top: auto; padding-top: 1.35rem; }

/* ------------------------------------------------- Hero de línea de producto */

.brand-hero {
  background: var(--slate);
  color: rgba(237,233,229,.85);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}
.brand-hero h1 { color: var(--bone); }
.brand-hero .lede { color: rgba(237,233,229,.82); }
.brand-hero .eyebrow { color: var(--sage); }
/* El logotipo del producto conserva su color original sobre una placa clara */
.brand-hero .product-lockup {
  max-width: 340px;
  margin-bottom: 2rem;
  background: var(--bone);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
}

/* Medidor: tira de barras que evoca lectura de sensores */
.meter {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 190px;
  margin-top: 2.5rem;
}
.meter i {
  flex: 1;
  background: linear-gradient(var(--sage), rgba(154,174,147,.28));
  height: var(--h, 40%);
  border-radius: 1px;
  transform-origin: bottom;
  animation: pulse 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes pulse {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(var(--s, 1.25)); }
}

/* --------------------------------------------------------------- Formulario */

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: grid; gap: .45rem; margin-bottom: 1.25rem; }
.field label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
}
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(154,174,147,.35);
}

.contact-block { border-top: 2px solid var(--slate); padding-top: 1.5rem; margin-bottom: 2rem; }
.contact-block .role {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: .4rem;
}
.contact-block a { color: var(--slate); }

.map {
  width: 100%;
  height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  filter: grayscale(.35);
}

/* --------------------------------------------------------------- CTA final */

.cta-band {
  background: var(--slate);
  color: var(--bone);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
body[data-theme="simone"] .cta-band { background: var(--simone-navy); }
.cta-band h2 { color: var(--bone); max-width: 20ch; }
.cta-band p { color: rgba(237,233,229,.78); max-width: 52ch; }
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 820px) { .cta-inner { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Footer */

.site-footer {
  background: var(--ink);
  color: rgba(237,233,229,.62);
  padding-block: clamp(3rem, 5vw, 4rem) 2rem;
  font-size: .92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  color: var(--sage);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: rgba(237,233,229,.72); text-decoration: none; }
.site-footer a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.footer-logo img { height: 40px; margin-bottom: 1.25rem; filter: brightness(0) invert(1) opacity(.9); }
.footer-bottom {
  border-top: 1px solid rgba(237,233,229,.14);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------- Reveal */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .raster .px { opacity: var(--o, 1); transform: none; }
}

/* --------------------------------------------------------------- Tablas */

.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 460px;
}
.table th {
  text-align: left;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay);
  border-bottom: 2px solid var(--slate);
  padding: .65rem .9rem .65rem 0;
  white-space: nowrap;
}
.table td {
  border-bottom: 1px solid var(--line);
  padding: .8rem .9rem .8rem 0;
  vertical-align: top;
}
.table td:first-child { font-weight: 600; color: var(--slate); }
.table td .unit {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--clay);
}
.section--dark .table th { color: var(--sage); border-bottom-color: rgba(237,233,229,.35); }
.section--dark .table td { border-bottom-color: rgba(237,233,229,.14); }
.section--dark .table td:first-child { color: var(--bone); }
.section--dark .table td .unit { color: rgba(237,233,229,.6); }

/* --------------------------------------------------------------- Diagrama */

.diagram {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 2rem);
}
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption {
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--clay);
  text-align: center;
}
.section--dark .diagram {
  background: rgba(237,233,229,.05);
  border-color: rgba(237,233,229,.16);
}
.section--dark .diagram figcaption { color: rgba(237,233,229,.6); }

.dg-box { fill: var(--white); stroke: var(--line-strong); stroke-width: 1.2; }
.dg-box--hero { fill: var(--slate); stroke: var(--slate); }
.dg-t { font-family: var(--body); font-size: 14px; font-weight: 600; fill: var(--slate); }
.dg-t--on { fill: #FFFFFF; }
.dg-s { font-family: var(--body); font-size: 12px; fill: #56635E; }
.dg-s--on { fill: rgba(255,255,255,.78); }
.dg-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--clay);
}
.dg-line { stroke: var(--sage); stroke-width: 2; fill: none; }
.section--dark .dg-box { fill: rgba(255,255,255,.06); stroke: rgba(237,233,229,.28); }
.section--dark .dg-t { fill: var(--bone); }
.section--dark .dg-s { fill: rgba(237,233,229,.72); }
.section--dark .dg-l { fill: rgba(237,233,229,.6); }

/* Bloque de dato destacado */
.figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.figure-row div { background: var(--bone); padding: 1.5rem 1.35rem; }
.figure-row .n {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--accent-deep);
  line-height: 1;
  margin-bottom: .5rem;
}
.figure-row p {
  font-size: .92rem;
  color: #4B5652;
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Contraste del bloque SIMONE dentro del diagrama en secciones oscuras */
.section--dark .dg-box--hero { fill: var(--bone); stroke: var(--bone); }
.section--dark .dg-t--on { fill: var(--slate); }
.section--dark .dg-s--on { fill: #4B5652; }

.dg-l--mid { font-size: 9.5px; letter-spacing: .04em; }

/* Contraste de enlaces y estados sobre fondos oscuros */
.section--dark .tlink { color: var(--bone); border-bottom-color: var(--accent); }
.section--dark .tlink:hover { color: var(--accent); border-color: var(--accent); }
.section--dark .status { color: rgba(237,233,229,.82); border-color: rgba(237,233,229,.3); }
.section--dark .status--live { color: var(--bone); border-color: var(--accent); }
.app-visual .mark small { color: #C6D3C1; }

/* La submarca SIMONE ya no tematiza la página de industrias.
   Los tokens se conservan por si SIMONE recibe sitio propio. */


/* ==========================================================================
   Bloques añadidos en la reestructuración industrial
   ========================================================================== */

/* Imagen del hero y de las tarjetas de producto */
.media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.media img { width: 100%; height: auto; display: block; }
.media--dark { border-color: rgba(237,233,229,.2); background: rgba(237,233,229,.05); }
.media figcaption {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clay);
  padding: .7rem .9rem;
  border-top: 1px solid var(--line);
}
.media--dark figcaption { color: rgba(237,233,229,.6); border-top-color: rgba(237,233,229,.18); }

/* Tarjeta de producto con imagen */
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pcard:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(38,39,39,.5); }
.pcard > img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--line); }
.pcard-body { padding: clamp(1.5rem, 3vw, 2.15rem); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.pcard-body .card-foot { margin-top: auto; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Insignia "próximamente" */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--sage);
  padding: .3rem .6rem;
  border-radius: var(--radius);
}
.badge--quiet { background: transparent; border: 1px solid var(--line-strong); color: var(--clay); }

/* Formulario compacto dentro del pie de página */
.footer-form .field { margin-bottom: .85rem; }
.footer-form .field label {
  color: rgba(237,233,229,.6);
  font-size: .66rem;
}
.footer-form input,
.footer-form textarea {
  background: rgba(237,233,229,.07);
  border: 1px solid rgba(237,233,229,.22);
  color: var(--bone);
  padding: .6rem .7rem;
  font-size: .92rem;
  border-radius: var(--radius);
  width: 100%;
  font-family: var(--body);
}
.footer-form textarea { min-height: 78px; resize: vertical; }
.footer-form input:focus,
.footer-form textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(154,174,147,.22);
}
.footer-form button {
  background: var(--sage);
  color: var(--slate);
  border: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: .9rem;
  padding: .7rem 1.2rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter .18s ease;
}
.footer-form button:hover { filter: brightness(1.06); }

/* Línea discreta de riesgos territoriales */
.footer-note {
  border-top: 1px solid rgba(237,233,229,.14);
  padding-top: 1.5rem;
  margin-top: .5rem;
  font-size: .88rem;
  color: rgba(237,233,229,.55);
}
.footer-note a { color: rgba(237,233,229,.8); text-decoration: underline; text-underline-offset: 3px; }
.footer-note a:hover { color: var(--sage); }

/* Aviso de contenido provisional */
.placeholder-note {
  border-left: 3px solid var(--clay);
  padding: .9rem 1.1rem;
  background: rgba(122,104,86,.08);
  font-size: .9rem;
  color: #56635E;
  margin-top: 1.25rem;
}

/* Hero con titular largo: columnas iguales y escala tipográfica contenida.
   Solo en escritorio: por debajo de 900 px la retícula debe apilarse. */
@media (min-width: 901px) {
  .hero--lead .hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
.hero--lead h1 { font-size: clamp(2.05rem, 3.9vw, 3.2rem); }

/* Placa de marca en las tarjetas de producto (logo o gráfico, no fotografía).
   Altura fija para que los cuerpos de las dos tarjetas queden alineados. */
.pcard-mark {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  height: 215px;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.pcard-mark img { max-height: 100%; max-width: 250px; width: auto; height: auto; }
.pcard-mark--wide img { max-width: 430px; }

/* Hero de SIMONE: titular y bajada en paralelo, captura a todo el ancho debajo */
.hero-grid--text { align-items: end; }
.shot { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.shot img { width: 100%; height: auto; }

/* Las etiquetas de la trama se tocaban en pantallas estrechas */
.raster-legend { gap: 1rem; }
@media (max-width: 520px) {
  .raster-legend { font-size: .58rem; letter-spacing: .06em; }
}

/* ==========================================================================
   Íconos ilustrativos en tarjetas de contenido
   El ícono va en línea junto al título (no apilado encima), sobre una placa
   clara que garantiza contraste incluso en fondos oscuros (section--dark).
   ========================================================================== */
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.1rem;
  margin-bottom: .85rem;
}
/* Cuando la columna de texto no cabe junto al ícono a su ancho natural,
   que baje a su propia línea (a todo el ancho de la tarjeta) en vez de
   comprimirse hasta partir palabras. Sin esto, el título se sale de la
   tarjeta porque flexbox no encoge un elemento por debajo del ancho de
   su contenido. */
.card-head h3 {
  overflow-wrap: break-word;
}
.icon-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .65rem .8rem;
}
.card-icon {
  display: block;
  height: 88px;
  width: auto;
}
/* Las composiciones de SIMONE y Compromisos llevan más detalle: un poco más grandes */
.card-icon--lg { height: 104px; }
.section--dark .icon-plate { border-color: rgba(50,70,64,.14); }

/* La etiqueta (idx/eyebrow) pierde su margen inferior cuando va junto al
   ícono: aquí el título le sigue de inmediato en la misma columna. */
.card-head .idx,
.card-head .eyebrow { margin-bottom: .3rem; }
.card-head h3 { margin-bottom: 0; }

/* Tipografía algo más contenida en las tarjetas con ícono, para que el
   conjunto ícono + texto quede equilibrado. */
.card--icon h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.card--icon > p:not(.idx) { font-size: .92rem; }