/* ==========================================================================
   Ritmo editorial de color (20-oct-2026, auditoría de diseño)
   La página deja de ser marfil con tres franjas teal: cada sección tiene su
   propia combinación (1 principal + 1 secundario + 1 acento) y el universo
   complementario (oliva, terracota, café, camel) entra con superficies propias.

   Contraste (WCAG AA), solo con la paleta oficial:
   - Texto corrido: marfil sobre Teal (6,4:1) o Brown (6,5:1); Teal o Brown
     sobre marfil.
   - Oliva, Terracota y Camel: superficies sin texto pequeño encima. Terracota
     sobre marfil (3,7:1) solo en títulos grandes.
   - Ámbar: formas, líneas y detalles; nunca texto ni fondo de texto.

   Archivo independiente y cargado al final: quitar su <link> en index.html
   (y las clases surface-brown / surface-dark añadidas ese día) devuelve la v7.
   ========================================================================== */

/* Superficie café: calidez arquitectónica (manifiesto y preguntas) */
.surface-brown { background: var(--brown); color: var(--ivory); }

/* ---- 1. Inicio: Deep Teal + marfil + ámbar ------------------------------- */
.hero-x { background: var(--teal); color: var(--ivory); }
.hero-x .hero-title,
.hero-x .hero-sub,
.hero-x .hero-eyebrow,
.hero-x .hero-proof,
.hero-x__cue { color: var(--ivory); }
.hero-x .hero-eyebrow .dot { box-shadow: 0 0 0 3px var(--teal), 0 0 0 4px var(--amber); }
.hero-x .hero-proof:hover .hero-proof__num { color: var(--teal); }
.hero-x__cue-dot { box-shadow: 0 0 0 5px rgba(217,139,43,.28); }

/* ---- 2. Manifiesto: Warm Brown + marfil + ámbar -------------------------- */
/* El panel en arco sube café sobre el inicio teal; la textura de celdas se
   insinúa arriba y se funde en el café. */
.manifesto--arch {
  background:
    linear-gradient(180deg, rgba(107,74,58,.72) 0%, rgba(107,74,58,.9) 38%, rgba(107,74,58,.98) 70%),
    url('../assets/img/macro-celdas-1536.webp') center top / cover no-repeat,
    var(--brown);
}
@media (max-width: 900px) {
  .manifesto--arch {
    background:
      linear-gradient(180deg, rgba(107,74,58,.74) 0%, rgba(107,74,58,.92) 36%, rgba(107,74,58,.98) 70%),
      url('../assets/img/macro-celdas-900.webp') center top / cover no-repeat,
      var(--brown);
  }
}

/* ---- 3. Del sol al movimiento: marfil + terracota + camel ---------------- */
/* Pausa editorial cálida: palabras gigantes en terracota (solo tamaño grande),
   marco camel y velos café sobre las fotos. */
@media (prefers-reduced-motion: no-preference) {
  .xp .story__word { color: var(--terracotta); }
  .xp .story__frame { border: 2px solid var(--camel); background: var(--brown); }
  .xp .story__scene figcaption {
    background: linear-gradient(180deg, rgba(107,74,58,0) 0%, rgba(107,74,58,.8) 45%, rgba(107,74,58,.94) 100%);
  }
}

/* ---- 4. Soluciones: Solar + EV es el momento protagonista --------------- */
.sol-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--sp-xl);
  padding: clamp(1.4rem, 4.5vw, 4rem);
  border-bottom: 0;
  border-radius: var(--radius-lg);
  background: var(--teal);
  color: var(--ivory);
}
/* Órbita Solar (elemento gráfico oficial, una sola en la página), anclada a la esquina */
.sol-feature::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* el centro queda en la esquina superior derecha: solo se ven los anillos */
  right: calc(clamp(360px, 44vw, 640px) / -2);
  top: calc(clamp(360px, 44vw, 640px) / -2);
  width: clamp(360px, 44vw, 640px);
  aspect-ratio: 1;
  background: url('../assets/img/orbita-solar.svg') center / contain no-repeat;
  opacity: .9;
  pointer-events: none;
}
.sol-feature .sol-card__cat,
.sol-feature__title,
.sol-feature__text > p:not(.sol-card__cat) { color: var(--ivory); }
.sol-feature__title { font-size: var(--step-2xl); letter-spacing: -0.02em; }
.sol-feature .sol-card__cat::before {
  content: '';
  display: inline-block;
  width: 22px; height: 2px;
  margin-right: .6em;
  vertical-align: middle;
  background: var(--amber);
  border-radius: 2px;
}
/* Recorrido de la energía sobre teal */
.sol-feature .ev-flow__icon { background: var(--teal); color: var(--ivory); border-color: var(--amber); }
.sol-feature .ev-flow__nodes li:first-child .ev-flow__icon,
.sol-feature .ev-flow__nodes li:last-child .ev-flow__icon { background: var(--ivory); color: var(--teal); border-color: var(--ivory); }
.sol-feature .ev-flow__nodes strong,
.sol-feature .ev-flow__nodes li > span:last-child { color: var(--ivory); }

/* Las cuatro líneas de servicio con el mismo marco, para que se vean simétricas (Natalia, 8-nov-2026). */
.sol-grid .sol-card__frame { border-radius: var(--radius-md); }
/* Foto, categoría, título, texto y enlace alineados entre tarjetas. */
@media (min-width: 900px) {
  .sol-grid .sol-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .sol-grid .sol-card .btn-link { justify-self: start; align-self: end; }
}
.sol-grid { margin-top: var(--sp-2xl); }

/* ---- 5. Proyectos: marfil + oliva, evidencia real ----------------------- */
/* Escenario oliva con cada caso en una ficha marfil (el texto nunca va
   directo sobre oliva). La cifra de paneles se destaca como dato editorial. */
#proyectos .projects {
  gap: clamp(.9rem, 2.4vw, 2rem);
  padding: clamp(.75rem, 3.2vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--olive);
}
#proyectos .project {
  padding: clamp(1rem, 2.8vw, 2.5rem);
  border-radius: var(--radius-md);
  background: var(--ivory);
}
#proyectos .project__facts div:first-child { align-items: baseline; }
#proyectos .project__facts div:first-child dd {
  font-size: var(--step-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ---- 9. Preguntas: Warm Brown + marfil + ámbar --------------------------- */
#preguntas .faq-item summary,
#preguntas .faq-x .faq-item summary::after,
#preguntas .faq-item p { color: var(--ivory); }
#preguntas .faq-num { border-color: var(--ivory); color: var(--ivory); }
#preguntas .faq-x .faq-item[open] .faq-num { background: var(--ivory); color: var(--brown); }
#preguntas :focus-visible { outline-color: var(--ivory); }
/* Las cuatro miniaturas caben en una fila también dentro de la ficha */
#proyectos .project__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 72px)); }
#proyectos .project__thumb { width: 100%; }