/* =========================================================
   SISTEMA VISUAL GLOBAL — STUDIO CONTABLE GAEL
   Fuente única para etiquetas y botones CTA.

   REGLA RESPONSIVE OBLIGATORIA PARA NUEVAS SECCIONES:
   comprobar 1920, 1440, 1366, 1024, 820, 768, 430, 390, 360 px
   y móvil horizontal. Resolver con Grid/Flexbox/clamp/min/max/media
   queries; nunca con transform:scale(). Evitar overflow horizontal,
   recortes, solapamientos, imágenes deformadas y texto ilegible.
   ========================================================= */

/* ---------- ETIQUETAS / MINI TÍTULOS ---------- */
.etiqueta-seccion{box-sizing:border-box;width:fit-content;max-width:100%;min-height:var(--alto-etiqueta);margin:0;padding:8px 18px;border:var(--borde-etiqueta) solid currentColor;border-radius:var(--radio-etiqueta);display:inline-flex;align-items:center;justify-content:center;gap:12px;background:transparent;font-family:var(--fuente-titulos);font-size:13px;font-weight:700;line-height:1.15;letter-spacing:.015em;text-align:center;text-transform:uppercase;white-space:normal;vertical-align:middle}
.etiqueta-seccion>span{width:6px;height:6px;min-width:6px;min-height:6px;flex:0 0 6px;border-radius:50%;display:block}
.etiqueta-seccion--oscura{border-color:var(--verde-etiqueta-oscura);color:var(--blanco)}
.etiqueta-seccion--oscura>span{background:var(--blanco)}
.etiqueta-seccion--clara{border-color:var(--amarillo);color:var(--verde-oscuro)}
.etiqueta-seccion--clara>span{background:var(--verde-medio)}
.servicios-cabecera .etiqueta-seccion,.equipo-cabecera .etiqueta-seccion,.problemas-cabecera .etiqueta-seccion,.resenas-titulos .etiqueta-seccion,.contacto-cabecera .etiqueta-seccion,.mapa-cabecera .etiqueta-seccion{margin-inline:auto}

/* ---------- CTA PRINCIPAL GLOBAL ----------
   Normal: amarillo + contenido verde oscuro.
   Hover/focus/active: el fondo PERMANECE amarillo; contenido blanco
   y glow amarillo suave. No se generan flechas automáticamente.
   Variantes semánticas:
   .btn-sin-flecha -> header, hero, footer, formularios, envío/agendar.
   .btn-con-flecha -> navegación a servicios, artículos o más contenido.
   --------------------------------------------------------------- */
.btn-principal,.boton-principal.btn-principal{box-sizing:border-box;min-height:var(--alto-boton)!important;max-width:100%;padding:0 28px!important;border:1px solid var(--amarillo)!important;border-radius:var(--radio-boton)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;background:var(--amarillo)!important;color:var(--verde-oscuro)!important;box-shadow:0 6px 18px var(--boton-resplandor)!important;font-family:var(--fuente-titulos)!important;font-size:15px!important;font-weight:700!important;line-height:1.2!important;text-align:center!important;text-decoration:none!important;white-space:normal;cursor:pointer;vertical-align:middle;transform:none!important;animation:none!important;transition:color var(--transicion-ui),box-shadow var(--transicion-ui),border-color var(--transicion-ui),transform var(--transicion-ui)!important}

@media (hover:hover) and (pointer:fine){
  .btn-principal:hover,.boton-principal.btn-principal:hover{background:var(--amarillo)!important;border-color:var(--amarillo)!important;color:var(--blanco)!important;box-shadow:0 7px 20px rgba(255,195,35,.42)!important;transform:none!important}
}
.btn-principal:focus-visible,.boton-principal.btn-principal:focus-visible{background:var(--amarillo)!important;border-color:var(--amarillo)!important;color:var(--blanco)!important;outline:3px solid rgba(255,195,35,.38);outline-offset:3px;box-shadow:0 7px 20px rgba(255,195,35,.42)!important}
.btn-principal:active,.boton-principal.btn-principal:active{background:var(--amarillo)!important;border-color:var(--amarillo)!important;color:var(--blanco)!important;box-shadow:0 5px 16px rgba(255,195,35,.40)!important;transform:translateY(1px)!important}
.btn-principal::before,.btn-principal::after,.boton-principal.btn-principal::before,.boton-principal.btn-principal::after{content:none!important;display:none!important}
.btn-principal .texto-boton,.boton-principal.btn-principal .texto-boton,.btn-principal>span{width:auto!important;min-width:0;margin:0!important;line-height:1.2!important;text-align:center!important;white-space:inherit}

/* Botones sin flecha: no admiten flecha decorativa. */
.btn-sin-flecha>.btn-flecha{display:none!important}

/* Botones que navegan a contenido: flecha como elemento real, nunca absoluta. */
.btn-con-flecha{gap:11px!important}
.btn-con-flecha>.btn-flecha{width:19px!important;height:19px;flex:0 0 19px;display:inline-flex!important;align-items:center;justify-content:center;color:currentColor}
.btn-con-flecha>.btn-flecha svg{width:19px;height:19px;display:block!important;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover) and (pointer:fine){.btn-con-flecha:hover>.btn-flecha{transform:translateX(2px)}}

/* CTA aprobados que incluyen icono funcional. */
.btn-principal.btn-principal--con-icono,.boton-principal.btn-principal.btn-principal--con-icono{gap:10px!important}
.btn-principal.btn-principal--con-icono.btn-con-flecha{gap:10px!important}
.btn-principal--con-icono>.btn-icono{width:20px!important;height:20px;flex:0 0 20px;display:inline-flex;align-items:center;justify-content:center;color:currentColor}
.btn-principal--con-icono>.btn-icono svg{width:20px;height:20px;display:block!important;stroke:currentColor;stroke-width:2;fill:none}

.boton-servicio.btn-principal,.boton-todos-servicios.btn-principal,.boton-evaluacion.btn-principal,.boton-equipo.btn-principal,.boton-envio.btn-principal,.boton-enviar.btn-principal,.enviar-reclamo.btn-principal{align-items:center!important;justify-content:center!important}

/* ---------- RESPONSIVE GLOBAL ---------- */
@media (max-width:991px){
  .etiqueta-seccion{min-height:38px;padding:7px 15px;gap:10px;font-size:11.5px}
  .btn-principal,.boton-principal.btn-principal{min-height:48px!important;padding-inline:22px!important;font-size:14px!important}
}
@media (max-width:560px){
  .etiqueta-seccion{min-height:34px;padding:6px 11px;gap:8px;font-size:10px;line-height:1.2}
  .etiqueta-seccion>span{width:5px;height:5px;min-width:5px;min-height:5px;flex-basis:5px}
  .btn-principal,.boton-principal.btn-principal{min-height:46px!important;padding-inline:18px!important;font-size:13.5px!important}
  .btn-con-flecha{gap:9px!important}
}
@media (prefers-reduced-motion:reduce){.btn-principal,.btn-con-flecha>.btn-flecha{transition:none!important}}

/* V53 · Regla global de iconografía aprobada
   Tamaño estándar basado en el icono "Control contable" del Home.
   Esta variable debe reutilizarse en componentes nuevos de la web. */
:root{
  --gael-icono-estandar:58px;
  --gael-icono-estandar-tablet:56px;
  --gael-icono-estandar-movil:54px;
  --gael-icono-fondo:#f4f7f5;
}