/* ============================================================
   MARCA-CESCAC.CSS — Sistema de marca unificado CESCAC (2026-07-17)
   ------------------------------------------------------------
   Fuente unica de verdad de tokens visuales para TODO el ecosistema
   CESCAC (cescac.com + sub-dominios: geomedhc.com, scireva.cescac.com,
   maquinaria/sublimetsa/servinotec/cevaconstruc.cescac.com, etc).

   USO:
   - cescac.com y los sub-dominios que ya enlazan /css/site.css NO
     necesitan este archivo (site.css ya trae estos mismos tokens
     + todos los componentes: header, footer, cards, botones...).
   - Este archivo es para dominios/paginas con su PROPIO sistema visual
     (ej. geomedhc.com, scireva.cescac.com) que quieren anclarse a la
     familia CESCAC sin perder su identidad de submarca (su logo y,
     si aplica, un color de acento propio se mantienen).
   - Cada submarca conserva SU logo. Lo que se unifica es la base:
     tipografia, radios, sombras, espaciado y el verde/teal CESCAC
     como color de "ecosistema" (botones WhatsApp, sello CESCAC, links
     de retorno a cescac.com).

   Referencia: docs/IDENTIDAD_VISUAL_CESCAC.md (si no existe, este
   archivo pasa a ser la referencia canonica).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

:root {
  /* — Color institucional CESCAC (verde oscuro oficial, Manual de Marca pag.9,
     CMYK C91 M39 Y81 K41, RGB 2,83,56). Nombre de variable "teal" se conserva
     por compatibilidad con el codigo existente que ya la referencia — el VALOR
     ya NO es teal, es el verde institucional. 2026-07-19: migracion aprobada
     por el dueño, el teal #0d9488 estaba documentado como uso INCORRECTO
     explicito en el propio manual (pag.16, "Cambios de Color", tachado). — */
  --cescac-teal: #025338;
  --cescac-teal-dark: #013222;
  --cescac-teal-light: #0f9d6b;

  /* — Verde grupo (uso institucional: sellos, RUC, footer corporativo) — */
  --cescac-verde-grupo: #025338;

  /* — Colores de submarca / anillo oficial (Manual de Marca pag.10-11).
     Aplicar como ACENTO dentro de la seccion propia de cada submarca —
     NUNCA reemplazan el verde institucional, se usan puntualmente
     (bordes, iconos, badges, hover) dentro de esa linea de negocio. — */
  --cescac-construccion: #dd9624;   /* CEVACONSTRUC + Alquiler Maquinaria */
  --cescac-medicina: #3b9fd9;       /* Salud / alianza Dra. Yarlene (geomedhc.com mantiene su propia identidad completa) */
  --cescac-linea-blanca: #e7e6e6;   /* Linea Blanca */
  --cescac-tecnologia: #215da9;     /* Servinotec / Tecnologia */
  --cescac-sublimacion: #8e3089;    /* Sublimetsa / Bordados y Sublimado */
  --cescac-market: #c05d61;         /* Market / Bazar general */
  --cescac-taller-creativo: #64328a; /* Taller Creativo — purpura confirmado por el dueño 2026-07-19 */

  /* — Neutros — */
  --cescac-bg: #ffffff;
  --cescac-bg-soft: #f8fafc;
  --cescac-text: #0f172a;
  --cescac-text-muted: #475569;
  --cescac-border: #e5e7eb;

  /* — WhatsApp CTA (constante en todo el ecosistema) — */
  --cescac-whatsapp: #25d366;
  --cescac-whatsapp-dark: #128c7e;

  /* — Tipografia de marca — */
  --cescac-font-display: "Century Gothic", CenturyGothic, Questrial, Arial, sans-serif; /* Titulos H1-H6 (manual pag.7) */
  --cescac-font-body: Arial, Helvetica, sans-serif;                                    /* Texto, botones, forms (manual pag.8) */

  /* — Radios y sombras (misma familia visual en todo el ecosistema) — */
  --cescac-radius: 12px;
  --cescac-radius-lg: 20px;
  --cescac-shadow: 0 12px 28px rgba(2, 83, 56, .10);
  --cescac-ease: cubic-bezier(.22,1,.36,1);
}

/* — Anclaje tipografico minimo (no rompe layout existente, solo fuente) — */
.cescac-brand-anchor h1,
.cescac-brand-anchor h2,
.cescac-brand-anchor h3,
.cescac-brand-anchor h4 { font-family: var(--cescac-font-display); }
.cescac-brand-anchor,
.cescac-brand-anchor body,
.cescac-brand-anchor p,
.cescac-brand-anchor a,
.cescac-brand-anchor li,
.cescac-brand-anchor span { font-family: var(--cescac-font-body); }

/* — Boton primario CESCAC (reutilizable en cualquier submarca) — */
.cescac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: var(--cescac-radius);
  background: var(--cescac-teal); color: #fff; font-family: var(--cescac-font-body);
  font-weight: 700; text-decoration: none; border: 0; cursor: pointer;
  transition: filter .15s var(--cescac-ease), transform .15s var(--cescac-ease);
}
.cescac-btn:hover { filter: brightness(1.08); color: #fff; }
.cescac-btn-whatsapp { background: linear-gradient(135deg, var(--cescac-whatsapp), var(--cescac-whatsapp-dark)); }

/* — Tarjeta CESCAC (misma familia visual: radios + sombra + borde sutil) — */
.cescac-card {
  background: #fff; border: 1px solid var(--cescac-border); border-radius: var(--cescac-radius-lg);
  padding: 1.5rem; transition: transform .2s var(--cescac-ease), box-shadow .2s var(--cescac-ease);
}
.cescac-card:hover { transform: translateY(-3px); box-shadow: var(--cescac-shadow); }

/* — Sello "Ecosistema CESCAC" (tie-in visual entre submarcas) — */
.cescac-ecosistema-sello {
  text-align: center; padding: 1.75rem 1.25rem; background: var(--cescac-bg-soft);
  border-top: 3px solid var(--cescac-teal); font-family: var(--cescac-font-body);
}
.cescac-ecosistema-sello a { color: var(--cescac-teal); font-weight: 700; text-decoration: none; }
.cescac-ecosistema-sello p { margin: 0; font-size: .9rem; color: var(--cescac-text-muted); max-width: 520px; margin-inline: auto; }