/* ============================================================
   FER AYALA ESTUDIO — CSS GLOBAL
   Design & Build · San Luis Potosí, México
   ============================================================

   SISTEMA DE DISEÑO (palabra rectora: EDITORIAL)

   Referencia visual: revista de arquitectura + estudio creativo
   + taller de alta precisión. El proyecto es el protagonista;
   la gráfica nunca compite con la fotografía.

   1. COLOR — regla 80/20
      El 80% del sitio vive en neutros cálidos (papel, tinta,
      concreto, arena, madera). Los colores del logotipo
      (bugambilia, violeta, naranja) aparecen solo como acento
      en el 20%: líneas técnicas, botones, detalles editoriales.
      NUNCA como fondos completos de sección.

   2. TIPOGRAFÍA
      Una sola familia: Manrope (Google Fonts), en dos pesos
      contrastados — 300 (display y cuerpo ligero) y 700
      (énfasis, botones, etiquetas). El logotipo manuscrito es
      la ÚNICA pieza script del sitio.

   3. FIRMA GRÁFICA — "la cota"
      Elemento distintivo del sitio: la línea de cota tomada
      del dibujo técnico (línea fina con remates verticales y
      etiqueta), usada como eyebrow de sección. Codifica el
      mensaje central: aquí los detalles se resuelven en el
      plano, antes de la obra. Se dibuja con CSS puro.

   4. ICONOGRAFÍA
      SVG inline de trazo fino (1.5px), inspirada en planos y
      detalles constructivos. Nunca iconos genéricos de stock.

   5. ESPACIO
      Mucho blanco. Secciones respiran con --esp-seccion.
      Máximo 3 niveles de jerarquía visual por pantalla.

   6. MOVIMIENTO
      Scroll-reveal sutil (translateY 24px + fade, 0.7s) vía
      IntersectionObserver. Respeta prefers-reduced-motion.
   ============================================================ */


/* ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------ */
:root {
  /* Neutros — 80% del sitio */
  --papel: #FBF9F5;          /* blanco cálido, fondo base */
  --papel-hueso: #F4F0E8;    /* segundo fondo, secciones alternas */
  --tinta: #1B1815;          /* negro cálido, texto principal */
  --gris-calido: #6F6860;    /* texto secundario */
  --arena: #E8E1D4;          /* superficies, placeholders */
  --concreto: #D9D5CE;       /* bordes suaves, divisores */
  --madera: #A98A62;         /* acento material, detalles cálidos */

  /* Acentos del logotipo — solo 20%, nunca fondos completos */
  --bugambilia: #C03A6E;     /* acento principal: cotas, botones, enlaces */
  --violeta: #6E4B8E;        /* acento secundario: detalles editoriales */
  --naranja: #D9722F;        /* acento terciario: usos puntuales */

  /* Tipografía */
  --fuente: 'Manrope', system-ui, sans-serif;
  --peso-ligero: 300;
  --peso-fuerte: 700;

  /* Escala tipográfica fluida */
  --t-display: clamp(2.1rem, 5.5vw, 3.9rem);   /* H1 hero */
  --t-titulo: clamp(1.6rem, 3.5vw, 2.5rem);    /* H2 sección */
  --t-subtitulo: clamp(1.15rem, 2vw, 1.4rem);  /* H3 */
  --t-cuerpo: 1.0625rem;                       /* párrafos */
  --t-etiqueta: 0.75rem;                       /* cotas, eyebrows */

  /* Espaciado */
  --esp-seccion: clamp(4.5rem, 10vw, 8rem);
  --esp-bloque: clamp(2rem, 4vw, 3.5rem);
  --ancho-max: 1200px;
  --ancho-lectura: 42rem;

  /* Misceláneos */
  --radio: 2px;              /* casi recto: precisión de taller */
  --transicion: 0.25s ease;
}


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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-weight: var(--peso-ligero);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--bugambilia); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--violeta); }

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

h1, h2, h3 {
  font-weight: var(--peso-ligero);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-titulo); }
h3 { font-size: var(--t-subtitulo); font-weight: var(--peso-fuerte); letter-spacing: 0; }

p { margin: 0 0 1.25rem; }

strong { font-weight: var(--peso-fuerte); }

.contenedor {
  width: min(100% - 3rem, var(--ancho-max));
  margin-inline: auto;
}

.seccion { padding-block: var(--esp-seccion); }
.seccion--hueso { background: var(--papel-hueso); }

.texto-secundario { color: var(--gris-calido); }
.medida-lectura { max-width: var(--ancho-lectura); }


/* ------------------------------------------------------------
   FIRMA GRÁFICA — LA COTA
   Eyebrow de sección dibujado como línea de cota de plano:
   |———— ETIQUETA ————|
   ------------------------------------------------------------ */
.cota {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  color: var(--bugambilia);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cota::before,
.cota::after {
  content: "";
  height: 1px;
  width: 2.5rem;
  background: currentColor;
  position: relative;
}

/* Remates verticales de la cota */
.cota::before { border-left: 1px solid currentColor; }
.cota::after { border-right: 1px solid currentColor; }
.cota::before, .cota::after { height: 9px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }


/* ------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------ */
.boton {
  display: inline-block;
  padding: 0.9rem 2rem;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  font-family: var(--fuente);
  font-size: 0.95rem;
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.02em;
  color: var(--tinta);
  background: transparent;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

.boton:hover {
  background: var(--tinta);
  color: var(--papel);
}

.boton--primario {
  background: var(--bugambilia);
  border-color: var(--bugambilia);
  color: #fff;
}

.boton--primario:hover {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}


/* ------------------------------------------------------------
   HEADER Y NAVEGACIÓN
   ------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--concreto);
}

.header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
}

.header__logo img { height: 44px; width: auto; }

/* Placeholder del logotipo manuscrito */
.logo-placeholder {
  font-weight: var(--peso-fuerte);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--tinta);
}
.logo-placeholder span { color: var(--bugambilia); }

.nav {
  display: none; /* móvil: oculto, se abre con hamburguesa */
}

.nav__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav__enlace {
  display: block;
  padding: 0.65rem 0;
  color: var(--tinta);
  font-size: 1rem;
}

.nav__enlace:hover,
.nav__enlace[aria-current="page"] { color: var(--bugambilia); }

.nav__cta {
  margin-top: 0.75rem;
}

/* Botón hamburguesa */
.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburguesa span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--tinta);
  transition: transform var(--transicion), opacity var(--transicion);
}

.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Nav abierta en móvil */
.nav.nav--abierta {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--papel);
  border-bottom: 1px solid var(--concreto);
  padding: 1.25rem 1.5rem 1.75rem;
}

/* Desktop */
@media (min-width: 960px) {
  .hamburguesa { display: none; }

  .nav { display: block; position: static; }

  .nav__lista {
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
  }

  .nav__enlace {
    padding: 0.25rem 0;
    font-size: 0.9rem;
  }

  .nav__cta { margin-top: 0; }
  .nav__cta .boton { padding: 0.55rem 1.25rem; font-size: 0.85rem; }
}


/* ------------------------------------------------------------
   PLACEHOLDERS DE FOTOGRAFÍA
   Cada placeholder describe la fotografía real que debe ir ahí.
   Nunca renders: fotografía de proyecto y de taller.
   ------------------------------------------------------------ */
.foto-placeholder {
  background: var(--arena);
  border: 1px dashed var(--concreto);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--gris-calido);
  font-size: 0.85rem;
  line-height: 1.5;
}

.foto-placeholder--hero { min-height: 58vh; }
.foto-placeholder--tarjeta { aspect-ratio: 4 / 3; }
.foto-placeholder--retrato { aspect-ratio: 3 / 4; }


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero { padding-block: var(--esp-bloque) var(--esp-seccion); }

.hero__texto { padding-block: var(--esp-bloque); max-width: 46rem; }

.hero__bajada {
  font-size: 1.15rem;
  color: var(--gris-calido);
  max-width: 38rem;
  margin-bottom: 2rem;
}


/* ------------------------------------------------------------
   REJILLAS Y TARJETAS
   ------------------------------------------------------------ */
.rejilla {
  display: grid;
  gap: var(--esp-bloque);
}

@media (min-width: 700px) {
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
}

.bloque-valor h3 {
  margin-bottom: 0.5rem;
}

.bloque-valor .icono {
  color: var(--bugambilia);
  margin-bottom: 1rem;
}

.bloque-valor p {
  color: var(--gris-calido);
  font-size: 0.98rem;
  margin: 0;
}

/* Tarjeta de caso de estudio */
.tarjeta-caso {
  display: block;
  color: inherit;
}

.tarjeta-caso:hover { color: inherit; }

.tarjeta-caso .foto-placeholder { margin-bottom: 1.1rem; transition: opacity var(--transicion); }
.tarjeta-caso:hover .foto-placeholder { opacity: 0.85; }

.tarjeta-caso__sector {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bugambilia);
  margin-bottom: 0.4rem;
}

.tarjeta-caso h3 { margin-bottom: 0.4rem; }

.tarjeta-caso p { color: var(--gris-calido); font-size: 0.95rem; margin: 0; }

.tarjeta-caso__mas {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta);
  border-bottom: 1px solid var(--bugambilia);
  padding-bottom: 2px;
  transition: color var(--transicion);
}

.tarjeta-caso:hover .tarjeta-caso__mas { color: var(--bugambilia); }


/* ------------------------------------------------------------
   TESTIMONIO NARRATIVO
   ------------------------------------------------------------ */
.testimonio {
  border-left: 2px solid var(--bugambilia);
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  max-width: var(--ancho-lectura);
}

.testimonio p {
  font-size: 1.15rem;
  line-height: 1.7;
}

.testimonio footer {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--gris-calido);
}

.testimonio footer strong {
  display: block;
  color: var(--tinta);
}


/* ------------------------------------------------------------
   SECCIÓN FILTRO (dos columnas sí / no)
   ------------------------------------------------------------ */
.filtro__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filtro__lista li {
  padding: 0.9rem 0 0.9rem 1.75rem;
  border-bottom: 1px solid var(--concreto);
  position: relative;
  color: var(--gris-calido);
}

.filtro__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 0.9rem;
  height: 1px;
  background: var(--bugambilia);
}

.filtro__col--no .filtro__lista li::before { background: var(--concreto); }

.filtro__col h3 { margin-bottom: 0.75rem; }


/* ------------------------------------------------------------
   CIERRE / CTA FINAL
   ------------------------------------------------------------ */
.cierre { text-align: center; }

.cierre h2 { max-width: 32ch; margin-inline: auto; }

.cierre p {
  color: var(--gris-calido);
  max-width: 44ch;
  margin: 0 auto 2rem;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer {
  background: var(--tinta);
  color: var(--concreto);
  padding-block: var(--esp-bloque) 2rem;
  font-size: 0.9rem;
}

.footer a { color: var(--papel); }
.footer a:hover { color: var(--bugambilia); }

.footer__rejilla {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 700px) {
  .footer__rejilla { grid-template-columns: 2fr 1fr 1fr; }
}

.footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__lista li { margin-bottom: 0.5rem; }

.footer__legal {
  border-top: 1px solid #3a352f;
  padding-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--gris-calido);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}


/* ------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP
   ------------------------------------------------------------ */
.whatsapp-flotante {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(27, 24, 21, 0.25);
  transition: background var(--transicion), transform var(--transicion);
}

.whatsapp-flotante:hover {
  background: var(--bugambilia);
  color: #fff;
  transform: translateY(-2px);
}


/* ------------------------------------------------------------
   SCROLL-REVEAL
   ------------------------------------------------------------ */
.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.revelar.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}


/* ============================================================
   COMPONENTES DE PÁGINAS INTERIORES
   ============================================================ */

/* ------------------------------------------------------------
   HERO DE PÁGINA INTERIOR
   ------------------------------------------------------------ */
.hero-pagina {
  padding-block: var(--esp-bloque) var(--esp-seccion);
  border-bottom: 1px solid var(--concreto);
}

.hero-pagina h1 { max-width: 22ch; }

.hero-pagina .intro {
  font-size: 1.15rem;
  color: var(--gris-calido);
  max-width: var(--ancho-lectura);
  margin: 0;
}


/* ------------------------------------------------------------
   ETAPAS SISTEMA UNO
   Secuencia real de 6 pasos: la numeración codifica orden.
   ------------------------------------------------------------ */
.etapa {
  display: grid;
  gap: 1rem;
  padding-block: var(--esp-bloque);
  border-bottom: 1px solid var(--concreto);
}

.etapa:last-of-type { border-bottom: none; }

@media (min-width: 800px) {
  .etapa { grid-template-columns: 120px 1fr 1fr; gap: 2.5rem; }
}

.etapa__numero {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.22em;
  color: var(--bugambilia);
}

.etapa__numero span {
  display: block;
  font-size: 2.4rem;
  font-weight: var(--peso-ligero);
  letter-spacing: -0.02em;
  color: var(--tinta);
  line-height: 1;
  margin-top: 0.35rem;
}

.etapa h2 { font-size: var(--t-subtitulo); font-weight: var(--peso-fuerte); letter-spacing: 0; }

.etapa__detalle {
  color: var(--gris-calido);
  font-size: 0.98rem;
}

.etapa__detalle strong { color: var(--tinta); display: block; margin-bottom: 0.25rem; }


/* ------------------------------------------------------------
   CASOS DE ESTUDIO — CAPAS DE CONSTRUCCIÓN
   Cada caso se narra en 4 pasos: Idea → Diseño → Fabricación → Resultado
   ------------------------------------------------------------ */
.caso {
  padding-block: var(--esp-seccion);
  border-bottom: 1px solid var(--concreto);
}

.caso:last-of-type { border-bottom: none; }

.caso__encabezado { max-width: var(--ancho-lectura); margin-bottom: var(--esp-bloque); }

.caso__sector {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bugambilia);
  margin-bottom: 0.5rem;
}

/* Ficha técnica del caso */
.ficha {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin-block: var(--esp-bloque);
}

@media (min-width: 700px) {
  .ficha { grid-template-columns: repeat(2, 1fr); }
}

.ficha div { border-top: 1px solid var(--concreto); padding-top: 0.9rem; }

.ficha dt {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-calido);
  margin-bottom: 0.35rem;
}

.ficha dd { margin: 0; font-size: 0.98rem; }

/* Capas: 4 pasos visuales */
.capas {
  display: grid;
  gap: var(--esp-bloque);
  counter-reset: capa;
}

@media (min-width: 700px) { .capas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .capas { grid-template-columns: repeat(4, 1fr); } }

.capa { counter-increment: capa; }

.capa__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bugambilia);
  margin-bottom: 0.75rem;
}

.capa__etiqueta::before {
  content: counter(capa, decimal-leading-zero);
  color: var(--tinta);
}

.capa__etiqueta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--concreto);
}

.capa .foto-placeholder { margin-bottom: 0.85rem; }

.capa p { font-size: 0.93rem; color: var(--gris-calido); margin: 0; }


/* ------------------------------------------------------------
   SECTORES
   ------------------------------------------------------------ */
.sector {
  display: grid;
  gap: var(--esp-bloque);
  padding-block: var(--esp-seccion);
  border-bottom: 1px solid var(--concreto);
}

.sector:last-of-type { border-bottom: none; }

@media (min-width: 900px) {
  .sector { grid-template-columns: 1fr 1fr; align-items: center; }
  .sector:nth-of-type(even) .sector__texto { order: 2; }
}

.sector__texto .intro { color: var(--gris-calido); }

.sector__lista {
  list-style: none;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
}

.sector__lista li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  position: relative;
  font-size: 0.98rem;
  color: var(--gris-calido);
}

.sector__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 0.85rem;
  height: 1px;
  background: var(--bugambilia);
}


/* ------------------------------------------------------------
   FAQ (details/summary)
   ------------------------------------------------------------ */
.faq { max-width: var(--ancho-lectura); }

.faq details { border-bottom: 1px solid var(--concreto); }

.faq summary {
  cursor: pointer;
  padding: 1.1rem 2rem 1.1rem 0;
  font-weight: var(--peso-fuerte);
  font-size: 1rem;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bugambilia);
  font-weight: var(--peso-ligero);
  font-size: 1.4rem;
  transition: transform var(--transicion);
}

.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq details p { color: var(--gris-calido); padding-bottom: 1.1rem; margin: 0; max-width: 60ch; }


/* ------------------------------------------------------------
   RECURSOS / ARTÍCULOS
   ------------------------------------------------------------ */
.lista-articulos { display: grid; gap: var(--esp-bloque); }

@media (min-width: 800px) { .lista-articulos { grid-template-columns: repeat(2, 1fr); } }

.tarjeta-articulo {
  display: block;
  color: inherit;
  border-top: 2px solid var(--tinta);
  padding-top: 1.25rem;
}

.tarjeta-articulo:hover { color: inherit; }
.tarjeta-articulo:hover h2 { color: var(--bugambilia); }

.tarjeta-articulo .tema {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bugambilia);
  margin-bottom: 0.5rem;
}

.tarjeta-articulo h2 {
  font-size: var(--t-subtitulo);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  transition: color var(--transicion);
}

.tarjeta-articulo p { color: var(--gris-calido); font-size: 0.98rem; }

/* Cuerpo de artículo */
.articulo {
  max-width: var(--ancho-lectura);
  margin-inline: auto;
  padding-block: var(--esp-seccion);
}

.articulo h1 { font-size: var(--t-titulo); }

.articulo h2 {
  font-size: 1.35rem;
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  margin-top: 2.5rem;
}

.articulo .entrada {
  font-size: 1.15rem;
  color: var(--gris-calido);
}

.articulo__meta {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bugambilia);
  margin-bottom: 1rem;
}

.articulo__cierre {
  margin-top: 3rem;
  padding: 1.75rem;
  background: var(--papel-hueso);
  border-left: 2px solid var(--bugambilia);
}

.articulo__cierre p { margin-bottom: 1rem; }


/* ------------------------------------------------------------
   FORMULARIO INTELIGENTE (agenda.html)
   Progresivo: un paso visible a la vez, controlado por JS.
   ------------------------------------------------------------ */
.formulario { max-width: 40rem; }

.progreso {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.progreso span {
  flex: 1;
  height: 2px;
  background: var(--concreto);
  transition: background var(--transicion);
}

.progreso span.activo { background: var(--bugambilia); }

.paso { display: none; }
.paso.activo { display: block; }

.paso legend, .paso .pregunta {
  font-size: var(--t-subtitulo);
  font-weight: var(--peso-fuerte);
  padding: 0;
  margin-bottom: 1.25rem;
}

.paso fieldset { border: none; margin: 0; padding: 0; }

/* Opciones tipo tarjeta */
.opciones { display: grid; gap: 0.6rem; }

@media (min-width: 560px) { .opciones { grid-template-columns: repeat(2, 1fr); } }

.opcion { position: relative; }

.opcion input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.opcion label {
  display: block;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--concreto);
  border-radius: var(--radio);
  font-size: 0.98rem;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}

.opcion input:checked + label {
  border-color: var(--bugambilia);
  background: color-mix(in srgb, var(--bugambilia) 6%, transparent);
  font-weight: var(--peso-fuerte);
}

.opcion input:focus-visible + label {
  outline: 2px solid var(--bugambilia);
  outline-offset: 3px;
}

/* Campos de texto */
.campo { margin-bottom: 1.25rem; }

.campo label {
  display: block;
  font-size: 0.9rem;
  font-weight: var(--peso-fuerte);
  margin-bottom: 0.4rem;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--concreto);
  border-radius: var(--radio);
  font-family: var(--fuente);
  font-size: 1rem;
  background: #fff;
  color: var(--tinta);
  transition: border-color var(--transicion);
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--bugambilia);
}

.campo textarea { min-height: 140px; resize: vertical; }

/* Controles de navegación del formulario */
.formulario__controles {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.boton--fantasma {
  border-color: var(--concreto);
  color: var(--gris-calido);
}

.boton--fantasma:hover { background: var(--papel-hueso); color: var(--tinta); }

.formulario .aviso-error {
  color: var(--bugambilia);
  font-size: 0.9rem;
  margin-top: 1rem;
  display: none;
}

.formulario .aviso-error.visible { display: block; }

/* Pasos siguientes (gracias.html) */
.pasos-siguientes {
  list-style: none;
  margin: var(--esp-bloque) 0 0;
  padding: 0;
  max-width: var(--ancho-lectura);
  counter-reset: paso;
}

.pasos-siguientes li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--concreto);
}

.pasos-siguientes li::before {
  content: counter(paso, decimal-leading-zero);
  font-weight: var(--peso-ligero);
  font-size: 1.6rem;
  color: var(--bugambilia);
  line-height: 1.2;
}

.pasos-siguientes strong { display: block; margin-bottom: 0.2rem; }
.pasos-siguientes p { margin: 0; color: var(--gris-calido); font-size: 0.98rem; }


/* ============================================================
   COMPONENTES DE PÁGINAS INTERIORES
   ============================================================ */

/* ------------------------------------------------------------
   HERO INTERIOR (encabezado de página)
   ------------------------------------------------------------ */
.hero-interior {
  padding-block: var(--esp-bloque) var(--esp-seccion);
  border-bottom: 1px solid var(--concreto);
}

.hero-interior h1 { max-width: 20ch; }

.hero-interior .intro {
  font-size: 1.15rem;
  color: var(--gris-calido);
  max-width: var(--ancho-lectura);
  margin: 0;
}


/* ------------------------------------------------------------
   CAPAS DE CONSTRUCCIÓN
   Sistema gráfico de casos: Idea → Diseño → Fabricación → Resultado
   ------------------------------------------------------------ */
.capas {
  display: grid;
  gap: 1.5rem;
  counter-reset: capa;
}

@media (min-width: 700px) {
  .capas { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .capas { grid-template-columns: repeat(4, 1fr); }
}

.capa { counter-increment: capa; }

.capa__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bugambilia);
  margin: 0 0 0.75rem;
}

.capa__etiqueta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--concreto);
}

.capa .foto-placeholder { aspect-ratio: 4 / 3; margin-bottom: 0.75rem; }

.capa p { font-size: 0.92rem; color: var(--gris-calido); margin: 0; }


/* ------------------------------------------------------------
   CASO DE ESTUDIO (proyectos.html)
   ------------------------------------------------------------ */
.caso {
  padding-block: var(--esp-seccion);
  border-bottom: 1px solid var(--concreto);
}

.caso:last-of-type { border-bottom: none; }

.caso__ficha {
  display: grid;
  gap: 0.4rem 2rem;
  margin: var(--esp-bloque) 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--concreto);
}

@media (min-width: 700px) {
  .caso__ficha { grid-template-columns: repeat(3, 1fr); gap: 1.25rem 2rem; }
}

.caso__ficha dt {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bugambilia);
  margin-bottom: 0.2rem;
}

.caso__ficha dd {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--gris-calido);
}


/* ------------------------------------------------------------
   ETAPAS DEL SISTEMA UNO (secuencia real: numeración con sentido)
   ------------------------------------------------------------ */
.etapa {
  display: grid;
  gap: 1rem;
  padding: var(--esp-bloque) 0;
  border-top: 1px solid var(--concreto);
}

@media (min-width: 800px) {
  .etapa { grid-template-columns: 180px 1fr 1fr; gap: 2.5rem; }
}

.etapa__numero {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bugambilia);
}

.etapa__numero strong {
  display: block;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--tinta);
  margin-top: 0.3rem;
}

.etapa h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }

.etapa p { font-size: 0.97rem; color: var(--gris-calido); margin: 0; }

.etapa__entregable {
  font-size: 0.9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--bugambilia);
}

.etapa__entregable strong { color: var(--tinta); display: block; margin-bottom: 0.25rem; }


/* ------------------------------------------------------------
   FAQ (details/summary, sin JS)
   ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--concreto); }

.faq details { border-bottom: 1px solid var(--concreto); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2rem 1.1rem 0;
  font-weight: var(--peso-fuerte);
  font-size: 1rem;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bugambilia);
  font-weight: var(--peso-ligero);
  font-size: 1.4rem;
}

.faq details[open] summary::after { content: "–"; }

.faq details p {
  color: var(--gris-calido);
  font-size: 0.97rem;
  margin: 0 0 1.25rem;
  max-width: var(--ancho-lectura);
}


/* ------------------------------------------------------------
   SECTORES
   ------------------------------------------------------------ */
.sector {
  display: grid;
  gap: var(--esp-bloque);
  padding-block: var(--esp-seccion);
  border-bottom: 1px solid var(--concreto);
}

.sector:last-of-type { border-bottom: none; }

@media (min-width: 800px) {
  .sector { grid-template-columns: 1fr 1fr; align-items: center; }
  .sector--invertido .sector__texto { order: 2; }
}

.sector__texto h2 { margin-bottom: 0.75rem; }

.sector__riesgo {
  padding: 1rem 1.25rem;
  background: var(--papel-hueso);
  border-left: 2px solid var(--bugambilia);
  font-size: 0.95rem;
  color: var(--gris-calido);
  margin: 1.25rem 0;
}

.sector__riesgo strong { color: var(--tinta); }


/* ------------------------------------------------------------
   TARJETAS DE ARTÍCULO (recursos.html)
   ------------------------------------------------------------ */
.tarjeta-articulo {
  display: block;
  color: inherit;
  padding: 1.75rem 0;
  border-top: 1px solid var(--concreto);
}

.tarjeta-articulo:hover { color: inherit; }
.tarjeta-articulo:hover h3 { color: var(--bugambilia); }

.tarjeta-articulo h3 { transition: color var(--transicion); margin-bottom: 0.4rem; }

.tarjeta-articulo__meta {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bugambilia);
  margin-bottom: 0.5rem;
}

.tarjeta-articulo p { color: var(--gris-calido); font-size: 0.97rem; margin: 0; }

.tarjeta-articulo--proximo { opacity: 0.6; cursor: default; }


/* ------------------------------------------------------------
   ARTÍCULO (páginas de blog)
   ------------------------------------------------------------ */
.articulo {
  max-width: var(--ancho-lectura);
  margin-inline: auto;
  padding-block: var(--esp-seccion);
}

.articulo h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }

.articulo h2 {
  font-size: 1.35rem;
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  margin-top: 2.5rem;
}

.articulo .articulo__meta {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bugambilia);
  margin-bottom: 1rem;
}

.articulo .foto-placeholder { aspect-ratio: 16 / 9; margin: 2rem 0; }


/* ------------------------------------------------------------
   FORMULARIO PROGRESIVO (agenda.html)
   ------------------------------------------------------------ */
.formulario {
  max-width: 44rem;
  margin-inline: auto;
}

.formulario__progreso {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 2.5rem;
}

.formulario__progreso span {
  flex: 1;
  height: 2px;
  background: var(--concreto);
  transition: background var(--transicion);
}

.formulario__progreso span.activo { background: var(--bugambilia); }

.paso { display: none; }
.paso.paso--activo { display: block; }

.paso legend, .paso .paso__pregunta {
  font-size: var(--t-subtitulo);
  font-weight: var(--peso-ligero);
  padding: 0;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.paso fieldset { border: none; padding: 0; margin: 0; }

/* Opciones tipo píldora */
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.opciones label {
  display: block;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--concreto);
  border-radius: var(--radio);
  cursor: pointer;
  font-size: 0.97rem;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}

.opciones input { position: absolute; opacity: 0; pointer-events: none; }

.opciones input:checked + span,
.opciones label:has(input:checked) {
  border-color: var(--bugambilia);
  background: var(--bugambilia);
  color: #fff;
}

.opciones label:hover { border-color: var(--bugambilia); }

.opciones input:focus-visible + span,
.opciones label:has(input:focus-visible) {
  outline: 2px solid var(--bugambilia);
  outline-offset: 3px;
}

/* Campos de texto */
.campo { margin-bottom: 1.25rem; }

.campo label {
  display: block;
  font-size: 0.85rem;
  font-weight: var(--peso-fuerte);
  margin-bottom: 0.4rem;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--concreto);
  border-radius: var(--radio);
  background: #fff;
  font-family: var(--fuente);
  font-size: 1rem;
  color: var(--tinta);
  transition: border-color var(--transicion);
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--bugambilia);
}

.formulario__controles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}

.boton--fantasma {
  border-color: transparent;
  color: var(--gris-calido);
  padding-left: 0;
}

.boton--fantasma:hover { background: none; color: var(--tinta); }

.formulario__error {
  color: var(--bugambilia);
  font-size: 0.9rem;
  margin-top: 1rem;
  display: none;
}

.formulario__error.visible { display: block; }


/* ------------------------------------------------------------
   PASOS SIGUIENTES (gracias.html): secuencia real numerada
   ------------------------------------------------------------ */
.pasos-siguientes {
  list-style: none;
  margin: var(--esp-bloque) 0 0;
  padding: 0;
  counter-reset: paso;
  max-width: var(--ancho-lectura);
}

.pasos-siguientes li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.25rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--concreto);
}

.pasos-siguientes li::before {
  content: "0" counter(paso);
  font-weight: var(--peso-fuerte);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--bugambilia);
  padding-top: 0.2rem;
}

.pasos-siguientes strong { display: block; margin-bottom: 0.2rem; }

.pasos-siguientes p { margin: 0; color: var(--gris-calido); font-size: 0.95rem; }